<style>
    .box-info {
        margin-bottom: 20px;
        transition: transform 0.2s;
        cursor: default;
    }
    .box-info:hover {
        transform: translateY(-5px);
    }
    /* Animasi halus untuk alert */
    .fade-out {
        opacity: 0;
        transition: opacity 1s ease-out;
    }
</style>

<!-- ===== SCRIPT DETEKSI KONEKSI INTERNET (OFFLINE MODE) ===== -->
<script type="text/javascript">
    (function() {
        // URL ke file offline.html yang sudah Anda buat di root folder aplikasi
        // Pastikan base_url() mengarah ke folder yang benar (misal: .../RahmatAllah/)
        var offlinePageUrl = "<?php echo base_url(); ?>offline.html";

        function checkConnection() {
            if (!navigator.onLine) {
                // Jika sedang tidak online, dan belum di halaman offline, maka redirect
                if (window.location.href.indexOf('offline.html') === -1) {
                    window.location.href = offlinePageUrl;
                }
            }
        }

        // 1. Cek saat halaman pertama kali dimuat
        checkConnection();

        // 2. Event listener jika koneksi tiba-tiba putus saat sedang membuka aplikasi
        window.addEventListener('offline', function() {
            window.location.href = offlinePageUrl;
        });

        // 3. (Opsional) Pengecekan berkala setiap 10 detik untuk memastikan
        setInterval(checkConnection, 10000);
    })();
</script>
<!-- ========================================================= -->

<div class="row">
    <div class="col-sm-12">
        <div class="box-home">
            <div class="box-home-content">
                <?php 
                    // Menampilkan kata sambutan dari konfigurasi database
                    echo az_get_config('app_preface');
                ?>
            </div>
        </div>
    </div>
</div>

<?php if ($this->session->flashdata('error_access')): ?>
<div class="alert alert-danger" id="alert-access" style="max-width:600px;margin:20px auto; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
    <i class="fa fa-exclamation-circle"></i> 
    <b>Akses Ditolak:</b> <?php echo $this->session->flashdata('error_access'); ?>
    <br><small>Silakan hubungi administrator atau tunggu sampai jam operasional.</small>
</div>

<div style="max-width:600px; margin:0 auto 20px auto; padding:15px; background:#fff3cd; border-radius:8px; border:1px solid #ffeeba;">
    <small><i class="fa fa-info-circle"></i> Jika mengalami masalah login atau device terkunci, klik tombol di bawah:</small><br>
    <a href="<?php echo base_url(); ?>index.php/login/logout_device" class="btn btn-warning btn-sm" style="margin-top:8px;">
        <i class="fa fa-sign-out"></i> Logout & Reset Device
    </a>
</div>

<script>
    // Script untuk menghilangkan alert secara otomatis setelah 10 detik
    setTimeout(function() {
        var alertBox = document.getElementById('alert-access');
        if (alertBox) {
            alertBox.classList.add('fade-out');
            setTimeout(function() { alertBox.remove(); }, 1000);
        }
    }, 10000);
</script>
<?php endif; ?>

<div class="row">
    <?php
        // Ambil data role dari session
        $idrole = $this->session->userdata('idrole');
        
        // Kartu "BARU" hanya muncul untuk Kasir (Role ID 2)
        if ($idrole == 2) {
    ?>
    <div class="col-sm-3 col-xs-6">
        <div class="box-info new">
            <h3><?php echo isset($baru) ? az_thousand_separator($baru) : 0; ?></h3>
            <h5>BARU</h5>
            <i class="fa fa-file-o"></i>
        </div>
    </div>
    <?php
        }
    ?>

    <div class="col-sm-3 col-xs-6">
        <div class="box-info new">
            <h3><?php echo isset($pending) ? az_thousand_separator($pending) : 0; ?></h3>
            <h5>PENDING</h5>
            <i class="fa fa-file-o"></i>
        </div>
    </div>

    <div class="col-sm-3 col-xs-6">
        <div class="box-info prog">
            <h3><?php echo isset($st_proses) ? az_thousand_separator($st_proses) : 0; ?></h3>
            <h5>ST PROSES</h5>
            <i class="fa fa-refresh"></i>
        </div>
    </div>

    <div class="col-sm-3 col-xs-6">
        <div class="box-info finish">
            <h3><?php echo isset($st_bersih) ? az_thousand_separator($st_bersih) : 0; ?></h3>
            <h5>ST BERSIH</h5>
            <i class="fa fa-check"></i>
        </div>
    </div>

    <div class="col-sm-3 col-xs-6">
        <div class="box-info approved">
            <h3><?php echo isset($diantar) ? az_thousand_separator($diantar) : 0; ?></h3>
            <h5>DIANTAR</h5>
            <i class="fa fa-check-square"></i>
        </div>
    </div>

    <?php
        // Kartu "PICK UP" hanya muncul untuk Kasir (Role ID 2)
        if ($idrole == 2) {
    ?>
    <div class="col-sm-3 col-xs-6">
        <div class="box-info approved">
            <h3><?php echo isset($pick_up) ? az_thousand_separator($pick_up) : 0; ?></h3>
            <h5>PICK UP</h5>
            <i class="fa fa-check-square"></i>
        </div>
    </div>
    <?php
        }
    ?>
</div>

<!-- Pantau Barber Shortcut (Hanya Admin & Produksi) -->
<?php 
    // Logika ini diambil dari controller Home.php yang sudah Anda upload sebelumnya
    // Jika variable $url_barber tidak dikirim dari controller, kita bisa cek manual atau biarkan kosong
    // Namun berdasarkan controller Home.php Anda, html ini di-generate di controller.
    // Jika Anda ingin menaruhnya di View, pastikan logic permissionnya ada di sini atau pass variable dari controller.
    
    // Karena di controller Home.php Anda sudah melakukan: $app->add_content($html_barber);
    // Maka bagian ini sebenarnya sudah otomatis muncul di bawah view ini.
    // Tapi jika Anda ingin memindahkannya ke dalam file view ini agar lebih rapi:
?>

<?php if (isset($show_barber_card) && $show_barber_card): ?>
<div class="row">
    <div class="col-sm-12">
        <a class="pbrb-sc" href="<?php echo app_url(); ?>barber">
            <span class="pbrb-sc-ico">&#127981;</span>
            <span class="pbrb-sc-txt">
                <b>Pantau Barber</b>
                <small>Pantauan produksi &mdash; bill terlambat, jatuh tempo &amp; express</small>
            </span>
            <span class="pbrb-sc-arr">&rarr;</span>
        </a>
        <style>
            .pbrb-sc{display:flex;align-items:center;gap:14px;max-width:760px;margin:16px auto;padding:14px 18px;
            background:linear-gradient(120deg,#0c3b36,#138074);border-radius:12px;text-decoration:none;color:#fff;
            box-shadow:0 4px 14px rgba(12,59,54,.25);transition:transform .14s,box-shadow .14s;}
            .pbrb-sc:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(12,59,54,.35);color:#fff;text-decoration:none;}
            .pbrb-sc-ico{font-size:26px;}
            .pbrb-sc-txt{flex:1;line-height:1.3;}
            .pbrb-sc-txt b{display:block;font-size:15px;letter-spacing:.4px;}
            .pbrb-sc-txt small{font-size:11px;opacity:.85;}
            .pbrb-sc-arr{font-size:20px;font-weight:800;}
        </style>
    </div>
</div>
<?php endif; ?>