@extends('layouts.app')

@section('title', 'Reporte — Lotes por Estado')

@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-map-marked-alt text-primary me-2"></i>Lotes de Terreno por Estado
                </h1>
                <h2 class="fs-base lh-base fw-medium text-muted mb-0">
                    Consulta técnica de disponibilidad y situación legal de lotes.
                </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.lotes-por-estado.pdf') }}" target="_blank">
                @csrf

                <div class="block block-rounded block-bordered shadow-sm">
                    <div class="block-header block-header-default">
                        <h3 class="block-title">Filtros 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-danger">*</span></label>
                                <select name="select3" id="select3" class="form-select" disabled required>
                                    <option value="">— Seleccione Mzno —</option>
                                </select>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label text-muted fs-xs fw-bold text-uppercase d-block mb-3">Filtrar por Estado</label>
                            <div class="row g-2">
                                @php
                                    $estados = [
                                        1 => ['label' => 'Disponibles', 'desc' => 'Sin contrato activo'],
                                        3 => ['label' => 'En Proceso', 'desc' => 'Con contrato vigente'],
                                        4 => ['label' => 'Vendidos', 'desc' => 'Saldo cancelado'],
                                        5 => ['label' => 'En Trámite', 'desc' => 'Con orden de trámite'],
                                        6 => ['label' => 'Consolidados', 'desc' => 'Trámite concluido'],
                                        7 => ['label' => 'Todos', 'desc' => 'Sin filtro de estado'],
                                    ];
                                @endphp
                                @foreach($estados as $val => $info)
                                <div class="col-sm-6 col-xl-4">
                                    <div class="form-check form-block">
                                        <input class="form-check-input" type="radio" name="dato" id="dato{{ $val }}" value="{{ $val }}" {{ $val === 1 ? 'checked' : '' }}>
                                        <label class="form-check-label p-2" for="dato{{ $val }}">
                                            <span class="d-block fw-bold fs-sm">{{ $info['label'] }}</span>
                                            <span class="d-block fs-xs text-muted">{{ $info['desc'] }}</span>
                                        </label>
                                    </div>
                                </div>
                                @endforeach
                            </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">
                            <i class="fa fa-file-pdf me-1"></i> Generar Reporte Técnico
                        </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">
                        <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-2 text-uppercase text-primary">Referencia de Situación:</p>
                            <div class="row fs-sm">
                                <div class="col-md-6">
                                    <ul class="list-unstyled">
                                        <li><i class="fa fa-check text-success me-2"></i><strong>Disponibles:</strong> Lotes aptos para nueva venta.</li>
                                        <li><i class="fa fa-clock text-warning me-2"></i><strong>En proceso:</strong> Ventas a crédito activas.</li>
                                        <li><i class="fa fa-handshake text-info me-2"></i><strong>Vendidos:</strong> Propiedad pagada al 100%.</li>
                                    </ul>
                                </div>
                                <div class="col-md-6">
                                    <ul class="list-unstyled">
                                        <li><i class="fa fa-file-signature text-city me-2"></i><strong>En trámite:</strong> Proceso de titulación iniciado.</li>
                                        <li><i class="fa fa-certificate text-smooth me-2"></i><strong>Consolidados:</strong> Titulación finalizada.</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

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

@push('scripts')
<script>
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="">— Seleccione Mzno —</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="">— Seleccione Mzno —</option>';
    selMan.disabled  = true;

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

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

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="">— Seleccione Mzno —</option>';
    selMan.disabled  = true;
}
</script>
@endpush