@extends('layouts.store.store')
@section('title', 'Store Notifications')
@section('content')
@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush

 <main>
        <div class="container-fluid p-0">
            <div class="row g-0">
                 @include('partials.header')
                @include('layouts.store.sidebar')
                <section class="content-section col primary-bg-light p-xl-4 p-3">
                    <div class="bg-white rounded-3 shadow-sm p-3">
                        <div class="row">
                            <div class="col-12">
                                <div class="small fw-medium d-flex flex-wrap">Notifications</div>
                                <hr class="mb-4">
                                <h5>Notifications</h5>
                            </div>
                            <div class="col-12">
                                <div class="bg-secondary-light rounded">
                                    <div class="d-flex justify-content-end">
                                        <button class="btn btn-danger mb-3" id="closeAllToasts" style="display: none;">Clear All Notifications</button>
                                    </div>
                                    <div class="d-flex flex-column gap-2" id="toastContainer">
                                        @if ($store && $store->unreadNotifications->count())
                                            @foreach ($store->unreadNotifications as $notification)
                                                <div class="toast show w-100" role="alert" aria-live="assertive" aria-atomic="true">
                                                    <div class="toast-header">
                                                        <i class="bi bi-circle-half me-1"></i>
                                                        <strong class="me-auto">{{ $notification->data['title'] ?? 'Notification' }}:</strong>
                                                        <small>{{ $notification->created_at->diffForHumans() }}</small>
                                                        <button type="button" class="btn-close" data-bs-dismiss="toast"
                                                            aria-label="Close"></button>
                                                    </div>
                                                    <div class="toast-body text-start">
                                                        {{ $notification->data['message'] ?? '' }}
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif
                                       
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </main>
@push('script')
 <script>
        const closeAllBtn = document.getElementById('closeAllToasts');
        const toastContainer = document.getElementById('toastContainer');

        // Function to check and toggle visibility of the close button
        function updateCloseButtonVisibility() {
            const visibleToasts = toastContainer.querySelectorAll('.toast.show');
            closeAllBtn.style.display = visibleToasts.length > 0 ? 'inline-block' : 'none';
        }

        // Click handler to close all toasts
        closeAllBtn.addEventListener('click', function () {
            const toastElements = toastContainer.querySelectorAll('.toast');
            toastElements.forEach(function (toastEl) {
                const toast = bootstrap.Toast.getOrCreateInstance(toastEl);
                toast.hide();
            });
        });

        // Listen for toast close events to update button visibility
        toastContainer.addEventListener('hidden.bs.toast', updateCloseButtonVisibility);

        // Optional: call on page load in case toasts are rendered initially
        document.addEventListener('DOMContentLoaded', updateCloseButtonVisibility);
    </script>
@endpush




@stop