<?= $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>

<!-- Bootstrap 5 CSS for structured responsive layout -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Fonts & Icon Packs -->
<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;
    }

    /* Premium Detail Container Visuals */
    .detail-card-premium {
        background: #ffffff;
        border: 1px solid rgba(226, 232, 240, 0.8);
        border-radius: 1.25rem;
        transition: all 0.3s ease;
    }

    /* Custom labels and badges */
    .badge-cnc-custom {
        background-color: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
        border: 1px solid rgba(59, 130, 246, 0.2);
    }
    .badge-standard {
        background-color: rgba(139, 92, 246, 0.1);
        color: #8b5cf6;
        border: 1px solid rgba(139, 92, 246, 0.2);
    }

    /* Custom scrollbars */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: #f1f5f9; }
    ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

    /* Dark Mode Theme Integrations */
    html.dark body {
        background-color: #0b1329 !important;
        color: #f8fafc !important;
    }
    html.dark .detail-card-premium {
        background-color: #1e293b !important;
        border-color: #334155 !important;
        color: #f1f5f9 !important;
    }
    html.dark .text-slate-900, html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 {
        color: #f8fafc !important;
    }
    html.dark .text-slate-500, html.dark .text-muted, html.dark .text-slate-400 {
        color: #94a3b8 !important;
    }
    html.dark .border-slate-100 {
        border-color: #334155 !important;
    }
    html.dark .bg-slate-50 {
        background-color: #111a2e !important;
    }
    html.dark .badge-cnc-custom {
        background-color: rgba(59, 130, 246, 0.2);
        color: #60a5fa;
    }
    html.dark .badge-standard {
        background-color: rgba(139, 92, 246, 0.2);
        color: #a78bfa;
    }
</style>

<div class="container-fluid py-4 px-3 sm:px-4 lg:px-6">

    <!-- Header & Action Deck -->
    <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-indigo-50 text-indigo-700 dark:bg-indigo-950/30 dark:text-indigo-400 border border-indigo-200 dark:border-indigo-800/50 shadow-sm">
                    <span class="w-2 h-2 rounded-full bg-indigo-600 animate-pulse"></span>
                    Informasi Detail Aset
                </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-box-open text-indigo-600 dark:text-indigo-400"></i>
                Detail Spesifikasi Barang
            </h1>
            <p class="text-sm text-slate-500 mt-1">Pantau dimensi fisik, parameter operasional CNC, vendor terpaut, serta kalkulasi margin barang.</p>
        </div>

        <!-- Utility Action Buttons -->
        <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/product') ?>" 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>
            <!-- Direct Edit Button -->
            <a href="<?= base_url('owner/product/edit/'.($product['id_product'] ?? '')) ?>" class="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-sm rounded-xl px-4 py-2.5 shadow-md hover:shadow-lg transition-all flex items-center gap-2 decoration-none no-underline">
                <i class="fas fa-pen"></i>
                <span>Ubah Data</span>
            </a>
        </div>
    </div>

    <div class="row g-4">
        <!-- Left Column: Visual Asset and Financial Margins -->
        <div class="col-12 col-lg-4">
            
            <!-- Photo Presentation Box -->
            <div class="detail-card-premium p-4 mb-4 shadow-xs">
                <h3 class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-3 pb-2 border-b border-slate-100">Visual Representasi</h3>
                
                <!-- Image Wrapper with error fallbacks -->
                <div class="relative w-full aspect-square bg-slate-50 dark:bg-slate-900 rounded-2xl overflow-hidden border border-slate-200 dark:border-slate-700 flex items-center justify-center mb-3">
                    <?php 
                        $photoName = $product['product_photo'] ?? $product['image'] ?? ''; 
                        $fallbackInitial = strtoupper(substr($product['nama_product'] ?? 'P', 0, 2));
                    ?>
                    <?php if(!empty($photoName)): ?>
                        <img src="<?= base_url('uploads/products/'.$photoName) ?>" 
                             onerror="this.onerror=null; this.src='https://placehold.co/400x400/cbd5e1/1e293b?text=<?= urlencode($product['nama_product'] ?? 'Photo') ?>';" 
                             class="w-full h-full object-cover" 
                             alt="<?= esc($product['nama_product'] ?? 'Foto Produk') ?>">
                    <?php else: ?>
                        <div class="w-full h-full flex flex-col items-center justify-center bg-slate-100 dark:bg-slate-800 text-slate-400 dark:text-slate-500">
                            <i class="fas fa-image text-5xl mb-3 opacity-30"></i>
                            <span class="text-xs font-semibold">Tidak Ada Foto Produk</span>
                            <span class="text-[10px] text-slate-400 mt-1">Inisial Katalog: <?= $fallbackInitial ?></span>
                        </div>
                    <?php endif; ?>
                </div>

                <!-- Product Base Type Indicator -->
                <div class="flex items-center justify-between mt-3 p-3 bg-slate-50 dark:bg-slate-900/50 rounded-xl border border-slate-150 dark:border-slate-800">
                    <div>
                        <span class="text-xs text-slate-400 font-medium block">Klasifikasi Penjualan:</span>
                        <span class="text-xs font-bold text-slate-800 dark:text-slate-200">
                            <?= (intval($product['is_custom'] ?? 0) == 1) ? 'Khusus Pesanan' : 'Persediaan Massal' ?>
                        </span>
                    </div>
                    <?php if(intval($product['is_custom'] ?? 0) == 1): ?>
                        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-bold badge-cnc-custom">
                            <i class="fas fa-screwdriver-wrench"></i> Custom CNC
                        </span>
                    <?php else: ?>
                        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-bold badge-standard">
                            <i class="fas fa-box"></i> Standard Part
                        </span>
                    <?php endif; ?>
                </div>
            </div>

            <!-- Real-time Margin telemetry -->
            <div class="detail-card-premium p-4 shadow-xs bg-indigo-50/40 dark:bg-slate-900/40 border-indigo-100/50 mb-4">
                <h3 class="text-xs font-bold text-indigo-600 dark:text-indigo-400 uppercase tracking-wider mb-3 pb-2 border-b border-indigo-150/40">
                    <i class="fas fa-calculator me-1"></i> Telemetri Laba & Margin
                </h3>

                <?php 
                    $modal = floatval($product['harga_modal'] ?? 0);
                    $jual = floatval($product['harga'] ?? 0);
                    $stok = intval($product['stok'] ?? 0);
                    $isPoProduct = strtolower((string) ($product['stock_type'] ?? 'ready')) === 'po';
                    
                    $profit = $jual - $modal;
                    $margin_percent = 0;
                    if ($modal > 0) {
                        $margin_percent = ($profit / $modal) * 100;
                    }
                    $valuation = $stok * $modal;
                ?>

                <div class="space-y-2.5">
                    <!-- Profit Per Unit -->
                    <div class="flex justify-between items-center text-xs">
                        <span class="text-slate-400 font-medium">Profit Kotor / Item:</span>
                        <span class="font-extrabold <?= ($profit < 0) ? 'text-rose-500 animate-pulse' : 'text-slate-800 dark:text-slate-200' ?>">
                            Rp <?= number_format($profit, 0, ',', '.') ?>
                        </span>
                    </div>

                    <!-- Profit Percentage Margin -->
                    <div class="flex justify-between items-center text-xs">
                        <span class="text-slate-400 font-medium">Margin Mark-up:</span>
                        <?php if($profit < 0): ?>
                            <span class="inline-flex px-2 py-0.5 rounded font-extrabold text-[10px] bg-rose-50 text-rose-600 border border-rose-200/50">
                                Defisit
                            </span>
                        <?php elseif($margin_percent >= 40): ?>
                            <span class="inline-flex px-2 py-0.5 rounded font-extrabold text-[10px] bg-emerald-50 text-emerald-600 border border-emerald-200/50 dark:bg-emerald-950/20 dark:text-emerald-400 dark:border-emerald-800/40">
                                +<?= number_format($margin_percent, 1) ?>% (Premium)
                            </span>
                        <?php else: ?>
                            <span class="inline-flex px-2 py-0.5 rounded font-extrabold text-[10px] bg-indigo-50 text-indigo-600 border border-indigo-200/50 dark:bg-indigo-950/20 dark:text-indigo-400 dark:border-indigo-800/40">
                                +<?= number_format($margin_percent, 1) ?>%
                            </span>
                        <?php endif; ?>
                    </div>

                    <!-- Asset Valuation representation -->
                    <div class="flex justify-between items-center text-xs border-t border-dashed border-slate-200 dark:border-slate-800 pt-2.5 mt-1">
                        <span class="text-slate-400 font-medium">Valuasi Inventaris:</span>
                        <span class="font-extrabold text-indigo-600 dark:text-indigo-400">
                            Rp <?= number_format($valuation, 0, ',', '.') ?>
                        </span>
                    </div>
                </div>
            </div>

        </div>

        <!-- Right Column: Database Fields Alignment Panel -->
        <div class="col-12 col-lg-8">
            <div class="detail-card-premium p-4 sm:p-5 shadow-xs mb-4">
                <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-file-invoice text-indigo-500"></i>
                    Spesifikasi Dasar Produk
                </h3>

                <div class="row g-3">
                    <!-- Product Title -->
                    <div class="col-12">
                        <div class="p-3 bg-slate-50 dark:bg-slate-900/40 rounded-xl border border-slate-150 dark:border-slate-800">
                            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1">Nama Produk Terdaftar</span>
                            <span class="text-sm font-extrabold text-slate-800 dark:text-slate-100"><?= esc($product['nama_product'] ?? 'Nama tidak didefinisikan') ?></span>
                        </div>
                    </div>

                    <!-- Category and Supplier -->
                    <div class="col-12 col-sm-6">
                        <div class="p-3 bg-slate-50 dark:bg-slate-900/40 rounded-xl border border-slate-150 dark:border-slate-800">
                            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1">Kategori</span>
                            <span class="text-xs font-semibold text-slate-800 dark:text-slate-200"><?= esc($product['nama_kategori'] ?? 'Tidak ada Kategori') ?></span>
                        </div>
                    </div>

                    <div class="col-12 col-sm-6">
                        <div class="p-3 bg-slate-50 dark:bg-slate-900/40 rounded-xl border border-slate-150 dark:border-slate-800">
                            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1">Supplier / Vendor Utama</span>
                            <span class="text-xs font-semibold text-slate-800 dark:text-slate-200"><?= esc($product['nama_supplier'] ?? 'Tidak ada Supplier') ?></span>
                        </div>
                    </div>

                    <!-- SKU & Barcode Codes -->
                    <div class="col-12 col-sm-6">
                        <div class="p-3 bg-slate-50 dark:bg-slate-900/40 rounded-xl border border-slate-150 dark:border-slate-800">
                            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1">Kode SKU</span>
                            <span class="text-xs font-mono font-bold text-slate-800 dark:text-slate-200"><?= esc($product['sku'] ?? 'Tidak Terdefinisi') ?></span>
                        </div>
                    </div>

                    <div class="col-12 col-sm-6">
                        <div class="p-3 bg-slate-50 dark:bg-slate-900/40 rounded-xl border border-slate-150 dark:border-slate-800">
                            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1">Kode Barcode / EAN</span>
                            <span class="text-xs font-mono font-bold text-slate-800 dark:text-slate-200"><?= esc($product['barcode'] ?? 'Tidak Terdefinisi') ?></span>
                        </div>
                    </div>

                    <!-- Financial Dimensions -->
                    <div class="col-12 col-sm-4">
                        <div class="p-3 bg-slate-50 dark:bg-slate-900/40 rounded-xl border border-slate-150 dark:border-slate-800">
                            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1">Harga Modal (HPP)</span>
                            <span class="text-xs font-bold text-slate-800 dark:text-slate-200">Rp <?= number_format(floatval($product['harga_modal'] ?? 0), 0, ',', '.') ?></span>
                        </div>
                    </div>

                    <div class="col-12 col-sm-4">
                        <div class="p-3 bg-slate-50 dark:bg-slate-900/40 rounded-xl border border-slate-150 dark:border-slate-800">
                            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1">Harga Jual</span>
                            <span class="text-xs font-extrabold text-slate-800 dark:text-slate-200">Rp <?= number_format(floatval($product['harga'] ?? 0), 0, ',', '.') ?></span>
                        </div>
                    </div>

                    <!-- Stock availability -->
                    <div class="col-12 col-sm-4">
                        <div class="p-3 bg-slate-50 dark:bg-slate-900/40 rounded-xl border border-slate-150 dark:border-slate-800">
                            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1">Ketersediaan Produk</span>
                            <span class="text-xs font-bold text-slate-800 dark:text-slate-200">
                                <?php if ($isPoProduct): ?>
                                    Pre-Order <span class="text-[10px] text-slate-400 font-medium">(PO)</span>
                                <?php else: ?>
                                    <?= $stok ?> <span class="text-[10px] text-slate-400 font-medium">unit ready stock</span>
                                <?php endif; ?>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Physical Specifications Table Section with safe fallbacks -->
            <div class="detail-card-premium p-4 sm:p-5 shadow-xs mb-4">
                <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-ruler-combined text-indigo-500"></i>
                    Dimensi & Manajemen Stok Pengaman
                </h3>

                <div class="row g-3">
                    <!-- Min and Max Stock Levels -->
                    <div class="col-12 col-sm-6">
                        <div class="p-3 bg-slate-50 dark:bg-slate-900/40 rounded-xl border border-slate-150 dark:border-slate-800">
                            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1">Minimum Stock</span>
                            <span class="text-xs font-bold text-slate-800 dark:text-slate-200"><?= esc($product['min_stock'] ?? '0') ?></span>
                        </div>
                    </div>

                    <div class="col-12 col-sm-6">
                        <div class="p-3 bg-slate-50 dark:bg-slate-900/40 rounded-xl border border-slate-150 dark:border-slate-800">
                            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1">Maximum Stock</span>
                            <span class="text-xs font-bold text-slate-800 dark:text-slate-200"><?= esc($product['max_stock'] ?? '0') ?></span>
                        </div>
                    </div>

                    <!-- Material Weight -->
                    <div class="col-12 col-sm-3">
                        <div class="p-3 bg-slate-50 dark:bg-slate-900/40 rounded-xl border border-slate-150 dark:border-slate-800">
                            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1">Berat Barang</span>
                            <span class="text-xs font-bold text-slate-800 dark:text-slate-200"><?= esc($product['weight'] ?? '0') ?> <small class="text-[10px] text-slate-400">kg/gram</small></span>
                        </div>
                    </div>

                    <!-- Dimensions Dimensions (Length x Width x Height) -->
                    <div class="col-12 col-sm-3">
                        <div class="p-3 bg-slate-50 dark:bg-slate-900/40 rounded-xl border border-slate-150 dark:border-slate-800">
                            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1">Panjang</span>
                            <span class="text-xs font-bold text-slate-800 dark:text-slate-200"><?= esc($product['length'] ?? '0') ?> <small class="text-[10px] text-slate-400">mm/cm</small></span>
                        </div>
                    </div>

                    <div class="col-12 col-sm-3">
                        <div class="p-3 bg-slate-50 dark:bg-slate-900/40 rounded-xl border border-slate-150 dark:border-slate-800">
                            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1">Lebar</span>
                            <span class="text-xs font-bold text-slate-800 dark:text-slate-200"><?= esc($product['width'] ?? '0') ?> <small class="text-[10px] text-slate-400">mm/cm</small></span>
                        </div>
                    </div>

                    <div class="col-12 col-sm-3">
                        <div class="p-3 bg-slate-50 dark:bg-slate-900/40 rounded-xl border border-slate-150 dark:border-slate-800">
                            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1">Tinggi</span>
                            <span class="text-xs font-bold text-slate-800 dark:text-slate-200"><?= esc($product['height'] ?? '0') ?> <small class="text-[10px] text-slate-400">mm/cm</small></span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Descriptions and Fabrication Notes -->
            <div class="detail-card-premium p-4 sm:p-5 shadow-xs mb-4">
                <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-file-text text-indigo-500"></i>
                    Deskripsi & Catatan Teknis CNC
                </h3>

                <div class="space-y-4">
                    <!-- General Description -->
                    <div>
                        <span class="text-xs font-bold text-slate-400 uppercase tracking-wider block mb-1.5">Deskripsi Detail Produk</span>
                        <div class="p-3 bg-slate-50 dark:bg-slate-900/50 rounded-xl border border-slate-150 dark:border-slate-800 text-xs text-slate-600 dark:text-slate-300 leading-relaxed min-h-[60px]">
                            <?= !empty($product['description']) ? nl2br(esc($product['description'])) : '<span class="text-slate-400 italic">Tidak ada deskripsi detail produk yang ditambahkan.</span>' ?>
                        </div>
                    </div>

                    <!-- Fabrication Notes -->
                    <div>
                        <span class="text-xs font-bold text-slate-400 uppercase tracking-wider block mb-1.5">Catatan Teknis / Pemesinan CNC</span>
                        <div class="p-3 bg-slate-50 dark:bg-slate-900/50 rounded-xl border border-slate-150 dark:border-slate-800 text-xs text-slate-600 dark:text-slate-300 leading-relaxed min-h-[60px]">
                            <?= !empty($product['technical_notes']) ? nl2br(esc($product['technical_notes'])) : '<span class="text-slate-400 italic">Tidak ada catatan teknis atau toleransi mikron fabrikasi.</span>' ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

    // ==========================================
    // 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 animate-spin-slow";
        }
    };

    // Sync theme options on page load
    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() ?>
