@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 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">Single</option>
                                <option value="combination">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>
                        </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>
                        </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">Box</option>
                                <option value="sachet">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>
                        </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>
                            </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>
                            </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>
                            </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>
                            </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" 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="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmModalLabel">Konfirmasi</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Apakah Anda yakin ingin menambahkan produk ini?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
                    <button type="button" id="confirmSubmit" class="btn btn-primary btn-sm">Ya, Tambahkan</button>
                </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', function() {
            const hpp = document.getElementById('hpp');
            const fulfillment = document.getElementById('fulfillment_cost');
            const totalCost = document.getElementById('total_cost');
            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');
            const submitBtn = document.getElementById('submitBtn');
            const confirmModal = new bootstrap.Modal(document.getElementById('confirmModal'));
            const confirmSubmit = document.getElementById('confirmSubmit');
            const toastContainer = document.getElementById('toastContainer');
            let index = 0;

            function showToast(message, type = 'success') {
                const toast = document.createElement('div');
                toast.className = `toast align-items-center text-bg-${type} border-0 show`;
                toast.role = 'alert';
                toast.innerHTML = `
            <div class="d-flex">
                <div class="toast-body">${message}</div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>`;
                toastContainer.appendChild(toast);
                setTimeout(() => toast.remove(), 4000);
            }

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

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

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

            productType.addEventListener('change', toggleCombination);

            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();
                confirmModal.show();
            });

            confirmSubmit.addEventListener('click', function() {
                confirmModal.hide();
                const formData = new FormData(form);
                submitBtn.disabled = true;
                submitBtn.innerHTML =
                    '<span class="spinner-border spinner-border-sm me-2"></span>Menyimpan...';

                axios.post("{{ route('products.store') }}", formData, {
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                }).then(res => {
                    showToast('Produk berhasil ditambahkan!', 'success');
                    setTimeout(() => window.location.href = "{{ route('products.index') }}", 1500);
                }).catch(err => {
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = 'Simpan';
                    if (err.response && err.response.data.errors) {
                        let messages = '';
                        Object.values(err.response.data.errors).forEach(v => messages += v.join(
                            '<br>'));
                        showToast(messages, 'danger');
                    } else {
                        showToast('Terjadi kesalahan saat menyimpan data.', 'danger');
                    }
                });
            });
        });
    </script>
@endsection