<!DOCTYPE html>
<html>
<head>
    <title>Dashboard Header</title>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <style>
        .header {
            background: #fff;
            padding: 0;
            height: 66px;
            line-height: 69px;
            border-bottom: 1px solid rgb(230, 236, 245);
        }
        .header-link {
            padding: 0 10px;
            display: inline-block;
            vertical-align: top;
            cursor: pointer;
            transition: all 0.3s, padding 0s;
        }
        .header-link:hover {
            background-color: #1890ff;
            color: #fff;
        }
        .right-header { float: right; }
        .icon-trigger {
            font-size: 20px;
            line-height: 69px;
            cursor: pointer;
            transition: all 0.3s, padding 0s;
            padding: 0 24px;
        }
        .icon-trigger:hover { color: #1890ff; }
    </style>
</head>
<body>
    @if (session('success'))
        <div style="color: green;">{{ session('success') }}</div>
    @endif

    <div class="header">
        <span class="icon-trigger {{ $collapsed ? 'menu-unfold' : 'menu-fold' }}" onclick="toggleSidebar()">
            &#9776; <!-- Hamburger icon -->
        </span>
        <div class="right-header">
            @include('dashboard.header-dropdown')
        </div>
    </div>

    <script>
        function toggleSidebar() {
            fetch('/dashboard/toggle', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ collapsed: !{{ $collapsed }} })
            })
            .then(response => response.json())
            .then(data => {
                location.reload(); // Reload to reflect collapsed state
            });
        }
    </script>
</body>
</html>