@extends('layouts.master')

@section('title', 'Lihat Shopee Retur')



@section('content')
<div class="row">
    <x-page-title title="{{__('Shopee Retur')}}" pagetitle="Lihat {{__('Shopee Retur')}}" />
    <hr>
    <div class="container content">
        <h2>Lihat {{__('Shopee Retur')}}</h2>
        <div id="message-container">
            @if(session('success'))
                <div id="success-message" class="alert alert-success fade show">{{ session('success') }}</div>
            @endif
            @if($errors->any())
                <div id="error-message" class="alert alert-danger fade show">
                    <ul>
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>

        <form id="contract-form" action="{{route('shopee.return.store')}}" method="POST"
            >
            @csrf
            <div class="mb-3 card">
                <div class="card-header">{{__('Shopee Retur')}} {{__('Information')}}</div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="search">Cari Retur</label>
                                <input type="text" id="search" class="form-control" placeholder="Search by Resi / SN Retur">
                                <div id="search-results" class="list-group" style="display:none; position:relative; z-index:1000; width:100%; max-height:200px; overflow:scroll;">

                                </div>
                            </div>
                            <br>
                            <div class="form-group">
                                <label for="return_sn">{{__('Return SN')}}</label>
                                <input type="text" id="return_sn" class="form-control" name="return_sn" value="" readonly>
                            </div>
                            <br>
                            <div class="form-group">
                                <label for="order_sn">{{__('Order SN')}}</label>
                                <input type="text" id="order_sn" class="form-control" name="order_sn" value="" readonly>
                            </div>
                            <br>
                            <div class="form-group">
                                <label for="order_sn">No Resi</label>
                                <input type="text" id="tracking_number" class="form-control" name="tracking_number" value="" readonly>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="create_time">Tanggal Retur</label>
                                <input type="hidden" id="create_time" class="form-control" name="create_time" value="" readonly>
                                <input type="text" id="tanggal" class="form-control" value="" readonly>
                            </div>
                            <div class="form-group">
                                <label for="buyer_username">{{__('Buyer Username')}}</label>
                                <input type="text" id="buyer_username" class="form-control" name="buyer_username" value="" readonly>
                            </div>
                            <br>
                            <div class="form-group">
                                <label for="reason">Alasan</label>
                                <input type="text" id="reason" class="form-control" name="reason" value="" readonly>
                            </div>
                            <br>
                            <div class="form-group">
                                <label for="reason_detail">Detail Alasan</label>
                                <textarea class="form-control" name="reason_detail" id="reason_detail" cols="30" rows="5" readonly>

                                </textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card for Shopee Retur Details -->
            <div class="mb-3 card">
                <div class="card-header">Shopee Retur Details</div>
                <div class="card-body table-responsive">
                    <h5 class="text-end">Total sebelum pajak: <span id="total-value">0</span></h5>
                    <input type="hidden" name="total" id="total" value="0">
                    <div style="overflow-x: auto;">
                    <table class="table" id="sales-order-details-table">
                        <thead>
                            <tr>
                                <th style="min-width: 430px">{{__('Item')}}</th>
                                <th>Stok</th>
                                <th style="min-width: 230px">Variasi</th>
                                <th style="min-width: 150px">Qty</th>
                                <th style="min-width: 200px">{{__('Price')}}</th>
                                <th style="min-width: 200px">{{__('Discount')}}</th>
                                <th style="min-width: 200px">{{__('Price')}} Setelah Diskon</th>
                                <th style="min-width: 200px">Nominal</th>
                                <th style="min-width: 100px">Aksi</th>
                            </tr>
                        </thead>
                        <tbody id="detailTbody">

                        </tbody>
                    </table>
                    </div>
                </div>
            </div>

            <div class="form-group submit-btn mb-3">
                <button type="submit" class="btn btn-success" >Submit Retur Shopee</button>
            </div>
        </form>

    </div>
</div>

</div>

@section('scripts')
<script>
    let datas = @json($shopeeReturnRaw);

    document.getElementById('search').addEventListener('keydown', function (e) {
        // If user presses Enter
        if (e.key === 'Enter') {
            e.preventDefault(); // Prevent form submission

            let query = this.value.trim().toLowerCase();
            if (query.length > 0) {
                let resultsContainer = document.getElementById('search-results');
                resultsContainer.style.display = 'none'; // Hide dropdown list

                // Clear the search input field
                this.value = '';

                // Check if the entered order_sn (or resi/return_sn) exists in the local data array
                let localMatch = datas.find(raw =>
                    (raw.order_sn || "").toLowerCase() === query ||
                    (raw.return_sn || "").toLowerCase() === query ||
                    (raw.tracking_number || "").toLowerCase() === query ||
                    (raw.tracking_number2 || "").toLowerCase() === query
                );

                if (localMatch) {
                    // If match exists, pull all properties from the local data object
                    fetchData(
                        localMatch.order_sn,
                        localMatch.return_sn,
                        localMatch.create_time,
                        localMatch.reason ?? '-',
                        localMatch.text_reason ?? '-',
                        localMatch.tracking_number
                    );
                } else {
                    // If it doesn't exist, treat it as a fresh manual input (API handles create_time)
                    // We use the raw untransformed query as the fallback order_sn
                    let originalQuery = query.toUpperCase(); // Shopee SNs are typically uppercase
                    const timestampMs = Date.now();
                    fetchData(originalQuery, '-', timestampMs, '-', '-', '-');
                }
            }
        }
    });

    document.getElementById('search').addEventListener('input', function () {
        // Ensure activeIndexCust is declared globally or outside this scope if needed
        window.activeIndexCust = -1;

        let query = this.value.toLowerCase();
        let resultsContainer = document.getElementById('search-results');
        resultsContainer.innerHTML = '';
        resultsContainer.style.display = 'none';

        if (query.length > 0) {
            let filteredData = datas.filter(raw =>
                // Added fallback to empty string to prevent errors if a field is null
                (raw.return_sn || "").toLowerCase().includes(query) ||
                (raw.order_sn || "").toLowerCase().includes(query) ||
                (raw.tracking_number || "").toLowerCase().includes(query)||
                (raw.tracking_number2 || "").toLowerCase().includes(query)
            );

            if (filteredData.length > 0) {
                resultsContainer.style.display = 'block';
                filteredData.forEach((data, index) => {
                    // Format the timestamp for display
                    const dateObj = new Date(data.create_time * 1000); // assuming seconds
                    const formattedDate = new Intl.DateTimeFormat('en-GB', {
                        day: 'numeric', month: 'short', year: 'numeric'
                    }).format(dateObj);

                    let listItem = document.createElement('a');
                    listItem.className = 'list-group-item list-group-item-action';
                    listItem.href = '#';
                    listItem.dataset.index = index;
                    listItem.innerHTML = `
                        <strong>${data.return_sn}</strong> - ${data.tracking_number} - ${data.tracking_number2} <br>
                        <small>${data.order_sn} | ${formattedDate}</small>`;

                    listItem.addEventListener('click', function (e) {
                        e.preventDefault();
                        resultsContainer.style.display = 'none'; // Close list after selection
                        document.getElementById('search').value = '';
                        fetchData(data.order_sn, data.return_sn, data.create_time* 1000,data.reason??'-',data.text_reason??'-',data.tracking_number);
                    });
                    resultsContainer.appendChild(listItem);
                });
            }
        }
    });

    async function fetchData(order_sn, return_sn, create_time,reason,reason_detail,tracking_number) {
        // Use a placeholder for the ID and replace it in JS
        let url = "{{ route('shopee.return.fetch', ':id') }}";
        url = url.replace(':id', order_sn);
        $.ajax({
            url: url,
            method: 'GET',
            data: {
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                const tbody = document.querySelector('#detailTbody');
                tbody.innerHTML = '';
                if (response && Object.keys(response).length === 0 && response.constructor === Object) {
                    // Show SweetAlert warning
                    Swal.fire({
                        title: "Peringatan",
                        text: "Data tidak ditemukan",
                        icon: "warning",
                        button: "OK",
                    });
                    return; // Stop further execution
                }
                if (response.items_list.length > 0) {
                    response.items_list.forEach((detail, index) => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                            <td>
                                <input type="hidden" id="item_id_${index}" name="details[${index}][item_id]" class="form-control" value="${ detail.item_id }" readonly />
                                <input type="hidden" id="shopee_item_id_${index}" name="details[${index}][shopee_item_id]" class="form-control" value="${ detail.shopee_item_id }" readonly />
                                <input type="text" name="details[${index}][shopee_item_name]" class="form-control" value="${ detail.shopee_item_name }" readonly />
                            </td>
                            <td>
                                <div class="form-check form-switch text-center">
                                    <input class="form-check-input status-checkbox" type="checkbox" id="status_${index}" checked />
                                    <input type="hidden" name="details[${index}][inventory_detail]" id="status_hidden_${index}" value="true" />
                                </div>
                            </td>
                            <td>
                                <input type="hidden" name="details[${index}][model_id]" id="model_id_${index}" class="form-control" value="${ detail.model_id }" readonly>
                                <input type="text" name="details[${index}][model_name]" id="model_name_${index}" class="form-control" value="${ detail.model_name }" readonly>
                            </td>
                            <td>
                                <input type="number" name="details[${index}][qty]" id="qty_${index}" class="form-control qty-input" data-index="${index}" value="${ detail.qty }" min="1" required>
                            </td>
                            <td>
                                <input type="text" name="details[${index}][price]" id="price_${index}" class="form-control price-input text-end" value="${ detail.price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }" readonly>
                            </td>
                            <td>
                                <input type="text" name="details[${index}][disc_nominal]" id="disc_nominal_${index}" class="form-control text-end" value="${ detail.disc_nominal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }" readonly>
                            </td>
                            <td>
                                <input type="text" name="details[${index}][price_after_disc]" id="price_after_disc_${index}" class="form-control price-after-disc-input text-end" value="${ detail.price_after_disc.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }" readonly>
                            </td>
                            <td>
                                <input type="text" name="details[${index}][nominal]" id="nominal_${index}" class="form-control text-end nominal" value="${ detail.nominal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }" readonly>
                            </td>
                            <td class="text-center">
                                <button type="button" class="btn btn-sm btn-primary split-btn" data-index="${index}" title="Split Row">
                                    <i class="material-icons-outlined" style="font-size:16px;">call_split</i>
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-danger remove-row-btn" title="Hapus Row">
                                    <i class="material-icons-outlined" style="font-size:16px;">delete</i>
                                </button>
                            </td>
                        `;
                        tbody.appendChild(row);
                    });
                }
                document.getElementById('buyer_username').value = response.buyer_username;
                document.getElementById('return_sn').value = return_sn;
                document.getElementById('order_sn').value = order_sn;
                let finalCreateTime = create_time;
                if (create_time === '-' && response.create_time) {
                    finalCreateTime = response.create_time;
                }
                document.getElementById('create_time').value = finalCreateTime;
                const date = new Date(finalCreateTime);
                const formattedDate = new Intl.DateTimeFormat('en-GB', {
                day: 'numeric',
                month: 'short',
                year: 'numeric'
                }).format(date);

                document.getElementById('tanggal').value = formattedDate;
                document.getElementById('buyer_username').value = response.buyer_username;
                document.getElementById('tracking_number').value = tracking_number;
                document.getElementById('reason').value = reason;
                document.getElementById('reason_detail').value = reason_detail;
                calculateTotals();

                document.addEventListener('change', function (e) {
                    // Check if the clicked element is one of our status checkboxes
                    if (e.target && e.target.classList.contains('status-checkbox')) {

                        // Extract the index from the ID (e.g., "status_0" -> "0")
                        const index = e.target.id.split('_')[1];

                        // Find the corresponding hidden input
                        const hiddenInput = document.getElementById(`status_hidden_${index}`);

                        if (hiddenInput) {
                            // Set value to "true" if checked, "false" if not
                            hiddenInput.value = e.target.checked ? "true" : "false";
                        }

                        // Optional: Log to console for testing
                        console.log(`Index ${index} status changed to: ${hiddenInput.value}`);
                    }
                });
            },
            error: function(xhr) {
                console.log(xhr);

                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Failed to fetch customer items. Please try again.',
                });
            }
        });
    }

    // Function to format numbers with comma thousands separators
    function formatCurrency(num) {
        return Math.round(num).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    }

    // Event Delegation for Qty input changes
    document.getElementById('detailTbody').addEventListener('input', function (e) {
        if (e.target && e.target.classList.contains('qty-input')) {
            const index = e.target.getAttribute('data-index');

            // 1. Get current Qty value
            const qty = parseFloat(e.target.value) || 0;

            // 2. Get Price After Disc input element & value (remove commas before parsing)
            const priceAfterDiscInput = document.getElementById(`price_after_disc_${index}`);
            const priceAfterDisc = parseFloat(priceAfterDiscInput.value.replace(/,/g, '')) || 0;

            // 3. Calculate new Nominal (qty * price_after_disc)
            const newNominal = qty * priceAfterDisc;

            // 4. Update the nominal input field with formatted currency
            const nominalInput = document.getElementById(`nominal_${index}`);
            if (nominalInput) {
                nominalInput.value = formatCurrency(newNominal);
            }

            // 5. Recalculate global totals
            calculateTotals();
        }
    });

    function calculateTotals() {
        let total = 0;
        const disc_nominal = 0;
        document.querySelectorAll('.nominal').forEach(function (input) {

            input.value = input.value.replace(/,/g, ''); // Remove any thousand separators
            if(input.id=='disc_nominal'){
                total -= parseFloat(input.value) || 0;
            }else{
                total += parseFloat(input.value) || 0;
            }
            const cursorPosition = input.selectionStart;
            let value = input.value.replace(/,/g, '');
            // Format the number with thousand separators
            let formattedValue = value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

            // Set the new value
            input.value = formattedValue;

            // Adjust the cursor position
            const newCursorPosition = formattedValue.length - (value.length - cursorPosition);
            input.setSelectionRange(newCursorPosition, newCursorPosition);
        });
        document.getElementById('total').value = total;
        let strTotal = (total)+"";
        let value2 = strTotal.replace(/,/g, '');
            // Format the number with thousand separators
        let formattedValue2 = value2.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        document.getElementById('total-value').innerText = formattedValue2;

        return { total }; // Return totals for validation
    }
    calculateTotals();

    // Track the row count index for new rows
    let rowCounter = document.querySelectorAll('#detailTbody tr').length;

    document.getElementById('detailTbody').addEventListener('click', function (e) {

        // --- 1. SPLIT ROW LOGIC ---
        const splitBtn = e.target.closest('.split-btn');
        if (splitBtn) {
            e.preventDefault();

            const currentRow = splitBtn.closest('tr');
            const newIndex = rowCounter++; // Generate a unique index for form submit

            // Extract values from the current row
            const itemId          = currentRow.querySelector('[name*="[item_id]"]')?.value || '';
            const shopeeItemId    = currentRow.querySelector('[name*="[shopee_item_id]"]')?.value || '';
            const shopeeItemName  = currentRow.querySelector('[name*="[shopee_item_name]"]')?.value || '';
            const isChecked       = currentRow.querySelector('.status-checkbox')?.checked ?? true;
            const modelId         = currentRow.querySelector('[name*="[model_id]"]')?.value || '';
            const modelName       = currentRow.querySelector('[name*="[model_name]"]')?.value || '';
            const price           = currentRow.querySelector('[name*="[price]"]')?.value || '0';
            const discNominal     = currentRow.querySelector('[name*="[disc_nominal]"]')?.value || '0';
            const priceAfterDisc  = currentRow.querySelector('[name*="[price_after_disc]"]')?.value || '0';

            // Default split qty to 1
            const defaultSplitQty = 1;

            // Compute nominal for new row
            const rawPriceAfterDisc = parseFloat(priceAfterDisc.replace(/,/g, '')) || 0;
            const newNominal = formatCurrency(defaultSplitQty * rawPriceAfterDisc);

            // Create new row
            const newRow = document.createElement('tr');
            newRow.innerHTML = `
                <td>
                    <input type="hidden" id="item_id_${newIndex}" name="details[${newIndex}][item_id]" class="form-control" value="${itemId}" readonly />
                    <input type="hidden" id="shopee_item_id_${newIndex}" name="details[${newIndex}][shopee_item_id]" class="form-control" value="${shopeeItemId}" readonly />
                    <input type="text" name="details[${newIndex}][shopee_item_name]" class="form-control" value="${shopeeItemName}" readonly />
                </td>
                <td>
                    <div class="form-check form-switch text-center">
                        <input class="form-check-input status-checkbox" type="checkbox" id="status_${newIndex}" ${isChecked ? 'checked' : ''} />
                        <input type="hidden" name="details[${newIndex}][inventory_detail]" id="status_hidden_${newIndex}" value="${isChecked ? 'true' : 'false'}" />
                    </div>
                </td>
                <td>
                    <input type="hidden" name="details[${newIndex}][model_id]" id="model_id_${newIndex}" class="form-control" value="${modelId}" readonly>
                    <input type="text" name="details[${newIndex}][model_name]" id="model_name_${newIndex}" class="form-control" value="${modelName}" readonly>
                </td>
                <td>
                    <input type="number" name="details[${newIndex}][qty]" id="qty_${newIndex}" class="form-control qty-input" data-index="${newIndex}" value="${defaultSplitQty}" min="1" required>
                </td>
                <td>
                    <input type="text" name="details[${newIndex}][price]" id="price_${newIndex}" class="form-control price-input text-end" value="${price}" readonly>
                </td>
                <td>
                    <input type="text" name="details[${newIndex}][disc_nominal]" id="disc_nominal_${newIndex}" class="form-control text-end" value="${discNominal}" readonly>
                </td>
                <td>
                    <input type="text" name="details[${newIndex}][price_after_disc]" id="price_after_disc_${newIndex}" class="form-control price-after-disc-input text-end" value="${priceAfterDisc}" readonly>
                </td>
                <td>
                    <input type="text" name="details[${newIndex}][nominal]" id="nominal_${newIndex}" class="form-control text-end nominal" value="${newNominal}" readonly>
                </td>
                <td class="text-center">
                    <button type="button" class="btn btn-sm btn-primary split-btn" data-index="${newIndex}" title="Split Row">
                        <i class="material-icons-outlined" style="font-size:16px;">call_split</i>
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-danger remove-row-btn" title="Hapus Row">
                        <i class="material-icons-outlined" style="font-size:16px;">delete</i>
                    </button>
                </td>
            `;

            // Insert new row directly under current row
            currentRow.parentNode.insertBefore(newRow, currentRow.nextSibling);

            // Optional: Reduce 1 from original row Qty if Qty > 1
            const origQtyInput = currentRow.querySelector('.qty-input');
            if (origQtyInput) {
                const currentQty = parseFloat(origQtyInput.value) || 0;
                if (currentQty > 1) {
                    origQtyInput.value = currentQty - 1;
                    // Dispatch input event to automatically trigger recalculation on original row
                    origQtyInput.dispatchEvent(new Event('input', { bubbles: true }));
                }
            }

            calculateTotals();
        }

        // --- 2. DELETE SPLIT ROW LOGIC ---
        const removeBtn = e.target.closest('.remove-row-btn');
        if (removeBtn) {
            e.preventDefault();
            const row = removeBtn.closest('tr');

            // Prevent deleting if it's the only row left
            if (document.querySelectorAll('#detailTbody tr').length > 1) {
                row.remove();
                calculateTotals();
            } else {
                Swal.fire('Warning', 'Minimal harus ada 1 baris detail!', 'warning');
            }
        }
    });

</script>
@endsection
@endsection