
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manager Dashboard - Mom Donny Daycare</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 min-h-screen text-slate-800">

    <header class="bg-white border-b border-slate-200 sticky top-0 z-30">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="bg-rose-600 text-white p-2 rounded-xl font-bold text-sm">MDD</div>
                <div>
                    <h1 class="font-bold text-slate-900 text-sm sm:text-base leading-tight">Mom Donny Daycare</h1>
                    <p class="text-xs text-slate-400">absensi.daycaresurabaya.com</p>
                </div>
            </div>
            <a href="index.html" class="text-xs bg-slate-100 hover:bg-slate-200 px-3 py-2 rounded-lg font-medium text-slate-600 transition">
                📱 Mode Staff
            </a>
        </div>
    </header>

    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

        
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
            
            <!-- Tambah Shift -->
            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
                <h2 class="text-sm font-bold text-slate-900 mb-4">⏱️ Master Shift Kerja</h2>
                <form action="admin.php" method="POST" class="space-y-3">
                    <input type="hidden" name="action" value="add_shift">
                    <div>
                        <label class="block text-xs font-semibold text-slate-500 uppercase mb-1">Nama Shift</label>
                        <input type="text" name="shift_name" placeholder="Misal: Pagi - Teacher" required class="w-full px-3 py-2 border border-slate-300 rounded-lg text-xs focus:ring-2 focus:ring-rose-500 focus:outline-none">
                    </div>
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="block text-xs font-semibold text-slate-500 uppercase mb-1">Jam Masuk</label>
                            <input type="time" name="time_in" required class="w-full px-3 py-2 border border-slate-300 rounded-lg text-xs focus:ring-2 focus:ring-rose-500 focus:outline-none">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-500 uppercase mb-1">Jam Pulang</label>
                            <input type="time" name="time_out" required class="w-full px-3 py-2 border border-slate-300 rounded-lg text-xs focus:ring-2 focus:ring-rose-500 focus:outline-none">
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-500 uppercase mb-1">Toleransi Terlambat (Menit)</label>
                        <input type="number" name="late_tolerance_minutes" value="10" min="0" required class="w-full px-3 py-2 border border-slate-300 rounded-lg text-xs focus:ring-2 focus:ring-rose-500 focus:outline-none">
                    </div>
                    <button type="submit" class="w-full bg-rose-600 hover:bg-rose-700 text-white font-semibold py-2.5 rounded-lg text-xs transition">
                        Simpan Shift
                    </button>
                </form>
            </div>

            <!-- Assign Shift -->
            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
                <h2 class="text-sm font-bold text-slate-900 mb-4">📅 Penjadwalan Staff</h2>
                <form action="admin.php" method="POST" class="space-y-3">
                    <input type="hidden" name="action" value="assign_shift">
                    <div>
                        <label class="block text-xs font-semibold text-slate-500 uppercase mb-1">Staff</label>
                        <select name="user_id" required class="w-full px-3 py-2 border border-slate-300 rounded-lg text-xs focus:ring-2 focus:ring-rose-500 focus:outline-none">
                            <option value="">-- Pilih Staff --</option>
                                                            <option value="3">
                                    Dewi Lestari (ASSISTANT)
                                </option>
                                                            <option value="2">
                                    Siti Aisyah (TEACHER)
                                </option>
                                                    </select>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-500 uppercase mb-1">Shift</label>
                        <select name="shift_id" required class="w-full px-3 py-2 border border-slate-300 rounded-lg text-xs focus:ring-2 focus:ring-rose-500 focus:outline-none">
                            <option value="">-- Pilih Shift --</option>
                                                            <option value="2">
                                    Pagi - Assistant (06:00 - 14:00)
                                </option>
                                                            <option value="1">
                                    Pagi - Teacher (06:30 - 14:30)
                                </option>
                                                            <option value="3">
                                    Siang - Teacher (10:00 - 18:00)
                                </option>
                                                    </select>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-500 uppercase mb-1">Tanggal</label>
                        <input type="date" name="work_date" value="2026-07-31" required class="w-full px-3 py-2 border border-slate-300 rounded-lg text-xs focus:ring-2 focus:ring-rose-500 focus:outline-none">
                    </div>
                    <button type="submit" class="w-full bg-slate-800 hover:bg-slate-900 text-white font-semibold py-2.5 rounded-lg text-xs transition">
                        Assign Shift
                    </button>
                </form>
            </div>

        </div>

        <!-- Tabel Absensi -->
        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
            <div class="p-6 border-b border-slate-200 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                <div>
                    <h2 class="text-base font-bold text-slate-900">📋 Rekap Absensi Staff</h2>
                    <p class="text-xs text-slate-400">Laporan kehadiran harian staff Mom Donny Daycare</p>
                </div>
                <form action="admin.php" method="GET" class="flex items-center gap-2">
                    <input type="date" name="filter_date" value="2026-07-31" class="px-3 py-1.5 border border-slate-300 rounded-lg text-xs focus:ring-2 focus:ring-rose-500 focus:outline-none">
                    <button type="submit" class="bg-slate-100 hover:bg-slate-200 text-slate-700 px-3 py-1.5 rounded-lg text-xs font-semibold transition">
                        Filter
                    </button>
                </form>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-slate-50 text-slate-500 text-[11px] uppercase font-semibold border-b border-slate-200">
                            <th class="py-3 px-4">Staff</th>
                            <th class="py-3 px-4">Shift</th>
                            <th class="py-3 px-4">Jam Absen</th>
                            <th class="py-3 px-4">Foto</th>
                            <th class="py-3 px-4">Status</th>
                            <th class="py-3 px-4">Lokasi GPS</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-200 text-xs">
                                                    <tr>
                                <td colspan="6" class="py-8 text-center text-slate-400">
                                    Belum ada data absensi pada tanggal 2026-07-31.
                                </td>
                            </tr>
                                            </tbody>
                </table>
            </div>
        </div>

    </main>

</body>
</html>