@extends('layouts.app')
@section('title', 'Courses | ' . $websiteSetting->app_name)
@section('description', 'Browse all our courses and start learning online with ' . $websiteSetting->app_name)


@section('content')
    <section class=" min-h-[80vh]"
        style="background: radial-gradient(60.52% 68.24% at 50% 68.24%, rgb(139 91 255 / 30%) 0, rgb(248 244 255 / 30%) 44.14%, rgb(231 219 255 / 30%) 100%)">
        <div class="container py-12 px-4">
            <div class="flex justify-between items-center">
                <h2 class="text-3xl md:text-[38px] font-bold mb-2  text-black">{{ __('text.course_title') }}</h2>
                <!-- Funnel / Filter icon -->
                <div class="bg-white border border-slate-200 shadow hover:bg-slate-100 rounded-xs py-1.5 px-2 md:hidden"
                    id="openFilter">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="w-7 h-7 text-gray-700 cursor-pointer">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h18M6.75 9.75h10.5M10.5 15h3" />
                    </svg>
                </div>

            </div>

            <div class="flex justify-center items-start md:gap-6 mt-5">
                <form action="" method="get"
                    class=" max-md:fixed max-md:w-full max-md:z-50 max-md:h-screen overflow-auto left-0 max-md:top-full md:w-[350px] bg-white shadow-md rounded-md p-6 border border-gray-100 sticky flex justify-between flex-col duration-500 "
                    id="filterWrapper">
                    <div class="space-y-6">
                        <!-- Filter Title -->
                        <h3 class="text-xl font-semibold text-gray-900">{{ __('messages.filter_courses') }}</h3>

                        <button
                            class=" md:hidden text-gray-400 hover:text-gray-600  right-5 bg-slate-100 border border-slate-300 rounded-xs p-2 top-5 shadow-sm hover:bg-slate-200 cursor-pointer absolute "
                            id="removeFilter">
                            <svg class="h-5 w-5 text-black" 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>
                            <h4 class="text-sm font-medium text-gray-700 mb-3">{{ __('messages.access_type') }}</h4>
                            <div class="flex flex-col space-y-3">
                                <label class="flex items-center gap-3 cursor-pointer ">
                                    <input type="radio" name="access_type" value="all"
                                        class="cursor-pointer h-5 !w-5 text-purple-600 border-gray-300"
                                        {{ request('access_type') == 'all' ? 'checked' : '' }}>
                                    <span class="text-gray-800 text-sm font-medium">{{ __('messages.all') }}</span>
                                </label>
                                <label class="flex items-center gap-3 cursor-pointer " for="free">
                                    <input type="radio" name="access_type" value="free" id="free"
                                        class="cursor-pointer h-5 !w-5 text-purple-600 border-gray-300"
                                        {{ request('access_type') == 'free' ? 'checked' : '' }}>
                                    <span class="text-gray-800 text-sm font-medium">{{ __('messages.free') }}</span>
                                </label>
                                <label class="flex items-center gap-3 cursor-pointer " for="paid">
                                    <input type="radio" name="access_type" value="paid" id="paid"
                                        class="cursor-pointer h-5 !w-5 text-purple-600 border-gray-300"
                                        {{ request('access_type') == 'paid' ? 'checked' : '' }}>
                                    <span class="text-gray-800 text-sm font-medium">{{ __('messages.paid') }}</span>
                                </label>
                            </div>
                        </div>

                        <div>
                            <h4 class="text-sm font-medium text-gray-700 mb-3">{{ __('messages.course_type') }}</h4>
                            <div class="flex flex-col space-y-2 max-h-64 overflow-y-auto pr-1">
                                <button type="button"
                                    class=" flex items-center gap-3 px-4 py-2 rounded-lg text-gray-800 text-sm font-medium hover:bg-red-200 bg-red-50 transition w-full text-left border border-red-100 hover:border-red-300 cursor-pointer {{ request('course_type') == 'Live' ? 'bg-red-200 border-red-300' : '' }}"
                                    onclick="courseType(this,'Live')">
                                    <img src="{{ asset('assets/icons/live-ani.svg') }}" class="w-6 h-6" alt="Live">
                                    Live
                                </button>
                                <button type="button"
                                    class="flex items-center gap-3 px-4 py-2 rounded-lg text-gray-800 text-sm font-medium hover:bg-red-200 bg-red-50 transition w-full text-left  hover:border-red-300 cursor-pointer  border border-red-100     {{ request('course_type') == 'Recording' ? 'bg-red-200 border-red-300' : '' }}"
                                    onclick="courseType(this,'Recording')">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-red-400" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round">
                                        <path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4"></path>
                                        <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
                                        <rect width="8" height="6" x="2" y="12" rx="1"></rect>
                                        <path d="m10 15.5 4 2.5v-6l-4 2.5"></path>
                                    </svg>
                                    Recorded
                                </button>
                                <input type="hidden" name="course_type" id="course_type"
                                    value="{{ request('course_type') ?? '' }}">
                            </div>
                        </div>

                        <!-- Category Filter -->
                        <div>
                            <h4 class="text-sm font-medium text-gray-700 mb-3">{{ __('menu.category') }}</h4>
                            <div class="flex flex-col space-y-2 max-h-64 overflow-y-auto pr-1">
                                @foreach ($allCategories as $category)
                                    <button type="button"
                                        class="category-tab flex items-center gap-3 px-4 py-2 rounded-xl text-gray-800 text-sm font-medium hover:bg-purple-200 transition w-full text-left border border-gray-200 hover:border-purple-300 cursor-pointer  {{ request('category_slug') == $category->slug ? 'bg-purple-100 border-purple-200' : '' }}"
                                        data-category="{{ $category->slug }}">
                                        <img src="{{ asset($category->icon) }}" class="w-6 h-6"
                                            alt="{{ $category->name }}">
                                        {{ $category->name }}
                                    </button>
                                @endforeach
                                <input type="hidden" id="category_slug" name="category_slug"
                                    value="{{ request('category_slug') ?? '' }}">
                            </div>
                        </div>

                    </div>
                    <!-- Apply Filters Button -->
                    <button id="applyFilters" class="btn-primary w-full mt-5" type="submit">
                        Apply Filters
                    </button>
                    <a id="applyFilters" class="btn-outline-light w-full mt-2 text-center"
                        href="{{ route('course.index') }}">
                        {{ __('messages.reset') }}
                    </a>
                </form>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 w-full  gap-3 ">
                    @forelse ($courses as $course)
                           <div
                        class="border border-gray-200 rounded-lg bg-white overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-300 relative border-b-0 z-0">
                        <!-- Image -->
                        <div class="overflow-hidden p-1.5">
                            <img src="{{ asset($course->thumbnail_url) }}" alt=""
                                class="w-full rounded-lg transition-transform duration-300 hover:scale-105 aspect-video ">
                        </div>

                        <!-- Title -->
                        <a href="{{ route('course.view', $course->slug) }}" class="block px-4 pt-3">
                            <h1
                                class=" text-lg md:text-[20px] line-clamp-2 font-semibold text-gray-900 hover:text-secondary transition-colors duration-200 h-[50px] leading-6 ">
                                {{ $course->title }}
                            </h1>
                        </a>

                        <!-- Price & Discount -->
                        <div class="flex items-center justify-between px-4 py-3 border-b border-dashed border-[#d9dce1]">
                            @if ($course->is_free == 1)
                               <span
                                        class="inline-block px-3 py-1 text-sm font-semibold text-white bg-red-500 rounded-md shadow-sm my-0.5">
                                        {{ __('text.free') }}
                                    </span>
                            @else
                                <div class="flex items-center gap-2">
                                    <span
                                        class="text-2xl font-bold text-primary">৳{{ (float) $course->discounted_price }}</span>
                                    <span
                                        class="text-sm text-gray-400 line-through">৳{{ (float) $course->original_price }}</span>
                                </div>
                                <span
                                    class="px-2.5 py-0.5 text-xs font-semibold text-white rounded-full bg-gradient-to-r from-yellow-600 to-yellow-500">
                                    {{ $course->discount_percentage }}%
                                </span>
                            @endif
                        </div>

                        <!-- Stats & Button -->
                        <div class="px-4 pb-3 bg-[#f9fbff]">
                            <div
                                class="flex justify-between items-center mb-3 text-gray-700 border-b border-dashed border-slate-300 py-2">

                                @if ($course->course_type == 'Live')
                                    <div class="flex items-center gap-2 text-xs font-medium">
                                        <img alt="live" class="w-5 h-5"
                                            src="{{ asset('assets/icons/live-ani.svg') }}">
                                        {{ __('text.live') }}
                                    </div>
                                @else
                                    <div class="flex items-center gap-2 text-xs font-medium">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-red-400"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4"></path>
                                            <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
                                            <rect width="8" height="6" x="2" y="12" rx="1"></rect>
                                            <path d="m10 15.5 4 2.5v-6l-4 2.5"></path>
                                        </svg>
                                        {{ __('text.recorded') }}
                                    </div>
                                @endif

                                <div class="flex items-center gap-2 text-xs font-medium">
                                    <img alt="category" class="w-5 h-5" src="{{ asset($course->category->icon) }}">
                                    {{ $course->category->name }}
                                </div>
                            </div>

                            <div class="flex justify-between items-center mb-4 text-gray-700">
                                <div class="flex items-center gap-2">
                                    <img src="{{ asset('assets/icons/multi-user.png') }}"
                                        class="w-5 h-5 rounded-full shadow" alt="Students">
                                    <span class="text-xs font-medium"> {{ __('text.enrolled') }}:
                                        {{ $course->total_enroll }}</span>
                                </div>
                                <div class="flex items-center gap-2">
                                    <img src="{{ asset('assets/icons/video-player.svg') }}" class="w-4 h-4"
                                        alt="Classes">
                                    <span class="text-xs font-medium"> {{ __('text.class') }}:
                                        {{ $course->total_class }}</span>
                                </div>
                            </div>

                            @if ($course->status === 'draft')
                                <span
                                    class="block w-full text-center py-2.5 text-yellow-600 font-semibold border border-yellow-400 rounded-lg bg-yellow-50">
                                    ⏳ {{ __('text.coming_soon') }}
                                </span>
                            @else
                                <a href="{{ route('course.view', $course->slug) }}"
                                    class="btn-primary block text-center !py-2">
                                    {{ __('text.view_details') }}
                                </a>
                            @endif
                        </div>




                        <!-- Bottom Decoration -->
                        <div class="border-6 border-transparent"
                            style="background-image: url('{{ asset('assets/images/card_bottom_icons.webp') }}'); background-position: 17px; border-image-repeat: round;">
                        </div>
                    </div>
                    @empty
                        <div
                            class="col-span-full flex flex-col items-center justify-center p-8 md:p-12 text-center bg-gray-50 rounded-xl shadow border border-slate-200">
                            <img src="{{ asset('assets/images/no-order.png') }}" class="w-24 md:w-32 mb-4"
                                alt="No Courses">

                            <h3 class="text-2xl md:text-3xl font-semibold text-gray-700 mb-2">
                                {{ __('dashboard.no_courses_found') }}
                            </h3>

                            <p class="text-gray-500 mb-6 max-w-md">
                                {{ __('messages.no_courses_message') }}
                            </p>

                            <a href="{{ route('course.index') }}" class="btn-dark flex items-center gap-1">
                                {{ __('messages.reset') }}
                                <!-- Optional Refresh Icon -->
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M4 4v6h6M20 20v-6h-6" />
                                </svg>
                            </a>
                        </div>
                    @endforelse

                </div>
                <div class="mt-6">
                    {{ $courses->links('vendor.pagination.tailwind') }}
                </div>
            </div>


        </div>
    </section>

    @push('js')
        <script>
            $('#openFilter').on('click', function() {
                $('#filterWrapper').removeClass('max-md:top-full')
                $('#filterWrapper').addClass('max-md:top-0')
            })
            $('#removeFilter').on('click', function() {
                $('#filterWrapper').removeClass('max-md:top-0')
                $('#filterWrapper').addClass('max-md:top-full')
            })

            $('.category-tab').on('click', function() {
                $('.category-tab').removeClass('bg-purple-100 border-purple-200')
                $(this).addClass('bg-purple-100 border-purple-200')

                $('#category_slug').val($(this).data('category'))

                IVISToast.config({
                    them: 'colored',
                    duration: 8000,
                    position: 'top-center'
                })

                IVISToast.info('{{ __('messages.category_output') }}');
            })

            function courseType(element, value) {
                if (value === 'Live') {
                    $(element).addClass('bg-red-200 border-red-300');
                    $(element).next().removeClass('bg-red-200 border-red-300');
                } else if (value === 'Recording') {
                    $(element).prev().removeClass('bg-red-200 border-red-300');
                    $(element).addClass('bg-red-200 border-red-300');
                }
                $('#course_type').val(value)

                IVISToast.config({
                    them: 'colored',
                    duration: 8000,
                    position: 'top-center'
                })

                let typeText = value === 'Live' ? 'Live' : 'Recording';
                IVISToast.info(
                    '{{ __('messages.course_type_selected', ['type' => ':type']) }}'.replace(':type', typeText)
                );
            }

            $('input[name="access_type"]').on('change', function() {
                IVISToast.config({
                    them: 'colored',
                    duration: 8000,
                    position: 'top-center'
                })

                let accessValue = $(this).val();

                let typeText = accessValue === 'free' ?
                    '{{ __('messages.free') }}' :
                    accessValue === 'paid' ?
                    '{{ __('messages.paid') }}' :
                    '{{ __('messages.all') }}';

                IVISToast.info(
                    '{{ __('messages.access_type_selected', ['type' => ':type']) }}'.replace(':type', typeText)
                );
            });
        </script>
    @endpush
@endsection