=== ROSTER.PHP LEAVE AUTHORIZATION UPDATES ===

Update these sections in the order listed:

##############################################################################
## 1. UPDATE: Action dropdown (line ~531) - Add "Authorize Leave" option
##############################################################################

FIND (line ~531):
            <select id="bulkAction" class="form-select form-select-sm">
                <option value="">-- Select Action --</option>
                <option value="add">Add to Shift</option>
                <option value="remove">Remove from Shift</option>
            </select>

REPLACE WITH:
            <select id="bulkAction" class="form-select form-select-sm" onchange="handleActionChange()">
                <option value="">-- Select Action --</option>
                <option value="add">Add to Shift</option>
                <option value="remove">Remove from Shift</option>
                <option value="leave">Authorize Leave</option>
            </select>

##############################################################################
## 2. ADD: Leave selection panel (AFTER shiftSelectionPanel, line ~552)
##############################################################################

ADD AFTER THE shiftSelectionPanel closing </div>:

        <!-- Leave Selection Panel -->
        <div id="leaveSelectionPanel" style="display: none;">
            <div class="mb-3">
                <label class="form-label fw-bold">Leave Type</label>
                <select id="bulkLeaveType" class="form-select form-select-sm" onchange="handleLeaveTypeChange()">
                    <option value="">-- Select Leave Type --</option>
                    <option value="PL">Paid Leave (PL)</option>
                    <option value="FO">Day Off (FO)</option>
                    <option value="HO">Half Day Off (HO)</option>
                    <option value="UL">Unpaid Leave (UL)</option>
                    <option value="ML">Medical Leave (ML)</option>
                </select>
            </div>

            <div id="halfDayPanel" style="display: none;" class="mb-3">
                <label class="form-label fw-bold">Half-Day Period</label>
                <select id="bulkHalfDayPeriod" class="form-select form-select-sm" onchange="handleHalfDayPeriodChange()">
                    <option value="">-- Select Period --</option>
                    <option value="first_half">First Half of Day</option>
                    <option value="second_half">Second Half of Day</option>
                    <option value="custom">Custom Time Range</option>
                </select>
            </div>

            <div id="customTimePanel" style="display: none;" class="mb-3">
                <div class="row">
                    <div class="col-6">
                        <label class="form-label small">From</label>
                        <input type="time" id="bulkTimeFrom" class="form-control form-control-sm">
                    </div>
                    <div class="col-6">
                        <label class="form-label small">To</label>
                        <input type="time" id="bulkTimeTo" class="form-control form-control-sm">
                    </div>
                </div>
            </div>
        </div>

##############################################################################
## 3. REPLACE: JavaScript action change handler (line ~177-186)
##############################################################################

FIND:
// Handle action change
document.getElementById('bulkAction').addEventListener('change', function() {
    const action = this.value;
    const shiftPanel = document.getElementById('shiftSelectionPanel');

    if (action === 'add') {
        shiftPanel.style.display = 'block';
    } else {
        shiftPanel.style.display = 'none';
    }
});

REPLACE WITH:
// Handle action change
function handleActionChange() {
    const action = document.getElementById('bulkAction').value;
    const shiftPanel = document.getElementById('shiftSelectionPanel');
    const leavePanel = document.getElementById('leaveSelectionPanel');

    // Hide all panels first
    shiftPanel.style.display = 'none';
    leavePanel.style.display = 'none';

    // Show relevant panel
    if (action === 'add') {
        shiftPanel.style.display = 'block';
    } else if (action === 'leave') {
        leavePanel.style.display = 'block';
    }
}

// Handle leave type change
function handleLeaveTypeChange() {
    const leaveType = document.getElementById('bulkLeaveType').value;
    const halfDayPanel = document.getElementById('halfDayPanel');

    if (leaveType === 'HO') {
        halfDayPanel.style.display = 'block';
    } else {
        halfDayPanel.style.display = 'none';
    }
}

// Handle half-day period change
function handleHalfDayPeriodChange() {
    const period = document.getElementById('bulkHalfDayPeriod').value;
    const customTimePanel = document.getElementById('customTimePanel');

    if (period === 'custom') {
        customTimePanel.style.display = 'block';
    } else {
        customTimePanel.style.display = 'none';
    }
}

##############################################################################
## 4. UPDATE: applyBulkAction function (line ~193-295) - Add leave handling
##############################################################################

FIND the section in applyBulkAction where shift data is collected (around line 208-226):

    let shiftPatternId = null;
    let shiftName = null;
    let startTime = null;
    let endTime = null;

    if (action === 'add') {
        const shiftSelect = document.getElementById('bulkShiftPattern');
        shiftPatternId = shiftSelect.value;

        if (!shiftPatternId) {
            alert('Please select a shift');
            return;
        }

        const selectedOption = shiftSelect.options[shiftSelect.selectedIndex];
        shiftName = selectedOption.dataset.name;
        startTime = selectedOption.dataset.start;
        endTime = selectedOption.dataset.end;
    }

REPLACE WITH:

    let shiftPatternId = null;
    let shiftName = null;
    let startTime = null;
    let endTime = null;
    let absenceType = null;
    let halfDayPeriod = null;
    let timeFrom = null;
    let timeTo = null;

    if (action === 'add') {
        const shiftSelect = document.getElementById('bulkShiftPattern');
        shiftPatternId = shiftSelect.value;

        if (!shiftPatternId) {
            alert('Please select a shift');
            return;
        }

        const selectedOption = shiftSelect.options[shiftSelect.selectedIndex];
        shiftName = selectedOption.dataset.name;
        startTime = selectedOption.dataset.start;
        endTime = selectedOption.dataset.end;
    } else if (action === 'leave') {
        absenceType = document.getElementById('bulkLeaveType').value;

        if (!absenceType) {
            alert('Please select a leave type');
            return;
        }

        if (absenceType === 'HO') {
            halfDayPeriod = document.getElementById('bulkHalfDayPeriod').value;
            if (!halfDayPeriod) {
                alert('Please select half-day period');
                return;
            }

            if (halfDayPeriod === 'custom') {
                timeFrom = document.getElementById('bulkTimeFrom').value;
                timeTo = document.getElementById('bulkTimeTo').value;
                if (!timeFrom || !timeTo) {
                    alert('Please specify time range for custom half-day');
                    return;
                }
            }
        }

        if (!notes) {
            alert('Please provide a reason for the leave');
            return;
        }
    }

##############################################################################
## 5. UPDATE: currentBulkData object (line ~239-250) - Add leave fields
##############################################################################

FIND:
    // Store data for conflict resolution
    currentBulkData = {
        location_id: <?php echo $selected_location; ?>,
        action: action,
        overrides: overrides,
        shift_pattern_id: shiftPatternId,
        shift_name: shiftName,
        start_time: startTime,
        end_time: endTime,
        notes: notes,
        authorized_by: authorizeAs,
        resolve_conflicts: resolveConflicts
    };

REPLACE WITH:
    // Store data for conflict resolution
    currentBulkData = {
        location_id: <?php echo $selected_location; ?>,
        action: action,
        overrides: overrides,
        shift_pattern_id: shiftPatternId,
        shift_name: shiftName,
        start_time: startTime,
        end_time: endTime,
        absence_type: absenceType,
        half_day_period: halfDayPeriod,
        time_from: timeFrom,
        time_to: timeTo,
        notes: notes,
        authorized_by: authorizeAs,
        resolve_conflicts: resolveConflicts
    };

##############################################################################
DONE! These updates will add leave authorization to the roster page.
##############################################################################
