@extends('page.user-dashboard.app')

@section('content_dash')
    <div class="space-y-8">

        <!-- Welcome Section with Progress Overview -->
        <div class="bg-gradient-to-r from-primary to-primary-dark rounded-2xl p-6 text-white shadow-lg">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                <div class="flex items-center">
                    <div class="bg-white/20 p-3 rounded-full mr-4">
                        <i class="fas fa-user-graduate text-2xl"></i>
                    </div>
                    <div>
                        <h1 class="text-2xl md:text-3xl font-bold">
                            {{ __('dashboard.welcome_back') }}, {{ Auth::user()->name }}!
                        </h1>
                        <p class="text-sm md:text-base mt-1 opacity-90">
                            {{ __('dashboard.welcome_summary', ['date' => now()->format('F d, Y')]) }}

                        </p>
                    </div>
                </div>
                <div class="mt-4 md:mt-0">
                    <a href="{{ route('dashboard.profile') }}"
                        class="bg-white text-primary px-4 py-2 rounded-md shadow hover:bg-gray-100 transition-all flex items-center">
                        {{ __('dashboard.edit_profile') }}
                    </a>
                </div>
            </div>

            <!-- Progress Overview -->
            {{-- <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
                <div class="bg-white/10 p-3 rounded-lg">
                    <p class="text-xs opacity-80">Weekly Goal</p>
                    <div class="flex items-center mt-1">
                        <div class="w-full bg-white/20 rounded-full h-2 mr-2">
                            <div class="bg-white h-2 rounded-full" style="width: 75%"></div>
                        </div>
                        <span class="text-sm font-medium">75%</span>
                    </div>
                </div>
                <div class="bg-white/10 p-3 rounded-lg">
                    <p class="text-xs opacity-80">Learning Streak</p>
                    <p class="text-lg font-semibold mt-1 flex items-center">
                        <i class="fas fa-fire mr-1 text-secondary"></i> 12 days
                    </p>
                </div>
                <div class="bg-white/10 p-3 rounded-lg">
                    <p class="text-xs opacity-80">Hours This Week</p>
                    <p class="text-lg font-semibold mt-1">6.5h</p>
                </div>
                <div class="bg-white/10 p-3 rounded-lg">
                    <p class="text-xs opacity-80">Avg. Performance</p>
                    <p class="text-lg font-semibold mt-1">87%</p>
                </div>
            </div> --}}
        </div>

        <!-- Quick Stats Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 bg-white p-6 rounded-sm">

            <!-- Active Courses -->
            <div
                class="shadow bg-[#f1f4fd] rounded-xl p-6 border border-[#d6dcff] duration-500 hover:shadow-md hover:border-blue-400">
                <div class="flex justify-between items-start">
                    <div>
                        <h2 class="text-xl font-semibold text-gray-800">Active Courses</h2>
                        <p class="text-3xl font-bold text-blue-600 mt-2">{{ $activeCourses }}</p>
                    </div>
                    <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center">
                        <!-- Book Icon -->
                        <svg class="w-6 text-blue-600" 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>
                            <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>
                            <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"></path>
                        </svg>
                    </div>
                </div>
                <a href="{{ route('dashboard.my-course') }}"
                    class="mt-4 flex items-center justify-center bg-[#526cff] py-1.5 px-3 text-sm rounded-xs text-white w-fit mx-auto">
                    View Courses
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </a>
            </div>

            <!-- Active Exams -->
            <div
                class="shadow bg-pink-50 rounded-xl p-6 border border-pink-200 duration-500 hover:shadow-md hover:border-pink-400">
                <div class="flex justify-between items-start">
                    <div>
                        <h2 class="text-xl font-semibold text-gray-800">Active Exams</h2>
                        <p class="text-3xl font-bold text-pink-600 mt-2">{{ $activeExams ?? 3 }}</p>
                    </div>
                    <div class="bg-pink-100 p-3 rounded-full flex items-center justify-center">
                        <!-- File Icon -->
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-pink-600" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M9 12h6M9 16h6M13 4H6a2 2 0 00-2 2v16l4-4h9a2 2 0 002-2V6a2 2 0 00-2-2z" />
                        </svg>
                    </div>
                </div>
                <a href="{{ route('dashboard.my-course') }}"
                    class="mt-4 flex items-center justify-center bg-pink-600 py-1.5 px-3 text-sm rounded-xs text-white w-fit mx-auto">
                    View Exam
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </a>
            </div>

            <!-- Completed Modules -->
            <div
                class="shadow bg-green-50 rounded-xl p-6 border border-green-200 duration-500 hover:shadow-md hover:border-green-400">
                <div class="flex justify-between items-start">
                    <div>
                        <h2 class="text-xl font-semibold text-gray-800">Completed Courses</h2>
                        <p class="text-3xl font-bold text-green-600 mt-2">{{ $completedCourse }}</p>
                    </div>
                    <div class="bg-green-100 text-green-600 p-3 rounded-full flex items-center justify-center">
                        <!-- Check Circle Icon -->
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"
                            fill="none">
                            <path
                                d="M5.222 0.267C5.362 0.25 5.517 0.25 5.697 0.25H12.303C12.483 0.25 12.638 0.25 12.778 0.267C13.275 0.328828 13.7371 0.554683 14.0912 0.908796C14.4453 1.26291 14.6712 1.72504 14.733 2.222L14.736 2.25H15.542C15.754 2.248 16.219 2.244 16.603 2.501C17.1 2.832 17.25 3.401 17.25 4C17.25 6.726 15.797 8.546 13.942 9.557C12.907 11.441 10.995 12.75 9 12.75C7.481 12.75 6.04 11.928 5.003 10.791C4.65843 10.4151 4.35597 10.0026 4.101 9.561C2.247 8.555 0.75 6.737 0.75 4C0.75 3.4 0.9 2.832 1.396 2.501C1.781 2.244 2.246 2.248 2.458 2.25H3.264L3.267 2.222C3.32883 1.72504 3.55468 1.26291 3.9088 0.908796C4.26291 0.554683 4.72504 0.328828 5.222 0.267ZM15.732 3.755C15.6548 3.75034 15.5774 3.74867 15.5 3.75H14.747L14.715 7.04C15.353 6.272 15.75 5.27 15.75 4C15.75 3.882 15.741 3.804 15.732 3.755ZM2.25 4C2.25 5.237 2.638 6.22 3.26 6.982C3.194 6.236 3.212 5.478 3.23 4.724C3.23933 4.39733 3.245 4.07267 3.247 3.75H2.5C2.391 3.75 2.322 3.75 2.269 3.755C2.25494 3.83588 2.24858 3.91792 2.25 4ZM9.23 3.555C9.21079 3.5099 9.17874 3.47145 9.13785 3.44442C9.09696 3.41739 9.04902 3.40298 9 3.40298C8.95098 3.40298 8.90304 3.41739 8.86215 3.44442C8.82126 3.47145 8.78921 3.5099 8.77 3.555L8.265 4.767C8.24738 4.8093 8.21847 4.84594 8.18144 4.87292C8.1444 4.89991 8.10066 4.91619 8.055 4.92L6.746 5.025C6.69676 5.0289 6.64978 5.0473 6.61099 5.07787C6.5722 5.10845 6.54333 5.14982 6.52803 5.19679C6.51273 5.24375 6.51169 5.2942 6.52503 5.34175C6.53837 5.38931 6.5655 5.43185 6.603 5.464L7.6 6.318C7.63485 6.34799 7.66075 6.387 7.67487 6.43075C7.68898 6.47451 7.69076 6.5213 7.68 6.566L7.376 7.842C7.36428 7.89015 7.36713 7.9407 7.3842 7.98723C7.40127 8.03376 7.43178 8.07416 7.47186 8.10331C7.51195 8.13246 7.55978 8.14904 7.60931 8.15094C7.65883 8.15285 7.7078 8.13999 7.75 8.114L8.87 7.43C8.90917 7.40615 8.95414 7.39354 9 7.39354C9.04586 7.39354 9.09083 7.40615 9.13 7.43L10.25 8.114C10.2922 8.13999 10.3412 8.15285 10.3907 8.15094C10.4402 8.14904 10.4881 8.13246 10.5281 8.10331C10.5682 8.07416 10.5987 8.03376 10.6158 7.98723C10.6329 7.9407 10.6357 7.89015 10.624 7.842L10.319 6.566C10.3082 6.5213 10.31 6.47451 10.3241 6.43075C10.3382 6.387 10.3642 6.34799 10.399 6.318L11.397 5.464C11.4348 5.43192 11.4623 5.38931 11.4758 5.3416C11.4894 5.29388 11.4884 5.24321 11.4731 5.19603C11.4578 5.14885 11.4287 5.10731 11.3897 5.07667C11.3507 5.04604 11.3035 5.0277 11.254 5.024L9.946 4.92C9.90016 4.91637 9.85621 4.90017 9.81898 4.87317C9.78176 4.84618 9.7527 4.80944 9.735 4.767L9.23 3.555ZM9 13.25C9.19891 13.25 9.38968 13.329 9.53033 13.4697C9.67098 13.6103 9.75 13.8011 9.75 14V16.25H13C13.1989 16.25 13.3897 16.329 13.5303 16.4697C13.671 16.6103 13.75 16.8011 13.75 17C13.75 17.1989 13.671 17.3897 13.5303 17.5303C13.3897 17.671 13.1989 17.75 13 17.75H5C4.80109 17.75 4.61032 17.671 4.46967 17.5303C4.32902 17.3897 4.25 17.1989 4.25 17C4.25 16.8011 4.32902 16.6103 4.46967 16.4697C4.61032 16.329 4.80109 16.25 5 16.25H8.25V14C8.25 13.8011 8.32902 13.6103 8.46967 13.4697C8.61032 13.329 8.80109 13.25 9 13.25Z"
                                fill="currentColor" />
                        </svg>
                    </div>
                </div>

            </div>

        </div>


        <!-- Two-column layout for recent activity and progress -->
        <div class="grid grid-cols-1 gap-6">
            <!-- Recent Activity -->
            <div class="bg-white rounded-xl shadow p-6 border border-gray-100 lg:col-span-2">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-lg font-semibold text-dark">Recent Activity</h2>
                    <a href="#" class="text-sm text-primary hover:text-primary-dark">View all</a>
                </div>
                <ul class="">
                    @foreach ($notifications as $notification)
                        <li>
                            <a href="#"
                                class="flex items-start py-3 border-b border-slate-200 w-full hover:bg-slate-50">
                                <div
                                    class="bg-primary/10 w-8 h-8 flex items-center justify-center rounded-full mt-1 text-primary">
                                    <svg width="16" height="14" viewBox="0 0 24 18" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M23.208 2.35425C23.1103 1.7009 22.7817 1.10419 22.2818 0.672288C21.7819 0.240385 21.1439 0.00187683 20.4832 0H3.51674C2.85613 0.00187683 2.21805 0.240385 1.71818 0.672288C1.2183 1.10419 0.889719 1.7009 0.791992 2.35425L12 9.60675L23.208 2.35425Z"
                                            fill="currentColor"></path>
                                        <path
                                            d="M12.4072 11.13C12.2859 11.2085 12.1445 11.2502 12 11.2502C11.8555 11.2502 11.7141 11.2085 11.5927 11.13L0.75 4.11452V15.2333C0.750794 15.9668 1.04255 16.6701 1.56124 17.1888C2.07993 17.7075 2.78321 17.9992 3.51675 18H20.4832C21.2168 17.9992 21.9201 17.7075 22.4388 17.1888C22.9575 16.6701 23.2492 15.9668 23.25 15.2333V4.11377L12.4072 11.13Z"
                                            fill="currentColor"></path>
                                    </svg>
                                </div>
                                <div class="ml-4">
                                    <h2 class="text-md font-medium">{{ $notification->title }}</h2>
                                    <p class="text-xs text-gray-500 mt-1">{{ $notification->created_at->diffForHumans() }}
                                    </p>
                                </div>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>




        </div>

@endsection