@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>

                        {{-- BONUS (SINGLE ONLY) --}}
                        <div class="mb-3" id="bonusContainer" style="display:none">
                            <label class="form-label">Bonus</label>
                            <input type="number"
                                   name="bonus"
                                   class="form-control form-control-sm"
                                   value="0"
                                   min="0">
                            <small class="text-muted">
                                Berapa jumlah bonus yang didapat CS
                            </small>
                        </div>

                        {{-- PRODUCT CONVERSION (SINGLE ONLY) --}}
                        <div class="mb-3" id="conversionContainer" style="display:none">
                            <label class="form-label">Product Conversion</label>
                            <div id="conversionWrapper"></div>
                            <button type="button" id="addConversionBtn"
                                    class="btn btn-outline-primary btn-sm mt-2">
                                + Tambah Conversion
                            </button>
                            <small class="text-muted d-block mt-1">
                                Target unit tidak boleh sama
                            </small>
                        </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"
                                       name="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"></div>
                            <button type="button"
                                    class="btn btn-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>

    <div class="position-fixed bottom-0 end-0 p-3" style="z-index:1055">
        <div id="toastContainer"></div>
    </div>

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

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const productType = document.getElementById('product_type');
            const bonusContainer = document.getElementById('bonusContainer');
            const conversionContainer = document.getElementById('conversionContainer');
            const combinationContainer = document.getElementById('combinationContainer');
            const conversionWrapper = document.getElementById('conversionWrapper');
            const addConversionBtn = document.getElementById('addConversionBtn');

            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');
            const toastContainer = document.getElementById('toastContainer');

            let convIndex = 0;

            const units = [
                'pcs','sachet','strip','tablet','capsule','pack',
                'inner','box','outer','dus','carton','bundle','set','unit'
            ];

            const toast = (msg, type = 'success') => {
                const t = document.createElement('div');
                t.className = `toast show text-bg-${type}`;
                t.innerHTML = `<div class="toast-body">${msg}</div>`;
                toastContainer.appendChild(t);
                setTimeout(() => t.remove(), 3500);
            };

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

            hpp.oninput = fulfillment.oninput = calcCost;

            productType.onchange = () => {
                const isSingle = productType.value === 'single';
                bonusContainer.style.display = isSingle ? 'block' : 'none';
                conversionContainer.style.display = isSingle ? 'block' : 'none';
                combinationContainer.style.display = productType.value === 'combination' ? 'block' : 'none';

                conversionWrapper.innerHTML = '';
                convIndex = 0;
            };

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

                row.innerHTML = `
                    <select name="conversions[${convIndex}][target_unit]"
                            class="form-select form-select-sm target-unit" 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();
                row.querySelector('.target-unit').onchange = validateUnits;

                conversionWrapper.appendChild(row);
                convIndex++;
            };

            function validateUnits() {
                const used = [];
                document.querySelectorAll('.target-unit').forEach(el => {
                    if (!el.value) return;
                    if (used.includes(el.value)) {
                        toast('Target unit tidak boleh sama', 'danger');
                        el.value = '';
                    } else {
                        used.push(el.value);
                    }
                });
            }

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

                axios.post("{{ route('products.store') }}", new FormData(form))
                    .then(() => {
                        toast('Produk berhasil ditambahkan');
                        setTimeout(() => location.href = "{{ route('products.index') }}", 1200);
                    })
                    .catch(() => {
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = 'Simpan';
                        toast('Gagal menyimpan data', 'danger');
                    });
            };
        });
    </script>
@endsection