@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => 'Notifications'])

<div class="container mt-4">
    <div class="card shadow-sm">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
                <h4 class="mb-0">Notifikasi</h4>

                <div class="d-flex flex-wrap gap-2 align-items-center w-100 w-md-auto mt-2 mt-md-0">
                    <select id="filter-notif" class="form-select w-100 w-md-auto">
                        <option value="unread" {{ $filter === 'unread' ? 'selected' : '' }}>Belum Dibaca</option>
                        <option value="read" {{ $filter === 'read' ? 'selected' : '' }}>Sudah Dibaca</option>
                    </select>

                    <input type="month" id="filter-month" class="form-control w-100 w-md-auto" value="{{ request('month') }}">
                    <input type="date" id="filter-date" class="form-control w-100 w-md-auto" value="{{ request('date') }}">
                </div>
            </div>

            @php
                $userRole = DB::table('users')
                    ->where('username', Session('username'))
                    ->value('idroles');
                $currentUser = Session('username');
            @endphp

            @forelse($notifs as $notif)

            @php
                $isReadArray = is_array($notif->is_read) ? $notif->is_read : json_decode($notif->is_read, true);
                $isRead = in_array($currentUser, $isReadArray ?? []);
            @endphp

            <div class="notif-item d-flex align-items-center justify-content-between border-bottom p-3 
                {{ $isRead ? 'bg-white text-muted' : 'bg-light fw-bold' }}" 
                style="cursor: pointer; transition: background 0.3s;"
                onmouseover="this.style.background='#f1f1f1'"
                onmouseout="this.style.background='{{ $isRead ? '#fff' : '#f8f9fa' }}'">

                <a href="{{ $notif->link }}" class="text-decoration-none text-dark d-flex justify-content-between w-100 align-items-center">
                    <div class="d-flex align-items-start">
                        <div class="me-3">
                            <i class="ni ni-bell-55 {{ $isRead ? 'text-secondary' : 'text-warning' }} fs-4"></i>
                        </div>
                        <div>
                            <div>
                                @if($userRole === 'admins' || $userRole === 'admhrd')
                                    @if($notif->username === 'Admin' || $notif->username === 'Resepsionis')
                                        <span>{!! $notif->username !!} {!! $notif->description !!} kepada {!! $notif->idroles !!} {!! $notif->worker !!}</span>
                                    @else
                                        <span>{!! $notif->idroles !!} {!! $notif->username !!} {!! $notif->description !!}</span>
                                    @endif
                                @elseif($userRole === 'driver' || $userRole === 'kurir')
                                    @if($notif->username === 'Admin' || $notif->username === 'Resepsionis')
                                        <span>{!! $notif->username !!} {!! $notif->description !!} kepada {!! $notif->idroles !!} {!! $notif->worker !!}</span>
                                    @else
                                        <span>Anda {!! $notif->description !!}</span>
                                    @endif
                                @else
                                    <span class="badge bg-secondary">{{ $notif->idroles }}</span>
                                @endif
                            </div>
                            <div class="small text-muted">{{ $notif->created_at->diffForHumans() }}</div>
                        </div>
                    </div>

                    @unless($isRead)
                        <span class="badge bg-danger ms-2">Baru</span>
                    @endunless
                </a>
            </div>
        @empty
            <div class="text-center text-muted py-5">
                Tidak ada notifikasi.
            </div>
        @endforelse
        </div>
    </div>
</div>

<script>
    const filterSelect = document.getElementById('filter-notif');
    const monthInput = document.getElementById('filter-month');
    const dateInput = document.getElementById('filter-date');

    function applyFilters() {
        const status = filterSelect.value;
        const month = monthInput.value;
        const date = dateInput.value;

        let url = '?filter=' + status;
        if (month) url += '&month=' + month;
        if (date) url += '&date=' + date;

        window.location.href = url;
    }

    filterSelect.addEventListener('change', applyFilters);
    monthInput.addEventListener('change', applyFilters);
    dateInput.addEventListener('change', applyFilters);

    window.addEventListener("beforeunload", function () {
        navigator.sendBeacon("{{ route('notifications.markReadOnExit') }}", new Blob([
            JSON.stringify({ _token: "{{ csrf_token() }}" })
        ], { type: 'application/json' }));
    });
</script>

<style>
@media (max-width: 768px) {
    .form-select, .form-control {
        width: 100% !important;
    }
}
</style>
@endsection