@extends('layout.layout')

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

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="d-flex flex-column gap-4">
                <x-page-title
                    title="Create Escalation Request"
                    description="Send a request to another department and attach supporting files."
                />

                <div class="ui-card">
                    <div class="ui-card__header">
                        <div>
                            <h6 class="mb-0 ui-title">Request Details</h6>
                            <p class="mb-0 ui-muted">Your department is selected automatically from your staff profile.</p>
                        </div>
                    </div>

                    <div class="p-3 p-md-4">
                        <form action="{{ route('escalation-requests.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label" for="from_department_name">From Department</label>
                                    <input
                                        type="text"
                                        id="from_department_name"
                                        value="{{ $staff?->department?->name ?? 'N/A' }}"
                                        class="form-control border border-2 border-secondary-subtle"
                                        readonly
                                    >
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label" for="to_department_id">To Department <span class="text-danger">*</span></label>
                                    <select id="to_department_id" name="to_department_id" class="form-select general-select border border-2 border-secondary-subtle" required>
                                        <option value="">Select department</option>
                                        @foreach ($departments as $department)
                                            <option value="{{ $department->id }}" @selected((string) old('to_department_id') === (string) $department->id)>
                                                {{ $department->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('to_department_id') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-12">
                                    @php
                                        $selectedSourceType = old('source_type', request('hr_request_id') ? 'hr' : 'student');
                                    @endphp
                                    <label class="form-label d-block">Linked Request Source <span class="text-danger">*</span></label>
                                    <div class="d-flex flex-wrap gap-4">
                                        <label class="form-check-label d-flex align-items-center gap-2">
                                            <input
                                                type="radio"
                                                name="source_type"
                                                value="student"
                                                class="form-check-input"
                                                @checked($selectedSourceType === 'student')
                                            >
                                            <span>Student Request</span>
                                        </label>
                                        <label class="form-check-label d-flex align-items-center gap-2">
                                            <input
                                                type="radio"
                                                name="source_type"
                                                value="hr"
                                                class="form-check-input"
                                                @checked($selectedSourceType === 'hr')
                                            >
                                            <span>Staff Request</span>
                                        </label>
                                    </div>
                                    @error('source_type') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-12" data-source-section="student">
                                    <label class="form-label" for="student_request_id">Student Complaint Request</label>
                                    <select id="student_request_id" name="student_request_id" class="form-select general-select border border-2 border-secondary-subtle">
                                        <option value="">Select student request</option>
                                        @foreach ($complaintRequests as $complaintRequest)
                                            @php
                                                $studentName = $complaintRequest->student?->full_name
                                                    ?: trim(($complaintRequest->student?->first_name ?? '').' '.($complaintRequest->student?->last_name ?? ''));
                                                $studentTitle = trim((string) ($complaintRequest->subject ?: 'Student Request #'.$complaintRequest->id));
                                            @endphp
                                            <option
                                                value="{{ $complaintRequest->id }}"
                                                data-title="{{ $studentTitle }}"
                                                @selected((string) old('student_request_id', request('student_request_id')) === (string) $complaintRequest->id)
                                            >
                                                #{{ $complaintRequest->id }}
                                                @if ($studentName)
                                                    - {{ $studentName }}
                                                @endif
                                                @if ($complaintRequest->subject)
                                                    - {{ \Illuminate\Support\Str::limit($complaintRequest->subject, 80) }}
                                                @endif
                                                ({{ ucfirst($complaintRequest->status ?? 'pending') }})
                                            </option>
                                        @endforeach
                                    </select>
                                    <div class="form-text">Only student requests with type complaint are shown.</div>
                                    @error('student_request_id') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-12" data-source-section="hr">
                                    <label class="form-label" for="hr_request_id">Staff Request</label>
                                    <select id="hr_request_id" name="hr_request_id" class="form-select general-select border border-2 border-secondary-subtle">
                                        <option value="">Select staff request</option>
                                        @foreach ($hrRequests as $hrRequest)
                                            @php
                                                $creatorName = $hrRequest->creator?->full_name
                                                    ?: trim(($hrRequest->creator?->first_name ?? '').' '.($hrRequest->creator?->last_name ?? ''));
                                                $requestTypeName = $hrRequest->requestType?->name ?: 'Staff Request #'.$hrRequest->id;
                                            @endphp
                                            <option
                                                value="{{ $hrRequest->id }}"
                                                data-title="{{ $requestTypeName }}"
                                                @selected((string) old('hr_request_id', request('hr_request_id')) === (string) $hrRequest->id)
                                            >
                                                #{{ $hrRequest->id }} - {{ $requestTypeName }}
                                                @if ($creatorName)
                                                    - {{ $creatorName }}
                                                @endif
                                                @if ($hrRequest->department?->name)
                                                    - {{ $hrRequest->department->name }}
                                                @endif
                                                ({{ ucfirst($hrRequest->status ?? 'pending') }})
                                            </option>
                                        @endforeach
                                    </select>
                                    <div class="form-text">Staff requests are loaded from <code>hr_requests</code>.</div>
                                    @error('hr_request_id') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-12">
                                    <label class="form-label" for="title">Title <span class="text-danger">*</span></label>
                                    <input type="text" id="title" name="title" value="{{ old('title') }}" class="form-control border border-2 border-secondary-subtle" required>
                                    @error('title') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-12">
                                    <label class="form-label" for="description">Description <span class="text-danger">*</span></label>
                                    <textarea id="description" name="description" rows="5" class="form-control border border-2 border-secondary-subtle" required>{{ old('description') }}</textarea>
                                    @error('description') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label" for="escalated_to">Escalated To</label>
                                    <select id="escalated_to" name="escalated_to" class="form-select border border-2 border-secondary-subtle" data-selected="{{ old('escalated_to') }}">
                                        <option value="">Select receiver department first</option>
                                        @foreach ($staffMembers as $member)
                                            <option
                                                value="{{ $member->id }}"
                                                data-department-id="{{ $member->department_id }}"
                                                @selected((string) old('escalated_to') === (string) $member->id)
                                            >
                                                {{ $member->full_name ?: trim($member->first_name.' '.$member->last_name) ?: 'Staff #'.$member->id }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('escalated_to') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-12">
                                    <label class="form-label" for="note_content">Note</label>
                                    <textarea id="note_content" name="note_content" rows="3" class="form-control border border-2 border-secondary-subtle">{{ old('note_content') }}</textarea>
                                    @error('note_content') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-12 d-none" data-student-note-visibility>
                                    <label class="form-check-label d-flex align-items-center gap-2">
                                        <input
                                            type="checkbox"
                                            name="note_show_to_student"
                                            value="1"
                                            class="form-check-input"
                                            @checked(old('note_show_to_student'))
                                        >
                                        <span>Visible to student</span>
                                    </label>
                                    @error('note_show_to_student') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-12">
                                    <label class="form-label" for="attachments">Attachments</label>
                                    <input type="file" id="attachments" name="attachments[]" class="form-control border border-2 border-secondary-subtle" multiple>
                                    <div class="form-text">Accepted: JPG, PNG, PDF, DOC, DOCX, XLS, XLSX. Max 20MB each.</div>
                                    @error('attachments') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                                    @error('attachments.*') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                                </div>
                            </div>

                            <div class="d-flex flex-wrap gap-2 justify-content-end mt-4">
                                <a href="{{ route('escalation-requests.index') }}" class="asset-btn asset-btn--secondary">Cancel</a>
                                <button type="submit" class="asset-btn asset-btn--primary">Save Request</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const departmentSelect = document.getElementById('to_department_id');
            const staffSelect = document.getElementById('escalated_to');
            const titleInput = document.getElementById('title');
            const sourceTypeInputs = Array.from(document.querySelectorAll('input[name="source_type"]'));
            const studentRequestSelect = document.getElementById('student_request_id');
            const hrRequestSelect = document.getElementById('hr_request_id');
            const studentNoteVisibility = document.querySelector('[data-student-note-visibility]');
            const sourceSections = {
                student: document.querySelector('[data-source-section="student"]'),
                hr: document.querySelector('[data-source-section="hr"]'),
            };

            if (!departmentSelect || !staffSelect || !titleInput || sourceTypeInputs.length === 0 || !studentRequestSelect || !hrRequestSelect) {
                return;
            }

            const staffMembers = Array.from(staffSelect.querySelectorAll('option[data-department-id]')).map(function (option) {
                return {
                    value: option.value,
                    label: option.textContent.trim(),
                    departmentId: String(option.dataset.departmentId || '')
                };
            });
            const selectedStaff = staffSelect.dataset.selected || '';

            function refreshEscalatedToOptions() {
                const departmentId = String(departmentSelect.value || '');
                const currentValue = staffSelect.value || selectedStaff;

                staffSelect.innerHTML = '';

                const placeholder = document.createElement('option');
                placeholder.value = '';
                placeholder.textContent = departmentId ? 'Unassigned' : 'Select receiver department first';
                staffSelect.appendChild(placeholder);

                staffMembers.forEach(function (member) {
                    if (member.departmentId !== departmentId) {
                        return;
                    }

                    const option = document.createElement('option');
                    option.value = member.value;
                    option.textContent = member.label;
                    option.selected = option.value === currentValue;
                    staffSelect.appendChild(option);
                });

                if (!Array.from(staffSelect.options).some(function (option) {
                    return option.value === currentValue && option.value !== '';
                })) {
                    staffSelect.value = '';
                } else {
                    staffSelect.value = currentValue;
                }
            }

            function selectedSourceType() {
                const selectedInput = sourceTypeInputs.find(function (input) {
                    return input.checked;
                });

                return selectedInput ? selectedInput.value : 'student';
            }

            function findSelectedOption(selectElement) {
                if (!selectElement) {
                    return null;
                }

                if (selectElement.selectedOptions && selectElement.selectedOptions.length > 0) {
                    return selectElement.selectedOptions[0];
                }

                const currentValue = selectElement.value;

                return Array.from(selectElement.options).find(function (option) {
                    return option.value === currentValue;
                }) || null;
            }

            function selectedSourceTitle(sourceType) {
                const sourceSelect = sourceType === 'hr' ? hrRequestSelect : studentRequestSelect;
                const selectedOption = findSelectedOption(sourceSelect);
                const baseTitle = selectedOption ? (selectedOption.dataset.title || '').trim() : '';

                if (baseTitle !== '') {
                    return baseTitle;
                }

                return sourceType === 'hr' ? 'Staff Request' : 'Student Request';
            }

            function syncTitleValue(sourceType) {
                const computedTitle = selectedSourceTitle(sourceType);
                titleInput.value = computedTitle;
                titleInput.placeholder = computedTitle;
            }

            function syncSourceSections() {
                const sourceType = selectedSourceType();
                const isStudent = sourceType === 'student';

                if (sourceSections.student) {
                    sourceSections.student.classList.toggle('d-none', !isStudent);
                }

                if (sourceSections.hr) {
                    sourceSections.hr.classList.toggle('d-none', isStudent);
                }

                if (studentNoteVisibility) {
                    studentNoteVisibility.classList.toggle('d-none', !isStudent);
                }

                studentRequestSelect.disabled = !isStudent;
                hrRequestSelect.disabled = isStudent;
                syncTitleValue(sourceType);
            }

            departmentSelect.addEventListener('change', refreshEscalatedToOptions);
            if (window.jQuery) {
                jQuery(departmentSelect).on('select2:select select2:clear', refreshEscalatedToOptions);
            }
            sourceTypeInputs.forEach(function (input) {
                input.addEventListener('change', syncSourceSections);
            });
            studentRequestSelect.addEventListener('change', syncSourceSections);
            hrRequestSelect.addEventListener('change', syncSourceSections);

            if (window.jQuery) {
                jQuery(studentRequestSelect).on('select2:select select2:clear', syncSourceSections);
                jQuery(hrRequestSelect).on('select2:select select2:clear', syncSourceSections);
            }

            refreshEscalatedToOptions();
            syncSourceSections();
            setTimeout(syncSourceSections, 0);
        });
    </script>
@endpush