@extends('layouts.admin')

@section('content')

<div class="container">
    <div class="row">

        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.index') }}">Inicio</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.cargos-pasivos.index') }}">Cargos Pasivos</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ $title }}</li>
            </ol>
        </nav>

        @if (session('status'))
			<div class="col-12 alert alert-success mb-5">
				{{ session('status') }}
			</div>
		@endif

        <!-- {{-- 1. TÍTULO Y ALERTAS (Todo con sintaxis Blade, cero PHP puro) --}} -->
        <div id="errorsContainer" class="validacion" style="display: none;">
            <div class="col-sm-12">
                <div id="errorsContent" class="alert alert-danger"></div>
            </div>
        </div>

        @if(auth()->user()->hasRol('jefe'))
            <div class="col-sm-12">
                <div class="alert alert-warning">
                    <p>Estimado/a Jefe de Servicio, recomendamos que la creación de sujetos pasivos
                        sea una función <strong>centralizada en los administradores institucionales</strong> de cada servicio
                        público. Para realizar esta operación contáctese con su administrador.</p>
                </div>
            </div>
        @endif

        @if(!empty($title))
            <h2 class="destacado mb-5">{{ $title }}</h2>
        @endif

        <!-- {{-- 2. FORMULARIO INTELIGENTE (Asumiendo las rutas que vimos en pasos anteriores) --}} -->
        <form id="CargosPasivosFormEdit" class="form-horizontal" method="POST" 
            action="{{ $edit ? route('admin.cargos-pasivos.update', $cargo->id) : route('admin.cargos-pasivos.store') }}">
            
            @csrf
            @if($edit) @method('PUT') @endif

            <fieldset>
                <h2 class="line mb-4">1. Información Personal</h2>

                <div class="row py-2">
                    <div class="col-12">
                        <label for="pasaporte" class="form-label">Identificación <span class="text-danger">*</span></label>
                        <div class="row">
                            <div class="col-6">
                                <!-- {{-- Agregamos un ID al select y cambiamos el onchange --}} -->
                                <select id="select_pais_id" onchange="togglePasaporte()" name="usuario[pais_id]" class="form-select mb-0">
                                    <optgroup label="RUT">
                                        <!-- {{-- Por defecto, si es nuevo, queda CHL seleccionado --}} -->
                                        <option value="CHL" {{ old('usuario.pais_id', $cargo->usuario->pais_id ?? 'CHL') == 'CHL' ? 'selected' : '' }}>Chile</option>
                                    </optgroup>
                                    <optgroup label="Pasaporte">
                                        @foreach($paises as $pais)
                                            @if($pais->id !== 'CHL')
                                                <option value="{{ $pais->id }}" {{ old('usuario.pais_id', $cargo->usuario->pais_id ?? '') == $pais->id ? 'selected' : '' }}>
                                                    {{ $pais->nombre }}
                                                </option>
                                            @endif
                                        @endforeach
                                    </optgroup>
                                </select>
                            </div>
                            
                            <!-- {{-- IMPRIMIMOS EL INPUT NATIVAMENTE EN BLADE --}} -->
                            <div class="col-6" id="pasaporteContainer">
                                <span class="pasaporte">
                                    <input name="usuario[pasaporte]" 
                                        value="{{ old('usuario.pasaporte', $cargo->usuario->pasaporte ?? '') }}"
                                        class="form-control pasaporte" 
                                        id="pasaporte" 
                                        placeholder="ej. 12345678-9" 
                                        onblur="checkPassport()" 
                                        required>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-6 py-2">
                        <label for="nombres" class="form-label">Nombres <span class="text-danger">*</span></label>
                        <input name="usuario[nombres]" value="{{ old('usuario.nombres', $cargo->usuario->nombres ?? '') }}" class="form-control" id="nombres" readonly required>
                    </div>
                    <div class="col-6 py-2">
                        <label for="apellidos" class="form-label">Apellidos <span class="text-danger">*</span></label>
                        <input name="usuario[apellidos]" value="{{ old('usuario.apellidos', $cargo->usuario->apellidos ?? '') }}" class="form-control" id="apellidos" readonly required>
                    </div>
                </div>

                <div class="row">
                    <div class="col-6 py-2">
                        <label for="email" class="form-label">E-Mail <span class="text-danger">*</span></label>
                        <input name="usuario[email]" value="{{ old('usuario.email', $cargo->usuario->email ?? '') }}" class="form-control" id="email" readonly required>
                    </div>
                    <div class="col-6 py-2">
                        <label for="telefono" class="form-label">Teléfono <span class="text-danger">*</span></label>
                        <input name="usuario[telefono]" value="{{ old('usuario.telefono', $cargo->usuario->telefono ?? '') }}" class="form-control" id="telefono" disabled>
                    </div>
                </div>
            </fieldset>

            <fieldset>
                <h2 class="line">2. Información del Cargo</h2>

                @if(auth()->user()->root)
                    <div class="row">
                        <div class="col-12 py-2">
                            <label for="institucion" class="form-label">Institución</label>
                            <select id="institucion" name="pasivo[institucion_id]" class="form-control" required>
                                <option value="">Seleccione una</option>
                                @foreach($instituciones->groupBy('padre') as $nombreGrupo => $grupoInstituciones)
                                <optgroup label="{{ $nombreGrupo }}">
                                    
                                    @foreach($grupoInstituciones as $inst)
                                        <option value="{{ $inst->id }}" 
                                            {{ old('pasivo.institucion_id', $cargo->institucion_id ?? '') == $inst->id ? 'selected' : '' }}>
                                            {{ $inst->nombre }}
                                        </option>
                                    @endforeach
                                    
                                </optgroup>
                            @endforeach
                            </select>
                        </div>
                    </div>
                @else
                    <div class="row">
                        <div class="col-12 py-2">
                            <label for="institucion" class="form-label">Institución</label>
                            <input type="text" value="{{ $pertenencia->institucion->nombre }}" disabled class="form-control" />
                            <input type="hidden" value="{{ $pertenencia->institucion->id }}" name="pasivo[institucion_id]" />
                        </div>
                    </div>
                @endif

                <div class="row">
                    <div class="col-12 py-2">
                        <label for="tipo_id" class="form-label">Categoría</label>
                        <select name="pasivo[tipo_id]" id="tipo_id" class="form-select mb-0" required onchange="setCargo()">
                            <option value="">Seleccione una</option>
                            
                            @foreach($tipos as $tipo)
                                <option value="{{ $tipo->id }}" 
                                    {{ old('pasivo.tipo_id', $cargo->tipo_id ?? '') == $tipo->id ? 'selected' : '' }}>
                                    {{ $tipo->valor }}
                                </option>
                            @endforeach
                            
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 py-2">
                        <label for="cargo" class="form-label">Cargo <span class="text-danger">*</span></label>
                        <input name="pasivo[cargo]" value="{{ old('pasivo.cargo', $cargo->cargo ?? '') }}" class="form-control" id="cargo" required>
                    </div>
                </div>

                @if(auth()->user()->hasRol('admin'))
                    <div class="row">
                        <div class="col-12 py-2">
                            <label class="form-label">Jefe de Servicio</label><br>
                            <label><input type="radio" name="pasivo[jefe]" value="1" {{ ($edit && $cargo->jefe) ? 'checked' : '' }}> Sí</label>
                            <label><input type="radio" name="pasivo[jefe]" value="0" {{ (!$edit || !$cargo->jefe) ? 'checked' : '' }}> No</label>
                        </div>
                    </div>
                @endif

                <div class="row">
                    <div class="col-6 py-2">
                        <label for="fecha_inicio" class="form-label">Fecha de Inicio <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                            <input name="pasivo[fecha_inicio]" class="form-control datepicker" id="fecha_inicio" required value="{{ old('pasivo.fecha_inicio', $cargo->fecha_inicio ?? '') }}"">
                        </div>
                    </div>
                    <div class="col-6 py-2">
                        <label for="fecha_termino" class="form-label">Fecha de Término</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                            <input name="pasivo[fecha_termino]" class="form-control datepicker" id="fecha_termino" onchange="fechaTerminoChange()" value="{{ old('pasivo.fecha_termino', $cargo->fecha_termino ?? '') }}" placeholder="Dejar en blanco si continua vigente">
                        </div>
                    </div>
                </div>

                <div id="juridiccionContainer" class="col-12 py-2" style="display: block;">
                    <label class="form-label">Jurisdicción</label>
                    <div class="row">
                        <!-- {{-- SELECT PRINCIPAL TIPO ZONA --}} -->
                        <div class="col-6">
                            <select name="tipoZona" id="tipoZona" class="form-select" onchange="toggleZonas()">
                                <option value="pais" {{ old('tipoZona', $tipoZona ?? '') == 'pais' ? 'selected' : '' }}>Nacional</option>
                                <option value="region" {{ old('tipoZona', $tipoZona ?? '') == 'region' ? 'selected' : '' }}>Regional</option>
                                <option value="provincia" {{ old('tipoZona', $tipoZona ?? '') == 'provincia' ? 'selected' : '' }}>Provincial</option>
                                <option value="comuna" {{ old('tipoZona', $tipoZona ?? '') == 'comuna' ? 'selected' : '' }}>Comunal</option>
                            </select>
                        </div>
                        
                        <!-- {{-- SELECTS SECUNDARIOS (Ocultos por defecto, controlados por JS) --}} -->
                        <div class="col-6">
                            {{-- Select País --}}
                            <select name="pasivo[zona_pais]" id="select_pais" class="form-select select-jurisdiccion" required>
                                <option value="">Seleccione país</option>
                                @foreach($paises as $pais)
                                    <option value="{{ $pais->id }}" {{ old('pasivo.zona_pais', $cargo->zona_pais ?? '') == $pais->id ? 'selected' : '' }}>
                                        {{ $pais->nombre }}
                                    </option>
                                @endforeach
                            </select>

                            <!-- {{-- Select Región (Filtramos la colección directamente en Blade) --}} -->
                            <select name="pasivo[zona]" id="select_region" class="form-select select-jurisdiccion" style="display: none;" required>
                                <option value="">Seleccione región</option>
                                @foreach($zonas->where('tipo', 'region') as $zona)
                                    <option value="{{ $zona->id }}" {{ old('pasivo.zona', $cargo->zona_id ?? '') == $zona->id ? 'selected' : '' }}>
                                        {{ $zona->nombre }}
                                    </option>
                                @endforeach
                            </select>

                            <!-- {{-- Select Provincia --}} -->
                            <select name="pasivo[zona]" id="select_provincia" class="form-select select-jurisdiccion" style="display: none;" required>
                                <option value="">Seleccione provincia</option>
                                @foreach($zonas->where('tipo', 'provincia') as $zona)
                                    <option value="{{ $zona->id }}" {{ old('pasivo.zona', $cargo->zona_id ?? '') == $zona->id ? 'selected' : '' }}>
                                        {{ $zona->nombre }}
                                    </option>
                                @endforeach
                            </select>

                            <!-- {{-- Select Comuna --}} -->
                            <select name="pasivo[zona]" id="select_comuna" class="form-select select-jurisdiccion" style="display: none;" required>
                                <option value="">Seleccione comuna</option>
                                @foreach($zonas->where('tipo', 'comuna') as $zona)
                                    <option value="{{ $zona->id }}" {{ old('pasivo.zona', $cargo->zona_id ?? '') == $zona->id ? 'selected' : '' }}>
                                        {{ $zona->nombre }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 py-2">
                        <label for="resolucion_url" class="form-label">Link a Resolución</label>
                        <input name="pasivo[resolucion_url]" class="form-control" value="{{ old('pasivo.resolucion_url', $cargo->resolucion_url ?? '') }}" id="resolucion_url" placeholder="http://">
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 py-2">
                        <label for="resolucion_texto" class="form-label">Detalle Resolución</label>
                        <textarea name="pasivo[resolucion_texto]" id="resolucion_texto" class="form-control" rows="2">{{ old('pasivo.resolucion_texto', $cargo->resolucion_texto ?? '') }}</textarea>
                    </div>
                </div>
            </fieldset>

            <div class="row mt-4">
                <div class="col-12 text-right">
                    <a href="{{ route('admin.cargos-pasivos.index') }}" class="btn btn-outline-primary me-2">Cancelar</a>
                    <button class="btn btn-primary" type="submit">Guardar</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection


@push('scripts')
    <script src="{{ asset('js/cargo-pasivo.js') }}"></script>
@endpush