@extends('layouts.main')

@section('content')
<div class="container-fluid mt-3">
    <div class="row">
        {{-- COLUMNA IZQUIERDA: LISTADO (30%) --}}
        <div class="col-md-4 col-lg-3 border-end" style="height: 85vh; overflow-y: auto;">
            <div class="d-flex justify-content-between align-items-center mb-3 p-2 bg-light sticky-top">
                <h5 class="mb-0">Estructuras</h5>
                <span class="badge bg-primary" id="countEstructuras">0</span>
            </div>
            <div id="listaEstructuras" class="list-group list-group-flush">
                {{-- Aquí se cargarán las cards dinámicamente --}}
                <div class="text-center text-muted small mt-4">No hay estructuras registradas</div>
            </div>
        </div>

        {{-- COLUMNA DERECHA: FORMULARIO (70%) --}}
        <div class="col-md-8 col-lg-9">
            <div class="app-header shadow-sm p-3 mb-3 bg-white rounded d-flex justify-content-between align-items-center border-start border-4 border-primary">
                <div>
                    <strong>Segmento: <span class="badge bg-dark">{{ $segmento }}</span></strong>
                    <small class="text-muted d-block">Levantamiento Cartográfico • MINSAL</small>
                </div>
                <div class="d-flex gap-2">
                    <span id="offlineStatus" class="badge bg-warning d-none">Modo Offline</span>
                    <button class="btn btn-sm btn-outline-secondary" onclick="location.reload()"><i class='bx bx-refresh'></i></button>
                </div>
            </div>

            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <form id="formCartografia">
                        {{-- SECCIÓN VU: VISITAS Y MANZANA --}}
                        <div class="p-3 mb-4 border rounded bg-light">
                            <h6 class="text-primary fw-bold mb-3 border-bottom pb-2">SECCIÓN VU: VISITAS Y UBICACIÓN DE MANZANAS</h6>
                            <div class="row g-2 align-items-start">
                                <div class="col-md-2">
                                    <label class="small fw-bold">VU1: Fecha Visita</label>
                                    <input id="vu1_fecha" type="date" class="form-control" value="{{ date('Y-m-d') }}">
                                </div>
                                
                                <div class="col-md-3">
                                    <label class="small fw-bold">VU2: # Manzana</label>
                                    <select id="vu2_manzana_select" class="form-select border-primary">
                                        <option value="">Seleccione manzana...</option>
                                        <option value="NEW" class="fw-bold text-success">+ CREAR NUEVA MANZANA</option>
                                        
                                        @foreach($manzanasExistentes as $mzn)
                                            <option value="{{ $mzn->vu2_manzana }}" 
                                                    data-id="{{ $mzn->id }}"
                                                    data-d1="{{ $mzn->vu3_direcciones['d1'] ?? '' }}"
                                                    data-d2="{{ $mzn->vu3_direcciones['d2'] ?? '' }}"
                                                    data-d3="{{ $mzn->vu3_direcciones['d3'] ?? '' }}"
                                                    data-d4="{{ $mzn->vu3_direcciones['d4'] ?? '' }}">
                                                Manzana {{ $mzn->vu2_manzana }}
                                            </option>
                                        @endforeach
                                    </select>
                                    {{-- Agregamos el atributo disabled por defecto --}}
                                    <input id="vu2_nueva_mzn" type="text" class="form-control mt-2 d-none" placeholder="Escriba # de nueva manzana" disabled>
                                </div>

                                <div class="col-md-7">
                                    <label class="small fw-bold">VU3: Dirección Detallada</label>
                                    <div class="row g-2">
                                        <div class="col-6"><input id="d1" class="form-control form-control-sm mzn-field" placeholder="D1. Calle/Avenida" disabled></div>
                                        <div class="col-6"><input id="d2" class="form-control form-control-sm mzn-field" placeholder="D2. Pasaje/Block" disabled></div>
                                        <div class="col-6"><input id="d3" class="form-control form-control-sm mzn-field" placeholder="D3. Colonia/Barrio" disabled></div>
                                        <div class="col-6"><input id="d4" class="form-control form-control-sm mzn-field" placeholder="D4. Referencia" disabled></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- SECCIÓN AE: ASIGNACIÓN POR ESTRUCTURAS (UNA SOLA FILA) --}}
                        <div class="p-3 mb-3 border rounded">
                            <h6 class="text-success fw-bold mb-3 border-bottom pb-2">SECCIÓN AE: ASIGNACIÓN DE ENCUESTADOR POR ESTRUCTURAS</h6>
                            <div class="row g-2">
                                <div class="col-md-1">
                                    <label class="small fw-bold">AE1: Orden</label>
                                    <input id="ae1_orden" type="text" class="form-control bg-light" readonly placeholder="Auto">
                                </div>
                                <div class="col-md-2">
                                    <label class="small fw-bold">AE2: Tipo</label>
                                    <select id="ae2_tipo" class="form-select">
                                        <option value="">Seleccione</option>
                                        <option value="1">1. Alcaldía</option>
                                        <option value="2">2. Escuela</option>
                                        <option value="8">8. Vivienda</option>
                                        <option value="9">9. Establecimiento</option>
                                    </select>
                                </div>
                                <div class="col-md-1">
                                    <label class="small fw-bold">AE3: Eleg.</label>
                                    <select id="ae3_elegible" class="form-select">
                                        <option value="1">1. Sí</option>
                                        <option value="2">2. No</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label class="small fw-bold">AE4: # Casa</label>
                                    <input id="ae4_casa" type="text" class="form-control" placeholder="S/N">
                                </div>
                                <div class="col-md-4">
                                    <label class="small fw-bold">AE5: Nombre Encuestador</label>
                                    <input id="ae5_nombre" type="text" class="form-control" placeholder="Nombre completo">
                                </div>
                                <div class="col-md-2">
                                    <label class="small fw-bold">AE7: Resultado</label>
                                    <select id="ae7_resultado" class="form-select">
                                        <option value="1">1. Completa</option>
                                        <option value="2">2. Ausente</option>
                                        <option value="3">3. Rechazo</option>
                                    </select>
                                </div>
                            </div>

                            {{-- FILA FINAL: BOTÓN DE MAPA Y GUARDADO --}}
                            <div class="row mt-4">
                                <div class="col-12">
                                    <button type="button" class="btn btn-dark w-100 py-3 shadow-lg" id="btnConfirmarPunto" onclick="confirmarUbicacionYGuardar()">
                                        <i class='bx bx-map-pin'></i> 3. UBICAR ESTRUCTURA Y FINALIZAR REGISTRO
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        {{-- Inputs ocultos para coordenadas --}}
                        <input type="hidden" id="lat">
                        <input type="hidden" id="lng">
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- MODAL PARA NUEVA MANZANA (RÁPIDO) --}}
<div class="modal fade" id="modalNuevaManzana" tabindex="-1">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h6 class="modal-title">Nueva Manzana</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="text" id="nuevaMznInput" class="form-control form-control-lg text-center" placeholder="Código Mzn">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary w-100" id="btnAgregarMznLocal">Agregar</button>
            </div>
        </div>
    </div>
</div>

{{-- MODAL DEL MAPA --}}
@include('supervisor.mapping.partials.modal_mapa') {{-- Mueve el código del mapa aquí para limpiar --}}

<div id="mapping-config"
     data-segmento="{{ $segmento }}"
     data-csrf="{{ csrf_token() }}"
     data-api="/mapping"
     data-kml="{{ asset('mapping_files/data') }}">
</div>

@include('supervisor.mapping.partials.modal_niveles')
@endsection