@extends('layouts.front-layout')
@section('content')

<style>
    .profile-img{
        border-radius: 50%;
        height: 150px;
        width: 150px;
        object-fit: cover;
    }

    .dashboard-menu a{
        text-decoration: none;
        color: #888 !important;
        padding: 8px 5px 8px 8px ;
        font-size: 18px;
        font-weight: 500;
        white-space: nowrap;
    }

    .dashboard-menu a:hover{
        color: white !important;
        background-color: #30bfac;
    }

    .colorGrey{
         color: #888;
    }


    @media (max-width: 768px) {
        .dashboard-menu {
            display: flex !important;
            overflow-x: auto;
            white-space: nowrap;
            background-color: #30bfac;
            padding: 10px 0;
            gap: 15px;
        }

        .dashboard-menu a {
            color: white;
            padding: 10px 15px;
            border-radius: 8px;
            flex: 0 0 auto;
        }

        .dashboard-menu::-webkit-scrollbar {
            display: none;
        }


        .sidebar-container {
            display: none;
        }


        .mobile-dashboard-menu {
            display: block !important;
        }

        .mobile-dashboard-menu a{
            color: white !important;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    }

    .mobile-dashboard-menu {
        display: none;
    }
</style>

<div class="container bg-white py-4">
    <div class="row gap-5 justify-content-center">
        {{-- Desktop Sidebar --}}
        <div class="col-md-3 border sidebar-container">
            <div class="container d-flex flex-column align-items-center gap-3 py-4">
                <img class="background-blue profile-img" src="{{(Auth::user()->userImage('user_profile'))}}" alt="">
                <h3 class="fs-4">{{(Auth::user()->first_name ? : '')}}</h3>
            </div>

            <hr>
            <div class="container d-flex flex-column gap-2 dashboard-menu">
                <a href="{{route('user.dashboard')}}"><i class="fa-solid fa-gauge"></i>&nbsp;Dashboard</a>
                <a href="{{route('user.account.details')}}"><i class="fa-solid fa-pen-to-square"></i>&nbsp; Account Details</a>
                <a href="{{route('user.order.list')}}"><i class="fa-solid fa-clock-rotate-left"></i>&nbsp; Orders</a>
                <a href="{{(route('refer.friend'))}}"><i class="fa-solid fa-users"></i>&nbsp; Refer to a Friend</a>
                <a href="{{route('cards')}}"><i class="fa-regular fa-credit-card"></i>&nbsp; Cards</a>
                {{-- <a href="#"><i class="fa-regular fa-gem"></i>&nbsp; Points</a> --}}
                <a href="{{route('user.update-password-view')}}"><i class="fa-solid fa-lock"></i>&nbsp; Login and Security</a>
            </div>
        </div>

        {{-- Mobile Menu --}}
        <div class="mobile-dashboard-menu">
            <div class="dashboard-menu">
                <a href="{{route('user.dashboard')}}"><i class="fa-solid fa-gauge"></i>&nbsp;Dashboard</a>
                <a href="{{route('user.account.details')}}"><i class="fa-solid fa-pen-to-square"></i>&nbsp; Account Details</a>
                <a href="{{route('user.order.list')}}"><i class="fa-solid fa-clock-rotate-left"></i>&nbsp; Orders</a>
                <a href="{{route('refer.friend')}}"><i class="fa-solid fa-users"></i>&nbsp; Refer to a Friend</a>
                <a href="{{route('cards')}}"><i class="fa-regular fa-credit-card"></i>&nbsp; Cards</a>
                {{-- <a href="#"><i class="fa-regular fa-gem"></i>&nbsp; Points</a> --}}
                <a href="{{route('user.update-password-view')}}"><i class="fa-solid fa-lock"></i>&nbsp; Login and Security</a>
                <a href="{{ route('user.logout') }}"><i class="fa-solid fa-lock"></i>&nbsp; LogOut</a>
            </div>
        </div>

        <div class="col-md-8 border">
            @yield('user-dashboard-content')
        </div>
    </div>
</div>
@endsection