<?php
session_start();
session_write_close();
require 'config.php';

if (!isset($_SESSION['user_id'])) {
    header("Location: login.php");
    exit;
}

$role = $_SESSION['role'] ?? 'staff';
$username = $_SESSION['username'] ?? 'User';

// ===========================
// LOAD SHIFTS
// ===========================
$shifts = [];
$res = $conn->query("SELECT * FROM shifts ORDER BY name");

while ($row = $res->fetch_assoc()) {
    $checkin = strtotime($row['checkin']);
    $checkout = strtotime($row['checkout']);

    if (!empty($row['crosses_midnight']) && $checkout < $checkin) {
        $checkout += 86400;
    }

    $hours = ($checkout - $checkin) / 3600;
    $row['total_hours'] = round($hours, 2);
    $shifts[] = $row;
}

// ===========================
// HANDLE POST
// ===========================
if ($_SERVER['REQUEST_METHOD'] === 'POST') {

    // CREATE SHIFT
    if (!empty($_POST['new_shift_name'])) {
        $cross = isset($_POST['new_shift_cross']) ? 1 : 0;
        $description = trim($_POST['new_shift_description'] ?? '');
        $description = $description !== '' ? $description : null;
        $stmt = $conn->prepare("INSERT INTO shifts (name, description, checkin, checkout, crosses_midnight, color) VALUES (?, ?, ?, ?, ?, ?)");
        $stmt->bind_param("ssssis", 
            $_POST['new_shift_name'], 
            $description,
            $_POST['new_shift_checkin'], 
            $_POST['new_shift_checkout'], 
            $cross, 
            $_POST['new_shift_color']
        );
        $stmt->execute();
        $stmt->close();

        header("Location: shift.php?saved=1");
        exit;
    }

    // EDIT SHIFT
    if (!empty($_POST['edit_shift_id'])) {
        $cross = isset($_POST['edit_shift_cross']) ? 1 : 0;
        $description = trim($_POST['edit_shift_description'] ?? '');
        $description = $description !== '' ? $description : null;
        $stmt = $conn->prepare("UPDATE shifts SET name=?, description=?, checkin=?, checkout=?, crosses_midnight=?, color=? WHERE id=?");
        $stmt->bind_param("ssssisi", 
            $_POST['edit_shift_name'], 
            $description,
            $_POST['edit_shift_checkin'], 
            $_POST['edit_shift_checkout'], 
            $cross, 
            $_POST['edit_shift_color'], 
            $_POST['edit_shift_id']
        );
        $stmt->execute();
        $stmt->close();

        header("Location: shift.php?updated=1");
        exit;
    }

    // DELETE SHIFT
    if (!empty($_POST['delete_shift_id'])) {
        $shiftId = intval($_POST['delete_shift_id']);
        
        $stmt = $conn->prepare("SELECT COUNT(*) FROM employees WHERE shift_id = ?");
        $stmt->bind_param("i", $shiftId);
        $stmt->execute();
        $stmt->bind_result($count);
        $stmt->fetch();
        $stmt->close();

        if ($count > 0) {
            header("Location: shift.php?error=shift_in_use");
            exit;
        }

        $stmt = $conn->prepare("DELETE FROM shifts WHERE id = ?");
        $stmt->bind_param("i", $shiftId);
        $stmt->execute();
        $stmt->close();

        header("Location: shift.php?deleted=1");
        exit;
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shift Management - HR System</title>
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght=0,200..1000;1,200..1000&display=swap" rel="stylesheet">
    
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Mulish', 'sans-serif'],
                    }
                }
            }
        }
    </script>
    <link rel="stylesheet" href="components/sidebar.css">
</head>
<body class="bg-stone-100/60 min-h-screen text-slate-800 antialiased selection:bg-indigo-600 selection:text-white font-sans">

    <div class="flex">
        
        <?php include 'components/sidebar.php'; ?>

        <div id="sidebar-overlay" class="fixed inset-0 bg-slate-900/40 hidden z-40 transition-opacity duration-300" onclick="toggleSidebar()"></div>

        <div id="main-content" class="flex-1 min-w-0 md:pl-60 transition-all duration-300 min-h-screen flex flex-col">
            
            <header class="sticky top-0 bg-white/90 backdrop-blur-md border-b border-slate-300/80 h-14 flex items-center justify-between px-4 sm:px-6 z-30 shadow-xs">
                <div class="flex items-center gap-3">
                    <button onclick="toggleSidebar()" class="p-1.5 rounded-lg text-slate-600 hover:bg-slate-200/80 transition active:scale-95" aria-label="Toggle Side Area Menu">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                    </button>
                    <div>
                        <h1 class="text-sm font-black tracking-tight text-slate-950">Shift Management</h1>
                        <p class="text-[10px] text-indigo-700 font-bold uppercase tracking-wider">Workload Rotation Configuration</p>
                    </div>
                </div>
                
                <div class="flex items-center gap-4">
                    <div class="hidden sm:flex flex-col text-right">
                        <span class="text-[11px] font-extrabold text-slate-950 leading-tight"><?= htmlspecialchars($username); ?></span>
                        <span class="text-[9px] text-indigo-700 uppercase font-black tracking-wider leading-none mt-0.5"><?= htmlspecialchars($role ?: 'Staff'); ?></span>
                    </div>
                    <div class="w-7 h-7 bg-slate-200 border border-slate-300 rounded-lg flex items-center justify-center font-black text-xs text-slate-700 select-none uppercase">
                        <?= strtoupper(substr($username, 0, 1)); ?>
                    </div>
                </div>
            </header>

            <main class="flex-1 p-4 sm:p-6 max-w-7xl w-full mx-auto space-y-6">

                <!-- Notifications Panel -->
                <?php if(isset($_GET['saved'])): ?>
                <div class="bg-emerald-50 border border-emerald-300 text-emerald-900 p-4 rounded-xl shadow-xs flex items-start gap-3 transition">
                    <div class="text-base leading-none mt-0.5">✅</div>
                    <div class="space-y-0.5">
                        <h3 class="font-black text-xs text-emerald-950">Shift Synchronized</h3>
                        <p class="text-[11px] text-emerald-700 font-semibold leading-tight">Shift template updated into structural timeline database.</p>
                    </div>
                </div>
                <?php endif; ?>

                <?php if(isset($_GET['updated'])): ?>
                <div class="bg-indigo-50 border border-indigo-300 text-indigo-900 p-4 rounded-xl shadow-xs flex items-start gap-3 transition">
                    <div class="text-base leading-none mt-0.5">⚙️</div>
                    <div class="space-y-0.5">
                        <h3 class="font-black text-xs text-indigo-950">Shift Overhaul Processed</h3>
                        <p class="text-[11px] text-indigo-700 font-semibold leading-tight">Shift parameter updates and criteria mutation modifications finalized.</p>
                    </div>
                </div>
                <?php endif; ?>

                <?php if(isset($_GET['deleted'])): ?>
                <div class="bg-rose-50 border border-rose-300 text-rose-900 p-4 rounded-xl shadow-xs flex items-start gap-3 transition">
                    <div class="text-base leading-none mt-0.5">🗑️</div>
                    <div class="space-y-0.5">
                        <h3 class="font-black text-xs text-rose-950">Shift Erased</h3>
                        <p class="text-[11px] text-rose-700 font-semibold leading-tight">Shift allocation matrix item cleared from active directory registry pools.</p>
                    </div>
                </div>
                <?php endif; ?>

                <?php if(isset($_GET['error'])): ?>
                <div class="bg-amber-50 border border-amber-300 text-amber-900 p-4 rounded-xl shadow-xs flex items-start gap-3 transition">
                    <div class="text-base leading-none mt-0.5">⚠️</div>
                    <div class="space-y-0.5">
                        <h3 class="font-black text-xs text-amber-950">Action Aborted</h3>
                        <p class="text-[11px] text-amber-700 font-semibold leading-tight">Cannot drop shift metric boundaries while actively assigned to current staff structures.</p>
                    </div>
                </div>
                <?php endif; ?>

                <!-- Upper Metrics Row -->
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div class="bg-white border border-slate-300/80 rounded-xl p-4 shadow-sm">
                        <div class="flex items-start justify-between">
                            <div class="space-y-1">
                                <p class="text-[10px] font-extrabold text-slate-500 uppercase tracking-wider">Active Rotations</p>
                                <h4 class="text-2xl font-black tracking-tight text-slate-950"><?= count($shifts) ?></h4>
                                <p class="text-[10px] text-slate-600 font-semibold">Total baseline workload schedules defined.</p>
                            </div>
                            <div class="w-8 h-8 rounded-lg bg-indigo-50 border border-indigo-200 flex items-center justify-center text-sm shrink-0">⏱️</div>
                        </div>
                    </div>

                    <div class="bg-gradient-to-br from-slate-900 to-indigo-950 border border-slate-800 rounded-xl p-4 shadow-sm text-white sm:col-span-2 flex flex-col justify-between">
                        <div class="flex items-center justify-between gap-4">
                            <div class="space-y-0.5">
                                <p class="text-[9px] font-black text-indigo-300 uppercase tracking-widest">Time Engine Module</p>
                                <h4 class="text-xs font-bold text-slate-100">Workforce Schedule System Baseline</h4>
                            </div>
                            <div class="text-lg">⏰</div>
                        </div>
                        <p class="text-[11px] text-slate-300 font-semibold mt-2 max-w-xl">Configure operational calendar horizons and attendance parameters down to explicit biometric verification parameters.</p>
                    </div>
                </div>

                <!-- Create Shift Section (Superadmin Guard) -->
                <?php if($role === 'superadmin'): ?>
                <div class="bg-white border border-slate-300/80 rounded-xl p-4 shadow-sm space-y-4">
                    <div class="flex items-center justify-between border-b border-slate-200 pb-2">
                        <div>
                            <p class="text-[9px] font-black text-indigo-700 uppercase tracking-widest">Structural Entry</p>
                            <h3 class="text-xs font-black text-slate-950 uppercase tracking-tight mt-0.5">Create New Shift Rotation</h3>
                        </div>
                        <span class="text-[9px] font-bold text-indigo-700 uppercase">Append workload engine</span>
                    </div>

                    <form method="POST" class="space-y-4">
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
                            <div class="space-y-1">
                                <label class="text-[10px] font-extrabold text-slate-500 uppercase tracking-wider">Shift Label</label>
                                <input type="text" name="new_shift_name" placeholder="e.g., Morning Shift" class="w-full border border-slate-300 bg-stone-50 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-100 focus:border-indigo-500 outline-none text-xs text-slate-800 font-bold" required>
                            </div>
                            <div class="space-y-1">
                                <label class="text-[10px] font-extrabold text-slate-500 uppercase tracking-wider">Target Check In</label>
                                <input type="time" name="new_shift_checkin" class="w-full border border-slate-300 bg-stone-50 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-100 focus:border-indigo-500 outline-none text-xs text-slate-800 font-mono font-bold" required>
                            </div>
                            <div class="space-y-1">
                                <label class="text-[10px] font-extrabold text-slate-500 uppercase tracking-wider">Target Check Out</label>
                                <input type="time" name="new_shift_checkout" class="w-full border border-slate-300 bg-stone-50 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-100 focus:border-indigo-500 outline-none text-xs text-slate-800 font-mono font-bold" required>
                            </div>
                            <div class="space-y-1">
                                <label class="text-[10px] font-extrabold text-slate-500 uppercase tracking-wider">Accent Scheme Color</label>
                                <div class="relative flex items-center h-8">
                                    <input type="color" name="new_shift_color" value="#4338ca" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
                                    <div class="w-full h-full border border-slate-300 bg-stone-50 rounded-lg flex items-center justify-between px-3 text-[11px] font-bold text-slate-700 select-none">
                                        <span>Select Hex Variant</span>
                                        <span class="w-4 h-4 rounded border border-slate-300 shadow-2xs" style="background-color: #4338ca;"></span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="space-y-1">
                            <label class="text-[10px] font-extrabold text-slate-500 uppercase tracking-wider">Description <span class="normal-case font-semibold text-slate-400">(shown when picking a shift, not on the grid itself)</span></label>
                            <input type="text" name="new_shift_description" placeholder="e.g., PM Housekeeping" class="w-full border border-slate-300 bg-stone-50 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-100 focus:border-indigo-500 outline-none text-xs text-slate-800 font-semibold">
                        </div>

                        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 pt-3 border-t border-slate-100">
                            <label class="inline-flex items-center gap-2 cursor-pointer select-none">
                                <input type="checkbox" name="new_shift_cross" class="w-4 h-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500 accent-indigo-600">
                                <span class="text-xs font-bold text-slate-600">Crosses Midnight Boundary Line (Next-Day Span Execution)</span>
                            </label>
                            <button type="submit" class="w-full sm:w-auto bg-slate-900 hover:bg-slate-800 active:scale-[0.99] transition text-white rounded-lg font-bold py-2 px-5 text-xs border border-slate-950 uppercase tracking-wider">
                                Save Shift Parameters
                            </button>
                        </div>
                    </form>
                </div>
                <?php endif; ?>

                <!-- Configured Matrix Output -->
                <div class="space-y-3">
                    <h3 class="text-[10px] font-black text-slate-500 uppercase tracking-wider px-1">Configured Rotations Matrix</h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <?php foreach($shifts as $shift): ?>
                        <div class="bg-white border border-slate-300/80 rounded-xl p-4 shadow-sm relative overflow-hidden flex flex-col justify-between group transition hover:border-slate-400">
                            <!-- Left Accent Visual Bar Indicator -->
                            <div class="absolute left-0 top-0 bottom-0 w-1.5" style="background-color: <?= $shift['color'] ?>"></div>
                            
                            <div class="pl-2">
                                <div class="flex items-center justify-between gap-4 border-b border-slate-100 pb-2.5 mb-3">
                                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[10px] font-black text-white shadow-xs" style="background-color: <?= $shift['color'] ?>;">
                                        <span class="w-1.5 h-1.5 rounded-full bg-white opacity-90"></span>
                                        <?= htmlspecialchars($shift['name']) ?>
                                    </span>
                                    <span class="bg-emerald-50 text-emerald-800 border border-emerald-200 px-2 py-0.5 rounded font-black text-[10px] font-mono">
                                        <?= $shift['total_hours'] ?> hrs
                                    </span>
                                </div>

                                <?php if (!empty($shift['description'])): ?>
                                    <p class="text-xs font-semibold text-slate-600 mb-3 -mt-1"><?= htmlspecialchars($shift['description']) ?></p>
                                <?php endif; ?>

                                <div class="grid grid-cols-3 gap-2 text-center text-xs text-slate-800 font-bold">
                                    <div class="bg-stone-50/50 border border-slate-200/80 rounded-lg p-2 flex flex-col justify-center">
                                        <span class="text-[9px] font-black text-slate-400 uppercase tracking-wider mb-0.5">Check In</span>
                                        <span class="font-mono text-xs font-black text-slate-900"><?= date("g:i A", strtotime($shift['checkin'])) ?></span>
                                    </div>
                                    <div class="bg-stone-50/50 border border-slate-200/80 rounded-lg p-2 flex flex-col justify-center">
                                        <span class="text-[9px] font-black text-slate-400 uppercase tracking-wider mb-0.5">Check Out</span>
                                        <span class="font-mono text-xs font-black text-slate-900"><?= date("g:i A", strtotime($shift['checkout'])) ?></span>
                                    </div>
                                    <div class="bg-stone-50/50 border border-slate-200/80 rounded-lg p-2 flex flex-col justify-center">
                                        <span class="text-[9px] font-black text-slate-400 uppercase tracking-wider mb-0.5">Midnight Span</span>
                                        <span class="text-[10px] font-extrabold uppercase <?= $shift['crosses_midnight'] ? 'text-indigo-700' : 'text-slate-500' ?>">
                                            <?= $shift['crosses_midnight'] ? 'Active 🌙' : 'Standard' ?>
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <?php if($role === 'superadmin'): ?>
                            <div class="flex gap-2 mt-4 pt-3 border-t border-slate-100 pl-2">
                                <button type="button" onclick="openEditModal(<?= htmlspecialchars(json_encode($shift)) ?>)" class="flex-1 bg-white hover:bg-slate-900 text-slate-800 hover:text-white border border-slate-300 hover:border-slate-900 py-1.5 rounded-lg text-[11px] font-black tracking-wider uppercase transition-all shadow-2xs active:scale-95">
                                    Modify
                                </button>
                                <form method="POST" class="flex-1" onsubmit="return confirm('Are you sure you want to completely erase this shift configuration? This action cannot be undone.');">
                                    <input type="hidden" name="delete_shift_id" value="<?= $shift['id'] ?>">
                                    <button type="submit" class="w-full bg-rose-50 text-rose-900 border border-rose-200 hover:bg-rose-600 hover:text-white hover:border-rose-600 py-1.5 rounded-lg text-[11px] font-black tracking-wider uppercase transition-all active:scale-[0.99]">
                                        Drop Shift
                                    </button>
                                </form>
                            </div>
                            <?php endif; ?>
                        </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </main>

            <footer class="mt-auto border-t border-slate-300 bg-white px-6 py-4 text-center">
                <p class="text-[9px] text-slate-500 font-mono tracking-wider">&copy; 2026 Core HR Engine System Platform • Dynamic Secure Architecture Protocol.</p>
            </footer>
        </div>
    </div>

    <!-- Edit Shift Modal Layer Structure -->
    <div id="editModal" class="fixed inset-0 bg-slate-900/40 backdrop-blur-xs hidden z-50 flex items-center justify-center p-4 transition-opacity duration-300">
        <div class="bg-white border border-slate-300/80 rounded-xl w-full max-w-md shadow-lg overflow-hidden transform scale-95 transition-transform duration-200">
            <div class="px-4 py-3 bg-stone-50 border-b border-slate-300/80 flex items-center justify-between">
                <div>
                    <h3 class="text-xs font-black text-slate-950 uppercase tracking-tight">Modify Rotation Matrix</h3>
                    <p class="text-[10px] text-slate-600 font-semibold mt-0.5">Edit operational system tracking thresholds.</p>
                </div>
                <button onclick="closeEditModal()" class="text-slate-400 hover:text-slate-900 text-lg leading-none p-1 transition">&times;</button>
            </div>
            
            <form method="POST" class="p-4 space-y-4">
                <input type="hidden" id="edit_shift_id" name="edit_shift_id">
                
                <div class="space-y-1">
                    <label class="text-[10px] font-extrabold text-slate-500 uppercase tracking-wider">Shift Rotation Name</label>
                    <input type="text" id="edit_shift_name" name="edit_shift_name" class="w-full border border-slate-300 bg-stone-50 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-100 focus:border-indigo-500 outline-none text-xs text-slate-800 font-bold" required>
                </div>

                <div class="space-y-1">
                    <label class="text-[10px] font-extrabold text-slate-500 uppercase tracking-wider">Description <span class="normal-case font-semibold text-slate-400">(shown when picking a shift, not on the grid itself)</span></label>
                    <input type="text" id="edit_shift_description" name="edit_shift_description" class="w-full border border-slate-300 bg-stone-50 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-100 focus:border-indigo-500 outline-none text-xs text-slate-800 font-semibold">
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <div class="space-y-1">
                        <label class="text-[10px] font-extrabold text-slate-500 uppercase tracking-wider">Check In Baseline</label>
                        <input type="time" id="edit_shift_checkin" name="edit_shift_checkin" class="w-full border border-slate-300 bg-stone-50 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-100 focus:border-indigo-500 outline-none text-xs text-slate-800 font-mono font-bold" required>
                    </div>
                    <div class="space-y-1">
                        <label class="text-[10px] font-extrabold text-slate-500 uppercase tracking-wider">Check Out Cutoff</label>
                        <input type="time" id="edit_shift_checkout" name="edit_shift_checkout" class="w-full border border-slate-300 bg-stone-50 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-100 focus:border-indigo-500 outline-none text-xs text-slate-800 font-mono font-bold" required>
                    </div>
                </div>

                <div class="space-y-1">
                    <label class="text-[10px] font-extrabold text-slate-500 uppercase tracking-wider">Interface Matrix Color</label>
                    <div class="relative flex items-center h-8">
                        <input type="color" id="edit_shift_color" name="edit_shift_color" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
                        <div class="w-full h-full border border-slate-300 bg-stone-50 rounded-lg flex items-center justify-between px-3 text-[11px] font-bold text-slate-700 select-none">
                            <span>Select Color Variant</span>
                            <span id="modalColorBlock" class="w-4 h-4 rounded border border-slate-300 shadow-2xs"></span>
                        </div>
                    </div>
                </div>

                <div class="pt-1">
                    <label class="inline-flex items-center gap-2 cursor-pointer select-none">
                        <input type="checkbox" id="edit_shift_cross" name="edit_shift_cross" class="w-4 h-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500 accent-indigo-600">
                        <span class="text-xs font-bold text-slate-600">Shift Crosses Midnight Interval Boundary</span>
                    </label>
                </div>

                <div class="flex gap-2 pt-3 border-t border-slate-100 justify-end text-xs">
                    <button type="button" onclick="closeEditModal()" class="border border-slate-300 bg-white hover:bg-stone-50 px-4 py-2 rounded-lg font-bold text-slate-700 transition">Cancel</button>
                    <button type="submit" class="bg-slate-900 hover:bg-slate-800 text-white font-bold px-4 py-2 rounded-lg border border-slate-950 transition uppercase tracking-wider">Commit Mutations</button>
                </div>
            </form>
        </div>
    </div>
<script src="components/sidebar.js"></script>
<script>
// Live Dynamic Color Node Synchronizer Blocks
const colorInput = document.querySelector('input[name="new_shift_color"]');
if(colorInput) {
    colorInput.addEventListener('input', function(e) {
        e.target.nextElementSibling.querySelector('span').style.backgroundColor = e.target.value;
    });
}

const modalColorInput = document.getElementById('edit_shift_color');
if(modalColorInput) {
    modalColorInput.addEventListener('input', function(e) {
        document.getElementById('modalColorBlock').style.backgroundColor = e.target.value;
    });
}

// Modal Display Trigger Frameworks
function openEditModal(shift) {
    document.getElementById('edit_shift_id').value = shift.id;
    document.getElementById('edit_shift_name').value = shift.name;
    document.getElementById('edit_shift_description').value = shift.description || '';
    document.getElementById('edit_shift_checkin').value = shift.checkin;
    document.getElementById('edit_shift_checkout').value = shift.checkout;
    document.getElementById('edit_shift_color').value = shift.color;
    document.getElementById('modalColorBlock').style.backgroundColor = shift.color;
    document.getElementById('edit_shift_cross').checked = parseInt(shift.crosses_midnight) === 1;

    const modal = document.getElementById('editModal');
    modal.classList.remove('hidden');
    setTimeout(() => {
        modal.firstElementChild.classList.remove('scale-95');
    }, 10);
}

function closeEditModal() {
    const modal = document.getElementById('editModal');
    modal.firstElementChild.classList.add('scale-95');
    setTimeout(() => {
        modal.classList.add('hidden');
    }, 150);
}

window.onclick = function(event) {
    const modal = document.getElementById('editModal');
    if (event.target === modal) {
        closeEditModal();
    }
}
</script>
</body>
</html>