@extends('layout.layout')

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

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

                <x-page-title
                    title="Student Request Details"
                    description="Review request information, requester details, classification, related records, schedules, and attachments.">
                    <a href="{{ route('requests.index') }}" class="asset-btn asset-btn--secondary">
                        <iconify-icon icon="mdi:arrow-left"></iconify-icon>
                        Back to List
                    </a>
                </x-page-title>

                @php
                    $creatorName = trim(($studentRequest->creator->first_name ?? '') . ' ' . ($studentRequest->creator->last_name ?? ''));
                    $creatorInitials = strtoupper(substr($studentRequest->creator->first_name ?? 'S', 0, 1) . substr($studentRequest->creator->last_name ?? '', 0, 1));

                    $courseAssignedAdmin = $studentRequest->course?->admin_assigned_students
                        ?->firstWhere('student_id', $studentRequest->created_by)
                        ?->admin;
                    $displayAdmin = $studentRequest->admin ?? $courseAssignedAdmin;

                    $instructorName = $studentRequest->instructor?->full_name
                        ?? trim(($studentRequest->instructor->first_name ?? '') . ' ' . ($studentRequest->instructor->last_name ?? ''))
                        ?: ($studentRequest->course?->staff?->full_name
                            ?? trim(($studentRequest->course?->staff?->first_name ?? '') . ' ' . ($studentRequest->course?->staff?->last_name ?? '')));
                    $supervisorName = $studentRequest->supervisor?->full_name
                        ?? trim(($studentRequest->supervisor?->first_name ?? '') . ' ' . ($studentRequest->supervisor?->last_name ?? ''))
                        ?: ($studentRequest->course?->staff?->manager?->full_name
                            ?? trim(($studentRequest->course?->staff?->manager?->first_name ?? '') . ' ' . ($studentRequest->course?->staff?->manager?->last_name ?? '')));
                    $teamLeaderName = $displayAdmin?->staff?->manager?->full_name
                        ?? trim(($displayAdmin?->staff?->manager?->first_name ?? '') . ' ' . ($displayAdmin?->staff?->manager?->last_name ?? ''));
                    $relatedToLabel = $studentRequest->related_to
                        ? ucfirst($studentRequest->related_to)
                        : ($studentRequest->type === 'refund'
                            ? ($studentRequest->course?->course_name_en ?? $studentRequest->course?->course_name_ar ?? 'Course')
                            : 'N/A');

                    $priorityClass = match ($studentRequest->priority) {
                        'high' => 'ui-pill--danger',
                        'medium' => 'ui-pill--warn',
                        'low' => 'ui-pill--success',
                        default => 'ui-pill--neutral',
                    };

                    $escalationStatusClass = static function (?string $status) {
                        return match ($status) {
                            'pending' => 'ui-pill--warn',
                            'assigned', 'in_progress' => 'ui-pill--info',
                            'resolved', 'closed' => 'ui-pill--success',
                            'rejected' => 'ui-pill--danger',
                            default => 'ui-pill--neutral',
                        };
                    };
                @endphp

                <div class="ui-card request-summary-card">
                    <div class="request-summary-card__main">
                        <div class="request-summary-card__avatar">
                            {{ $creatorInitials ?: 'SR' }}
                        </div>

                        <div class="request-summary-card__content">
                            <div class="request-summary-card__eyebrow">Request #{{ $studentRequest->id }}</div>
                            <h4 class="request-summary-card__title mb-0">
                                {{ $studentRequest->subject }}
                            </h4>
                            <p class="request-summary-card__sub mb-0">
                                Created by {{ $creatorName ?: 'N/A' }}
                            </p>
                        </div>
                    </div>

                    <div class="request-summary-card__badges">
                        <span class="ui-pill ui-pill--primary">
                            {{ ucfirst($studentRequest->type) }}
                        </span>

                        <span class="ui-pill ui-pill--info">
                            {{ $relatedToLabel }}
                        </span>

                        <span class="ui-pill {{ $priorityClass }}">
                            {{ ucfirst($studentRequest->priority) }}
                        </span>
                    </div>
                </div>

                <div class="ui-card">
                    <div class="form-section">
                        <div class="form-section__head">
                            <h5 class="form-section__title mb-1">Main Information</h5>
                            <p class="form-section__sub mb-0">
                                Request owner, instructor, type, category, and priority.
                            </p>
                        </div>

                        <div class="details-grid">
                            <div class="detail-item">
                                <div class="detail-item__label">Requester Name</div>
                                <div class="detail-item__value">
                                    {{ $creatorName ?: 'N/A' }}
                                </div>
                            </div>

                            <div class="detail-item">
                                <div class="detail-item__label">Instructor</div>
                                <div class="detail-item__value">
                                    {{ $instructorName ?: 'N/A' }}
                                </div>
                            </div>

                            <div class="detail-item">
                                <div class="detail-item__label">Supervisor</div>
                                <div class="detail-item__value">
                                    {{ $supervisorName ?: 'N/A' }}
                                </div>
                            </div>

                            <div class="detail-item">
                                <div class="detail-item__label">Team Leader</div>
                                <div class="detail-item__value">
                                    {{ $teamLeaderName ?: 'N/A' }}
                                </div>
                            </div>

                            <div class="detail-item">
                                <div class="detail-item__label">Admin</div>
                                <div class="detail-item__value">
                                    {{ $displayAdmin?->full_name ?: 'N/A' }}
                                </div>
                            </div>

                            <div class="detail-item">
                                <div class="detail-item__label">Request Type</div>
                                <div class="detail-item__value">
                                    <span class="ui-pill ui-pill--primary">
                                        {{ ucfirst($studentRequest->type) }}
                                    </span>
                                </div>
                            </div>

                            <div class="detail-item">
                                <div class="detail-item__label">Related To</div>
                                <div class="detail-item__value">
                                    <span class="ui-pill ui-pill--info">
                                        {{ $relatedToLabel }}
                                    </span>
                                </div>
                            </div>

                            <div class="detail-item">
                                <div class="detail-item__label">Priority</div>
                                <div class="detail-item__value">
                                    <span class="ui-pill {{ $priorityClass }}">
                                        {{ ucfirst($studentRequest->priority) }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                @if ($studentRequest->course_id || $studentRequest->admin_id || $studentRequest->session_id)
                    <div class="ui-card">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">
                                    {{ $studentRequest->type === 'refund' ? 'Refund Details' : 'Complaint Related Details' }}
                                </h5>
                                <p class="form-section__sub mb-0">
                                    {{ $studentRequest->type === 'refund' ? 'Refund and course information connected to this request.' : 'Course, admin, and session information connected to this request.' }}
                                </p>
                            </div>

                            <div class="details-grid">
                                @if ($studentRequest->course)
                                    <div class="detail-item">
                                        <div class="detail-item__label">Course</div>
                                        <div class="detail-item__value">
                                            {{ $studentRequest->course->course_name_en ?? $studentRequest->course->course_name_ar ?? 'N/A' }}
                                        </div>
                                    </div>
                                @endif

                                @if ($displayAdmin)
                                    <div class="detail-item">
                                        <div class="detail-item__label">Admin</div>
                                        <div class="detail-item__value">
                                            {{ $displayAdmin->full_name ?? 'N/A' }}
                                        </div>
                                    </div>
                                @endif

                                @if ($studentRequest->sessionDetails)
                                    <div class="detail-item">
                                        <div class="detail-item__label">Session</div>
                                        <div class="detail-item__value">
                                            Session {{ $studentRequest->sessionDetails->session_number ?? 'N/A' }}
                                            -
                                            {{ $studentRequest->sessionDetails?->session_date ? date('d/m/Y', strtotime($studentRequest->sessionDetails->session_date)) : '' }}

                                            @if ($studentRequest->sessionDetails->start_time)
                                                <span class="ui-pill ui-pill--neutral ms-1">
                                                    {{ substr($studentRequest->sessionDetails->start_time, 0, 5) }}
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endif

                @if ($studentRequest->activity_type == 'gift_call' && $studentRequest->schedules->count())
                    <div class="ui-card">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Suggested Gift Call Schedules</h5>
                                <p class="form-section__sub mb-0">
                                    Available days and times suggested for the gift call.
                                </p>
                            </div>

                            <div class="schedule-grid">
                                @foreach ($studentRequest->schedules as $schedule)
                                    <div class="schedule-card">
                                        <div class="schedule-card__icon">
                                            <iconify-icon icon="ri:calendar-check-line"></iconify-icon>
                                        </div>

                                        <div>
                                            <div class="schedule-card__day">
                                                {{ $schedule->day }}
                                            </div>
                                            <div class="schedule-card__time">
                                                {{ date('h:i A', strtotime($schedule->time)) }}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif

                <div class="ui-card">
                    <div class="form-section">
                        <div class="form-section__head">
                            <h5 class="form-section__title mb-1">Request Content</h5>
                            <p class="form-section__sub mb-0">
                                Subject and full description submitted with this request.
                            </p>
                        </div>

                        <div class="details-grid">
                            <div class="detail-item detail-item--full">
                                <div class="detail-item__label">Subject</div>
                                <div class="detail-item__value detail-item__value--strong">
                                    {{ $studentRequest->subject }}
                                </div>
                            </div>

                            <div class="detail-item detail-item--full">
                                <div class="detail-item__label">Description</div>
                                <div class="detail-description">
                                    {!! nl2br(e($studentRequest->description)) !!}
                                </div>
                            </div>

                            <div class="detail-item detail-item--full">
                                <div class="detail-item__label">Status Note</div>
                                <div class="request-status-note" title="{{ $studentRequest->status_note }}">
                                    {{ $studentRequest->status_note ?: '-' }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                @if ($studentRequest->escalationRequests->isNotEmpty())
                    <div class="ui-card">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Escalations</h5>
                                <p class="form-section__sub mb-0">
                                    Escalation status, routed departments, and replies shared with the student.
                                </p>
                            </div>

                            <div class="escalation-list">
                                @foreach ($studentRequest->escalationRequests as $escalation)
                                    <div class="escalation-card">
                                        <div class="escalation-card__head">
                                            <div>
                                                <div class="escalation-card__title">
                                                    {{ $escalation->title ?: 'Escalation #' . $escalation->id }}
                                                </div>
                                                <div class="escalation-card__meta">
                                                    {{ $escalation->fromDepartment?->name ?? 'N/A' }}
                                                    to
                                                    {{ $escalation->toDepartment?->name ?? 'N/A' }}
                                                    •
                                                    {{ $escalation->created_at?->format('d M Y, h:i A') }}
                                                </div>
                                            </div>

                                            <span class="ui-pill {{ $escalationStatusClass($escalation->status) }}">
                                                {{ ucfirst(str_replace('_', ' ', $escalation->status)) }}
                                            </span>
                                        </div>

                                        @if ($escalation->description)
                                            <div class="escalation-card__description">
                                                {!! nl2br(e($escalation->description)) !!}
                                            </div>
                                        @endif

                                        @if ($escalation->notes->isNotEmpty())
                                            <div class="escalation-replies">
                                                @foreach ($escalation->notes as $note)
                                                    <div class="escalation-reply">
                                                        <div class="escalation-reply__meta">
                                                            <span>{{ $note->staff?->full_name ?? trim(($note->staff?->first_name ?? '') . ' ' . ($note->staff?->last_name ?? '')) ?: 'Staff' }}</span>
                                                            <span>{{ $note->created_at?->format('d M Y, h:i A') }}</span>
                                                        </div>
                                                        <div class="escalation-reply__content">
                                                            {!! nl2br(e($note->content)) !!}
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @else
                                            <div class="escalation-empty">
                                                No student-visible escalation notes yet.
                                            </div>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif

                @if ($studentRequest->attachments && count($studentRequest->attachments))
                    <div class="ui-card">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Attachments</h5>
                                <p class="form-section__sub mb-0">
                                    Files attached to this request.
                                </p>
                            </div>

                            <div class="attachments-grid">
                                @foreach ($studentRequest->attachments as $file)
                                    @php
                                        $extension = strtolower(pathinfo($file->file_path, PATHINFO_EXTENSION));
                                        $isImage = in_array($extension, ['jpg', 'jpeg', 'png', 'gif', 'webp']);
                                    @endphp

                                    <div class="attachment-card">
                                        <a href="{{ asset($file->file_path) }}" target="_blank" class="attachment-card__preview">
                                            @if ($isImage)
                                                <img src="{{ asset($file->file_path) }}"
                                                     alt="{{ $file->original_name }}"
                                                     class="attachment-card__img">
                                            @else
                                                <div class="attachment-card__file">
                                                    <i class="fas fa-file-alt"></i>
                                                </div>
                                            @endif
                                        </a>

                                        <div class="attachment-card__body">
                                            <div class="attachment-card__name" title="{{ $file->original_name }}">
                                                {{ $file->original_name }}
                                            </div>

                                            <a href="{{ asset($file->file_path) }}"
                                               class="attachment-card__download"
                                               download>
                                                <i class="fas fa-download"></i>
                                                Download
                                            </a>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif

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

@push('styles')
    <style>
        .request-show-page .ui-card {
            border: 1px solid #e5e7eb;
            border-radius: 22px;
            background: #fff;
            box-shadow: 0 14px 38px rgba(15, 23, 42, 0.07);
            padding: 1.25rem;
            overflow: hidden;
        }

        .request-summary-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .request-summary-card__main {
            display: flex;
            align-items: center;
            gap: 1rem;
            min-width: 0;
        }

        .request-summary-card__avatar {
            width: 56px;
            height: 56px;
            border-radius: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #071b3d;
            font-size: 1rem;
            font-weight: 900;
            flex-shrink: 0;
        }

        .request-summary-card__content {
            min-width: 0;
        }

        .request-summary-card__eyebrow {
            color: #64748b;
            font-size: 0.76rem;
            font-weight: 850;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            margin-bottom: 0.2rem;
        }

        .request-summary-card__title {
            color: #111827;
            font-size: 1.1rem !important;
            font-weight: 900;
            line-height: 1.35;
            overflow-wrap: anywhere;
        }

        .request-summary-card__sub {
            margin-top: 0.25rem;
            color: #64748b;
            font-size: 0.9rem;
        }

        .request-summary-card__badges {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            flex-wrap: wrap;
        }

        .form-section__head {
            margin-bottom: 1rem;
            padding-bottom: 0.9rem;
            border-bottom: 1px solid #eef2f7;
        }

        .form-section__title {
            font-size: 1rem !important;
            font-weight: 900;
            color: #111827;
        }

        .form-section__sub {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.55;
        }

        .details-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 0.9rem;
        }

        .detail-item {
            grid-column: span 4 / span 4;
            border: 1px solid #e5e7eb;
            background: #f8fafc;
            border-radius: 18px;
            padding: 1rem;
            min-width: 0;
        }

        .detail-item--full {
            grid-column: span 12 / span 12;
        }

        .detail-item__label {
            color: #64748b;
            font-size: 0.74rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.35rem;
        }

        .detail-item__value {
            color: #111827;
            font-size: 0.94rem;
            font-weight: 800;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .detail-item__value--strong {
            font-size: 1.05rem;
            font-weight: 900;
        }

        .detail-description {
            color: #334155;
            font-size: 0.95rem;
            line-height: 1.75;
            background: #fff;
            border: 1px solid #eef2f7;
            border-radius: 14px;
            padding: 1rem;
            overflow-wrap: anywhere;
            min-height: 92px;
        }

        .request-status-note {
            max-width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #475569;
            font-weight: 700;
        }

        .schedule-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 0.85rem;
        }

        .escalation-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .escalation-card {
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #f8fafc;
            padding: 1rem;
        }

        .escalation-card__head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .escalation-card__title {
            color: #111827;
            font-size: 0.98rem;
            font-weight: 900;
        }

        .escalation-card__meta {
            margin-top: 0.25rem;
            color: #64748b;
            font-size: 0.82rem;
            font-weight: 700;
        }

        .escalation-card__description {
            margin-top: 0.9rem;
            color: #334155;
            font-size: 0.92rem;
            line-height: 1.7;
        }

        .escalation-replies {
            margin-top: 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .escalation-reply {
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            background: #fff;
            padding: 0.9rem;
        }

        .escalation-reply__meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            flex-wrap: wrap;
            color: #64748b;
            font-size: 0.78rem;
            font-weight: 800;
            margin-bottom: 0.45rem;
        }

        .escalation-reply__content {
            color: #334155;
            font-size: 0.9rem;
            line-height: 1.65;
            overflow-wrap: anywhere;
        }

        .escalation-empty {
            margin-top: 0.9rem;
            color: #64748b;
            font-size: 0.85rem;
            font-weight: 700;
        }

        .schedule-card {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #f8fafc;
            padding: 1rem;
        }

        .schedule-card__icon {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #eff6ff;
            color: #071b3d;
            font-size: 1.25rem;
            flex-shrink: 0;
        }

        .schedule-card__day {
            color: #111827;
            font-size: 0.95rem;
            font-weight: 900;
        }

        .schedule-card__time {
            margin-top: 0.2rem;
            color: #64748b;
            font-size: 0.86rem;
            font-weight: 750;
        }

        .attachments-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
            gap: 1rem;
        }

        .attachment-card {
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #fff;
            overflow: hidden;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
            transition: 0.18s ease;
        }

        .attachment-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 14px 32px rgba(15, 23, 42, 0.09);
        }

        .attachment-card__preview {
            height: 120px;
            background: #f8fafc;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 1px solid #eef2f7;
            text-decoration: none;
            overflow: hidden;
        }

        .attachment-card__img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .attachment-card__file {
            width: 54px;
            height: 54px;
            border-radius: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #eef2ff;
            color: #4338ca;
            font-size: 1.5rem;
        }

        .attachment-card__body {
            padding: 0.85rem;
            text-align: center;
        }

        .attachment-card__name {
            color: #334155;
            font-size: 0.82rem;
            font-weight: 800;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 0.55rem;
        }

        .attachment-card__download {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            color: #071b3d;
            text-decoration: none;
            font-size: 0.78rem;
            font-weight: 850;
        }

        .attachment-card__download:hover {
            text-decoration: underline;
        }

        .asset-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
        }

        .ui-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.38rem 0.78rem;
            font-size: 0.76rem;
            font-weight: 850;
            line-height: 1.2;
            white-space: nowrap;
        }

        .ui-pill--primary {
            background: #eff6ff;
            color: #0f1724;
        }

        .ui-pill--info {
            background: #eef2ff;
            color: #4338ca;
        }

        .ui-pill--success {
            background: #f0fdf4;
            color: #166534;
        }

        .ui-pill--warn {
            background: #fffbeb;
            color: #92400e;
        }

        .ui-pill--danger {
            background: #fef2f2;
            color: #b91c1c;
        }

        .ui-pill--neutral {
            background: #f3f4f6;
            color: #374151;
        }

        @media (max-width: 991.98px) {
            .detail-item {
                grid-column: span 6 / span 6;
            }

            .request-summary-card {
                align-items: flex-start;
            }
        }

        @media (max-width: 575.98px) {
            .request-show-page .ui-card {
                padding: 1rem;
            }

            .detail-item {
                grid-column: span 12 / span 12;
            }

            .request-summary-card__main {
                align-items: flex-start;
            }

            .request-summary-card__badges {
                width: 100%;
            }

            .schedule-grid,
            .attachments-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endpush