@extends('layouts.app')
@section('title', __('lang_v1.featured_products'))

@section('css')
<style>
    .scan-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        background-color: #28a745;
        color: #fff;
        font-weight: 600;
        font-size: 14px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
    }

    .scan-btn:hover {
        background-color: #218838;
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0,0,0,0.15);
    }

    .scan-btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 3px rgba(0,0,0,0.2);
    }

    .scan-btn i {
        font-size: 16px;
    }

    .custom-swal {
        display: none;
        position: fixed;
        z-index: 9999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.6);
        justify-content: center;
        align-items: center;
    }

    .custom-swal.show {
        display: flex;
    }

    .custom-swal-content {
        background: #fff;
        border-radius: 10px;
        width: 90%;
        max-width: 400px;
        padding: 20px;
        box-sizing: border-box;
        text-align: center;
        position: relative;
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        margin: auto;
    }

    @media (max-width: 768px) {
        .custom-swal-content {
            width: 95%;
            max-width: 350px;
            padding: 15px;
        }
    }

    .custom-swal-title {
        margin: 0 0 10px 0;
        font-size: 18px;
        color: #333;
    }

    .scan-line {
        position: absolute;
        top: 50%;
        left: 10%;
        width: 80%;
        height: 2px;
        background: rgba(255,0,0,0.8);
        animation: scanLine 0.8s infinite;
    }

    .custom-swal-cancel {
        margin-top: 15px;
        background: #d33;
        color: #fff;
        border: none;
        border-radius: 5px;
        padding: 8px 15px;
        cursor: pointer;
        font-size: 14px;
    }

    @keyframes scanLine {
        0% { transform: translateY(-50%); }
        50% { transform: translateY(50%); }
        100% { transform: translateY(-50%); }
    }
</style>
@endsection

@section('content')

    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">@lang('lang_v1.featured_products')
            <small class="tw-text-sm md:tw-text-base tw-text-gray-700 tw-font-semibold">{{ $location->name }}</small>
        </h1>
    </section>

    <!-- Main content -->
    <section class="content">
        @component('components.widget', ['class' => 'box-primary', 'title' => __('lang_v1.featured_products_for_location')])
            <div class="row">
                <div class="col-sm-8 col-sm-offset-2">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">
                                <i class="fa fa-search"></i>
                            </span>
                            {!! Form::text('search_product', null, [
                                'class' => 'form-control',
                                'id' => 'search_featured_product',
                                'placeholder' => __('stock_adjustment.search_products'),
                            ]) !!}
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-default bg-white btn-flat" id="scan_barcode_btn" title="مسح الباركود">
                                    <i class="fas fa-barcode text-primary fa-lg"></i>
                                </button>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-bordered table-striped" id="featured_products_table">
                    <thead>
                        <tr>
                            <th>@lang('lang_v1.image')</th>
                            <th>@lang('lang_v1.name')</th>
                            <th>@lang('lang_v1.sku')</th>
                            <th>@lang('product.category')</th>
                            <th>@lang('product.sub_category')</th>
                            <th>@lang('lang_v1.brand')</th>
                            <th>@lang('messages.action')</th>
                        </tr>
                    </thead>
                </table>
            </div>
        @endcomponent
    </section>
    <!-- /.content -->

    <!-- Barcode Scanner Modal -->
    <div id="barcodeModal" class="custom-swal">
        <div class="custom-swal-content">
            <h3 class="custom-swal-title">@lang('lang_v1.featured_products')</h3>
            <video id="video" autoplay muted playsinline style="width:100%; height:160px; object-fit:cover; border-radius:5px;"></video>
            <div class="scan-line"></div>
            <button class="custom-swal-cancel">@lang('messages.cancel')</button>
        </div>
    </div>

@endsection

@section('javascript')
<script src="https://unpkg.com/@zxing/library@latest"></script>
<script>
    // Store products data for autocomplete
    var productsData = @json($products);
    var productSkusData = @json($product_skus);
    var productsArray = [];
    
    $.each(productsData, function(id, name) {
        var sku = productSkusData[id] || '';
        productsArray.push({
            id: id,
            label: name + (sku ? ' (' + sku + ')' : ''),
            value: name,
            sku: sku,
            name: name
        });
    });

    let codeReader;
    let stream;
    const modal = document.getElementById("barcodeModal");
    const video = document.getElementById("video");
    const cancelBtn = modal.querySelector(".custom-swal-cancel");

    $(document).ready(function() {
        var location_id = {{ $location->id }};

        // Initialize DataTable
        var table = $('#featured_products_table').DataTable({
            processing: true,
            serverSide: true,
            bPaginate: true,
            pageLength: 10,
            fixedHeader: false,
            dom: 'tp',
            bFilter: false,
            bInfo: false,
            ajax: '/business-location/' + location_id + '/featured-products',
            columns: [
                { data: 'image', name: 'image' },
                { data: 'name', name: 'name' },
                { data: 'sku', name: 'sku' },
                { data: 'category', name: 'category' },
                { data: 'subcategory', name: 'subcategory' },
                { data: 'brand', name: 'brand' },
                { data: 'action', name: 'action' }
            ],
            columnDefs: [{
                targets: 6,
                orderable: false,
                searchable: false,
            }],
        });

        // Initialize autocomplete for product search - support both product name and SKU
        $('#search_featured_product').autocomplete({
            source: function(request, response) {
                var term = request.term.toLowerCase();
                var results = [];
                
                $.each(productsArray, function(i, item) {
                    // Search in both name and SKU
                    if (item.name.toLowerCase().indexOf(term) !== -1 || 
                        item.sku.toLowerCase().indexOf(term) !== -1) {
                        results.push(item);
                    }
                });
                
                response(results.slice(0, 10)); // Limit to 10 results
            },
            select: function(event, ui) {
                addProductToFeatured(ui.item.id, location_id, table);
                $('#search_featured_product').val('').focus();
                return false;
            },
            focus: function(event, ui) {
                $('#search_featured_product').val(ui.item.name);
                return false;
            }
        }).on('keypress', function(e) {
            // Handle Enter key
            if (e.which === 13) {
                e.preventDefault();
                var searchTerm = $(this).val().toLowerCase().trim();
                
                if (!searchTerm) {
                    return false;
                }

                // Search for exact SKU match or by name
                var foundProduct = null;
                $.each(productsArray, function(i, item) {
                    if (item.sku.toLowerCase() === searchTerm || 
                        item.name.toLowerCase() === searchTerm ||
                        item.name.toLowerCase().indexOf(searchTerm) !== -1 ||
                        item.sku.toLowerCase().indexOf(searchTerm) !== -1) {
                        foundProduct = item;
                        return false;
                    }
                });

                if (foundProduct) {
                    addProductToFeatured(foundProduct.id, location_id, table);
                    $(this).val('').focus();
                } else {
                    toastr.error("@lang('lang_v1.product_not_found_exception')");
                    $(this).val('').focus();
                }
                
                return false;
            }
        }).on('input', function() {
            // Auto-add product when exact SKU match is found
            var searchTerm = $(this).val().toLowerCase().trim();
            
            if (!searchTerm) {
                return;
            }

            // Search for exact SKU match only
            var foundProduct = null;
            $.each(productsArray, function(i, item) {
                if (item.sku.toLowerCase() === searchTerm) {
                    foundProduct = item;
                    return false;
                }
            });

            // Auto-add if exact SKU match found
            if (foundProduct) {
                addProductToFeatured(foundProduct.id, location_id, table);
                $(this).val('').focus();
            }
        });

        // Barcode scanner
        $('#scan_barcode_btn').on('click', async function() {
            modal.classList.add('show');
            codeReader = new ZXing.BrowserBarcodeReader();

            try {
                stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } });
                video.srcObject = stream;
                await video.play();

                const result = await codeReader.decodeOnceFromVideoDevice(undefined, video);

                // Search for product by barcode/SKU
                var foundProduct = false;
                $.each(productsArray, function(i, item) {
                    if (item.sku === result.text) {
                        addProductToFeatured(item.id, location_id, table);
                        foundProduct = true;
                        return false;
                    }
                });

                if (!foundProduct) {
                    toastr.error("@lang('lang_v1.product_not_found_exception')");
                }

                // Stop scanner and close modal
                if(stream) stream.getTracks().forEach(track=>track.stop());
                if(codeReader) codeReader.reset();
                modal.classList.remove('show');

            } catch(err) {
                console.error(err);
                toastr.error("@lang('messages.something_went_wrong')");
                modal.classList.remove('show');
                if(stream) stream.getTracks().forEach(track=>track.stop());
                if(codeReader) codeReader.reset();
            }
        });

        // Cancel button closes modal and stops camera
        cancelBtn.onclick = () => {
            if(stream) stream.getTracks().forEach(track=>track.stop());
            if(codeReader) codeReader.reset();
            modal.classList.remove('show');
        };

        // Click outside content closes modal
        window.onclick = (event) => {
            if(event.target === modal){
                if(stream) stream.getTracks().forEach(track=>track.stop());
                if(codeReader) codeReader.reset();
                modal.classList.remove('show');
            }
        };

        // Remove featured product
        $(document).on('click', '.remove-featured-product', function() {
            if (!confirm("@lang('messages.are_you_sure')")) {
                return false;
            }

            var location_id = $(this).data('location-id');
            var product_id = $(this).data('product-id');
            var btn = $(this);

            $.ajax({
                url: '/business-location/' + location_id + '/remove-featured-product/' + product_id,
                method: 'POST',
                dataType: 'json',
                beforeSend: function(xhr) {
                    __disable_submit_button(btn);
                },
                success: function(result) {
                    if (result.success) {
                        toastr.success(result.msg);
                        table.ajax.reload();
                    } else {
                        toastr.error(result.msg);
                    }
                },
                error: function(xhr) {
                    toastr.error("@lang('messages.something_went_wrong')");
                }
            });
        });
    });

    // Function to add product to featured products
    function addProductToFeatured(productId, locationId, table) {
        $.ajax({
            url: '/business-location/' + locationId + '/add-featured-product',
            method: 'POST',
            dataType: 'json',
            data: {
                product_id: productId
            },
            success: function(result) {
                if (result.success) {
                    toastr.success(result.msg);
                    // Reload the table immediately
                    if (table && table.ajax) {
                        table.ajax.reload(null, false); // false = keep current page position
                    }
                } else {
                    toastr.warning(result.msg);
                }
            },
            error: function(xhr) {
                var errorMsg = "@lang('messages.something_went_wrong')";
                if (xhr.responseJSON && xhr.responseJSON.msg) {
                    errorMsg = xhr.responseJSON.msg;
                }
                toastr.error(errorMsg);
            }
        });
    }
</script>
@endsection