@extends('layouts.app')

@section('title', 'Notificaciones')

@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 text-primary me-2"></i>Notificaciones
                </h1>
                <h2 class="fs-base lh-base fw-medium text-muted mb-0">
                    Listado y seguimiento de notificaciones emitidas.
                </h2>
            </div>
            @if(session('tipo_usuario') == 1)
            <div class="mt-3 mt-sm-0 ms-sm-3">
                <a href="{{ route('notificaciones.create') }}" class="btn btn-primary">
                    <i class="fa fa-plus-circle me-1"></i> Nueva Notificación
                </a>
            </div>
            @endif
        </div>
    </div>
</div>

<div class="content">
    @if(session('success'))
        <div class="alert alert-success d-flex align-items-center mb-4" role="alert">
            <div class="flex-shrink-0"><i class="fa fa-fw fa-check-circle"></i></div>
            <div class="flex-grow-1 ms-3">
                <p class="mb-0">{{ session('success') }}</p>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="block block-rounded block-bordered shadow-sm">
        <div class="block-content block-content-full">
            <form method="GET" action="{{ route('notificaciones.index') }}">
                <div class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label fs-xs text-uppercase fw-bold text-muted">Urbanización</label>
                        <select name="urb" id="selUrb" class="form-select form-select-sm">
                            <option value="0">— Todas —</option>
                            @foreach($urbanizaciones as $u)
                                <option value="{{ $u->id }}" {{ $urb == $u->id ? 'selected' : '' }}>
                                    {{ $u->id }}. {{ $u->nombre }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label fs-xs text-uppercase fw-bold text-muted">Distrito</label>
                        <select name="dis" id="selDis" class="form-select form-select-sm">
                            <option value="0">— Todos —</option>
                            @foreach($distritos as $d)
                                <option value="{{ $d->id }}" {{ $dis == $d->id ? 'selected' : '' }}>{{ $d->nombre }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-1">
                        <label class="form-label fs-xs text-uppercase fw-bold text-muted">Mzno</label>
                        <select name="manzano" id="selMan" class="form-select form-select-sm">
                            <option value="">— —</option>
                            @foreach($manzanos as $m)
                                <option value="{{ $m }}" {{ $manzano == $m ? 'selected' : '' }}>{{ $m }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fs-xs text-uppercase fw-bold text-muted">Cód. Cliente</label>
                        <input type="text" class="form-control form-control-sm" name="cliente"
                               value="{{ $cliente }}" placeholder="Buscar por ID..." inputmode="numeric">
                    </div>
                    <div class="col-md-3 d-flex align-items-end gap-2">
                        <button type="submit" class="btn btn-alt-primary btn-sm flex-grow-1">
                            <i class="fa fa-search me-1"></i> Buscar
                        </button>
                        <a href="{{ route('notificaciones.index') }}" class="btn btn-alt-secondary btn-sm" title="Limpiar">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="block block-rounded block-bordered">
        <div class="block-content p-0">
            <div class="table-responsive">
                <table class="table table-vcenter table-hover table-striped mb-0">
                    <thead class="bg-body-dark">
                        <tr class="fs-xs text-uppercase">
                            <th class="text-center" style="width: 70px;">N°</th>
                            <th style="width: 120px;">Fecha</th>
                            <th>Cliente</th>
                            <th>Urb. / Distrito</th>
                            <th class="text-center">Ubicación</th>
                            <th class="text-center" style="width: 80px;">Notif.</th>
                            <th class="text-center" style="width: 120px;">Estado</th>
                        </tr>
                    </thead>
                    <tbody class="fs-sm">
                        @forelse($notificaciones as $n)
                        <tr style="cursor:pointer" onclick="window.location='{{ route('notificaciones.show', $n->id) }}'">
                            <td class="text-center fw-bold text-primary">{{ $n->id }}</td>
                            <td>{{ \App\Helpers\FechaHelper::bdToLocal($n->fecha) }}</td>
                            <td>
                                <div class="fw-semibold">{{ $n->nom_cliente ?? 'Desconocido' }}</div>
                            </td>
                            <td>
                                <div class="fw-medium">{{ $n->nom_urb }}</div>
                                <div class="fs-xs text-muted">{{ $n->nom_dis }}</div>
                            </td>
                            <td class="text-center">
                                <span class="badge bg-body-dark text-dark border">M: {{ $n->manzano }}</span>
                                <span class="badge bg-body-dark text-dark border">L: {{ $n->lote }}</span>
                            </td>
                            <td class="text-center">
                                <span class="badge bg-secondary rounded-pill">{{ $n->nronotificacion }}°</span>
                            </td>
                            <td class="text-center">
                                @if($n->estado == 0)
                                    <span class="badge rounded-pill bg-warning-light text-warning">
                                        <i class="fa fa-clock me-1"></i> Pendiente
                                    </span>
                                @else
                                    <span class="badge rounded-pill bg-success-light text-success">
                                        <i class="fa fa-check me-1"></i> Atendida
                                    </span>
                                @endif
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="text-center py-5">
                                <i class="fa fa-inbox fa-2x text-muted mb-2"></i>
                                <p class="text-muted mb-0">No se encontraron notificaciones.</p>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if($notificaciones->hasPages())
        <div class="block-content block-content-full bg-body-light">
            <div class="d-flex justify-content-center">
                {{ $notificaciones->links() }}
            </div>
        </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
// Mantengo tu lógica AJAX intacta
document.getElementById('selUrb').addEventListener('change', async function () {
    const selDis = document.getElementById('selDis');
    const selMan = document.getElementById('selMan');
    selDis.innerHTML = '<option value="0">— Todos —</option>';
    selMan.innerHTML = '<option value="">— —</option>';
    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>`);
});
document.getElementById('selDis').addEventListener('change', async function () {
    const selMan = document.getElementById('selMan');
    selMan.innerHTML = '<option value="">— —</option>';
    if (this.value == 0) return;
    const data = await fetch(`{{ url('notificaciones/lotes') }}/${this.value}`).then(r => r.json());
    const manzanos = [...new Set(data.map(l => l.manzano))];
    manzanos.forEach(m => selMan.innerHTML += `<option value="${m}">${m}</option>`);
});
</script>
@endpush