@extends('template.desktop.app')

@section('title', 'Tambah Produk Baru')

@section('content')
    <div class="row">
        <div class="col-12">

            <!-- Navbar Breadcrumb -->
            <div class="mb-4 d-flex align-items-center justify-content-between">
                <a href="{{ route('products.index') }}"
                    class="btn btn-sm btn-white border-0 text-muted fw-600 px-3 hover-text-dark transition-all">
                    <i data-lucide="arrow-left" style="width: 16px; margin-right: 6px;"></i> Kembali
                </a>
                <div class="text-muted small fw-500">Manajemen Produk</div>
            </div>

            <div class="card border-0 shadow-none mb-5">
                <div class="card-header bg-white border-bottom border-light-subtle py-4 px-0">
                    <div class="d-flex align-items-center gap-3">
                        <div class="d-flex align-items-center justify-content-center bg-dark text-white rounded-2"
                            style="width: 42px; height: 42px;">
                            <i data-lucide="package-plus" style="width: 20px;"></i>
                        </div>
                        <div>
                            <h5 class="fw-800 text-dark mb-0">Tambah Produk Baru</h5>
                            <p class="text-muted small mb-0 fw-500">Isi formulir di bawah untuk mendaftarkan SKU.</p>
                        </div>
                    </div>
                </div>

                <div class="card-body px-0 py-5">
                    <form id="productForm">
                        @csrf

                        <!-- Section: Basic Info -->
                        <div class="mb-5">
                            <label class="section-label">Informasi Dasar</label>
                            <div class="row g-4">
                                <div class="col-12 col-md-6">
                                    <label class="form-label">Nama Produk <span class="text-danger">*</span></label>
                                    <input type="text" name="name" class="form-control"
                                        placeholder="Nama produk lengkap" required>
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="form-label">Kode SKU <span class="text-danger">*</span></label>
                                    <input type="text" name="sku_code" class="form-control font-monospace text-uppercase"
                                        placeholder="Contoh: SKU-001" required>
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="form-label">Tipe Produk <span class="text-danger">*</span></label>
                                    <select name="product_type" id="product_type" class="form-select" required>
                                        <option value="">Pilih Tipe...</option>
                                        <option value="single">Single Item</option>
                                        <option value="combination">Kombinasi / Bundling</option>
                                    </select>
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="form-label">Kategori Satuan <span class="text-danger">*</span></label>
                                    <select name="category" class="form-select" required>
                                        <option value="">Pilih Satuan...</option>
                                        <option value="pcs">Pcs</option>
                                        <option value="box">Box</option>
                                        <option value="sachet">Sachet</option>
                                        <option value="strip">Strip</option>
                                        <option value="pack">Pack</option>
                                        <option value="bottle">Bottle</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="border-bottom border-light mb-5"></div>

                        <div class="mb-5">
                            <label class="section-label">Harga & Biaya</label>
                            <div class="card bg-white border border-light-subtle rounded-2 p-4">
                                <div class="row g-3">
                                    <!-- Cost Logic -->
                                    <div class="col-12 col-md-4">
                                        <label class="form-label small text-muted">HPP (Modal)</label>
                                        <div class="input-group">
                                            <span class="input-group-text">Rp</span>
                                            <input type="number" id="hpp" name="hpp" class="form-control"
                                                placeholder="0" required>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label class="form-label small text-muted">Fulfillment</label>
                                        <div class="input-group">
                                            <span class="input-group-text">Rp</span>
                                            <input type="number" id="fulfillment_cost" name="fulfillment_cost"
                                                class="form-control" placeholder="0" required>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label class="form-label small text-muted">Total Cost</label>
                                        <div class="input-group">
                                            <span class="input-group-text bg-white border-end-0">Rp</span>
                                            <input type="number" id="total_cost"
                                                class="form-control bg-white border-start-0 fw-bold text-dark" readonly>
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="my-2 border-top border-white"></div>
                                    </div>

                                    <!-- Sales Logic -->
                                    <div class="col-12 col-md-6">
                                        <label class="form-label fw-600 text-dark">Harga Jual <span
                                                class="text-danger">*</span></label>
                                        <div class="input-group input-group-lg">
                                            <span class="input-group-text bg-white text-muted">Rp</span>
                                            <input type="number" name="selling_price" class="form-control fw-bold"
                                                required>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <label class="form-label fw-600 text-dark">Subsidi Ongkir (Diskon)</label>
                                        <div class="input-group input-group-lg">
                                            <span class="input-group-text bg-white text-warning"><i data-lucide="scissors"
                                                    style="width: 18px;"></i></span>
                                            <input type="number" name="shipping_discount" class="form-control fw-bold"
                                                value="0" placeholder="0">
                                        </div>
                                    </div>

                                    <!-- Extra Info -->
                                    <div class="col-12 col-md-6">
                                        <label class="form-label small text-muted">Total Deduction</label>
                                        <div class="input-group">
                                            <span class="input-group-text">Rp</span>
                                            <input type="number" name="total_deduction" class="form-control"
                                                value="0" required>
                                        </div>
                                    </div>
                                    <label class="form-label small text-muted">Bonus CS</label>
                                    <div class="input-group">
                                        <span class="input-group-text">Rp</span>
                                        <input type="number" name="bonus" class="form-control" value="0"
                                            min="0">
                                    </div>
                                </div>

                                <!-- Live Profit Preview -->
                                <div class="col-12">
                                    <div id="profit_card"
                                        class="profit-card d-flex align-items-center justify-content-between mt-3">
                                        <div>
                                            <div class="text-uppercase text-muted fw-bold fs-tiny mb-1 tracking-wide">
                                                Estimasi Net Profit</div>
                                            <div class="text-muted small" style="font-size: 0.8rem;">Harga Jual - (HPP +
                                                Fulfillment + Potongan)</div>
                                        </div>
                                        <div class="text-end">
                                            <h4 class="fw-800 mb-0 tracking-tight" id="live_margin_amount">Rp 0</h4>
                                            <div class="badge bg-white border text-muted rounded-1 mt-1 px-2"
                                                id="live_margin_percent">0%</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>

                <!-- Dynamic Section: Conversions (Single) -->
                <div id="conversionContainer" class="mb-5 d-none slide-up-enter">
                    <div class="d-flex align-items-center justify-content-between mb-3">
                        <label class="section-label mb-0">Konversi Unit</label>
                        <button type="button" class="btn btn-sm btn-white border shadow-sm text-dark fw-500"
                            id="addConversionBtn">
                            <i data-lucide="plus" style="width: 14px;"></i> Tambah
                        </button>
                    </div>
                    <div class="p-0">
                        <div id="conversionWrapper" class="d-flex flex-column gap-3">
                            <div class="text-muted small fst-italic py-2 empty-msg px-1">Tambahkan konversi jika
                                produk ini memiliki satuan turunan.</div>
                        </div>
                    </div>
                </div>

                <!-- Dynamic Section: Combinations (Bundle) -->
                <div id="combinationContainer" class="mb-5 d-none slide-up-enter">
                    <div class="d-flex align-items-center justify-content-between mb-3">
                        <label class="section-label mb-0">Isi Paket Bundling</label>
                        <button type="button" class="btn btn-sm btn-white border shadow-sm text-dark fw-500"
                            id="addCombinationBtn">
                            <i data-lucide="plus" style="width: 14px;"></i> Tambah Item
                        </button>
                    </div>
                    <div class="p-0">
                        <div id="combinationWrapper" class="d-flex flex-column gap-3">
                            <div class="text-muted small fst-italic py-2 empty-msg px-1">Tambahkan produk single
                                yang termasuk dalam paket ini.</div>
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-end gap-3 pt-4 border-top border-light">
                    <a href="{{ route('products.index') }}" class="btn btn-light px-4 fw-600 text-muted">Batal</a>
                    <button type="submit" id="submitBtn" class="p-btn p-btn-primary px-5 rounded-2">
                        <i data-lucide="save" style="width: 18px; margin-right: 8px;"></i> Simpan Produk
                    </button>
                </div>
                </form>
            </div>
        </div>
    </div>
    </div>

    <style>
        /* Styling System */
        :root {
            --bs-primary: #7B1E24;
            --bs-primary-hover: #5e161b;
            --border-color: #f1f5f9;
            /* Very light border */
            --input-bg: #ffffff;
            --input-focus-shadow: rgba(123, 30, 36, 0.05);
            /* Softer shadow */
            --text-main: #334155;
        }

        body {
            background-color: #ffffff;
            /* Pure White */
            font-family: 'Inter', system-ui, sans-serif;
            color: var(--text-main);
        }

        .hover-scale {
            transition: transform 0.2s;
        }

        .hover-scale:hover {
            transform: scale(1.02);
        }

        .fw-800 {
            font-weight: 800;
        }

        .fw-600 {
            font-weight: 600;
        }

        .fw-500 {
            font-weight: 500;
        }

        .section-label {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-weight: 700;
            color: #94a3b8;
            margin-bottom: 1.25rem;
            display: block;
        }

        /* Form Controls */
        .form-label {
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: #475569;
        }

        .form-control,
        .form-select,
        .input-group-text {
            border: 1px solid var(--border-color);
            background-color: var(--input-bg);
            font-size: 0.9rem;
            padding: 0.75rem 1rem;
            border-radius: 0.75rem;
            /* Softer rounded corners */
            color: #1e293b;
            /* No transition to prevent shrinking effect */
        }

        .input-group-text {
            background-color: #fff;
            /* White background instead of gray */
            color: #94a3b8;
            font-weight: 500;
            border-right: none;
        }


        .form-control:focus,
        .form-select:focus {
            border-color: var(--bs-primary);
            box-shadow: none;
            outline: 0;
        }

        /* Input Groups Fix */
        .input-group .input-group-text {
            border-radius: 0.75rem 0 0 0.75rem;
            border-right: none;
        }

        .input-group .form-control {
            border-radius: 0 0.75rem 0.75rem 0;
            border-left: 1px solid var(--border-color);
        }

        /* Buttons */
        .p-btn {
            padding: 0.75rem 1.5rem;
            border-radius: 99px;
            font-weight: 600;
            transition: all 0.2s;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: none;
        }

        .p-btn-primary {
            background-color: var(--bs-primary);
            color: white;
        }

        .p-btn-primary:hover {
            background-color: var(--bs-primary-hover);
            transform: translateY(-1px);
            box-shadow: 0 8px 16px -4px rgba(123, 30, 36, 0.3);
        }

        .btn-white {
            background: white;
            color: #1e293b;
        }

        .btn-white:hover {
            background: #f8fafc;
        }

        /* Utility */
        .card {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
        }

        /* Minimal Animation */
        .fade-enter {
            animation: fadeIn 0.2s ease-out forwards;
        }

        /* Profit Card Custom */
        .profit-card {
            background-color: #f8fafc;
            border: 1px dashed #e2e8f0;
            border-radius: var(--radius-sm);
            padding: 1.25rem;
            transition: all 0.3s ease;
        }

        .profit-card .fs-tiny {
            font-size: 0.7rem;
            letter-spacing: 0.05em;
        }

        /* Dynamic States */
        .profit-card.positive {
            background-color: #f0fdf4;
            /* Green-50 */
            border-color: #bbf7d0;
            /* Green-200 */
            border-style: solid;
        }

        .profit-card.positive #live_margin_amount {
            color: #166534;
            /* Green-800 */
        }

        .profit-card.positive #live_margin_percent {
            color: #15803d;
            border-color: #bbf7d0 !important;
        }

        .profit-card.negative {
            background-color: #fef2f2;
            /* Red-50 */
            border-color: #fecaca;
            /* Red-200 */
            border-style: solid;
        }

        .profit-card.negative #live_margin_amount {
            color: #991b1b;
            /* Red-800 */
        }

        .profit-card.negative #live_margin_percent {
            color: #b91c1c;
            border-color: #fecaca !important;
        }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/lucide@latest"></script>

    <script>
        const singleProducts = @json($singleProducts ?? []);

        document.addEventListener('DOMContentLoaded', () => {
            lucide.createIcons();

            const productType = document.getElementById('product_type');
            const conversionContainer = document.getElementById('conversionContainer');
            const combinationContainer = document.getElementById('combinationContainer');
            const conversionWrapper = document.getElementById('conversionWrapper');
            const combinationWrapper = document.getElementById('combinationWrapper');

            // Cost Calc Elements
            const hpp = document.getElementById('hpp');
            const fulfillment = document.getElementById('fulfillment_cost');
            const totalCost = document.getElementById('total_cost');

            // Profit Calc Elements
            const sellingPrice = document.querySelector('input[name="selling_price"]');
            const shippingDiscount = document.querySelector('input[name="shipping_discount"]');
            const totalDeduction = document.querySelector('input[name="total_deduction"]');
            const bonus = document.querySelector('input[name="bonus"]');

            // Display Elements
            const liveMarginAmount = document.getElementById('live_margin_amount');
            const liveMarginPercent = document.getElementById('live_margin_percent');
            const profitCard = document.getElementById('profit_card');

            // Form
            const form = document.getElementById('productForm');
            const submitBtn = document.getElementById('submitBtn');
            const nameInput = document.querySelector('input[name="name"]');

            // Auto focus
            if (nameInput) nameInput.focus();

            let convIndex = 0;
            let comboIndex = 0;
            const units = ['pcs', 'sachet', 'strip', 'tablet', 'capsule', 'pack', 'box', 'bottle'];

            const formatRupiah = (num) => {
                return new Intl.NumberFormat('id-ID', {
                    style: 'currency',
                    currency: 'IDR',
                    minimumFractionDigits: 0
                }).format(num);
            };

            // Auto Calc Engine
            const calculateMetrics = () => {
                const h = parseFloat(hpp.value) || 0;
                const f = parseFloat(fulfillment.value) || 0;
                const cost = h + f;

                // Update Total Cost
                totalCost.value = cost;

                const price = parseFloat(sellingPrice.value) || 0;
                const deduc = parseFloat(totalDeduction.value) || 0;
                const shipDisc = parseFloat(shippingDiscount.value) || 0;
                const bon = parseFloat(bonus.value) || 0;

                const profit = price - (cost + deduc + shipDisc + bon);
                const percent = price > 0 ? ((profit / price) * 100) : 0;

                liveMarginAmount.innerText = formatRupiah(profit);
                liveMarginPercent.innerText = percent.toFixed(1) + '%';

                // Color Logic
                profitCard.classList.remove('positive', 'negative');

                if (profit > 0) {
                    profitCard.classList.add('positive');
                } else if (profit < 0) {
                    profitCard.classList.add('negative');
                }
            };

            // Attach listeners to all inputs affecting profit
            const metricInputs = [hpp, fulfillment, sellingPrice, shippingDiscount, totalDeduction, bonus];
            metricInputs.forEach(input => {
                if (input) input.addEventListener('input', calculateMetrics);
            });

            // Toggle Type
            productType.addEventListener('change', () => {
                const type = productType.value;

                if (type === 'single') {
                    conversionContainer.classList.remove('d-none');
                    combinationContainer.classList.add('d-none');
                } else if (type === 'combination') {
                    conversionContainer.classList.add('d-none');
                    combinationContainer.classList.remove('d-none');
                } else {
                    conversionContainer.classList.add('d-none');
                    combinationContainer.classList.add('d-none');
                }
            });

            // Add Conversion
            document.getElementById('addConversionBtn').addEventListener('click', () => {
                // remove empty message
                const emptyMsg = conversionWrapper.querySelector('.empty-msg');
                if (emptyMsg) emptyMsg.remove();

                const row = document.createElement('div');
                row.className = 'd-flex gap-2 align-items-center mb-2 fade-enter';
                row.innerHTML = `
                <div class="input-group" style="width: 40%;">
                    <span class="input-group-text bg-white">1</span>
                    <select name="conversions[${convIndex}][target_unit]" class="form-select" required>
                        <option value="">Satuan...</option>
                        ${units.map(u => `<option value="${u}">${u.toUpperCase()}</option>`).join('')}
                    </select>
                </div>
                <div class="text-muted fw-bold">=</div>
                <div class="input-group flex-grow-1">
                    <input type="number" name="conversions[${convIndex}][base_quantity]" class="form-control" placeholder="Jml" min="1" required>
                    <span class="input-group-text bg-white text-muted small">Base</span>
                </div>
                <button type="button" class="btn btn-light text-danger border p-2 remove-row rounded-3 ms-2"><i data-lucide="trash-2" style="width:16px;"></i></button>
            `;

                row.querySelector('.remove-row').addEventListener('click', () => row.remove());
                conversionWrapper.appendChild(row);
                lucide.createIcons();
                convIndex++;
            });

            // Add Combination
            document.getElementById('addCombinationBtn').addEventListener('click', () => {
                // remove empty message
                const emptyMsg = combinationWrapper.querySelector('.empty-msg');
                if (emptyMsg) emptyMsg.remove();

                const row = document.createElement('div');
                row.className = 'd-flex gap-2 align-items-center mb-2 fade-enter';
                row.innerHTML = `
                <div style="width: 70%;">
                    <select name="combinations[${comboIndex}][product_id]" class="form-select" required>
                        <option value="">Pilih Produk Single...</option>
                        ${singleProducts.map(p => `<option value="${p.id}">${p.name} (${p.sku_code})</option>`).join('')}
                    </select>
                </div>
                <div class="input-group flex-grow-1">
                    <span class="input-group-text bg-white">Qty</span>
                    <input type="number" name="combinations[${comboIndex}][qty]" class="form-control" value="1" min="1" required>
                 </div>
                <button type="button" class="btn btn-light text-danger border p-2 remove-row rounded-3 ms-2"><i data-lucide="trash-2" style="width:16px;"></i></button>
            `;

                row.querySelector('.remove-row').addEventListener('click', () => row.remove());
                combinationWrapper.appendChild(row);
                lucide.createIcons();
                comboIndex++;
            });

            // Submit
            form.addEventListener('submit', (e) => {
                e.preventDefault();

                const originalText = submitBtn.innerHTML;
                submitBtn.disabled = true;
                submitBtn.innerHTML =
                    `<span class="spinner-border spinner-border-sm me-2"></span> Menyimpan...`;

                axios.post("{{ route('products.store') }}", new FormData(form))
                    .then(() => {
                        window.location.href = "{{ route('products.index') }}";
                    })
                    .catch((err) => {
                        console.error(err);
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = originalText;
                        alert('Gagal menyimpan produk. Mohon periksa kembali inputan Anda.');
                    });
            });
        });
    </script>
@endsection