@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="Edit Escalation Request"
                    description="Update request details, assignment, status, or add more attachments."
                />

                <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">Changes are tracked against your staff profile.</p>
                        </div>
                    </div>

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

                            <div class="row g-3">
                                @php
                                    $selectedSourceType = old('source_type', $escalationRequest->hr_request_id ? 'hr' : 'student');
                                @endphp
                                <div class="col-md-6">
                                    <label class="form-label" for="from_department_id">From Department</label>
                                    <select id="from_department_id" name="from_department_id" class="form-select general-select border border-2 border-secondary-subtle">
                                        @foreach ($departments as $department)
                                            <option value="{{ $department->id }}" @selected((string) old('from_department_id', $escalationRequest->from_department_id) === (string) $department->id)>
                                                {{ $department->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('from_department_id') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                                </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>
                                        @foreach ($departments as $department)
                                            <option value="{{ $department->id }}" @selected((string) old('to_department_id', $escalationRequest->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">
                                    <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">
                                    <div class="d-flex flex-wrap justify-content-between gap-2 align-items-center">
                                        <label class="form-label mb-0" for="student_request_id">Student Complaint Request</label>
                                        @if ($escalationRequest->student_request_id)
                                            <a
                                                href="{{ $academicStudentRequestsUrl.'/'.$escalationRequest->student_request_id }}"
                                                target="_blank"
                                                rel="noopener noreferrer"
                                                class="small"
                                            >
                                                Open linked student request
                                            </a>
                                        @endif
                                    </div>
                                    @if ($escalationRequest->studentRequest)
                                        @php
                                            $selectedStudentName = $escalationRequest->studentRequest->student?->full_name
                                                ?: trim(($escalationRequest->studentRequest->student?->first_name ?? '').' '.($escalationRequest->studentRequest->student?->last_name ?? ''));
                                        @endphp
                                        <div class="small mb-2">
                                            Current:
                                            <a
                                                href="{{ $academicStudentRequestsUrl.'/'.$escalationRequest->studentRequest->id }}"
                                                target="_blank"
                                                rel="noopener noreferrer"
                                            >
                                                #{{ $escalationRequest->studentRequest->id }}
                                            </a>
                                            @if ($selectedStudentName)
                                                - {{ $selectedStudentName }}
                                            @endif
                                        </div>
                                    @endif
                                    <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', $escalationRequest->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">
                                    <div class="d-flex flex-wrap justify-content-between gap-2 align-items-center">
                                        <label class="form-label mb-0" for="hr_request_id">Staff Request</label>
                                        @if ($escalationRequest->hr_request_id)
                                            <a
                                                href="{{ $hrRequestsUrl.'/'.$escalationRequest->hr_request_id }}"
                                                target="_blank"
                                                rel="noopener noreferrer"
                                                class="small"
                                            >
                                                Open linked staff request
                                            </a>
                                        @endif
                                    </div>
                                    @if ($escalationRequest->hrRequest)
                                        @php
                                            $selectedHrCreatorName = $escalationRequest->hrRequest->creator?->full_name
                                                ?: trim(($escalationRequest->hrRequest->creator?->first_name ?? '').' '.($escalationRequest->hrRequest->creator?->last_name ?? ''));
                                            $selectedHrRequestType = $escalationRequest->hrRequest->requestType?->name ?: 'Staff Request #'.$escalationRequest->hrRequest->id;
                                        @endphp
                                        <div class="small mb-2">
                                            Current:
                                            <a
                                                href="{{ $hrRequestsUrl.'/'.$escalationRequest->hrRequest->id }}"
                                                target="_blank"
                                                rel="noopener noreferrer"
                                            >
                                                #{{ $escalationRequest->hrRequest->id }}
                                            </a>
                                            - {{ $selectedHrRequestType }}
                                            @if ($selectedHrCreatorName)
                                                - {{ $selectedHrCreatorName }}
                                            @endif
                                        </div>
                                    @endif
                                    <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', $escalationRequest->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', $escalationRequest->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', $escalationRequest->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="assigned_to">Assigned To</label>
                                    <select id="assigned_to" name="assigned_to" class="form-select border border-2 border-secondary-subtle">
                                        <option value="">Unassigned</option>
                                        @foreach ($staffMembers as $member)
                                            <option value="{{ $member->id }}" @selected((string) old('assigned_to', $escalationRequest->assigned_to) === (string) $member->id)>
                                                {{ $member->full_name ?: trim($member->first_name.' '.$member->last_name) ?: 'Staff #'.$member->id }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('assigned_to') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label" for="status">Status</label>
                                    <select id="status" name="status" class="form-select general-select border border-2 border-secondary-subtle">
                                        @foreach ($statuses as $value => $label)
                                            <option value="{{ $value }}" @selected(old('status', $escalationRequest->status?->value) === $value)>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                    @error('status') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-12">
                                    <label class="form-label" for="attachments">Add 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 class="col-12">
                                    <div class="ui-muted small mb-2">Current Attachments</div>
                                    @forelse ($escalationRequest->attachments as $attachment)
                                        <div class="d-flex flex-wrap justify-content-between gap-2 border-bottom py-2">
                                            <div>
                                                <a href="{{ asset('storage/'.$attachment->file_path) }}" target="_blank" class="fw-semibold">
                                                    {{ $attachment->file_name }}
                                                </a>
                                                <div class="ui-muted small">
                                                    {{ $attachment->file_type ?: 'File' }}
                                                    @if ($attachment->file_size)
                                                        - {{ number_format($attachment->file_size / 1024, 1) }} KB
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="ui-muted small">
                                                {{ $attachment->uploadedBy?->full_name ?: 'N/A' }}
                                                {{ $attachment->created_at?->format('Y-m-d H:i') }}
                                            </div>
                                        </div>
                                    @empty
                                        <div class="text-muted">No attachments uploaded.</div>
                                    @endforelse
                                </div>
                            </div>

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

                        <div class="border-top mt-4 pt-4">
                            <h6 class="mb-3 ui-title">Notes</h6>

                            @if ($canAddNote)
                                <form action="{{ route('escalation-requests.notes', $escalationRequest) }}" method="POST" class="mb-4">
                                    @csrf
                                    <label class="form-label" for="content">Add Note</label>
                                    <textarea id="content" name="content" rows="3" class="form-control border border-2 border-secondary-subtle" required>{{ old('content') }}</textarea>
                                    @error('content') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                                    @if ($escalationRequest->student_request_id)
                                        <div class="mt-3">
                                            <label class="form-check-label d-flex align-items-center gap-2">
                                                <input
                                                    type="checkbox"
                                                    name="show_to_student"
                                                    value="1"
                                                    class="form-check-input"
                                                    @checked(old('show_to_student'))
                                                >
                                                <span>Visible to student</span>
                                            </label>
                                            @error('show_to_student') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                                        </div>
                                    @endif
                                    <div class="d-flex justify-content-end mt-3">
                                        <button type="submit" class="asset-btn asset-btn--primary">Add Note</button>
                                    </div>
                                </form>
                            @endif

                            @forelse ($escalationRequest->notes as $note)
                                <div class="border-bottom py-3">
                                    <div class="d-flex flex-wrap justify-content-between gap-2">
                                        <div class="d-flex flex-wrap gap-2 align-items-center">
                                            <div class="fw-semibold">{{ $note->staff?->full_name ?: 'N/A' }}</div>
                                            @if ($note->show_to_student)
                                                <span class="badge bg-primary">Visible to student</span>
                                            @endif
                                        </div>
                                        <div class="ui-muted small">{{ $note->created_at?->format('Y-m-d H:i') }}</div>
                                    </div>
                                    <div class="mt-2">{{ $note->content }}</div>
                                </div>
                            @empty
                                <div class="text-muted">No notes yet.</div>
                            @endforelse
                        </div>

                        <form action="{{ route('escalation-requests.destroy', $escalationRequest) }}" method="POST" class="mt-3">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="asset-btn asset-btn--secondary" onclick="return confirm('Delete this escalation request?')">Delete Request</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            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 sourceSections = {
                student: document.querySelector('[data-source-section="student"]'),
                hr: document.querySelector('[data-source-section="hr"]'),
            };

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

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

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

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

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