<!DOCTYPE html>
<html lang="id">
<html lang="<?php echo e(str_replace('_', '-', app()->getLocale())); ?>">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>LPKA Kelas II Jakarta</title>

    <!-- Fonts & Styles -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />

    <!-- Favicon -->
    <link rel="icon" href="<?php echo e(asset('picture/favicon.ico')); ?>" type="image/x-icon">
    <link rel="shortcut icon" href="<?php echo e(asset('picture/favicon.ico')); ?>" type="image/x-icon">

    <?php echo app('Illuminate\Foundation\Vite')(['resources/css/app.css', 'resources/js/app.js']); ?>
</head>
        <body class="bg-white text-slate-900 dark:bg-[#0a0a0a] dark:text-slate-100">

        
        <div class="w-full border-b border-slate-200/70 dark:border-white/10">
            <div class="mx-auto max-w-6xl px-4 py-3 flex items-center justify-between gap-3">
                <div class="flex items-center gap-2">
                    <div class="h-9 w-9 rounded-xl shadow-sm"
                        style="background: url('<?php echo e(asset('picture/logolpka1.png')); ?>') no-repeat center/cover;">
                    </div>
                    <div class="leading-tight">
                        <div class="text-base font-semibold tracking-tight">LPKA Kelas II Jakarta</div>
                        <div class="text-xs text-slate-500 dark:text-slate-400">Portal kegiatan di LPKA Kelas II Jakarta</div>
                    </div>
                    </div>

                    <div class="flex items-center gap-2">
                            <?php if(Route::has('login')): ?>
                            <?php if(auth()->guard()->check()): ?>
                            <a href="<?php echo e(url('/dashboard')); ?>"
                            class="inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-medium
                                    bg-slate-900 text-white hover:bg-slate-800
                                    dark:bg-white dark:text-slate-900 dark:hover:bg-slate-200 transition">
                                Dashboard
                            </a>
                            <?php else: ?>
                            <a href="<?php echo e(route('login')); ?>"
                            class="inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-medium
                                    border border-slate-200 hover:border-slate-300 hover:bg-slate-50
                                    dark:border-white/10 dark:hover:bg-white/5 transition">
                                Log in
                            </a>

                            <?php if(Route::has('register')): ?>
                                <a href="<?php echo e(route('register')); ?>"
                                class="inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-medium
                                        bg-slate-900 text-white hover:bg-slate-800
                                        dark:bg-white dark:text-slate-900 dark:hover:bg-slate-200 transition">
                                    Register
                                </a>
                            <?php endif; ?>
                            <?php endif; ?>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>

        
<div class="w-full bg-gradient-to-r from-blue-500 to-blue-700 text-white">
    <div class="mx-auto max-w-6xl px-4 py-4">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-center md:text-left">

            <!-- Jam Sekarang -->
            <div class="bg-white/10 backdrop-blur rounded-xl p-4 shadow-md">
                <div class="text-sm opacity-80">Jam Sekarang (WIB / GMT+07:00)</div>
                <div id="clock" class="text-2xl font-bold tracking-wide mt-1">
                    --:--:--
                </div>
            </div>

                    <!-- Hari & Tanggal -->
                    <div class="bg-white/10 backdrop-blur rounded-xl p-4 shadow-md">
                        <div class="text-sm opacity-80">Hari & Tanggal</div>
                        <div id="date" class="text-2xl font-bold tracking-wide mt-1">
                            --
                        </div>
                    </div>

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

        
        <header class="relative overflow-hidden">
            <div class="absolute inset-0">
        <!-- Logo kiri atas -->
                <div class="absolute -top-24 -left-24 h-72 w-72 opacity-80"
                    style="background: url('<?php echo e(asset('picture/logolpka1.png')); ?>') no-repeat center/contain;">
                </div>

        <!-- Logo kanan bawah -->
                <div class="absolute -bottom-24 -right-24 h-72 w-72 opacity-80"
                    style="background: url('<?php echo e(asset('picture/logolpka1.png')); ?>') no-repeat center/contain;">
                </div>

        <!-- Overlay gradient tetap untuk transisi warna/gelap -->
                <div class="absolute inset-0 bg-gradient-to-b from-slate-50 to-white dark:from-white/5 dark:to-transparent"></div>
            </div>



            <div class="relative mx-auto max-w-6xl px-4 py-12 lg:py-16">
                <div class="max-w-full">
                        <h1 class="mt-4 text-3xl lg:text-5xl font-semibold tracking-tight">
                            <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-blue-700">JADWAL KEGIATAN ANAK BINAAN</span>
                        </h1>
                        <h2 class="mt-6 text-lg font-semibold">Berikut adalah jadwal kegiatan anak binaan di LPKA Kelas II jakarta</h2>
                    </div>

<!-- Form isi Tabel Jadwal Kegiatan anak binaan -->
<?php if(auth()->guard()->check()): ?>
<div class="mt-6 mb-8 p-4 bg-blue-50 rounded-lg shadow-md">
    <h3 class="font-semibold mb-4">Tambah Jadwal / Kegiatan Hari Ini</h3>

    <?php if(session('success')): ?>
        <div class="mb-4 text-green-700 font-semibold"><?php echo e(session('success')); ?></div>
    <?php endif; ?>

    <form action="<?php echo e(route('additional.schedule.store')); ?>" method="POST" class="grid grid-cols-1 md:grid-cols-5 gap-4">
        <?php echo csrf_field(); ?>
        <!-- Hari otomatis hari ini -->
        <input type="hidden" name="hari" value="<?php echo e(\Carbon\Carbon::now('Asia/Jakarta')->isoFormat('dddd')); ?>">

        <input type="text" name="jenis_kegiatan" placeholder="Jenis Kegiatan" class="border rounded px-2 py-1" required>
        <input type="text" name="waktu" placeholder="Waktu (misal 07:30 - 08:15)" class="border rounded px-2 py-1" required>
        <input type="text" name="tempat" placeholder="Tempat" class="border rounded px-2 py-1">
        <input type="text" name="keterangan" placeholder="Keterangan (opsional)" class="border rounded px-2 py-1">

        <button type="submit" class="md:col-span-5 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 mt-2">
            Tambah
        </button>
    </form>

    <!-- Tombol hapus semua jadwal hari ini -->
    <form action="<?php echo e(route('additional.schedule.clearToday')); ?>" method="POST" class="mt-3" onsubmit="return confirm('Apakah yakin ingin menghapus semua jadwal hari ini?')">
        <?php echo csrf_field(); ?>
        <?php echo method_field('DELETE'); ?>
        <button type="submit" class="md:col-span-5 bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700">
            Hapus Jadwal Hari Ini
        </button>
    </form>
</div>
<?php endif; ?>

<?php
use App\Models\AdditionalSchedule;
$today = \Carbon\Carbon::now('Asia/Jakarta')->isoFormat('dddd');
$additionalSchedules = AdditionalSchedule::where('hari', $today)->orderBy('created_at', 'desc')->get();
?>

<?php if($additionalSchedules->count() > 0): ?>
<div class="mt-8 p-4 bg-gray-50 rounded-lg shadow-md">
    <h3 class="text-xl font-semibold mb-4">Jadwal / Kegiatan Tambahan Hari Ini (<?php echo e($today); ?>)</h3>
    <table class="min-w-full border border-gray-300 text-sm">
        <thead class="bg-gray-100">
            <tr>
                <th class="border border-gray-300 px-4 py-2">Hari</th>
                <th class="border border-gray-300 px-4 py-2">Jenis Kegiatan</th>
                <th class="border border-gray-300 px-4 py-2">Waktu</th>
                <th class="border border-gray-300 px-4 py-2">Tempat</th>
                <th class="border border-gray-300 px-4 py-2">Keterangan</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-300">
            <?php $__currentLoopData = $additionalSchedules; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $schedule): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <tr>
                <td class="border border-gray-300 px-4 py-2"><?php echo e($schedule->hari); ?></td>
                <td class="border border-gray-300 px-4 py-2"><?php echo e($schedule->jenis_kegiatan); ?></td>
                <td class="border border-gray-300 px-4 py-2"><?php echo e($schedule->waktu); ?></td>
                <td class="border border-gray-300 px-4 py-2"><?php echo e($schedule->tempat); ?></td>
                <td class="border border-gray-300 px-4 py-2"><?php echo e($schedule->keterangan); ?></td>
            </tr>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </tbody>
    </table>
</div>
<?php endif; ?>           


        <!-- Tabel Jadwal Kegiatan anak binaan -->
        <div class="max-w-full overflow-x-auto p-6 bg-white rounded-lg shadow-md">

            <h1 class="text-2xl font-bold mb-6 text-center">
                Jadwal Kegiatan Rutin
            </h1>

            <table class="min-w-full border border-gray-300 text-sm">
                <thead class="bg-gray-100">
                    <tr>
                        <th class="border border-gray-300 px-4 py-2 text-left">HARI</th>
                        <th class="border border-gray-300 px-4 py-2 text-left w-60">JENIS KEGIATAN</th>
                        <th class="border border-gray-300 px-4 py-2 text-left w-40">WAKTU</th>
                        <th class="border border-gray-300 px-4 py-2 text-left w-60">TEMPAT</th>
                        <th class="border border-gray-300 px-4 py-2 text-left">KETERANGAN</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-300">

                    
                    <tr class="align-top">
                        <td class="border border-gray-300 px-4 py-2 font-semibold">SENIN</td>
                        <td class="border border-gray-300 px-4 py-2">
                            <ul class="list-disc list-inside space-y-1">
                                <li>Apel pagi</li>
                                <li>Latihan seni</li>
                                <li>kegiatan mengaji</li>
                                <li>Sholat dzuhur</li>
                                <li>Sholat ashar</li>
                                <li>Sepak bola</li>
                            </ul>
                        </td>
                        <td class="border border-gray-300 px-4 py-2">
                            <ul class="list-none p-0 m-0 space-y-1">
                            <li>07.30 - 08.15</li>
                            <li>08.30 - 10.00</li>
                            <li>10.15 - 11.30</li>
                            <li>12.00 - 12.30</li>
                            <li>15.00 - 15.30</li>
                            <li>15.30 - 17.00</li>
                            </ul>
                        </td>
                        <td class="border border-gray-300 px-4 py-2">
                            <ul class="list-none p-0 m-0 space-y-1">
                            <li>Lapangan upacara  </li>
                            <li>Aula   </li>
                            <li>Masjid</li>
                            <li>Masjid</li>
                            <li>Masjid</li>
                            <li>Lapangan sepak bola</li>
                            </ul>
                        </td>
                        <td class="border border-gray-300 px-4 py-2 text-sm">
                            Setiap hari senin - kamis pukul 07.30 - 08.15 dilaksanakan apel pagi di lapangan
                            <br>Setiap hari senin dan kamis pukul 08.30 - 10.00 kegiatan kesenian di aula.
                            <br>Setiap hari senin -  jumat, pukul 10.15 - 11.30 di laksanakan kegiatan membaca iqro dan al quran.
                        </td>
                    </tr>

                    
                    <tr class="align-top">
                        <td class="border border-gray-300 px-4 py-2 font-semibold">SELASA</td>
                        <td class="border border-gray-300 px-4 py-2">
                            <ul class="list-disc list-inside space-y-1">
                                <li>Apel pagi</li>
                                <li>Kegiatan pesantren </li>
                                <li>Sholat dzuhur</li>
                                <li>Sholat ashar</li>
                                <li>Bola volley</li>
                            </ul>
                        </td>
                        <td class="border border-gray-300 px-4 py-2">
                            <ul class="list-none p-0 m-0 space-y-1">
                            <li>08.30 - 10.00</li>
                            <li>10.15 - 11.30</li>
                            <li>12.00 - 12.30</li>
                            <li>15.00 - 15.30</li>
                            <li>15.30 - 17.00</li>
                            </ul>
                        </td>
                        <td class="border border-gray-300 px-4 py-2">
                            <ul class="list-none p-0 m-0 space-y-1">
                            <li>Lapangan upacara  </li>
                            <li>Masjid  </li>
                            <li>Masjid</li>
                            <li>Masjid</li>
                            <li>Lapangan Volley</li>
                            </ul>
                        </td>
                        <td class="border border-gray-300 px-4 py-2 text-sm">
                            Setiap hari senin sampai jumat pukul 15.30 - 17.00 dilaksanakan kegiatan olahraga bola voli di lapangan
                        </tr>

                    
                    <tr class="align-top">
                        <td class="border border-gray-300 px-4 py-2 font-semibold">RABU</td>
                        <td class="border border-gray-300 px-4 py-2">
                            <ul class="list-disc list-inside space-y-1">
                                <li>Apel pagi</li>
                                <li>Konseling sama dinda</li>
                                <li>Mengaji</li>
                                <li>Sholat dzuhur</li>
                                <li>Sholat ashar</li>
                                <li>Tenis meja</li>
                            </ul>
                        </td>
                        <td class="border border-gray-300 px-4 py-2">
                        <ul class="list-none p-0 m-0 space-y-1">
                            <li>07.30 - 08.15</li>
                            <li>08.30 - 10.00</li>
                            <li>10.15 - 11.30</li>
                            <li>12.00 - 12.30</li>
                            <li>15.00 - 15.30</li>
                            <li>15.30 - 17.00</li>
                            </ul>
                        </td>
                        <td class="border border-gray-300 px-4 py-2">
                        <ul class="list-none p-0 m-0 space-y-1">
                            <li>Lapangan upacara </li> 
                            <li>Aula  </li>
                            <li>Masjid  </li>
                            <li>Masjid  </li>
                            <li>Masjid  </li>
                            <li>Lapangan sepak bola</li>
                        </ul>  
                        </td>
                        <td class="border border-gray-300 px-4 py-2 text-sm">
                             Setiap hari rabu dan sabtu pukul 08.30 - 10.00 kegiatan belajar mengajar di kelas.
                            <br>Setiap hari minggu pukul 09.00 - 12.00 dilaksanakan pemutaran film di ruang tengah.
                        </td>
                    </tr>

                    
                    <tr class="align-top">
                        <td class="border border-gray-300 px-4 py-2 font-semibold">KAMIS</td>
                        <td class="border border-gray-300 px-4 py-2">
                            <ul class="list-disc list-inside space-y-1">
                                <li>Apel pagi</li>
                                <li>Kegiatan kesenian</li>
                                <li>Mengaji</li>
                                <li>Sholat dzuhur</li>
                                <li>Sholat ashar</li>
                                <li>Sepak bola</li>
                            </ul>
                        </td>
                        <td class="border border-gray-300 px-4 py-2">
                            <ul class="list-none p-0 m-0 space-y-1">
                                <li>07.30 - 08.15</li>
                                <li>08.30 - 10.00</li>
                                <li>10.15 - 11.30</li>
                                <li>12.00 - 12.30</li>
                                <li>15.00 - 15.30</li>
                                <li>15.30 - 17.00</li>
                            </ul> 
                        </td>
                        <td class="border border-gray-300 px-4 py-2">
                            <ul class="list-none p-0 m-0 space-y-1">
                                <li>Lapangan sepak bola  </li>
                                <li>Aula </li>
                                <li>Masjid  </li>
                                <li>Masjid  </li>
                                <li>Masjid  </li>
                                <li>Lapangan sepak bola</li>
                            </ul>
                        </td>
                        <td class="border border-gray-300 px-4 py-2 text-sm">
                            Setiap hari senin - minggu pukul 12.00 - 12.30 dilaksanakan sholat dzuhur dan pukul 15.00 - 15.30 dilaksanakan sholat ashar.
                            <br>Setiap hari senin dan kamis pukul 15.30 - 17.00 dilaksanakan kegiatan olahraga sepak bola di lapangan sepak bola.
                        </td>
                    </tr>

                    
                    <tr class="align-top">
                        <td class="border border-gray-300 px-4 py-2 font-semibold">JUMAT</td>
                        <td class="border border-gray-300 px-4 py-2">
                            <ul class="list-disc list-inside space-y-1">
                                <li>Senam pagi</li>
                                <li>Kegiatan pramuka</li>
                                <li>Mengaji</li>
                                <li>Sholat jumat</li>
                                <li>Sholat ashar</li>
                                <li>Bola volley</li>
                            </ul>
                        </td>
                        <td class="border border-gray-300 px-4 py-2">
                            <ul class="list-none p-0 m-0 space-y-1">
                                <li>07.30 - 08.15</li>
                                <li>08.30 - 10.00</li>
                                <li>10.15 - 11.30</li>
                                <li>12.00 - 12.30</li>
                                <li>15.00 - 15.30</li>
                                <li>15.30 - 17.00</li>
                            </ul> 
                        </td>
                        <td class="border border-gray-300 px-4 py-2">
                            <ul class="list-none p-0 m-0 space-y-1">
                                <li>Lapangan sepak bola </li>  
                                <li>Masjid  </li>
                                <li>Masjid  </li>
                                <li>Masjid  </li>
                                <li>Masjid  </li>
                                <li>Lapangan bola volley</li>
                            </ul>
                        </td>
                        <td class="border border-gray-300 px-4 py-2 text-sm">
                            Setiap hari senin sampai jumat pukul 15.30 - 17.00 dilaksanakan kegiatan olahraga bola voli di lapang bola volley
                        </td>
                    </tr>

                    
                    <tr class="align-top">
                        <td class="border border-gray-300 px-4 py-2 font-semibold">SABTU</td>
                        <td class="border border-gray-300 px-4 py-2">
                            <ul class="list-disc list-inside space-y-1">
                                <li>Senam pagi</li>
                                <li>Konseling sama Windi</li>
                                <li>Mengaji</li>
                                <li>Sholat dzuhur</li>
                                <li>Sholat ashar</li>
                                <li>Bersih-bersih</li>
                            </ul>
                        </td>
                        <td class="border border-gray-300 px-4 py-2">
                            <ul class="list-none p-0 m-0 space-y-1">
                                <li>07.30 - 08.15</li>
                                <li>08.30 - 10.00</li>
                                <li>10.15 - 11.30</li>
                                <li>12.00 - 12.30</li>
                                <li>15.00 - 15.30</li>
                                <li>15.30 - 17.00</li>
                            </ul>  
                        </td>
                        <td class="border border-gray-300 px-4 py-2">
                            <ul class="list-none p-0 m-0 space-y-1">
                                <li>Lapangan sepak bola  </li>
                                <li>Aula  </li>
                                <li>Masjid  </li>
                                <li>Masjid  </li>
                                <li>Masjid  </li>
                                <li>Area Blok  </li>
                            </ul>
                        <td class="border border-gray-300 px-4 py-2 text-sm">
                            Setiap hari senin sampai jumat pukul 15.30 - 17.00 dilaksanakan kegiatan olahraga bola voli di lapangan
                        </tr>

                    
                    <tr class="align-top">
                        <td class="border border-gray-300 px-4 py-2 font-semibold">MINGGU</td>
                        <td class="border border-gray-300 px-4 py-2">
                            <ul class="list-disc list-inside space-y-1">
                                <li>Menonton Film</li>
                                <li>Sholat Dzuhur</li>
                                <li>Sholat Ashar</li>
                            </ul>
                        </td>
                        <td class="border border-gray-300 px-4 py-2">
                            <ul class="list-none p-0 m-0 space-y-1">
                                <li>07.30 - 08.15</li>
                                <li>08.30 - 10.00</li>
                                <li>10.15 - 11.30</li>                           
                            </ul> 
                        </td>
                        <td class="border border-gray-300 px-4 py-2">
                            <ul class="list-none p-0 m-0 space-y-1">
                                <li>Ruang Tengah </li>
                                <li>Masjid    </li>
                                <li>Masjid    </li>
                            </ul>  
                        </td>
                        <td class="border border-gray-300 px-4 py-2 text-sm">
                            Setiap hari senin sampai jumat pukul 15.30 - 17.00 dilaksanakan kegiatan olahraga bola voli di lapangan
                        </tr>
                </tbody>
            </table>
        </div>

            </div>
    </header>


    <!-- Footer -->
        
        <footer class="border-t border-slate-200/70 dark:border-white/10">
            <div class="mx-auto max-w-6xl px-4 py-10">
                <div class="flex flex-col lg:flex-row justify-between gap-6">
                    <div>
                        <a href="<?php echo e(url('/')); ?>" class="flex items-center gap-2">
                <div class="h-9 w-9 rounded-xl shadow-sm"
                    style="background: url('<?php echo e(asset('picture/logolpka1.png')); ?>') no-repeat center/cover;">
                </div>
                        <div class="text-base font-semibold">LPKA Kelas II Jakarta</div>
                        </a>
                        <p class="mt-2 text-sm text-slate-600 dark:text-slate-300 max-w-md">
                            Portal berita kegiatan di LPKA Kelas II Jakarta.
                        </p>
                        <p class="mt-4 text-xs text-slate-500 dark:text-slate-400">
                            © <?php echo e(now()->year); ?> LPKA Kelas II Jakarta. All rights reserved.
                        </p>
                    </div>
        </footer>
<script>
function updateClock() {
    const now = new Date();

    const optionsTime = {
        timeZone: "Asia/Jakarta",
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
        hour12: false
    };

    const optionsDate = {
        timeZone: "Asia/Jakarta",
        weekday: "long",
        year: "numeric",
        month: "long",
        day: "numeric"
    };

    const timeString = new Intl.DateTimeFormat("id-ID", optionsTime).format(now);
    const dateString = new Intl.DateTimeFormat("id-ID", optionsDate).format(now);

    document.getElementById("clock").textContent = timeString + " WIB";
    document.getElementById("date").textContent = dateString;
}

setInterval(updateClock, 1000);
updateClock();
</script>

</body>
</html><?php /**PATH /home/lpkaberk/public_html/resources/views/jadwal.blade.php ENDPATH**/ ?>