{{-- New-Unity ERP | app/Modules/Admin/Resources/Views/notifications/index.blade.php | v1.1 | 27/07/2026 --}}
{{-- v1.1 — Fix: @push → @section (layout usa @yield para scripts, no @stack). --}}
{{-- v1.0 — Centro de notificaciones: filtros por tipo/estado/fecha, paginación, mark-as-read. --}}

@extends('layouts.vertical')

@section('title', 'Notificaciones')

@section('content')
<div class="subheader">
    <h1 class="subheader-title">
        <i class="fal fa-bell me-2"></i> Notificaciones
        @if($unreadCount > 0)
        <span class="badge bg-danger ms-2">{{ $unreadCount }} sin leer</span>
        @endif
    </h1>
    <div class="subheader-block">
        @if($unreadCount > 0)
        <button type="button" class="btn btn-sm btn-outline-secondary" onclick="markAllRead()">
            <i class="fal fa-check-double me-1"></i> Marcar todas como leídas
        </button>
        @endif
    </div>
</div>

<div class="row">
    <div class="col-12">

        {{-- Filtros --}}
        <div class="card mb-3">
            <div class="card-body py-2">
                <form method="GET" class="d-flex flex-wrap gap-2 align-items-end">
                    <div>
                        <label class="form-label mb-1 fs-xs">Tipo</label>
                        <select name="type" class="form-select form-select-sm">
                            <option value="">Todos</option>
                            @foreach(['mrp' => 'MRP', 'stock' => 'Stock', 'sales' => 'Ventas', 'billing' => 'Facturación', 'system' => 'Sistema', 'crm' => 'CRM'] as $val => $label)
                            <option value="{{ $val }}" @selected(request('type') === $val)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="form-label mb-1 fs-xs">Estado</label>
                        <select name="status" class="form-select form-select-sm">
                            <option value="">Todas</option>
                            <option value="unread" @selected(request('status') === 'unread')>Sin leer</option>
                            <option value="read"   @selected(request('status') === 'read')>Leídas</option>
                        </select>
                    </div>
                    <div>
                        <label class="form-label mb-1 fs-xs">Desde</label>
                        <input type="date" name="from" class="form-control form-control-sm" value="{{ request('from') }}">
                    </div>
                    <div>
                        <label class="form-label mb-1 fs-xs">Hasta</label>
                        <input type="date" name="to" class="form-control form-control-sm" value="{{ request('to') }}">
                    </div>
                    <div>
                        <button type="submit" class="btn btn-sm btn-primary">
                            <i class="fal fa-filter me-1"></i> Filtrar
                        </button>
                        <a href="{{ route('admin.notifications.index') }}" class="btn btn-sm btn-outline-secondary ms-1">
                            <i class="fal fa-times me-1"></i> Limpiar
                        </a>
                    </div>
                </form>
            </div>
        </div>

        {{-- Lista --}}
        <div class="card">
            <div class="card-body p-0">
                @if($notifications->isEmpty())
                <div class="d-flex flex-column align-items-center justify-content-center py-5 text-muted">
                    <i class="fal fa-bell-slash" style="font-size:3rem;"></i>
                    <p class="mt-3 mb-0">Sin notificaciones con los filtros seleccionados.</p>
                </div>
                @else
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th style="width:40px;"></th>
                                <th style="width:90px;">Tipo</th>
                                <th>Título / Mensaje</th>
                                <th style="width:160px;">Fecha</th>
                                <th style="width:80px;"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($notifications as $notif)
                            @php
                                $tc = \App\Modules\Admin\Models\Notification::TYPE_COLORS[$notif->type] ?? 'secondary';
                                $typeLabels = ['mrp' => 'MRP', 'stock' => 'Stock', 'sales' => 'Ventas', 'billing' => 'Facturación', 'system' => 'Sistema', 'crm' => 'CRM'];
                            @endphp
                            <tr class="{{ $notif->is_read ? '' : 'fw-600 table-active' }}" id="row-{{ $notif->id }}">
                                <td class="text-center">
                                    @if(!$notif->is_read)
                                    <span class="badge bg-{{ $tc }}" style="width:8px;height:8px;border-radius:50%;padding:0;">&nbsp;</span>
                                    @endif
                                </td>
                                <td>
                                    <span class="badge bg-{{ $tc }}">{{ $typeLabels[$notif->type] ?? strtoupper($notif->type) }}</span>
                                </td>
                                <td>
                                    <div class="fw-500">{{ $notif->title }}</div>
                                    <div class="text-muted fs-sm">{{ $notif->message }}</div>
                                    @if($notif->action_url)
                                    <a href="{{ $notif->action_url }}" class="fs-xs"
                                       onclick="if(!{{ $notif->is_read ? 'true' : 'false' }}) markRead({{ $notif->id }})">
                                        <i class="fal fa-external-link-alt me-1"></i> Ver detalle
                                    </a>
                                    @endif
                                </td>
                                <td class="text-muted fs-sm">
                                    {{ $notif->created_at->format('d/m/Y H:i') }}<br>
                                    <span class="fs-nano">{{ $notif->created_at->diffForHumans() }}</span>
                                </td>
                                <td class="text-center">
                                    @if(!$notif->is_read)
                                    <button type="button" class="btn btn-xs btn-outline-secondary"
                                            onclick="markRead({{ $notif->id }})" title="Marcar como leída">
                                        <i class="fal fa-check"></i>
                                    </button>
                                    @else
                                    <span class="text-muted fs-nano">Leída</span>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                @if($notifications->hasPages())
                <div class="card-footer d-flex justify-content-end">
                    {{ $notifications->links() }}
                </div>
                @endif
                @endif
            </div>
        </div>

    </div>
</div>
@endsection

@section('scripts')
<script>
var _csrfToken = document.querySelector('meta[name=csrf-token]').content;

function markRead(id) {
    fetch('/admin/notifications/' + id + '/read', {
        method: 'POST',
        headers: {'X-CSRF-TOKEN': _csrfToken, 'X-Requested-With': 'XMLHttpRequest'}
    }).then(r => r.json()).then(() => {
        var row = document.getElementById('row-' + id);
        if (row) {
            row.classList.remove('fw-600', 'table-active');
            row.querySelector('td:last-child').innerHTML = '<span class="text-muted fs-nano">Leída</span>';
            var dot = row.querySelector('td:first-child .badge');
            if (dot) dot.remove();
        }
        updateUnreadBadge(-1);
    }).catch(() => {});
}

function markAllRead() {
    fetch('{{ route('admin.notifications.mark-all-read') }}', {
        method: 'POST',
        headers: {'X-CSRF-TOKEN': _csrfToken, 'X-Requested-With': 'XMLHttpRequest'}
    }).then(r => r.json()).then(() => {
        location.reload();
    }).catch(() => {});
}

function updateUnreadBadge(delta) {
    var badge = document.getElementById('notif-badge');
    if (!badge) return;
    var current = parseInt(badge.textContent) || 0;
    var next = Math.max(0, current + delta);
    if (next === 0) {
        badge.style.display = 'none';
    } else {
        badge.textContent = next > 99 ? '99+' : next;
    }
}
</script>
@endsection