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

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

                        <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" id="addConversionBtn" class="btn btn-outline-primary btn-sm mt-2">
                                + 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"
                                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" 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>

                        <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" id="addCombinationBtn" class="btn btn-outline-primary btn-sm mt-2">
                                + 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>

    {{-- TOAST --}}
    <div class="position-fixed top-0 end-0 p-3" style="z-index: 1080">
        <div id="successToast" class="toast align-items-center text-bg-success border-0" role="alert">
            <div class="d-flex">
                <div class="toast-body">
                    Product berhasil diperbarui
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>
    </div>

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

    <script>
        const singleProducts = @json($singleProducts);
        const existingConversions = @json($product->conversions ?? []);
        const existingCombinations = @json($product->combinations ?? []);

        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');

            let convIndex = 0;
            let comboIndex = 0;

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

            const toggleSection = () => {
                conversionContainer.style.display =
                    productType.value === 'single' ? 'block' : 'none';

                combinationContainer.style.display =
                    productType.value === 'combination' ? 'block' : 'none';
            };

            productType.onchange = toggleSection;
            toggleSection();

            existingConversions.forEach(c => addConversion(c));
            existingCombinations.forEach(c => addCombination(c));

            addConversionBtn.onclick = () => addConversion();
            addCombinationBtn.onclick = () => addCombination();

            function addConversion(data = null) {
                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}" ${data && data.target_unit === u ? 'selected' : ''}>
                            ${u.toUpperCase()}
                        </option>`
                ).join('')}
            </select>

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

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

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

            function addCombination(data = null) {
                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}"
                            ${data && data.product_id === p.id ? 'selected' : ''}>
                            ${p.name} (${p.sku_code})
                        </option>`
                ).join('')}
            </select>

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

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

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

            document.getElementById('productForm').onsubmit = e => {
                e.preventDefault();

                axios.post("{{ route('products.update', $product->id) }}",
                    new FormData(e.target)
                ).then(() => {
                    const toastEl = document.getElementById('successToast');
                    const toast = new bootstrap.Toast(toastEl);
                    toast.show();

                    setTimeout(() => {
                        window.location.href = "{{ route('products.index') }}";
                    }, 1200);
                });
            };
        });
    </script>
@endsection