<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['title' => 'Data Jam Kerja']); ?>

<?php $__env->startPush('styles'); ?>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<style>
    :root {
        --p: #4f46e5; --pd: #3730a3; --pl: #eef2ff; --pm: rgba(79,70,229,.12);
        --ok: #059669; --okl: #ecfdf5; --err: #dc2626; --errl: #fef2f2;
        --warn: #d97706; --warnl:#fffbeb; --txt: #0f172a; --mut: #64748b;
        --mut2: #94a3b8; --bdr: #e2e8f0; --bg: #f8faff; --wh: #ffffff;
        --sh: 0 4px 20px -2px rgba(0,0,0,0.05); --sh-lg: 0 20px 25px -5px rgba(0,0,0,0.1);
        --r: 16px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--bg); color: var(--txt); -webkit-font-smoothing: antialiased; }

    .container { max-width: 1100px; margin: 0 auto; padding: 24px 16px 80px; }

    /* --- HEADER SECTION --- */
    .header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 32px; flex-wrap: wrap; }
    .header-info { display: flex; align-items: center; gap: 16px; }
    .header-icon { width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(135deg, var(--p), #818cf8); display: flex; align-items: center; justify-content: center; color: white; box-shadow: 0 10px 20px var(--pm); }
    .header-text h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; }
    .header-text p { font-size: 0.875rem; color: var(--mut); font-weight: 500; }

    /* --- STATS CARDS --- */
    .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 32px; }
    .stat-card { background: var(--wh); padding: 24px; border-radius: var(--r); border: 1px solid var(--bdr); box-shadow: var(--sh); transition: 0.3s; }
    .stat-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
    .stat-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--mut2); letter-spacing: 0.05em; margin-bottom: 10px; }
    .stat-value { font-size: 2rem; font-weight: 900; line-height: 1; }
    .stat-value span { font-size: 1rem; color: var(--mut2); font-weight: 600; }

    /* --- DATA CARD & TABLE --- */
    .data-card { background: var(--wh); border-radius: var(--r); border: 1px solid var(--bdr); box-shadow: var(--sh); overflow: hidden; }
    .data-card-header { padding: 20px 24px; border-bottom: 1px solid var(--bdr); display: flex; align-items: center; justify-content: space-between; }
    .data-card-title { font-weight: 800; font-size: 1rem; color: var(--txt); }

    /* Desktop Table */
    .table-container { width: 100%; overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; text-align: left; }
    th { padding: 16px 24px; background: #fafbff; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; color: var(--mut2); border-bottom: 1px solid var(--bdr); white-space: nowrap; }
    td { padding: 18px 24px; font-size: 0.9rem; border-bottom: 1px solid #f8fafc; vertical-align: middle; }
    tr:last-child td { border-bottom: none; }

    /* --- CHIPS & BUTTONS --- */
    .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 100px; font-weight: 700; font-size: 0.85rem; }
    .chip-blue { background: var(--pl); color: var(--p); }
    .chip-orange { background: var(--warnl); color: var(--warn); }
    
    .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 12px; font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: 0.2s; border: none; font-family: inherit; }
    .btn-p { background: var(--p); color: white; box-shadow: 0 4px 12px var(--pm); }
    .btn-p:hover { background: var(--pd); transform: translateY(-2px); }
    
    .action-btns { display: flex; gap: 8px; }
    .action-btn { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; transition: 0.2s; cursor: pointer; border: none; }
    .btn-edit { background: var(--pl); color: var(--p); }
    .btn-del { background: var(--errl); color: var(--err); }
    .action-btn:hover { transform: scale(1.1); }

    /* --- MODAL SYSTEM --- */
    .modal { position: fixed; inset: 0; z-index: 999; display: none; align-items: center; justify-content: center; padding: 16px; }
    .modal.active { display: flex; }
    .modal-overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px); }
    .modal-content { position: relative; background: white; width: 100%; max-width: 480px; border-radius: 24px; box-shadow: var(--sh-lg); animation: modalShow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
    @keyframes modalShow { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }

    .modal-body { padding: 32px; }
    .modal-footer { padding: 20px 32px; background: #f8fafc; border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; display: flex; justify-content: flex-end; gap: 12px; }

    .form-group { margin-bottom: 20px; }
    .form-group label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 8px; color: var(--txt); }
    .form-control { width: 100%; padding: 12px 16px; border-radius: 12px; border: 1.5px solid var(--bdr); font-family: inherit; font-size: 1rem; outline: none; transition: 0.2s; }
    .form-control:focus { border-color: var(--p); box-shadow: 0 0 0 4px var(--pm); }

    /* --- RESPONSIVE DESIGN --- */
    @media (max-width: 768px) {
        .header { flex-direction: column; align-items: flex-start; }
        .btn-add-main { width: 100%; justify-content: center; }
        .stats-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 600px) {
        /* Tabel menjadi Card di Mobile */
        thead { display: none; }
        tr { display: block; padding: 16px; border-bottom: 8px solid var(--bg); position: relative; }
        td { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border: none; font-size: 0.85rem; }
        td::before { content: attr(data-label); font-weight: 800; color: var(--mut2); font-size: 0.75rem; text-transform: uppercase; }
        .action-btns { width: 100%; justify-content: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bdr); }
        .form-row { display: block; }
    }
</style>
<?php $__env->stopPush(); ?>

<div class="container">
    
    <header class="header">
        <div class="header-info">
            <div class="header-icon">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            </div>
            <div class="header-text">
                <h1>Data Jam Kerja</h1>
                <p>Kelola efisiensi waktu instansi Anda</p>
            </div>
        </div>
        <button class="btn btn-p btn-add-main" onclick="openModal('modal-form')">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            Tambah Jadwal
        </button>
    </header>

    <section class="stats-grid">
        <div class="stat-card">
            <p class="stat-label">Aktif</p>
            <div class="stat-value"><?php echo e($jamKerjas->count()); ?><span> Shift</span></div>
        </div>
        <div class="stat-card">
            <p class="stat-label">Masuk Paling Pagi</p>
            <div class="stat-value"><?php echo e($jamKerjas->count() ? date('H:i', strtotime($jamKerjas->min('jam_masuk'))) : '--:--'); ?></div>
        </div>
        <div class="stat-card">
            <p class="stat-label">Rata-rata Toleransi</p>
            <div class="stat-value"><?php echo e(round($jamKerjas->avg('toleransi_menit')) ?? 0); ?><span> mnt</span></div>
        </div>
    </section>

    <div class="data-card">
        <div class="data-card-header">
            <h2 class="data-card-title">Daftar Jadwal Operasional</h2>
        </div>
        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th>Jam Masuk</th>
                        <th>Jam Pulang</th>
                        <th>Toleransi</th>
                        <th style="text-align: center;">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    <?php $__empty_1 = true; $__currentLoopData = $jamKerjas; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $jam): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <tr>
                        <td data-label="Jam Masuk">
                            <span class="chip chip-blue"><?php echo e($jam->jam_masuk); ?></span>
                        </td>
                        <td data-label="Jam Pulang">
                            <span class="chip chip-blue"><?php echo e($jam->jam_pulang); ?></span>
                        </td>
                        <td data-label="Toleransi">
                            <span class="chip chip-orange"><?php echo e($jam->toleransi_menit); ?> Menit</span>
                        </td>
                        <td data-label="Opsi">
                            <div class="action-btns">
                                <button class="action-btn btn-edit" title="Edit" onclick="editData(<?php echo e($jam->id); ?>, '<?php echo e($jam->jam_masuk); ?>', '<?php echo e($jam->jam_pulang); ?>', <?php echo e($jam->toleransi_menit); ?>)">
                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                                </button>
                                <button class="action-btn btn-del" title="Hapus" onclick="confirmDelete(<?php echo e($jam->id); ?>)">
                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
                                </button>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                    <tr>
                        <td colspan="4" style="text-align: center; padding: 60px; color: var(--mut2);">Tidak ada data jam kerja.</td>
                    </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div id="modal-form" class="modal">
    <div class="modal-overlay" onclick="closeModal('modal-form')"></div>
    <div class="modal-content">
        <form id="jamKerjaForm" method="POST">
            <?php echo csrf_field(); ?>
            <input type="hidden" name="_method" id="formMethod" value="POST">
            <div class="modal-body">
                <h2 style="margin-bottom: 24px; font-weight: 800;" id="modalTitle">Tambah Jam Kerja</h2>
                
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
                    <div class="form-group">
                        <label>Jam Masuk</label>
                        <input type="text" name="jam_masuk" id="jam_masuk" class="form-control" required placeholder="08:00">
                    </div>
                    <div class="form-group">
                        <label>Jam Pulang</label>
                        <input type="text" name="jam_pulang" id="jam_pulang" class="form-control" required placeholder="17:00">
                    </div>
                </div>

                <div class="form-group">
                    <label>Toleransi Keterlambatan (Menit)</label>
                    <input type="number" name="toleransi_menit" id="toleransi_menit" class="form-control" required min="0" value="0">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" onclick="closeModal('modal-form')" style="background: transparent; color: var(--mut);">Batal</button>
                <button type="submit" class="btn btn-p">Simpan Data</button>
            </div>
        </form>
    </div>
</div>

<?php $__env->startPush('scripts'); ?>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    // Initialize Time Pickers
    const timeConfig = { enableTime: true, noCalendar: true, dateFormat: "H:i", time_24hr: true };
    flatpickr("#jam_masuk", timeConfig);
    flatpickr("#jam_pulang", timeConfig);

    function openModal(id) {
        document.getElementById(id).classList.add('active');
        document.body.style.overflow = 'hidden';
    }

    function closeModal(id) {
        document.getElementById(id).classList.remove('active');
        document.body.style.overflow = 'auto';
        // Reset form
        if(id === 'modal-form') {
            document.getElementById('jamKerjaForm').reset();
            document.getElementById('formMethod').value = 'POST';
            document.getElementById('modalTitle').innerText = 'Tambah Jam Kerja';
        }
    }

    function editData(id, masuk, pulang, tol) {
        document.getElementById('modalTitle').innerText = 'Edit Jam Kerja';
        document.getElementById('formMethod').value = 'PUT';
        document.getElementById('jamKerjaForm').action = `/instansi/jam-kerja/${id}`; // Sesuaikan route Anda
        
        document.getElementById('jam_masuk').value = masuk;
        document.getElementById('jam_pulang').value = pulang;
        document.getElementById('toleransi_menit').value = tol;
        
        openModal('modal-form');
    }

    function confirmDelete(id) {
        if(confirm('Apakah Anda yakin ingin menghapus data ini?')) {
            // Logika hapus via form atau fetch
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = `/instansi/jam-kerja/${id}`;
            form.innerHTML = `<?php echo csrf_field(); ?> <?php echo method_field('DELETE'); ?>`;
            document.body.appendChild(form);
            form.submit();
        }
    }
</script>
<?php $__env->stopPush(); ?>

 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?><?php /**PATH C:\laragon\www\absen_gw\resources\views/instansi/jamkerja/index.blade.php ENDPATH**/ ?>