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

@section('content')

    <!-- Main content -->
    <section class="content min-height-80hv no-print">

        <div class="row">
            <div class="col-md-12 text-center">
                <h3>@lang('lang_v1.search_product') </h3>
            </div>

        </div>
        <br>

        <div class="box box-solid">
            <div class="box-body">
                <br><br><br>
                <input type="hidden" name="sub_type" value="">
                <div class="row">

                    <div class="col-sm-8 col-sm-offset-2">
                        <div class="form-group">
                            {!! Form::label('term', __('product.sku') . ':*') !!}
                            {!! Form::text('term', null, ['class' => 'form-control ', 'id' => 'term', 'placeholder' => __('product.sku')]) !!}
                        </div>
                    </div>



                </div>
                <br><br><br>
                <div id="product_display_area" class="text-center" style="margin-top: 40px;">
                    <!-- Product details will be injected here -->
                </div>
            </div>
        </div>

    </section>
    <!-- /.content -->


@endsection

@section('javascript')
    <script type="text/javascript">
        $(document).ready(function() {
            if ($('#term').length > 0) {
                $('#term').autocomplete({
                    source: function(request, response) {
                        $.getJSON('/products/sku', {
                            term: request.term
                        }, response);
                    },
                    minLength: 1,
                    response: function(event, ui) {
                        if (ui.content.length === 1) {
                            ui.item = ui.content[0];
                            $(this).data('ui-autocomplete')._trigger('select', 'autocompleteselect',
                                ui);
                            $(this).autocomplete('close');
                        } else if (ui.content.length === 0) {
                            $('#product_display_area').html(
                                '<div class="alert alert-warning">@lang('lang_v1.no_data')</div>'
                            );
                        }
                    },
                    focus: function(event, ui) {
                        return false;
                    },
                    select: function(event, ui) {
                        $(this).val('');
                        showProductInfo(ui.item);
                    }
                }).autocomplete('instance')._renderItem = function(ul, item) {
                    let html = '<div>';
                    html += `<strong>${item.name}</strong>`;
                    if (item.variation && item.variation !== 'DUMMY') {
                        html += ` - ${item.variation}`;
                    }
                    html += ` (${item.sub_sku})`;
                    html += '</div>';
                    return $('<li>').append(html).appendTo(ul);
                };

                // Retrigger search on input change
                $('#term').on('change', function() {
                    let val = $(this).val();
                    if (val.length >= 1) {
                        $(this).autocomplete('search', val);
                    } else {
                        $('#product_display_area').empty();
                    }
                });
            }

            function showProductInfo(product) {
                let html = `
                <div class="panel panel-default" style="max-width: 400px; margin: 0 auto; text-align:center;">
                    <div class="panel-body">
                        <img id="product-image" src="${product.image_url || '/img/default.png'}" alt="${product.name}" class="img-responsive center-block" style="max-height: 200px; cursor:pointer;" />
                        <h3 class="mt-3">${product.label}</h3>
                        <h4 class="text-success">@lang('lang_v1.selling_price'): ${__currency_trans_from_en(product.sell_price_inc_tax, true)}</h4>
                    </div>
                </div>

                <!-- Modal -->
                <div id="image-modal" style="
                    display: none;
                    position: fixed;
                    z-index: 1000;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0,0,0,0.8);
                    text-align: center;
                ">
                    <span id="image-modal-close" style="
                        position: absolute;
                        top: 20px;
                        right: 35px;
                        color: #fff;
                        font-size: 40px;
                        cursor: pointer;
                        user-select: none;
                    ">&times;</span>
                    <img id="modal-img" src="${product.image_url || '/img/default.png'}" style="
                        max-width: 90%;
                        max-height: 90vh;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    " alt="Product Image" />
                </div>
                `;

                $('#product_display_area').html(html);

                $('#product-image').on('click', function() {
                    $('#image-modal').fadeIn(400);
                    $('body').addClass('modal-open'); // Optionally add class to fix scroll
                });

                $('#image-modal-close').on('click', function() {
                    $('#image-modal').fadeOut(400);
                    $('body').removeClass('modal-open');
                });

                $('#image-modal').on('click', function(e) {
                    if (e.target.id === 'image-modal') {
                        $('#image-modal').fadeOut(400);
                        $('body').removeClass('modal-open');
                    }
                });
            }

        });
    </script>
@endsection
<style>
    #image-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.8);
  
  /* Use flexbox to center content */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

body.modal-open {
  overflow-y: scroll; /* keep scrollbar visible to avoid layout shift */
}
</style>