@extends('layouts.app')

@section('title', 'Nueva Autorización de Trámite')

@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">
            <div class="flex-grow-1">
                <h1 class="h3 fw-bold mb-1">
                    <i class="fa fa-stamp text-primary me-2"></i>Nueva Autorización de Trámite
                </h1>
                <h2 class="fs-base fw-medium text-muted mb-0">
                    Registro de expediente automático — ID de Control: #{{ $nuevoId }}
                </h2>
            </div>
            <div class="mt-3 mt-sm-0">
                <a href="{{ route('autorizaciones.index') }}" class="btn btn-sm btn-alt-secondary">
                    <i class="fa fa-arrow-left me-1"></i> Volver al listado
                </a>
            </div>
        </div>
    </div>
</div>

<div class="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">
                <p class="mb-0">Por favor, corrija los siguientes errores:</p>
                <ul class="mb-0 fs-sm">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
            </div>
        </div>
    @endif

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

        <div class="row items-push">
            <div class="col-xl-8">
                <div class="block block-rounded block-bordered">
                    <div class="block-header block-header-default">
                        <h3 class="block-title">Ubicación y Selección de Lote</h3>
                    </div>
                    <div class="block-content block-content-full">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <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-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-4">
                                <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-sm" required disabled onchange="cargarLotes(this.value)">
                                    <option value="0">Seleccione Distrito</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fs-sm" for="select3">Manzano — Lote <span class="text-danger">*</span></label>
                                <select name="select3" id="select3" class="form-select form-select-sm" required disabled onchange="cargarDatosLote(this.value)">
                                    <option value="0">Seleccione Lote</option>
                                </select>
                                <div class="form-text fs-xs">Solo lotes en estado <strong>Vendido</strong>.</div>
                            </div>

                            <hr class="my-4">

                            <div class="col-md-4">
                                <label class="form-label fs-sm">Contrato de Venta</label>
                                <input type="text" id="idcontrato-display" class="form-control form-control-sm bg-body-light fw-bold" readonly placeholder="N° Contrato">
                                <input type="hidden" name="idcontrato" id="idcontrato" value="0">
                            </div>
                            <div class="col-md-8">
                                <label class="form-label fs-sm">Nombre del Cliente Titular</label>
                                <input type="text" id="select4-display" name="select4" class="form-control form-control-sm bg-body-light fw-bold" readonly placeholder="Titular del lote">
                                <input type="hidden" name="idcliente" id="idcliente" value="0">
                            </div>

                            <div class="col-12">
                                <label class="form-label fs-sm" for="entregado">Responsable de Recojo (Entregado a) <span class="text-danger">*</span></label>
                                <div class="input-group input-group-sm">
                                    <input type="text" name="entregado" id="entregado" class="form-control @error('entregado') is-invalid @enderror" maxlength="80" placeholder="Nombre de quien recibe el documento">
                                    <button type="button" class="btn btn-alt-primary" onclick="copiarNombreCliente()">
                                        <i class="fa fa-copy me-1"></i> Usar Titular
                                    </button>
                                </div>
                                @error('entregado')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-12">
                                <label class="form-label fs-sm" for="observaciones">Observaciones del Trámite <span class="text-danger">*</span></label>
                                <textarea name="observaciones" class="form-control form-control-sm @error('observaciones') is-invalid @enderror" rows="3" maxlength="200" placeholder="Escriba aquí detalles o motivos adicionales...">{{ old('observaciones') }}</textarea>
                                @error('observaciones')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>
                    </div>
                    <div class="block-content block-content-full block-content-sm bg-body-light text-end">
                        <button type="submit" class="btn btn-sm btn-primary" onclick="return validarFormulario()">
                            <i class="fa fa-save me-1"></i> Guardar y Crear Expediente
                        </button>
                        <a href="{{ route('autorizaciones.index') }}" class="btn btn-sm btn-alt-secondary" onclick="return confirm('¿Cancelar registro?')">
                            <i class="fa fa-times me-1"></i> Cancelar
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="block block-rounded">
                    <div class="block-header block-header-default">
                        <h3 class="block-title">Control de Fecha</h3>
                    </div>
                    <div class="block-content block-content-full">
                        <label class="form-label fs-sm">Fecha de Autorización</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fa fa-calendar-alt"></i></span>
                            <input type="text" name="fecha" id="fecha" class="form-control" value="{{ $hoy }}" placeholder="dd/mm/aaaa" required>
                        </div>
                    </div>
                </div>

                <div class="block block-rounded bg-info-light">
                    <div class="block-content block-content-full d-flex align-items-center justify-content-between">
                        <div class="me-3">
                            <p class="fs-sm fw-medium text-info mb-0">
                                <i class="fa fa-info-circle me-1"></i> Automatización:
                            </p>
                            <p class="fs-xs text-info-dark mb-0">
                                <strong>Solo se muestran lotes en estado Vendido (pagados completamente).</strong>
        Al guardar se creará automáticamente el trámite y sus tablas asociadas
        (transferencias, protocolos, planolotes, visados, minutas, derechos reales).
        El lote pasará a estado <strong>En Trámite</strong>.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

{{-- Tu script original intacto para que no se pierda la funcionalidad --}}
<script>
function cargarDistritos(idUrb) {
    const sel2 = document.getElementById('select2');
    const sel3 = document.getElementById('select3');
    limpiarLote();
    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');
    limpiarLote();
    sel3.innerHTML = '<option value="0">Cargando...</option>';
    sel3.disabled = true;
    if (idDis == 0) { sel3.innerHTML = '<option value="0">Seleccione Lote</option>'; return; }
    fetch(`/autorizaciones/lotes-disponibles/${idDis}`)
        .then(r => r.json())
        .then(data => {
            sel3.innerHTML = '<option value="0">Seleccione Lote (Vendido)</option>';
            if (!data.length) { sel3.innerHTML = '<option value="0">Sin lotes disponibles</option>'; return; }
            data.forEach(l => {
                sel3.innerHTML += `<option value="${l.id}">Mzo. ${l.manzano} — Lote ${l.nombre}</option>`;
            });
            sel3.disabled = false;
        });
}

function cargarDatosLote(idLote) {
    limpiarLote();
    if (idLote == 0) return;
    fetch(`/autorizaciones/datos-lote/${idLote}`)
        .then(r => r.json())
        .then(data => {
            document.getElementById('idcontrato').value = data.idcontrato ?? 0;
            document.getElementById('idcontrato-display').value = data.idcontrato ?? '—';
            document.getElementById('idcliente').value = data.idcliente ?? 0;
            document.getElementById('select4-display').value = data.nombre_cliente;
            if (!document.getElementById('entregado').value) {
                document.getElementById('entregado').value = data.nombre_cliente;
            }
        });
}

function limpiarLote() {
    document.getElementById('idcontrato').value = '0';
    document.getElementById('idcontrato-display').value = '';
    document.getElementById('idcliente').value = '0';
    document.getElementById('select4-display').value = '';
}

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

function validarFormulario() {
    const u = document.getElementById('select1').value;
    const d = document.getElementById('select2').value;
    const l = document.getElementById('select3').value;
    if (u == 0 || d == 0 || l == 0) { alert('Seleccione ubicación completa.'); return false; }
    const entregado = document.getElementById('entregado').value.trim();
    if (entregado.length < 3) { alert('Nombre del responsable inválido.'); return false; }
    return confirm('¿Guardar autorización? Se creará el expediente completo.');
}
</script>
@endsection