@extends('layouts.app')

@section('title', 'Estado de Cuentas de Lotes')

@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-invoice-dollar text-primary me-2"></i>Estado de Cuentas de Lotes
                </h1>
                <h2 class="fs-base lh-base fw-medium text-muted mb-0">
                    Saldos por cobrar, abonos y seguimiento de mora en lotes con contrato.
                </h2>
            </div>
            <div class="mt-3 mt-sm-0 ms-sm-3">
                <a href="{{ route('dashboard') }}" class="btn btn-sm btn-alt-secondary">
                    <i class="fa fa-home me-1"></i> Inicio
                </a>
            </div>
        </div>
    </div>
</div>

<div class="content">
    <div class="row justify-content-center">
        <div class="col-md-11 col-lg-9">

            <form id="formulario" method="POST" action="{{ route('reportes.saldo-por-cobrar.pdf') }}" target="_blank">
                @csrf

                <div class="block block-rounded block-bordered shadow-sm">
                    <div class="block-header block-header-default">
                        <h3 class="block-title">Parámetros de Ubicación</h3>
                    </div>
                    <div class="block-content">

                        @if($errors->any())
                            <div class="alert alert-danger d-flex align-items-center mb-4" role="alert">
                                <div class="flex-shrink-0"><i class="fa fa-fw fa-times-circle"></i></div>
                                <div class="flex-grow-1 ms-3">
                                    <ul class="mb-0 fs-sm">
                                        @foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach
                                    </ul>
                                </div>
                            </div>
                        @endif

                        <div class="row g-3 mb-4">
                            <div class="col-md-4">
                                <label class="form-label text-muted fs-xs fw-bold text-uppercase">Urbanización <span class="text-danger">*</span></label>
                                <select name="select1" id="select1" class="form-select border-primary" required>
                                    <option value="0">— Seleccione —</option>
                                    @foreach($urbanizaciones as $u)
                                        <option value="{{ $u->id }}">{{ $u->id }}. {{ $u->nombre }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label text-muted fs-xs fw-bold text-uppercase">Distrito <span class="text-danger">*</span></label>
                                <select name="select2" id="select2" class="form-select" disabled required>
                                    <option value="0">— Seleccione Distrito —</option>
                                </select>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label text-muted fs-xs fw-bold text-uppercase">
                                    Manzano <span class="text-muted fw-normal">(Opcional)</span>
                                </label>
                                <select name="select3" id="select3" class="form-select" disabled>
                                    <option value="0">— Todos los manzanos —</option>
                                </select>
                                <div class="form-text fs-xs text-info mt-2">
                                    <i class="fa fa-info-circle me-1"></i> Sin manzano busca en todo el distrito.
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="block-content block-content-full block-content-sm bg-body-light border-top text-end">
                        <button type="button" class="btn btn-alt-secondary me-1" onclick="resetForm()">
                            <i class="fa fa-sync-alt me-1"></i> Limpiar
                        </button>
                        <button type="submit" class="btn btn-primary" onclick="return validar()">
                            <i class="fa fa-file-pdf me-1"></i> Generar Reporte de Saldos
                        </button>
                    </div>
                </div>
            </form>

            <div class="block block-rounded block-bordered bg-body-extra-light mt-4">
                <div class="block-content pb-3">
                    <div class="d-flex align-items-center mb-3">
                        <i class="fa fa-book-reader text-primary me-2"></i>
                        <span class="fs-sm fw-bold text-uppercase text-primary">Interpretación del Reporte:</span>
                    </div>
                    <div class="row fs-sm text-muted">
                        <div class="col-md-6">
                            <ul class="fa-ul ml-4">
                                <li><span class="fa-li"><i class="fa fa-check-circle text-success"></i></span><strong>Al día:</strong> Retraso menor a 90 días (Estado óptimo).</li>
                                <li><span class="fa-li"><i class="fa fa-exclamation-triangle text-danger"></i></span><strong>En Mora:</strong> Retraso mayor a 90 días (Resaltado en rojo).</li>
                            </ul>
                        </div>
                        <div class="col-md-6 border-start-md">
                            <ul class="fa-ul ml-4">
                                <li><span class="fa-li"><i class="fa fa-calculator text-muted"></i></span><strong>Finanzas:</strong> Incluye Cargo total, Abono acumulado y Saldo neto.</li>
                                <li><span class="fa-li"><i class="fa fa-history text-muted"></i></span><strong>Antigüedad:</strong> Cálculo exacto de días de retraso por lote.</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// --- Cascada Urbanización → Distrito → Manzano ---
document.getElementById('select1').addEventListener('change', function () {
    const idUrb  = this.value;
    const selDis = document.getElementById('select2');
    const selMan = document.getElementById('select3');

    selDis.innerHTML = '<option value="0">— Seleccione Distrito —</option>';
    selDis.disabled  = true;
    selMan.innerHTML = '<option value="0">— Todos los manzanos —</option>';
    selMan.disabled  = true;

    if (idUrb === '0') return;

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

document.getElementById('select2').addEventListener('change', function () {
    const idDis = this.value;
    const selMan = document.getElementById('select3');

    selMan.innerHTML = '<option value="0">— Todos los manzanos —</option>';
    selMan.disabled  = true;

    if (idDis === '0') return;

    selMan.innerHTML = '<option value="0">Cargando...</option>';
    fetch(`/reportes/ajax/manzanos/${idDis}`)
        .then(r => r.json())
        .then(data => {
            selMan.innerHTML = '<option value="0">— Todos los manzanos —</option>';
            data.forEach(m => {
                selMan.innerHTML += `<option value="${m}">${m}</option>`;
            });
            selMan.disabled = false;
        });
});

function validar() {
    const urb  = document.getElementById('select1').value;
    const dist = document.getElementById('select2').value;
    if (urb === '0' || dist === '0') {
        Swal.fire({
            icon: 'warning',
            title: 'Atención',
            text: 'Debe seleccionar al menos Urbanización y Distrito para generar el reporte.'
        });
        return false;
    }
    return true;
}

function resetForm() {
    document.getElementById('formulario').reset();
    const selDis = document.getElementById('select2');
    const selMan = document.getElementById('select3');
    selDis.innerHTML = '<option value="0">— Seleccione Distrito —</option>';
    selDis.disabled  = true;
    selMan.innerHTML = '<option value="0">— Todos los manzanos —</option>';
    selMan.disabled  = true;
}
</script>
@endpush