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

                        {{-- Pilih Tipe Product di atas --}}
                        <div class="mb-3">
                            <label for="product_type" class="form-label">Tipe Product</label>
                            <select name="product_type" id="product_type" class="form-select form-select-sm" required>
                                <option value="">Pilih Tipe</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 for="sku_code" class="form-label">SKU Code</label>
                            <input type="text" name="sku_code" id="sku_code" class="form-control form-control-sm"
                                required value="{{ $product->sku_code }}">
                        </div>

                        <div class="mb-3">
                            <label for="name" class="form-label">Nama Product</label>
                            <input type="text" name="name" id="name" class="form-control form-control-sm"
                                required value="{{ $product->name }}">
                        </div>

                        <div class="mb-3">
                            <label for="category" class="form-label">Kategori</label>
                            <select name="category" id="category" class="form-select form-select-sm" required>
                                <option value="">Pilih Kategori</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 for="selling_price" class="form-label">Harga Jual</label>
                            <input type="number" name="selling_price" id="selling_price"
                                class="form-control form-control-sm" required value="{{ $product->selling_price }}">
                        </div>

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

                        <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="mt-3 d-flex gap-2">
                            <button type="submit" 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>
        document.addEventListener('DOMContentLoaded', function() {
            const hpp = document.getElementById('hpp');
            const fulfillment = document.getElementById('fulfillment_cost');
            const totalCost = document.getElementById('total_cost');

            function updateTotalCost() {
                const hppValue = parseInt(hpp.value) || 0;
                const fulfillmentValue = parseInt(fulfillment.value) || 0;
                totalCost.value = hppValue + fulfillmentValue;
            }

            hpp.addEventListener('input', updateTotalCost);
            fulfillment.addEventListener('input', updateTotalCost);

            const productType = document.getElementById('product_type');
            const combinationContainer = document.getElementById('combinationContainer');
            const combinationWrapper = document.getElementById('combinationWrapper');
            const addBtn = document.getElementById('addCombinationBtn');
            const form = document.getElementById('productForm');

            let index = 0;

            function showCombinationContainer() {
                if (productType.value === 'combination') {
                    combinationContainer.style.display = 'block';
                } else {
                    combinationContainer.style.display = 'none';
                    combinationWrapper.innerHTML = '';
                    index = 0;
                }
            }

            productType.addEventListener('change', showCombinationContainer);
            showCombinationContainer();

            const existingCombinations = @json($product->combinations);
            existingCombinations.forEach(combo => {
                const row = document.createElement('div');
                row.classList.add('d-flex', 'gap-2', 'mb-2');
                row.innerHTML = `
            <select name="combination_products[${index}][product_id]" class="form-select form-select-sm" required>
                <option value="">Pilih Product</option>
                @foreach ($singleProducts as $single)
                    <option value="{{ $single->id }}" ${combo.product_id == {{ $single->id }} ? 'selected' : ''}>
                        {{ $single->name }} ({{ $single->sku_code }})
                    </option>
                @endforeach
            </select>
            <input type="number" name="combination_products[${index}][total_deduction]" class="form-control form-control-sm" placeholder="Total Deduction" required value="${combo.total_deduction}">
            <button type="button" class="btn btn-danger btn-sm remove-btn">-</button>
        `;
                combinationWrapper.appendChild(row);
                row.querySelector('.remove-btn').addEventListener('click', () => combinationWrapper
                    .removeChild(row));
                index++;
            });

            addBtn.addEventListener('click', function() {
                const row = document.createElement('div');
                row.classList.add('d-flex', 'gap-2', 'mb-2');
                row.innerHTML = `
            <select name="combination_products[${index}][product_id]" class="form-select form-select-sm" required>
                <option value="">Pilih Product</option>
                @foreach ($singleProducts as $single)
                    <option value="{{ $single->id }}">{{ $single->name }} ({{ $single->sku_code }})</option>
                @endforeach
            </select>
            <input type="number" name="combination_products[${index}][total_deduction]" class="form-control form-control-sm" placeholder="Total Deduction" required>
            <button type="button" class="btn btn-danger btn-sm remove-btn">-</button>
        `;
                combinationWrapper.appendChild(row);
                row.querySelector('.remove-btn').addEventListener('click', () => combinationWrapper
                    .removeChild(row));
                index++;
            });

            form.addEventListener('submit', function(e) {
                e.preventDefault();
                const formData = new FormData(form);
                formData.append('_method', 'PUT');

                axios.post("{{ route('products.update', $product->id) }}", formData, {
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                }).then(res => {
                    alert('Product berhasil diperbarui!');
                    window.location.href = "{{ route('products.index') }}";
                }).catch(err => {
                    if (err.response && err.response.data.errors) {
                        let messages = '';
                        Object.values(err.response.data.errors).forEach(v => messages += v.join(
                            '\n') + '\n');
                        alert(messages);
                    } else {
                        alert('Terjadi kesalahan.');
                    }
                });
            });
        });
    </script>
@endsection