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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">

                    <div class="card mb-3 shadow-sm">
                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">Daftar Notifikasi</h5>
                            </div>
                            <div class="col">
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row py-3">
                            <div class="col-lg">
                                <div class="nav-wrapper">
                                    <div class="form-control border-0">
                                        <form method="GET" action="{{ url($url_menu) }}" id="filterForm">
                                            <div class="row g-3">
                                                <div class="col-12 col-md-4">
                                                    <label
                                                        class="form-label fw-bold text-muted small text-uppercase">Periode</label>
                                                    <div class="d-flex align-items-center form-control px-2">
                                                        <input type="date" class="form-control border-0 py-0 flex-fill"
                                                            id="filterDateFrom" name="filter_date_from"
                                                            value="{{ request('filter_date_from') }}"
                                                            style="min-width:0; font-size:0.78rem;">
                                                        <span
                                                            class="text-muted px-1 fas fa-arrow-right flex-shrink-0"></span>
                                                        <input type="date" class="form-control border-0 py-0 flex-fill"
                                                            id="filterDateTo" name="filter_date_to"
                                                            value="{{ request('filter_date_to') }}"
                                                            style="min-width:0; font-size:0.78rem;">
                                                    </div>
                                                </div>
                                                <div class="col-6 col-md-3">
                                                    <label
                                                        class="form-label fw-bold text-muted small text-uppercase">Jenis</label>
                                                    <select class="form-select select2-filter" name="filter_dmenu"
                                                        id="filterDmenu" data-placeholder="Semua Jenis">
                                                        <option value="">Semua Jenis</option>
                                                        <option value="lamaran"
                                                            {{ request('filter_dmenu') == 'lamaran' ? 'selected' : '' }}>
                                                            Lamaran</option>
                                                        <option value="resign"
                                                            {{ request('filter_dmenu') == 'resign' ? 'selected' : '' }}>
                                                            Resign</option>
                                                    </select>
                                                </div>
                                                <div class="col-6 col-md-3">
                                                    <label
                                                        class="form-label fw-bold text-muted small text-uppercase">Status</label>
                                                    <select class="form-select select2-filter" name="filter_status"
                                                        id="filterStatus" data-placeholder="Semua Status">
                                                        <option value="">Semua Status</option>
                                                        <option value="active"
                                                            {{ request('filter_status') == 'active' ? 'selected' : '' }}>
                                                            Active</option>
                                                        <option value="psikotes"
                                                            {{ request('filter_status') == 'psikotes' ? 'selected' : '' }}>
                                                            Psikotes</option>
                                                        <option value="test"
                                                            {{ request('filter_status') == 'test' ? 'selected' : '' }}>Test
                                                        </option>
                                                        <option value="accepted"
                                                            {{ request('filter_status') == 'accepted' ? 'selected' : '' }}>
                                                            Accepted</option>
                                                        <option value="rejected"
                                                            {{ request('filter_status') == 'rejected' ? 'selected' : '' }}>
                                                            Rejected</option>
                                                        <option value="pending"
                                                            {{ request('filter_status') == 'pending' ? 'selected' : '' }}>
                                                            Pending</option>
                                                        <option value="diterima"
                                                            {{ request('filter_status') == 'diterima' ? 'selected' : '' }}>
                                                            Diterima</option>
                                                        <option value="ditolak"
                                                            {{ request('filter_status') == 'ditolak' ? 'selected' : '' }}>
                                                            Ditolak</option>
                                                    </select>
                                                </div>
                                                <div class="col-12 col-md-2 d-flex align-items-end">
                                                    <button type="submit" class="btn btn-primary mb-0 w-100">
                                                        <i class="fas fa-search me-2"></i>Apply Filter
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card shadow-sm">
                        <div class="row py-3">
                            <div class="col-lg">
                                <div class="nav-wrapper">
                                    <div class="form-control border-0">

                                        {{-- DESKTOP --}}
                                        <div class="table-responsive d-none d-md-block">
                                            <table class="table display" id="list_{{ $dmenu }}">
                                                <thead class="thead-light" style="background-color:#00b7bd4f;">
                                                    <tr>
                                                        <th width="130">Action</th>
                                                        <th>Jenis</th>
                                                        <th>Pesan</th>
                                                        <th>Status</th>
                                                        <th>Tanggal</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($table_detail as $detail)
                                                        @php
                                                            $primary = $detail->id ?? '';
                                                            $isRead = !is_null($detail->read_at);
                                                            $dmenuData = $detail->data['dmenu'] ?? null;
                                                            $jenis = match ($dmenuData) {
                                                                'resign' => 'Resign',
                                                                'lamaran' => 'Lamaran',
                                                                default => ucfirst($dmenuData ?? '-'),
                                                            };
                                                            $jenisBadge = match ($dmenuData) {
                                                                'resign' => 'bg-secondary',
                                                                'lamaran' => 'bg-primary',
                                                                default => 'bg-secondary',
                                                            };
                                                            $status = $detail->data['status'] ?? '-';
                                                            $statusBadgeClass = match ($status) {
                                                                'accepted', 'diterima', 'passed' => 'bg-success',
                                                                'rejected', 'failed' => 'bg-danger',
                                                                'pending' => 'bg-primary',
                                                                'psikotes', 'test' => 'bg-secondary',
                                                                default => 'bg-secondary',
                                                            };
                                                            // Fix Bootstrap box-shadow: styling di <td> langsung
                                                            $tdBg = !$isRead
                                                                ? 'box-shadow: inset 0 0 0 9999px #e8f4fd !important;'
                                                                : '';
                                                            $tdFw = !$isRead
                                                                ? 'font-weight: 700 !important; color: #1a1a1a !important;'
                                                                : '';
                                                        @endphp
                                                        <tr style="{{ !$isRead ? 'cursor:pointer;' : '' }}"
                                                            @if (!$isRead) data-notif-id="{{ $primary }}" data-unread="true" @endif>
                                                            <td class="text-sm font-weight-normal"
                                                                style="{{ $tdBg }}">
                                                                <div class="btn-group">
                                                                    <button class="btn btn-primary mb-0 px-3" type="button"
                                                                        title="View Data"
                                                                        onclick="event.stopPropagation(); window.location='{{ url($url_menu . '/show/' . encrypt($primary)) }}'">
                                                                        <i class="fas fa-eye"></i><span
                                                                            class="font-weight-bold"> View</span>
                                                                    </button>
                                                                </div>
                                                            </td>
                                                            <td class="text-sm" style="{{ $tdBg }}">
                                                                <span
                                                                    class="badge rounded-pill {{ $jenisBadge }}">{{ $jenis }}</span>
                                                            </td>
                                                            <td class="text-sm"
                                                                style="{{ $tdBg }} {{ $tdFw }}">
                                                                {{ $detail->data['message'] ?? 'Pemberitahuan Baru' }}
                                                            </td>
                                                            <td class="text-sm" style="{{ $tdBg }}">
                                                                <span
                                                                    class="badge rounded-pill {{ $statusBadgeClass }}">{{ ucfirst($status) }}</span>
                                                            </td>
                                                            <td class="text-sm"
                                                                style="{{ $tdBg }} {{ $tdFw }}">
                                                                {{ $detail->created_at ? \Carbon\Carbon::parse($detail->created_at)->format('d M Y H:i:s') : '' }}
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>

                                            <div class="d-flex justify-content-between align-items-center mt-4">
                                                <div class="text-sm text-muted">
                                                    Data {{ $table_detail->firstItem() ?? 0 }} –
                                                    {{ $table_detail->lastItem() ?? 0 }} dari
                                                    {{ $table_detail->total() ?? 0 }} data.
                                                </div>
                                                <div>
                                                    {{ $table_detail->appends(request()->query())->links('pagination::bootstrap-4') }}
                                                </div>
                                            </div>
                                        </div>

                                        {{-- MOBILE --}}
                                        <div class="d-md-none p-2">

                                            <div class="card mb-3 shadow-sm">
                                                <div class="card-body">
                                                    <div class="d-flex gap-2 mb-3">
                                                        <a href="{{ url($url_menu) }}?{{ http_build_query(array_merge(request()->query(), ['export' => 'excel'])) }}"
                                                            class="btn btn-success w-50">
                                                            <i class="fas fa-file-excel me-1"></i>Excel
                                                        </a>
                                                        <a href="{{ url($url_menu) }}?{{ http_build_query(array_merge(request()->query(), ['export' => 'pdf'])) }}"
                                                            class="btn btn-danger w-50">
                                                            <i class="fas fa-file-pdf me-1"></i>PDF
                                                        </a>
                                                    </div>
                                                    <form method="GET" action="{{ url($url_menu) }}">
                                                        <input type="hidden" name="filter_date_from"
                                                            value="{{ request('filter_date_from') }}">
                                                        <input type="hidden" name="filter_date_to"
                                                            value="{{ request('filter_date_to') }}">
                                                        <input type="hidden" name="filter_dmenu"
                                                            value="{{ request('filter_dmenu') }}">
                                                        <input type="hidden" name="filter_status"
                                                            value="{{ request('filter_status') }}">
                                                        <input type="text" name="search" class="form-control"
                                                            placeholder="Cari data..." value="{{ request('search') }}">
                                                    </form>
                                                </div>
                                            </div>

                                            @forelse ($table_detail as $detail)
                                                @php
                                                    $primary = $detail->id ?? '';
                                                    $isRead = !is_null($detail->read_at);
                                                    $dmenuData = $detail->data['dmenu'] ?? null;
                                                    $jenis = match ($dmenuData) {
                                                        'resign' => 'Resign',
                                                        'lamaran' => 'Lamaran',
                                                        default => ucfirst($dmenuData ?? '-'),
                                                    };
                                                    $jenisBadge = match ($dmenuData) {
                                                        'resign' => 'bg-secondary',
                                                        'lamaran' => 'bg-primary',
                                                        default => 'bg-secondary',
                                                    };
                                                    $status = $detail->data['status'] ?? '-';
                                                    $statusBadgeClass = match ($status) {
                                                        'accepted', 'diterima', 'passed' => 'bg-success',
                                                        'rejected', 'failed' => 'bg-danger',
                                                        'pending' => 'bg-primary',
                                                        'psikotes', 'test' => 'bg-secondary',
                                                        default => 'bg-secondary',
                                                    };
                                                @endphp

                                                <div class="card border mb-3 shadow-sm {{ !$isRead ? 'border-primary' : '' }}"
                                                    style="{{ !$isRead ? 'background-color:#e8f4fd; cursor:pointer;' : '' }}"
                                                    @if (!$isRead) data-notif-id="{{ $primary }}" data-unread="true" @endif>
                                                    <div class="card-body">

                                                        <div
                                                            class="d-flex justify-content-between align-items-center mb-2">
                                                            <div class="d-flex align-items-center gap-2">
                                                                <span
                                                                    class="badge bg-secondary rounded-pill">#{{ $table_detail->firstItem() + $loop->index }}</span>
                                                                @if (!$isRead)
                                                                    <span class="rounded-circle bg-primary d-inline-block"
                                                                        style="width:8px; height:8px;"
                                                                        title="Belum dibaca"></span>
                                                                @endif
                                                            </div>

                                                            <div class="dropdown">
                                                                <button
                                                                    class="btn btn-sm btn-light border rounded-circle p-0 d-flex align-items-center justify-content-center"
                                                                    style="width:32px; height:32px;" type="button"
                                                                    data-bs-toggle="dropdown" aria-expanded="false"
                                                                    onclick="event.stopPropagation();">
                                                                    <i class="fas fa-ellipsis-v text-secondary"></i>
                                                                </button>
                                                                <ul class="dropdown-menu dropdown-menu-end shadow-sm">
                                                                    <li>
                                                                        <a class="dropdown-item"
                                                                            href="{{ url($url_menu . '/show/' . encrypt($primary)) }}">
                                                                            <i
                                                                                class="fas fa-eye me-2 text-primary"></i>View
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>

                                                        <div class="d-flex gap-2 mb-2">
                                                            <span
                                                                class="badge rounded-pill {{ $jenisBadge }}">{{ $jenis }}</span>
                                                            <span
                                                                class="badge rounded-pill {{ $statusBadgeClass }}">{{ ucfirst($status) }}</span>
                                                        </div>

                                                        <div class="row g-2">
                                                            <div class="col-12">
                                                                <small class="text-muted text-uppercase fw-bold"
                                                                    style="font-size:0.65rem; letter-spacing:0.04em;">Pesan</small>
                                                                <div
                                                                    class="fw-semibold text-sm {{ !$isRead ? 'text-dark' : 'text-muted' }}">
                                                                    {{ $detail->data['message'] ?? 'Pemberitahuan Baru' }}
                                                                </div>
                                                            </div>
                                                            <div class="col-12">
                                                                <small class="text-muted text-uppercase fw-bold"
                                                                    style="font-size:0.65rem; letter-spacing:0.04em;">Tanggal</small>
                                                                <div
                                                                    class="fw-semibold text-sm {{ !$isRead ? 'text-dark' : 'text-muted' }}">
                                                                    <i class="fas fa-clock me-1 opacity-50"></i>
                                                                    {{ $detail->created_at ? \Carbon\Carbon::parse($detail->created_at)->format('d M Y H:i:s') : '-' }}
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            @empty
                                                <p class="text-center text-muted py-4 text-sm">Data tidak ditemukan atau
                                                    filter tidak cocok.</p>
                                            @endforelse

                                            <div
                                                class="d-flex flex-column flex-sm-row justify-content-between align-items-center mt-3 gap-2">
                                                <div class="text-sm text-muted">
                                                    Data {{ $table_detail->firstItem() ?? 0 }} –
                                                    {{ $table_detail->lastItem() ?? 0 }} dari
                                                    {{ $table_detail->total() ?? 0 }} data.
                                                </div>
                                                <div>
                                                    {{ $table_detail->appends(request()->query())->links('pagination::bootstrap-4') }}
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
    <style>
        .pagination {
            margin-bottom: 0;
            gap: 4px;
        }

        .pagination .page-item .page-link {
            padding: 6px 14px;
            margin: 0 2px;
            border-radius: 6px;
            font-size: 0.875rem;
        }

        .pagination .page-item.active .page-link {
            background-color: #5e72e4;
            border-color: #5e72e4;
        }
    </style>
@endpush

@push('js')
    <script>
        function markAsRead(id, el) {
            if (!id || !el) return;

            fetch(`{{ url('notifications') }}/${id}/mark-as-read`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                }
            }).then(res => res.json()).then(data => {
                if (!data.success) return;

                el.setAttribute('data-unread', 'false');
                el.style.cursor = 'default';
                el.removeAttribute('onclick');

                // Desktop: reset box-shadow di semua <td>
                $(el).find('td').each(function() {
                    this.style.setProperty('box-shadow', 'none', 'important');
                    this.style.removeProperty('font-weight');
                    this.style.removeProperty('color');
                });

                // Mobile card
                $(el).css('background-color', '').removeClass('border-primary');
                $(el).find('.rounded-circle.bg-primary').remove();
                $(el).find('.text-dark').removeClass('text-dark').addClass('text-muted');

                let $badge = $('#topnav-badge');
                if ($badge.length) {
                    let count = (parseInt($badge.attr('data-count')) || 0) - 1;
                    count <= 0 ? $badge.fadeOut('fast') : $badge.attr('data-count', count).text(count > 9 ? '9+' :
                        count);
                }
            });
        }

        $(document).ready(function() {
            // Event delegation desktop
            $('#list_{{ $dmenu }} tbody').on('click', 'tr[data-unread="true"]', function() {
                var id = $(this).attr('data-notif-id');
                markAsRead(id, this);
            });

            // Event delegation mobile
            $(document).on('click', '.card[data-unread="true"]', function() {
                var id = $(this).attr('data-notif-id');
                markAsRead(id, this);
            });

            $('.select2-filter').select2({
                placeholder: function() {
                    return $(this).data('placeholder') || $(this).find('option:first').text();
                },
                allowClear: true,
                width: '100%',
                theme: 'default'
            });

            var $dateFrom = $('#filterDateFrom'),
                $dateTo = $('#filterDateTo');
            if ($dateFrom.val()) $dateTo.attr('min', $dateFrom.val());
            if ($dateTo.val()) $dateFrom.attr('max', $dateTo.val());
            $dateFrom.on('change', function() {
                $dateTo.attr('min', $(this).val());
                if ($dateTo.val() && $dateTo.val() < $(this).val()) $dateTo.val($(this).val());
            });
            $dateTo.on('change', function() {
                $dateFrom.attr('max', $(this).val());
                if ($dateFrom.val() && $dateFrom.val() > $(this).val()) $dateFrom.val($(this).val());
            });

            if (window.innerWidth >= 768) {
                $('#list_{{ $dmenu }}').DataTable({
                    destroy: true,
                    paging: false,
                    info: false,
                    searching: true,
                    autoWidth: false,
                    responsive: true,
                    ordering: true,
                    order: [
                        [4, 'desc']
                    ],
                    columnDefs: [{
                        orderable: false,
                        targets: 0
                    }],
                    language: {
                        emptyTable: 'Data tidak ditemukan atau filter tidak cocok'
                    },
                    dom: '<"row d-flex justify-content-between align-items-center"<"col-lg-12 d-flex justify-content-between align-items-center"Bf>>rtip',
                    buttons: [{
                            text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>',
                            action: function() {
                                let params = $('#filterForm').serialize();
                                window.location.href = "{{ url($url_menu) }}?" + params +
                                    "&export=excel";
                            }
                        },
                        {
                            text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF</span>',
                            action: function() {
                                let params = $('#filterForm').serialize();
                                window.location.href = "{{ url($url_menu) }}?" + params +
                                    "&export=pdf";
                            }
                        },
                    ],
                    initComplete: function() {
                        $('.dataTables_filter').remove();
                        var searchBarHtml = `
                            <div class="dataTables_filter d-flex justify-content-end">
                                <form method="GET" action="{{ url($url_menu) }}" class="d-flex">
                                    <input type="hidden" name="filter_date_from" value="{{ request('filter_date_from') }}">
                                    <input type="hidden" name="filter_date_to"   value="{{ request('filter_date_to') }}">
                                    <input type="hidden" name="filter_dmenu"     value="{{ request('filter_dmenu') }}">
                                    <input type="hidden" name="filter_status"    value="{{ request('filter_status') }}">
                                    <input type="text" name="search" class="form-control me-2" placeholder="Search..." value="{{ request('search') }}">
                                </form>
                            </div>`;
                        $(searchBarHtml).insertAfter('.dt-buttons');
                    }
                });
                $('.dt-button').addClass('btn btn-secondary').removeClass('dt-button');
            }
        });
    </script>
@endpush