@php
    $adminNotifCount = \App\Models\Notification::where('user_id', auth('web')->id())
        ->where('type', 'deal_accepted')->where('is_read', false)->count();

    $adminNotifs = \App\Models\Notification::where('user_id', auth('web')->id())
        ->where('type', 'deal_accepted')->latest()->limit(6)->get();

    $adminName   = auth('web')->user()->name ?? 'Admin';
    $adminEmail  = auth('web')->user()->email ?? '';
    $adminAvatar = strtoupper(substr($adminName, 0, 1));
@endphp

<style>
/* ══════════════════════════════════════
   Professional Top Header
══════════════════════════════════════ */
.header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 8px rgba(0,0,0,.06);
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
   
    transition: margin-left .28s cubic-bezier(.4,0,.2,1);
}

/* When sidebar is collapsed */
body.sidebar-collapsed .header { margin-left: 0; }

/* Toggle button */
.header-toggle {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: #f3f4f6;
    border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    color: #374151;
    cursor: pointer;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.header-toggle:hover { background: #e8f0fe; color: #365CF5; }

/* Page breadcrumb / title area */
.header-page-info { margin-left: 16px; }
.header-page-info .page-title { font-size: 15px; font-weight: 700; color: #111; line-height: 1.1; }
.header-page-info .page-breadcrumb { font-size: 11px; color: #9ca3af; margin-top: 1px; }
.header-page-info .page-breadcrumb a { color: #9ca3af; text-decoration: none; }
.header-page-info .page-breadcrumb a:hover { color: #365CF5; }
.header-page-info .page-breadcrumb span + span::before { content: ' / '; }

/* Right cluster */
.header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Icon button base */
.hdr-btn {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: #f3f4f6;
    border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    color: #374151;
    cursor: pointer;
    position: relative;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.hdr-btn:hover { background: #e8f0fe; color: #365CF5; }

/* Notification badge */
.hdr-badge {
    position: absolute;
    top: 5px; right: 5px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #dc2626;
    border: 2px solid #fff;
}
.hdr-badge-count {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 18px; height: 18px;
    border-radius: 9px;
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 4px;
    border: 2px solid #fff;
}

/* Dropdown panel */
.hdr-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,.12);
    min-width: 300px;
    z-index: 2000;
    overflow: hidden;
    display: none;
    animation: dropIn .18s ease;
}
.hdr-dropdown.show { display: block; }
@keyframes dropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Dropdown header */
.hdr-drop-head {
    padding: 14px 18px;
    border-bottom: 1px solid #f3f4f6;
    display: flex; align-items: center; justify-content: space-between;
}
.hdr-drop-head h6 { margin: 0; font-size: 13px; font-weight: 700; color: #111; }
.hdr-drop-count {
    font-size: 11px; font-weight: 700;
    background: #fee2e2; color: #dc2626;
    padding: 2px 8px; border-radius: 10px;
}

/* Notification item */
.notif-item {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 18px;
    border-bottom: 1px solid #f9fafb;
    text-decoration: none;
    transition: background .12s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: #f9fafb; }
.notif-item .ni-icon {
    width: 34px; height: 34px; border-radius: 10px;
    background: #e8f0fe; color: #365CF5;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.notif-item .ni-title { font-size: 12px; font-weight: 600; color: #111; margin-bottom: 2px; }
.notif-item .ni-msg   { font-size: 11px; color: #6b7280; white-space: normal; line-height: 1.4; }
.notif-item .ni-time  { font-size: 10px; color: #9ca3af; margin-top: 3px; }

.hdr-drop-foot {
    padding: 10px 18px;
    border-top: 1px solid #f3f4f6;
    text-align: center;
}
.hdr-drop-foot a { font-size: 12px; font-weight: 600; color: #365CF5; text-decoration: none; }

/* Profile button */
.hdr-profile-btn {
    display: flex; align-items: center; gap: 9px;
    padding: 5px 10px 5px 5px;
    border-radius: 12px;
    background: #f3f4f6;
    border: none;
    cursor: pointer;
    transition: background .15s;
    position: relative;
}
.hdr-profile-btn:hover { background: #e8f0fe; }
.hdr-avatar {
    width: 34px; height: 34px; border-radius: 10px;
    background: linear-gradient(135deg,#365CF5,#0d9488);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #fff;
}
.hdr-profile-name { font-size: 13px; font-weight: 600; color: #111; line-height: 1.1; }
.hdr-profile-role { font-size: 11px; color: #9ca3af; }
.hdr-profile-chevron { font-size: 10px; color: #9ca3af; margin-left: 2px; }

/* Profile dropdown */
.hdr-profile-drop { min-width: 220px; }
.hdr-profile-info {
    padding: 14px 18px 12px;
    border-bottom: 1px solid #f3f4f6;
    display: flex; align-items: center; gap: 12px;
}
.hdr-profile-info .pi-avatar {
    width: 42px; height: 42px; border-radius: 12px;
    background: linear-gradient(135deg,#365CF5,#0d9488);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.hdr-profile-info .pi-name  { font-size: 13px; font-weight: 700; color: #111; }
.hdr-profile-info .pi-email { font-size: 11px; color: #9ca3af; word-break: break-all; }
.hdr-drop-menu a, .hdr-drop-menu button {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 18px;
    width:300px;
    font-size: 13px; color: #374151;
    text-decoration: none;
    background: transparent; border: none; width: 100%;
    cursor: pointer; transition: background .12s, color .12s;
}
.hdr-drop-menu a:hover, .hdr-drop-menu button:hover { background: #f3f4f6; color: #365CF5; }
.hdr-drop-menu a .mi, .hdr-drop-menu button .mi {
    width: 26px; height: 26px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; flex-shrink: 0;
}
.hdr-drop-menu .divider { display: none; }
.hdr-drop-menu .logout-btn {
    width: calc(100% - 24px) !important;
    margin: 6px 12px 10px !important;
    height: 42px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    background: #fef2f2 !important;
    color: #dc2626 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border: 1px solid #fecaca !important;
    box-shadow: none !important;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease !important;
}
.hdr-drop-menu .logout-btn i,
.hdr-drop-menu .logout-btn span { color: inherit !important; line-height: 1 !important; }
.hdr-drop-menu .logout-btn:hover {
    background: #dc2626 !important;
    color: #fff !important;
    border-color: #dc2626 !important;
    box-shadow: 0 8px 18px rgba(220,38,38,.25) !important;
    transform: translateY(-1px);
}

/* Alerts */
.hdr-alerts { padding: 0 24px; }
.hdr-alert {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    border: none;
    margin-top: 8px;
}
.hdr-alert .btn-close { margin-left: auto; }

/* Responsive: hide page info on small screens */
@media (max-width: 575px) {
    .header { padding: 0 14px; }
    .header-page-info { display: none; }
    .hdr-profile-name, .hdr-profile-role, .hdr-profile-chevron { display: none; }
    .hdr-profile-btn { padding: 5px; }
}

/* main-wrapper offset */
.main-wrapper {
    margin-left: 260px;
    transition: margin-left .28s cubic-bezier(.4,0,.2,1);
    min-height: 100vh;
}
body.sidebar-collapsed .main-wrapper { margin-left: 0; }
body.sidebar-collapsed .sidebar-nav-wrapper { transform: translateX(-100%); }

@media (max-width: 991px) {
    .header      { margin-left: 0 !important; }
    .main-wrapper{ margin-left: 0 !important; }
}
</style>

<header class="header">

    {{-- Hamburger --}}
    <button class="header-toggle" id="sidebarToggle" aria-label="Toggle sidebar">
        <i class="fas fa-bars"></i>
    </button>

    {{-- Page info --}}
    <div class="header-page-info">
        <div class="page-title">@yield('title', 'Dashboard')</div>
        <div class="page-breadcrumb">
            <span><a href="{{ route('dashboard') }}">Home</a></span>
            <span>@yield('title', 'Dashboard')</span>
        </div>
    </div>

    <div class="header-right">

        {{-- Notifications --}}
        <div style="position:relative;">
            {{-- <button class="hdr-btn" id="notifToggle" aria-label="Notifications">
                <i class="fas fa-bell"></i>
                @if($adminNotifCount > 0)
                    <span class="hdr-badge-count">{{ $adminNotifCount > 99 ? '99+' : $adminNotifCount }}</span>
                @endif
            </button> --}}

            <div class="hdr-dropdown" id="notifDropdown">
                <div class="hdr-drop-head">
                    <h6>Notifications</h6>
                    @if($adminNotifCount > 0)
                        <span class="hdr-drop-count">{{ $adminNotifCount }} New</span>
                    @endif
                </div>

                @forelse($adminNotifs as $notif)
                <a href="{{ route('interests.index') }}" class="notif-item">
                    <div class="ni-icon"><i class="lni lni-handshake"></i></div>
                    <div>
                        <div class="ni-title {{ $notif->is_read ? '' : 'fw-bold' }}">{{ $notif->title }}</div>
                        <div class="ni-msg">{{ Str::limit($notif->message, 70) }}</div>
                        <div class="ni-time">{{ $notif->created_at->diffForHumans() }}</div>
                    </div>
                </a>
                @empty
                <div style="padding:24px;text-align:center;color:#9ca3af;font-size:13px;">
                    <i class="fas fa-bell-slash" style="font-size:24px;opacity:.3;display:block;margin-bottom:8px;"></i>
                    No new notifications
                </div>
                @endforelse

                <div class="hdr-drop-foot">
                    <a href="{{ route('interests.index') }}">View all accepted deals →</a>
                </div>
            </div>
        </div>

        {{-- Divider --}}
        <div style="width:1px;height:24px;background:#e5e7eb;margin:0 4px;"></div>

        {{-- Profile --}}
        <div style="position:relative;">
            <button class="hdr-profile-btn" id="profileToggle" aria-label="Profile menu">
                <div class="hdr-avatar">{{ $adminAvatar }}</div>
                <div class="d-none d-md-block text-start">
                    <div class="hdr-profile-name" >{{ $adminName }}</div>
                    <div class="hdr-profile-role">Super Admin</div>
                </div>
                <i class="fas fa-chevron-down hdr-profile-chevron d-none d-md-block"></i>
            </button>

            <div class="hdr-dropdown hdr-profile-drop" id="profileDropdown">
                <div class="hdr-profile-info">
                    <div class="pi-avatar">{{ $adminAvatar }}</div>
                    <div>
                        <div class="pi-name">{{ $adminName }}</div>
                        <div class="pi-email">{{ $adminEmail }}</div>
                    </div>
                </div>
                <div class="hdr-drop-menu">
                    <form method="post" action="{{ route('admin.logout') }}">
                        @csrf
                        <button type="submit" class="logout-btn"
                            style="display:flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;text-align:center !important;">
                
                            <span style="">            <i class="lni lni-exit" aria-hidden="true" style="flex:0 0 auto !important;margin:0 !important;font-size:15px !important;"></i>&nbsp;&nbsp;Sign Out</span>
                        </button>
                    </form>
                </div>
            </div>
        </div>

    </div>
</header>

{{-- Session alerts --}}
<div class="hdr-alerts">
    @if(session('success'))
        <div class="hdr-alert alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if(session('error'))
        <div class="hdr-alert alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if($errors->any())
        <div class="hdr-alert alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-triangle me-2"></i>
            <ul class="mb-0 ps-3">
                @foreach($errors->all() as $e)<li style="font-size:13px;">{{ $e }}</li>@endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
</div>

<script>
(function () {
    // Sidebar toggle
    const toggle   = document.getElementById('sidebarToggle');
    const sidebar  = document.querySelector('.sidebar-nav-wrapper');
    const body     = document.body;

    if (toggle && sidebar) {
        toggle.addEventListener('click', function () {
            if (window.innerWidth <= 991) {
                sidebar.classList.toggle('sidebar-open');
            } else {
                body.classList.toggle('sidebar-collapsed');
            }
        });
        // Close sidebar on overlay click (mobile)
        document.querySelector('.overlay')?.addEventListener('click', function () {
            sidebar.classList.remove('sidebar-open');
        });
    }

    // Dropdown toggle helper
    function initDropdown(btnId, dropId) {
        const btn  = document.getElementById(btnId);
        const drop = document.getElementById(dropId);
        if (!btn || !drop) return;
        btn.addEventListener('click', function (e) {
            e.stopPropagation();
            drop.classList.toggle('show');
            // close others
            document.querySelectorAll('.hdr-dropdown').forEach(function (d) {
                if (d !== drop) d.classList.remove('show');
            });
        });
    }

    initDropdown('notifToggle',  'notifDropdown');
    initDropdown('profileToggle','profileDropdown');

    document.addEventListener('click', function () {
        document.querySelectorAll('.hdr-dropdown').forEach(function (d) { d.classList.remove('show'); });
    });
})();
</script>