@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    <style>
        .student-prepaids-page .ui-card {
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            overflow: hidden;
        }

        .student-prepaids-page .ui-card__header {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid #eef2f7;
            background: #fff;
        }

        .student-prepaids-table-wrap {
            width: 100%;
            overflow-x: auto;
        }

        .student-prepaids-page table {
            min-width: 900px;
            width: 100%;
            vertical-align: middle;
        }

        .student-prepaids-page table thead th {
            background: #f8fafc;
            color: #475569;
            font-size: 0.78rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.035em;
            border-bottom: 1px solid #e5e7eb;
            white-space: nowrap;
        }

        .student-prepaids-page table tbody td {
            color: #334155;
            font-size: 0.9rem;
            font-weight: 600;
            border-color: #eef2f7;
            vertical-align: middle;
            white-space: nowrap;
        }

        .student-prepaids-page table tbody tr {
            transition: 0.16s ease;
        }

        .student-prepaids-page table tbody tr:hover {
            background: #f8fafc;
        }

        .prepaid-index {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 34px;
            height: 30px;
            border-radius: 999px;
            background: #f3f4f6;
            color: #374151;
            font-size: 0.78rem;
            font-weight: 850;
        }

        .prepaid-course-cell {
            display: inline-flex;
            align-items: center;
            gap: 0.65rem;
            min-width: 240px;
        }

        .prepaid-course-icon {
            width: 38px;
            height: 38px;
            border-radius: 13px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #2563eb;
            font-size: 1rem;
            flex-shrink: 0;
        }

        .prepaid-course-title {
            color: #111827;
            font-size: 0.9rem;
            font-weight: 850;
            line-height: 1.35;
            max-width: 230px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .prepaid-course-sub {
            color: #94a3b8;
            font-size: 0.76rem;
            font-weight: 650;
            margin-top: 0.1rem;
        }

        .prepaid-date-range {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
            border-radius: 999px;
            padding: 0.36rem 0.72rem;
            background: #f3f4f6;
            color: #374151;
            font-size: 0.74rem;
            font-weight: 850;
            white-space: nowrap;
        }

        .prepaid-date-range i {
            color: #64748b;
        }

        .prepaid-sessions-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.4rem 0.78rem;
            background: #f0fdf4;
            color: #166534;
            font-size: 0.78rem;
            font-weight: 900;
            white-space: nowrap;
        }

        .prepaid-actions {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
        }

        .table-empty-state {
            padding: 3rem 1rem;
            text-align: center;
            color: #94a3b8;
            background: #fff;
        }

        .table-empty-state i {
            display: block;
            font-size: 2.3rem;
            color: #cbd5e1;
            margin-bottom: 0.75rem;
        }

        .table-empty-state h6 {
            margin: 0;
            color: #475569;
            font-weight: 850;
        }

        .table-empty-state p {
            margin: 0.35rem 0 0;
            font-size: 0.9rem;
        }

        .table-pagination {
            padding: 1rem 1.25rem;
            border-top: 1px solid #eef2f7;
            background: #fff;
        }

        .student-prepaids-page .table-controls-form {
            max-width: 100%;
            overflow-x: auto;
            padding-bottom: 0.1rem;
        }

        .student-prepaids-page .table-controls-form::-webkit-scrollbar {
            height: 6px;
        }

        .student-prepaids-page .table-controls-form::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 999px;
        }

        .student-prepaids-page .table-controls-form::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 999px;
        }

        @media (max-width: 991.98px) {
            .student-prepaids-page .ui-card__header > .d-flex {
                align-items: flex-start !important;
            }

            .student-prepaids-page .table-controls-form {
                width: 100%;
            }
        }

        @media (max-width: 575.98px) {
            .student-prepaids-page .ui-card__header,
            .table-pagination {
                padding: 1rem;
            }
        }
    </style>

    <div class="container-fluid app-bg student-prepaids-page">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title
                    title="Student Prepaids"
                    description="Review prepaid course schedules, course dates, total sessions, and prepaid session details.">
                </x-page-title>

                {{-- 
                <form action="{{ route('student_prepaids.addTodaySessionsRevenueForAll') }}" method="POST">
                    @csrf
                    <button type="submit" class="btn btn-outline-success mb-3">
                        Add Today's Sessions Revenue for All
                    </button>
                </form>
                --}}

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header">
                        <div class="d-flex align-items-center gap-3 flex-wrap w-100">
                            <h6 class="mb-0 font-semibold text-gray-800 whitespace-nowrap" style="margin-right: auto;">
                                Filters
                            </h6>

                            <x-table-controls
                                :action="route('student_prepaids.index')"
                                searchName="search"
                                searchPlaceholder="search"
                                formId="student-prepaids-table-controls"
                                :clearUrl="route('student_prepaids.index')"
                            />
                        </div>
                    </div>

                    <div class="student-prepaids-table-wrap">
                        <x-table :headers="['#', 'Course Name', 'Course Date', 'Total Sessions', 'Action']">
                            @forelse ($prepaids as $item)
                                @php
                                    $schedule = $item->schedule;
                                    $scheduleType = $schedule?->schedule_type;

                                    if ($schedule && $scheduleType == 'track') {
                                        $courseName = $schedule->track->name_en ?? '-';
                                        $courseTypeLabel = 'Track';
                                        $courseIcon = 'fa-graduation-cap';
                                    } elseif ($schedule && $scheduleType == 'product') {
                                        $courseName = $schedule->academyProduct->name_en ?? '-';
                                        $courseTypeLabel = 'Product';
                                        $courseIcon = 'fa-box';
                                    } else {
                                        $courseName = '-';
                                        $courseTypeLabel = 'Schedule';
                                        $courseIcon = 'fa-calendar-alt';
                                    }

                                    $startDate = $schedule->start_date ?? '';
                                    $endDate = $schedule->end_date ?? '';
                                @endphp

                                <tr>
                                    <td class="text-center">
                                        <span class="prepaid-index">
                                            {{ method_exists($prepaids, 'firstItem') ? $prepaids->firstItem() + $loop->index : $loop->iteration }}
                                        </span>
                                    </td>

                                    <td class="text-center">
                                        <div class="prepaid-course-cell">
                                            <div class="prepaid-course-icon">
                                                <i class="fas {{ $courseIcon }}"></i>
                                            </div>

                                            <div>
                                                <div class="prepaid-course-title" title="{{ $courseName }}">
                                                    {{ $courseName }}
                                                </div>
                                                <div class="prepaid-course-sub">
                                                    {{ $courseTypeLabel }} prepaid schedule
                                                </div>
                                            </div>
                                        </div>
                                    </td>

                                    <td class="text-center">
                                        @if ($startDate || $endDate)
                                            <span class="prepaid-date-range">
                                                <i class="fas fa-calendar-alt"></i>
                                                {{ $startDate ?: '-' }}
                                                <span>to</span>
                                                {{ $endDate ?: '-' }}
                                            </span>
                                        @else
                                            <span class="prepaid-date-range">
                                                <i class="fas fa-calendar-alt"></i>
                                                -
                                            </span>
                                        @endif
                                    </td>

                                    <td class="text-center">
                                        <span class="prepaid-sessions-pill">
                                            <i class="fas fa-layer-group"></i>
                                            {{ $item->total_sessions }}
                                            Session(s)
                                        </span>
                                    </td>

                                    <td class="text-center">
                                        <div class="prepaid-actions">
                                            <x-table-action
                                                type="view"
                                                url="{{ route('student_prepaids.details', $item->staff_scheduled_id) }}"
                                                title="View Details"
                                            />
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5">
                                        <div class="table-empty-state">
                                            <i class="fas fa-wallet"></i>
                                            <h6>No prepaid records found.</h6>
                                            <p>No student prepaid schedules match the current criteria.</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </x-table>
                    </div>

                    @if ($prepaids->hasPages())
                        <div class="table-pagination">
                            {{ $prepaids->appends(request()->except('page'))->links('pagination::bootstrap-5') }}
                        </div>
                    @endif
                </div>

            </div>
        </div>
    </div>
@endsection