@extends($layout ?? 'backend.layouts.app')

@section('content')
    <div class="row">
        <div class="col-xl-8 mb-3">
            <div class="card shadow-sm border-0">
                <div style="padding: 0 25px;">
                    <div class="row">
                        <div class="col-12 col-md-6">
                            <select class="form-control aiz-selectpicker" data-live-search="true" id="pos-category">
                                <option value="">{{ translate('All Categories') }}</option>
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}">{{ $category->getTranslation('name') }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 col-md-6">
                            <select class="form-control aiz-selectpicker" data-live-search="true" id="pos-brand">
                                <option value="">{{ translate('All Brands') }}</option>
                                @foreach ($brands as $brand)
                                    <option value="{{ $brand->id }}">{{ $brand->getTranslation('name') }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="las la-search"></i></span>
                        </div>
                        <input type="text" class="form-control" id="pos-search" list="pos-suggestions" autofocus
                            autocomplete="off" placeholder="{{ translate('Search products, SKU, variants') }}">
                        <div class="input-group-append">
                            <button class="btn btn-primary" type="button"
                                onclick="posSearch()">{{ translate('Search') }}</button>
                        </div>
                    </div>
                    <datalist id="pos-suggestions"></datalist>

                    <div id="pos-products" class="row gutters-5">
                        @include('backend.pos.partials.products', ['products' => $products])
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4">
            <div class="card shadow-sm border-0 pos-cart-card sticky-top" style="z-index: 0;top: 85px;">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="mb-0">{{ translate('Cart & Customer') }}</h5>
                        {{-- <h5 class="mb-0">Currently selected user: {{ $activeCustomerId ?? translate('None') }}</h5> --}}
                    </div>
                    <button type="button" class="btn btn-sm btn-soft-danger" onclick="posClearCart()">
                        <i class="las la-trash-alt"></i>
                    </button>
                </div>
                <div id="pos-cart-wrapper">
                    @include('backend.pos.partials.cart', [
                        'carts' => $carts,
                        'totals' => $totals,
                        'shipping' => $shipping,
                        'discount' => $discount,
                        'customers' => $customers,
                        'tempUserId' => $tempUserId,
                    ])
                </div>
            </div>
        </div>
    </div>

    <!-- Add New Customer Modal -->
    <div class="modal fade" id="new-customer-modal" tabindex="-1" role="dialog" aria-labelledby="newCustomerModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header">
                    <h5 class="modal-title" id="newCustomerModalLabel">
                        {{ translate('Add New Customer') }}
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <!-- Modal Body -->
                <form id="newCustomerForm">
                    <div class="modal-body">

                        <div class="form-group">
                            <label>{{ translate('Name') }}</label>
                            <input type="text" name="name" class="form-control" placeholder="Enter name" required>
                        </div>

                        <div class="form-group">
                            <label>{{ translate('Email') }}</label>
                            <input type="email" name="email" class="form-control" placeholder="Enter email address"
                                required>
                        </div>

                        <div class="form-group">
                            <label>{{ translate('Phone') }}</label>
                            <input type="text" name="phone" class="form-control" placeholder="Enter phone number"
                                required>
                        </div>

                    </div>

                    <!-- Modal Footer -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">
                            {{ translate('Cancel') }}
                        </button>
                        <button type="button" class="btn btn-primary" onclick="addNewCustomer()">
                            {{ translate('Save Customer') }}
                        </button>
                    </div>
                </form>

            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        const posUrls = @json($routeConfig ?? []);
        const csrfToken = "{{ csrf_token() }}";

        // Global variable to store prescription file across cart refreshes
        let prescriptionFileHolder = null;

        // Global variable to track selected customer ID
        let selectedCustomerId = null;

        const posLoader = {
            show: () => {
                if (!document.getElementById('pos-loader')) {
                    $('body').append(
                        '<div id="pos-loader" class="pos-loader"><div class="spinner-border text-primary" role="status"></div></div>'
                    );
                }
                $('#pos-loader').addClass('show');
            },
            hide: () => $('#pos-loader').removeClass('show')
        };

        function posSearch() {
            posLoader.show();
            $.post(posUrls.search, {
                _token: csrfToken,
                keyword: $('#pos-search').val(),
                category: $('#pos-category').val(),
                brand: $('#pos-brand').val()
            }, function(response) {
                if (response.result) {
                    $('#pos-products').html(response.html);
                    renderSuggestions(response.suggestions || []);
                }
            }).fail(function(xhr) {
                AIZ.plugins.notify('danger', xhr.responseJSON?.message || "{{ translate('Search failed') }}");
            }).always(posLoader.hide);
        }

        function posAddToCart(stockId) {
            posLoader.show();
            $.post(posUrls.add, {
                    _token: csrfToken,
                    stock_id: stockId,
                    customer_id: selectedCustomerId
                }, posHandleCart)
                .fail(function(xhr) {
                    AIZ.plugins.notify('danger', xhr.responseJSON?.message ||
                        "{{ translate('Unable to add to cart') }}");
                })
                .always(posLoader.hide);
        }

        function posAddVariant(productId) {
            const select = $('#pos-variant-' + productId);
            const stockId = select.val();
            if (!stockId) {
                AIZ.plugins.notify('warning', "{{ translate('Please select a variant') }}");
                return;
            }
            posAddToCart(stockId);
        }

        function posUpdateQuantity(cartId, quantity) {
            posLoader.show();
            $.post(posUrls.updateQty, {
                    _token: csrfToken,
                    cart_id: cartId,
                    quantity: quantity,
                    customer_id: selectedCustomerId
                }).done(posHandleCart)
                .fail(function(xhr) {
                    const response = xhr.responseJSON || {};
                    AIZ.plugins.notify('danger', response.message || "{{ translate('Something went wrong') }}");
                })
                .always(posLoader.hide);
        }

        function posRemoveCart(id) {
            posLoader.show();
            $.post(posUrls.remove, {
                _token: csrfToken,
                id: id,
                customer_id: selectedCustomerId
            }, posHandleCart).always(posLoader.hide);
        }

        function posClearCart() {
            posLoader.show();
            $.post(posUrls.clear, {
                _token: csrfToken
            }, posHandleCart).always(posLoader.hide);
        }

        function posUpdateCustomer(userId) {
            posLoader.show();
            // Update the selected customer ID immediately
            selectedCustomerId = userId;
            $.post(posUrls.updateCustomer, {
                _token: csrfToken,
                user_id: userId
            }, function(response) {
                // Ensure customer ID is maintained after response
                if (response.result === true) {
                    posHandleCart(response);
                }
            }).fail(function(xhr) {
                AIZ.plugins.notify('danger', xhr.responseJSON?.message ||
                    "{{ translate('Failed to update customer') }}");
            }).always(posLoader.hide);
        }

        function posUpdateShipping(value) {
            // Save prescription notes before updating
            const prescriptionNotes = $('#pos-prescription-notes').val();
            if (prescriptionNotes) {
                localStorage.setItem('pos_prescription_notes', prescriptionNotes);
            }

            posLoader.show();
            $.post(posUrls.setShipping, {
                _token: csrfToken,
                shipping: value,
                customer_id: selectedCustomerId
            }, posHandleCart).always(posLoader.hide);
        }

        function posUpdateDiscount(value) {
            const lensTotal = window.selectedLensesData && window.selectedLensesData.length > 0 ?
                window.selectedLensesData[0].price : 0;

            // Save prescription notes before updating
            const prescriptionNotes = $('#pos-prescription-notes').val();
            if (prescriptionNotes) {
                localStorage.setItem('pos_prescription_notes', prescriptionNotes);
            }

            isUpdatingDiscount = true;
            posLoader.show();
            $.post(posUrls.setDiscount, {
                _token: csrfToken,
                discount: value,
                discount_type: $('#pos-discount-type').val(),
                lenses_total: lensTotal,
                customer_id: selectedCustomerId
            }, posHandleCart).always(() => {
                posLoader.hide();
                setTimeout(() => {
                    isUpdatingDiscount = false;
                }, 100);
            });
        }

        function posResetCart() {
            posUpdateCustomer('');
            posUpdateShipping(0);
            posUpdateDiscount(0);
        }

        function posPlaceOrder() {
            const customerId = selectedCustomerId;

            const formData = new FormData();
            formData.append('_token', csrfToken);
            formData.append('customer_id', customerId); // Send customer ID directly
            formData.append('payment_method', $('#pos-payment-method').val());
            formData.append('payment_status', $('#pos-payment-status').val());
            formData.append('customer_name', $('#pos-customer-name').val() || '');
            formData.append('customer_email', $('#pos-customer-email').val() || '');
            formData.append('customer_phone', $('#pos-customer-phone').val() || '');
            formData.append('customer_address', $('#pos-customer-address').val() || '');

            // Capture discount values directly from inputs
            formData.append('discount', $('#pos-discount').val() || 0);
            formData.append('discount_type', $('#pos-discount-type').val() || 'amount');

            // Add prescription details if ENABLE_LENSES is true

            // Add selected lenses data
            if (window.selectedLensesData && window.selectedLensesData.length > 0) {
                formData.append('selected_lenses', JSON.stringify(window.selectedLensesData));
            }

            const prescriptionImage = prescriptionFileHolder || $('#pos-prescription-image')[0]?.files[0];
            if (prescriptionImage) {
                formData.append('prescription_image', prescriptionImage);
            }
            const prescriptionNotes = $('#pos-prescription-notes').val();
            if (prescriptionNotes) {
                formData.append('prescription_notes', prescriptionNotes);
            }

            // Store prescription notes in localStorage to preserve across cart refreshes
            if (prescriptionNotes) {
                localStorage.setItem('pos_prescription_notes', prescriptionNotes);
            }

            posLoader.show();
            $.ajax({
                url: posUrls.order,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.result) {
                        // Clear prescription data from localStorage and file holder
                        localStorage.removeItem('pos_prescription_notes');
                        prescriptionFileHolder = null;

                        AIZ.plugins.notify('success', response.message ||
                            "{{ translate('Order placed successfully') }}");
                        if (response.invoice_url) {
                            window.open(response.invoice_url, '_blank');
                        }
                        window.location.reload();
                    } else {
                        AIZ.plugins.notify('danger', response.message ||
                            "{{ translate('Could not place order') }}");
                    }
                },
                error: function(xhr) {
                    AIZ.plugins.notify('danger', xhr.responseJSON?.message ||
                        "{{ translate('Could not place order') }}");
                },
                complete: function() {
                    posLoader.hide();
                }
            });
        }

        // Global lens selection state
        let selectedLensData = null;
        let lensEventsInitialized = false;
        let isUpdatingLens = false; // Prevent recursive updates
        let isUpdatingDiscount = false; // Prevent interference with lens updates

        // Initialize lens selection functionality
        function initializeLensSelection() {
            // Check if lens section exists
            if ($('.lens-radio').length === 0) {
                return; // No lens section, skip initialization
            }

            // If we have a previously selected lens, restore it
            if (selectedLensData) {
                // Restore the radio button selection
                $('#lens-' + selectedLensData.id).prop('checked', true);

                // Handle color options visibility and prescription section
                $('[id^="colors-"]').hide();
                if (selectedLensData.id !== '0') {
                    $('#colors-' + selectedLensData.id).show();
                    $('#prescription-section').show();
                    // Restore color selection if exists
                    if (selectedLensData.color) {
                        $('input.lens-color[name="lens-color-' + selectedLensData.id + '"][value="' + selectedLensData
                            .color + '"]').prop('checked', true);
                    }
                } else {
                    $('#prescription-section').hide();
                }
            } else {
                // Initialize with default checked lens (first time load)
                const currentlyChecked = $('.lens-radio:checked');
                if (currentlyChecked.length > 0) {
                    const lensId = currentlyChecked.val();
                    const price = parseFloat(currentlyChecked.data('price')) || 0;
                    const lensName = currentlyChecked.siblings('label').text().trim();

                    selectedLensData = {
                        id: lensId,
                        name: lensName,
                        price: price,
                        color: null
                    };

                    // Handle color options visibility and prescription section
                    $('[id^="colors-"]').hide();
                    if (lensId !== '0') {
                        $('#colors-' + lensId).show();
                        $('#prescription-section').show();
                    } else {
                        $('#prescription-section').hide();
                    }
                }
            }

            // Initialize event handlers only once
            if (!lensEventsInitialized) {
                // Handle lens radio button changes
                $(document).on('change', '.lens-radio', function() {
                    const $radio = $(this);
                    const lensId = $radio.val();
                    const price = parseFloat($radio.data('price')) || 0;
                    const lensName = $radio.siblings('label').text().trim();

                    // Hide all color options first
                    $('[id^="colors-"]').hide();

                    // Show/hide prescription section based on lens selection
                    if (lensId !== '0') {
                        $('#colors-' + lensId).show();
                        $('#prescription-section').slideDown(300);

                        // Automatically select first color if available and get its value
                        const firstColor = $('#colors-' + lensId + ' .lens-color:first');
                        if (firstColor.length > 0) {
                            firstColor.prop('checked', true);

                            // Update selected lens with the first color
                            selectedLensData = {
                                id: lensId,
                                name: lensName,
                                price: price,
                                color: firstColor.val()
                            };
                        } else {
                            selectedLensData = {
                                id: lensId,
                                name: lensName,
                                price: price,
                                color: null
                            };
                        }
                    } else {
                        $('#prescription-section').slideUp(300);

                        // Update selected lens
                        selectedLensData = {
                            id: lensId,
                            name: lensName,
                            price: price,
                            color: null
                        };
                    }

                    // Clear other color selections
                    $('.lens-color').not('#colors-' + lensId + ' .lens-color').prop('checked', false);

                    // Update with backend sync
                    updateLensesTotal(true);
                });

                // Handle color selection
                $(document).on('change', '.lens-color', function() {
                    const color = $(this).val();

                    // Update color in selected lens
                    if (selectedLensData) {
                        selectedLensData.color = color;
                    }
                });

                lensEventsInitialized = true;
            }

            // Update total price (without backend sync during initialization)
            updateLensesTotal(false);
        }

        // Update lens totals (moved outside to be accessible)
        function updateLensesTotal(syncWithBackend = false) {
            // Prevent recursive calls
            if (isUpdatingLens) {
                return;
            }

            const total = selectedLensData ? selectedLensData.price : 0;
            $('#lenses-total').text(formatPrice(total));

            // Show/hide lens price row in totals
            const lensRow = $('#lens-price-row');
            const lensPriceDisplay = $('#lens-price-display');

            if (total > 0) {
                lensPriceDisplay.text(formatPrice(total));
                lensRow.show();
            } else {
                lensRow.hide();
            }

            window.selectedLensesData = selectedLensData ? [selectedLensData] : [];

            if (syncWithBackend && $('#pos-discount').length && !isUpdatingDiscount) {
                isUpdatingLens = true;
                const discountValue = $('#pos-discount').val() || 0;
                posUpdateDiscount(discountValue);
                setTimeout(() => {
                    isUpdatingLens = false;
                }, 500);
            }
        }

        // Format price helper
        function formatPrice(price) {
            return '{{ currency_symbol() }}' + price.toFixed(2);
        }

        // Initialize on page load
        $(document).ready(function() {
            initializeLensSelection();

            // Initialize customer selection from backend (passed from controller)
            const activeCustomerId = @json($activeCustomerId ?? null);
            selectedCustomerId = activeCustomerId || $('#pos-customer').val() || null;

            // Bind customer dropdown change event
            $('#pos-customer').on('changed.bs.select change', function() {
                const newCustomerId = $(this).val();
                if (newCustomerId && newCustomerId !== selectedCustomerId) {
                    posUpdateCustomer(newCustomerId);
                }
            });
        });

        function posHandleCart(response) {
            if (response.result === true) {
                $('#pos-cart-wrapper').html(response.html);
                if ($('.aiz-selectpicker').length) {
                    $('.aiz-selectpicker').selectpicker('refresh');
                }

                // Restore selected customer BEFORE rebinding events (if one was selected)
                if (selectedCustomerId) {
                    // Use selectpicker's val method to set the value
                    $('#pos-customer').selectpicker('val', selectedCustomerId);
                }

                // Reinitialize customer dropdown event after cart refresh
                $('#pos-customer').off('changed.bs.select change').on('changed.bs.select change', function() {
                    const newCustomerId = $(this).val();
                    if (newCustomerId && newCustomerId !== selectedCustomerId) {
                        posUpdateCustomer(newCustomerId);
                    }
                });

                // Reinitialize lens selection after cart refresh
                initializeLensSelection();

                // Restore prescription notes from localStorage after cart refresh
                const savedNotes = localStorage.getItem('pos_prescription_notes');
                if (savedNotes && $('#pos-prescription-notes').length) {
                    $('#pos-prescription-notes').val(savedNotes);
                }

                // Restore prescription file label and preview if file is held
                if (prescriptionFileHolder && $('#pos-prescription-image').length) {
                    const label = $('#pos-prescription-image').siblings('.custom-file-label');
                    label.text(prescriptionFileHolder.name);

                    // Restore preview
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $('#prescription-preview').html(
                            '<img src="' + e.target.result +
                            '" class="img-thumbnail mt-2" style="max-width: 200px; max-height: 200px;">'
                        );
                    };
                    reader.readAsDataURL(prescriptionFileHolder);
                }

                if (response.message) {
                    AIZ.plugins.notify('success', response.message);
                }
            } else if (response.result === false) {
                AIZ.plugins.notify('danger', response.message || "{{ translate('Something went wrong') }}");
            }
        }

        function renderSuggestions(list) {
            const dl = $('#pos-suggestions');
            dl.empty();
            list.forEach(name => dl.append(`<option value="${name}">`));
        }

        let posSearchTimer = null;
        $(document).on('keyup', '#pos-search', function(e) {
            // Prevent Enter key from doing anything unintended
            if (e.which === 13) {
                e.preventDefault();
                return false;
            }
            clearTimeout(posSearchTimer);
            posSearchTimer = setTimeout(posSearch, 250);
        });

        // Prevent Enter key in search from submitting anything
        $(document).on('keypress', '#pos-search', function(e) {
            if (e.which === 13) {
                e.preventDefault();
                posSearch(); // Just trigger search
                return false;
            }
        });

        $(document).on('change', '#pos-shipping', function() {
            posUpdateShipping($(this).val());
        });

        $(document).on('change', '#pos-discount', function() {
            posUpdateDiscount($(this).val());
        });

        $(document).on('change', '#pos-discount-type', function() {
            posUpdateDiscount($('#pos-discount').val());
        });

        // Prevent Enter key from submitting/clearing cart in discount input
        $(document).on('keypress', '#pos-discount', function(e) {
            if (e.which === 13) {
                e.preventDefault();
                $(this).blur(); // Trigger change event
            }
        });

        // Save prescription notes to localStorage on any change
        $(document).on('input', '#pos-prescription-notes', function() {
            localStorage.setItem('pos_prescription_notes', $(this).val());
        });

        $(document).on('click', '.pos-place-order', function() {
            posPlaceOrder();
        });

        function addNewCustomer() {
            const form = $('#newCustomerForm');
            const formData = {
                _token: csrfToken,
                name: form.find('[name="name"]').val(),
                email: form.find('[name="email"]').val(),
                phone: form.find('[name="phone"]').val(),
            };

            posLoader.show();
            $.post(posUrls.addCustomer, formData, function(response) {
                if (response.result) {
                    AIZ.plugins.notify('success', response.message ||
                        "{{ translate('Customer added successfully') }}");
                    $('#new-customer-modal').modal('hide');
                    form[0].reset();

                    // Update customer and select the newly created customer
                    if (response.customer) {
                        posUpdateCustomer(response.customer.id);
                    }
                } else {
                    AIZ.plugins.notify('danger', response.message || "{{ translate('Failed to add customer') }}");
                }
            }).fail(function(xhr) {
                const errors = xhr.responseJSON?.errors;
                if (errors) {
                    let errorMsg = '';
                    Object.values(errors).forEach(err => {
                        errorMsg += err[0] + '<br>';
                    });
                    AIZ.plugins.notify('danger', errorMsg);
                } else {
                    AIZ.plugins.notify('danger', xhr.responseJSON?.message ||
                        "{{ translate('Failed to add customer') }}");
                }
            }).always(posLoader.hide);
        }

        document.addEventListener("DOMContentLoaded", function() {
            document.body.classList.add("side-menu-closed");
        });

        // Handle prescription image upload preview
        $(document).on('change', '#pos-prescription-image', function(e) {
            const file = e.target.files[0];
            const label = $(this).siblings('.custom-file-label');

            if (file) {
                // Store file in global variable to preserve across cart refreshes
                prescriptionFileHolder = file;

                label.text(file.name);

                // Show image preview
                const reader = new FileReader();
                reader.onload = function(e) {
                    $('#prescription-preview').html(
                        '<img src="' + e.target.result +
                        '" class="img-thumbnail mt-2" style="max-width: 200px; max-height: 200px;">'
                    );
                };
                reader.readAsDataURL(file);
            } else {
                prescriptionFileHolder = null;
                label.text("{{ translate('Choose file') }}");
                $('#prescription-preview').html('');
            }
        });

        $(document).ready(function() {
            $(document).on('change', '.pos-variant-select', function() {
                var selectedOption = $(this).find('option:selected');
                var price = selectedOption.data('price');
                var productId = $(this).attr('id').replace('pos-variant-', '');
                var price_span = $('#pos-price-' + productId);

                if (price) {
                    if (price_span.data('original-price') === undefined) {
                        price_span.data('original-price', price_span.text());
                    }

                    price_span.text(price);
                } else {
                    price_span.text(price_span.data('original-price'));
                }
            });
        });
    </script>
    <style>
        .pos-product-card {
            padding: 1rem;
            /* Card ke andar space barha di hai */
            border: 1px solid #e5e5e5;
        }

        .pos-product-thumb-wrapper {
            position: relative;
            border-radius: 0.5rem;
            overflow: hidden;
        }

        .pos-stock-badge {
            position: absolute;
            top: 8px;
            right: 8px;
            font-size: 10px;
            padding: 3px 8px;
            color: #fff;
            border-radius: 4px;
            font-weight: 600;
        }

        .pos-product-card .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: -webkit-fill-available;
        }

        .pos-product-card .btn .las {
            font-size: 16px;
        }

        .pos-product-card {
            border: 1px solid #edf1f7;
            border-radius: 10px;
            padding: 10px;
            background: #fff;
            box-shadow: 0 6px 14px rgba(35, 39, 52, 0.04);
            transition: transform .15s ease, box-shadow .15s ease;
        }

        .pos-product-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 18px rgba(35, 39, 52, 0.08);
        }

        .pos-product-thumb {
            width: 100%;
            padding-top: 65%;
            border-radius: 8px;
            background-size: cover;
            background-position: center;
            background-color: #f6f8fb;
        }

        .pos-cart-card {
            border-radius: 12px;
        }

        .pos-loader {
            position: fixed;
            inset: 0;
            background: rgba(255, 255, 255, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            opacity: 0;
            pointer-events: none;
            transition: opacity .15s ease;
        }

        .pos-loader.show {
            opacity: 1;
            pointer-events: auto;
        }

        .pos-cart-items {
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
            padding-top: 1rem;
            margin-bottom: 1rem;
        }

        .pos-payment-actions .btn-lg {
            padding: 0.75rem 1.25rem;
            font-size: 1rem;
        }
    </style>
@endsection