@extends('layouts.app')
@section('page-title', 'Requisition')
@section('content')

<style>
    .requisition-card .card-header {
        background: #fff;
        border-bottom: 1px solid #eef0f2;
        padding: 1.5rem 1.75rem;
    }
    .requisition-card .card-header h2 {
        font-size: 1.35rem;
        font-weight: 600;
        letter-spacing: -0.01em;
    }
    .req-step {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        margin: 2rem 0 1.1rem;
        padding-bottom: 0.6rem;
        border-bottom: 1px solid #eef0f2;
    }
    .req-step:first-of-type { margin-top: 0.5rem; }
    .req-step .req-step-num {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: #eef2ff;
        color: #4f5fce;
        font-size: 0.8rem;
        font-weight: 700;
        flex-shrink: 0;
    }
    .req-step h5 {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: #2a2f3a;
    }
    .req-step .req-step-hint {
        font-size: 0.8rem;
        color: #8891a0;
        margin-left: auto;
    }
    .form-label.fw-semibold { color: #333a45; font-size: 0.9rem; }
    .required-mark { color: #dc3545; margin-left: 2px; }

    .req-for-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.85rem;
        max-width: 560px;
        margin-top: 0.4rem;
    }
    @media (max-width: 576px) {
        .req-for-cards { grid-template-columns: 1fr; }
    }
    .req-for-card {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        border: 1.5px solid #e3e6eb;
        border-radius: 10px;
        padding: 0.9rem 2.1rem 0.9rem 1rem;
        cursor: pointer;
        background: #fff;
        transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    }
    .req-for-card:hover { border-color: #b9c2f7; }
    .req-for-card input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        pointer-events: none;
    }
    .req-for-card .req-for-icon {
        width: 38px;
        height: 38px;
        border-radius: 9px;
        background: #eef2ff;
        color: #4f5fce;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 1rem;
        transition: background-color 0.15s ease, color 0.15s ease;
    }
    .req-for-card .req-for-title {
        display: block;
        font-weight: 600;
        font-size: 0.92rem;
        color: #2a2f3a;
    }
    .req-for-card .req-for-desc {
        display: block;
        font-size: 0.78rem;
        color: #8891a0;
        margin-top: 2px;
        line-height: 1.35;
    }
    .req-for-card .req-for-check {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 1.5px solid #d4d8e0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.6rem;
        color: transparent;
        background: #fff;
        transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
    }
    .req-for-card.is-selected {
        border-color: #4f5fce;
        background: #f7f8ff;
        box-shadow: 0 0 0 1px #4f5fce inset;
    }
    .req-for-card.is-selected .req-for-icon { background: #4f5fce; color: #fff; }
    .req-for-card.is-selected .req-for-check { border-color: #4f5fce; background: #4f5fce; color: #fff; }
    #selfModeHint {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        font-size: 0.8rem;
        color: #4f5fce;
        background: #f4f6ff;
        border: 1px dashed #d7ddfb;
        border-radius: 6px;
        padding: 0.55rem 0.8rem;
        margin-top: 0.85rem;
        max-width: 560px;
    }
    #selfModeHint i { margin-top: 0.15rem; }

    #proposedCoachesTable th {
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #8891a0;
        background: #f8f9fb;
        border-bottom: 2px solid #eef0f2;
    }
    #proposedCoachesTable td { vertical-align: top; padding: 0.9rem 0.75rem; }
    .justification-group .form-check { margin-bottom: 0.25rem; }
    .justification-group.is-invalid-group {
        border: 1px solid #dc3545;
        border-radius: 6px;
        padding: 0.5rem 0.6rem;
    }
    .justification-error {
        display: none;
        color: #dc3545;
        font-size: 0.78rem;
        margin-top: 0.35rem;
    }
    .justification-error.show { display: block; }

    .remove-coach.is-disabled {
        opacity: 0.3;
        pointer-events: none;
    }

    .req-submit-bar {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-top: 2rem;
        padding-top: 1.25rem;
        border-top: 1px solid #eef0f2;
    }
    .req-submit-bar .req-status {
        font-size: 0.83rem;
        color: #8891a0;
    }
    .req-submit-bar .req-status.ready { color: #1a9f5c; font-weight: 600; }
    #submitRequisitionBtn:disabled { opacity: 0.55; cursor: not-allowed; }

    /* Locked state while the form is submitting */
    #requisitionForm.is-submitting .form-control,
    #requisitionForm.is-submitting .form-select,
    #requisitionForm.is-submitting textarea,
    #requisitionForm.is-submitting .btn:not(#submitRequisitionBtn) {
        opacity: 0.55;
        pointer-events: none;
    }
    #submitRequisitionBtn .spinner-border {
        width: 0.95rem;
        height: 0.95rem;
        border-width: 0.15em;
        margin-right: 0.5rem;
        vertical-align: -1px;
    }
</style>

<div class="card requisition-card">
    <div class="card-header"><h2 class="mb-0">Requisition Form</h2></div>
    <div class="card-body">
        <form method="POST" action="{{ route('coach-requisitions.store') }}" id="requisitionForm" novalidate>
            @csrf

            <div class="row g-3">
                <div class="col-md-12">
                    <label class="form-label fw-semibold">Title<span class="required-mark">*</span></label>
                    <input type="text" class="form-control" name="title" placeholder="Enter a descriptive title" required>
                </div>
            </div>

            @php
                // Only these roles may raise a requisition on someone else's
                // behalf; everyone else can only ever create for themselves,
                // so the choice UI is skipped for them entirely.
                $canRequestForOthers = in_array($user->role->name ?? '', [
                    'Admin', 'Regional_Coordinator', 'County_Coordinator',
                    'Supervisor', 'Finance', 'Manager', 'Partnerships_Growth_Manager',
                ]);
                $stepNum = 1;
            @endphp

            @if($canRequestForOthers)
            <div class="req-step">
                <span class="req-step-num">{{ $stepNum }}</span>
                <h5>Who Is This For</h5>
                <span class="req-step-hint">Requisition for yourself or someone else</span>
            </div>
            
            <div class="row g-3">
                <div class="col-md-12">
                    <label class="form-label fw-semibold">This requisition is for<span class="required-mark">*</span></label>
                    <div class="req-for-cards">
                        <label class="req-for-card" id="reqForSelfCard" for="reqForSelf">
                            <input type="radio" name="requisition_for" id="reqForSelf" value="self" checked>
                            <span class="req-for-icon"><i class="fas fa-user"></i></span>
                            <span>
                                <span class="req-for-title">Myself</span>
                                <span class="req-for-desc">Auto-filled from your profile</span>
                            </span>
                            <span class="req-for-check"><i class="fas fa-check"></i></span>
                        </label>
                        <label class="req-for-card" id="reqForOthersCard" for="reqForOthers">
                            <input type="radio" name="requisition_for" id="reqForOthers" value="others">
                            <span class="req-for-icon"><i class="fas fa-users"></i></span>
                            <span>
                                <span class="req-for-title">Someone else</span>
                                <span class="req-for-desc">Choose a role, then a coach</span>
                            </span>
                            <span class="req-for-check"><i class="fas fa-check"></i></span>
                        </label>
                    </div>
                    <div id="selfModeHint" style="display:none;">
                        <i class="fas fa-info-circle"></i>
                        <span>Position title and your details will be filled in automatically from your profile.</span>
                    </div>
                </div>
            </div>
            @php $stepNum++; @endphp
            @else
            <input type="hidden" name="requisition_for" value="self">
            @endif

            <div class="req-step">
                <span class="req-step-num">{{ $stepNum }}</span>
                <h5>Request Details</h5>
                <span class="req-step-hint">How this engagement is structured</span>
            </div>
            @php $stepNum++; @endphp
            <div class="row g-3">
                <div class="col-md-12">
                    <label class="form-label fw-semibold">Engagement Type<span class="required-mark">*</span></label>
                    <select class="form-select" name="engagement_type" id="engagement-type" required onchange="updateEngagementFields()">
                        <option value="">Select type...</option>
                        <!-- <option value="hourly">Hourly</option> -->
                        <option value="daily">Daily</option>
                        <!-- <option value="fixed">Fixed</option> -->
                    </select>
                </div>
                <div class="col-md-12" id="engagement-fields"></div>
                <input type="hidden" name="date_of_request" value="{{ date('Y-m-d') }}">
            </div>

            <div class="req-step">
                <span class="req-step-num">{{ $stepNum }}</span>
                <h5>Position Details</h5>
                <span class="req-step-hint" id="positionDetailsHint">Who's needed, where, and for how long</span>
            </div>
            @php $stepNum++; @endphp
            <div class="row g-3">
                <div class="col-md-6" id="positionTitleCol">
                    <label class="form-label fw-semibold">Position Title<span class="required-mark">*</span></label>
                    <select class="form-select" name="position_title" id="positionTitleSelect" required>
                        <option value="">-- Select Role --</option>
                        @php
                            $assignableRoles = [];
                            if (in_array($user->role->name, ['Admin', 'Manager'])) {
                                $assignableRoles = $roles;
                            } else {
                                $service = app(\Vanguard\Services\RoleHierarchyService::class);
                                $assignableNames = $service->getAllSubordinateRoles($user->role->name);
                                $assignableNames[] = $user->role->name;
                                $assignableRoles = $roles->filter(fn($r) => in_array($r->name, $assignableNames));
                            }
                        @endphp
                        @foreach($assignableRoles as $role)
                            <option value="{{ $role->name }}">{{ $role->display_name }}</option>
                        @endforeach
                        @if(in_array($user->role->name, ['Admin', 'Manager']))
                            <option value="all">All</option>
                        @endif
                    </select>
                </div>
                <div class="col-md-6" id="numberOfCoachesCol">
                    <label class="form-label fw-semibold">Number of Positions Required<span class="required-mark">*</span></label>
                    <input type="number" class="form-control" name="number_of_coaches" min="1" required>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-semibold">Start Date<span class="required-mark">*</span></label>
                    <input type="date" class="form-control" name="start_date" id="startDateInput" required>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-semibold">
                        End Date<span class="required-mark">*</span>
                           <span class="text-muted fw-normal" style="font-size:0.78rem;">(up to end of that month)</span>

                    </label>
                    <input type="date" class="form-control" name="end_date" id="endDateInput" required disabled>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-semibold">Work Arrangement<span class="required-mark">*</span></label>
                    <select class="form-select" name="work_arrangement" required>
                        <option value="">Select arrangement...</option>
                        <option value="field">Field-Based</option>
                        <option value="office">Office-Based</option>
                        <option value="hybrid">Hybrid</option>
                    </select>
                </div>
                <input type="hidden" name="reporting_to"
                    value="{{ $supervisors->first() ? $supervisors->first()->first_name . ' ' . $supervisors->first()->last_name : '' }}">
            </div>

            <div class="req-step">
                <span class="req-step-num">{{ $stepNum }}</span>
                <h5>List of Proposed Positions</h5>
                <span class="req-step-hint" id="proposedPositionsHint">Add each coach and their justification</span>
            </div>
            <div class="table-responsive mb-3">
                <table class="table table-bordered align-middle" id="proposedCoachesTable">
                    <thead>
                        <tr>
                            <th style="width: 26%;">Coach</th>
                            <th style="width: 34%;">Justification<span class="required-mark">*</span></th>
                            <th style="width: 30%;">Roles &amp; Responsibilities</th>
                            <th style="width: 10%;">Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
                <button type="button" class="btn btn-outline-secondary btn-sm" id="addCoachBtn">
                    <i class="fas fa-plus"></i> Add Position
                </button>
            </div>

            <div class="req-submit-bar">
                <button type="submit" class="btn btn-primary" id="submitRequisitionBtn" disabled>
                    Submit Requisition
                </button>
                <span class="req-status" id="reqStatusText">Complete all required fields to continue</span>
            </div>

        </form>
    </div>
</div>

<script>
    // ════════════════════════════════════
    // USER DATA FROM PHP
    // ════════════════════════════════════
    const loggedInRole = @json($user->role ? $user->role->name : '');

    @php
        use Vanguard\Role;
        use Vanguard\User;
        use Vanguard\RegionalCoordinatorCounty;

        $roles = Role::all();
        $usersByRole = [];
        $currentUser = $user;
        $currentRole = $currentUser->role ? $currentUser->role->name : null;
        $currentSubcountyId = $currentUser->subcounty_id ?? null;

        // Regional_Coordinator is NOT tied to a single county via county_id.
        // Their counties live in the regional_coordinator_counties pivot table
        // (one coordinator can be assigned to many counties). Falling back to
        // $currentUser->county_id (as the previous version did) is null for
        // this role, which silently produced an empty user list for every
        // role bucket below. For every other role, county_id on the user
        // row itself is still the correct, single-value source.
        $currentCountyIds = $currentRole === 'Regional_Coordinator'
            ? RegionalCoordinatorCounty::where('user_id', $currentUser->id)->pluck('county_id')
            : collect([$currentUser->county_id ?? null])->filter()->values();

        $roleHierarchy = [
            'Admin' => ['Regional_Coordinator', 'County_Coordinator', 'Supervisor', 'Field_Officer', 'User', 'Finance', 'Manager', 'Partnerships_Growth_Manager'],
            'Manager' => ['Regional_Coordinator', 'County_Coordinator', 'Supervisor', 'Field_Officer', 'User', 'Finance', 'Partnerships_Growth_Manager'],
            'Regional_Coordinator' => ['County_Coordinator', 'Supervisor', 'Field_Officer', 'User'],
            'County_Coordinator' => ['Supervisor', 'Field_Officer', 'User'],
            'Supervisor' => ['Field_Officer', 'User'],
            'Field_Officer' => ['User'],
            'User' => [],
            'Finance' => [],
            'Partnerships_Growth_Manager' => []
        ];
        foreach ($roles as $role) {
            if ($currentRole === 'Admin') {
                $usersByRole[$role->name] = User::with('subcounty')->where('role_id', $role->id)->get()->map(function($u) {
                    return ['id' => $u->id, 'name' => $u->first_name . ' ' . $u->last_name, 'phone' => $u->phone ?? '', 'email' => $u->email ?? '', 'sub_county' => $u->subcounty->name ?? ''];
                })->values();
            } elseif ($currentRole === 'Manager') {
                $usersByRole[$role->name] = User::with('subcounty')->where('role_id', $role->id)->get()->map(function($u) {
                    return ['id' => $u->id, 'name' => $u->first_name . ' ' . $u->last_name, 'phone' => $u->phone ?? '', 'email' => $u->email ?? '', 'sub_county' => $u->subcounty->name ?? ''];
                })->values();
            } else {
                $subordinateRoles = $roleHierarchy[$currentRole] ?? [];
                if (in_array($role->name, $subordinateRoles)) {
                    $query = User::with('subcounty')->where('role_id', $role->id);
                    if ($currentRole === 'Regional_Coordinator' || $currentRole === 'County_Coordinator') {
                        $query->whereIn('county_id', $currentCountyIds);
                    } elseif ($currentRole === 'Supervisor') {
                        $query->where('subcounty_id', $currentSubcountyId);
                    }
                    $usersByRole[$role->name] = $query->get()->map(function($u) {
                        return ['id' => $u->id, 'name' => $u->first_name . ' ' . $u->last_name, 'phone' => $u->phone ?? '', 'email' => $u->email ?? '', 'sub_county' => $u->subcounty->name ?? ''];
                    })->values();
                } else {
                    $usersByRole[$role->name] = collect();
                }
            }
        }
        $usersByRole['all'] = in_array($currentRole, ['Admin', 'Manager'])
            ? User::with('subcounty')->get()->map(function($u) {
                return ['id' => $u->id, 'name' => $u->first_name . ' ' . $u->last_name, 'phone' => $u->phone ?? '', 'email' => $u->email ?? '', 'sub_county' => $u->subcounty->name ?? ''];
            })->values()
            : collect();

        // Data for the "Myself" flow: the logged-in user's own details,
        // used to skip the role/coach selection entirely and self-fill
        // the proposed position row.
        $selfUserData = [
            'id'           => $currentUser->id,
            'name'         => trim(($currentUser->first_name ?? '') . ' ' . ($currentUser->last_name ?? '')),
            'phone'        => $currentUser->phone ?? '',
            'email'        => $currentUser->email ?? '',
            'sub_county'   => $currentUser->subcounty->name ?? '',
            'role_name'    => $currentUser->role ? $currentUser->role->name : '',
            'role_display' => $currentUser->role ? $currentUser->role->display_name : '',
        ];
    @endphp

    const usersByRole   = @json($usersByRole);
    const currentUserData = @json($selfUserData);

    let rowCounter = 0;
    let requisitionMode = null; // 'self' | 'others'

    // ════════════════════════════════════
    // HELPER: GET SELECTED ROLE
    // ════════════════════════════════════
    function getSelectedRole() {
        const positionSelect = document.getElementById('positionTitleSelect');
        let selectedRole = positionSelect ? positionSelect.value : '';
        if (!selectedRole || selectedRole === '') selectedRole = 'all';
        return selectedRole;
    }

    // ════════════════════════════════════
    // HELPER: BUILD COACH DROPDOWN OPTIONS
    // ════════════════════════════════════
    function getUserOptions(roleOverride) {
        let selectedRole = roleOverride || getSelectedRole();
        let users = [];
        if (!selectedRole) return '<option value="">-- Select Coach --</option>';
        if ((loggedInRole === 'Admin' || loggedInRole === 'Manager') && selectedRole === 'all') {
            users = usersByRole['all'] || [];
        } else {
            users = usersByRole[selectedRole] || [];
        }
        let options = '<option value="">-- Select Coach --</option>';
        if (!users || users.length === 0) {
            options += '<option value="" disabled>No users available for this role and location</option>';
        } else {
            users.forEach(u => {
                if (u.id && u.email) {
                    options += `<option value="${u.name}"
                        data-user-id="${u.id}"
                        data-phone="${u.phone}"
                        data-email="${u.email}"
                        data-subcounty="${u.sub_county}">
                        ${u.name}
                    </option>`;
                }
            });
        }
        return options;
    }

    // ════════════════════════════════════
    // CREATE A COACH TABLE ROW
    // selfMode = true  -> row is locked to the logged-in user, no picker
    // selfMode = false -> normal role/coach selection flow (unchanged)
    // ════════════════════════════════════
    function createCoachRow(selfMode) {
        selfMode = (typeof selfMode === 'boolean') ? selfMode : (requisitionMode === 'self');
        const rowIndex = rowCounter++;
        const tr = document.createElement('tr');

        let coachCellHtml;
        if (selfMode) {
            coachCellHtml = `
                <input type="text" class="form-control" value="${currentUserData.name}" readonly tabindex="-1">
                <input type="hidden" class="coach-select" name="coach_full_name[]" value="${currentUserData.name}">
                <input type="hidden" class="coach-phone" name="coach_phone_number[]" value="${currentUserData.phone}">
                <input type="hidden" class="coach-email" name="coach_email_address[]" value="${currentUserData.email}">
                <input type="hidden" class="coach-subcounty" name="coach_sub_county_assigned[]" value="${currentUserData.sub_county}">
                <input type="hidden" class="coach-user-id" name="coach_user_id[]" value="${currentUserData.id}">
            `;
        } else {
            const options = getUserOptions();
            coachCellHtml = `
                <select class="form-select coach-select" name="coach_full_name[]" required>
                    ${options}
                </select>
                <input type="hidden" class="coach-phone" name="coach_phone_number[]">
                <input type="hidden" class="coach-email" name="coach_email_address[]">
                <input type="hidden" class="coach-subcounty" name="coach_sub_county_assigned[]">
                <input type="hidden" class="coach-user-id" name="coach_user_id[]">
            `;
        }

        tr.innerHTML = `
            <td>${coachCellHtml}</td>
            <td>
                <div class="justification-group">
                    <div class="form-check">
                        <input class="form-check-input justification-check" type="checkbox" name="justification[${rowIndex}][]" value="Increased workload">
                        <label class="form-check-label">Increased workload</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input justification-check" type="checkbox" name="justification[${rowIndex}][]" value="New project activities">
                        <label class="form-check-label">New project activities</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input justification-check" type="checkbox" name="justification[${rowIndex}][]" value="Staff shortage">
                        <label class="form-check-label">Staff shortage</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input justification-check" type="checkbox" name="justification[${rowIndex}][]" value="Specialized skills requirement">
                        <label class="form-check-label">Specialized skills requirement</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input justification-check" type="checkbox" name="justification[${rowIndex}][]" value="Temporary assignment">
                        <label class="form-check-label">Temporary assignment</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input justification-check other-checkbox" type="checkbox" name="justification[${rowIndex}][]" value="Other">
                        <label class="form-check-label">Other (Specify)</label>
                    </div>
                    <div class="other-text-wrapper" style="display:none; margin-top:6px;">
                        <textarea class="form-control" name="justification_other[${rowIndex}]" rows="2" placeholder="Please specify..."></textarea>
                    </div>
                </div>
                <div class="justification-error">Select at least one justification.</div>
            </td>
            <td><textarea class="form-control" name="roles_responsibilities[]" rows="2" placeholder="Key duties..."></textarea></td>
            <td>
            <button type="button" class="btn btn-danger btn-sm remove-coach${selfMode ? ' is-disabled' : ''}"${selfMode ? ' disabled' : ''} title="${selfMode ? 'Not applicable for self' : 'Remove'}"><i class="fas fa-trash"></i>
            </button></td>
        `;

        if (!selfMode) {
            tr.querySelector('.coach-select').addEventListener('change', function () {
                const selected = this.options[this.selectedIndex];
                tr.querySelector('.coach-phone').value     = selected.dataset.phone     || '';
                tr.querySelector('.coach-email').value     = selected.dataset.email     || '';
                tr.querySelector('.coach-subcounty').value = selected.dataset.subcounty || '';
                tr.querySelector('.coach-user-id').value   = selected.dataset.userId    || '';
                validateRequisitionForm();
            });
        }

        const otherCheckbox = tr.querySelector('.other-checkbox');
        const otherWrapper  = tr.querySelector('.other-text-wrapper');
        otherCheckbox.addEventListener('change', function () {
            otherWrapper.style.display = this.checked ? 'block' : 'none';
            if (!this.checked) {
                otherWrapper.querySelector('textarea').value = '';
            }
        });

        tr.querySelectorAll('.justification-check').forEach(function (cb) {
            cb.addEventListener('change', function () {
                updateJustificationValidity(tr);
                validateRequisitionForm();
            });
        });

        tr.querySelector('.remove-coach').addEventListener('click', function () {
            if (requisitionMode === 'self') return;
            if (document.querySelectorAll('#proposedCoachesTable tbody tr').length <= 1) return;
            tr.remove();
            updateCoachCount();
            updateRemoveButtonsState();
            updateEngagementTotal();
            reindexCoachRows();
            validateRequisitionForm();
        });

        return tr;
    }

    // ════════════════════════════════════
    // JUSTIFICATION VALIDITY (per row)
    // ════════════════════════════════════
    function updateJustificationValidity(row) {
        const group = row.querySelector('.justification-group');
        const error = row.querySelector('.justification-error');
        const anyChecked = row.querySelectorAll('.justification-check:checked').length > 0;
        group.classList.toggle('is-invalid-group', !anyChecked);
        error.classList.toggle('show', !anyChecked);
        return anyChecked;
    }

    function allJustificationsValid() {
        const rows = document.querySelectorAll('#proposedCoachesTable tbody tr');
        if (rows.length === 0) return false;
        let allValid = true;
        rows.forEach(function (row) {
            const anyChecked = row.querySelectorAll('.justification-check:checked').length > 0;
            if (!anyChecked) allValid = false;
        });
        return allValid;
    }

    // ════════════════════════════════════
    // REINDEX COACH ROWS
    // ════════════════════════════════════
    function reindexCoachRows() {
        document.querySelectorAll('#proposedCoachesTable tbody tr').forEach(function(row, idx) {
            row.querySelectorAll('input[type="checkbox"]').forEach(function(cb) {
                cb.name = `justification[${idx}][]`;
            });
            const otherTextarea = row.querySelector('.other-text-wrapper textarea');
            if (otherTextarea) {
                otherTextarea.name = `justification_other[${idx}]`;
            }
        });
    }

    // ════════════════════════════════════
    // UPDATE COACH COUNT INPUT
    // ════════════════════════════════════
    function updateCoachCount() {
        const count = document.querySelectorAll('#proposedCoachesTable tbody tr').length;
        const numberInput = document.querySelector('input[name="number_of_coaches"]');
        if (numberInput) numberInput.value = count > 0 ? count : 1;
    }

    // ════════════════════════════════════
    // SHOW/DISABLE REMOVE BUTTON BASED ON ROW COUNT
    // Only one position row present -> removing it is not allowed.
    // In "self" mode removal is never allowed (always exactly one row).
    // ════════════════════════════════════
    function updateRemoveButtonsState() {
        const rows = document.querySelectorAll('#proposedCoachesTable tbody tr');
        const onlyOneRow = rows.length <= 1;
        rows.forEach(function (row) {
            const btn = row.querySelector('.remove-coach');
            if (btn) {
                const disable = onlyOneRow || requisitionMode === 'self';
                btn.classList.toggle('is-disabled', disable);
                btn.disabled = disable;
                btn.title = requisitionMode === 'self'
                    ? 'Not applicable for self'
                    : (onlyOneRow ? 'At least one position is required' : 'Remove');
            }
        });
    }

    // ════════════════════════════════════
    // WHO IS THIS FOR: self vs others
    // ════════════════════════════════════
    function setRequisitionMode(mode) {
        requisitionMode = mode;

        const positionTitleCol    = document.getElementById('positionTitleCol');
        const numberOfCoachesCol  = document.getElementById('numberOfCoachesCol');
        const positionTitleSelect = document.getElementById('positionTitleSelect');
        const numberInput         = document.querySelector('input[name="number_of_coaches"]');
        const addBtn              = document.getElementById('addCoachBtn');
        const tableBody           = document.querySelector('#proposedCoachesTable tbody');
        const selfHint             = document.getElementById('selfModeHint');
        const selfCard             = document.getElementById('reqForSelfCard');
        const othersCard           = document.getElementById('reqForOthersCard');
        const positionDetailsHint  = document.getElementById('positionDetailsHint');
        const proposedPositionsHint = document.getElementById('proposedPositionsHint');

        // Toggle the visual selected state on the picker cards, if present
        // (roles without the "someone else" option never render them).
        if (selfCard) selfCard.classList.toggle('is-selected', mode === 'self');
        if (othersCard) othersCard.classList.toggle('is-selected', mode === 'others');

        if (mode === 'self') {
            // Role & coach fields aren't needed - fill directly from the logged-in user.
            positionTitleCol.style.display = 'none';
            numberOfCoachesCol.style.display = 'none';
            positionTitleSelect.value = currentUserData.role_name || '';
            if (numberInput) numberInput.value = 1;
            addBtn.style.display = 'none';
            if (selfHint) selfHint.style.display = 'flex';
            if (positionDetailsHint) positionDetailsHint.textContent = 'Role auto-filled from your profile — just set the dates & arrangement';
            if (proposedPositionsHint) proposedPositionsHint.textContent = 'Your details are filled in — just add a justification';
        } else {
            positionTitleCol.style.display = '';
            numberOfCoachesCol.style.display = '';
            addBtn.style.display = '';
            if (selfHint) selfHint.style.display = 'none';
            if (positionDetailsHint) positionDetailsHint.textContent = "Who's needed, where, and for how long";
            if (proposedPositionsHint) proposedPositionsHint.textContent = 'Add each coach and their justification';
            // Clear the auto-filled self value so the requester picks explicitly.
            if (positionTitleSelect.value === currentUserData.role_name) {
                positionTitleSelect.value = '';
            }
        }

        // Rebuild the proposed positions table for the newly selected mode.
        rowCounter = 0;
        tableBody.innerHTML = '';
        tableBody.appendChild(createCoachRow(mode === 'self'));
        updateCoachCount();
        updateRemoveButtonsState();
        updateEngagementTotal();
        reindexCoachRows();
        validateRequisitionForm();
    }

    // ════════════════════════════════════
    // ENGAGEMENT TERMS DYNAMIC FIELDS
    // ════════════════════════════════════
    function updateEngagementFields() {
        const type = document.getElementById('engagement-type').value;
        const fields = document.getElementById('engagement-fields');
        fields.innerHTML = '';
        if (!type) { validateRequisitionForm(); return; }
        let html = '';
        if (type === 'hourly') {
            html = `<div class='row g-2'>
                <div class='col-md-4 mb-2'><label class='form-label'>Rate per Hour (KES)</label><input type='number' class='form-control' name='engagement_rate' id='rate-hour' min='0' required></div>
                <div class='col-md-4 mb-2'><label class='form-label'>Total Hours</label><input type='number' class='form-control' name='engagement_hours' id='total-hours' readonly></div>
                <div class='col-md-4 mb-2'><label class='form-label'>Total Amount</label><input type='text' class='form-control' id='engagement-total' name='engagement_total' readonly></div>
            </div>`;
        } else if (type === 'daily') {
            html = `<div class='row g-2'>
                <div class='col-md-4 mb-2'><label class='form-label'>Rate per Day (KES)</label><input type='number' class='form-control' name='engagement_rate' id='rate-day' min='0' required></div>
                <div class='col-md-4 mb-2'><label class='form-label'>Total Days</label><input type='number' class='form-control' name='engagement_days' id='total-days' readonly></div>
                <div class='col-md-4 mb-2'><label class='form-label'>Total Amount</label><input type='text' class='form-control' id='engagement-total' name='engagement_total' readonly></div>
            </div>`;
        } else if (type === 'fixed') {
            html = `<div class='row g-2'>
                <div class='col-md-4 mb-2'><label class='form-label'>Fixed Total Amount (KES)</label><input type='number' class='form-control' name='engagement_rate' id='fixed-amount' min='0' required></div>
                <div class='col-md-4 mb-2'></div>
                <div class='col-md-4 mb-2'><label class='form-label'>Total Amount</label><input type='text' class='form-control' id='engagement-total' name='engagement_total' readonly></div>
            </div>`;
        }
        fields.innerHTML = html;
        bindEngagementFieldListeners();
        updateEngagementTotal();
        validateRequisitionForm();
    }

    function bindEngagementFieldListeners() {
        ['rate-hour', 'rate-day', 'fixed-amount'].forEach(id => {
            const input = document.getElementById(id);
            if (input) {
                input.addEventListener('input', function () { updateEngagementTotal(); validateRequisitionForm(); });
                input.addEventListener('change', function () { updateEngagementTotal(); validateRequisitionForm(); });
            }
        });
    }

    function updateEngagementTotal() {
        const type  = document.getElementById('engagement-type').value;
        const start = document.querySelector('input[name="start_date"]').value;
        const end   = document.querySelector('input[name="end_date"]').value;
        let total   = 0;

        if (type === 'hourly') {
            const rateEl = document.getElementById('rate-hour');
            const rate = rateEl ? (parseFloat(rateEl.value) || 0) : 0;
            let hours = 0;
            if (start && end) {
                hours = Math.max(0, Math.floor((new Date(end) - new Date(start)) / (1000 * 60 * 60)));
            }
            const totalHoursEl = document.getElementById('total-hours');
            if (totalHoursEl) totalHoursEl.value = hours;
            total = rate * hours;
        } else if (type === 'daily') {
            const rateEl = document.getElementById('rate-day');
            const rate = rateEl ? (parseFloat(rateEl.value) || 0) : 0;
            let days = 0;
            if (start && end) {
                days = Math.floor((new Date(end) - new Date(start)) / (1000 * 60 * 60 * 24)) + 1;
                days = days > 0 ? days : 0;
            }
            const totalDaysEl = document.getElementById('total-days');
            if (totalDaysEl) totalDaysEl.value = days;
            total = rate * days;
        } else if (type === 'fixed') {
            const fixedEl = document.getElementById('fixed-amount');
            total = fixedEl ? (parseFloat(fixedEl.value) || 0) : 0;
        }

        const coachCount = document.querySelectorAll('#proposedCoachesTable tbody tr').length || 1;
        const grandTotal = total * coachCount;
        const totalEl    = document.getElementById('engagement-total');
        if (totalEl) {
            totalEl.value = 'KES ' + grandTotal.toLocaleString();
        }
        const totalCostInput = document.querySelector('input[name="total_cost"]');
        if (totalCostInput) {
            totalCostInput.value = grandTotal;
        }
    }

    // ════════════════════════════════════
    // END DATE CAP: max end of the start date's month
    // ════════════════════════════════════
    function toISODate(d) {
        return d.toISOString().split('T')[0];
    }

function applyEndDateBounds() {
    const startInput = document.getElementById('startDateInput');
    const endInput   = document.getElementById('endDateInput');
    if (!startInput.value) {
        endInput.value = '';
        endInput.disabled = true;
        return;
    }
    const start = new Date(startInput.value + 'T00:00:00');

    // Last calendar day of the start date's month
    const lastDayOfMonth = new Date(start.getFullYear(), start.getMonth() + 1, 1);

    // Absolute fallback ceiling: 31 days from start
    const absoluteCap = new Date(start);
    absoluteCap.setDate(absoluteCap.getDate() + 31);

    // Use whichever is earlier — in practice the month-end is always the
    // tighter bound, but the 31-day cap guards against any edge case.
    const maxEnd = lastDayOfMonth <= absoluteCap ? lastDayOfMonth : absoluteCap;

    endInput.disabled = false;
    endInput.min = startInput.value;
    endInput.max = toISODate(maxEnd);

    // If a previously chosen end date now falls outside the new window, clamp it
    if (endInput.value) {
        const end = new Date(endInput.value + 'T00:00:00');
        if (end < start) endInput.value = startInput.value;
        if (end > maxEnd) endInput.value = toISODate(maxEnd);
    }
}

    // ════════════════════════════════════
    // FORM-WIDE VALIDATION / SUBMIT BUTTON STATE
    // ════════════════════════════════════
    function validateRequisitionForm() {
        const form = document.getElementById('requisitionForm');
        const submitBtn = document.getElementById('submitRequisitionBtn');
        const statusText = document.getElementById('reqStatusText');

        const modeChosen = !!document.querySelector('input[name="requisition_for"]:checked');
        const nativeValid = form.checkValidity();
        const hasCoachRows = document.querySelectorAll('#proposedCoachesTable tbody tr').length > 0;
        const justificationsOk = allJustificationsValid();

        const isReady = modeChosen && nativeValid && hasCoachRows && justificationsOk;

        submitBtn.disabled = !isReady;
        if (isReady) {
            statusText.textContent = 'All set — ready to submit';
            statusText.classList.add('ready');
        } else if (!modeChosen) {
            statusText.textContent = 'Select who this requisition is for to continue';
            statusText.classList.remove('ready');
        } else {
            statusText.textContent = 'Complete all required fields to continue';
            statusText.classList.remove('ready');
        }
        return isReady;
    }

    // ════════════════════════════════════
    // DOM READY
    // ════════════════════════════════════
    document.addEventListener('DOMContentLoaded', function () {
        const form            = document.getElementById('requisitionForm');
        const tableBody       = document.querySelector('#proposedCoachesTable tbody');
        const addBtn          = document.getElementById('addCoachBtn');
        const numberInput     = document.querySelector('input[name="number_of_coaches"]');
        const startDateInput  = document.getElementById('startDateInput');
        const endDateInput    = document.getElementById('endDateInput');
        const positionSelect  = document.getElementById('positionTitleSelect');

        // Who is this for? Roles that may not requisition on someone else's
        // behalf never get the radio inputs (only a hidden "self" field), so
        // there's nothing to wire up for them beyond the default below.
        const requisitionForRadios = document.querySelectorAll('input[name="requisition_for"][type="radio"]');
        if (requisitionForRadios.length) {
            requisitionForRadios.forEach(function (radio) {
                radio.addEventListener('change', function () {
                    setRequisitionMode(this.value);
                });
            });
        }

        // Start date drives the end-date window
        startDateInput.addEventListener('change', function () {
            applyEndDateBounds();
            updateEngagementTotal();
            validateRequisitionForm();
        });
        endDateInput.addEventListener('change', function () {
            updateEngagementTotal();
            validateRequisitionForm();
        });

        // Add coach row button (only relevant in "others" mode)
        addBtn.addEventListener('click', function () {
            if (requisitionMode === 'self') return;
            tableBody.appendChild(createCoachRow(false));
            updateCoachCount();
            updateRemoveButtonsState();
            updateEngagementTotal();
            reindexCoachRows();
            validateRequisitionForm();
        });

        // Sync rows when number input changes (only relevant in "others" mode)
        numberInput.addEventListener('input', function () {
            if (requisitionMode === 'self') return;
            let required = parseInt(numberInput.value) || 1;
            let current  = tableBody.querySelectorAll('tr').length;
            while (current < required) { tableBody.appendChild(createCoachRow(false)); current++; }
            while (current > required && current > 0) { tableBody.lastElementChild.remove(); current--; }
            updateCoachCount();
            updateRemoveButtonsState();
            updateEngagementTotal();
            reindexCoachRows();
            validateRequisitionForm();
        });

        // Update coach dropdowns when position/role changes (only relevant in "others" mode)
        if (positionSelect) {
            positionSelect.addEventListener('change', function () {
                if (requisitionMode === 'self') return;
                document.querySelectorAll('.coach-select').forEach(function (select) {
                    if (select.tagName !== 'SELECT') return;
                    const currentValue = select.value;
                    select.innerHTML = getUserOptions();
                    for (let i = 0; i < select.options.length; i++) {
                        if (select.options[i].value === currentValue) {
                            select.selectedIndex = i;
                            break;
                        }
                    }
                    select.dispatchEvent(new Event('change'));
                });
                validateRequisitionForm();
            });
        }

        // Any generic field change re-checks overall validity
        form.addEventListener('input', validateRequisitionForm);
        form.addEventListener('change', validateRequisitionForm);

        // ════════════════════════════════════
        // SUBMIT: show loader, lock the form, prevent double-submit
        // ════════════════════════════════════
        let isSubmitting = false;
        const submitBtn = document.getElementById('submitRequisitionBtn');
        const submitBtnOriginalHtml = submitBtn.innerHTML;

        form.addEventListener('submit', function (e) {
            // Guard against Enter-key submits bypassing the disabled button,
            // and against any accidental double submission.
            if (isSubmitting) {
                e.preventDefault();
                return;
            }
            if (!validateRequisitionForm()) {
                e.preventDefault();
                return;
            }

            isSubmitting = true;
            form.classList.add('is-submitting');
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Submitting…';
          
        });

       
        addBtn.style.display = 'none';
        const checkedRadio = document.querySelector('input[name="requisition_for"]:checked');
        setRequisitionMode(checkedRadio ? checkedRadio.value : 'self');

        applyEndDateBounds();
        validateRequisitionForm();
    });
</script>
@endsection