@extends('layout.layout')

@section('content')
    <div class="container mt-5">


        @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

        <div class="card shadow-lg border-0 rounded-3">
            <div class="card-header py-3">
                <div class="mb-0"><i class="fas fa-plus-circle"></i> Add New Student Request</div>
            </div>
            @if ($type == 'gift_call')
                <div class="alert alert-info">You are creating a Gift Call request</div>
            @endif
            <div class="card-body px-3 py-3">
                <form action="{{ route('requests.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <!-- name -->
                    <div class="mb-3">
                        <div class="fw-bold">Requester Name</div>
                        <div>{{ $auth->first_name }} {{ $auth->last_name }} </div>
                    </div>
                    <div class="row">
                        <!-- Request Type -->
                        <div class="col-md-6 mb-3">
                            <label for="type" class="form-label">Request Type</label>
                            <select name="type" id="type" class="form-select rounded-3 @error('type') is-invalid @enderror">
                                <option value="">Select Type</option>
                                @foreach ($requestTypes as $requestType)
                                    <option value="{{ $requestType->id }}" {{ (string) old('type') === (string) $requestType->id ? 'selected' : '' }}>
                                        {{ ucfirst($requestType->name) }}
                                    </option>
                                @endforeach
                            </select>
                            @error('type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <!-- Related To -->
                        <div class="col-md-6 mb-3">
                            <label for="related_to" class="form-label">Related To</label>
                            <select name="related_to" id="related_to"
                                class="form-select rounded-3 @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="row">
                            <!-- Assign to Instructor -->
                            <div class="col-md-6 mb-3">
                                <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="col-md-3 mb-3" 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="col-md-3 mb-3" 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>

                            <!-- Course Selection (for complaints) -->
                            <div class="col-md-6 mb-3" id="course_wrapper" style="display: none;">
                                <label for="course_id" class="form-label">Select Course</label>
                                <select name="course_id" id="course_id" class="form-select rounded-3">
                                    <option value="">Select Course</option>
                                </select>
                            </div>

                            <!-- Session Selection (for complaints) -->
                            <div class="col-md-6 mb-3" 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 rounded-3">
                                    <option value="">Select Session</option>
                                </select>
                            </div>

                            <!-- Admin Display (for complaints) -->
                            <div class="col-md-6 mb-3" id="admin_wrapper" style="display: none;">
                                <label class="form-label">Course Admin</label>
                                <select name="admin_id" id="admin_id" class="form-select rounded-3">
                                    <option value="">Select Admin</option>
                                </select>
                            </div>

                            <div class="col-md-6 mb-3" 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 rounded-3 @error('change_time') is-invalid @enderror"
                                    value="{{ old('change_time') }}">
                                @error('change_time')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Activity Type Select --}}
                            <div class="col-md-6 mb-3" 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 rounded-3 @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 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="col-md-6 mb-3" 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 rounded-3 @error('date') is-invalid @enderror"
                                    value="{{ old('date') }}">
                                @error('date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3" 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 rounded-3 @error('time') is-invalid @enderror"
                                    value="{{ old('time') }}">
                                @error('time')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Gift Call Schedule Selection -->
                            <div class="col-12 mb-3" id="gift_call_schedule_wrapper" style="display: none;">
                                <label class="form-label fw-bold">Select Available Days & Times for Gift Call</label>
                                <div id="schedule_rows_container">
                                    <div class="row mb-2 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 rounded-3">
                                                <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 rounded-3">
                                        </div>
                                        <div class="col-md-2">
                                            <button type="button" class="btn btn-success add-schedule-row">
                                                <iconify-icon icon="fa-solid:plus"></iconify-icon>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Priority -->
                            <div class="col-md-6 mb-3">
                                <label for="priority" class="form-label">Priority</label>
                                <select name="priority" id="priority"
                                    class="form-select rounded-3 @error('priority') is-invalid @enderror">
                                    <option value="">Select Priority</option>
                                </select>
                                @error('priority')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <!-- Subject -->
                    <div class="mb-3">
                        <label for="subject" class="form-label">Subject <span class="text-danger">*</span></label>
                        <input type="text" name="subject" id="subject"
                            class="form-control rounded-3 @error('subject') is-invalid @enderror"
                            value="{{ old('subject') }}" required>
                        @error('subject')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <!-- Description -->
                    <div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        <textarea name="description" id="description" rows="4"
                            class="form-control rounded-3 @error('description') is-invalid @enderror">{{ old('description') }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <!-- Attachments -->
                    <div class="mb-3">
                        <label for="attachments" class="form-label">Attachments</label>
                        <input type="file" name="attachments[]" id="attachments"
                            class="form-control rounded-3 @error('attachments') is-invalid @enderror @error('attachments.*') is-invalid @enderror"
                            multiple>
                        @error('attachments')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        @error('attachments.*')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <!-- Submit -->
                    <div class="d-flex justify-content-end mt-3 gap-2">
                        <button type="submit" class="btn btn-outline-success btn-sm radius-8 px-3">Save Student
                            Request</button>
                        <a href="{{ route('requests.index') }}" type="submit"
                            class="btn btn-outline-secondary btn-sm radius-8 px-3">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection
@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            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 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');

            // Complaint-specific elements
            const courseWrapper = document.getElementById('course_wrapper');
            const sessionComplaintWrapper = document.getElementById('session_complaint_wrapper');
            const adminWrapper = document.getElementById('admin_wrapper');
            const courseSelect = document.getElementById('course_id');
            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');
            const prioritySelect = document.getElementById('priority');

            let coursesData = [];
            let rowCount = 1;

            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;
                }

                // Default hidden
                sessionWrapper.style.display = 'none';
                LastsessionWrapper.style.display = 'none';

                if (relatedTo === 'homework' || relatedTo === 'whiteboard') {
                    // if (lastSessionInput.value && lastSessionInput.value !== 'No previous sessions') {
                    LastsessionWrapper.style.display = 'block';
                    sessionWrapper.style.display = 'block';
                    // }
                } else if (relatedTo !== 'activities' && relatedTo !== 'time' && relatedTo !== '') {
                    // if (sessionDateInput.value && sessionDateInput.value !== 'No upcoming sessions') {
                        // sessionWrapper.style.display = 'block';
                    // }
                }
            }

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

            activityTypeSelect.addEventListener('change', toggleGiftCallSchedule);

            // Dynamic schedule rows
            scheduleRowsContainer.addEventListener('click', function(e) {
                if (e.target.closest('.add-schedule-row')) {
                    const newRow = document.createElement('div');
                    newRow.className = 'row mb-2 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 rounded-3">
                                <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 rounded-3">
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-danger remove-schedule-row">
                                <iconify-icon icon="fa-solid:trash"></iconify-icon>
                            </button>
                        </div>
                    `;
                    scheduleRowsContainer.appendChild(newRow);
                    rowCount++;
                }

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

            function toggleTypeFields(selectedPriority = null) {
                renderPriorities(typeSelect.value, selectedPriority);

                const selectedType = getSelectedType();
                if (selectedType && selectedType.name === '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 = '';
                }
            }

            function getSelectedType() {
                const selectedTypeId = Number(typeSelect.value);
                return requestTypes.find(item => Number(item.id) === selectedTypeId) || null;
            }

            function renderPriorities(typeName, selectedPriority = null) {
                prioritySelect.innerHTML = '<option value="">Select Priority</option>';

                const selectedType = requestTypes.find(item => Number(item.id) === Number(typeName));
                if (!selectedType || !selectedType.priority) {
                    return;
                }

                const option = document.createElement('option');
                option.value = selectedType.priority.name;
                option.textContent = selectedType.priority.name.charAt(0).toUpperCase() + selectedType.priority.name.slice(1);
                option.selected = selectedPriority === selectedType.priority.name || !selectedPriority;
                prioritySelect.appendChild(option);
            }

            typeSelect.addEventListener('change', () => toggleTypeFields());
            toggleTypeFields(oldPriority);

            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 === 'change_time') {
                    document.getElementById('type').value = 'request';
                    relatedToSelect.value = 'time';
                    changeTimeWrapper.style.display = 'block';
                }
            }
            relatedToSelect.addEventListener('change', toggleActivityFields);
            toggleActivityFields();
            autoSelectBasedOnType();


            function fetchCoursesAndSessions(instructorId) {
                const selectedType = getSelectedType();
                if (!selectedType || selectedType.name !== '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() {
                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;

                // Reset if no instructor
                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;
                }

                const selectedType = getSelectedType();
                if (selectedType && selectedType.name === '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 (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