@extends('template.layouts.template-base')
@section('title', 'Notifications')

@section('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
    <style>
        .page-content {
            background-color: #F0F4F8 !important;
            padding: 80px 10px;
        }

        .cb-wrap {
            display: none;
        }

        .cb-wrap.visible {
            display: flex;
            align-items: center;
            margin-right: 10px;
        }

        .item.selected {
            background-color: #eff6ff;
        }
    </style>
@endsection

@section('content')
<section class="product-page add-service">

    {{-- Header --}}
    <div class="page-header">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col-lg-4">
                    <div class="page-title">Notifications</div>
                </div>
                <div class="col-lg-8">
                    <div class="topbar notification-btn-sec">
                        <div class="row justify-content-end align-items-center g-2">
                            <div class="col-lg-4 d-flex gap-2">
                                {{-- Show when NOT in delete mode --}}
                                <button class="btn-delete"
                                        id="btnDelete"
                                        onclick="toggleDeleteMode()">
                                    Delete
                                </button>

                                {{-- Show when IN delete mode --}}
                                <button class="btn-delete-selected"
                                        id="btnDeleteSelected"
                                        style="display:none"
                                        onclick="confirmDelete()">
                                    Delete Selected - 0
                                </button>

                                {{-- Cancel button (delete mode) --}}
                                <button class="btn-cancel"
                                        id="btnCancel"
                                        style="display:none"
                                        onclick="cancelDeleteMode()">
                                    Cancel
                                </button>
                            </div>
                            <div class="col-lg-4">
                                <form method="POST" action="{{ route('backend.notifications.markAllRead') }}">
                                    @csrf
                                    <input type="hidden" name="type" value="{{ $type }}">
                                    <button type="submit" class="btn-add-category">Mark all as Read</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Main Container --}}
    <div class="container-fluid">
        <div class="settings-container notification-tab-sec">

            {{-- Tab Navigation --}}
            <div class="custom-tabs" role="tablist">
                @php
                    $tabs = [
                        'order'     => 'Order',
                        'payment'   => 'Payment',
                        'low_stock' => 'Inventory',
                        'new_user'  => 'New User',
                    ];
                @endphp

                @foreach($tabs as $key => $label)
                    <a href="{{ route('backend.notifications.index', ['type' => $key]) }}"
                        class="custom-tab-btn {{ $type === $key ? 'active' : '' }}">
                        {{ $label }}
                        @if(($unreadCounts[$key] ?? 0) > 0)
                            <span class="badge text-danger">({{ $unreadCounts[$key] }})</span>
                        @else
                            <span class="badge text-muted">(0)</span>
                        @endif
                    </a>
                @endforeach
            </div>

            {{-- Notification List --}}
            <div class="container notification-sec p-0">
                <div class="list" id="notifList">

                    @forelse($notifications as $date => $group)
                        @if($date !== 'Today')
                            <div class="date-header">{{ $date }}</div>
                        @endif

                        @foreach($group as $notification)
                            <div class="item {{ $notification->isRead() ? '' : 'unread' }}"
                                data-id="{{ $notification->id }}">

                                <div class="cb-wrap">
                                    <input type="checkbox" onchange="onCheck()" />
                                </div>

                                <div class="avatar">
                                    {{ strtoupper(substr($notification->type, 0, 1)) }}
                                </div>

                                <div class="item-body">
                                    <div class="item-header">
                                        <span class="item-title">{{ $notification->title }}</span>
                                        <span class="item-time">
                                            {{ $notification->created_at->format('h:i A') }}
                                        </span>
                                    </div>
                                    <p class="item-desc">{{ $notification->message }}</p>
                                </div>
                            </div>
                        @endforeach

                    @empty
                        <div class="text-center py-5 text-muted">
                            No {{ $tabs[$type] ?? '' }} notifications found.
                        </div>
                    @endforelse

                </div>
            </div>

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

{{-- Delete Confirm Modal --}}
<div class="modal fade delete-roles-screen forgot-popup-screen"
     id="deleteModal"
     tabindex="-1"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content rounded-4">
            <div class="modal-header">
                <div class="modal-icon-box"><i class="bx bxs-trash"></i></div>
                <h5>Delete Notifications?</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body inquiry-preview-modal p-4">
                <p>Are you sure you want to delete these notifications? This action cannot be undone.</p>
                <div class="hstack gap-2 w-100 mt-4 justify-content-end">
                    <button type="button" data-bs-dismiss="modal" class="btn cancel-btn">Cancel</button>
                    <button type="button" class="btn delete-btn" id="confirmDeleteBtn">Delete</button>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Success Toast --}}
<div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
    <div id="deleteRolesToast"
         class="toast login-success-toast"
         role="alert"
         aria-live="assertive"
         aria-atomic="true">
        <div class="toast-body d-flex align-items-center gap-3">
            <div class="toast-left">
                <div class="check-circle">✓</div>
            </div>
            <div class="toast-right">
                <h6>Deleted Successfully</h6>
                <p>Notifications deleted successfully.</p>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    let deleteMode = false;

    // ── Enter delete mode ─────────────────────────────────────────────────────
    function toggleDeleteMode() {
        deleteMode = true;

        // Show checkboxes
        document.querySelectorAll('.cb-wrap').forEach(cb => cb.classList.add('visible'));

        // Swap buttons
        document.getElementById('btnDelete').style.display         = 'none';
        document.getElementById('btnDeleteSelected').style.display = '';
        document.getElementById('btnCancel').style.display         = '';

        updateCount();
    }

    // ── Exit delete mode ──────────────────────────────────────────────────────
    function cancelDeleteMode() {
        deleteMode = false;

        // Hide checkboxes and uncheck all
        document.querySelectorAll('.cb-wrap').forEach(cb => {
            cb.classList.remove('visible');
            cb.querySelector('input').checked = false;
        });

        // Remove selected highlight
        document.querySelectorAll('.item').forEach(i => i.classList.remove('selected'));

        // Swap buttons back
        document.getElementById('btnDelete').style.display         = '';
        document.getElementById('btnDeleteSelected').style.display = 'none';
        document.getElementById('btnCancel').style.display         = 'none';

        updateCount();
    }

    // ── Update checked count on all buttons ───────────────────────────────────
    function updateCount() {
        const count = document.querySelectorAll('.item input[type="checkbox"]:checked').length;

        // Update header delete button text
        const btnSel = document.getElementById('btnDeleteSelected');
        if (btnSel) btnSel.textContent = 'Delete Selected - ' + count;
    }

    // ── Checkbox change ───────────────────────────────────────────────────────
    function onCheck() {
        // Highlight selected rows
        document.querySelectorAll('.item').forEach(item => {
            const cb = item.querySelector('input[type="checkbox"]');
            item.classList.toggle('selected', cb && cb.checked);
        });

        updateCount();
    }

    // ── Confirm & execute delete ──────────────────────────────────────────────
    function confirmDelete() {
        const ids = [...document.querySelectorAll('.item input[type="checkbox"]:checked')]
            .map(cb => cb.closest('.item').dataset.id);

        if (!ids.length) {
            alert('Please select at least one notification to delete.');
            return;
        }

        const modalEl = document.getElementById('deleteModal');
        const modal   = new bootstrap.Modal(modalEl);
        modal.show();

        // Attach click handler (replace old one to avoid duplicates)
        const confirmBtn = document.getElementById('confirmDeleteBtn');
        confirmBtn.replaceWith(confirmBtn.cloneNode(true)); // remove old listeners
        document.getElementById('confirmDeleteBtn').addEventListener('click', function () {
            fetch('{{ route("backend.notifications.deleteSelected") }}', {
                method:  'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ ids })
            })
            .then(res => res.json())
            .then(data => {
                if (data.status) {
                    // Remove deleted items from DOM
                    ids.forEach(id => {
                        document.querySelector(`.item[data-id="${id}"]`)?.remove();
                    });

                    // Remove empty date headers
                    document.querySelectorAll('.date-header').forEach(header => {
                        let next = header.nextElementSibling;
                        if (!next || next.classList.contains('date-header')) {
                            header.remove();
                        }
                    });

                    cancelDeleteMode();
                    modal.hide();

                    // Show success toast
                    const toast = new bootstrap.Toast(document.getElementById('deleteRolesToast'));
                    toast.show();
                }
            })
            .catch(err => console.error('Delete failed:', err));
        });
    }
</script>
@endsection