@extends('layouts.app')

@section('content')
<div class="bg-body-light">
    <div class="content content-full">
        <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
            <div class="flex-grow-1">
                <h1 class="h3 fw-bold mb-2">
                    <i class="fa fa-file-circle-plus text-teal me-2"></i>Nueva Nota de Entrega
                </h1>
                <h2 class="fs-base lh-base fw-medium text-muted mb-0">
                    Registro de salida de documentos para el correlativo <span class="nav-main-link-badge badge bg-teal">#{{ $nuevoId }}</span>
                </h2>
            </div>
            <div class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3">
                <a href="{{ route('notas.index') }}" class="btn btn-alt-secondary">
                    <i class="fa fa-arrow-left me-1"></i> Cancelar
                </a>
            </div>
        </div>
    </div>
</div>

<div class="content">
    {{-- Alertas de Validación --}}
    @if($errors->any() || session('error'))
        <div class="alert alert-danger d-flex align-items-center mb-4" role="alert">
            <i class="fa fa-fw fa-times-circle me-3"></i>
            <div class="flex-grow-1">
                <p class="mb-0 fw-semibold">{{ session('error') ?? 'Corrija los errores del formulario:' }}</p>
                <ul class="mb-0 fs-sm">
                    @foreach($errors->all() as $e) <li>{{ $e }}</li> @endforeach
                </ul>
            </div>
        </div>
    @endif

    <div class="alert alert-info d-flex align-items-center shadow-sm" role="alert">
        <i class="fa fa-info-circle me-3 fa-2x opacity-50"></i>
        <div class="fs-sm">
            <p class="mb-0"><strong>Importante:</strong> Solo se listan lotes con autorización activa. Los documentos ya entregados aparecerán bloqueados automáticamente para evitar duplicidad.</p>
        </div>
    </div>

    <form method="POST" action="{{ route('notas.store') }}" id="formulario">
        @csrf
        <input type="hidden" name="id" value="{{ $nuevoId }}">

        <div class="row">
            {{-- Bloque Izquierdo: Ubicación y Cliente --}}
            <div class="col-xl-7">
                <div class="block block-rounded block-bordered">
                    <div class="block-header block-header-default border-bottom">
                        <h3 class="block-title">Identificación del Lote</h3>
                    </div>
                    <div class="block-content">
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label class="form-label fs-sm">N° Nota</label>
                                <input type="text" class="form-control form-control-alt fw-bold text-teal" value="{{ $nuevoId }}" readonly>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fs-sm">Fecha de Entrega</label>
                                <input type="text" name="fecha" id="fecha" class="form-control form-control-alt"
                                       value="{{ $hoy }}" placeholder="dd/mm/aaaa" required>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fs-sm" for="select1">Urbanización <span class="text-danger">*</span></label>
                                <select name="select1" id="select1" class="form-select form-select-alt fs-sm" required onchange="cargarDistritos(this.value)">
                                    <option value="0">Seleccione...</option>
                                    @foreach($urbanizaciones as $u)
                                        <option value="{{ $u->id }}">{{ $u->nombre }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fs-sm" for="select2">Distrito <span class="text-danger">*</span></label>
                                <select name="select2" id="select2" class="form-select form-select-alt fs-sm" required disabled onchange="cargarLotes(this.value)">
                                    <option value="0">Seleccione Distrito</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label fs-sm" for="select3">Lote (En Trámite) <span class="text-danger">*</span></label>
                                <select name="select3" id="select3" class="form-select form-select-alt fs-sm border-teal" required disabled onchange="cargarDatosLote(this.value)">
                                    <option value="0">Seleccione Lote</option>
                                </select>
                            </div>
                        </div>

                        <div class="row items-push border-top pt-3">
                            <div class="col-md-8">
                                <label class="form-label fs-sm">Cliente Titular</label>
                                <input type="text" id="select4" name="select4" class="form-control form-control-alt fs-sm fw-bold"
                                       readonly placeholder="Esperando selección de lote...">
                                <input type="hidden" name="idcliente" id="idcliente" value="0">
                                <input type="hidden" name="idtramite" id="idtramite" value="0">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fs-sm">ID Contrato</label>
                                <input type="text" id="idcontrato-display" class="form-control form-control-alt fs-sm text-center" readonly placeholder="—">
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Entrega y Observaciones --}}
                <div class="block block-rounded block-bordered">
                    <div class="block-content">
                        <div class="mb-4">
                            <label class="form-label fs-sm" for="entregado">Recibido por (Nombre Completo) <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="text" name="entregado" id="entregado"
                                       class="form-control form-control-alt @error('entregado') is-invalid @enderror"
                                       maxlength="80" placeholder="Nombre de la persona que recibe">
                                <button type="button" class="btn btn-alt-primary fs-sm" onclick="usarNombreCliente()">
                                    <i class="fa fa-copy"></i>
                                </button>
                            </div>
                        </div>
                        <div class="mb-4">
                            <label class="form-label fs-sm">Observaciones Adicionales <span class="text-danger">*</span></label>
                            <textarea name="observaciones" class="form-control form-control-alt @error('observaciones') is-invalid @enderror"
                                      rows="4" placeholder="Escriba los detalles de la entrega...">{{ old('observaciones') }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Bloque Derecho: Checklist Documental --}}
            <div class="col-xl-5">
                <div class="block block-rounded block-bordered" id="card-tramites" style="opacity:0.6">
                    <div class="block-header block-header-default bg-teal-light border-bottom">
                        <h3 class="block-title">Documentación a Entregar</h3>
                    </div>
                    <div class="block-content p-0">
                        <div class="list-group list-group-flush" id="lista-tramites">
                            @php
                                $tramiteItems = [
                                    'tramite'       => 'Elaboración de Minuta',
                                    'transferencia' => 'Pago de Impuestos Transferencia',
                                    'protocolo'     => 'Elaboración de Protocolo',
                                    'planolote'     => 'Plano de Lote',
                                    'visado'        => 'Visado de Lote',
                                    'minuta'        => 'Minuta de Datos Técnicos',
                                    'ddrr'          => 'Ingreso a Derechos Reales',
                                ];
                            @endphp
                            @foreach($tramiteItems as $campo => $label)
                                <label class="list-group-item list-group-item-action d-flex align-items-center justify-content-between py-3 px-4 mb-0" style="cursor: pointer;">
                                    <span class="fs-sm fw-medium">{{ $label }}</span>
                                    <div class="d-flex align-items-center">
                                        <span id="badge_{{ $campo }}" class="nav-main-link-badge badge bg-warning text-dark me-3" style="display:none;">
                                            <i class="fa fa-lock me-1"></i> ENTREGADO
                                        </span>
                                        <div class="form-check form-switch mb-0">
                                            <input class="form-check-input" type="checkbox" name="{{ $campo }}" 
                                                   id="cb_{{ $campo }}" value="1" disabled style="width: 2.5em;">
                                        </div>
                                    </div>
                                </label>
                            @endforeach
                        </div>
                    </div>
                    <div class="block-content block-content-full bg-body-light border-top">
                        <div class="fs-xs text-muted">
                            <i class="fa fa-info-circle me-1 text-teal"></i> Marque los documentos que está entregando físicamente en este momento.
                        </div>
                    </div>
                </div>

                {{-- Botones de Acción --}}
                <div class="mt-4">
                    <button type="submit" class="btn btn-teal w-100 py-3 mb-2" onclick="return validarFormulario()">
                        <i class="fa fa-save me-1"></i> GENERAR NOTA DE ENTREGA
                    </button>
                    <a href="{{ route('notas.index') }}" class="btn btn-alt-secondary w-100 py-2">
                        <i class="fa fa-times me-1"></i> Cancelar Operación
                    </a>
                </div>
            </div>
        </div>
    </form>
</div>

<style>
    .btn-teal { background-color: #20c997; color: #fff; border:none; }
    .btn-teal:hover { background-color: #1ba87e; color: #fff; }
    .bg-teal-light { background-color: rgba(32, 201, 151, 0.1) !important; }
    .text-teal { color: #1ba87e !important; }
    .border-teal { border-color: #20c997 !important; }
</style>

<script>
// (Mantener el mismo script JS funcional que proporcionaste, solo asegúrate de que los IDs coincidan)
const campos = ['tramite','transferencia','protocolo','planolote','visado','minuta','ddrr'];

function cargarDistritos(idUrb) {
    const sel2 = document.getElementById('select2');
    const sel3 = document.getElementById('select3');
    limpiarDatos();
    sel2.innerHTML = '<option value="0">Cargando...</option>';
    sel2.disabled = true;
    sel3.innerHTML = '<option value="0">Seleccione Lote</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 cargarLotes(idDis) {
    const sel3 = document.getElementById('select3');
    limpiarDatos();
    sel3.innerHTML = '<option value="0">Cargando...</option>';
    sel3.disabled = true;

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

    fetch(`/notas/lotes-en-tramite/${idDis}`)
        .then(r => r.json())
        .then(data => {
            sel3.innerHTML = '<option value="0">Seleccione Lote (En Trámite)</option>';
            if (!data.length) {
                sel3.innerHTML = '<option value="0">Sin lotes en trámite</option>';
                return;
            }
            data.forEach(l => {
                sel3.innerHTML += `<option value="${l.id}">Mzo. ${l.manzano} — Lote ${l.nombre}</option>`;
            });
            sel3.disabled = false;
        });
}

function cargarDatosLote(idLote) {
    limpiarDatos();
    if (idLote == 0) return;

    fetch(`/notas/datos-lote/${idLote}`)
        .then(r => r.json())
        .then(data => {
            document.getElementById('idcliente').value = data.idcliente ?? 0;
            document.getElementById('idtramite').value = data.idtramite ?? 0;
            document.getElementById('select4').value = data.nombre_cliente;
            document.getElementById('idcontrato-display').value = data.idcontrato ?? '—';
            document.getElementById('card-tramites').style.opacity = '1';

            campos.forEach(campo => {
                const cb = document.getElementById(`cb_${campo}`);
                const badge = document.getElementById(`badge_${campo}`);
                const est = data.estado[campo];
                if (est.entregado) {
                    cb.checked = true;
                    cb.disabled = true;
                    badge.style.display = 'inline';
                    cb.parentElement.parentElement.parentElement.classList.add('bg-body-light');
                } else {
                    cb.checked = false;
                    cb.disabled = false;
                    badge.style.display = 'none';
                    cb.parentElement.parentElement.parentElement.classList.remove('bg-body-light');
                }
            });

            if (!document.getElementById('entregado').value) {
                document.getElementById('entregado').value = data.nombre_cliente;
            }
        });
}

function limpiarDatos() {
    document.getElementById('idcliente').value = '0';
    document.getElementById('idtramite').value = '0';
    document.getElementById('select4').value = '';
    document.getElementById('idcontrato-display').value = '';
    document.getElementById('card-tramites').style.opacity = '0.6';
    campos.forEach(campo => {
        const cb = document.getElementById(`cb_${campo}`);
        cb.checked = false;
        cb.disabled = true;
        document.getElementById(`badge_${campo}`).style.display = 'none';
    });
}

function usarNombreCliente() {
    const nombre = document.getElementById('select4').value;
    if (nombre) document.getElementById('entregado').value = nombre;
    else alert('Seleccione primero un lote.');
}

function validarFormulario() {
    const u = document.getElementById('select1').value;
    const l = document.getElementById('select3').value;
    if (u == 0 || l == 0) {
        alert('Seleccione la ubicación completa del lote.'); return false;
    }

    let hayMarcado = false;
    let hayDisponible = false;
    campos.forEach(campo => {
        const cb = document.getElementById(`cb_${campo}`);
        if (!cb.disabled) hayDisponible = true;
        if (!cb.disabled && cb.checked) hayMarcado = true;
    });

    if (!hayDisponible) {
        alert('Todos los documentos ya han sido entregados.'); return false;
    }
    if (!hayMarcado) {
        alert('Debe seleccionar al menos un documento para la nueva nota.'); return false;
    }

    if (document.getElementById('entregado').value.trim().length < 3) {
        alert('Ingrese el nombre de la persona que recibe.'); return false;
    }

    return confirm('¿Desea generar la Nota de Entrega oficial?');
}
</script>
@endsection