@extends('template.desktop.app')

@section('title', 'Edit 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">Edit Product</h4>
                </div>

                <div class="card-body p-4">
                    <form id="productForm">
                        @csrf
                        @method('PUT')

                        <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" {{ $product->product_type === 'single' ? 'selected' : '' }}>
                                    Single
                                </option>
                                <option value="combination"
                                    {{ $product->product_type === 'combination' ? 'selected' : '' }}>
                                    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"
                                value="{{ $product->sku_code }}" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Nama Product</label>
                            <input type="text" name="name" class="form-control form-control-sm"
                                value="{{ $product->name }}" 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" {{ $product->category === 'box' ? 'selected' : '' }}>Box</option>
                                <option value="sachet" {{ $product->category === 'sachet' ? 'selected' : '' }}>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="{{ $product->bonus ?? 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"
                                value="{{ $product->selling_price }}" 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"
                                    value="{{ $product->hpp }}" 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" value="{{ $product->fulfillment_cost }}" 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"
                                    value="{{ $product->total_cost }}" 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"
                                    value="{{ $product->total_deduction }}" 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;

            const toggleSection = () => {
                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';
            };

            productType.onchange = toggleSection;
            toggleSection();

            const existingConversions = @json($product->conversions ?? []);
            existingConversions.forEach(conv => {
                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 === conv.target_unit ? 'selected' : ''}>
                            ${u.toUpperCase()}
                        </option>`
                ).join('')}
            </select>
            <input type="number"
                   name="conversions[${convIndex}][base_quantity]"
                   class="form-control form-control-sm"
                   value="${conv.base_quantity}"
                   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++;
            });

            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.update', $product->id) }}", new FormData(form))
                    .then(() => {
                        toast('Produk berhasil diperbarui');
                        setTimeout(() => location.href = "{{ route('products.index') }}", 1200);
                    })
                    .catch(() => {
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = 'Simpan';
                        toast('Gagal menyimpan data', 'danger');
                    });
            };
        });
    </script>
@endsection