@extends('template.desktop.app')

@section('title', 'Tambah Product')

@section('content')
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header py-3 px-4">
                    <h4 class="card-title mb-0">Tambah Product</h4>
                </div>

                <div class="card-body p-4">
                    <form id="productForm">
                        @csrf

                        <div class="mb-3">
                            <label class="form-label">Tipe Product</label>
                            <select name="product_type" id="product_type" class="form-select form-select-sm" required>
                                <option value="">Pilih</option>
                                <option value="single">Single</option>
                                <option value="combination">Combination</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">SKU Code</label>
                            <input type="text" name="sku_code" class="form-control form-control-sm" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Nama Product</label>
                            <input type="text" name="name" class="form-control form-control-sm" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Kategori</label>
                            <select name="category" class="form-select form-select-sm" required>
                                <option value="">Pilih</option>
                                <option value="box">Box</option>
                                <option value="sachet">Sachet</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Bonus</label>
                            <input type="number" name="bonus" class="form-control form-control-sm" value="0"
                                min="0">
                        </div>

                        {{-- PRODUCT CONVERSION (SINGLE ONLY) --}}
                        <div class="mb-3" id="conversionContainer" style="display:none">
                            <label class="form-label">Product Conversion</label>
                            <div id="conversionWrapper" class="d-flex flex-column gap-2"></div>
                            <button type="button" class="btn btn-outline-primary btn-sm mt-2" id="addConversionBtn">
                                + Tambah Conversion
                            </button>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Harga Jual</label>
                            <input type="number" name="selling_price" class="form-control form-control-sm" required>
                        </div>

                        <div class="row g-2 mb-3">
                            <div class="col-md-6">
                                <label class="form-label">HPP</label>
                                <input type="number" id="hpp" name="hpp" class="form-control form-control-sm"
                                    required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Fulfillment</label>
                                <input type="number" id="fulfillment_cost" name="fulfillment_cost"
                                    class="form-control form-control-sm" required>
                            </div>
                            <div class="col-md-6 mt-2">
                                <label class="form-label">Total Cost</label>
                                <input type="number" id="total_cost" class="form-control form-control-sm" readonly>
                            </div>
                            <div class="col-md-6 mt-2">
                                <label class="form-label">Total Deduction</label>
                                <input type="number" name="total_deduction" class="form-control form-control-sm" required>
                            </div>
                        </div>

                        {{-- COMBINATION --}}
                        <div class="mb-3" id="combinationContainer" style="display:none">
                            <label class="form-label">Product Kombinasi</label>

                            <div id="combinationWrapper" class="d-flex flex-column gap-2"></div>

                            <button type="button" class="btn btn-outline-primary btn-sm mt-2" id="addCombinationBtn">
                                + Tambah Product
                            </button>
                        </div>

                        <div class="d-flex gap-2 mt-3">
                            <button type="submit" id="submitBtn" class="btn btn-primary btn-sm">
                                Simpan
                            </button>
                            <a href="{{ route('products.index') }}" class="btn btn-secondary btn-sm">
                                Kembali
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

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

        document.addEventListener('DOMContentLoaded', () => {

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

            const conversionWrapper = document.getElementById('conversionWrapper');
            const addConversionBtn = document.getElementById('addConversionBtn');

            const combinationWrapper = document.getElementById('combinationWrapper');
            const addCombinationBtn = document.getElementById('addCombinationBtn');

            const hpp = document.getElementById('hpp');
            const fulfillment = document.getElementById('fulfillment_cost');
            const totalCost = document.getElementById('total_cost');

            const form = document.getElementById('productForm');
            const submitBtn = document.getElementById('submitBtn');

            let convIndex = 0;
            let comboIndex = 0;

            const units = ['pcs', 'sachet', 'strip', 'tablet', 'capsule', 'pack', 'box'];

            const calcCost = () => {
                totalCost.value = (+hpp.value || 0) + (+fulfillment.value || 0);
            };

            hpp.oninput = fulfillment.oninput = calcCost;

            productType.onchange = () => {
                const isSingle = productType.value === 'single';
                const isCombination = productType.value === 'combination';

                conversionContainer.style.display = isSingle ? 'block' : 'none';
                combinationContainer.style.display = isCombination ? 'block' : 'none';

                conversionWrapper.innerHTML = '';
                combinationWrapper.innerHTML = '';

                convIndex = 0;
                comboIndex = 0;
            };

            addConversionBtn.onclick = () => {
                const row = document.createElement('div');
                row.className = 'd-flex gap-2';

                row.innerHTML = `
            <select name="conversions[${convIndex}][target_unit]"
                    class="form-select form-select-sm" required>
                <option value="">Unit</option>
                ${units.map(u => `<option value="${u}">${u.toUpperCase()}</option>`).join('')}
            </select>

            <input type="number"
                   name="conversions[${convIndex}][base_quantity]"
                   class="form-control form-control-sm"
                   min="1" required>

            <button type="button"
                    class="btn btn-danger btn-sm">✕</button>
        `;

                row.querySelector('button').onclick = () => row.remove();
                conversionWrapper.appendChild(row);
                convIndex++;
            };

            addCombinationBtn.onclick = () => {
                const row = document.createElement('div');
                row.className = 'd-flex gap-2';

                row.innerHTML = `
            <select name="combinations[${comboIndex}][product_id]"
                    class="form-select form-select-sm" required>
                <option value="">Pilih Product</option>
                ${singleProducts.map(p =>
                    `<option value="${p.id}">
                            ${p.name} (${p.sku_code})
                        </option>`
                ).join('')}
            </select>

            <input type="number"
                   name="combinations[${comboIndex}][qty]"
                   class="form-control form-control-sm"
                   value="1"
                   min="1" required>

            <button type="button"
                    class="btn btn-danger btn-sm">✕</button>
        `;

                row.querySelector('button').onclick = () => row.remove();
                combinationWrapper.appendChild(row);
                comboIndex++;
            };

            form.onsubmit = e => {
                e.preventDefault();
                submitBtn.disabled = true;
                submitBtn.innerText = 'Menyimpan...';

                axios.post("{{ route('products.store') }}", new FormData(form))
                    .then(() => window.location.href = "{{ route('products.index') }}")
                    .catch(() => {
                        submitBtn.disabled = false;
                        submitBtn.innerText = 'Simpan';
                    });
            };
        });
    </script>
@endsection