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

@section('content_dash')
    <div>

        <!-- Welcome Section with Facebook Group Button -->
        <div class="bg-gradient-to-r from-primary-light to-primary/40 shadow rounded-2xl p-6 text-black mb-5">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                <div>
                    <h1 class="text-2xl md:text-3xl font-bold">Welcome back, {{ auth()->user()->name }}!</h1>
                    <p class="mt-1 opacity-90">Here's your learning summary for today, {{ now()->format('F j, Y') }}</p>
                </div>
                @if ($courseData->facebook_group)
                    <a href="{{ $courseData->facebook_group }}" target="_blank"
                        class="mt-4 md:mt-0 inline-flex items-center px-4 py-2 bg-white text-primary font-semibold rounded-full hover:bg-gray-50 transition-all">
                        <svg class="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="currentColor">
                            <path
                                d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z" />
                        </svg>
                        Join Facebook Group
                    </a>
                @endif
            </div>
        </div>

        <div class="space-y-5 md:space-y-8">
            <!-- Tab container -->
            <div class="sticky top-14 md:top-18 z-10 bg-white shadow-md rounded-lg">
                <div class="relative w-full">
                    <div class="overflow-x-auto no-scrollbar px-6" id="section-nav">
                        <div class="min-w-max">
                            <div class="flex py-3 space-x-1 flex-nowrap justify-center">
                                <div class="bg-gray-100 p-1.5 rounded-xl inline-flex shadow-inner">

                                    <a href="#course_details"
                                        class="px-5 py-2 rounded-xl font-medium text-sm transition-all duration-300 section-link text-gray-700 hover:bg-gray-200 hover:text-gray-900">
                                        <span class="flex items-center">
                                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor"
                                                viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2">
                                                </path>
                                            </svg>
                                            {{ __('dashboard.course_details') }}
                                        </span>
                                    </a>
                                    <a href="#notifications"
                                        class="px-5 py-2 rounded-xl font-medium text-sm transition-all duration-300 section-link text-gray-700 hover:bg-gray-200 hover:text-gray-900">
                                        <span class="flex items-center">
                                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor"
                                                viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9">
                                                </path>
                                            </svg>
                                            {{ __('dashboard.notifications') }}
                                        </span>
                                    </a>
                                    <a href="#archived_courses"
                                        class="px-5 py-2 rounded-xl font-medium text-sm transition-all duration-300 section-link text-gray-700 hover:bg-gray-200 hover:text-gray-900">
                                        <span class="flex items-center">
                                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor"
                                                viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4">
                                                </path>
                                            </svg>
                                            {{ __('dashboard.archived_courses') }}
                                        </span>
                                    </a>
                                    <a href="#reviews"
                                        class="px-5 py-2 rounded-xl font-medium text-sm transition-all duration-300 section-link text-gray-700 hover:bg-gray-200 hover:text-gray-900">
                                        <span class="flex items-center">
                                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor"
                                                viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z">
                                                </path>
                                            </svg>
                                            {{ __('dashboard.review') }}
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 " id="course_details">


                <div class="p-6">
                    <div class="flex flex-col lg:flex-row gap-6">
                        <!-- Course Image and Quick Actions -->
                        <div class="lg:w-1/3">
                            <div class="rounded-xl  shadow-md">
                                <img class="w-full aspect-video object-cover rounded-md"
                                    src="{{ asset($courseData->thumbnail_url) }}" alt="{{ $courseData->title }}">
                            </div>
                            <div class="flex items-center justify-between mt-3">
                                @if ($enroll_status == 'active')
                                <span
                                    class="px-3 py-1 rounded-full bg-success/10 text-success text-xs font-medium border border-success/20">Active</span>
                                    @elseif ($enroll_status == 'completed')
                                     <span
                                    class="px-3 py-1 rounded-full bg-orange/10 text-orange-600 text-xs font-medium border border-orange/20">Completed</span>
                                    @endif

                                <div class="flex items-center text-light text-sm">
                                    <svg class="w-4 h-4 text-accent mr-1" viewBox="0 0 24 24" fill="currentColor">
                                        <path
                                            d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
                                    </svg>
                                   
                                </div>
                            </div>


                            <div class="mt-3 flex justify-center">
                                @if ($courseData->facebook_group)
                                    <a href="{{ $courseData->facebook_group }}" target="_blank"
                                        class="text-primary hover:text-primary-dark text-sm font-medium inline-flex items-center">
                                        <svg class="w-4 h-4 mr-1" viewBox="0 0 24 24" fill="currentColor">
                                            <path
                                                d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z" />
                                        </svg>
                                        Course Discussion Group
                                    </a>
                                @endif
                            </div>


                        </div>

                        <!-- Course Details -->
                        <div class="lg:w-3/5">
                            <h3 class="text-2xl font-bold text-gray-900 mb-3 leading-tight">{{ $courseData->title }}</h3>
                            <p class="text-gray-600 mb-6 leading-relaxed">{{ $courseData->short_description }}</p>

                            <!-- Stats Cards -->
                            <div class="mb-6 grid sm:grid-cols-2 xl:grid-cols-3 gap-4">
                                <div
                                    class="bg-gradient-to-br from-blue-50 to-blue-100 p-4 rounded-xl border border-blue-200 shadow-sm">
                                    <div class="flex items-center ">
                                        <div
                                            class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                                            <svg class="w-5 h-5 text-blue-600" viewBox="0 0 24 24" fill="none"
                                                stroke="currentColor" stroke-width="2">
                                                <path d="M12 5v14M5 12h14"></path>
                                            </svg>
                                        </div>
                                        <div>
                                            <p class="text-xs text-blue-700 font-medium uppercase tracking-wide">
                                                {{ __('dashboard.total_lessons') }}</p>
                                            <p class="font-bold text-blue-900 text-lg">{{ $totalVideoCount }} lessons</p>
                                        </div>
                                    </div>
                                </div>
                                <div
                                    class="bg-gradient-to-br from-purple-50 to-purple-100 p-4 rounded-xl border border-purple-200 shadow-sm">
                                    <div class="flex items-center">
                                        <!-- Icon -->
                                        <div
                                            class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-3">
                                            <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor"
                                                stroke-width="2" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M9 12h6m-6 4h6M9 8h6M4 6h16v12H4z"></path>
                                            </svg>
                                        </div>
                                        <!-- Text -->
                                        <div>
                                            <p class="text-xs text-purple-700 font-medium uppercase tracking-wide">
                                                {{ __('dashboard.total_quizzes') }}
                                            </p>
                                            <p class="font-bold text-purple-900 text-lg">{{ $totalQuizCount }}</p>
                                        </div>
                                    </div>
                                </div>
                                <!-- Total PDFs Card -->
                                <div
                                    class="bg-gradient-to-br from-green-50 to-green-100 p-4 rounded-xl border border-green-200 shadow-sm hover:border-green-300 transition-all">
                                    <div class="flex items-center">
                                        <!-- Icon -->
                                        <div
                                            class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3">
                                            <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor"
                                                stroke-width="2" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4">
                                                </path>
                                            </svg>
                                        </div>

                                        <!-- Text -->
                                        <div>
                                            <p class="text-xs text-green-700 font-medium uppercase tracking-wide">
                                                {{ __('dashboard.total_material') }}
                                            </p>
                                            <p class="font-bold text-green-900 text-lg">
                                                {{ $totalMaterialsCount }}
                                            </p>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <!-- Action Buttons -->
                            <div class="flex flex-wrap gap-4 items-center max-md:fixed bottom-0 left-0 max-md:w-full max-md:p-2 bg-white max-md:shadow-lg border-t border-slate-200">
                                <a href="{{ $isArchive
                                    ? route('dashboard.course.content.archive', ['courseId' => $course_id, 'archiveId' => $archive_id])
                                    : route('dashboard.course.content', ['courseId' => $courseData->id]) }}"
                                    class="btn-primary flex items-center px-6 py-3 rounded-xl text-base font-medium shadow-md hover:shadow-lg transition-shadow w-full justify-center" >
                                    <svg class="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="currentColor">
                                        <path d="M8 5v14l11-7z"></path>
                                    </svg>
                                    {{ __('dashboard.recorded_video') }}
                                </a>

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

            @if (!$isArchive)
                <div class="bg-white rounded-2xl shadow-md border border-gray-100" id="archived_courses">
                    <!-- Header -->
                    <div class="border-b border-gray-100 px-6 py-4 flex justify-between items-center">
                        <h2 class="text-[26px] font-bold text-gray-800   ">{{ __('dashboard.archived_courses') }}</h2>
                        <span class="bg-primary/10 text-primary text-xs font-medium px-3 py-1 rounded-full">
                            {{ count($archivedCourses) }}
                        </span>
                    </div>

                    <!-- Swiper -->
                    <div class="">
                        @if (count($archivedCourses) > 0)
                            <div class="swiper archiveCourse ">
                                <div class="swiper-wrapper p-3">

                                    <!-- Course Card -->
                                    @forelse($archivedCourses as $archivedCourse)
                                        <div
                                            class="swiper-slide  bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
                                            <!-- Thumbnail -->
                                            <div class="relative">
                                                <img src="{{ asset($archivedCourse->course->thumbnail_url) ?? 'https://via.placeholder.com/400x200' }}"
                                                    alt="{{ $archivedCourse->course->title }}"
                                                    class="w-full aspect-video object-cover">
                                            </div>

                                            <!-- Card Content -->
                                            <div class="p-4 flex flex-col gap-4">
                                                <!-- Title -->
                                                <h3
                                                    class="text-lg font-semibold text-gray-800 leading-6 line-clamp-2  h-12">
                                                    {{ $archivedCourse->course->title }}
                                                </h3>


                                                <!-- See Video Button -->
                                                <a href="{{ route('dashboard.my-course.archive.view', ['id' => $courseData->id, 'archiveId' => $archivedCourse->course->id]) }}"
                                                    class="btn-primary w-full text-center py-2 rounded-md font-medium transition duration-200 mt-1 flex gap-1 items-center justify-center">

                                                    <svg class="w-5 h-5" fill="none" stroke="currentColor"
                                                        viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                            stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                            stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274
                             4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                                    </svg>

                                                    {{ __('dashboard.view_details') }}
                                                </a>

                                            </div>
                                        </div>

                                    @empty
                                    @endforelse

                                </div>

                                <!-- Swiper Navigation -->
                                <div class="flex justify-between items-center mt-4">
                                    <div
                                        class="swiper-button-prev !w-8 !h-8 bg-black/60 rounded-full shadow hover:bg-black/80">
                                    </div>
                                    <div class="swiper-pagination -mb-1"></div>

                                    <div
                                        class="swiper-button-next !w-8 !h-8 bg-black/60 rounded-full shadow hover:bg-black/80">
                                    </div>
                                </div>
                            </div>
                        @else
                            <div class="flex flex-col items-center justify-center p-12 text-center col-span-full">
                                <img src="{{ asset('assets/images/no-order.png') }}" class="w-[100px] mb-3"
                                    alt="">
                                <h3 class="text-xl font-medium text-gray-700 mb-2">
                                    {{ __('dashboard.no_archived_courses_found') }}
                                </h3>
                                <p class="text-gray-500 max-w-md mx-auto mb-6">
                                    {{ __('dashboard.no_archived_courses_desc') }}
                                </p>

                            </div>
                        @endif
                    </div>
                </div>
            @endif

           
            
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mt-6" id="notifications">
                <!-- Header -->
                <div class="border-b border-gray-100 px-6 py-4">
                    <h2 class="text-[26px] font-bold text-gray-800   ">📢 {{ __('dashboard.course_notifications') }}</h2>
                </div>

                <div class=" flex flex-col gap-5 p-5">
                    @forelse ($notifications as $notification)
                        <div
                            class="p-5 hover:bg-gray-50 hover:shadow-sm transition duration-200 bg-white shadow-md rounded-xl border border-slate-100">
                            <div class="flex items-start justify-between gap-4 sm:flex-row flex-col">
                                <!-- Icon + Content -->
                                <div class="flex items-start gap-3">
                                    <!-- Same Icon for all -->
                                    <div
                                        class="w-12 h-12 flex items-center justify-center bg-gray-200/60 text-gray-600 rounded-full flex-shrink-0 ">
                                        <svg width="20" height="16" 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
                                                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" />
                                        </svg>
                                    </div>

                                    <!-- Text Content -->
                                    <div>
                                        <h3 class="font-semibold text-gray-900 text-base md:text-lg line-clamp-1">
                                            {{ $notification->title }}
                                        </h3>
                                        <div class="text-sm line-clamp-2 text-gray-600 mt-1">
                                            {!! $notification->message !!}
                                        </div>
                                        <span
                                            class="inline-flex items-center text-[13px] text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full mt-2 shadow-sm">
                                            <!-- Clock SVG -->
                                            <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 mr-1 text-blue-500"
                                                fill="none" viewBox="0 0 24 24" stroke="currentColor"
                                                stroke-width="2">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M12 6v6l4 2m6-2a10 10 0 11-20 0 10 10 0 0120 0z" />
                                            </svg>
                                            {{ $notification->created_at->diffForHumans() }}
                                        </span>

                                    </div>
                                </div>

                                <!-- View Details Button -->
                                <a href="{{ route('dashboard.notification.view', $notification->id) }}"
                                    class="px-3 py-2 text-sm font-medium text-white bg-primary hover:bg-primary-dark rounded-lg shadow-sm transition text-center sm:w-fit w-full">
                                    Details
                                </a>
                            </div>
                        </div>
                    @empty
                        <div class="flex flex-col items-center justify-center p-12 text-center col-span-full">
                            <img src="{{ asset('assets/images/no-order.png') }}" class="w-[100px] mb-3" alt="">
                            <h3 class="text-xl font-medium text-gray-700 mb-2">
                                {{ __('dashboard.no_notifications_found') }}
                            </h3>
                            <p class="text-gray-500 max-w-md mx-auto mb-6">
                                {{ __('dashboard.no_notifications_desc') }}
                            </p>

                        </div>
                    @endforelse


                </div>
            </div>

        </div>

 <script>
const swiper = new Swiper('.archiveCourse', {
    spaceBetween: 10, // gap in px
    pagination: true,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    breakpoints: {
        400: {
            slidesPerView: 1,
        },
        768: {
            slidesPerView: 2,
        },
        1024: {
            slidesPerView: 3,
        },
    },
});

            </script>



        <script>
            $(document).ready(function() {
                // Open modal
                $('#openReviewModal').click(function() {
                    $('#reviewModal').fadeIn();
                    $('body').addClass('overflow-hidden');
                });

                // Close modal
                $('#closeModal, #cancelReview').click(function() {
                    $('#reviewModal').fadeOut();
                    $('body').removeClass('overflow-hidden');
                });

                // Click outside to close
                $('#reviewModal').click(function(e) {
                    if (e.target === this) {
                        $('body').removeClass('overflow-hidden');
                        $('#reviewModal').fadeOut();

                        resetForm();
                    }
                });


                // Reset form function
                function resetForm() {
                    $('#ratingInput').val(0);
                    $('.star-btn').removeClass('text-yellow-400').addClass('text-gray-300');
                    $('#ratingText').text('Select rating');
                    $('#commentInput').val('');
                }
            });
        </script>

        <script>
            document.querySelectorAll('.star-btn').forEach(star => {
                star.addEventListener('click', function() {
                    let rating = this.dataset.value;
                    document.getElementById('ratingInput').value = rating;

                    // Update stars
                    document.querySelectorAll('.star-btn').forEach((s, i) => {
                        if (i < rating) {
                            s.classList.add('text-yellow-400');
                            s.classList.remove('text-gray-300');
                        } else {
                            s.classList.remove('text-yellow-400');
                            s.classList.add('text-gray-300');
                        }
                    });

                    // Update rating text
                    const ratingTexts = {
                        1: "Poor",
                        2: "Fair",
                        3: "Good",
                        4: "Very Good",
                        5: "Excellent"
                    };
                    document.getElementById('ratingText').textContent = ratingTexts[rating];
                });

                // Add hover effect
                star.addEventListener('mouseover', function() {
                    let hoverValue = this.dataset.value;
                    document.querySelectorAll('.star-btn').forEach((s, i) => {
                        if (i < hoverValue) {
                            s.classList.add('text-yellow-300');
                        } else {
                            s.classList.remove('text-yellow-300');
                        }
                    });
                });

                star.addEventListener('mouseout', function() {
                    let currentRating = document.getElementById('ratingInput').value;
                    document.querySelectorAll('.star-btn').forEach((s, i) => {
                        if (i < currentRating) {
                            s.classList.add('text-yellow-400');
                        } else {
                            s.classList.remove('text-yellow-300');
                            s.classList.remove('text-yellow-400');
                            s.classList.add('text-gray-300');
                        }
                    });
                });
            });
        </script>


    </div>



@endsection