@extends('layouts.layoutMaster')

@section('title', 'Buat Transfer Stok Baru')

@section('vendor-style')
@vite([
  'resources/assets/vendor/libs/select2/select2.scss',
  'resources/assets/vendor/libs/flatpickr/flatpickr.scss',
  'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss'
])
@endsection

@section('vendor-script')
@vite([
  'resources/assets/vendor/libs/select2/select2.js',
  'resources/assets/vendor/libs/flatpickr/flatpickr.js',
  'resources/assets/vendor/libs/sweetalert2/sweetalert2.js'
])
@endsection

@section('content')
<div class="card mb-4">
    <div class="card-header">
        <h5 class="mb-0">Buat Transfer Stok Baru</h5>
    </div>
    <div class="card-body">
        <form id="stockTransferForm">
            @csrf
            <div class="row mb-4">
                <div class="col-md-4">
                    <label for="transfer_date" class="form-label">Tanggal Transfer</label>
                    <input type="date" class="form-control flatpickr-date" id="transfer_date" name="transfer_date" required value="{{ date('Y-m-d') }}">
                </div>
                <div class="col-md-4">
                    <label for="from_warehouse_id" class="form-label">Gudang Asal</label>
                    <select class="form-select select2" id="from_warehouse_id" name="from_warehouse_id" required>
                        <option value="">Pilih Gudang Asal</option>
                        @foreach($warehouses as $warehouse)
                            <option value="{{ $warehouse->id }}">{{ $warehouse->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label for="to_warehouse_id" class="form-label">Gudang Tujuan</label>
                    <select class="form-select select2" id="to_warehouse_id" name="to_warehouse_id" required>
                        <option value="">Pilih Gudang Tujuan</option>
                        @foreach($warehouses as $warehouse)
                            <option value="{{ $warehouse->id }}">{{ $warehouse->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="card border mb-3">
                <div class="card-header bg-light">
                    <h6 class="mb-0">Pilih Bahan yang Akan Ditransfer</h6>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <label for="ingredient_search" class="form-label">Cari Bahan</label>
                            <select id="ingredient_search" class="form-select" style="width: 100%"></select>
                            <small class="text-muted">Pilih gudang asal untuk mulai mencari bahan yang tersedia</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card border mb-4">
                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">Daftar Bahan yang Akan Ditransfer</h6>
                    <span class="badge bg-primary" id="totalItemsCount">0 Item</span>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-bordered mb-0" id="transferItems">
                            <thead class="table-light">
                  <tr>
                      <th>Bahan</th>
                                    <th>Batch</th>
                                    <th>Stok Tersedia</th>
                                    <th>Jumlah Transfer</th>
                      <th>Aksi</th>
                  </tr>
              </thead>
                            <tbody id="transferItemsList">
                                <tr id="noItemsRow">
                                    <td colspan="5" class="text-center py-3">Belum ada bahan yang dipilih</td>
                                </tr>
              </tbody>
          </table>
                    </div>
                </div>
            </div>

            <!-- Cost Allocation Preview -->
            <div class="card border mb-4">
                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                    <h6 class="mb-0"><i class="ri-calculator-line me-1"></i> Preview Alokasi Biaya</h6>
                    <span class="badge bg-info">Simulasi</span>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Akun</th>
                                    <th class="text-end">Debit</th>
                                    <th class="text-end">Kredit</th>
                                </tr>
                            </thead>
                            <tbody id="costPreviewContainer">
                                <tr>
                                    <td colspan="3" class="text-center py-3 text-muted">
                                        <i class="ri-information-line me-1"></i>
                                        Tambahkan bahan untuk melihat preview alokasi biaya
                                    </td>
                                </tr>
                            </tbody>
                            <tfoot class="table-light" id="costPreviewFooter" style="display: none;">
                                <tr>
                                    <th>Total</th>
                                    <th class="text-end" id="totalDebit">0</th>
                                    <th class="text-end" id="totalCredit">0</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
                <div class="card-footer bg-light">
                    <small class="text-muted">
                        <i class="ri-information-line me-1"></i> Preview ini menunjukkan dampak akuntansi dari transfer stok
                    </small>
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-12">
                    <label for="status" class="form-label">Status Transfer</label>
                    <select class="form-select" id="status" name="status" required>
                        @foreach($statuses as $status)
                            <option value="{{ $status }}">{{ $status }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-12">
                    <label for="notes" class="form-label">Catatan</label>
                    <textarea class="form-control" id="notes" name="notes" rows="3"></textarea>
                </div>
            </div>

            <div class="d-flex justify-content-between mt-4">
                <a href="{{ route('stock.transfer') }}" class="btn btn-secondary">
                    <i class="ri-arrow-left-line me-1"></i> Kembali
                </a>
                <button type="button" id="submitTransfer" class="btn btn-primary">
                    <i class="ri-save-line me-1"></i> Simpan Transfer
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('page-script')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const fromWarehouseSelect = $('#from_warehouse_id');
    const toWarehouseSelect = $('#to_warehouse_id');
    const ingredientSearchSelect = $('#ingredient_search');
    const transferItemsList = document.getElementById('transferItemsList');
    const noItemsRow = document.getElementById('noItemsRow');
    const submitButton = document.getElementById('submitTransfer');
    const costPreviewContainer = document.getElementById('costPreviewContainer');
    const costPreviewFooter = document.getElementById('costPreviewFooter');
    const totalDebit = document.getElementById('totalDebit');
    const totalCredit = document.getElementById('totalCredit');
    const totalItemsCount = document.getElementById('totalItemsCount');

    // Initialize Select2
    $('.select2').select2();

    // Initialize Flatpickr
    $('.flatpickr-date').flatpickr({
        dateFormat: 'Y-m-d'
    });

    // Initialize ingredient search
    ingredientSearchSelect.select2({
        placeholder: 'Cari bahan untuk ditransfer',
        minimumInputLength: 2,
        ajax: {
            url: '/api/search-stock',
            dataType: 'json',
            delay: 250,
            data: function(params) {
                const fromWarehouseId = fromWarehouseSelect.val();

                if (!fromWarehouseId) {
                    alert('Silakan pilih gudang asal terlebih dahulu');
                    return false;
                }

                return {
                    query: params.term,
                    from_warehouse_id: fromWarehouseId
                };
            },
            processResults: function(data) {
                return {
                    results: data.map(item => ({
                        id: item.ingredient.id,
                        text: item.ingredient.name,
                        totalQuantity: item.total_quantity,
                        batches: item.batches || []
                    }))
                };
            },
            cache: true
        },
        templateResult: formatIngredientResult
    });

    function formatIngredientResult(ingredient) {
        if (!ingredient.id) return ingredient.text;

        return $(`
            <div>
                <div><strong>${ingredient.text}</strong></div>
                <div>Total stok: ${ingredient.totalQuantity || 0}</div>
            </div>
        `);
    }

    // Update toWarehouseSelect options based on fromWarehouseSelect
    fromWarehouseSelect.on('change', function() {
        const selectedWarehouseId = $(this).val();

        toWarehouseSelect.find('option').prop('disabled', false);
        toWarehouseSelect.find(`option[value="${selectedWarehouseId}"]`).prop('disabled', true);

        // Reset the ingredient search
        ingredientSearchSelect.val(null).trigger('change');

        // Clear the items list
        clearTransferItems();
    });

    // Add ingredient to transfer list
    ingredientSearchSelect.on('select2:select', function(e) {
        const selectedIngredient = e.params.data;
        
        // Check if ingredient has batches
        if (!selectedIngredient.batches || selectedIngredient.batches.length === 0) {
            Swal.fire({
                icon: 'warning',
                title: 'Tidak Ada Batch',
                text: 'Tidak ada batch dengan stok tersedia untuk bahan ini'
            });
            return;
        }
        
        // If there's only one batch, use it directly
        if (selectedIngredient.batches.length === 1) {
            const batch = selectedIngredient.batches[0];
            addIngredientToTransfer({
                id: selectedIngredient.id,
                name: selectedIngredient.text.split(' (Total')[0], // Remove the total stock info
                batchId: batch.id,
                batchText: batch.text,
                availableStock: batch.remaining_stock,
                unitPrice: batch.unit_price,
                expiryDate: batch.expiry_date
            });
        } else {
            // If there are multiple batches, show a selection dialog
            let batchOptions = '';
            selectedIngredient.batches.forEach(batch => {
                batchOptions += `<option value="${batch.id}" 
                                    data-stock="${batch.remaining_stock}" 
                                    data-price="${batch.unit_price}"
                                    data-expiry="${batch.expiry_date || ''}">${batch.text}</option>`;
            });
            
            Swal.fire({
                title: 'Pilih Batch',
                html: `
                    <p>Pilih batch untuk transfer:</p>
                    <select id="batch-select" class="form-select mb-3">
                        ${batchOptions}
                    </select>
                    <p class="mb-2">Jumlah Transfer:</p>
                    <input type="number" id="transfer-quantity" class="form-control" min="0.01" step="0.01" value="1">
                `,
                showCancelButton: true,
                confirmButtonText: 'Tambahkan',
                cancelButtonText: 'Batal',
                preConfirm: () => {
                    const batchSelect = document.getElementById('batch-select');
                    const quantity = document.getElementById('transfer-quantity').value;
                    const selectedOption = batchSelect.options[batchSelect.selectedIndex];
                    const maxStock = parseFloat(selectedOption.dataset.stock);
                    
                    if (parseFloat(quantity) <= 0) {
                        Swal.showValidationMessage('Jumlah harus lebih dari 0');
                        return false;
                    }
                    
                    if (parseFloat(quantity) > maxStock) {
                        Swal.showValidationMessage(`Jumlah tidak boleh melebihi stok tersedia (${maxStock})`);
                        return false;
                    }
                    
                    return {
                        batchId: batchSelect.value,
                        batchText: selectedOption.text,
                        quantity: quantity,
                        maxStock: maxStock,
                        unitPrice: selectedOption.dataset.price,
                        expiryDate: selectedOption.dataset.expiry
                    };
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    addIngredientToTransfer({
                        id: selectedIngredient.id,
                        name: selectedIngredient.text.split(' (Total')[0], // Remove the total stock info
                        batchId: result.value.batchId,
                        batchText: result.value.batchText,
                        availableStock: result.value.maxStock,
                        quantity: result.value.quantity,
                        unitPrice: result.value.unitPrice,
                        expiryDate: result.value.expiryDate
                    });
                }
            });
        }

        // Reset the select
        ingredientSearchSelect.val(null).trigger('change');
    });

    function addIngredientToTransfer(ingredient) {
        // Hide the "No items" row
        noItemsRow.style.display = 'none';

        // Create a new row
        const row = document.createElement('tr');
        row.dataset.ingredientId = ingredient.id;
        row.dataset.batchId = ingredient.batchId;
        row.dataset.unitPrice = ingredient.unitPrice;
        
        // Format expiry date if available
        let expiryInfo = '';
        if (ingredient.expiryDate) {
            expiryInfo = `<small class="text-muted d-block">Kadaluarsa: ${ingredient.expiryDate}</small>`;
        }
        
        // Set default quantity or use provided quantity
        const quantity = ingredient.quantity || 1;

        row.innerHTML = `
            <td>
                <strong>${ingredient.name}</strong>
                <small class="text-muted d-block">Unit Price: Rp ${new Intl.NumberFormat('id-ID').format(ingredient.unitPrice)}</small>
            </td>
            <td>
                ${ingredient.batchText || ('Batch #' + ingredient.batchId)}
                ${expiryInfo}
            </td>
            <td>${ingredient.availableStock}</td>
            <td>
                <input type="number" class="form-control form-control-sm quantity-input"
                       name="ingredients[${ingredient.id}][quantity]"
                       min="0.01" step="0.01" max="${ingredient.availableStock}" value="${quantity}" required>
                <input type="hidden" name="ingredients[${ingredient.id}][ingredient_id]" value="${ingredient.id}">
                <input type="hidden" name="ingredients[${ingredient.id}][batch_id]" value="${ingredient.batchId}">
            </td>
            <td>
                <button type="button" class="btn btn-sm btn-danger remove-item">
                    <i class="ri-delete-bin-line"></i>
                </button>
            </td>
        `;

        // Add event listeners
        row.querySelector('.remove-item').addEventListener('click', function() {
            row.remove();

            // Show the "No items" row if no items are left
            if (transferItemsList.querySelectorAll('tr:not(#noItemsRow)').length === 0) {
                noItemsRow.style.display = '';
            }

            updateTotalItems();
            updateCostPreview();
        });

        row.querySelector('.quantity-input').addEventListener('input', function() {
            updateCostPreview();
        });

        // Add to the list
        transferItemsList.appendChild(row);
        updateTotalItems();
        updateCostPreview();
    }

    function clearTransferItems() {
        // Remove all items except the "No items" row
        const rows = transferItemsList.querySelectorAll('tr:not(#noItemsRow)');
        rows.forEach(row => row.remove());

        // Show the "No items" row
        noItemsRow.style.display = '';

        updateTotalItems();
        updateCostPreview();
    }

    function updateTotalItems() {
        const count = transferItemsList.querySelectorAll('tr:not(#noItemsRow)').length;
        totalItemsCount.textContent = `${count} Item`;
    }

    function updateCostPreview() {
        const items = transferItemsList.querySelectorAll('tr:not(#noItemsRow)');

        if (items.length === 0) {
            // No items, show placeholder
            costPreviewContainer.innerHTML = `
                <tr>
                    <td colspan="3" class="text-center py-3 text-muted">
                        <i class="ri-information-line me-1"></i>
                        Tambahkan bahan untuk melihat preview alokasi biaya
                    </td>
                </tr>
            `;
            costPreviewFooter.style.display = 'none';
            return;
        }

        // Calculate costs
        let totalCost = 0;
        const fromWarehouseName = fromWarehouseSelect.find('option:selected').text();
        const toWarehouseName = toWarehouseSelect.find('option:selected').text();

        items.forEach(item => {
            const unitPrice = parseFloat(item.dataset.unitPrice) || 0;
            const quantity = parseFloat(item.querySelector('.quantity-input').value) || 0;
            totalCost += unitPrice * quantity;
        });

        // Format currency
        const formattedCost = new Intl.NumberFormat('id-ID', {
            style: 'decimal',
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        }).format(totalCost);

        // Update the preview
        costPreviewContainer.innerHTML = `
            <tr>
                <td>Inventory - ${fromWarehouseName}</td>
                <td class="text-end">-</td>
                <td class="text-end">${formattedCost}</td>
            </tr>
            <tr>
                <td>Inventory - ${toWarehouseName}</td>
                <td class="text-end">${formattedCost}</td>
                <td class="text-end">-</td>
            </tr>
        `;

        // Update totals
        totalDebit.textContent = formattedCost;
        totalCredit.textContent = formattedCost;
        costPreviewFooter.style.display = '';
    }

    // Handle form submission
    submitButton.addEventListener('click', function() {
        const fromWarehouseId = fromWarehouseSelect.val();
        const toWarehouseId = toWarehouseSelect.val();
        const transferDate = document.getElementById('transfer_date').value;
        const status = document.getElementById('status').value;
        const notes = document.getElementById('notes').value;

        // Validate inputs
        if (!fromWarehouseId) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Silakan pilih gudang asal'
            });
            return;
        }

        if (!toWarehouseId) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Silakan pilih gudang tujuan'
            });
            return;
        }

        if (fromWarehouseId === toWarehouseId) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Gudang asal dan tujuan tidak boleh sama'
            });
            return;
        }

        if (!transferDate) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Silakan isi tanggal transfer'
            });
            return;
        }

        // Get items
        const items = [];
        const rows = transferItemsList.querySelectorAll('tr:not(#noItemsRow)');

        if (rows.length === 0) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Silakan tambahkan minimal satu bahan untuk ditransfer'
            });
            return;
        }

        // Process each row to collect ingredient data
        for (const row of rows) {
            const ingredientId = row.dataset.ingredientId;
            const batchId = row.dataset.batchId;
            const quantity = parseFloat(row.querySelector('.quantity-input').value) || 0;

            if (quantity <= 0) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Jumlah transfer harus lebih dari 0'
                });
                return;
            }

            items.push({
                ingredient_id: ingredientId,
                batch_id: batchId,
                quantity: quantity
            });
        }

        // Prepare payload
        const payload = {
            transfer_date: transferDate,
            status: status,
            from_warehouse_id: fromWarehouseId,
            to_warehouse_id: toWarehouseId,
            notes: notes,
            ingredients: items
        };

        // Submit the form via AJAX
        fetch('/stock/transfer', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'X-Requested-With': 'XMLHttpRequest'
            },
            credentials: 'include',
            body: JSON.stringify(payload)
        })
        .then(response => {
            if (!response.ok) {
                if (response.status === 401) {
                    // Unauthorized - likely session expired
                    Swal.fire({
                        icon: 'warning',
                        title: 'Sesi Berakhir',
                        text: 'Sesi anda telah berakhir. Silakan login kembali.',
                        confirmButtonText: 'Login'
                    }).then(() => {
                        window.location.href = '/login';
                    });
                    return Promise.reject('Unauthorized');
                }
                return response.text().then(text => {
                    try {
                        // Try to parse as JSON first
                        return JSON.parse(text);
                    } catch (e) {
                        // If not JSON, return error with text preview
                        throw new Error(`Error: ${response.status}. Response: ${text.substring(0, 100)}...`);
                    }
                });
            }
            return response.json();
        })
        .then(data => {
            if (data.error) {
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal',
                    text: data.error
                });
                return;
            }

            // Success - show success message and redirect
            Swal.fire({
                icon: 'success',
                title: 'Berhasil',
                text: data.message || 'Transfer stok berhasil disimpan',
                showConfirmButton: false,
                timer: 1500
            }).then(() => {
                window.location.href = "{{ route('stock.transfer') }}";
            });
        })
        .catch(error => {
            console.error('Error:', error);
            Swal.fire({
                icon: 'error',
                title: 'Terjadi Kesalahan',
                text: (error.message || error)
            });
        });
    });
});
</script>
@endsection