@extends('layouts.app')

@section('title', 'Reporte de Contratos')

@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-pdf text-primary me-2"></i>Reporte de Contratos
                </h1>
                <h2 class="fs-base lh-base fw-medium text-muted mb-0">
                    Generación de listados de contratos filtrados por ubicación y estado.
                </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-10 col-lg-7">

            <form id="formulario" method="POST" action="{{ route('reportes.contratos.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 del Reporte</h3>
                    </div>
                    <div class="block-content">

                        @if($errors->any())
                            <div class="alert alert-danger d-flex align-items-center" 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-12">
                                <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 Urbanización —</option>
                                    @foreach($urbanizaciones as $u)
                                        <option value="{{ $u->id }}">{{ $u->id }}. {{ $u->nombre }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6">
                                <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-6">
                                <label class="form-label text-muted fs-xs fw-bold text-uppercase">Manzano</label>
                                <select name="select3" id="select3" class="form-select" disabled>
                                    <option value="0">— Todos —</option>
                                </select>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label text-muted fs-xs fw-bold text-uppercase d-block mb-3">Estado del Contrato</label>
                            <div class="row g-2">
                                <div class="col-sm-6">
                                    <div class="form-check form-block">
                                        <input class="form-check-input" type="radio" name="dato" id="dato9" value="9" checked>
                                        <label class="form-check-label p-2" for="dato9">
                                            <span class="d-block fw-bold fs-sm">Vigentes</span>
                                            <span class="d-block fs-xs text-muted">Con saldo pendiente</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-check form-block">
                                        <input class="form-check-input" type="radio" name="dato" id="dato0" value="0">
                                        <label class="form-check-label p-2" for="dato0">
                                            <span class="d-block fw-bold fs-sm">Anulados</span>
                                            <span class="d-block fs-xs text-muted">Contratos descartados</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-check form-block">
                                        <input class="form-check-input" type="radio" name="dato" id="dato8" value="8">
                                        <label class="form-check-label p-2" for="dato8">
                                            <span class="d-block fw-bold fs-sm">Cancelados</span>
                                            <span class="d-block fs-xs text-muted">Saldo total pagado</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-check form-block">
                                        <input class="form-check-input" type="radio" name="dato" id="dato7" value="7">
                                        <label class="form-check-label p-2" for="dato7">
                                            <span class="d-block fw-bold fs-sm">Todos</span>
                                            <span class="d-block fs-xs text-muted">Sin filtrar estado</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="block-content block-content-full block-content-sm bg-body-light border-top text-end">
                        <button type="reset" class="btn btn-alt-secondary me-1" onclick="resetSelects()">
                            <i class="fa fa-sync-alt me-1"></i> Limpiar
                        </button>
                        <button type="submit" class="btn btn-danger">
                            <i class="fa fa-file-pdf me-1"></i> Generar Reporte PDF
                        </button>
                    </div>
                </div>
            </form>

            <div class="block block-rounded block-bordered bg-body-extra-light mt-4">
                <div class="block-content">
                    <div class="d-flex">
                        <div class="flex-shrink-0 me-3">
                            <i class="fa fa-info-circle text-primary fa-2x"></i>
                        </div>
                        <div class="flex-grow-1">
                            <p class="fs-sm fw-bold mb-1 text-uppercase text-primary">Descripción de filtros:</p>
                            <ul class="fs-sm mb-3">
                                <li><strong>Vigentes:</strong> Contratos con saldo pendiente de pago.</li>
                                <li><strong>Anulados:</strong> Registros que han sido cancelados administrativamente.</li>
                                <li><strong>Cancelados:</strong> Contratos cuya deuda ha llegado a cero.</li>
                                <li><strong>Todos:</strong> Incluye los tres estados mencionados.</li>
                            </ul>
                            <p class="fs-xs text-muted italic border-top pt-2">
                                <i class="fa fa-exclamation-triangle me-1"></i> Asegúrate de permitir las ventanas emergentes (pop-ups) en tu navegador para visualizar el PDF.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

@push('scripts')
<script>
// Lógica de cascada adaptada
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 —</option>';
    selMan.disabled = true;

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

    selDis.innerHTML = '<option value="0">Cargando distritos...</option>';

    fetch(`/reportes/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 —</option>';
    selMan.disabled = true;

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

    selMan.innerHTML = '<option value="0">Cargando manzanos...</option>';

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

function resetSelects() {
    // Pequeño delay para que el "type=reset" limpie los inputs antes de ejecutar la lógica manual
    setTimeout(() => {
        document.getElementById('select2').disabled = true;
        document.getElementById('select3').disabled = true;
        document.getElementById('select2').innerHTML = '<option value="0">— Seleccione Distrito —</option>';
        document.getElementById('select3').innerHTML = '<option value="0">— Todos —</option>';
    }, 50);
}
</script>
@endpush
@endsection