<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nadhief Herbal | Madu, Herbal & Kurma Premium</title>
    <link rel="icon" href="https://www.senatorabadi.web.id/ecommerce_herbal/admin/assets/link/e2b7782138653491a0000329">
    
    <!-- Preconnect untuk mempercepat koneksi -->
    <link rel="preconnect" href="https://www.senatorabadi.web.id">
    <link rel="preconnect" href="https://cdnjs.cloudflare.com">
    
    <!-- Font Awesome dengan font-display swap -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" media="print" onload="this.media='all'">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <!-- NAVBAR -->
    <nav class="top-bar">
        <div class="logo" onclick="closeAllPages()">
            <img src="https://www.senatorabadi.web.id/ecommerce_herbal/admin/assets/link/e2b7782138653491a0000329" alt="Logo" loading="lazy">
            <span>Nadhief Herbal</span>
        </div>
        <div class="nav-actions">
            <div class="user-icon-btn" onclick="toggleUserModal()">
                <i class="fas fa-user"></i>
            </div>
            <div class="search-container">
                <input type="text" id="search-input" placeholder="Cari produk..." onkeyup="debouncedFilterProducts()">
                <i class="fas fa-search search-btn" onclick="toggleSearch()"></i>
            </div>
            <div class="cart-icon-btn" onclick="toggleCart()">
                <i class="fas fa-shopping-cart"></i>
                <span class="cart-count" id="cart-count">0</span>
            </div>
        </div>
    </nav>

    <!-- SLIDER BANNER -->
    <section class="slider-section" id="home-slider">
        <div class="slider-container">
            <div class="slider-wrapper" id="slider-wrapper"></div>
        </div>
        <div class="slider-dots" id="slider-dots"></div>
    </section>

    <!-- MAIN CONTENT -->
    <main class="container">
        
        <!-- HOME PAGE -->
        <div id="home-page" class="page active">
            <h1 class="main-title">Katalog Produk</h1>
            <div class="category-filters" id="category-filters"></div>
            <div id="produk-list" class="produk-grid"></div>
            <div id="pagination-container" style="display: flex; justify-content: center; margin-top: 25px; gap: 8px;"></div>
        </div>

        <!-- DETAIL PAGE -->
        <div id="detail-page" class="page" style="display:none;">
            <div class="breadcrumb">
                <span onclick="closeAllPages()">Beranda</span> &gt;
                <span id="bread-cat" onclick="showCategoryPage(this.innerText)">Kategori</span> &gt;
                <span id="bread-name">Nama Produk</span>
            </div>
            <div id="detail-content"></div>
        </div>

        <!-- CATEGORY PAGE -->
        <div id="category-page" class="page" style="display:none;">
            <div class="breadcrumb">
                <span onclick="closeAllPages()">Beranda</span> &gt;
                <span id="cat-page-name">Kategori</span>
            </div>
            <h2 class="main-title" id="cat-page-title">Kategori</h2>
            <div id="category-produk-list"></div>
        </div>

        <!-- CHECKOUT PAGE -->
        <div id="checkout-page" class="page" style="display:none;">
            <div class="breadcrumb">
                <span onclick="closeAllPages()">Beranda</span> &gt; Checkout
            </div>
            <h2 class="main-title">Detail Pengiriman</h2>
            <div class="checkout-layout">
                <div class="checkout-form-container">
                    <form id="checkout-form" onsubmit="event.preventDefault(); payAndProcessOrder();">
                        <div class="form-group">
                            <label>Nama Lengkap *</label>
                            <input type="text" id="co-nama" placeholder="Masukkan nama penerima" required>
                        </div>
                        <div class="form-group">
                            <label>No. WhatsApp *</label>
                            <input type="tel" id="co-wa" placeholder="08xxxxxxxxxx" required>
                        </div>
                        <div class="form-group autocomplete-wrapper">
                            <label>Provinsi & Kota *</label>
                            <input type="text" id="co-kota" placeholder="Ketik nama kota..." oninput="handleKotaInput(this.value)" autocomplete="off" required>
                            <div id="kota-dropdown"></div>
                        </div>
                        <div class="form-group">
                            <label>Alamat Lengkap *</label>
                            <textarea id="co-alamat" rows="3" placeholder="Jalan, RT/RW, Kecamatan, Kode Pos" required></textarea>
                        </div>
                        <button type="submit" id="btn-pay-now" class="btn-pay">
                            <i class="fas fa-credit-card"></i> Bayar Sekarang
                        </button>
                    </form>
                </div>
                <div class="checkout-summary-container">
                    <div class="section-header">
                        <i class="fas fa-shopping-bag"></i>
                        <h3>Pesanan Anda</h3>
                    </div>
                    <div id="co-items-container"></div>
                    <div class="checkout-totals">
                        <div class="total-line"><span>Subtotal Produk</span><span id="co-subtotal">Rp 0</span></div>
                        <div class="total-line"><span>Ongkos Kirim</span><span id="co-ongkir-display">Rp 0</span></div>
                        <div class="total-line grand"><span>Total Bayar</span><span id="co-grand-total">Rp 0</span></div>
                    </div>
                    <div class="shipping-options" id="shipping-options-container">
                        <p style="text-align:center; color:#888; font-size:0.9rem;">Silakan pilih kota terlebih dahulu.</p>
                    </div>
                    <div style="text-align:center; margin-top:15px; font-size:0.8rem; color:#888;">
                        <i class="fas fa-lock"></i> Pembayaran aman melalui Payment Gateway.
                    </div>
                </div>
            </div>
        </div>

        <!-- ORDERS PAGE -->
        <div id="orders-page" class="page" style="display:none;">
            <div class="breadcrumb">
                <span onclick="closeAllPages()">Beranda</span> &gt; Riwayat Pesanan
            </div>
            <h2 class="main-title">Riwayat Pesanan Saya</h2>
            <div id="orders-list" class="orders-container"></div>
        </div>

    </main>

    <!-- CART MODAL -->
    <div class="cart-overlay" id="cart-overlay" onclick="toggleCart()"></div>
    <div class="cart-modal" id="cart-modal"></div>

    <!-- USER MODAL -->
    <div class="user-overlay" id="user-overlay" onclick="toggleUserModal()"></div>
    <div class="user-modal" id="user-modal"></div>

    <!-- FOOTER -->
    <footer class="footer-centered">
        <h3>Nadhief Herbal</h3>
        <p class="footer-tagline-main">Harmoni Alam, Vitalitas Tubuh.</p>
        <p class="footer-tagline-second">Kesejahteraan Alami, Sehat Sejati.</p>
        <p class="footer-desc">Toko kebutuhan muslim: Madu murni, herbal pilihan, kurma premium, dan layanan kesehatan alami berstandar higienis.</p>
        <div class="footer-hours">
            <i class="far fa-clock"></i> Jam Operasional: Setiap hari, 08.00 - 21.00 WIB
        </div>
        <p class="copyright-simple">Copyright © 2026 Nadhief Herbal. All Rights Reserved.</p>
    </footer>

    <!-- TOAST -->
    <div id="toast-container"></div>

    <!-- JavaScript -->
    <script src="js/detail.js"></script>
    <script src="js/script.js"></script>
</body>
</html>