<?php

$judul = "Checklist Daily";
$menu  = "daily";

include 'layout/header.php';

$tanggal = date('Y-m-d');

/* ==========================
   PAGINATION
========================== */
$limit = 10;
$halaman = isset($_GET['halaman']) ? (int)$_GET['halaman'] : 1;
if($halaman < 1){ $halaman = 1; }
$offset = ($halaman - 1) * $limit;

/* ==========================
   TOTAL DATA
========================== */
$total_data = mysqli_num_rows(
    mysqli_query($conn,"
    SELECT *
    FROM checklist_master
    WHERE jabatan='Store_Manager'
    AND jenis='Daily'
    AND status='aktif'
    ")
);
$total_halaman = ceil($total_data / $limit);

/* ==========================
   DATA CHECKLIST
========================== */
$data = mysqli_query($conn,"
    SELECT cm.*
    FROM checklist_master cm
    INNER JOIN checklist_pic cp ON cm.id_checklist = cp.id_checklist
    WHERE cp.jabatan = 'Store_Manager'
    AND cm.jenis     = 'Daily'
    AND cm.status    = 'aktif'
    ORDER BY cm.job_list ASC
");

?>

<style>
    /* Styling Kartu Utama (Panel Container) */
    .panel-card {
        background: var(--surface-1) !important;
        border: 1px solid var(--mint-border) !important;
        border-radius: 12px !important;
        overflow: hidden;
    }
    .panel-card .card-header {
        background: linear-gradient(90deg, var(--surface-2), var(--surface-1)) !important;
        border-bottom: 1px solid var(--mint-border) !important;
        color: var(--emerald-400) !important;
        font-weight: 700;
        letter-spacing: 0.05em;
        font-size: 1.1rem;
        padding: 16px 20px;
    }

    /* ════════ REVISI PENYELARASAN TABEL ANTI-TERPOTONG ════════ */
    .table-responsive-custom {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-custom {
        color: var(--text-primary) !important;
        border-color: var(--mint-border) !important;
        margin-bottom: 0;
        width: 100%;
        table-layout: fixed; /* Memaksa kalkulasi lebar kolom yang presisi */
    }
    
    .table-custom thead th {
        background: var(--surface-2) !important;
        color: var(--text-secondary) !important;
        border-bottom: 2px solid var(--mint-border) !important;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.8rem;
        letter-spacing: 0.05em;
        padding: 12px;
        white-space: nowrap;
    }
    
    .table-custom tbody td {
        background: transparent !important;
        border-color: var(--mint-border) !important;
        color: var(--text-primary) !important;
        padding: 12px 10px;
        vertical-align: middle;
        word-wrap: break-word;
        word-break: break-word;
        white-space: normal !important; /* Membuat teks panjang otomatis membungkus turun kebawah */
    }
    
    .table-custom tbody tr:hover td {
        background: var(--mint-glow) !important;
    }

    /* Pengunci Ukuran Kolom Spesifik */
    .col-fit {
        width: 70px !important;
        text-align: center;
    }
    .col-time {
        width: 110px !important;
    }
    .col-status {
        width: 100px !important;
        text-align: center;
    }
    .col-action {
        width: 115px !important;
        text-align: center;
    }

    /* Badge Waktu Kustom */
    .badge-time {
        font-family: 'Space Mono', monospace;
        padding: 6px 10px;
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.75rem;
        display: inline-block;
        text-align: center;
        width: 100%;
    }
    .badge-pagi { background: rgba(56, 189, 248, 0.15) !important; color: #38bdf8 !important; border: 1px solid rgba(56, 189, 248, 0.3); }
    .badge-siang { background: rgba(251, 191, 36, 0.15) !important; color: #fbbf24 !important; border: 1px solid rgba(251, 191, 36, 0.3); }
    .badge-sore { background: rgba(244, 63, 94, 0.15) !important; color: #f43f5e !important; border: 1px solid rgba(244, 63, 94, 0.3); }
    .badge-malam { background: rgba(167, 139, 250, 0.15) !important; color: #a78bfa !important; border: 1px solid rgba(167, 139, 250, 0.3); }

    /* Badge Status */
    .status-done { background: rgba(16, 185, 129, 0.15) !important; color: var(--emerald-400) !important; border: 1px solid var(--mint-border); }
    .status-pending { background: rgba(239, 68, 68, 0.15) !important; color: #f87171 !important; border: 1px solid rgba(239, 68, 68, 0.3); }

    /* Tombol Aksi */
    .btn-action-success {
        background: var(--emerald-500) !important;
        border: 1px solid var(--emerald-600) !important;
        color: #fff !important;
        font-weight: 600;
        font-size: 0.78rem;
        padding: 6px 12px;
        border-radius: 6px;
        transition: all 0.2s;
        display: inline-block;
        width: 100%;
    }
    .btn-action-success:hover {
        background: var(--emerald-400) !important;
        box-shadow: 0 0 12px var(--mint-glow);
    }
    .btn-action-disabled {
        background: var(--surface-3) !important;
        border: 1px solid var(--mint-border) !important;
        color: var(--text-muted) !important;
        font-size: 0.78rem;
        padding: 6px 12px;
        border-radius: 6px;
        opacity: 0.6;
        width: 100%;
    }

    /* Pagination Kustom */
    .custom-pagination .page-link {
        background: var(--surface-2) !important;
        border: 1px solid var(--mint-border) !important;
        color: var(--text-secondary) !important;
        font-family: 'Space Mono', monospace;
        font-size: 0.85rem;
        padding: 8px 14px;
        margin: 0 2px;
        border-radius: 6px;
        transition: all 0.2s;
    }
    .custom-pagination .page-link:hover {
        background: var(--mint-glow) !important;
        color: var(--text-primary) !important;
        border-color: var(--emerald-400) !important;
    }
    .custom-pagination .page-item.active .page-link {
        background: var(--emerald-500) !important;
        border-color: var(--emerald-400) !important;
        color: #fff !important;
        box-shadow: 0 0 10px var(--mint-glow);
    }

    /* Optimasi Tampilan Khusus Mobile Screen */
    @media (max-width: 576px) {
        .table-custom {
            table-layout: auto; /* Kembalikan ke auto agar scrolling x berjalan mulus di layar super kecil */
        }
        .table-custom tbody td {
            font-size: 0.85rem;
            padding: 10px 8px;
        }
    }
</style>

<?php include 'layout/sidebar.php'; ?>

<div class="card panel-card shadow-sm">
    <div class="card-header">
        📋 Daily Checklist Master
    </div>

    <div class="card-body p-0"> 
        <div class="table-responsive-custom">
            <table class="table table-custom table-bordered">
                <thead>
                    <tr>
                        <th class="col-fit">No</th>
                        <th class="col-time">Waktu</th>
                        <th>Nama Tugas Checklist</th>
                        <th class="col-status">Status</th>
                        <th class="col-action">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    $no = $offset + 1;
                    while($row = mysqli_fetch_assoc($data)):
                        $id_checklist = $row['id_checklist'];
                        $cek = mysqli_query($conn,"
                            SELECT * FROM checklist_harian
                            WHERE id_user='".$_SESSION['id_user']."'
                            AND id_checklist='$id_checklist'
                            AND tanggal='$tanggal'
                        ");
                        $sudah = mysqli_num_rows($cek);
                    ?>
                    <tr>
                        <td class="text-center font-monospace col-fit" style="color: var(--text-muted);"><?= $no++ ?></td>
                        <td class="col-time">
                            <?php
                            switch($row['waktu']){
                                case 'Pagi':
                                    echo '<span class="badge badge-time badge-pagi">🌅 Pagi</span>';
                                    break;
                                case 'Siang':
                                    echo '<span class="badge badge-time badge-siang">☀️ Siang</span>';
                                    break;
                                case 'Sore':
                                    echo '<span class="badge badge-time badge-sore">🌇 Sore</span>';
                                    break;
                                case 'Malam':
                                    echo '<span class="badge badge-time badge-malam">🌙 Malam</span>';
                                    break;
                                default:
                                    echo '<span class="badge bg-secondary">-</span>';
                            }
                            ?>
                        </td>
                        <td><strong><?= htmlspecialchars($row['job_list']) ?></strong></td>
                        <td class="col-status">
                            <?= $sudah
                                ? '<span class="badge badge-time status-done">Selesai</span>'
                                : '<span class="badge badge-time status-pending">Belum</span>'
                            ?>
                        </td>
                        <td class="col-action">
                            <?php if($sudah): ?>
                                <button class="btn btn-action-disabled btn-sm" disabled>Done</button>
                            <?php else: ?>
                                <a href="kerjakan_checklist.php?id=<?= $row['id_checklist'] ?>" class="btn btn-action-success btn-sm">Kerjakan</a>
                            <?php endif; ?>
                        </td>
                    </tr>
                    <?php endwhile; ?>
                </tbody>
            </table>
        </div>
        
        <nav class="p-4">
            <ul class="pagination custom-pagination justify-content-center m-0">
                <?php if($halaman > 1): ?>
                <li class="page-item">
                    <a class="page-link" href="?halaman=<?= $halaman-1 ?>">« Prev</a>
                </li>
                <?php endif; ?>

                <?php for($i=1; $i<=$total_halaman; $i++): ?>
                <li class="page-item <?= ($i==$halaman)?'active':'' ?>">
                    <a class="page-link" href="?halaman=<?= $i ?>"><?= $i ?></a>
                </li>
                <?php endfor; ?>

                <?php if($halaman < $total_halaman): ?>
                <li class="page-item">
                    <a class="page-link" href="?halaman=<?= $halaman+1 ?>">Next »</a>
                </li>
                <?php endif; ?>
            </ul>
        </nav>
    </div>
</div>

<?php include 'layout/footer.php'; ?>