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

@section('content_dash')
    <div class="px-3 md:px-5 py-5 rounded-md bg-white">
        <div class="mb-8">
            <h2 class="text-2xl font-bold text-gray-800">{{ __('dashboard.my_courses') }}</h2>
            <p class="text-gray-600">{{ __('dashboard.course_desc') }}</p>
        </div>

     

        <!-- Course Grid -->
        <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-5">
            @forelse($courses as $enroll)
                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 h-fit">
                    <!-- Thumbnail -->
                    <div class="relative">
                        <img src="{{ asset($enroll->course->thumbnail_url) ?? 'https://via.placeholder.com/400x200' }}"
                            alt="{{ $enroll->course->title }}" class="w-full h-48 object-cover">
                    </div>

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


                        <!-- See Video Button -->
                        @if ($enroll->status == 'inactive')
                            <p class="text-center bg-red-50 border border-red-300 py-2 px-4 rounded-sm text-red-500 ">
                                {{ __('dashboard.enroll_inactive_message') }}
                            </p>
                        @elseif($enroll->course->status == 'inactive')
                            <p class="text-center text-red-500 ">
                                {{ __('dashboard.course_inactive_message') }}
                            </p>
                        @else
                            @if ($enroll->transaction)
                                <div
                                    class="flex items-center justify-between bg-green-50 border border-green-200 rounded-lg px-3 py-2">
                                    <span class="text-green-600 font-medium text-md">
                                        {{ __('dashboard.registration_code') }}:
                                        <strong id="regCode">
                                            {{ $enroll->transaction->invoice_no ?? 'N/A' }}
                                        </strong>
                                    </span>
                                        <button onclick="copyRegCode()"
                                            class="text-green-600 hover:text-green-800 cursor-pointer">
                                            <!-- Copy 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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2
                             2 0 00-2 2v8a2 2 0 002 2z" />
                                            </svg>
                                        </button>
                                </div>



                                <script>
                                    function copyRegCode() {
                                        navigator.clipboard.writeText(document.getElementById('regCode').innerText)
                                        IVISToast.config({
                                            them: 'colored',
                                            duration: 8000,
                                            position: 'top-center'
                                        })

                                        IVISToast.success("{{ __('dashboard.reg_code_success') }}")
                                    }
                                </script>
                            @endif

                            <div class="flex flex-row gap-2">
                                @if ($enroll->course->facebook_group)
                                    <a href="{{ $enroll->course->facebook_group }}" target="_blank"
                                        class="w-full sm:w-1/2 flex items-center justify-center gap-2 bg-blue-50 text-blue-600 hover:text-blue-600 hover:bg-blue-100 py-1.5 rounded-full font-medium border border-blue-100 shadow-sm transition duration-300 text-sm">
                                        <img src="{{ asset('assets/icons/facebook.png') }}" class="w-4 h-4" />
                                        {{ __('dashboard.join_the_group') }}
                                    </a>
                                @endif
                                <a href="{{ route('dashboard.course.content', ['courseId' => $enroll->course->id]) }}"
                                    class="w-full sm:w-1/2 bg-pink-50 hover:bg-pink-100 border border-pink-100 text-pink-600 py-1.5 rounded-full font-medium transition-colors duration-200 shadow-sm text-sm text-center text-nowrap flex items-center justify-center">
                                    <svg class="w-5 h-5 mr-1" viewBox="0 0 24 24" fill="currentColor">
                                        <path d="M8 5v14l11-7z"></path>
                                    </svg>
                                    {{ __('dashboard.recorded_video') }}
                                </a>

                            </div>

                            <a href="{{ route('dashboard.my-course.view', $enroll->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>
                        @endif

                    </div>
                </div>

            @empty
                <div class="flex flex-col items-center justify-center py-6 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_courses_found') }}</h3>
                    <p class="text-gray-500 max-w-md mx-auto mb-6">{{ __('dashboard.no_courses_desc') }}</p>
                    <a href="{{ route('course.index') }}" class="btn-dark inline-flex items-center gap-2">
                        {{ __('dashboard.browse_courses') }}
                        <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="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                        </svg>
                    </a>
                </div>
            @endforelse
        </div>
    </div>
@endsection