{{-- resources/views/lotes/_form.blade.php --}}

<div class="row">
    {{-- Columna izquierda: Datos Generales --}}
    <div class="col-md-7 col-xl-8">
        <div class="block block-rounded">
            <div class="block-header block-header-default">
                <h3 class="block-title">
                    <i class="fa fa-info-circle me-1 text-muted"></i> Datos del Lote
                </h3>
            </div>
            <div class="block-content">
                <div class="row">
                    {{-- Código de Lote --}}
                    <div class="col-md-6 mb-4">
                        <label class="form-label" for="id">Código de Lote</label>
                        <div class="input-group">
                            <span class="input-group-text bg-body-extra-light"><i class="fa fa-fingerprint"></i></span>
                            <input type="text" name="id" id="id" 
                                   class="form-control form-control-alt"
                                   value="{{ old('id', $lote->id ?? $nuevoId ?? '') }}" readonly>
                        </div>
                    </div>

                    {{-- N° de Lote --}}
                    <div class="col-md-6 mb-4">
                        <label class="form-label" for="nolote">N° de Lote <span class="text-danger">*</span></label>
                        <input type="text" name="nolote" id="nolote"
                               class="form-control form-control-alt @error('nolote') is-invalid @enderror"
                               value="{{ old('nolote', $lote->nombre ?? '') }}" 
                               {{ $lote ? 'readonly' : 'required' }} 
                               maxlength="4" placeholder="Ej: 12">
                        @error('nolote')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>

                {{-- Ubicación (Cascada) --}}
                <div class="row border-bottom mb-4 pb-2">
                    <div class="col-12 mb-3">
                        <label class="form-label">Ubicación Geográfica</label>
                        
                        {{-- Urbanización --}}
                        <div class="mb-3">
                            @if($lote)
                                <input type="text" class="form-control form-control-alt bg-light"
                                       value="{{ $lote->urbanizacionRel->nombre ?? '' }}" readonly>
                                <input type="hidden" name="select1" value="{{ $lote->urbanizacion }}">
                            @else
                                <select name="select1" id="select1" class="form-select form-control-alt @error('select1') is-invalid @enderror"
                                        onchange="cargarDistritos(this.value)" required>
                                    <option value="0">Seleccione Urbanización</option>
                                    @foreach($urbanizaciones as $u)
                                        <option value="{{ $u->id }}" {{ old('select1') == $u->id ? 'selected' : '' }}>
                                            {{ $u->nombre }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('select1')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            @endif
                        </div>

                        {{-- Distrito --}}
                        <div class="mb-3">
                            @if($lote)
                                <input type="text" class="form-control form-control-alt bg-light"
                                       value="{{ $lote->distrito->nombre ?? '' }}" readonly title="Distrito">
                                <input type="hidden" name="select2" value="{{ $lote->relacion }}">
                            @else
                                <select name="select2" id="select2"
                                        class="form-select form-control-alt @error('select2') is-invalid @enderror"
                                        onchange="cargarManzanos(this.value)" disabled required>
                                    <option value="0">Seleccione Distrito</option>
                                </select>
                            @endif
                        </div>

                        {{-- Manzano --}}
                        <div class="mb-3">
                            @if($lote)
                                <div class="input-group">
                                    <span class="input-group-text bg-body-extra-light small text-muted">Manzano</span>
                                    <input type="text" class="form-control form-control-alt bg-light" value="{{ $lote->manzano }}" readonly>
                                </div>
                                <input type="hidden" name="select3" value="{{ $lote->manzano }}">
                            @else
                                <div class="input-group">
                                    <select name="select3" id="select3" class="form-select form-control-alt" disabled
                                            onchange="toggleManzanoNuevo(this.value)">
                                        <option value="0">Seleccione Manzano</option>
                                    </select>
                                    <span class="input-group-text bg-transparent border-0 text-muted">ó</span>
                                    <input type="text" name="manzano" id="manzano-nuevo"
                                           class="form-control form-control-alt @error('manzano') is-invalid @enderror"
                                           placeholder="Escribir nuevo" style="text-transform:uppercase"
                                           maxlength="4">
                                </div>
                                <div class="form-text fs-xs">Use el campo derecho solo si el manzano no aparece en la lista.</div>
                                @error('manzano')<div class="text-danger fs-xs">{{ $message }}</div>@enderror
                            @endif
                        </div>
                    </div>
                </div>

                <div class="row">
                    {{-- Superficie --}}
                    <div class="col-md-6 mb-4">
                        <label class="form-label" for="superficie">Superficie <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <input type="number" step="0.01" name="superficie" id="superficie"
                                   class="form-control form-control-alt @error('superficie') is-invalid @enderror"
                                   value="{{ old('superficie', $lote->superf ?? '') }}"
                                   min="50" required>
                            <span class="input-group-text bg-body-extra-light">m²</span>
                        </div>
                        @error('superficie')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    {{-- Tipo (Radio Inline) --}}
                    <div class="col-md-6 mb-4">
                        <label class="form-label">Tipo de Terreno <span class="text-danger">*</span></label>
                        <div class="space-x-2">
                            @foreach([1=>'Calle', 2=>'Avenida', 3=>'Área Verde'] as $val => $lbl)
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="tipo"
                                           id="tipo{{ $val }}" value="{{ $val }}"
                                           {{ old('tipo', $lote->itetip ?? '') == $val ? 'checked' : '' }} required>
                                    <label class="form-check-label" for="tipo{{ $val }}">{{ $lbl }}</label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                {{-- Individualización --}}
                <div class="mb-4 bg-body-light p-3 rounded">
                    <label class="form-label d-block">Estatus Legal</label>
                    <div class="form-check">
                        @if($lote && $lote->telef)
                            <span class="badge bg-danger">YA INDIVIDUALIZADO (No editable)</span>
                            <input type="hidden" name="telefono" value="1">
                        @else
                            <input class="form-check-input" type="checkbox" name="telefono"
                                   id="telefono" value="1" {{ old('telefono') ? 'checked' : '' }}>
                            <label class="form-check-label fw-semibold" for="telefono">
                                Marcar como Lote Individualizado
                            </label>
                        @endif
                    </div>
                </div>

                {{-- Estado (Solo Edición) --}}
                @if($lote)
                <div class="mb-4">
                    <label class="form-label">Estado Actual</label>
                    @if(auth()->user()->tipo == 1)
                        <div class="row g-2">
                            @foreach([1=>'Disponible',3=>'En Proceso',4=>'Vendido',5=>'En Trámite',6=>'Consolidado'] as $val => $lbl)
                                <div class="col-sm-4">
                                    <div class="form-check form-block">
                                        <input class="form-check-input" type="radio" name="estador"
                                               id="estado{{ $val }}" value="{{ $val }}"
                                               {{ old('estador', $lote->iteest) == $val ? 'checked' : '' }}>
                                        <label class="form-check-label border p-2 rounded w-100 fs-sm" for="estado{{ $val }}">
                                            <span class="d-block fw-bold text-uppercase">{{ $lbl }}</span>
                                        </label>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="p-2 bg-body-dark rounded fw-bold text-center text-uppercase fs-sm">
                            {{ $lote->estado_texto }}
                        </div>
                    @endif
                </div>
                @endif

                {{-- Observaciones --}}
                <div class="mb-4">
                    <label class="form-label" for="observaciones">Observaciones Internas</label>
                    <textarea name="observaciones" id="observaciones" class="form-control form-control-alt" rows="4"
                              placeholder="Notas adicionales sobre el lote...">{{ old('observaciones', $lote->observ ?? '') }}</textarea>
                </div>
            </div>
        </div>
    </div>

    {{-- Columna derecha: Servicios y Checks --}}
    <div class="col-md-5 col-xl-4">
        <div class="block block-rounded">
            <div class="block-header block-header-default">
                <h3 class="block-title">
                    <i class="fa fa-plug me-1 text-muted"></i> Disponibilidad de Servicios
                </h3>
            </div>
            <div class="block-content">
                <div class="space-y-2 mb-4">
                    @foreach([
                      'alcantarillado' => ['campo' => 'alcanta',  'label' => 'Alcantarillado', 'icon' => 'fa-water'],
                      'luz'            => ['campo' => 'luz',       'label' => 'Energía Eléctrica', 'icon' => 'fa-bolt'],
                      'agua'           => ['campo' => 'agua',      'label' => 'Agua Potable', 'icon' => 'fa-tint'],
                      'transporte'     => ['campo' => 'transpor',  'label' => 'Transporte Público', 'icon' => 'fa-bus'],
                      'cordon'         => ['campo' => 'cordon',    'label' => 'Cordón de Acera', 'icon' => 'fa-ruler-horizontal'],
                      'acera'          => ['campo' => 'acera',     'label' => 'Acera Peatonal', 'icon' => 'fa-walking'],
                      'muralla'        => ['campo' => 'muralla',   'label' => 'Muralla Perimetral', 'icon' => 'fa-border-all'],
                    ] as $name => $info)
                        <div class="form-check form-switch p-3 border rounded bg-body-light d-flex align-items-center justify-content-between">
                            <div>
                                <i class="fa {{ $info['icon'] }} me-2 text-muted"></i>
                                <label class="form-check-label fw-medium" for="{{ $name }}">{{ $info['label'] }}</label>
                            </div>
                            <input class="form-check-input ms-0" type="checkbox"
                                   name="{{ $name }}" id="{{ $name }}" value="1"
                                   {{ old($name, $lote ? $lote->{$info['campo']} : 0) ? 'checked' : '' }}>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Manteniendo tu lógica JS original con los selectores actualizados
function cargarDistritos(idUrb) {
    const sel2 = document.getElementById('select2');
    const sel3 = document.getElementById('select3');
    if (!sel2) return;
    sel2.innerHTML = '<option value="0">Cargando distritos...</option>';
    sel2.disabled = true;
    if (sel3) { sel3.innerHTML = '<option value="0">Seleccione Manzano</option>'; sel3.disabled = true; }

    if (idUrb == 0) { sel2.innerHTML = '<option value="0">Seleccione Distrito</option>'; return; }

    fetch(`/lotes/distritos/${idUrb}`)
        .then(r => r.json())
        .then(data => {
            sel2.innerHTML = '<option value="0">Seleccione Distrito</option>';
            data.forEach(d => sel2.innerHTML += `<option value="${d.id}">${d.nombre}</option>`);
            sel2.disabled = false;
        });
}

function cargarManzanos(idDis) {
    const sel3 = document.getElementById('select3');
    if (!sel3) return;
    sel3.innerHTML = '<option value="0">Cargando manzanos...</option>';
    sel3.disabled = true;

    if (idDis == 0) { sel3.innerHTML = '<option value="0">Seleccione Manzano</option>'; return; }

    fetch(`/lotes/manzanos/${idDis}`)
        .then(r => r.json())
        .then(data => {
            sel3.innerHTML = '<option value="0">Seleccione Manzano</option>';
            data.forEach(m => sel3.innerHTML += `<option value="${m}">${m}</option>`);
            sel3.disabled = false;
        });
}

function toggleManzanoNuevo(val) {
    const input = document.getElementById('manzano-nuevo');
    if (!input) return;
    if (val == 0) { input.readOnly = false; input.classList.remove('bg-light'); }
    else { input.value = ''; input.readOnly = true; input.classList.add('bg-light'); }
}
</script>