@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="flex py-8">
            <!-- Sidebar -->
            <div id="sidebarDashboard"
                class="flex md:flex-shrink-0 h-screen md:h-fit bg-black/40 md:bg-black/0 z-50 md:z-1  w-full md:w-fit md:sticky fixed md:top-18 top-auto md:bottom-auto -bottom-[200%] md:items-start items-end duration-300  ">
                <div
                    class="flex flex-col md:w-70 w-full bg-white h-[85vh] md:h-fit md:shadow-md shadow-lg md:rounded-lg rounded-xl relative top-5">
                    <button
                        class="p-1 text-white absolute top-2 right-2 bg-red-500 hover:bg-red-600 rounded-full w-9 h-9 flex md:hidden justify-center items-center z-10  "
                        id="closeMenuDashboard">
                        <svg class="h-5 w-5 " fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
                            </path>
                        </svg>
                    </button>

                    <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto">

                        <!-- User Profile -->
                        <div class="relative mb-4">
                            <div class="h-16 bg-gradient-to-r from-primary/10 to-primary/5 rounded-t-md"></div>
                            <div class="absolute top-4 left-0 w-full flex justify-center">
                                <div class="relative">
                                    <div
                                        class="w-20 h-20 rounded-full border-4 border-white shadow-md overflow-hidden bg-gray-200">
                                        <img alt="Redwan Hussain Shawon" src="{{ Auth::user()->image }}"
                                            class="w-full h-full object-cover" />
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="text-center mt-7">
                            <h1 class="text-lg font-semibold text-gray-800">{{ Auth::user()->name }}</h1>
                            <p class="text-gray-500 text-xs">
                                Member Since {{ Auth::user()->created_at->format('F d, Y') }}
                            </p>
                        </div>



                        <!-- Navigation -->
                        <nav class="space-y-1 mt-3 ">
                            <a href="{{ route('dashboard') }}"
                                class="flex items-center px-3 py-3 text-md font-medium rounded-lg  group transition-all  
                                          {{ request()->routeIs('dashboard') ? 'bg-gradient-to-r from-primary/90 to-primary-dark/90 text-white' : 'text-gray-700 hover:bg-gray-100  ' }} group  transition-all">

                                <svg class="w-5 h-5 mr-3 {{ request()->routeIs('dashboard') ? 'text-white' : 'text-primary ' }}"
                                    viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z" />
                                </svg>
                                {{ __('menu.dashboard') }}
                            </a>
                            <a href="{{ route('dashboard.my-course') }}"
                                class="flex items-center px-3 py-3 text-md font-medium rounded-lg  {{ request()->routeIs('dashboard.my-course') ? 'bg-gradient-to-r from-primary/90 to-primary-dark/90 text-white' : 'text-gray-700 hover:bg-gray-100  ' }} group transition-colors">
<svg class="w-6 mr-3 {{ request()->routeIs('dashboard.my-course') ? 'text-white' : 'text-primary' }}" 
     xmlns="http://www.w3.org/2000/svg" 
     width="16" height="16" 
     viewBox="0 0 16 13" 
     fill="none">
  <path d="M14.6458 8.75106C14.6458 8.88919 14.7006 9.02167 14.7983 9.11934C14.896 9.21702 15.0285 9.27189 15.1666 9.27189C15.3047 9.27189 15.4372 9.21702 15.5349 9.11934C15.6325 9.02167 15.6874 8.88919 15.6874 8.75106H14.6458ZM14.6458 5.10522V8.75106H15.6874V5.10522H14.6458Z" fill="currentColor"/>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.362 7.02505C3.32378 7.00694 3.28127 6.9984 3.23856 7.00025C3.19584 7.0021 3.15434 7.01427 3.11803 7.03561C3.08171 7.05695 3.05179 7.08674 3.03113 7.12214C3.01046 7.15753 2.99975 7.19734 3 7.23776V10.1638C3 10.1638 3 13 8 13C13 13 13 10.1638 13 10.1638V7.23776C13.0001 7.19742 12.9892 7.15772 12.9685 7.12246C12.9478 7.0872 12.9178 7.05754 12.8815 7.03631C12.8453 7.01508 12.8038 7.00299 12.7612 7.00118C12.7186 6.99938 12.6762 7.00792 12.638 7.02599L8.448 9.00661C8.30907 9.07234 8.15585 9.10656 8.0005 9.10656C7.84515 9.10656 7.69193 9.07234 7.553 9.00661L3.362 7.02505Z" fill="currentColor"/>
  <path d="M0.300115 4.10302L7.75728 1.04705C7.83262 1.01611 7.91573 1 8 1C8.08427 1 8.16738 1.01611 8.24272 1.04705L15.6999 4.10213C15.79 4.13896 15.8659 4.19566 15.9189 4.26586C15.9719 4.33607 16 4.41699 16 4.49956C16 4.58212 15.9719 4.66305 15.9189 4.73325C15.8659 4.80345 15.79 4.86015 15.6999 4.89698L8.24272 7.95295C8.16738 7.98389 8.08427 8 8 8C7.91573 8 7.83262 7.98389 7.75728 7.95295L0.300115 4.89787C0.209957 4.86104 0.134113 4.80434 0.0810985 4.73414C0.0280843 4.66393 0 4.58301 0 4.50044C0 4.41788 0.0280843 4.33695 0.0810985 4.26675C0.134113 4.19655 0.209957 4.13985 0.300115 4.10302Z" fill="currentColor"/>
</svg>

                                {{ __('menu.my_courses') }}

                            </a>

                            <a href="{{ route('dashboard.enrollment') }}"
                                class="flex items-center px-3 py-3 text-md font-medium rounded-lg  group transition-colors  {{ request()->routeIs('dashboard.enrollment') ? 'bg-gradient-to-r from-primary/90 to-primary-dark/90 text-white' : 'text-gray-700 hover:bg-gray-100  ' }}">

                                <svg class="w-5  mr-3 {{ request()->routeIs('dashboard.enrollment') ? 'text-white' : 'text-primary ' }}"
                                    xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="lucide lucide-shopping-cart-icon lucide-shopping-cart">
                                    <circle cx="8" cy="21" r="1" />
                                    <circle cx="19" cy="21" r="1" />
                                    <path
                                        d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" />
                                </svg>


                                {{ __('menu.enrollment_history') }}

                            </a>
                            <a href="{{ route('dashboard.save-videos') }}"
                                class="flex items-center px-3 py-3 text-md font-medium rounded-lg text-gray-700 hover:bg-gray-100 group transition-colors  {{ request()->routeIs('dashboard.save-videos') ? 'bg-gradient-to-r from-primary/90 to-primary-dark/90 text-white' : 'text-gray-700 hover:bg-gray-100  ' }}">

                                <svg xmlns="http://www.w3.org/2000/svg"
                                    class="w-5 h-5 mr-3 {{ request()->routeIs('dashboard.save-videos') ? 'text-white' : 'text-primary ' }}"
                                    viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M5 3v18l7-5 7 5V3H5z" />
                                </svg>

                                {{ __('menu.save_video_view') }}

                            </a>

                            <a href="{{route('dashboard.exam.index')}}"
                                class="flex items-center px-3 py-3 text-md font-medium rounded-lg text-gray-700 hover:bg-gray-100 group transition-colors">
                                <svg class="w-5 h-5 mr-3 text-primary" viewBox="0 0 24 24" fill="currentColor">
                                    <path
                                        d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM7 12h2v5H7zm4-7h2v12h-2zm4 3h2v9h-2z" />
                                </svg>
                                {{ __('menu.exams') }}

                            </a>


                            <a href="{{ route('dashboard.notification') }}"
                                class="flex items-center px-3 py-3 text-md font-medium rounded-lg  group transition-colors {{ request()->routeIs('dashboard.notification') ? 'bg-gradient-to-r from-primary/90 to-primary-dark/90 text-white' : 'text-gray-700 hover:bg-gray-100  ' }}">

                                <svg class="w-5 h-5 mr-3 {{ request()->routeIs('dashboard.notification') ? 'text-white' : 'text-primary' }}" xmlns="http://www.w3.org/2000/svg" fill="none"
                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5">
                                    </path>
                                </svg>
                                {{ __('menu.notification') }}
                            </a>

                            <a href="{{ route('dashboard.profile') }}"
                                class="flex items-center px-3 py-3 text-md font-medium rounded-lg {{ request()->routeIs('dashboard.profile') ? 'bg-gradient-to-r from-primary/90 to-primary-dark/90 text-white' : 'text-gray-700 hover:bg-gray-100  ' }} group transition-colors">
                                <svg class="w-5 h-5 mr-3 {{ request()->routeIs('dashboard.profile') ? 'text-white' : 'text-primary' }}" viewBox="0 0 22 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M11.0017 12.4367C14.2398 12.4367 16.8868 9.78974 16.8868 6.55162C16.8868 3.31351 14.2398 0.666504 11.0017 0.666504C7.7636 0.666504 5.11665 3.31351 5.11665 6.55162C5.11665 9.78974 7.76365 12.4367 11.0017 12.4367ZM21.1015 17.1397C20.9473 16.7542 20.7417 16.3944 20.5105 16.0603C19.3283 14.3127 17.5037 13.1563 15.4477 12.8736C15.1908 12.8479 14.9081 12.8993 14.7025 13.0535C13.6231 13.8502 12.3382 14.2613 11.0018 14.2613C9.66538 14.2613 8.38044 13.8502 7.30107 13.0535C7.09546 12.8993 6.81276 12.8222 6.5558 12.8736C4.49986 13.1563 2.64953 14.3127 1.49308 16.0603C1.26179 16.3944 1.05618 16.7799 0.902016 17.1397C0.824935 17.2939 0.850612 17.4738 0.927693 17.628C1.13331 17.9878 1.39027 18.3476 1.62156 18.656C1.98134 19.1443 2.36684 19.5811 2.80374 19.9923C3.16352 20.3521 3.5747 20.6862 3.98592 21.0203C6.01613 22.5365 8.45757 23.3332 10.9761 23.3332C13.4946 23.3332 15.936 22.5365 17.9663 21.0203C18.3774 20.7119 18.7886 20.3521 19.1484 19.9923C19.5596 19.5811 19.9708 19.1442 20.3306 18.656C20.5876 18.3219 20.8189 17.9878 21.0245 17.628C21.1529 17.4738 21.1786 17.2938 21.1015 17.1397Z"
                                        fill="currentColor"></path>
                                </svg>
                                {{ __('menu.profile') }}
                            </a>

                            <a href="#"
                                class="flex items-center px-3 py-3 text-md font-medium rounded-lg text-gray-700 hover:bg-gray-100 group transition-colors">
                                <form action="{{ route('logout') }}" method="POST" class="w-full">
                                    @csrf
                                    <button type="submit" class="flex items-center w-full text-left cursor-pointer">
                                        <svg class="w-5 h-5 mr-3 text-primary" viewBox="0 0 24 24" fill="currentColor">
                                            <path d="M10.1 15.6L11.5 17l5-5-5-5-1.4 1.4L12.7 11H3v2h9.7l-2.6 2.6Z" />
                                            <path
                                                d="M19 3H5a2 2 0 0 0-2 2v4h2V5h14v14H5v-4H3v4a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z" />
                                        </svg>
                                        {{ __('menu.logout') }}
                                    </button>
                                </form>
                            </a>
                        </nav>

                        <!-- Help Section -->
                        <div class="mt-2 mb-4 p-3 bg-gray-50 border rounded-lg border-slate-200">
                            <div class="flex items-center">
                                <div class="p-2 bg-primary/10 rounded-full text-primary mr-3">
                                  <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="Question">
  <circle cx="12" cy="12" r="9"></circle>
  <path d="M9.5 9.5a2.5 2.5 0 014 1.5c0 1-1 1.5-1.5 2-.5.5-.5 1.25-.5 1.75" />
  <path d="M12 17h.01" />
</svg>

                                </div>
                                <div>
                                    <p class="text-xs font-medium text-gray-700"> {{ __('menu.need_help') }}</p>
                                    <a href="tel:{{ $websiteSetting->mobile_number }}"  class="text-xs text-primary font-medium mt-1 block hover:underline">
                                        {{ __('menu.contact_support') }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- Main Content -->
            <div class="flex flex-col flex-1 w-full">

                <!-- Dashboard Content -->
                <div class="flex-1  p-2 md:p-6 bg-background-light">
                    @yield('content_dash')

                </div>
            </div>
        </div>

        <button id="menuToggleDashboard"
            class="fixed top-[70px] left-3 bg-secondary flex md:hidden items-center gap-1 text-white py-1 px-2 rounded-md font-bold shadow-lg ">
            <svg id="menuIcon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
                viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
        </button>

    </div>

    @push('js')
        <script>
            $('#menuToggleDashboard').on('click', function() {
                $('#sidebarDashboard').toggleClass('bottom-0');

                if ($('#sidebarDashboard').hasClass('bottom-0')) {
                    $('body').addClass('overflow-hidden');
                } else {
                    $('body').removeClass('overflow-hidden');
                }
            });

            $('#closeMenuDashboard').on('click', function() {

                $('#sidebarDashboard').toggleClass('bottom-0');

                if ($('#sidebarDashboard').hasClass('bottom-0')) {
                    $('body').addClass('overflow-hidden');
                } else {
                    $('body').removeClass('overflow-hidden');
                }
            })
        </script>
    @endpush
@endsection