@extends('layouts.app')

@section('title', 'Nueva Notificación')

@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-bell-plus text-primary me-2"></i>Nueva Notificación
                </h1>
                <nav class="breadcrumb mb-0 fs-sm">
                    <a class="breadcrumb-item" href="{{ route('notificaciones.index') }}">Notificaciones</a>
                    <span class="breadcrumb-item active">Crear</span>
                </nav>
            </div>
            <div class="mt-3 mt-sm-0">
                <a href="{{ route('notificaciones.index') }}" class="btn btn-sm btn-alt-secondary">
                    <i class="fa fa-arrow-left me-1"></i> Volver
                </a>
            </div>
        </div>
    </div>
</div>

<div class="content">
    <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
            
            @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

            <form method="POST" action="{{ route('notificaciones.store') }}" id="formNotif">
                @csrf
                <div class="block block-rounded block-bordered shadow-sm">
                    <div class="block-header block-header-default">
                        <h3 class="block-title">Registro de Notificación</h3>
                    </div>
                    <div class="block-content">
                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <label class="form-label text-muted fs-xs fw-bold text-uppercase">N° Registro Interno</label>
                                <input type="number" name="id" class="form-control form-control-alt fw-bold"
                                       value="{{ old('id', $nuevoId) }}" readonly>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label text-muted fs-xs fw-bold text-uppercase">Fecha de Emisión <span class="text-danger">*</span></label>
                                <input type="text" name="fecha" id="fecha" class="form-control"
                                       value="{{ old('fecha', $hoy) }}" placeholder="dd/mm/aaaa">
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label text-muted fs-xs fw-bold text-uppercase">Urbanización / Proyecto <span class="text-danger">*</span></label>
                            <select name="select1" id="select1" class="form-select border-primary @error('select1') is-invalid @enderror">
                                <option value="0">— Seleccione —</option>
                                @foreach($urbanizaciones as $u)
                                    <option value="{{ $u->id }}" {{ old('select1') == $u->id ? 'selected' : '' }}>
                                        {{ $u->id }}. {{ $u->nombre }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="row g-3 mb-4">
                            <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 @error('select2') is-invalid @enderror" disabled>
                                    <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">Lote (Mzno - Lote) <span class="text-danger">*</span></label>
                                <select name="select3" id="select3" class="form-select @error('select3') is-invalid @enderror" disabled>
                                    <option value="0">— Seleccione Lote —</option>
                                </select>
                            </div>
                        </div>

                        <div class="block block-rounded bg-body-light mb-4 border-start border-4 border-primary">
                            <div class="block-content py-3">
                                <div class="row g-3 align-items-center">
                                    <div class="col-md-3 text-center border-end-md">
                                        <label class="form-label fs-xs text-uppercase text-muted mb-1">Contrato</label>
                                        <input type="text" id="idcontrato" name="idcontrato"
                                               class="form-control form-control-sm form-control-alt fw-bold text-center text-primary" readonly>
                                    </div>
                                    <div class="col-md-9">
                                        <label class="form-label fs-xs text-uppercase text-muted mb-1">Adjudicatario</label>
                                        <input type="text" id="nomCliente" class="form-control form-control-sm form-control-alt fw-bold" readonly>
                                        <input type="hidden" id="idcliente" name="idcliente">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="previasWrap" class="mb-4 bg-light p-3 rounded-3 border" style="display:none">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="fs-xs fw-bold text-muted text-uppercase">Historial Activo:</span>
                                <span class="badge bg-danger rounded-pill px-3" id="nroSiguiente"></span>
                            </div>
                            <div id="previasLista" class="d-flex flex-wrap gap-2 fs-xs"></div>
                        </div>

                        <hr class="mb-4">

                        <div class="mb-4">
                            <label class="form-label text-muted fs-xs fw-bold text-uppercase">Referencia / Título</label>
                            <input type="text" name="referencia" class="form-control"
                                   value="{{ old('referencia') }}" placeholder="Ej: Primer aviso de mora">
                        </div>

                        <div class="mb-4">
                            <label class="form-label text-muted fs-xs fw-bold text-uppercase">Motivo / Observaciones</label>
                            <textarea name="observaciones" class="form-control"
                                      rows="4" placeholder="Describa el motivo detallado...">{{ old('observaciones') }}</textarea>
                        </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">
                            <i class="fa fa-sync-alt me-1"></i> Limpiar
                        </button>
                        <button type="submit" class="btn btn-primary" onclick="return confirm('¿Guardar Notificación?')">
                            <i class="fa fa-save me-1"></i> Registrar Notificación
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// La lógica JS se mantiene, adaptando los estilos de los badges generados dinámicamente
document.getElementById('select1').addEventListener('change', async function () {
    const selDis  = document.getElementById('select2');
    const selLote = document.getElementById('select3');
    selDis.innerHTML  = '<option value="0">— Seleccione Distrito —</option>';
    selLote.innerHTML = '<option value="0">— Seleccione Lote —</option>';
    selDis.disabled  = true;
    selLote.disabled = true;
    limpiarCliente();

    if (this.value == 0) return;

    const data = await fetch(`{{ url('notificaciones/distritos') }}/${this.value}`).then(r => r.json());
    data.forEach(d => selDis.innerHTML += `<option value="${d.id}">${d.nombre}</option>`);
    selDis.disabled = false;
});

document.getElementById('select2').addEventListener('change', async function () {
    const selLote = document.getElementById('select3');
    selLote.innerHTML = '<option value="0">— Seleccione Lote —</option>';
    selLote.disabled  = true;
    limpiarCliente();

    if (this.value == 0) return;

    const data = await fetch(`{{ url('notificaciones/lotes') }}/${this.value}`).then(r => r.json());
    data.forEach(l => selLote.innerHTML += `<option value="${l.id}">${l.manzano} — ${l.nombre}</option>`);
    selLote.disabled = false;
});

document.getElementById('select3').addEventListener('change', async function () {
    limpiarCliente();
    if (this.value == 0) return;

    const data = await fetch(`{{ url('notificaciones/datos-lote') }}/${this.value}`).then(r => r.json());

    document.getElementById('idcontrato').value = data.idcontrato ?? '';
    document.getElementById('idcliente').value  = data.idcliente  ?? '';
    document.getElementById('nomCliente').value = data.nom_cliente ?? '';

    const wrap = document.getElementById('previasWrap');
    wrap.style.display = 'block';
    document.getElementById('nroSiguiente').textContent = data.nro_siguiente + '° Notificación';

    const lista = document.getElementById('previasLista');
    if (data.previas && data.previas.length > 0) {
        lista.innerHTML = data.previas.map(p =>
            `<span class="badge bg-alt-danger text-danger border border-danger-light p-2">${p.nronotificacion}° — ${p.referencia || 'Pendiente'}</span>`
        ).join('');
    } else {
        lista.innerHTML = '<em class="text-muted">Sin antecedentes activos</em>';
    }
});

function limpiarCliente() {
    document.getElementById('idcontrato').value = '';
    document.getElementById('idcliente').value  = '';
    document.getElementById('nomCliente').value = '';
    document.getElementById('previasWrap').style.display = 'none';
}
</script>
@endpush