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

@section('content_dash')
    <div class=" p-5 rounded-md bg-white">
        <!-- Header -->
        <div class="mb-6">
            <h2 class="text-2xl font-bold text-gray-800">{{ __('dashboard.enrol_hist') }}</h2>
            <p class="text-gray-600">{{ __('dashboard.enrol_des') }}</p>
        </div>

        <!-- Order Table -->
        @if ($enrollments && count($enrollments) > 0)
            <div class="bg-white rounded-lg shadow overflow-auto">
                <table class="min-w-full divide-y divide-gray-100">
                    <!-- Table Header -->
                    <thead class="bg-gray-100/70 border-b border-gray-300">
                        <tr>
                            <th class="px-6 py-3 text-left text-sm font-semibold text-gray-600 uppercase tracking-wider">
                                Course</th>
                            <th class="px-6 py-3 text-left text-sm font-semibold text-gray-600 uppercase tracking-wider">
                                Transaction</th>
                            <th
                                class="px-6 py-3 text-left text-sm font-semibold text-gray-600 uppercase tracking-wider text-nowrap">
                                Payment Status</th>
                            <th class="px-6 py-3 text-left text-sm font-semibold text-gray-600 uppercase tracking-wider">
                                Amount</th>
                            <th class="px-6 py-3 text-left text-sm font-semibold text-gray-600 uppercase tracking-wider">
                                Note</th>
                            <th class="px-6 py-3 text-left text-sm font-semibold text-gray-600 uppercase tracking-wider">
                                Invoice</th>
                        </tr>
                    </thead>

                    <!-- Table Body -->
                    <tbody class="bg-white text-sm">
                        @foreach ($enrollments as $enrollment)
                            <tr class="hover:bg-gray-50 transition border-b border-gray-200">
                                <!-- Course Info -->
                                <td class="px-4 py-3 whitespace-nowrap max-w-xs">
                                    <div class="flex items-center space-x-3">
                                        <img class="h-10 w-10 rounded-md object-cover"
                                            src="{{ asset($enrollment->course->thumbnail_url) ?? 'https://images.unsplash.com/photo-1559028012-481c04fa702d?auto=format&fit=crop&w=300&q=80' }}"
                                            alt="{{ $enrollment->course->title }}">
                                        <div class="flex flex-col overflow-hidden">
                                            <span
                                                class="font-medium text-gray-900 text-sm truncate">{{ $enrollment->course->title }}</span>
                                            <span class="text-gray-600 text-xs">
                                                ID: <b>{{ $enrollment->transaction->invoice_no ?? 'N/A' }}</b>
                                            </span>
                                        </div>
                                    </div>
                                </td>

                                <!-- Transaction Info -->
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <div class="text-gray-900 font-medium text-sm">
                                        {{ $enrollment->transaction->transaction_id ?? 'N/A' }}
                                    </div>
                                    <div class="text-gray-400 text-xs">{{ $enrollment->created_at->format('M d, Y') }}</div>
                                </td>

                                <!-- Payment Status -->
                                <td class="px-4 py-3 whitespace-nowrap">
                                    @php
                                        $paymentColors = [
                                            'pending' => 'bg-yellow-100 text-yellow-800',
                                            'paid' => 'bg-green-100 text-green-800',
                                            'cancelled' => 'bg-red-100 text-red-800',
                                            'failed' => 'bg-red-200 text-red-900',
                                            'refunded' => 'bg-blue-100 text-blue-800',
                                        ];
                                        $status = $enrollment->transaction->payment_status ?? 'free';
                                        if ($status === 'free') {
                                            $paymentColors['free'] = 'bg-red-100 text-red-800';
                                        }
                                    @endphp
                                    <span
                                        class="px-2 py-1 text-xs font-semibold rounded-full {{ $paymentColors[$status] }}">
                                        {{ $status === 'free' ? 'Free' : ucfirst($status) }}
                                    </span>
                                </td>

                                <!-- Amount -->
                                <td class="px-4 py-3 text-gray-600 text-sm">
                                    ৳{{ number_format($enrollment->transaction->final_amount ?? 0, 2) }}
                                </td>

                                <!-- Enrollment Note -->
                                <td class="px-4 py-3 min-w-[300px]">
                                    {{ $enrollment->note ?? '-' }}
                                </td>

                                <!-- Invoice Download -->
                                <td class="px-6 py-3">
                                    @if ($enrollment->transaction)
                                        <a href="{{ route('invoice', $enrollment->transaction->invoice_no) }}"
                                            class="hover:opacity-85 duration-500">
                                            <img src="{{ asset('assets/icons/dowload.png') }}" class="w-7 h-7"
                                                alt="">
                                        </a>
                                    @else
                                        <span class="text-gray-400 text-sm">N/A</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>

            </div>
        @else
            <div class="flex flex-col items-center justify-center py-6 text-center">
                <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_enrollments') }}</h3>
                <p class="text-gray-500 max-w-md mx-auto mb-6">{{ __('dashboard.no_enrollments_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>
        @endif


    </div>
@endsection