<?= $this->extend('layouts/owner') ?> 
<?= $this->section('content') ?> 

<script src="https://cdn.tailwindcss.com"></script> 
<script> 
    tailwind.config = { 
        darkMode: 'class', 
        theme: { 
            extend: { 
                colors: { 
                    slate: { 950: '#0b1329' } 
                } 
            } 
        } 
    } 
</script> 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> 

<style> 
    body { 
        font-family: 'Inter', sans-serif !important; 
        background-color: #f8fafc; 
        transition: background-color 0.3s ease, color 0.3s ease; 
    } 
    /* Form Design Tokens */ 
    .form-section-card { 
        background: #ffffff; 
        border: 1px solid rgba(226, 232, 240, 0.8); 
        border-radius: 1.25rem; 
        transition: all 0.3s ease; 
    } 
    .form-control-custom { 
        display: block; 
        width: 100%; 
        padding: 0.625rem 0.875rem; 
        font-size: 0.875rem; 
        font-weight: 400; 
        line-height: 1.5; 
        color: #1e293b; 
        background-color: #ffffff; 
        background-clip: padding-box; 
        border: 1px solid #cbd5e1; 
        appearance: none; 
        border-radius: 0.75rem; 
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; 
    } 
    .form-control-custom:focus { 
        color: #0f172a; 
        background-color: #ffffff; 
        border-color: #6366f1; 
        outline: 0; 
        box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12); 
    } 
    /* Custom Webkit scrollbar */ 
    ::-webkit-scrollbar { width: 6px; height: 6px; } 
    ::-webkit-scrollbar-track { background: #f1f5f9; } 
    ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } 
    
    /* Dark Mode Global Overrides */ 
    html.dark body { background-color: #0b1329 !important; color: #f8fafc !important; } 
    html.dark .form-section-card { background-color: #1e293b !important; border-color: #334155 !important; color: #f1f5f9 !important; } 
    html.dark .form-control-custom { background-color: #0f172a !important; border-color: #475569 !important; color: #f1f5f9 !important; } 
    html.dark .form-control-custom:focus { border-color: #818cf8; box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.15); } 
    html.dark .text-slate-900, html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5 { color: #f8fafc !important; } 
    html.dark .text-slate-500, html.dark .text-muted { color: #94a3b8 !important; } 
    html.dark .border-slate-100 { border-color: #334155 !important; } 
    html.dark .bg-slate-50 { background-color: #0f172a !important; } 
</style> 

<div class="container-fluid py-4 px-3 sm:px-4 lg:px-6"> 
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6 pb-6 border-b border-slate-200 dark:border-slate-700"> 
        <div> 
            <div class="flex items-center gap-2 mb-2"> 
                <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-800/50 shadow-sm"> 
                    <span class="w-2 h-2 rounded-full bg-emerald-600 animate-pulse"></span> 
                    Inventaris & Logistik
                </span> 
            </div> 
            <h1 class="text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight flex items-center gap-2"> 
                <i class="fas fa-boxes text-emerald-600 dark:text-emerald-400"></i> 
                <?= esc($title ?? 'Tambah Belanja Material Mentah') ?> 
            </h1> 
            <p class="text-sm text-slate-500 mt-1">Catat pembelian material mentah, tambah supplier baru atau produk baru secara otomatis, dan kelola biaya pengadaan.</p> 
        </div> 

        <div class="flex items-center gap-2 w-full md:w-auto justify-end"> 
            <!-- Theme Changer Button --> 
            <button type="button" onclick="toggleDarkMode()" class="bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 border border-slate-200 dark:border-slate-600 rounded-xl p-2.5 shadow-sm transition-all flex items-center justify-center" title="Ubah Tema Gelap/Terang"> 
                <i id="themeIcon" class="fas fa-moon text-lg"></i> 
            </button> 
            <!-- Go Back Link --> 
            <a href="<?= base_url('owner/material') ?>" class="bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 border border-slate-200 dark:border-slate-600 font-semibold text-sm rounded-xl px-4 py-2.5 shadow-sm transition-all flex items-center gap-2 decoration-none no-underline"> 
                <i class="fas fa-arrow-left text-slate-400"></i> 
                <span>Kembali</span> 
            </a> 
        </div> 
    </div> 

    <form action="<?= base_url('owner/material/store') ?>" method="post" id="createMaterialForm"> 
        <?= csrf_field() ?> 
        <div class="row g-4"> 

            <!-- Left Panel: Informasi Pembelian & Supplier --> 
            <div class="col-12 col-lg-5"> 
                <div class="form-section-card p-4 sm:p-5 shadow-xs h-full space-y-4"> 
                    <h3 class="text-base font-bold text-slate-900 mb-2 pb-2 border-b border-slate-100 flex items-center gap-2"> 
                        <i class="fas fa-file-invoice text-emerald-500"></i> 
                        Informasi Pembelian 
                    </h3> 

                    <!-- Nomor Purchase --> 
                    <div class="mb-3"> 
                        <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Data Order / Customer <span class="text-rose-500">*</span></label> 
                        <div class="relative"> 
                            <select name="nomor_purchase" class="form-control-custom appearance-none pr-10" required>
                                <option value="">-- Pilih Nama Customer --</option>
                                <?php if(!empty($orders)): ?>
                                    <?php foreach($orders as $order): ?>
                                        <option value="<?= esc($order['customer_name'] ?? '') ?>">
                                            <?= esc($order['customer_name'] ?? 'Tanpa Nama') ?>
                                        </option>
                                    <?php endforeach; ?>
                                <?php endif; ?>
                            </select>
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-slate-500">
                                <i class="fas fa-chevron-down text-xs"></i>
                            </div>
                        </div> 
                        <small class="text-[10px] text-slate-400 block mt-1.5 leading-tight">Pilih referensi nama dari data order yang tersedia di database.</small> 
                    </div> 

                    <!-- Supplier Selection (Datalist for Select or Create New) --> 
                    <div class="mb-3"> 
                        <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Nama Supplier <span class="text-rose-500">*</span></label> 
                        <div class="relative"> 
                            <input type="text" name="nama_supplier" list="supplier_list" class="form-control-custom pr-10" placeholder="Ketik atau Pilih Supplier..." autocomplete="off" required>
                            <datalist id="supplier_list">
                                <?php if(!empty($suppliers)): ?>
                                    <?php foreach($suppliers as $supplier): ?>
                                        <option value="<?= esc($supplier['nama_supplier']) ?>">
                                    <?php endforeach; ?>
                                <?php endif; ?>
                            </datalist>
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-slate-500"> 
                                <i class="fas fa-search text-xs"></i> 
                            </div> 
                        </div> 
                        <small class="text-[10px] text-emerald-600 dark:text-emerald-400 font-medium block mt-1.5 leading-tight">
                            <i class="fas fa-info-circle mr-1"></i>Ketik nama baru jika supplier belum ada; sistem akan mendaftarkannya otomatis.
                        </small> 
                    </div> 
                </div> 
            </div> 

            <div class="col-12 col-lg-7"> 
                <div class="form-section-card p-4 sm:p-5 shadow-xs h-full bg-slate-50/50 dark:bg-slate-900/10"> 
                    <h3 class="text-base font-bold text-slate-900 mb-4 pb-2 border-b border-slate-100 flex items-center gap-2"> 
                        <i class="fas fa-box-open text-emerald-500"></i> 
                        Detail Material & Biaya 
                    </h3> 
                    <div class="row g-3"> 

                        <!-- Nama Produk (Datalist for Select or Create New) --> 
                        <div class="col-12 mb-3"> 
                            <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Nama Produk / Material <span class="text-rose-500">*</span></label> 
                            <div class="relative rounded-xl shadow-xs"> 
                                <input type="text" name="nama_product" list="product_list" class="form-control-custom" placeholder="Ketik atau Pilih Material..." autocomplete="off" required> 
                                <datalist id="product_list">
                                    <?php if(!empty($products)): ?>
                                        <?php foreach($products as $product): ?>
                                            <option value="<?= esc($product['nama_product']) ?>">
                                        <?php endforeach; ?>
                                    <?php endif; ?>
                                </datalist>
                            </div> 
                            <small class="text-[10px] text-emerald-600 dark:text-emerald-400 font-medium block mt-1.5 leading-tight">
                                <i class="fas fa-info-circle mr-1"></i>Sistem akan menyimpan material ini otomatis jika belum terdaftar.
                            </small> 
                        </div> 

                        <!-- QTY Pembelian --> 
                        <div class="col-12 col-sm-6 mb-3"> 
                            <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Kuantitas (Qty) <span class="text-rose-500">*</span></label> 
                            <div class="relative rounded-xl shadow-xs"> 
                                <input type="number" step="any" name="qty" id="qty" class="form-control-custom calc-input" placeholder="0" min="0.01" required> 
                            </div> 
                        </div> 

                        <!-- Harga Beli Satuan --> 
                        <div class="col-12 col-sm-6 mb-3"> 
                            <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Harga Beli Satuan (Rp) <span class="text-rose-500">*</span></label> 
                            <div class="relative rounded-xl shadow-xs"> 
                                <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none"> 
                                    <span class="text-slate-400 text-xs font-semibold">Rp</span> 
                                </div> 
                                <input type="number" name="harga_beli" id="harga_beli" class="form-control-custom pl-9 calc-input" placeholder="0" min="0" required> 
                            </div> 
                        </div> 
                    </div> 

                    <!-- Total Biaya (Readonly Calculated) --> 
                    <div class="mb-2 mt-4 pt-4 border-t border-slate-200 dark:border-slate-700"> 
                        <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Total Biaya Keseluruhan</label> 
                        <div class="relative rounded-xl shadow-xs"> 
                            <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none"> 
                                <span class="text-slate-500 text-xs font-bold">Rp</span> 
                            </div> 
                            <input type="number" name="total_biaya" id="total_biaya" class="form-control-custom pl-9 bg-slate-100 dark:bg-slate-950 font-extrabold text-emerald-600 dark:text-emerald-400" readonly> 
                        </div> 
                        <!-- Real-time formatted Rupiah Badge --> 
                        <div class="mt-2.5 p-3 bg-white dark:bg-slate-950/50 rounded-xl border border-slate-100 dark:border-slate-800 flex justify-between items-center text-xs"> 
                            <span class="text-slate-400 font-medium">Format Terbilang:</span> 
                            <span id="calculatedTotalText" class="font-extrabold text-emerald-600 dark:text-emerald-400">Rp 0</span> 
                        </div> 
                    </div> 
                </div> 
            </div> 
        </div> 

        <!-- Submit Button Row --> 
        <div class="mt-6 form-section-card p-4 shadow-xs flex flex-col sm:flex-row justify-end items-center gap-2"> 
            <a href="<?= base_url('owner/material') ?>" class="w-full sm:w-auto bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-200 font-semibold text-xs rounded-xl px-5 py-3 transition-all text-center decoration-none no-underline block"> 
                Batalkan 
            </a> 
            <button type="submit" class="w-full sm:w-auto bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-sm rounded-xl px-6 py-3 shadow-md hover:shadow-lg transition-all border-0 flex items-center justify-center gap-2"> 
                <i class="fas fa-save"></i> Simpan Transaksi 
            </button> 
        </div> 
    </form> 
</div> 

<script> 
document.addEventListener("DOMContentLoaded", function() { 

    // ========================================== 
    // PURCHASE CALCULATOR (QTY * HARGA BELI) 
    // ========================================== 
    const qtyInput = document.getElementById('qty'); 
    const hargaBeliInput = document.getElementById('harga_beli'); 
    const totalBiayaInput = document.getElementById('total_biaya'); 
    const calculatedTotalText = document.getElementById('calculatedTotalText'); 

    function calculateTotal() { 
        const qty = parseFloat(qtyInput.value) || 0; 
        const hargaBeli = parseFloat(hargaBeliInput.value) || 0; 
        
        // Rumus: Qty * Harga Beli Satuan
        const total = qty * hargaBeli; 
        
        // Pasangkan hasil ke input terproteksi (readonly) untuk disimpan ke database
        totalBiayaInput.value = Math.max(0, Math.round(total)); 
        
        // Format visual IDR Rupiah
        calculatedTotalText.innerText = new Intl.NumberFormat('id-ID', { 
            style: 'currency', 
            currency: 'IDR', 
            maximumFractionDigits: 0 
        }).format(total); 
    } 

    // Pasang listener real-time pada elemen qty & harga beli
    document.querySelectorAll('.calc-input').forEach(input => { 
        input.addEventListener('input', calculateTotal); 
    }); 

    // Jalankan kalkulasi awal saat muatan selesai
    calculateTotal(); 


    // ========================================== 
    // SYSTEM DARK MODE CONTROLLER 
    // ========================================== 
    window.toggleDarkMode = function() { 
        const html = document.documentElement; 
        const icon = document.getElementById('themeIcon'); 
        
        if (html.classList.contains('dark')) { 
            html.classList.remove('dark'); 
            localStorage.setItem('theme', 'light'); 
            icon.className = "fas fa-moon text-lg"; 
        } else { 
            html.classList.add('dark'); 
            localStorage.setItem('theme', 'dark'); 
            icon.className = "fas fa-sun text-lg text-amber-400"; 
        } 
    }; 

    // Auto-detect & sinkronisasi status tema gelap
    if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { 
        document.documentElement.classList.add('dark'); 
        document.getElementById('themeIcon').className = "fas fa-sun text-lg text-amber-400"; 
    } 
}); 
</script> 
<?= $this->endSection() ?>