@php
    $isEdit = $isEdit ?? false;
    $selectedDepartment = old('department_id', $issue->department_id);
    $selectedResponder = old('issue_responder_id', $issue->issue_responder_id);
    $selectedAssignee = old('assigned_to_id', $issue->assigned_to_id);
@endphp

<div class="row g-4">
    <div class="col-lg-8">
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">Issue Details</h5>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">Issue Date <span class="text-danger">*</span></label>
                        <input type="text" name="issue_date"
                               class="form-control js-date-picker"
                               value="{{ old('issue_date', optional($issue->issue_date)->format('Y-m-d')) }}"
                               required>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Status <span class="text-danger">*</span></label>
                        @php
                            $currentStatus = old('status', $issue->status);
                            $isLocked = !($isEdit ?? false);
                        @endphp
                        <select name="status" class="form-select" @if($isLocked) disabled @else required @endif>
                            @foreach($statuses as $value => $label)
                                <option value="{{ $value }}" @selected($currentStatus === $value)>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                        @if($isLocked)
                            <input type="hidden" name="status" value="{{ \App\Models\Issue::STATUS_NOT_STARTED }}">
                        @endif
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Issue Type <span class="text-danger">*</span></label>
                        <select name="issue_type_id" class="form-select js-issue-type" required>
                            <option value="">Select type</option>
                            @foreach($issueTypes as $type)
                                <option value="{{ $type->id }}" data-min="{{ $type->min_resolution_hours }}" data-max="{{ $type->max_resolution_hours }}"
                                    @selected(old('issue_type_id', $issue->issue_type_id) == $type->id)>
                                    {{ $type->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Issue Responder <span class="text-danger">*</span></label>
                        <select name="issue_responder_id" class="form-select js-employee-select js-responder-select" data-role="responder" required>
                            <option value="">Select responder</option>
                            @foreach($departments as $department)
                                @foreach($department->employees as $employee)
                                    <option value="{{ $employee->id }}" data-department="{{ $department->id }}"
                                        @selected($selectedResponder == $employee->id)>
                                        {{ $employee->name }} — {{ $department->name }}
                                    </option>
                                @endforeach
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Department</label>
                        <select name="department_id" class="form-select js-department-select"
                                @if(empty($selectedResponder)) disabled @endif>
                            <option value="">Select department</option>
                            @foreach($departments as $department)
                                <option value="{{ $department->id }}" @selected($selectedDepartment == $department->id)>
                                    {{ $department->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Assigned To</label>
                        <select name="assigned_to_id" class="form-select js-employee-select" data-role="assigned"
                                @if(empty($selectedDepartment)) disabled @endif>
                            <option value="">Select assignee</option>
                            @foreach($departments as $department)
                                @foreach($department->employees as $employee)
                                    <option value="{{ $employee->id }}" data-department="{{ $department->id }}"
                                        @selected($selectedAssignee == $employee->id)>
                                        {{ $employee->name }} — {{ $department->name }}
                                    </option>
                                @endforeach
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Issue Description <span class="text-danger">*</span></label>
                        <textarea name="description" rows="1" class="form-control js-autosize" required
                                  placeholder="Capture the issue details and context (expand as you type)">{{ old('description', $issue->description) }}</textarea>
                    </div>

                    <div class="col-12">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Photos</label>
                                <input type="file" name="photos[]" class="form-control js-photos-input" accept="image/*" multiple>
                                <small class="text-muted d-block mt-1">You may attach up to 10 images.</small>
                                <div class="d-flex flex-wrap gap-2 mt-2 js-photos-preview"></div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Videos</label>
                                <input type="file" name="videos[]" class="form-control js-videos-input" accept="video/*" multiple>
                                <small class="text-muted d-block mt-1">You may attach up to 2 videos.</small>
                            </div>
                        </div>
                    </div>


                    <div class="col-12">
                        <label class="form-label">Internal Notes</label>
                        <textarea name="internal_notes" rows="1" class="form-control js-autosize"
                                  placeholder="Private notes for support team only (expand as you type)">{{ old('internal_notes', $issue->internal_notes) }}</textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">School Information</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">Existing School</label>
                    <select name="school_id" class="form-select js-select2" data-placeholder="Select school">
                        <option value="">Select school</option>
                        @foreach($schools as $school)
                            <option value="{{ $school->id }}"
                                    data-number="{{ $school->contact_number }}"
                                    data-email="{{ $school->contact_email }}"
                                    @selected(old('school_id', $issue->school_id) == $school->id)>
                                {{ $school->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                @php $hasSelectedSchool = (bool) old('school_id', $issue->school_id); @endphp
                <div class="mb-3 js-school-contact-container @if(! $hasSelectedSchool) d-none @endif">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label mb-1">School Contact Number</label>
                            <div class="form-control-plaintext js-school-number">{{ optional($schools->firstWhere('id', old('school_id', $issue->school_id)))->contact_number ?? '' }}</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label mb-1">School Email</label>
                            <div class="form-control-plaintext js-school-email">{{ optional($schools->firstWhere('id', old('school_id', $issue->school_id)))->contact_email ?? '' }}</div>
                        </div>
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Approached By <span class="text-danger">*</span></label>
                    <input type="text" name="approached_by"
                           class="form-control"
                           value="{{ old('approached_by', $issue->approached_by) }}"
                           placeholder="Client contact name"
                           required>
                </div>
            </div>
        </div>
        <div class="d-grid gap-2">
            <button type="submit" class="btn btn-primary btn-lg">
                {{ $isEdit ? 'Update Issue' : 'Save Issue' }}
            </button>
            <a href="{{ route('issues.index') }}" class="btn btn-outline-secondary">Cancel</a>
        </div>
    </div>
</div>

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const datePickerInputs = document.querySelectorAll('.js-date-picker');
            if (typeof flatpickr !== 'undefined') {
                datePickerInputs.forEach((input) => flatpickr(input, {
                    dateFormat: 'Y-m-d'
                }));
            }

            const select2Elements = $('.js-select2');
            if (select2Elements.length && typeof select2Elements.select2 === 'function') {
                select2Elements.select2({
                    allowClear: true,
                    placeholder: select2Elements.data('placeholder') || 'Select'
                });
            }

            const departmentSelect = document.querySelector('.js-department-select');
            const employeeSelects = document.querySelectorAll('.js-employee-select');
            const responderSelect = document.querySelector('.js-responder-select');

            const filterEmployees = () => {
                const departmentId = departmentSelect.value;
                employeeSelects.forEach(select => {
                    const currentValue = select.value;
                    select.querySelectorAll('option').forEach(option => {
                        const optionDepartment = option.getAttribute('data-department');
                        if (!optionDepartment) {
                            return;
                        }
                        if (!departmentId || optionDepartment === departmentId) {
                            option.hidden = false;
                        } else {
                            option.hidden = true;
                            if (currentValue === option.value) {
                                select.value = '';
                            }
                        }
                    });
                    if (select.dataset.role === 'assigned') {
                        select.disabled = !departmentId;
                    }
                });
            };

            if (departmentSelect) {
                departmentSelect.addEventListener('change', filterEmployees);
                filterEmployees();
            }

            const syncDepartmentWithResponder = () => {
                if (!responderSelect || !departmentSelect) return;
                const opt = responderSelect.options[responderSelect.selectedIndex];
                const deptId = opt ? opt.getAttribute('data-department') : '';
                if (opt && deptId) {
                    departmentSelect.value = deptId;
                    departmentSelect.disabled = false;
                    filterEmployees();
                } else {
                    departmentSelect.value = '';
                    departmentSelect.disabled = true;
                    filterEmployees();
                }
            };
            if (responderSelect) {
                responderSelect.addEventListener('change', syncDepartmentWithResponder);
                syncDepartmentWithResponder();
            }

            const issueTypeSelect = document.querySelector('.js-issue-type');

            const schoolSelect = document.querySelector('select[name="school_id"]');
            const schoolNumberEl = document.querySelector('.js-school-number');
            const schoolEmailEl = document.querySelector('.js-school-email');
            const schoolsMeta = @json($schools->mapWithKeys(fn($s) => [
                (string)$s->id => [
                    'number' => $s->contact_number,
                    'email' => $s->contact_email
                ]
            ]));

            // SLA dates are handled internally by the server based on issue date and issue type.

            const updateSchoolContact = () => {
                if (!schoolSelect || !schoolNumberEl || !schoolEmailEl) return;
                const container = document.querySelector('.js-school-contact-container');
                const id = schoolSelect.value;
                if (container) {
                    container.classList.toggle('d-none', !id);
                }
                if (!id) {
                    schoolNumberEl.textContent = '';
                    schoolEmailEl.textContent = '';
                    return;
                }
                const meta = schoolsMeta[id] || {};
                schoolNumberEl.textContent = meta.number || '';
                schoolEmailEl.textContent = meta.email || '';
            };
            if (schoolSelect) {
                schoolSelect.addEventListener('change', updateSchoolContact);
                // If the select is enhanced by select2, also listen to its custom events
                if (typeof $ !== 'undefined' && typeof $(schoolSelect).on === 'function') {
                    $(schoolSelect).on('select2:select select2:clear', updateSchoolContact);
                }
                updateSchoolContact();
            }

            const autosize = (el) => {
                el.style.height = 'auto';
                el.style.overflow = 'hidden';
                el.style.height = (el.scrollHeight) + 'px';
            };
            document.querySelectorAll('.js-autosize').forEach((ta) => {
                autosize(ta);
                ta.addEventListener('input', () => autosize(ta));
            });

            // Client-side constraints for attachments
            const photosInput = document.querySelector('.js-photos-input');
            const videosInput = document.querySelector('.js-videos-input');
            const photosPreview = document.querySelector('.js-photos-preview');

            const enforceCounts = (inputEl, maxAllowed, label) => {
                if (!inputEl) return true;
                const files = inputEl.files || [];
                if (files.length > maxAllowed) {
                    alert(`${label} limit is ${maxAllowed}. You selected ${files.length}. Please reduce your selection.`);
                    inputEl.value = '';
                    return false;
                }
                return true;
            };

            const formEl = document.querySelector('form[action*="issues"]');
            if (formEl) {
                formEl.addEventListener('submit', (e) => {
                    const okPhotos = enforceCounts(photosInput, 10, 'Photos');
                    const okVideos = enforceCounts(videosInput, 2, 'Videos');
                    if (!okPhotos || !okVideos) {
                        e.preventDefault();
                    }
                });
            }

            // Thumbnails with remove support for images
            const rebuildFileList = (inputEl, filesArr) => {
                const dt = new DataTransfer();
                filesArr.forEach(f => dt.items.add(f));
                inputEl.files = dt.files;
            };

            const renderPhotosPreview = () => {
                if (!photosInput || !photosPreview) return;
                photosPreview.innerHTML = '';
                const files = Array.from(photosInput.files || []);
                files.forEach((file, idx) => {
                    if (!file.type.startsWith('image/')) return;
                    const url = URL.createObjectURL(file);
                    const wrapper = document.createElement('div');
                    wrapper.className = 'position-relative border rounded';
                    wrapper.style.width = '84px';
                    wrapper.style.height = '84px';
                    wrapper.style.overflow = 'hidden';

                    const img = document.createElement('img');
                    img.src = url;
                    img.alt = file.name;
                    img.style.width = '100%';
                    img.style.height = '100%';
                    img.style.objectFit = 'cover';

                    const removeBtn = document.createElement('button');
                    removeBtn.type = 'button';
                    removeBtn.className = 'btn btn-sm btn-danger position-absolute';
                    removeBtn.style.top = '4px';
                    removeBtn.style.right = '4px';
                    removeBtn.innerText = '×';

                    removeBtn.addEventListener('click', () => {
                        const current = Array.from(photosInput.files || []);
                        current.splice(idx, 1);
                        rebuildFileList(photosInput, current);
                        renderPhotosPreview();
                        URL.revokeObjectURL(url);
                    });

                    wrapper.appendChild(img);
                    wrapper.appendChild(removeBtn);
                    photosPreview.appendChild(wrapper);
                });
            };

            if (photosInput) {
                photosInput.addEventListener('change', renderPhotosPreview);
            }
        });
    </script>
@endpush