<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>ADMIN: @yield('page_title', 'Dashboard') - {{ \App\Models\SystemSetting::getValue('app_name', 'WorkFlow') }}</title>

    @php
        $favicon = \App\Models\SystemSetting::getValue('site_favicon');
        $primary = \App\Models\SystemSetting::getValue('primary_color', '#0d6efd');
        $secondary = \App\Models\SystemSetting::getValue('secondary_color', '#6c757d');
    @endphp

    @if ($favicon)
        <link rel="icon" type="image/x-icon" href="{{ url($favicon) }}">
    @endif

    <!-- Bootstrap 5.3 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <!-- DataTables Bootstrap 5 -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css">
    <!-- Google Fonts: Plus Jakarta Sans & Material Symbols -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
        rel="stylesheet">
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@300;400;500;600;700&display=swap" />

    <style>
        :root {
            --primary-color: {{ $primary }};
            --secondary-color: {{ $secondary }};
            --sidebar-bg: #ffffff;
            --sidebar-border: #e2e8f0;
            --content-bg: #f5f7f8;
            --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: var(--content-bg);
            color: #1a1f2e;
            min-height: 100vh;
        }

        main {
            margin-left: 256px;
            min-height: 100vh;
            transition: all 0.3s;
            display: flex;
            flex-direction: column;
        }

        #sidebar {
            width: 256px;
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
            transition: all 0.3s;
            background-color: var(--sidebar-bg);
            border-right: 1px solid var(--sidebar-border);
        }

        .content-area {
            flex: 1;
            padding: 2rem;
            position: relative;
        }

        .card {
            border: 1px solid rgba(0, 0, 0, 0.05);
            box-shadow: var(--card-shadow);
            border-radius: 0.75rem;
        }

        .btn-primary {
            background-color: var(--primary-color) !important;
            border-color: var(--primary-color) !important;
            border-radius: 0.5rem;
            padding: 0.5rem 1rem;
            font-weight: 500;
        }

        .form-control,
        .form-select {
            border-radius: 0.5rem;
            border: 1px solid #e2e8f0;
            padding: 0.6rem 1rem;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
        }

        .breadcrumb-item a {
            color: #64748b;
            text-decoration: none;
        }

        .breadcrumb-item.active {
            color: #1a1f2e;
            font-weight: 500;
        }

        @media (max-width: 991.98px) {
            main {
                margin-left: 0;
            }

            #sidebar {
                left: -256px;
            }

            #sidebar.show {
                left: 0;
            }

            .content-area {
                padding: 1rem;
            }
        }
    </style>
    @stack('styles')
</head>

<body>

    @include('partials._sidebar-admin')

    <main id="main">
        @include('partials._topbar')

        <div class="content-area">
            <div class="container-fluid p-0">
                @yield('content')
            </div>
        </div>

        <footer class="footer mt-auto py-3 bg-white border-top">
            <div class="container-fluid px-4">
                <div class="d-flex justify-content-between align-items-center small text-muted">
                    <div>&copy; {{ date('Y') }} {{ config('app.name') }}. Admin Portal.</div>
                </div>
            </div>
        </footer>
    </main>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>

    @include('partials._toast-handler')

    <script>
        $(document).ready(function() {
            $('#sidebarToggle').on('click', function() {
                $('#sidebar').toggleClass('show');
            });

            $('#notifBell').on('click', function(e) {
                e.preventDefault();
                $('#notifPanel').fadeToggle(200);
                if ($('#notifPanel').is(':visible')) {
                    fetchNotifications();
                }
            });

            $('#closeNotif').on('click', function() {
                $('#notifPanel').fadeOut(200);
            });

            // Mark All as Read
            $('#markAllRead').on('click', function() {
                $.post('{{ url('/notifications/mark-all-read') }}', {
                    _token: '{{ csrf_token() }}'
                }, function(res) {
                    if (res.success) {
                        $('.notif-item').removeClass('unread');
                        $('#notifCount').hide().text('0');
                        fetchNotifications();
                    }
                });
            });

            function fetchNotifications() {
                $('#notifList').html(`
                    <div class="p-4 text-center" id="notifLoading">
                        <div class="spinner-border spinner-border-sm text-primary" role="status"></div>
                        <p class="text-muted small mt-2 mb-0">Fetching notifications...</p>
                    </div>
                `);

                $.get('{{ url('/notifications/recent') }}', function(data) {
                    $('#notifList').empty();

                    if (data.unread_count > 0) {
                        $('#notifCount').show().text(data.unread_count);
                    } else {
                        $('#notifCount').hide();
                    }

                    if (data.notifications.length === 0) {
                        $('#notifList').html(`
                            <div class="p-5 text-center" id="notifEmpty">
                                <i class="bi bi-chat-square-dots fs-1 text-light"></i>
                                <p class="text-muted small mt-3">No new notifications</p>
                            </div>
                        `);
                    } else {
                        data.notifications.forEach(function(n) {
                            const unreadClass = n.is_read ? '' : 'unread';
                            const date = new Date(n.created_at).toLocaleString();

                            $('#notifList').append(`
                                <a href="${n.url || '#'}" class="list-group-item list-group-item-action notif-item ${unreadClass}" data-id="${n.id}">
                                    <div class="d-flex align-items-center">
                                        <div class="notif-icon bg-primary-subtle text-primary me-3">
                                            <i class="bi bi-info-circle"></i>
                                        </div>
                                        <div class="flex-grow-1 overflow-hidden">
                                            <h6 class="mb-1 fw-bold small text-truncate">${n.title}</h6>
                                            <p class="mb-1 text-muted smaller text-truncate" style="font-size: 0.75rem;">${n.body}</p>
                                            <span class="text-muted smaller" style="font-size: 0.65rem;">${date}</span>
                                        </div>
                                    </div>
                                </a>
                            `);
                        });
                    }
                });
            }

            // Mark single as read on click
            $(document).on('click', '.notif-item.unread', function() {
                const id = $(this).data('id');
                $.post('{{ url('/notifications/mark-read') }}/' + id, {
                    _token: '{{ csrf_token() }}'
                });
            });

            // Initial count check
            function updateNotifCount() {
                $.get('{{ url('/notifications/recent') }}', function(data) {
                    if (data.unread_count > 0) {
                        $('#notifCount').show().text(data.unread_count);
                    } else {
                        $('#notifCount').hide();
                    }
                });
            }
            updateNotifCount();
            setInterval(updateNotifCount, 60000); // Check every minute

            $('.datatable').each(function() {
                const hasLaravelPagination = $(this).closest('.card-body').find('.mt-4').length > 0 ||
                    $(this).closest('div').next('.mt-4').length > 0;

                $(this).DataTable({
                    paging: !hasLaravelPagination,
                    info: !hasLaravelPagination,
                    lengthChange: !hasLaravelPagination,
                    language: {
                        search: "_INPUT_",
                        searchPlaceholder: "Search records..."
                    }
                });
            });
        });
    </script>
    @stack('scripts')
</body>

</html>
