@extends('layouts.app')
@section('title', isset($usuario) ? __('Editar Usuario') : __('Nuevo Usuario'))

@section('content')
<div class="page-header">
    <h1>
        <i class="bi bi-{{ isset($usuario) ? 'pencil-square' : 'person-plus' }} me-2" style="color:#2563a8"></i>
        {{ isset($usuario) ? __('Editar Usuario') : __('Nuevo Usuario') }}
    </h1>
    <p>{{ isset($usuario) ? __('Modifica los datos del usuario') : __('Rellena los datos para crear un nuevo acceso') }}</p>
</div>

<div class="row justify-content-center">
    <div class="col-lg-6 col-md-8">
        <div class="card">
            <div class="card-header">
                <i class="bi bi-person-badge me-2"></i>{{ __('Datos del usuario') }}
            </div>
            <div class="card-body p-4">

                @if($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0 ps-3">
                        @foreach($errors->all() as $e)
                            <li>{{ $e }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif

                <form method="POST" action="{{ isset($usuario) ? route('admin.usuarios.update', $usuario) : route('admin.usuarios.store') }}">
                    @csrf
                    @if(isset($usuario)) @method('PUT') @endif

                    <div class="mb-3">
                        <label class="form-label fw-semibold" style="font-size:.85rem">{{ __('Nombre completo') }}</label>
                        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                               value="{{ old('name', $usuario->name ?? '') }}" required placeholder="{{ __('Juan García') }}">
                        @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold" style="font-size:.85rem">{{ __('Correo electrónico') }}</label>
                        <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                               value="{{ old('email', $usuario->email ?? '') }}" required placeholder="{{ __('usuario@empresa.com') }}">
                        @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold" style="font-size:.85rem">{{ __('Perfil de acceso') }}</label>
                        <select name="perfil" id="perfil" class="form-select @error('perfil') is-invalid @enderror" required>
                            <option value="">{{ __('— Seleccionar perfil —') }}</option>
                            @foreach(['SuperAdmin','Admin','Compras','Proveedor'] as $p)
                            <option value="{{ $p }}" {{ old('perfil', $usuario->perfil ?? '') === $p ? 'selected' : '' }}>
                                {{ $p }}
                            </option>
                            @endforeach
                        </select>
                        @error('perfil') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="mb-3" id="proveedor-wrapper" style="{{ old('perfil', $usuario->perfil ?? '') === 'Proveedor' ? '' : 'display:none;' }}">
                        <label class="form-label fw-semibold" style="font-size:.85rem">{{ __('Proveedor') }}</label>
                        <select name="idProveedor" id="idProveedor" class="form-select @error('idProveedor') is-invalid @enderror">
                            <option value="">{{ __('— Seleccionar proveedor —') }}</option>
                            @foreach($proveedores as $proveedor)
                                <option value="{{ $proveedor->idProveedor }}"
                                    {{ (string) old('idProveedor', $usuario->idProveedor ?? '') === (string) $proveedor->idProveedor ? 'selected' : '' }}>
                                    {{ $proveedor->Proveedor }}
                                </option>
                            @endforeach
                        </select>
                        @error('idProveedor') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold" style="font-size:.85rem">
                            {{ __('Contraseña') }} {{ isset($usuario) ? __('(dejar vacío para no cambiar)') : '' }}
                        </label>
                        <input type="password" name="password" class="form-control @error('password') is-invalid @enderror"
                            {{ isset($usuario) ? '' : 'required' }} placeholder="••••••••" autocomplete="new-password">
                        @error('password') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold" style="font-size:.85rem">
                            {{ isset($usuario) ? __('Confirmar nueva contraseña') : __('Confirmar contraseña') }}
                        </label>
                        <input type="password" name="password_confirmation"
                            class="form-control @error('password_confirmation') is-invalid @enderror"
                            {{ isset($usuario) ? '' : 'required' }}
                            placeholder="••••••••" autocomplete="new-password">
                        @error('password_confirmation') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="mb-4">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="activo" id="activo" value="1"
                                   {{ old('activo', $usuario->activo ?? true) ? 'checked' : '' }}>
                            <label class="form-check-label" for="activo" style="font-size:.88rem">{{ __('Usuario activo') }}</label>
                        </div>
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary flex-grow-1" style="background:var(--primary);border:none;border-radius:8px">
                            <i class="bi bi-check-lg me-2"></i>{{ isset($usuario) ? __('Guardar cambios') : __('Crear usuario') }}
                        </button>
                        <a href="{{ route('admin.usuarios.index') }}" class="btn btn-outline-secondary" style="border-radius:8px">
                            {{ __('Cancelar') }}
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const perfil = document.getElementById('perfil');
    const proveedorWrapper = document.getElementById('proveedor-wrapper');
    const proveedorSelect = document.getElementById('idProveedor');

    function toggleProveedor() {
        if (perfil.value === 'Proveedor') {
            proveedorWrapper.style.display = '';
        } else {
            proveedorWrapper.style.display = 'none';
            proveedorSelect.value = '';
        }
    }

    perfil.addEventListener('change', toggleProveedor);
    toggleProveedor();
});
</script>
@endpush