@extends('layouts.app')

@section('title', 'Registrar Abogado')

@section('content')
<div class="container-fluid p-0">
    <div class="row mb-4">
        <div class="col-12 col-lg-8 mx-auto">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('abogados.index') }}">Abogados</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Registrar</li>
                </ol>
            </nav>
            <h2 class="fw-bold"><i class="fa-solid fa-user-plus text-primary me-2"></i> Registrar Nuevo Abogado</h2>
        </div>
    </div>

    <div class="row">
        <div class="col-12 col-lg-8 mx-auto">
            <div class="card border-0 bg-white p-5 shadow-sm">
                @if ($errors->any())
                    <div class="alert alert-danger border-0 rounded-3 mb-4">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form action="{{ route('abogados.store') }}" method="POST">
                    @csrf
                    
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label for="nombres" class="form-label fw-semibold">Nombres *</label>
                            <input class="form-control @error('nombres') is-invalid @enderror"  type="text"  id="nombres" name="nombres" value="{{ old('nombres') }}" required>
                        </div>
                        <div class="col-md-6">
                            <label for="apellidos" class="form-label fw-semibold">Apellidos *</label>
                            <input class="form-control @error('apellidos') is-invalid @enderror"  type="text"  id="apellidos" name="apellidos" value="{{ old('apellidos') }}" required>
                        </div>
                        <div class="col-md-6">
                            <label for="colegiatura" class="form-label fw-semibold">Código de Colegiatura (CAL) *</label>
                            <input class="form-control @error('colegiatura') is-invalid @enderror"  type="text"  id="colegiatura" name="colegiatura" value="{{ old('colegiatura') }}" placeholder="CAL-XXXX" required>
                        </div>
                        <div class="col-md-6">
                            <label for="especialidad" class="form-label fw-semibold">Especialidad</label>
                            <input class="form-control @error('especialidad') is-invalid @enderror"  type="text"  id="especialidad" name="especialidad" value="{{ old('especialidad') }}" placeholder="Derecho Penal / Civil / Comercial">
                        </div>
                        <div class="col-md-6">
                            <label for="correo" class="form-label fw-semibold">Correo Electrónico *</label>
                            <input class="form-control @error('correo') is-invalid @enderror"  type="email"  id="correo" name="correo" value="{{ old('correo') }}" required>
                        </div>
                        <div class="col-md-6">
                            <label for="telefono" class="form-label fw-semibold">Teléfono</label>
                            <input class="form-control @error('telefono') is-invalid @enderror"  type="text"  id="telefono" name="telefono" value="{{ old('telefono') }}">
                        </div>
                        <div class="col-md-6">
                            <label for="casilla_electronica" class="form-label fw-semibold">Casilla Electrónica</label>
                            <input class="form-control @error('casilla_electronica') is-invalid @enderror"  type="text"  id="casilla_electronica" name="casilla_electronica" value="{{ old('casilla_electronica') }}">
                        </div>
                        <div class="col-md-6">
                            <label for="casilla_fisica" class="form-label fw-semibold">Casilla Física</label>
                            <input class="form-control @error('casilla_fisica') is-invalid @enderror"  type="text"  id="casilla_fisica" name="casilla_fisica" value="{{ old('casilla_fisica') }}">
                        </div>
                    </div>

                    <!-- User Account Generation Switch -->
                    <div class="border rounded-4 p-4 mb-4 bg-light bg-opacity-50">
                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input @error('crear_usuario') is-invalid @enderror"   type="checkbox" role="switch" id="crear_usuario" name="crear_usuario" value="1" {{ old('crear_usuario') ? 'checked' : '' }} onchange="togglePasswordInput(this)">
                            <label class="form-check-label fw-bold text-dark" for="crear_usuario">
                                <i class="fa-solid fa-key text-warning me-1"></i> Crear cuenta de acceso para el abogado
                            </label>
                        </div>
                        <div class="mb-0 d-none" id="password-wrapper">
                            <label for="password" class="form-label fw-semibold">Contraseña de acceso *</label>
                            <input class="form-control @error('password') is-invalid @enderror"  type="password"  id="password" name="password" placeholder="Mínimo 6 caracteres">
                            <div class="form-text small text-muted">El abogado iniciará sesión con su correo electrónico y esta contraseña.</div>
                        </div>
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary-gradient px-4 py-2 rounded-3">Registrar Abogado</button>
                        <a href="{{ route('abogados.index') }}" class="btn btn-light px-4 py-2 rounded-3">Cancelar</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    function togglePasswordInput(checkbox) {
        const wrapper = document.getElementById('password-wrapper');
        const passwordField = document.getElementById('password');
        
        if (checkbox.checked) {
            wrapper.classList.remove('d-none');
            passwordField.setAttribute('required', 'required');
        } else {
            wrapper.classList.add('d-none');
            passwordField.removeAttribute('required');
        }
    }
    
    window.addEventListener('DOMContentLoaded', () => {
        togglePasswordInput(document.getElementById('crear_usuario'));
    });
</script>
@endsection