@php
function activeRoute($route){
    return request()->routeIs($route) ? 'active' : '';
}
@endphp

<style>
.sidebar{
    width:260px;
    min-height:100vh;
    background:linear-gradient(180deg,#020617,#020617);
    color:#cbd5e1;
    position:fixed;
    left:0;
    top:0;
    z-index:1000;
    display:flex;
    flex-direction:column;
}

/* ===== HEADER ===== */
.sidebar-header{
    padding:16px 18px;
    background:rgba(255,255,255,.04);
    border-bottom:1px solid rgba(255,255,255,.08);
}

/* Avatar */
.avatar-ring{
    padding:2px;
    border-radius:50%;
    background:linear-gradient(135deg,#f97316,#fb923c);
}
.status-dot{
    position:absolute;
    bottom:2px;
    right:2px;
    width:10px;
    height:10px;
    background:#22c55e;
    border:2px solid #020617;
    border-radius:50%;
}

/* ===== LINKS ===== */
.sidebar-link{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 18px;
    margin:4px 10px;
    color:#cbd5e1;
    text-decoration:none;
    border-radius:12px;
    transition:all .25s ease;
    font-weight:500;
}
.sidebar-link i{ font-size:18px; }

.sidebar-link:hover{
    background:rgba(249,115,22,.15);
    color:#fff;
}

.sidebar-link.active{
    background:#f97316;
    color:#fff;
    font-weight:600;
    box-shadow:0 10px 25px rgba(249,115,22,.35);
}

/* Active indicator */
.sidebar-link.active::before{
    content:'';
    position:absolute;
    left:-10px;
    top:50%;
    transform:translateY(-50%);
    width:6px;
    height:24px;
    background:#f97316;
    border-radius:6px;
}

/* ===== SUB LINKS ===== */
.sidebar-sublink{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 18px;
    margin:2px 10px;
    color:#94a3b8;
    font-size:14px;
    text-decoration:none;
    border-radius:10px;
    transition:.2s;
}
.sidebar-sublink:hover{
    background:rgba(249,115,22,.1);
    color:#fff;
}
.sidebar-sublink.active{
    color:#f97316;
    font-weight:600;
}

/* ===== SECTION LABEL ===== */
.sidebar-section{
    font-size:11px;
    letter-spacing:.08em;
    color:#64748b;
    margin:18px 20px 6px;
}

/* Rotate chevron */
.rotate{ transition:.25s; }
a[aria-expanded="true"] .rotate{
    transform:rotate(180deg);
}
</style>

<aside class="sidebar">

    <!-- ===== USER HEADER ===== -->
    <div class="sidebar-header d-flex align-items-center gap-3">

        <div class="position-relative">
            <div class="avatar-ring">
                <img src="https://ui-avatars.com/api/?name={{ auth()->user()->name ?? 'Customer' }}&background=f97316&color=fff"
                     class="rounded-circle"
                     width="42" height="42">
            </div>
            <span class="status-dot"></span>
        </div>

        <div class="flex-grow-1">
            <div class="fw-semibold text-white d-flex align-items-center gap-1">
                {{ auth()->user()->name ?? 'Customer' }}
                <i class="bi bi-patch-check-fill text-primary"></i>
            </div>
            <small class="text-info">
                <i class="bi bi-person-badge"></i> Customer Account
            </small>
        </div>

    </div>

    <!-- ===== MENU ===== -->
    <div class="flex-grow-1 mt-3">

        <a href="{{ route('customer.dashboard') }}"
           class="sidebar-link {{ activeRoute('customer.dashboard') }}">
            <i class="bi bi-speedometer2"></i> Dashboard
        </a>

        <a href="{{ route('customer.orders') }}"
           class="sidebar-link {{ activeRoute('customer.orders') }}">
            <i class="bi bi-box-seam"></i> My Orders
        </a>

        <a href="{{ route('customer.tracking') }}"
           class="sidebar-link {{ activeRoute('customer.tracking') }}">
            <i class="bi bi-geo-alt"></i> Track Order
        </a>

        <a href="{{ route('customer.payments') }}"
           class="sidebar-link {{ activeRoute('customer.payments') }}">
            <i class="bi bi-credit-card"></i> Payments
        </a>

        <a href="{{ route('customer.profile') }}"
           class="sidebar-link {{ activeRoute('customer.profile') }}">
            <i class="bi bi-person"></i> Profile
        </a>

        <a href="{{ route('customer.settings') }}"
           class="sidebar-link {{ activeRoute('customer.settings') }}">
            <i class="bi bi-gear"></i> Settings
        </a>

        <!-- ===== SUPPORT ===== -->
        <div class="sidebar-section">SUPPORT</div>

        <a class="sidebar-link"
           data-bs-toggle="collapse"
           href="#supportMenu"
           role="button"
           aria-expanded="false">
            <i class="bi bi-headset"></i>
            Support Tickets
            <i class="bi bi-chevron-down ms-auto rotate"></i>
        </a>

        <div class="collapse ps-2" id="supportMenu">
         <a href="{{ route('customer.tickets.create') }}"
                class="sidebar-sublink {{ activeRoute('customer.tickets.create') }}">
                    <i class="bi bi-plus-circle"></i> Create Ticket
            </a>

            <a href="{{ route('customer.tickets.index') }}"
            class="sidebar-sublink {{ activeRoute('customer.tickets.index') }}">
                <i class="bi bi-folder2-open"></i> My Tickets
            </a>

            <a href="{{ route('customer.tickets.history') }}"
            class="sidebar-sublink {{ activeRoute('customer.tickets.history') }}">
                <i class="bi bi-chat-dots"></i> Replies
            </a>

        </div>

        <!-- ===== AI & SECURITY ===== -->
        <div class="sidebar-section">AI & SECURITY</div>

        <a href=""
           class="sidebar-link {{ activeRoute('customer.ai.insights') }}">
            <i class="bi bi-cpu"></i> AI Insights
        </a>

        <a href=""
           class="sidebar-link {{ activeRoute('customer.fraud.alerts') }}">
            <i class="bi bi-shield-exclamation"></i> Fraud Alerts
        </a>

        <a href=""
           class="sidebar-link {{ activeRoute('customer.security.logs') }}">
            <i class="bi bi-clipboard-data"></i> Security Logs
        </a>

        <a href=""
           class="sidebar-link {{ activeRoute('customer.disputes') }}">
            <i class="bi bi-exclamation-diamond"></i> Disputes
        </a>

    </div>

    <!-- ===== LOGOUT ===== -->
    <div class="p-3 border-top border-secondary">
        <form method="POST" action="{{ route('customer.logout') }}">
            @csrf
            <button class="btn btn-outline-danger w-100 rounded-pill">
                <i class="bi bi-box-arrow-right"></i> Logout
            </button>
        </form>
    </div>

</aside>