@extends('layout.layout')

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

        .student-request-page .request-form-card {
            padding: 0;
        }

        .student-request-page .request-card-head {
            padding: 1.25rem;
            border-bottom: 1px solid #eef2f7;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            background: #fff;
        }

        .student-request-page .request-card-head__main {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            min-width: 0;
        }

        .student-request-page .request-card-head__icon {
            width: 50px;
            height: 50px;
            border-radius: 17px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #071b3d;
            font-size: 1.35rem;
            flex-shrink: 0;
        }

        .student-request-page .request-card-head__title {
            color: #111827;
            font-size: 1.1rem !important;
            font-weight: 900;
            margin: 0;
        }

        .student-request-page .request-card-head__sub {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.55;
            margin-top: 0.2rem;
            margin-bottom: 0;
        }

        .student-request-page .request-card-body {
            padding: 1.25rem;
        }

        .student-request-page .requester-box {
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #f8fafc;
            padding: 1rem;
            display: flex;
            align-items: center;
            gap: 0.85rem;
            margin-bottom: 1rem;
        }

        .student-request-page .requester-avatar {
            width: 44px;
            height: 44px;
            border-radius: 15px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #eff6ff;
            color: #071b3d;
            font-weight: 900;
            flex-shrink: 0;
        }

        .student-request-page .requester-label {
            color: #64748b;
            font-size: 0.75rem;
            font-weight: 900;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            margin-bottom: 0.15rem;
        }

        .student-request-page .requester-name {
            color: #111827;
            font-size: 0.98rem;
            font-weight: 900;
            line-height: 1.35;
        }

        .student-request-page .request-section {
            border: 1px solid #eef2f7;
            border-radius: 18px;
            background: #fff;
            padding: 1rem;
            margin-bottom: 1rem;
        }

        .student-request-page .request-section__head {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding-bottom: 0.9rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid #eef2f7;
        }

        .student-request-page .request-section__icon {
            width: 38px;
            height: 38px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #f8fafc;
            color: #071b3d;
            border: 1px solid #e5e7eb;
            flex-shrink: 0;
        }

        .student-request-page .request-section__title {
            color: #111827;
            font-size: 0.98rem !important;
            font-weight: 900;
            margin: 0;
        }

        .student-request-page .request-section__sub {
            color: #64748b;
            font-size: 0.84rem;
            line-height: 1.45;
            margin: 0.1rem 0 0;
        }

        .student-request-page .asset-form-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .student-request-page .asset-col-12 {
            grid-column: span 12 / span 12;
        }

        .student-request-page .asset-col-6 {
            grid-column: span 6 / span 6;
        }

        .student-request-page .asset-col-4 {
            grid-column: span 4 / span 4;
        }

        .student-request-page .asset-label,
        .student-request-page .form-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 750;
            color: #374151;
            font-size: 0.9rem;
        }

        .student-request-page .asset-input,
        .student-request-page .asset-select,
        .student-request-page .form-control,
        .student-request-page .form-select,
        .student-request-page .select2-container--default .select2-selection--single {
            width: 100% !important;
            min-height: 44px;
            border: 1px solid #dbe2ea !important;
            border-radius: 14px !important;
            background: #fff;
            color: #111827;
            box-shadow: none !important;
            transition: 0.2s ease;
        }

        .student-request-page .form-control,
        .student-request-page .form-select {
            padding: 0.68rem 0.9rem;
        }

        .student-request-page textarea.form-control {
            min-height: 120px;
            resize: vertical;
        }

        .student-request-page .form-control:focus,
        .student-request-page .form-select:focus {
            outline: none;
            border-color: #b8c4d6 !important;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08) !important;
        }

        .student-request-page .select2-container {
            width: 100% !important;
        }

        .student-request-page .select2-container--default .select2-selection--single {
            display: flex;
            align-items: center;
            padding: 0.35rem 0.75rem;
        }

        .student-request-page .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #111827;
            line-height: 32px;
            padding-left: 0;
        }

        .student-request-page .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 42px;
            right: 8px;
        }

        .student-request-page .gift-call-note {
            border: 1px solid #bfdbfe;
            background: #eff6ff;
            color: #0f1724;
            border-radius: 16px;
            padding: 0.9rem 1rem;
            display: flex;
            align-items: flex-start;
            gap: 0.7rem;
            margin: 1rem 1.25rem 0;
            font-size: 0.9rem;
            font-weight: 750;
            line-height: 1.5;
        }

        .student-request-page .gift-call-note i {
            font-size: 1.15rem;
            margin-top: 0.1rem;
        }

        .student-request-page .schedule-box {
            border: 1px dashed #cbd5e1;
            border-radius: 18px;
            background: #f8fafc;
            padding: 1rem;
        }

        .student-request-page .schedule-title {
            color: #111827;
            font-weight: 900;
            margin-bottom: 0.85rem;
        }

        .student-request-page .schedule-row {
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            background: #fff;
            padding: 0.9rem;
            margin-bottom: 0.75rem !important;
        }

        .student-request-page .btn-schedule-action {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 0;
            color: #fff;
            transition: 0.18s ease;
        }

        .student-request-page .btn-schedule-action--add {
            background: #16a34a;
        }

        .student-request-page .btn-schedule-action--remove {
            background: #dc2626;
        }

        .student-request-page .btn-schedule-action:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14);
        }

        .student-request-page .upload-box {
            border: 1px dashed #cbd5e1;
            border-radius: 18px;
            padding: 1rem;
            background: #f8fafc;
        }

        .student-request-page .upload-box__title {
            color: #111827;
            font-size: 0.92rem !important;
            font-weight: 900;
            margin-bottom: 0.2rem;
        }

        .student-request-page .upload-box__text {
            color: #64748b;
            font-size: 0.84rem;
            margin-bottom: 0.85rem;
            line-height: 1.5;
        }

        .student-request-page .asset-actions {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
            padding-top: 0.5rem;
        }

        .student-request-page .asset-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            min-height: 42px;
            border-radius: 999px;
            padding: 0.65rem 1rem;
            font-size: 0.86rem;
            font-weight: 850;
            text-decoration: none;
            transition: 0.18s ease;
            border: 1px solid transparent;
        }

        .student-request-page .asset-btn--primary {
            background: #071b3d;
            color: #fff;
            border-color: #071b3d;
        }

        .student-request-page .asset-btn--primary:hover {
            background: #0f1724;
            color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 12px 26px rgba(37, 99, 235, 0.18);
        }

        .student-request-page .asset-btn--secondary {
            background: #fff;
            color: #374151;
            border-color: #dbe2ea;
        }

        .student-request-page .asset-btn--secondary:hover {
            background: #f8fafc;
            color: #111827;
        }

        .student-request-page .invalid-feedback {
            font-size: 0.78rem;
            font-weight: 700;
            margin-top: 0.35rem;
        }

        @media (max-width: 991.98px) {
            .student-request-page .asset-col-6,
            .student-request-page .asset-col-4 {
                grid-column: span 12 / span 12;
            }
        }

        @media (max-width: 575.98px) {
            .student-request-page .request-card-head,
            .student-request-page .request-card-body,
            .student-request-page .request-section {
                padding: 1rem;
            }

            .student-request-page .asset-actions .asset-btn {
                width: 100%;
            }
        }
    </style>

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

                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert" id="successAlert">
                        <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if ($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="fas fa-exclamation-circle me-2"></i>
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                <x-page-title
                    title="Add New Student Request"
                    description="Create a new request, complaint, activity request, schedule change, or information request.">
                    <a href="{{ route('requests.index') }}" class="asset-btn asset-btn--secondary">
                        Cancel
                    </a>
                </x-page-title>

                <div class="ui-card request-form-card">
                    <div class="request-card-head">
                        <div class="request-card-head__main">
                            <div class="request-card-head__icon">
                                <i class="fas fa-plus-circle"></i>
                            </div>

                            <div>
                                <h5 class="request-card-head__title">Student Request Form</h5>
                                <p class="request-card-head__sub">
                                    Fill request classification, instructor assignment, scheduling information, subject, description, and attachments.
                                </p>
                            </div>
                        </div>

                        @if ($type == 'gift_call')
                            <span class="asset-btn asset-btn--secondary">
                                <i class="fas fa-gift"></i>
                                Gift Call Request
                            </span>
                        @endif
                    </div>

                    @if ($type == 'gift_call')
                        <div class="gift-call-note">
                            <i class="fas fa-info-circle"></i>
                            <div>You are creating a Gift Call request.</div>
                        </div>
                    @endif

                    <div class="request-card-body">
                        <form action="{{ route('requests.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf

                            <div class="requester-box">
                                <div class="requester-avatar">
                                    {{ strtoupper(substr($auth->first_name ?? 'S', 0, 1) . substr($auth->last_name ?? '', 0, 1)) }}
                                </div>

                                <div>
                                    <div class="requester-label">Requester Name</div>
                                    <div class="requester-name">
                                        {{ $auth->first_name }} {{ $auth->last_name }}
                                    </div>
                                </div>
                            </div>

                            <div class="request-section">
                                <div class="request-section__head">
                                    <div class="request-section__icon">
                                        <i class="fas fa-sliders-h"></i>
                                    </div>

                                    <div>
                                        <h6 class="request-section__title">Request Classification</h6>
                                        <p class="request-section__sub">
                                            Choose request type, relation, priority, and instructor.
                                        </p>
                                    </div>
                                </div>

                                <div class="asset-form-grid">
                                    <div class="asset-col-6" id="type_wrapper">
                                        <label for="type" class="form-label">Request Type</label>
                                        <select name="type" id="type" class="form-select @error('type') is-invalid @enderror">
                                            <option value="">Select Type</option>
                                            @foreach ($requestTypes as $requestType)
                                                @php
                                                    $requestTypeName = strtolower($requestType->name);
                                                    $oldType = old('type');
                                                @endphp
                                                <option
                                                    value="{{ $requestType->id }}"
                                                    data-name="{{ $requestTypeName }}"
                                                    data-priority="{{ $requestType->priority?->name }}"
                                                    {{ (string) $oldType === (string) $requestType->id || $oldType === $requestTypeName ? 'selected' : '' }}
                                                >
                                                    {{ ucwords(str_replace('_', ' ', $requestType->name)) }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('type')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="asset-col-6" id="related_to_wrapper">
                                        <label for="related_to" class="form-label">Related To</label>
                                        <select name="related_to" id="related_to" class="form-select @error('related_to') is-invalid @enderror">
                                            <option value="">Select Related To</option>
                                            <option value="activities" {{ old('related_to') == 'activities' ? 'selected' : '' }}>Activities</option>
                                            <option value="homework" {{ old('related_to') == 'homework' ? 'selected' : '' }}>Homework</option>
                                            <option value="whiteboard" {{ old('related_to') == 'whiteboard' ? 'selected' : '' }}>Whiteboard</option>
                                            <option value="curriculum" {{ old('related_to') == 'curriculum' ? 'selected' : '' }}>Curriculum</option>
                                            <option value="time" {{ old('related_to') == 'time' ? 'selected' : '' }}>Time</option>
                                        </select>
                                        @error('related_to')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="asset-col-6" id="instructor_wrapper">
                                        <label for="instructor_id" class="form-label">Assign to Instructor</label>
                                        <select name="instructor_id" id="instructor_id" class="form-select select2 @error('instructor_id') is-invalid @enderror" required>
                                            <option value="">Select Instructor</option>
                                            @foreach ($instructors as $instructor)
                                                <option value="{{ $instructor->id }}" {{ old('instructor_id') == $instructor->id ? 'selected' : '' }}>
                                                    {{ $instructor->first_name . ' ' . $instructor->last_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('instructor_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="asset-col-6" id="priority_wrapper">
                                        <label for="priority" class="form-label">Priority</label>
                                        <select name="priority" id="priority" class="form-select @error('priority') is-invalid @enderror">
                                            <option value="high" {{ old('priority') == 'high' ? 'selected' : '' }}>High</option>
                                            <option value="medium" {{ old('priority', 'medium') == 'medium' ? 'selected' : '' }}>Medium</option>
                                            <option value="low" {{ old('priority') == 'low' ? 'selected' : '' }}>Low</option>
                                        </select>
                                        @error('priority')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="request-section" id="refund_section" style="display: none;">
                                <div class="request-section__head">
                                    <div class="request-section__icon">
                                        <i class="fas fa-undo-alt"></i>
                                    </div>

                                    <div>
                                        <h6 class="request-section__title">Refund Details</h6>
                                        <p class="request-section__sub">
                                            Use this section when the request type is Refund.
                                        </p>
                                    </div>
                                </div>

                                <div class="asset-form-grid">
                                    <div class="asset-col-12">
                                        <div class="alert alert-info mb-0 h-100 d-flex align-items-center">
                                            Select the paid course package. Refund will apply to the courses in this package that have not started yet.
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="request-section">
                                <div class="request-section__head">
                                    <div class="request-section__icon">
                                        <i class="fas fa-calendar-check"></i>
                                    </div>

                                    <div>
                                        <h6 class="request-section__title">Dynamic Request Details</h6>
                                        <p class="request-section__sub">
                                            These fields appear based on request type, related topic, and selected instructor.
                                        </p>
                                    </div>
                                </div>

                                <div class="asset-form-grid">
                                    <div class="asset-col-4" id="sessions_wrapper" style="display: none;">
                                        <label class="form-label">Next Session Date</label>
                                        <input type="text" id="session_date_input" name="session_date" class="form-control" readonly>
                                    </div>

                                    <div class="asset-col-4" id="last_session_wrapper" style="display: none;">
                                        <label class="form-label">Latest Attended Session</label>
                                        <input type="text" id="last_session_date_input" name="last_session_date" class="form-control" readonly>
                                    </div>

                                    <div class="asset-col-6" id="course_wrapper" style="display: none;">
                                        <label for="course_id" class="form-label">Select Paid Package</label>
                                        <select name="refund_invoice_id" id="course_id" class="form-select">
                                            <option value="">Select Paid Package</option>
                                        </select>
                                        <div id="refund_package_preview" class="alert alert-light border mt-2 mb-0 small" style="display: none;"></div>
                                    </div>

                                    <div class="asset-col-6" id="session_complaint_wrapper" style="display: none;">
                                        <label for="session_id" class="form-label">Select Session</label>
                                        <select name="session_id" id="session_id" class="form-select">
                                            <option value="">Select Session</option>
                                        </select>
                                    </div>

                                    <div class="asset-col-6" id="admin_wrapper" style="display: none;">
                                        <label class="form-label">Course Admin</label>
                                        <select name="admin_id" id="admin_id" class="form-select">
                                            <option value="">Select Admin</option>
                                        </select>
                                    </div>

                                    <div class="asset-col-6" id="change_time_wrapper" style="display: none;">
                                        <label for="change_time" class="form-label">Change Time</label>
                                        <input type="time" name="change_time" id="change_time" class="form-control @error('change_time') is-invalid @enderror" value="{{ old('change_time') }}">
                                        @error('change_time')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="asset-col-6" id="activity_type_wrapper" style="display: none;">
                                        <label for="activity_type" class="form-label">Activity Type</label>
                                        <select name="activity_type" id="activity_type" class="form-select @error('activity_type') is-invalid @enderror">
                                            <option value="">Select Activity Type</option>
                                            <option value="gift_call" {{ old('activity_type') == 'gift_call' ? 'selected' : '' }}>Gift Call</option>
                                            <option value="english_club" {{ old('activity_type') == 'english_club' ? 'selected' : '' }}>English Club</option>
                                            <option value="new_session" {{ old('activity_type') == 'new_session' ? 'selected' : '' }}>New Session</option>
                                        </select>
                                        @error('activity_type')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="asset-col-6" id="activity_date_wrapper" style="display: none;">
                                        <label for="activity_date" class="form-label">Activity Date</label>
                                        <input type="date" name="date" id="activity_date" class="form-control @error('date') is-invalid @enderror" value="{{ old('date') }}">
                                        @error('date')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="asset-col-6" id="activity_time_wrapper" style="display: none;">
                                        <label for="activity_time" class="form-label">Activity Time</label>
                                        <input type="time" name="time" id="activity_time" class="form-control @error('time') is-invalid @enderror" value="{{ old('time') }}">
                                        @error('time')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="asset-col-12" id="gift_call_schedule_wrapper" style="display: none;">
                                        <div class="schedule-box">
                                            <div class="schedule-title">
                                                Select Available Days & Times for Gift Call
                                            </div>

                                            <div id="schedule_rows_container">
                                                <div class="row schedule-row align-items-end">
                                                    <div class="col-md-4">
                                                        <label class="form-label small">Day</label>
                                                        <select name="schedules[0][day]" class="form-select">
                                                            <option value="">Select Day</option>
                                                            <option value="Saturday">Saturday</option>
                                                            <option value="Sunday">Sunday</option>
                                                            <option value="Monday">Monday</option>
                                                            <option value="Tuesday">Tuesday</option>
                                                            <option value="Wednesday">Wednesday</option>
                                                            <option value="Thursday">Thursday</option>
                                                            <option value="Friday">Friday</option>
                                                        </select>
                                                    </div>

                                                    <div class="col-md-4">
                                                        <label class="form-label small">Time</label>
                                                        <input type="time" name="schedules[0][time]" class="form-control">
                                                    </div>

                                                    <div class="col-md-2">
                                                        <button type="button" class="btn-schedule-action btn-schedule-action--add add-schedule-row">
                                                            <i class="fas fa-plus"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="request-section">
                                <div class="request-section__head">
                                    <div class="request-section__icon">
                                        <i class="fas fa-align-left"></i>
                                    </div>

                                    <div>
                                        <h6 class="request-section__title">Request Content</h6>
                                        <p class="request-section__sub">
                                            Add the subject, description, and any supporting attachments.
                                        </p>
                                    </div>
                                </div>

                                <div class="asset-form-grid">
                                    <div class="asset-col-12">
                                        <label for="subject" class="form-label">Subject <span class="text-danger">*</span></label>
                                        <input type="text" name="subject" id="subject" class="form-control @error('subject') is-invalid @enderror" value="{{ old('subject') }}" required>
                                        @error('subject')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="asset-col-12">
                                        <label for="description" class="form-label">Description</label>
                                        <textarea name="description" id="description" rows="4" class="form-control @error('description') is-invalid @enderror">{{ old('description') }}</textarea>
                                        @error('description')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="asset-col-12">
                                        <label for="attachments" class="form-label">Attachments</label>
                                        <div class="upload-box">
                                            <div class="upload-box__title">Upload supporting files</div>
                                            <div class="upload-box__text">
                                                You can attach multiple files related to this request.
                                            </div>

                                            <input type="file" name="attachments[]" id="attachments" class="form-control @error('attachments') is-invalid @enderror @error('attachments.*') is-invalid @enderror" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx,.xlsx,.txt" multiple>
                                        </div>

                                        @error('attachments')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                        @error('attachments.*')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="asset-actions">
                                <a href="{{ route('requests.index') }}" class="asset-btn asset-btn--secondary">
                                    Cancel
                                </a>

                                <button type="submit" class="asset-btn asset-btn--primary">
                                    <i class="fas fa-save"></i>
                                    Save Student Request
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

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

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const typeWrapper = document.getElementById('type_wrapper');
            const relatedToWrapper = document.getElementById('related_to_wrapper');
            const instructorWrapper = document.getElementById('instructor_wrapper');
            const priorityWrapper = document.getElementById('priority_wrapper');
            const relatedToSelect = document.getElementById('related_to');
            const typeSelect = document.getElementById('type');
            const activityTypeWrapper = document.getElementById('activity_type_wrapper');
            const activityTypeSelect = document.getElementById('activity_type');
            const activityDateWrapper = document.getElementById('activity_date_wrapper');
            const activityDateInput = document.getElementById('activity_date');
            const activityTimeWrapper = document.getElementById('activity_time_wrapper');
            const activityTimeInput = document.getElementById('activity_time');
            const changeTimeWrapper = document.getElementById('change_time_wrapper');
            const typeFromUrl = "{{ $type }}";
            const requestTypes = @json($requestTypes);
            const refundCourses = @json($refundCourses);
            const oldCourseId = @json(old('refund_invoice_id', old('course_id')));
            const oldPriority = @json(old('priority'));
            const sessionWrapper = document.getElementById('sessions_wrapper');
            const LastsessionWrapper = document.getElementById('last_session_wrapper');
            const sessionDateInput = document.getElementById('session_date_input');
            const lastSessionInput = document.getElementById('last_session_date_input');
            const instructorSelect = document.getElementById('instructor_id');

            const courseWrapper = document.getElementById('course_wrapper');
            const sessionComplaintWrapper = document.getElementById('session_complaint_wrapper');
            const adminWrapper = document.getElementById('admin_wrapper');
            const refundSection = document.getElementById('refund_section');
            const courseSelect = document.getElementById('course_id');
            const refundPackagePreview = document.getElementById('refund_package_preview');
            const sessionSelect = document.getElementById('session_id');
            const adminDisplay = document.getElementById('admin_id');
            const giftCallScheduleWrapper = document.getElementById('gift_call_schedule_wrapper');
            const scheduleRowsContainer = document.getElementById('schedule_rows_container');

            let coursesData = [];
            let rowCount = 1;

            function selectedRequestTypeName() {
                const selectedOption = typeSelect.options[typeSelect.selectedIndex];
                return selectedOption ? selectedOption.dataset.name : '';
            }

            function selectRequestTypeByName(typeName) {
                const option = Array.from(typeSelect.options).find(option => option.dataset.name === typeName);

                if (option) {
                    typeSelect.value = option.value;
                }
            }

            function isRefundRequest() {
                return selectedRequestTypeName() === 'refund';
            }

            function formatCourseDate(value) {
                if (!value) {
                    return '';
                }

                const parts = String(value).split('-');
                if (parts.length !== 3) {
                    return value;
                }

                return `${parts[2]}/${parts[1]}/${parts[0]}`;
            }

            function escapeHtml(value) {
                return String(value ?? '')
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#039;');
            }

            function populateRefundCourses() {
                const currentCourseId = courseSelect.value || oldCourseId;
                const filteredCourses = refundCourses;
                // .filter(course => course.status === 'not_started');

                courseSelect.innerHTML = '<option value="">Select Paid Package</option>';

                if (!filteredCourses.length) {
                    const option = document.createElement('option');
                    option.value = '';
                    option.textContent = 'No eligible courses available';
                    option.disabled = true;
                    courseSelect.appendChild(option);
                    return;
                }

                filteredCourses.forEach(course => {
                    const refundCourse = course.course || {};
                    const invoice = course.finanace_student_invoice || {};
                    const courseId = course.finanace_student_invoice_id || invoice.id;
                    const courseName = invoice.package?.name || refundCourse.track?.name_en || refundCourse.course_name_en || refundCourse.course_name_ar || course.name || 'Paid Package';
                    const startDateValue = course.refund_start_date || refundCourse.start_date || course.start_date || '';
                    const endDateValue = course.refund_end_date || refundCourse.end_date || course.end_date || '';
                    const option = document.createElement('option');
                    option.value = courseId;
                    const startDate = startDateValue ? formatCourseDate(startDateValue) : 'N/A';
                    const endDate = endDateValue ? formatCourseDate(endDateValue) : 'N/A';
                    option.textContent = course.refund_label || `${courseName} - ${startDate} / ${endDate}`;
                    option.dataset.startDate = startDateValue;
                    option.dataset.endDate = endDateValue;
                    option.dataset.packageName = course.refund_package_name || courseName;
                    option.dataset.trackName = course.refund_track_name || refundCourse.track?.name_en || refundCourse.track?.name_ar || '';
                    option.dataset.invoiceNumber = course.refund_invoice_number || invoice.invoice_number || '';
                    courseSelect.appendChild(option);
                });

                if (currentCourseId) {
                    const stillAvailable = filteredCourses.some(course => String(course.finanace_student_invoice_id || course.finanace_student_invoice?.id) === String(currentCourseId));
                    if (stillAvailable) {
                        courseSelect.value = currentCourseId;
                    }
                }

                updateRefundPackagePreview();
            }

            function updateRefundPackagePreview() {
                if (!refundPackagePreview || !isRefundRequest()) {
                    return;
                }

                const option = courseSelect.options[courseSelect.selectedIndex];

                if (!courseSelect.value || !option) {
                    refundPackagePreview.style.display = 'none';
                    refundPackagePreview.innerHTML = '';
                    return;
                }

                const rows = [
                    option.dataset.packageName ? `<strong>${escapeHtml(option.dataset.packageName)}</strong>` : '',
                    option.dataset.trackName ? `Progoram: ${escapeHtml(option.dataset.trackName)}` : '',
                    option.dataset.invoiceNumber ? `Invoice: ${escapeHtml(option.dataset.invoiceNumber)}` : '',
                    option.dataset.startDate ? `Start: ${escapeHtml(formatCourseDate(option.dataset.startDate))}` : '',
                    option.dataset.endDate ? `End: ${escapeHtml(formatCourseDate(option.dataset.endDate))}` : '',
                ].filter(Boolean);

                refundPackagePreview.innerHTML = rows.join('<br>');
                refundPackagePreview.style.display = rows.length ? 'block' : 'none';
            }

            function toggleActivityFields() {
                if (relatedToSelect.value === 'activities') {
                    activityTypeWrapper.style.display = 'block';
                    activityDateWrapper.style.display = 'block';
                    activityTimeWrapper.style.display = 'block';
                    changeTimeWrapper.style.display = 'none';
                    toggleGiftCallSchedule();
                } else if (relatedToSelect.value === 'time') {
                    changeTimeWrapper.style.display = 'block';
                    activityTypeWrapper.style.display = 'none';
                    activityDateWrapper.style.display = 'none';
                    activityTimeWrapper.style.display = 'none';
                    giftCallScheduleWrapper.style.display = 'none';
                } else {
                    activityTypeWrapper.style.display = 'none';
                    activityDateWrapper.style.display = 'none';
                    activityTimeWrapper.style.display = 'none';
                    changeTimeWrapper.style.display = 'none';
                    giftCallScheduleWrapper.style.display = 'none';

                    activityTypeSelect.value = '';
                    activityDateInput.value = '';
                    activityTimeInput.value = '';
                }

                updateSessionVisibility();
            }

            function updateSessionVisibility() {
                const relatedTo = relatedToSelect.value;
                const instructorId = instructorSelect.value;

                if (!instructorId) {
                    sessionWrapper.style.display = 'none';
                    LastsessionWrapper.style.display = 'none';
                    return;
                }

                sessionWrapper.style.display = 'none';
                LastsessionWrapper.style.display = 'none';

                if (relatedTo === 'homework' || relatedTo === 'whiteboard') {
                    LastsessionWrapper.style.display = 'block';
                    sessionWrapper.style.display = 'block';
                } else if (relatedTo !== 'activities' && relatedTo !== 'time' && relatedTo !== '') {
                    // kept intentionally as original behavior
                }
            }

            function toggleGiftCallSchedule() {
                if (relatedToSelect.value === 'activities' && activityTypeSelect.value === 'gift_call') {
                    giftCallScheduleWrapper.style.display = 'block';
                } else {
                    giftCallScheduleWrapper.style.display = 'none';
                }
            }

            activityTypeSelect.addEventListener('change', toggleGiftCallSchedule);

            scheduleRowsContainer.addEventListener('click', function(e) {
                if (e.target.closest('.add-schedule-row')) {
                    const newRow = document.createElement('div');
                    newRow.className = 'row schedule-row align-items-end';
                    newRow.innerHTML = `
                        <div class="col-md-4">
                            <label class="form-label small">Day</label>
                            <select name="schedules[${rowCount}][day]" class="form-select">
                                <option value="">Select Day</option>
                                <option value="Saturday">Saturday</option>
                                <option value="Sunday">Sunday</option>
                                <option value="Monday">Monday</option>
                                <option value="Tuesday">Tuesday</option>
                                <option value="Wednesday">Wednesday</option>
                                <option value="Thursday">Thursday</option>
                                <option value="Friday">Friday</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label small">Time</label>
                            <input type="time" name="schedules[${rowCount}][time]" class="form-control">
                        </div>

                        <div class="col-md-2">
                            <button type="button" class="btn-schedule-action btn-schedule-action--remove remove-schedule-row">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    `;

                    scheduleRowsContainer.appendChild(newRow);
                    rowCount++;
                }

                if (e.target.closest('.remove-schedule-row')) {
                    e.target.closest('.schedule-row').remove();
                }
            });

            function toggleTypeFields() {
                if (isRefundRequest()) {
                    relatedToWrapper.style.display = 'none';
                    instructorWrapper.style.display = 'none';
                    priorityWrapper.style.display = 'none';
                    refundSection.style.display = 'block';
                    courseWrapper.style.display = 'block';
                    sessionComplaintWrapper.style.display = 'none';
                    adminWrapper.style.display = 'none';
                    sessionWrapper.style.display = 'none';
                    LastsessionWrapper.style.display = 'none';
                    giftCallScheduleWrapper.style.display = 'none';
                    activityTypeWrapper.style.display = 'none';
                    activityDateWrapper.style.display = 'none';
                    activityTimeWrapper.style.display = 'none';
                    changeTimeWrapper.style.display = 'none';
                    populateRefundCourses();
                    instructorSelect.required = false;
                    courseSelect.required = true;
                    sessionDateInput.value = '';
                    lastSessionInput.value = '';
                    sessionSelect.innerHTML = '<option value="">Select Session</option>';
                    adminDisplay.innerHTML = '<option value="">Select Admin</option>';
                    updateRefundPackagePreview();

                    return;
                }

                refundSection.style.display = 'none';
                if (refundPackagePreview) {
                    refundPackagePreview.style.display = 'none';
                    refundPackagePreview.innerHTML = '';
                }
                instructorSelect.required = true;
                courseSelect.required = false;
                if (typeSelect.value !== '') {
                    relatedToWrapper.style.display = 'block';
                    instructorWrapper.style.display = 'block';
                    priorityWrapper.style.display = 'block';
                }

                if (selectedRequestTypeName() === 'complaint') {
                    if (instructorSelect.value) {
                        fetchCoursesAndSessions(instructorSelect.value);
                    }
                } else {
                    courseWrapper.style.display = 'none';
                    sessionComplaintWrapper.style.display = 'none';
                    adminWrapper.style.display = 'none';
                    courseSelect.innerHTML = '<option value="">Select Course</option>';
                    sessionSelect.innerHTML = '<option value="">Select Session</option>';
                    adminDisplay.value = '';
                }
            }

            typeSelect.addEventListener('change', toggleTypeFields);
            typeSelect.addEventListener('change', function () {
                if (isRefundRequest()) {
                    populateRefundCourses();
                }
            });
            toggleTypeFields();

            function autoSelectBasedOnType() {
                if (typeFromUrl === 'gift_call' || typeFromUrl === 'english_club' || typeFromUrl === 'new_session') {
                    relatedToSelect.value = 'activities';
                    activityTypeWrapper.style.display = 'block';
                    activityDateWrapper.style.display = 'block';
                    activityTimeWrapper.style.display = 'block';
                    activityTypeSelect.value = typeFromUrl;
                    toggleGiftCallSchedule();
                }

                if (typeFromUrl === 'refund') {
                    selectRequestTypeByName('refund');
                    toggleTypeFields();
                }

                if (typeFromUrl === 'change_time') {
                    selectRequestTypeByName('request');
                    relatedToSelect.value = 'time';
                    changeTimeWrapper.style.display = 'block';
                }
            }

            relatedToSelect.addEventListener('change', toggleActivityFields);
            toggleActivityFields();
            autoSelectBasedOnType();

            function fetchCoursesAndSessions(instructorId) {
                if (selectedRequestTypeName() !== 'complaint') return;

                fetch(`/teachers/${instructorId}/courses-sessions`)
                    .then(response => response.json())
                    .then(data => {
                        coursesData = data.courses;

                        courseSelect.innerHTML = '<option value="">Select Course</option>';

                        data.courses.forEach(course => {
                            const option = document.createElement('option');
                            option.value = course.id;
                            option.textContent = `${course.name} - ${course.level || ''}`;
                            option.dataset.admins = JSON.stringify(course.admins || []);
                            option.dataset.sessions = JSON.stringify(course.sessions);
                            courseSelect.appendChild(option);
                        });

                        courseWrapper.style.display = 'block';
                    })
                    .catch(error => console.error('Error fetching courses:', error));
            }

            courseSelect.addEventListener('change', function() {
                if (isRefundRequest()) {
                    adminWrapper.style.display = 'none';
                    sessionComplaintWrapper.style.display = 'none';
                    adminDisplay.innerHTML = '<option value="">Select Admin</option>';
                    sessionSelect.innerHTML = '<option value="">Select Session</option>';
                    sessionWrapper.style.display = 'none';
                    LastsessionWrapper.style.display = 'none';
                    sessionDateInput.value = '';
                    lastSessionInput.value = '';
                    updateRefundPackagePreview();
                    return;
                }

                const selectedOption = this.options[this.selectedIndex];

                if (this.value) {
                    const admins = JSON.parse(selectedOption.dataset.admins || '[]');

                    adminDisplay.innerHTML = '<option value="">Select Admin</option>';

                    admins.forEach(admin => {
                        const option = document.createElement('option');
                        option.value = admin.id;
                        option.textContent = admin.name;
                        adminDisplay.appendChild(option);
                    });

                    adminWrapper.style.display = 'block';

                    const sessions = JSON.parse(selectedOption.dataset.sessions || '[]');

                    sessionSelect.innerHTML = '<option value="">Select Session</option>';

                    sessions.forEach(session => {
                        const option = document.createElement('option');
                        option.value = session.id;
                        option.textContent = session.display;
                        sessionSelect.appendChild(option);
                    });

                    sessionComplaintWrapper.style.display = 'block';
                } else {
                    adminWrapper.style.display = 'none';
                    sessionComplaintWrapper.style.display = 'none';
                    adminDisplay.innerHTML = '<option value="">Select Admin</option>';
                    sessionSelect.innerHTML = '<option value="">Select Session</option>';
                }
            });

            instructorSelect.addEventListener('change', function () {
                const instructorId = this.value;

                if (!instructorId) {
                    sessionWrapper.style.display = 'none';
                    LastsessionWrapper.style.display = 'none';
                    sessionDateInput.value = '';
                    courseWrapper.style.display = 'none';
                    sessionComplaintWrapper.style.display = 'none';
                    adminWrapper.style.display = 'none';
                    return;
                }

                if (selectedRequestTypeName() === 'complaint') {
                    fetchCoursesAndSessions(instructorId);
                }

                fetch(`/teachers/${instructorId}/sessions`)
                    .then(response => response.json())
                    .then(data => {
                        const next = data.nextSession;
                        const last = data.lastSession;

                        if (next && next.session_date) {
                            const formattedDate = new Date(next.session_date).toLocaleDateString('en-GB');
                            sessionDateInput.value = `${formattedDate} (${next.start_time.substring(0, 5)})`;
                        } else {
                            sessionDateInput.value = 'No upcoming sessions';
                        }

                        if (last && last.session_date) {
                            const formattedDate = new Date(last.session_date).toLocaleDateString('en-GB');
                            lastSessionInput.value = `${formattedDate} (${last.start_time.substring(0, 5)})`;
                        } else {
                            lastSessionInput.value = 'No previous sessions';
                        }

                        updateSessionVisibility();
                    })
                    .catch(error => console.error('Error fetching session:', error));
            });
        });
    </script>
@endpush