@extends('store.layout.main')
@section('title', 'Add Sale')

@section('page-header')
<x-store.page-header
    pretitle="Store"
    title="Add Sale"
    back-route="store.dashboard"
    :other-btn="[
        [
            'href' => route ('store.sales.list'),
            'text' => 'See All Sales',
            'class' => 'btn btn-success',
            'icon' => svg_icon('eye','#fff'),
        ]
    ]"
/>
@endsection

@section('header-css')
<style>
.bill-summary span {
    line-height: 1.6;
}
.search-input {
    height: 48px;
    font-size: 16px;
    padding-left: 12px;
    border-radius: 10px;
    border: 1.5px solid #d9d9d9;
    background-color: #ffffff;
    transition: all 0.25s ease-in-out;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* Hover */
.search-input:hover {
    border-color: #bfbfbf;
}

/* Focus */
.search-input:focus {
    border-color: #0d6efd; /* Bootstrap primary */
    box-shadow: 0 6px 18px rgba(13, 110, 253, 0.18);
    outline: none;
}

/* Icon container */
.input-group-text {
    border-radius: 10px 0 0 10px;
    border: 1.5px solid #d9d9d9;
    background-color: #ffffff;
    transition: all 0.25s ease-in-out;
}

/* Sync icon border with input on focus */
.input-group:focus-within .input-group-text {
    border-color: #0d6efd;
    box-shadow: 0 6px 18px rgba(13, 110, 253, 0.18);
}

/* Remove double border */
.input-group .search-input {
    border-left: 0;
}
.sale-icon {
    font-size: 18px;
}
.input-group:focus-within .sale-icon {
    color: #0d6efd !important;
    
}
.search-input::placeholder {
    color: #9ca3af;
    font-weight: 500;
}

.cart-btn {
    height: 48px;
    width: 48px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    border: 1px solid #efefef;
}

.cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #dc3545;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#search-product-dropdown {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 6px;
    text-align: left !important;
    display: flex;
    flex-direction: column;
    align-items: stretch !important;
}

#search-product-dropdown .product-item {
    display: block !important;
    width: 100%;
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    border-radius: 10px;
    margin-bottom: 4px;
    transition: background-color 0.18s ease;
}

#search-product-dropdown .product-item:last-child {
    margin-bottom: 0;
}

#search-product-dropdown .product-item:hover {
    background-color: #f8f9fa;
    text-decoration: none;
}

#search-product-dropdown .product-item * {
    text-align: left !important;
}

.product-item-price {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background-color: #e8f7ee;
    color: #198754;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.product-item-name {
    font-size: 14px;
    line-height: 1.25;
    flex: 1;
    min-width: 0;
}

.product-item-stock {
    font-size: 12px;
}

.product-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: auto;
}
</style>
@endsection

@section('header-js')
    @if(isset($editCart))
    <script>
        localStorage.setItem('store_sale_cart', JSON.stringify(@json($editCart)));
    </script>
    @endif
@endsection

@section('main-container')
<div class="row mt-3">

    {{-- LEFT SIDE : PRODUCT SEARCH & CART --}}
    <div class="col-lg-8">

        <!-- PRODUCT SEARCH & SELECTED PRODUCTS -->
        <div class="card mb-3">
            <div class="card-header">
                <h5 class="card-title">Add Product</h5>
            </div>

            <div class="card-body">

                {{-- SEARCH BAR --}}
                <div class="col-12 mb-3 px-3 mt-2">
                    <div class="d-flex align-items-center gap-2">

                        <!-- Search -->
                        <div class="input-group flex-grow-1">
                            <span class="input-group-text bg-white">
                                <i class="bi bi-box-seam sale-icon"></i>
                            </span>
                            <input type="text"
                                id="search-product"
                                class="form-control search-input border-start-0"
                                placeholder="Search product by name or SKU...">
                        </div>

                        <!-- Cart Icon -->
                        <div class="position-relative">
                            <button type="button" class="btn btn-light cart-btn">
                                <i class="bi bi-cart3 fs-5"></i>
                            </button>
                            <span id="cart-count" class="cart-badge">0</span>
                        </div>

                    </div>

                    <div class="position-relative">
                        <div id="search-product-dropdown"
                            class="dropdown-menu w-100 shadow"
                            style="display:none; max-height: 250px; overflow-y: auto;">
                        </div>
                    </div>
                </div>

                {{-- SELECTED PRODUCTS TABLE --}}
                <div class="table-responsive px-3 pb-3">
                    <table class="table table-bordered align-middle">
                        <thead class="table-light">
                            <tr>
                                <th width="40%">Product</th>
                                <th width="15%">Price</th>
                                <th width="15%">Qty</th>
                                <th width="15%">Total</th>
                                <th width="10%">Action</th>
                            </tr>
                        </thead>
                        <tbody id="cart-items">
                            <tr id="empty-cart">
                                <td colspan="5" class="text-center text-muted">
                                    No product added
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </div>
        </div>

        <!-- CUSTOMER SELECTION -->
        <div class="card mb-3">
            <div class="card-header">
                <h5 class="card-title">Customer</h5>
            </div>

            <div class="card-body">

                <!-- Customer Search -->
                <div class="row mb-3">
                   
                   <div class="col-sm-10 mt-2">
                        <div class="input-group">
                            <span class="input-group-text bg-white">
                                <i class="bi bi-person-check sale-icon"></i>
                            </span>
                            <input type="text"
                                id="customer-search"
                                class="form-control search-input border-start-0"
                                placeholder="Search customer by name, phone or email">
                        </div>

                        <div class="position-relative">
                            <div id="customer-dropdown"
                                class="dropdown-menu w-100 shadow"
                                style="display:none; max-height: 200px; overflow-y: auto;">
                            </div>
                        </div>
                   </div>
                    <div class="col-sm-2 mt-2">
                        <button class="btn btn-sm btn-secondary mt-1"
                            onclick="resetWalkIn()">
                            Reset to Walk-in <br> Customer
                        </button>
                    </div>
                </div>
                

                <!-- Selected Customer Info -->
                <div class="row g-3">
                    <input type="hidden" name="customer_id" id="customer-id">
                    <div class="col-md-4">
                        <label class="form-label"> Customer Name</label>
                        <input type="text" id="customer-name"
                            class="form-control"
                            value="Walk-in Customer" readonly>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Phone</label>
                        <input type="text" id="customer-phone"
                            class="form-control" readonly>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Email</label>
                        <input type="email" id="customer-email"
                            class="form-control" readonly>
                    </div>
                </div>

            </div>
        </div>

    </div>

    {{-- RIGHT SIDE : BILL SUMMARY --}}
    <div class="col-lg-4">
        <div class="card sticky-top" style="top: 20px;">
            <div class="card-header">
                <h4 class="card-title">Bill Summary</h4>
            </div>

            <div class="card-body">

                <div class="bill-summary">
                    <!-- Base Price Subtotal (Owner Reference) -->
                    <div class="d-flex justify-content-between py-1 border-bottom">
                        <span class="fw-bold">Base Price Subtotal</span>
                        <span class="fw-bold text-primary" id="base-sub-total">0.00</span>
                    </div>

                    <!-- Subtotal (Before Discount & Tax) -->
                    <div class="d-flex justify-content-between py-1 border-bottom">
                        <span class="fw-bold">Subtotal (Excl. Discount & Tax)</span>
                        <span class="fw-bold" id="sub-total">0.00</span>
                    </div>

                    <!-- After Discount -->
                    <div class="pt-2 border-bottom">
                        <div class="fw-bold text-muted mb-1">Discounts</div>
                        <div id="discount-breakdown"></div>
                        <div class="d-flex justify-content-between py-1">
                            <span class="fw-bold">Subtotal (After Discount)</span>
                            <span id="after-discount-total" class="fw-bold">0.00</span>
                        </div>
                    </div>

                    <!-- After Tax -->
                    <div class="pt-2 border-bottom">
                        <div class="fw-bold text-muted mb-1">TAX</div>
                        <div id="tax-breakdown"></div>
                    </div>

                    <div class="d-flex justify-content-between py-3 mt-2">
                        <span class="fw-bold fs-4">Payable Amount</span>
                        <span class="fw-bold fs-4 text-success" id="grand-total">0.00</span>
                    </div>
                </div>

                <button class="btn btn-success w-100 mt-3" id="complete-order">
                    {{ isset($editSale) ? 'Update Order' : 'Complete Order' }}
                </button>

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

</div>
@endsection

@section('script')

<script>
const CART_KEY = 'store_sale_cart';
let originalTableHtml = '';
let searchTimeout = null;
let searchedProducts = {};

function getSavedCart() {
    return JSON.parse(localStorage.getItem(CART_KEY) || '[]');
}

function saveCart(cart) {
    localStorage.setItem(CART_KEY, JSON.stringify(cart));
}

function clearCart() {
    localStorage.removeItem(CART_KEY);
}

function syncCartToStorage() {

    let cart = [];

    $('#cart-items tr').not('#empty-cart').each(function () {

        const $row = $(this);

        cart.push({
            rowId: $row.attr('id'),
            product_id: $row.data('product-id'),
            variant_id: $row.data('variant-id') || null,
            name: $row.find('td:first').text(),
            stock: $row.data('stock'),
            pricing: {
                base_unit_price: $row.data('base-price'),
                subtotal: $row.data('subtotal'),
                discount_per_unit: $row.data('discount'),
                tax_per_unit: $row.data('tax'),
                final_unit_price: $row.data('price'),
                tax_details: $row.data('tax-details'),
                discount_details: $row.data('discount-details')
            },
            qty: num($row.find('.qty-input').val())
        });

    });

    saveCart(cart);
}

$(document).ready(function () {
    originalTableHtml = $('table tbody').html();
    restoreCartFromStorage();
});

function num(val) {
    val = parseFloat(val);
    return isNaN(val) ? 0 : val;
}

function formatPrice(pricing) {
    console.log(pricing);
    const price = Number(pricing.display_price);
    const tax   = Number(pricing.display_tax);

    if (pricing.display_tax_type === 'inc') {
        return `${price.toFixed(2)} (inc. tax)`;
    }

        // ONLY show tax if > 0
    if (tax > 0) {
        return `${price.toFixed(2)} + ${tax.toFixed(2)} tax`;
    }

    return `${price.toFixed(2)}`;
}

function renderProductDropdownItem({
    productId,
    variantId = '',
    name,
    sku = '',
    stock,
    pricing
}) {
    const priceText = formatPrice(pricing);
    const stockText = stock !== null && stock !== undefined ? stock : '—';
    const skuText = sku ? `SKU: ${sku}` : '';

    return `
        <a href="#"
              class="product-item px-3 py-2"
              style="display:block;width:100%;text-align:left !important"
           data-product-id="${productId}"
           data-variant-id="${variantId}">

            <div class="d-flex flex-column w-100" style="align-items:flex-start !important;text-align:left !important;">
                <div class="product-item-row mb-1" style="display:flex;align-items:flex-start !important;justify-content:space-between !important;text-align:left !important;">
                    <span class="fw-semibold text-dark product-item-name" style="display:block;text-align:left !important;">
                        ${name}
                    </span>
                    <span class="product-item-price" style="margin-left:20px;">
                        ${priceText}
                    </span>
                </div>
                <div class="text-muted product-item-stock" style="display:block;width:100%;text-align:left !important;">
                    Stock: ${stockText}
                </div>
                ${skuText ? `<div class="text-muted product-item-stock" style="display:block;width:100%;text-align:left !important;">${skuText}</div>` : ''}
            </div>
        </a>
    `;
}

$('#search-product').on('keyup', function () {

    const query = $(this).val().trim();

    clearTimeout(searchTimeout);

    if (query.length < 2) {
        $('#search-product-dropdown').hide().empty();
        return;
    }

    searchTimeout = setTimeout(() => {
        $.get("{{ route('store.products.search') }}", { q: query }, function (data) {

            const $dropdown = $('#search-product-dropdown');
            $dropdown.empty();
            searchedProducts = {};

            if (!data.length) {
                $dropdown.hide();
                return;
            }

        data.forEach(product => {

            searchedProducts[product.id] = product;

            // WITH VARIANTS
            if (product.variants && product.variants.length > 0) {

                product.variants.forEach(variant => {

                    $('#search-product-dropdown').append(
                        renderProductDropdownItem({
                            productId: product.id,
                            variantId: variant.id,
                            name: `${product.name} – ${variant.name}`,
                            sku: variant.sku,
                            stock: variant.stock,
                            pricing: variant.pricing
                        })
                    );

                });

            }
            // WITHOUT VARIANTS
            else {

                $('#search-product-dropdown').append(
                    renderProductDropdownItem({
                        productId: product.id,
                        name: product.name,
                        sku: product.sku,
                        stock: product.stock ?? product.pricing.stock,
                        pricing: product.pricing
                    })
                );
            }
        });

            $dropdown.show();
        });
    }, 300);
});

// Quantity input change
$(document).on('change keyup', '.qty-input', function () {
    let $row = $(this).closest('tr');
    let maxStock = parseInt($row.data('stock'));
    let val = parseInt($(this).val());

    if (isNaN(val) || val < 1) val = 1;
    if (val > maxStock) {
        // alert('Only ' + maxStock + ' items available in stock');
        val = maxStock;
        Swal.fire({
            title: 'Stock Limit Reached',
            text: `Only ${maxStock} items available in stock`,
            icon: 'warning',
        });
    }

    $(this).val(val);
    calculateTotals();
    syncCartToStorage();
});

// Quantity plus/minus buttons
$(document).on('click', '.qty-plus', function () {
    let $row = $(this).closest('tr');
    let input = $row.find('.qty-input');

    let currentQty = parseInt(input.val());
    let maxStock   = parseInt($row.data('stock'));

    if (currentQty < maxStock) {
        input.val(currentQty + 1).trigger('change');
    } else {
        Swal.fire({
            title: 'Stock Limit Reached',
            text: `Only ${maxStock} items available in stock`,
            icon: 'warning',
        });
    }
});
$(document).on('click', '.qty-minus', function () {
    let input = $(this).closest('tr').find('.qty-input');
    let val = parseInt(input.val());

    if (val > 1) {
        input.val(val - 1).trigger('change');
    }
});


function renderTaxBreakdown(taxes) {

    let html = '';

    if (Object.keys(taxes).length === 0) {
        html = `
            <div class="text-muted small text-center py-1">
                No tax applied
            </div>
        `;
    } else {
        Object.entries(taxes).forEach(([name, amount]) => {
            html += `
                <div class="d-flex justify-content-between py-1">
                    <span>${name}</span>
                    <span class="text-success">+${amount.toFixed(2)}</span>
                </div>
            `;
        });
    }

    $('#tax-breakdown').html(html);
}

function renderDiscountBreakdown(discounts) {

    let html = '';

    if (Object.keys(discounts).length === 0) {
        html = `
            <div class="text-muted small text-center py-1">
                No discounts applied
            </div>
        `;
    } else {
        Object.entries(discounts).forEach(([name, amount]) => {
            html += `
                <div class="d-flex justify-content-between py-1">
                    <span>${name}</span>
                    <span class="text-danger">-${amount.toFixed(2)}</span>
                </div>
            `;
        });
    }

    $('#discount-breakdown').html(html);
}

function updateCartCount() {
    const count = $('#cart-items tr').not('#empty-cart').length;
    $('#cart-count').text(count);
}

function calculateTotals() {

    let baseSubtotal = 0; // new: sum of all base prices
    let subtotal = 0;
    let totalDiscount = 0;
    let totalTax = 0;
    let grandTotal = 0;

    let taxSummary = {};
    let discountSummary = {};

    const $rows = $('#cart-items tr').not('#empty-cart');

    if ($rows.length === 0) {
        $('#sub-total').text('0.00');
        $('#after-discount-total').text('0.00');
        $('#after-tax-total').text('0.00');
        $('#grand-total').text('0.00');
        renderTaxBreakdown({});
        renderDiscountBreakdown({});
        updateCartCount();
        return;
    }

    $rows.each(function () {

        const $row = $(this);
        const qty = num($row.find('.qty-input').val());

        const basePrice = num($row.data('base-price')); // new: owner entered price
        const unitSubtotal = num($row.data('subtotal'));      // base without discount & tax
        const unitDiscount = num($row.data('discount'));
        const unitTax = num($row.data('tax'));
        const unitFinal = num($row.data('price'));           // final_unit_price

        baseSubtotal += basePrice * qty;
        subtotal += unitSubtotal * qty;
        totalDiscount += unitDiscount * qty;
        totalTax += unitTax * qty;
        grandTotal += unitFinal * qty;

        // 🔹 Discount breakdown
        const discounts = $row.data('discount-details') || [];
        discounts.forEach(d => {
            discountSummary[d.name] = (discountSummary[d.name] || 0) + (d.amount_per_unit * qty);
        });

        // 🔹 Tax breakdown
        const taxes = $row.data('tax-details') || [];
        taxes.forEach(t => {
            taxSummary[t.name] = (taxSummary[t.name] || 0) + (t.amount_per_unit * qty);
        });

        // Update row total (final price × qty)
        $row.find('.item-total').text((unitFinal * qty).toFixed(2));
    });

    // Update summary totals
    $('#base-sub-total').text(baseSubtotal.toFixed(2));
    $('#sub-total').text(subtotal.toFixed(2));
    $('#after-discount-total').text((subtotal - totalDiscount).toFixed(2));
    $('#after-tax-total').text((subtotal - totalDiscount + totalTax).toFixed(2));
    $('#grand-total').text(grandTotal.toFixed(2));

    renderTaxBreakdown(taxSummary);
    renderDiscountBreakdown(discountSummary);
    updateCartCount();
}

function restoreCartFromStorage() {

    const cart = getSavedCart();

    if (!cart.length) return;

    $('#cart-items').empty();

    cart.forEach(item => {

        $('#cart-items').append(`
            <tr id="${item.rowId}"
                data-product-id="${item.product_id}"
                data-variant-id="${item.variant_id ?? ''}"
                data-stock="${item.stock}"

                data-base-price="${item.pricing.base_unit_price}"
                data-subtotal="${item.pricing.subtotal}"
                data-discount="${item.pricing.discount_per_unit}"
                data-tax="${item.pricing.tax_per_unit}"
                data-price="${item.pricing.final_unit_price}"

                data-tax-details='${JSON.stringify(item.pricing.tax_details)}'
                data-discount-details='${JSON.stringify(item.pricing.discount_details)}'
            >
                <td>${item.name}</td>
                <td>${item.pricing.base_unit_price}</td>
                <td>
                    <div class="input-group input-group-sm">
                        <button class="btn btn-outline-secondary qty-minus">−</button>
                        <input type="text" class="form-control text-center qty-input" value="${item.qty}">
                        <button class="btn btn-outline-secondary qty-plus">+</button>
                    </div>
                </td>
                <td class="item-total">0.00</td>
                <td>
                    <button class="btn btn-sm btn-danger remove-item">×</button>
                </td>
            </tr>
        `);

    });

    calculateTotals();
}

$(document).on('click', '.remove-item', function () {
    $(this).closest('tr').remove();

    if ($('#cart-items tr').not('#empty-cart').length === 0) {
        $('#cart-items').html(`
            <tr id="empty-cart">
                <td colspan="5" class="text-center text-muted">
                    No product added
                </td>
            </tr>
        `);
    }

    calculateTotals();
    syncCartToStorage();
});

function addToCart(product, variant = null) {

    const pricing = variant ? variant.pricing : product.pricing;
    const availableStock = variant ? variant.stock : product.stock;

    const rowId = variant ? `v-${variant.id}` : `p-${product.id}`;
    const name  = variant
        ? `${product.name} - ${variant.name}`
        : product.name;

    if ($(`#row-${rowId}`).length) {
        const qty = $(`#row-${rowId} .qty-input`);
        qty.val(parseInt(qty.val()) + 1).trigger('change');
        return;
    }

    $('#empty-cart').remove();

    $('#cart-items').append(`
        <tr id="row-${rowId}"
            data-product-id="${product.id}"
            data-variant-id="${variant?.id ?? ''}"
            data-stock="${availableStock}"

            data-base-price="${pricing.base_unit_price}"
            data-subtotal="${pricing.subtotal}"
            data-discount="${pricing.discount_per_unit}"
            data-tax="${pricing.tax_per_unit}"
            data-price="${pricing.final_unit_price}"

            data-tax-details='${JSON.stringify(pricing.tax_details)}'
            data-discount-details='${JSON.stringify(pricing.discount_details)}'
        >
            <td>${name}</td>
            <td>${pricing.base_unit_price}</td>
            <td>
                <div class="input-group input-group-sm">
                    <button class="btn btn-outline-secondary qty-minus">−</button>
                    <input type="text" class="form-control text-center qty-input" value="1">
                    <button class="btn btn-outline-secondary qty-plus">+</button>
                </div>
            </td>
            <td class="item-total">0.00</td>
            <td>
                <button class="btn btn-sm btn-danger remove-item">×</button>
            </td>
        </tr>
        `);

    calculateTotals();
    syncCartToStorage();
}

$(document).on('click', '.product-item', function (e) {
    e.preventDefault();

    const productId = $(this).data('product-id');
    const variantId = $(this).data('variant-id');

    const product = searchedProducts[productId];
    const variant = product.variants.find(v => v.id == variantId) || null;

    $('#search-product-dropdown').hide().empty();
    $('#search-product').val('');

    addToCart(product, variant);
});

// customer selection
let selectedCustomer = null;
let customerTimer = null;


function resetWalkIn() {
    selectedCustomer = null;

    $('#customer-id').val('');
    $('#customer-name').val('Walk-in Customer');
    $('#customer-phone').val('');
    $('#customer-email').val('');
    $('#customer-search').val('');
    $('#customer-dropdown').hide().empty();
}

$('#customer-search').on('keyup', function () {

    const q = $(this).val().trim();
    clearTimeout(customerTimer);

    if (q.length < 2) {
        $('#customer-dropdown').hide().empty();
        return;
    }

    customerTimer = setTimeout(() => {
        $.get("{{ route('store.customers.search') }}", { q }, function (data) {

            const $dropdown = $('#customer-dropdown');
            $dropdown.empty();

            if (!data.length) {
                $dropdown.hide();
                return;
            }

            data.forEach(c => {

                let contactParts = [];

                if (c.phone) {
                    contactParts.push(c.phone);
                }

                if (c.email) {
                    contactParts.push(c.email);
                }

                const contactText = contactParts.length
                    ? ` — ${contactParts.join(' · ')}`
                    : '';

                $dropdown.append(`
                    <a href="#" class="dropdown-item customer-item"
                    data-id="${c.id}"
                    data-name="${c.name}"
                    data-phone="${c.phone ?? ''}"
                    data-email="${c.email ?? ''}">

                        <strong>${c.name}</strong>
                        <small class="text-muted ms-1">
                            ${contactText}
                        </small>

                    </a>
                `);
            });

            $dropdown.show();
        });
    }, 300);
});

$(document).on('click', '.customer-item', function (e) {
    e.preventDefault();

    selectedCustomer = {
        id: $(this).data('id'),
        name: $(this).data('name'),
        phone: $(this).data('phone'),
        email: $(this).data('email'),
    };

    $('#customer-id').val(selectedCustomer.id);
    $('#customer-name').val(selectedCustomer.name);
    $('#customer-phone').val(selectedCustomer.phone);
    $('#customer-email').val(selectedCustomer.email);

    $('#customer-dropdown').hide().empty();
    $('#customer-search').val('');
});


// send order into sales system complete order
function collectOrderPayload() {

    let items = [];

    $('#cart-items tr').not('#empty-cart').each(function () {
        const $row = $(this);
        const qty = num($row.find('.qty-input').val());

        items.push({
            store_product_id: $row.data('product-id'),
            store_product_variant_id: $row.data('variant-id') || null,
            product_name: $row.find('td:first').text(),
            variant_name: null, // optional
            unit_price: num($row.data('price')),
            quantity: num($row.find('.qty-input').val()),
            discount_amount: 0, // if using ProductService, replace with calculated value
            tax_amount: num($row.data('tax-total')),
            tax_details: $row.data('taxes') ?? [],
            subtotal: num($row.data('price')) * num($row.find('.qty-input').val()),
            total: num($row.find('.item-total').text())
        });
    });

    return {
        customer_id: $('#customer-id').val() || null,
        customer_name: $('#customer-name').val(),
        customer_phone: $('#customer-phone').val(),
        customer_email: $('#customer-email').val(),
        amount_paid: 0, // or from a field if user can input
        items: items
    };
}

// complete order click
$('#complete-order').on('click', function () {
    const payload = collectOrderPayload();

    if (!payload.items.length) {
        alert('Please add at least one product');
        return;
    }

    // Prepare FormData
    let data = new FormData();
    data.append('_token', $('meta[name="csrf-token"]').attr('content'));
    data.append('order', JSON.stringify(payload)); // convert object to JSON string

    const url = "{{ isset($editSale) ? route('store.sales.update', $editSale->id) : route('store.sales.add') }}";

    $.ajax({
        type: "POST",
        url: url,
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
        data: data,
        processData: false,
        contentType: false,
        cache: false,
        success: function (res) {
            if (res.status) {
                Swal.fire({
                    title: 'Success',
                    text: 'Order completed successfully!',
                    icon: 'success',
                }).then(() => {
                    // Redirect to sales list or clear cart;
                    clearCart();
                    window.location.href = res.redirect;
                });
            } else {
                Swal.fire({
                    title: 'Error',
                    text: res.message || 'Something went wrong!',
                    icon: 'error',
                });
                console.log(res);
            }
        },
        error: function (xhr) {
            Swal.fire({
                title: 'Error',
                text: 'Something went wrong!',
                icon: 'error',
            });
            console.error(xhr.responseText);
        }
    });
});
</script>

@if(isset($editCustomer))
<script>
document.addEventListener('DOMContentLoaded', function () {

    const customer = @json($editCustomer);

    // Set same way as clicking dropdown item does
    selectedCustomer = customer;

    $('#customer-id').val(customer.id);
    $('#customer-name').val(customer.name);
    $('#customer-phone').val(customer.phone);
    $('#customer-email').val(customer.email);

});
</script>
@endif

@endsection