@extends('dashboard.layouts.app')

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

    @php
        $authStaffId = Auth::user()?->staff?->id;
        $isHolidayAutomaticRequest = optional($request->type)->name === 'Holiday Automatic Request';
        $canEditRequestStatus = $authStaffId == $request->request_for;
        // $canEditRequestStatus = auth()
        //     ->user()
        //     ->hasAnyRole(['Super admin', 'HR']);

        $canApproveHolidayRows = $isHolidayAutomaticRequest && $authStaffId == $request->created_by;
        $showGenericStatusSelect =
            $canEditRequestStatus &&
            !$isHolidayAutomaticRequest &&
            !in_array($request->status, ['approved', 'rejected']);

        $statusLabels = [
            'pending' => 'Pending',
            'approved' => 'Approved',
            'rejected' => 'Rejected',
        ];

        $statusClass = str_replace('-', '_', $request->status ?? 'pending');
        $currentStatusLabel = $statusLabels[$request->status] ?? ucfirst((string) $request->status);
        $currentReason = $request->reject_reason ?? ($request->notes ?? '');
        $normalizedRequestType = strtolower(trim((string) optional($request->type)->name));
        $isLeaveLikeRequest = str_contains($normalizedRequestType, 'leave') || str_contains($normalizedRequestType, 'vacation');
        $leaveReference = $request->reference instanceof \App\Models\HrRequestLeave ? $request->reference : null;
    @endphp

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

                <x-page-title title="Request Details"
                    description="Review request information, update the status when applicable, manage replies, and inspect attached files or request-specific details.">
                    <a href="{{ route('requests.index') }}" class="asset-btn asset-btn--secondary">
                        <i class="ri-arrow-left-line"></i>
                        Back
                    </a>
                </x-page-title>

                {{-- Status Card --}}
                <div class="ui-card request-status-card">
                    <div class="request-status-panel">
                        <div class="request-status-panel__left">
                            <div class="request-status-panel__icon">
                                <i class="ri-checkbox-circle-line"></i>
                            </div>

                            <div>
                                <div class="request-status-panel__label">Current Status</div>
                                <div class="request-status-panel__value">
                                    <span id="current-status-pill" class="status-pill status-pill--{{ $statusClass }}">
                                        {{ $currentStatusLabel }}
                                    </span>
                                </div>
                            </div>
                        </div>

                        @if ($showGenericStatusSelect)
                            <div class="request-status-panel__right">
                                {{-- <label class="asset-label mb-1">Decision</label> --}}

                                <div class="request-status-actions" data-request-id="{{ $request->id }}"
                                    data-current-status="{{ $request->status }}" data-reason="{{ $currentReason }}">

                                    <button type="button" id="approve-request-btn" class="asset-btn asset-btn--primary">
                                        <i class="ri-check-line"></i>
                                        Approve
                                    </button>

                                    <button type="button" id="reject-request-btn" class="asset-btn asset-btn--danger">
                                        <i class="ri-close-circle-line"></i>
                                        Reject
                                    </button>
                                </div>
                            </div>
                        @endif
                    </div>

                    @if ($request->status == 'rejected' && $currentReason)
                        <div id="current-rejection-note" class="request-rejection-note mt-3">
                            <strong>Rejection Reason:</strong> {{ $currentReason }}
                        </div>
                    @else
                        <div id="current-rejection-note" class="request-rejection-note mt-3" style="display:none;"></div>
                    @endif
                </div>

                @if ($showGenericStatusSelect)
                    <div id="rejection-reason-wrapper" class="ui-card request-rejection-card" style="display: none;">
                        <div class="form-section mb-0">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1 text-danger">Rejection Reason</h5>
                                <p class="form-section__sub mb-0">
                                    Add a clear reason before saving the request as rejected.
                                </p>
                            </div>

                            <label for="rejection-reason" class="asset-label">Reason</label>
                            <input type="text" id="rejection-reason" class="asset-input" value="{{ $currentReason }}"
                                placeholder="Enter reason for rejection...">

                            <div class="asset-actions">
                                <button type="button" id="save-rejection-reason" class="asset-btn asset-btn--danger">
                                    <i class="ri-close-circle-line"></i>
                                    Save Rejection
                                </button>
                                <button type="button" id="cancel-rejection-reason" class="asset-btn asset-btn--secondary">
                                    Cancel
                                </button>
                            </div>
                        </div>
                    </div>
                @endif

                @if ($canManageRecruitmentAssignee)
                    <div class="ui-card">
                        <div class="form-section mb-0">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Recruitment Task Assignment</h5>
                                <p class="form-section__sub mb-0">
                                    This recruitment request lands with the HR manager first. You can assign it to any
                                    active HR employee and change it later when needed.
                                </p>
                            </div>

                            <form action="{{ route('requests.assignRecruitmentOwner', $request->id) }}" method="POST">
                                @csrf

                                <div class="details-grid">
                                    <div class="details-col-6">
                                        <div class="details-item">
                                            <div class="details-item__label">Current Assignee</div>
                                            <div class="details-item__value">
                                                {{ trim(($request->requestFor->first_name ?? '') . ' ' . ($request->requestFor->last_name ?? '')) ?: 'N/A' }}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="details-col-6">
                                        <label for="recruitment_request_for" class="asset-label">Assign To</label>
                                        <select name="request_for" id="recruitment_request_for" class="asset-select select2"
                                            required>
                                            @foreach ($recruitmentAssignableStaff as $staffOption)
                                                <option value="{{ $staffOption->id }}"
                                                    {{ (string) old('request_for', $request->request_for) === (string) $staffOption->id ? 'selected' : '' }}>
                                                    {{ $staffOption->full_name ?: trim(($staffOption->first_name ?? '') . ' ' . ($staffOption->last_name ?? '')) }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="asset-actions">
                                    <button type="submit" class="asset-btn asset-btn--primary">
                                        Save Assignment
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                @endif

                @if (optional($request->type)->name == 'retest' && $authStaffId == $request->request_for)
                    <div class="retest-alert">
                        <div class="retest-alert__left">
                            <div class="retest-alert__icon">
                                <i class="fas fa-calendar-check"></i>
                            </div>
                            <div>
                                <h6 class="mb-0">Retest Scheduling</h6>
                                <p class="mb-0">This student needs a new demo scheduled.</p>
                            </div>
                        </div>

                        <a href="{{ config('app.Retention_URL') }}schedule-demo?student_id={{ $request->student_id }}"
                            target="_blank" class="asset-btn asset-btn--primary py-2">
                            <i class="fas fa-external-link-alt me-1"></i>
                            Schedule Demo
                        </a>
                    </div>
                @endif

                {{-- Request Information --}}
                <div class="ui-card">
                    <div class="form-section mb-0">
                        <div class="form-section__head">
                            <h5 class="form-section__title mb-1">Request Information</h5>
                            <p class="form-section__sub mb-0">
                                Main request details, ownership, department data, related student info, and submission
                                metadata.
                            </p>
                        </div>

                        <div class="details-grid">
                            <div class="details-col-6">
                                <div class="details-item">
                                    <div class="details-item__label">Requisition Type</div>
                                    <div class="details-item__value">{{ $request->type->name ?? 'N/A' }}</div>
                                </div>
                            </div>

                            @if ($isLeaveLikeRequest && $leaveReference)
                                <div class="details-col-6">
                                    <div class="details-item">
                                        <div class="details-item__label">From Date</div>
                                        <div class="details-item__value">{{ $leaveReference->leave_from ?: 'N/A' }}</div>
                                    </div>
                                </div>

                                <div class="details-col-6">
                                    <div class="details-item">
                                        <div class="details-item__label">To Date</div>
                                        <div class="details-item__value">{{ $leaveReference->leave_to ?: 'N/A' }}</div>
                                    </div>
                                </div>
                            @endif

                            <div class="details-col-6">
                                <div class="details-item">
                                    <div class="details-item__label">Priority</div>
                                    <div class="details-item__value text-capitalize">{{ $request->priority ?? 'N/A' }}
                                    </div>
                                </div>
                            </div>

                            <div class="details-col-6">
                                <div class="details-item">
                                    <div class="details-item__label">Deadline</div>
                                    <div class="details-item__value">{{ $request->deadline ?: 'N/A' }}</div>
                                </div>
                            </div>

                            <div class="details-col-6">
                                <div class="details-item">
                                    <div class="details-item__label">Task Owner</div>
                                    <div class="details-item__value">
                                        {{ $request->creator->first_name ?? '' }} {{ $request->creator->last_name ?? '' }}
                                    </div>
                                </div>
                            </div>

                            <div class="details-col-6">
                                <div class="details-item">
                                    <div class="details-item__label">Task For</div>
                                    <div class="details-item__value">
                                        {{ $request->requestFor->first_name ?? '' }}
                                        {{ $request->requestFor->last_name ?? '' }}
                                    </div>
                                </div>
                            </div>

                            <div class="details-col-6">
                                <div class="details-item">
                                    <div class="details-item__label">Department</div>
                                    <div class="details-item__value">{{ $request->department->name ?? 'N/A' }}</div>
                                </div>
                            </div>

                            @if ($request->student_id != null)
                                @php
                                    $student = \DB::table('sm_students')
                                        ->where('id', $request->student_id)
                                        ->select('id', 'student_code', 'full_name', 'first_name', 'last_name')
                                        ->first();
                                @endphp

                                <div class="details-col-6">
                                    <div class="details-item">
                                        <div class="details-item__label">Student Name</div>
                                        <div class="details-item__value">{{ $student->first_name ?? '' }}
                                            {{ $student->last_name ?? '' }}</div>
                                    </div>
                                </div>

                                <div class="details-col-6">
                                    <div class="details-item">
                                        <div class="details-item__label">Student Code</div>
                                        <div class="details-item__value">{{ $student->student_code ?? 'N/A' }}</div>
                                    </div>
                                </div>
                            @endif

                            @if ($request->level_id != null)
                                @php
                                    $level = \DB::table('track_levels')->where('id', $request->level_id)->first();
                                @endphp

                                <div class="details-col-6">
                                    <div class="details-item">
                                        <div class="details-item__label">Level</div>
                                        <div class="details-item__value">{{ $level->name_en ?? 'N/A' }}</div>
                                    </div>
                                </div>
                            @endif

                            <div class="details-col-6">
                                <div class="details-item">
                                    <div class="details-item__label">Date Of Submission</div>
                                    <div class="details-item__value">{{ $request->created_at }}</div>
                                </div>
                            </div>

                            <div class="details-col-12">
                                <div class="details-item">
                                    <div class="details-item__label">Requisition Details</div>
                                    <div
                                        class="details-item__value {{ $request->details ? '' : 'details-item__value--muted' }}">
                                        {{ $request->details ?? 'No details provided' }}
                                    </div>
                                </div>
                            </div>

                            <div class="details-col-12">
                                <div class="details-item">
                                    <div class="details-item__label">Attachments</div>

                                    @if ($request->attachments && count($request->attachments) > 0)
                                        <div class="attachment-grid">
                                            @foreach ($request->attachments as $file)
                                                @php
                                                    $extension = strtolower(
                                                        pathinfo($file->file_path, PATHINFO_EXTENSION),
                                                    );
                                                    $imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
                                                @endphp

                                                @if (in_array($extension, $imageExtensions))
                                                    <a href="{{ asset($file->file_path) }}" target="_blank"
                                                        class="attachment-card">
                                                        <img src="{{ asset($file->file_path) }}"
                                                            alt="{{ $file->original_name }}"
                                                            class="attachment-card__preview">
                                                    </a>
                                                @else
                                                    <a href="{{ asset($file->file_path) }}" target="_blank"
                                                        class="attachment-card attachment-card--file">
                                                        <div class="attachment-card__file">
                                                            <i class="fas fa-paperclip"></i>
                                                            <span>{{ $file->original_name }}</span>
                                                        </div>
                                                    </a>
                                                @endif
                                            @endforeach
                                        </div>
                                    @else
                                        <div class="details-item__value details-item__value--muted">No attachment provided.
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                @if ($request->requestRecruitments->isNotEmpty())
                    <div class="ui-card">
                        <div class="form-section mb-0">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Recruitment Details</h5>
                                <p class="form-section__sub mb-0">
                                    Position requirements, vacancy data, expected start date, and hiring-related
                                    configuration.
                                </p>
                            </div>

                            <div class="details-grid">
                                <div class="details-col-6">
                                    <div class="details-item">
                                        <div class="details-item__label">Job Title</div>
                                        <div class="details-item__value">
                                            {{ old('job_title_id', optional($request->requestRecruitments->first())->jobTitles->name ?? '') }}
                                        </div>
                                    </div>
                                </div>

                                <div class="details-col-6">
                                    <div class="details-item">
                                        <div class="details-item__label">Number of Vacancies</div>
                                        <div class="details-item__value">
                                            {{ old('number_of_vacancies', optional($request->requestRecruitments->first())->number_of_vacancies) }}
                                        </div>
                                    </div>
                                </div>

                                <div class="details-col-6">
                                    <div class="details-item">
                                        <div class="details-item__label">Expected Start Date</div>
                                        <div class="details-item__value">
                                            {{ old('expected_start_date', optional($request->requestRecruitments->first())->expected_start_date) }}
                                        </div>
                                    </div>
                                </div>

                                <div class="details-col-6">
                                    <div class="details-item">
                                        <div class="details-item__label">Role Description</div>
                                        <div class="details-item__value">
                                            {{ old('role_description', optional($request->requestRecruitments->first())->role_description) }}
                                        </div>
                                    </div>
                                </div>

                                <div class="details-col-12">
                                    <div class="details-item">
                                        <div class="details-item__label">Required Qualifications & Skills</div>
                                        <div class="details-item__value">
                                            {{ old('required_qualifications_skills', optional($request->requestRecruitments->first())->required_qualifications_skills) }}
                                        </div>
                                    </div>
                                </div>

                                <div class="details-col-12">
                                    <div class="details-item">
                                        <div class="details-item__label">Justification / Reason</div>
                                        <div class="details-item__value">
                                            {{ old('justification_reason', optional($request->requestRecruitments->first())->justification_reason) }}
                                        </div>
                                    </div>
                                </div>

                                @if (optional($request->requestRecruitments->first())->category)
                                    <div class="details-col-6">
                                        <div class="details-item">
                                            <div class="details-item__label">Category</div>
                                            <div class="details-item__value">
                                                {{ $request->requestRecruitments->first()->category->name_en }}
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                @php
                                    $trackTypeIds = optional($request->requestRecruitments->first())->track_type_ids;
                                    $trackTypes = $trackTypeIds
                                        ? \App\Models\TrackType::whereIn('id', $trackTypeIds)
                                            ->pluck('name')
                                            ->implode(', ')
                                        : null;

                                    $trackIds = optional($request->requestRecruitments->first())->track_ids;
                                    $tracks = $trackIds
                                        ? \App\Models\Track::whereIn('id', $trackIds)->pluck('name_en')->implode(', ')
                                        : null;

                                    $shiftTimeIds = optional($request->requestRecruitments->first())->shift_time_ids;
                                    $shifts = $shiftTimeIds
                                        ? \App\Models\ShiftEmp::whereIn('id', $shiftTimeIds)
                                            ->pluck('name')
                                            ->implode(', ')
                                        : null;
                                @endphp

                                @if ($trackTypes)
                                    <div class="details-col-6">
                                        <div class="details-item">
                                            <div class="details-item__label">Track Types</div>
                                            <div class="details-item__value">{{ $trackTypes }}</div>
                                        </div>
                                    </div>
                                @endif

                                @if ($tracks)
                                    <div class="details-col-6">
                                        <div class="details-item">
                                            <div class="details-item__label">Programs</div>
                                            <div class="details-item__value">{{ $tracks }}</div>
                                        </div>
                                    </div>
                                @endif

                                @if ($shifts)
                                    <div class="details-col-6">
                                        <div class="details-item">
                                            <div class="details-item__label">Proposed Shifts</div>
                                            <div class="details-item__value">{{ $shifts }}</div>
                                        </div>
                                    </div>
                                @endif

                                @if (optional($request->requestRecruitments->first())->shift_time)
                                    <div class="details-col-6">
                                        <div class="details-item">
                                            <div class="details-item__label">Shift Time</div>
                                            <div class="details-item__value text-capitalize">
                                                {{ $request->requestRecruitments->first()->shift_time }}
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endif

                @if (isset($departmentStaff) && $request->type->name == 'Holiday Automatic Request')
                    <div class="ui-card">
                        <div class="form-section mb-0">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Holiday Planning</h5>
                                <p class="form-section__sub mb-0">
                                    Assign staff to holiday or working lists and save the plan for this request before HR
                                    approval.
                                </p>
                            </div>

                            @php
                                $canEditHoliday = $authStaffId == $request->request_for;
                            @endphp

                            @if ($canEditHoliday)
                                <p class="form-text text-muted mb-3">
                                    The manager can prepare the holiday plan here. HR approval is handled row by row after
                                    the plan is saved.
                                </p>
                            @elseif($canApproveHolidayRows)
                                <p class="form-text text-muted mb-3">
                                    Use the approval dropdown next to each employee. The rejection reason field only appears
                                    for rejected rows.
                                </p>
                            @else
                                <p class="form-text text-muted mb-3">
                                    Only the manager can edit the holiday staffing plan, and HR reviews each employee row
                                    separately after the plan is prepared.
                                </p>
                            @endif

                            <form id="holiday-staff-form">
                                @csrf

                                <div class="holiday-board">
                                    <div class="holiday-column">
                                        <div class="holiday-column__head">Staff On Holiday</div>
                                        <div class="holiday-column__body">
                                            <div id="holiday-list-container"></div>

                                            @if ($canEditHoliday)
                                                <button type="button" class="asset-btn asset-btn--secondary w-100"
                                                    onclick="addRow('holiday')">
                                                    Add Staff
                                                </button>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="holiday-column">
                                        <div class="holiday-column__head">Staff Working (Double Pay)</div>
                                        <div class="holiday-column__body">
                                            <div id="working-list-container"></div>

                                            @if ($canEditHoliday)
                                                <button type="button" class="asset-btn asset-btn--secondary w-100"
                                                    onclick="addRow('working')">
                                                    Add Staff
                                                </button>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <div class="asset-actions">
                                    @if ($canEditHoliday)
                                        <button type="button" class="asset-btn asset-btn--primary"
                                            onclick="submitholidayStaff()">
                                            Save Plan
                                        </button>
                                    @endif
                                </div>
                            </form>
                        </div>
                    </div>

                    <script>
                        const allStaff = @json($departmentStaff);
                        const subordinateMap = {};
                        allStaff.forEach(staff => {
                            if (!staff.manager_id) return;

                            subordinateMap[staff.manager_id] = subordinateMap[staff.manager_id] || [];
                            subordinateMap[staff.manager_id].push({
                                id: staff.id,
                                first_name: staff.first_name,
                                last_name: staff.last_name,
                            });
                        });

                        const existingPlans = @json($existingPlans);
                        const canEditHoliday = {{ $canEditHoliday ? 'true' : 'false' }};
                        const canApproveHolidayRows = {{ $canApproveHolidayRows ? 'true' : 'false' }};
                        const holidayApprovalRoute = "{{ route('requests.holidayStaffApproval', $request->id) }}";
                        const holidayApprovalLabels = {
                            pending: 'Pending',
                            approved: 'Approved',
                            rejected: 'Rejected',
                        };

                        let selectedHoliday = new Set();
                        let selectedWorking = new Set();
                        let removedRecordIds = new Set();

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

                        function buildHolidayApprovalMarkup(initialData = null) {
                            const recordIds = initialData?.record_ids || [];
                            if (!recordIds.length) return '';

                            const approvalStatus = initialData?.hr_approval_status || 'pending';
                            const rejectionReason = initialData?.hr_rejection_reason || '';

                            if (canApproveHolidayRows) {
                                return `
                                    <div class="holiday-row__approval">
                                        <label class="asset-label mb-0">HR Approval</label>
                                        <select class="asset-select holiday-approval-select">
                                            <option value="pending" ${approvalStatus === 'pending' ? 'selected' : ''}>Pending</option>
                                            <option value="approved" ${approvalStatus === 'approved' ? 'selected' : ''}>Approve</option>
                                            <option value="rejected" ${approvalStatus === 'rejected' ? 'selected' : ''}>Reject</option>
                                        </select>
                                        <div class="holiday-row__approval-reason" style="${approvalStatus === 'rejected' ? 'display: flex;' : ''}">
                                            <input type="text" class="asset-input holiday-rejection-reason" placeholder="Enter rejection reason" value="${escapeHtml(rejectionReason)}">
                                            <button type="button" class="asset-btn asset-btn--danger holiday-approval-save">Save</button>
                                        </div>
                                    </div>`;
                            }

                            const reasonMarkup = approvalStatus === 'rejected' && rejectionReason ?
                                `<div class="holiday-row__approval-note">Reason: ${escapeHtml(rejectionReason)}</div>` :
                                '';

                            return `
                                <div class="holiday-row__approval">
                                    <label class="asset-label mb-0">HR Approval</label>
                                    <span class="status-pill status-pill--${approvalStatus}">
                                        ${holidayApprovalLabels[approvalStatus] || approvalStatus}
                                    </span>
                                    ${reasonMarkup}
                                </div>`;
                        }

                        function toggleHolidayReasonRow(row, status) {
                            const reasonWrapper = row.querySelector('.holiday-row__approval-reason');
                            if (!reasonWrapper) return;
                            reasonWrapper.style.display = status === 'rejected' ? 'flex' : 'none';
                        }

                        function setHolidayApprovalLoading(row, isLoading) {
                            const approvalSelect = row.querySelector('.holiday-approval-select');
                            const saveButton = row.querySelector('.holiday-approval-save');

                            if (approvalSelect) approvalSelect.disabled = isLoading;
                            if (saveButton) saveButton.disabled = isLoading;
                        }

                        function updateHolidayRowApproval(row, status, reason = null) {
                            const recordIds = (row.dataset.recordIds || '').split(',').map(id => id.trim()).filter(Boolean);

                            if (!recordIds.length) {
                                toastr.error('Save the plan first before updating HR approval for this row.');
                                return;
                            }

                            const approvalSelect = row.querySelector('.holiday-approval-select');
                            const reasonInput = row.querySelector('.holiday-rejection-reason');
                            const previousStatus = row.dataset.approvalStatus || 'pending';
                            const previousReason = row.dataset.rejectionReason || '';

                            setHolidayApprovalLoading(row, true);

                            fetch(holidayApprovalRoute, {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'Accept': 'application/json',
                                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                                    },
                                    body: JSON.stringify({
                                        record_ids: recordIds,
                                        hr_approval_status: status,
                                        hr_rejection_reason: reason
                                    })
                                })
                                .then(async response => {
                                    const data = await response.json().catch(() => ({}));
                                    if (!response.ok || !data.success) throw new Error(data.message ||
                                        'Failed to update holiday row approval.');

                                    row.dataset.approvalStatus = data.status || status;
                                    row.dataset.rejectionReason = data.reason || '';

                                    if (approvalSelect) approvalSelect.value = data.status || status;
                                    if (reasonInput) reasonInput.value = data.reason || '';

                                    toggleHolidayReasonRow(row, data.status || status);
                                    toastr.success(data.message || 'Holiday row approval updated successfully.');
                                })
                                .catch(error => {
                                    if (approvalSelect) approvalSelect.value = previousStatus;
                                    if (reasonInput) reasonInput.value = previousReason;

                                    toggleHolidayReasonRow(row, previousStatus);
                                    toastr.error(error.message || 'An error occurred while updating holiday row approval.');
                                })
                                .finally(() => setHolidayApprovalLoading(row, false));
                        }

                        function setupApprovalControls(row) {
                            const approvalSelect = row.querySelector('.holiday-approval-select');
                            if (!approvalSelect) return;

                            const reasonInput = row.querySelector('.holiday-rejection-reason');
                            const saveButton = row.querySelector('.holiday-approval-save');

                            toggleHolidayReasonRow(row, row.dataset.approvalStatus || approvalSelect.value);

                            approvalSelect.addEventListener('change', function() {
                                const selectedStatus = this.value;

                                if (selectedStatus === 'rejected') {
                                    toggleHolidayReasonRow(row, selectedStatus);
                                    reasonInput?.focus();
                                    return;
                                }

                                if (reasonInput) reasonInput.value = '';
                                updateHolidayRowApproval(row, selectedStatus, null);
                            });

                            if (saveButton) {
                                saveButton.addEventListener('click', function() {
                                    const rejectionReason = reasonInput?.value.trim() || '';

                                    if (approvalSelect.value !== 'rejected') return;

                                    if (rejectionReason === '') {
                                        toastr.error('Please enter a rejection reason for this employee.');
                                        reasonInput?.focus();
                                        return;
                                    }

                                    updateHolidayRowApproval(row, 'rejected', rejectionReason);
                                });
                            }
                        }

                        function buildStaffOptions(currentValue = '', initialData = null) {
                            let options = '<option value="">Select Staff</option>';
                            const allDepartmentValue = 'all_department';
                            const allDepartmentSelected = String(currentValue) === allDepartmentValue;

                            options +=
                                `<option value="${allDepartmentValue}" ${allDepartmentSelected ? 'selected' : ''}>For the entire team (all department)</option>`;

                            allStaff.forEach(staff => {
                                const idStr = String(staff.id);
                                if (initialData && idStr === String(initialData.staff_id)) {
                                    options +=
                                        `<option value="${staff.id}" selected>${staff.first_name} ${staff.last_name}</option>`;
                                } else if (idStr === String(currentValue) || (!selectedHoliday.has(idStr) && !selectedWorking.has(
                                        idStr))) {
                                    options +=
                                        `<option value="${staff.id}" ${idStr === String(currentValue) ? 'selected' : ''}>${staff.first_name} ${staff.last_name}</option>`;
                                }
                            });

                            return options;
                        }

                        function addRow(type, initialData = null) {
                            const containerId = type === 'holiday' ? 'holiday-list-container' : 'working-list-container';
                            const container = document.getElementById(containerId);
                            const rowId = `row-${type}-${Date.now()}`;

                            const row = document.createElement('div');
                            row.className = 'holiday-row';
                            row.id = rowId;
                            row.dataset.rowType = type;

                            const recordIds = (initialData?.record_ids || []).join(',');
                            if (recordIds) row.dataset.recordIds = recordIds;

                            row.dataset.approvalStatus = initialData?.hr_approval_status || 'pending';
                            row.dataset.rejectionReason = initialData?.hr_rejection_reason || '';

                            const disabledAttr = canEditHoliday ? '' : 'disabled';
                            const options = buildStaffOptions(initialData ? initialData.staff_id : '', initialData);
                            const initialDates = initialData ? initialData.dates.join(', ') : '';
                            const approvalMarkup = buildHolidayApprovalMarkup(initialData);

                            if (initialData) {
                                const currentSet = type === 'holiday' ? selectedHoliday : selectedWorking;
                                currentSet.add(String(initialData.staff_id));
                            }

                            row.innerHTML = `
                                <div class="holiday-row__grow">
                                    <select class="asset-select select-staff" onchange="handleSelection(this, '${type}')" data-prev="${initialData ? initialData.staff_id : ''}" ${disabledAttr}>
                                        ${options}
                                    </select>
                                </div>
                                <div class="holiday-row__grow">
                                    <input type="text" class="asset-input date-picker" placeholder="Select Dates" value="${initialDates}" ${disabledAttr}>
                                </div>
                                ${approvalMarkup}
                                <div>
                                    ${canEditHoliday ? `<button type="button" class="asset-btn asset-btn--secondary" onclick="removeRow(this, '${type}')">Remove</button>` : ''}
                                </div>
                                <div class="holiday-row__team">
                                    <div class="form-check include-team-wrapper" style="display: none;">
                                        <input class="include-team-checkbox form-check-input" type="checkbox" id="team-${rowId}">
                                        <label class="form-check-label small" for="team-${rowId}">Include direct team</label>
                                    </div>
                                    <p class="form-text text-muted mb-0 team-members-text" data-team-members></p>
                                </div>`;

                            container.appendChild(row);

                            setupTeamCheckbox(row);
                            setupApprovalControls(row);
                            renderTeamControls(row, initialData ? initialData.staff_id : '');

                            $(row.querySelector('.select-staff')).select2({
                                placeholder: 'Select Staff',
                                width: '100%'
                            });

                            flatpickr(row.querySelector('.date-picker'), {
                                mode: 'multiple',
                                dateFormat: 'Y-m-d',
                                minDate: 'today'
                            });
                        }

                        document.addEventListener('DOMContentLoaded', function() {
                            if (existingPlans) {
                                if (existingPlans.holiday) existingPlans.holiday.forEach(plan => addRow('holiday', plan));
                                if (existingPlans.work) existingPlans.work.forEach(plan => addRow('working', plan));
                            }
                        });

                        function handleSelection(select, type) {
                            const newId = select.value;
                            const prevId = select.dataset.prev;
                            const currentSet = type === 'holiday' ? selectedHoliday : selectedWorking;

                            if (prevId) currentSet.delete(prevId);
                            if (newId) currentSet.add(newId);

                            select.dataset.prev = newId;
                            renderTeamControls(select.closest('.holiday-row'), newId);
                            refreshOptions();
                        }

                        function removeRow(btn, type) {
                            const row = btn.closest('.holiday-row');
                            const select = row.querySelector('select.select-staff');
                            const value = select.value;

                            if (value) {
                                const currentSet = type === 'holiday' ? selectedHoliday : selectedWorking;
                                currentSet.delete(value);
                            }

                            const recordIdsAttr = row.dataset.recordIds;
                            if (recordIdsAttr) {
                                recordIdsAttr.split(',').forEach(id => {
                                    if (id) removedRecordIds.add(id);
                                });
                            }

                            $(select).select2('destroy');
                            row.remove();
                            refreshOptions();
                        }

                        function refreshOptions() {
                            const allSelects = document.querySelectorAll('#holiday-staff-form select.select-staff');

                            allSelects.forEach(select => {
                                const currentValue = select.value;
                                const newOptions = buildStaffOptions(currentValue);

                                $(select).select2('destroy');
                                select.innerHTML = newOptions;
                                select.value = currentValue;
                                $(select).select2({
                                    placeholder: 'Select Staff',
                                    width: '100%'
                                });
                            });
                        }

                        function renderTeamControls(row, staffId) {
                            const teamWrapper = row.querySelector('.include-team-wrapper');
                            const includeCheckbox = row.querySelector('.include-team-checkbox');
                            const membersText = row.querySelector('[data-team-members]');
                            const members = subordinateMap[staffId] || [];
                            const isWorkingRow = row?.dataset?.rowType === 'working';

                            if (!teamWrapper || !includeCheckbox || !membersText) return;

                            if (isWorkingRow && members.length && canEditHoliday) {
                                teamWrapper.style.display = 'block';
                                includeCheckbox.disabled = false;
                            } else {
                                teamWrapper.style.display = 'none';
                                includeCheckbox.checked = false;
                                includeCheckbox.disabled = true;
                            }

                            updateTeamPreview(row, members, includeCheckbox.checked);
                        }

                        function setupTeamCheckbox(row) {
                            const checkbox = row.querySelector('.include-team-checkbox');
                            if (!checkbox) return;

                            checkbox.addEventListener('change', () => {
                                const select = row.querySelector('.select-staff');
                                const members = subordinateMap[select.value] || [];
                                updateTeamPreview(row, members, checkbox.checked);
                            });
                        }

                        function updateTeamPreview(row, members, show) {
                            const teamText = row.querySelector('[data-team-members]');
                            if (!teamText) return;

                            if (!show || !members.length) {
                                teamText.textContent = '';
                                return;
                            }

                            teamText.textContent =
                                `Team members: ${members.map(member => `${member.first_name} ${member.last_name}`).join(', ')}`;
                        }

                        function addEntry(target, seen, staffId, dates) {
                            if (seen.has(staffId)) return;
                            seen.add(staffId);
                            target.push({
                                staff_id: staffId,
                                dates
                            });
                        }

                        function gatherRowData(row, target, seen) {
                            const select = row.querySelector('.select-staff');
                            const datesInput = row.querySelector('.date-picker');
                            const staffId = select?.value;
                            const rawDates = datesInput?.value || '';
                            const dates = rawDates.split(',').map(date => date.trim()).filter(Boolean);

                            if (!staffId || !dates.length) return;

                            if (staffId === 'all_department') {
                                allStaff.forEach(staff => addEntry(target, seen, staff.id, dates));
                                return;
                            }

                            addEntry(target, seen, staffId, dates);

                            const includeTeam = row.querySelector('.include-team-checkbox')?.checked;
                            if (includeTeam && subordinateMap[staffId]) {
                                subordinateMap[staffId].forEach(subordinate => addEntry(target, seen, subordinate.id, dates));
                            }
                        }

                        function submitholidayStaff() {
                            const holidayData = [];
                            const workingData = [];
                            const holidaySeen = new Set();
                            const workingSeen = new Set();

                            document.querySelectorAll('#holiday-list-container > .holiday-row').forEach(row => gatherRowData(row,
                                holidayData, holidaySeen));
                            document.querySelectorAll('#working-list-container > .holiday-row').forEach(row => gatherRowData(row,
                                workingData, workingSeen));

                            if (holidayData.length === 0 && workingData.length === 0) {
                                toastr.error('Please choose at least one staff and date.');
                                return;
                            }

                            $.ajax({
                                url: "{{ route('requests.holidayStaff', $request->id) }}",
                                method: 'POST',
                                data: {
                                    _token: "{{ csrf_token() }}",
                                    holiday_data: holidayData,
                                    working_data: workingData,
                                    removed_ids: Array.from(removedRecordIds),
                                },
                                success: function(response) {
                                    if (response.success) toastr.success(response.message);
                                    else toastr.error(response.message);
                                },
                                error: function() {
                                    toastr.error('An error occurred while saving the plan.');
                                }
                            });
                        }
                    </script>
                @endif

                {{-- Reply --}}
                <div class="ui-card">
                    <div class="form-section mb-0">
                        <div class="form-section__head">
                            <h5 class="form-section__title mb-1">Reply</h5>
                            <p class="form-section__sub mb-0">
                                Send a reply for this request and attach supporting files if needed.
                            </p>
                        </div>

                        <form action="{{ route('requests.reply', $request->id) }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf

                            <div class="reply-box">
                                <label class="asset-label">Reply Message</label>
                                <textarea name="reply_text" class="asset-input" rows="4" placeholder="Write your reply..." required></textarea>

                                <div class="mt-3">
                                    <label class="asset-label">Attachment</label>
                                    <input type="file" name="attachment" class="asset-input"
                                        accept=".jpg,.jpeg,.png,.pdf,.doc,.docx">
                                    <div class="form-text mt-2">Supported files: JPG, PNG, PDF, DOC, DOCX.</div>
                                </div>
                            </div>

                            <div class="asset-actions">
                                <a href="{{ route('requests.index') }}" class="asset-btn asset-btn--secondary">
                                    Cancel
                                </a>
                                <button type="submit" class="asset-btn asset-btn--primary">
                                    Send Reply
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                {{-- Reply History --}}
                <div class="ui-card">
                    <div class="form-section mb-0">
                        <div class="form-section__head">
                            <h5 class="form-section__title mb-1">Reply History</h5>
                            <p class="form-section__sub mb-0">
                                Review previous replies, attached files, timestamps, and response authors.
                            </p>
                        </div>

                        @if ($request->replies->count() > 0)
                            <div class="reply-history">
                                @foreach ($request->replies as $reply)
                                    <div class="reply-card">
                                        <div class="reply-card__top">
                                            <div class="reply-card__time">
                                                {{ $reply->created_at->format('h:i A - M d, Y') }}
                                            </div>

                                            <div class="reply-card__author">
                                                By: {{ $reply->staff->first_name . ' ' . $reply->staff->last_name }}
                                            </div>
                                        </div>

                                        <div class="reply-card__text">{{ $reply->reply_text }}</div>

                                        @if ($reply->attachments && count($reply->attachments) > 0)
                                            <div class="attachment-grid mt-3">
                                                @foreach ($reply->attachments as $file)
                                                    @php
                                                        $extension = pathinfo($file->file_path, PATHINFO_EXTENSION);
                                                        $imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
                                                    @endphp

                                                    @if (in_array(strtolower($extension), $imageExtensions))
                                                        <a href="{{ asset($file->file_path) }}" target="_blank"
                                                            class="attachment-card">
                                                            <img src="{{ asset($file->file_path) }}"
                                                                alt="{{ $file->original_name }}"
                                                                class="attachment-card__preview">
                                                        </a>
                                                    @else
                                                        <a href="{{ asset($file->file_path) }}" target="_blank"
                                                            class="attachment-card">
                                                            <div class="attachment-card__file">
                                                                <i class="fas fa-paperclip"></i>
                                                                <span>{{ $file->original_name }}</span>
                                                            </div>
                                                        </a>
                                                    @endif
                                                @endforeach
                                            </div>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="empty-note">No replies yet.</div>
                        @endif
                    </div>
                </div>

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

@push('styles')
    <style>
        .ui-card {
            border: 0;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            padding: 1.25rem;
            margin-bottom: 1.25rem;
        }

        .form-section__head {
            margin-bottom: 1rem;
            padding-bottom: 0.9rem;
            border-bottom: 1px solid #eef2f7;
        }

        .form-section__title {
            font-size: 1rem;
            font-weight: 800;
            color: #111827;
        }

        .form-section__sub {
            color: #6b7280;
            font-size: 0.92rem;
        }

        .details-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .details-col-12 {
            grid-column: span 12 / span 12;
        }

        .details-col-6 {
            grid-column: span 6 / span 6;
        }

        .details-item {
            padding: 1rem;
            border: 1px solid #edf2f7;
            border-radius: 16px;
            background: #fcfcfd;
            min-height: 100%;
        }

        .details-item__label {
            font-size: 0.82rem;
            font-weight: 800;
            letter-spacing: 0.02em;
            color: #64748b;
            margin-bottom: 0.45rem;
            text-transform: uppercase;
        }

        .details-item__value {
            color: #111827;
            font-weight: 650;
            line-height: 1.7;
            word-break: break-word;
        }

        .details-item__value--muted {
            color: #6b7280;
            font-weight: 500;
        }

        .request-status-card {
            border-radius: 0 !important;
        }

        .request-status-panel {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .request-status-panel__left {
            display: flex;
            align-items: center;
            gap: 0.85rem;
        }

        .request-status-panel__icon {
            width: 48px;
            height: 48px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #eef2ff;
            color: #4f46e5;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .request-status-panel__label {
            color: #64748b;
            font-size: 0.82rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin-bottom: 0.3rem;
        }

        .request-status-panel__right {
            min-width: 260px;
        }

        .status-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.55rem 0.85rem;
            border-radius: 999px;
            font-size: 0.82rem;
            font-weight: 800;
            letter-spacing: 0.01em;
            white-space: nowrap;
        }

        .status-pill--pending {
            background: #fef3c7;
            color: #92400e;
        }

        .status-pill--in_progress {
            background: #dbeafe;
            color: #1d4ed8;
        }

        .status-pill--done,
        .status-pill--approved {
            background: #dcfce7;
            color: #166534;
        }

        .status-pill--rejected {
            background: #fee2e2;
            color: #b91c1c;
        }

        .request-rejection-note {
            border: 1px solid #fecaca;
            background: #fef2f2;
            color: #991b1b;
            border-radius: 14px;
            padding: 0.85rem 1rem;
            font-size: 0.9rem;
            font-weight: 650;
        }

        .request-rejection-card {
            border-radius: 0 !important;
            border-left: 4px solid #ef4444;
        }

        .asset-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 700;
            color: #374151;
            font-size: 0.92rem;
        }

        .asset-input,
        .asset-select {
            width: 100%;
            min-height: 44px;
            border: 1px solid #dbe2ea;
            border-radius: 12px;
            padding: 0.7rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
        }

        textarea.asset-input {
            min-height: 110px;
            resize: vertical;
        }

        .asset-input:focus,
        .asset-select:focus {
            outline: none;
            border-color: #b8c4d6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
        }

        .retest-alert {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            padding: 1rem;
            border: 1px solid #bfdbfe;
            border-radius: 18px;
            background: #eff6ff;
        }

        .retest-alert__left {
            display: flex;
            align-items: center;
            gap: 0.85rem;
        }

        .retest-alert__icon {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            background: #2563eb;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .retest-alert h6 {
            color: #1e40af;
            font-weight: 800;
        }

        .retest-alert p {
            color: #60a5fa;
            font-size: 0.86rem;
        }

        .attachment-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 0.85rem;
        }

        .attachment-card {
            display: inline-flex;
            flex-direction: column;
            gap: 0.45rem;
            text-decoration: none;
            color: inherit;
            max-width: 180px;
        }

        .attachment-card__preview {
            width: 170px;
            height: 130px;
            object-fit: cover;
            border-radius: 14px;
            border: 1px solid #e5e7eb;
            background: #f8fafc;
        }

        .attachment-card__file {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            padding: 0.85rem 1rem;
            border-radius: 14px;
            border: 1px solid #e5e7eb;
            background: #fff;
            color: #111827;
            font-weight: 700;
        }

        .reply-box {
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #fcfcfd;
            padding: 1rem;
        }

        .reply-history {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .reply-card {
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #fff;
            padding: 1rem;
        }

        .reply-card__top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 0.75rem;
        }

        .reply-card__time {
            font-size: 0.84rem;
            color: #6b7280;
            font-weight: 700;
        }

        .reply-card__author {
            color: #111827;
            font-weight: 800;
            white-space: nowrap;
        }

        .reply-card__text {
            color: #334155;
            line-height: 1.75;
            white-space: pre-line;
        }

        .holiday-board {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
        }

        .holiday-column {
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #fff;
            overflow: hidden;
        }

        .holiday-column__head {
            padding: 0.9rem 1rem;
            border-bottom: 1px solid #eef2f7;
            font-weight: 800;
            color: #111827;
            background: #f8fafc;
        }

        .holiday-column__body {
            padding: 1rem;
        }

        .holiday-row {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            flex-wrap: wrap;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            background: #fcfcfd;
            padding: 0.75rem;
            margin-bottom: 0.75rem;
        }

        .holiday-row__team {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .include-team-wrapper {
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }

        .holiday-row__grow {
            flex: 1 1 220px;
        }

        .holiday-row__approval {
            flex: 1 1 280px;
            display: flex;
            flex-direction: column;
            gap: 0.55rem;
        }

        .holiday-row__approval-reason {
            display: none;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .holiday-row__approval-reason .asset-input {
            flex: 1 1 180px;
        }

        .holiday-row__approval-note {
            color: #6b7280;
            font-size: 0.85rem;
            line-height: 1.5;
        }

        .empty-note {
            padding: 1rem 1.1rem;
            border: 1px dashed #cbd5e1;
            border-radius: 14px;
            background: #f8fafc;
            color: #64748b;
            font-weight: 700;
        }

        .asset-actions {
            display: flex;
            justify-content: end;
            gap: 0.75rem;
            margin-top: 1rem;
            flex-wrap: wrap;
        }

        .asset-btn {
            min-height: 44px;
            padding: 0.72rem 1.05rem;
            border-radius: 12px;
            border: 1px solid transparent;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            text-decoration: none;
            font-weight: 800;
            transition: 0.2s ease;
            white-space: nowrap;
        }

        .asset-btn:hover {
            transform: translateY(-1px);
        }

        .asset-btn--primary {
            background: #4f46e5;
            color: #fff;
            border-color: #4f46e5;
        }

        .asset-btn--primary:hover {
            background: #4338ca;
            color: #fff;
            border-color: #4338ca;
        }

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

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

        .asset-btn--danger {
            background: #ef4444;
            color: #fff;
            border-color: #ef4444;
        }

        .asset-btn--danger:hover {
            background: #dc2626;
            color: #fff;
            border-color: #dc2626;
        }

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

        .select2-container .selection {
            display: block !important;
        }

        .select2-container--default .select2-selection--single,
        .select2-container--default .select2-selection--multiple {
            min-height: 44px;
            border: 1px solid #dbe2ea;
            border-radius: 12px;
            padding: 0.35rem 0.45rem;
            background: #fff;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 30px;
            color: #111827;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 42px;
        }

        @media (max-width: 991.98px) {

            .details-col-6,
            .details-col-12 {
                grid-column: span 12 / span 12;
            }

            .holiday-board {
                grid-template-columns: 1fr;
            }

            .reply-card__top {
                flex-direction: column;
            }
        }

        @media (max-width: 767.98px) {

            .request-status-panel__right,
            .asset-btn {
                width: 100%;
            }

            .request-status-panel {
                align-items: flex-start;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            //const statusSelect = $('#status-select');
            const statusActions = $('.request-status-actions');
            const approveButton = $('#approve-request-btn');
            const rejectButton = $('#reject-request-btn');
            const recruitmentAssigneeSelect = $('#recruitment_request_for');
            const reasonWrapper = $('#rejection-reason-wrapper');
            const reasonInput = $('#rejection-reason');
            const saveReasonButton = $('#save-rejection-reason');
            const cancelReasonButton = $('#cancel-rejection-reason');
            const statusPill = $('#current-status-pill');
            const rejectionNote = $('#current-rejection-note');

            const statusLabels = {
                pending: 'Pending',
                in_progress: 'In Progress',
                done: 'Done',
                approved: 'Approved',
                rejected: 'Rejected'
            };

            // let previousStatus = statusSelect.length ? statusSelect.val() : null;
            let previousStatus = statusActions.length ? statusActions.data('current-status') : null;
            let pendingRequestId = null;
            let pendingStatus = null;

            if (recruitmentAssigneeSelect.length && $.fn.select2) {
                recruitmentAssigneeSelect.select2({
                    width: '100%'
                });
            }

            // if (statusSelect.length && $.fn.select2) {
            //     statusSelect.select2({
            //         width: '100%',
            //         minimumResultsForSearch: Infinity
            //     });
            // }

            function updateStatusPill(status) {
                if (!statusPill.length) return;

                statusPill
                    .removeClass(
                        'status-pill--pending status-pill--in_progress status-pill--done status-pill--approved status-pill--rejected'
                    )
                    .addClass('status-pill--' + status)
                    .text(statusLabels[status] || status);
            }

            function openReasonBox(requestId, status, fallbackReason = '') {
                pendingRequestId = requestId;
                pendingStatus = status;
                reasonWrapper.slideDown(160);
                reasonInput.val(fallbackReason || '').trigger('focus');
            }

            function closeReasonBox() {
                reasonWrapper.slideUp(160);
                reasonInput.val('');
                pendingRequestId = null;
                pendingStatus = null;
            }

            // function setLoading(isLoading) {
            //     if (statusSelect.length) {
            //         statusSelect.prop('disabled', isLoading).trigger('change.select2');
            //     }

            //     saveReasonButton.prop('disabled', isLoading);
            //     cancelReasonButton.prop('disabled', isLoading);
            // }

            function setLoading(isLoading) {
                approveButton.prop('disabled', isLoading);
                rejectButton.prop('disabled', isLoading);
                saveReasonButton.prop('disabled', isLoading);
                cancelReasonButton.prop('disabled', isLoading);
            }

            function updateStatus(requestId, status, reason = null) {
                setLoading(true);

                $.ajax({
                    url: "{{ route('hr-request.update-status') }}",
                    method: 'POST',
                    dataType: 'json',
                    data: {
                        _token: "{{ csrf_token() }}",
                        id: requestId,
                        status: status,
                        reason: reason,
                        reject_reason: reason,
                        notes: reason
                    },
                    success: function(data) {
                        if (data.success) {
                            previousStatus = status;
                            statusActions.attr('data-current-status', status);
                            updateStatusPill(status);

                            if (status === 'rejected' && reason) {
                                // statusSelect.attr('data-reason', reason);
                                statusActions.attr('data-reason', reason);
                                rejectionNote
                                    .html('<strong>Rejection Reason:</strong> ' + $('<div>').text(
                                        reason).html())
                                    .show();
                            } else {
                                // statusSelect.attr('data-reason', '');
                                statusActions.attr('data-reason', '');
                                rejectionNote.hide().html('');
                            }

                            closeReasonBox();
                            toastr.success(data.message || 'Status updated successfully.');
                        } else {
                            toastr.error(data.message || 'Failed to update status.');
                        }
                    },
                    error: function(xhr) {
                        let message = 'An unexpected error occurred while updating the status.';

                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            message = xhr.responseJSON.message;
                        }

                        toastr.error(message);
                        // statusSelect.val(previousStatus).trigger('change.select2');
                    },
                    complete: function() {
                        setLoading(false);
                    }
                });
            }

            // statusSelect.on('change', function() {
            //     const requestId = $(this).data('request-id');
            //     const newStatus = $(this).val();

            //     if (!requestId || !newStatus) return;

            //     if (newStatus === 'rejected') {
            //         openReasonBox(requestId, newStatus, $(this).attr('data-reason') || '');
            //         return;
            //     }

            //     closeReasonBox();
            //     updateStatus(requestId, newStatus, null);
            // });

            approveButton.on('click', function() {
                const requestId = statusActions.data('request-id');

                if (!requestId) return;

                closeReasonBox();
                updateStatus(requestId, 'approved', null);
            });

            rejectButton.on('click', function() {
                const requestId = statusActions.data('request-id');

                if (!requestId) return;

                openReasonBox(requestId, 'rejected', statusActions.attr('data-reason') || '');
            });

            saveReasonButton.on('click', function() {
                const reason = (reasonInput.val() || '').trim();

                if (!pendingRequestId || pendingStatus !== 'rejected') return;

                if (!reason) {
                    toastr.error('Please enter a rejection reason first.');
                    reasonInput.trigger('focus');
                    return;
                }

                updateStatus(pendingRequestId, 'rejected', reason);
            });

            // cancelReasonButton.on('click', function() {
            //     closeReasonBox();
            //     if (statusSelect.length) {
            //         statusSelect.val(previousStatus || 'pending').trigger('change.select2');
            //     }
            // });
            cancelReasonButton.on('click', function() {
                closeReasonBox();
            });

            if (statusActions.length && statusActions.data('current-status') === 'rejected') {
                openReasonBox(statusActions.data('request-id'), 'rejected', statusActions.attr('data-reason') ||
                    '');
            }
        });
    </script>
@endpush