<!-- Edit Shift Modal -->
<div id="editShiftModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
<div class="bg-white rounded p-6 w-96 relative">
<h2 class="text-lg font-semibold mb-4">Edit Shift</h2>

<form method="POST" id="editShiftForm">
<input type="hidden" name="edit_shift_id" id="edit_shift_id">

<div class="space-y-3">
<label>Shift Name</label>
<input type="text" name="edit_shift_name" id="edit_shift_name" class="border p-2 rounded w-full" required>

<label>Check-In</label>
<input type="time" name="edit_shift_checkin" id="edit_shift_checkin" class="border p-2 rounded w-full" required>

<label>Check-Out</label>
<input type="time" name="edit_shift_checkout" id="edit_shift_checkout" class="border p-2 rounded w-full" required>

<label class="flex items-center gap-2">
<input type="checkbox" name="edit_shift_cross" id="edit_shift_cross">
<span>Crosses Midnight</span>
</label>

<label>Shift Color</label>
<input type="color" name="edit_shift_color" id="edit_shift_color" class="w-full h-10 p-0 border-0">

</div>

<div class="flex justify-end gap-2 mt-4">
<button type="button" onclick="closeEditModal()" class="bg-gray-400 text-white px-4 py-2 rounded hover:bg-gray-500">Cancel</button>
<button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Save</button>
</div>
</form>
</div>
</div>

<script>
function openEditModal(id, name, checkin, checkout, cross, color) {
    document.getElementById('edit_shift_id').value = id;
    document.getElementById('edit_shift_name').value = name;
    document.getElementById('edit_shift_checkin').value = checkin;
    document.getElementById('edit_shift_checkout').value = checkout;
    document.getElementById('edit_shift_cross').checked = cross == 1;
    document.getElementById('edit_shift_color').value = color || '#3490dc';

    document.getElementById('editShiftModal').classList.remove('hidden');
    document.getElementById('editShiftModal').classList.add('flex');
}

function closeEditModal() {
    document.getElementById('editShiftModal').classList.add('hidden');
    document.getElementById('editShiftModal').classList.remove('flex');
}
</script>