@extends('dashboard.layouts.app')

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

    <style>
        .refund-requests-table-wrap {
            margin: 1rem 1rem 0;
            background: var(--white);
            max-height: none !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
        }

        .refund-requests-card {
            display: block;
            overflow: hidden;
            height: auto;
            max-height: none;
        }

        .refund-requests-card > .p-0,
        .refund-requests-card > .card-body {
            min-height: 0;
            display: block;
            flex: none;
        }

        .refund-requests-card .refund-requests-table-wrap {
            flex: none;
            min-height: 0;
        }

        .refund-requests-table-wrap thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            box-shadow: inset 0 -1px 0 var(--neutral-200);
            white-space: nowrap;
        }

        .refund-requests-table-wrap tbody td {
            white-space: nowrap;
        }

        .refund-requests-table-wrap tbody tr:hover td {
            background: var(--neutral-50);
        }

        .refund-requests-table {
            width: 100%;
            min-width: 1280px !important;
            table-layout: auto;
        }

        .refund-request-note {
            max-width: 280px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>

    <div class="container-fluid py-3">
        <div class="d-flex flex-column flex-lg-row justify-content-between gap-3 mb-3">
            <div>
                <h4 class="fw-bold mb-1">{{ $context['title'] ?? 'Refund Requests' }}</h4>
                <div class="text-muted small">{{ $context['description'] ?? 'Refund requests waiting for review' }}</div>
            </div>
            <div class="text-muted small align-self-lg-end">
                {{ $refundRequests->total() }} requests
            </div>
        </div>

        <div class="refund-requests-card">
            <div class="card-header border-bottom py-3 px-5 d-flex align-items-center flex-wrap justify-content-between gap-3">
                <x-table-controls
                    :action="route('finance.refund_requests.index')"
                    searchName="search"
                    searchPlaceholder="Search student, course, or request id"
                    formId="refund-requests-table-controls"
                    :clearUrl="route('finance.refund_requests.index')" />
            </div>

            <x-table
                :headers="['Request', 'Student', 'Course', 'Status Note', 'CEO Reviewer', 'Created', 'Action']"
                :paginator="$refundRequests"
                wrapper-class="refund-requests-table-wrap border rounded-3"
                wrapper-style="overflow-x: auto; overflow-y: hidden;"
                table-class="refund-requests-table table-hover align-middle"
                table-style="min-width: 1280px;"
                :empty-message="$context['empty_message'] ?? 'No refund requests are waiting for review.'"
            >
                @foreach ($refundRequests as $refundRequest)
                    @php
                        $studentName = data_get($refundRequest, 'student.full_name')
                            ?: trim((data_get($refundRequest, 'student.first_name') ?? '') . ' ' . (data_get($refundRequest, 'student.last_name') ?? ''));
                        $courseName = data_get($refundRequest, 'course.course_name_en')
                            ?: data_get($refundRequest, 'course.course_name_ar')
                            ?: null;
                        $reviewerName = $refundRequest->status_changed_by_name
                            ?: $refundRequest->status_changed_by;
                        $isCeoApproved = ($context['role'] ?? null) === 'ceo'
                            && $refundRequest->status === config('refunds.review_status');
                        $isApproved = $refundRequest->status === config('refunds.approved_status')
                            || $isCeoApproved;
                        $statusLabel = $isCeoApproved ? 'approved' : $refundRequest->status;
                        $statusClass = $isApproved ? 'bg-success text-white' : 'bg-warning text-dark';
                    @endphp
                    <tr>
                        <td class="text-center">
                            <div class="fw-semibold">#{{ $refundRequest->id }}</div>
                            <span class="badge rounded-pill {{ $statusClass }}">{{ $statusLabel }}</span>
                        </td>
                        <td class="text-center">{{ $studentName ?: '--' }}</td>
                        <td class="text-center">
                            <span class="{{ $courseName ? '' : 'text-muted' }}">{{ $courseName ?: 'No course selected' }}</span>
                        </td>
                        <td class="text-center">
                            <span class="refund-request-note d-inline-block {{ $refundRequest->status_note ? '' : 'text-muted' }}">
                                {{ $refundRequest->status_note ?: 'No note' }}
                            </span>
                        </td>
                        <td class="text-center">{{ $reviewerName ?: '--' }}</td>
                        <td class="text-center">{{ optional($refundRequest->created_at)->format('Y-m-d H:i') ?? '--' }}</td>
                        <td class="text-center">
                            <x-table-action type="view" :url="route('finance.refund_requests.show', $refundRequest->id)" />
                        </td>
                    </tr>
                @endforeach
            </x-table>
        </div>
    </div>
@endsection