@extends('layouts.app')
@section('title', __('sync::lang.sync'))

@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">

        <h3>@lang('sync::lang.create_new_sync')</h3>
    </section>

    <!-- Main content -->
    <section class="content">
        <form method="post" action="{{ url('sync/create') }}">
            @csrf
            @component('components.widget', ['class' => 'box-solid'])
                <div class="row">
                    <div class="col-md-6 ">
                        <div class="form-group">
                            {!! Form::label('sync_type', __('sync::lang.sync_type')) !!}
                            {!! Form::select(
                                'sync_type',
                                [
                                    'all_products' => __('sync::lang.all_products'),
                                    'specific_product' => __('sync::lang.specific_product'),
                                    'brand' => __('product.brand'),
                                    'category' => __('product.category'),
                                ],
                                null,
                                [
                                    'class' => 'form-control',
                                    'id' => 'sync_type',
                                ],
                            ) !!}
                        </div>
                    </div>
                    <div class="col-md-6 field-brand" style="display:none;">
                        <div class="form-group">
                            {!! Form::label('brand_id', __('product.brand') . ': (' . __('lang_v1.optional') . ')') !!}
                            {!! Form::select('brand_id', $brands, null, [
                                'placeholder' => __('messages.please_select'),
                                'class' => 'form-control select2',
                                'style' => 'width:100%;',
                            ]) !!}
                        </div>
                    </div>
                  

                         <!-- حقل مخفي لتخزين IDs المنتجات المحددة (client-only, لا تُرسل كـ product_ids[] لتجنب العنصر 0) -->
                         <input type="hidden" id="selected_product_ids" value="">
                        <div class="row field-specific-product" style="display:none;">
                            <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_product_for_srock_adjustment',
                                            'placeholder' => __('stock_adjustment.search_product')
                                        ]) !!}
                                        <span class="input-group-btn">
                                            <button type="button" class="btn btn-default" id="open_product_modal" title="@lang('sync::lang.open_product_modal')">
                                                <i class="fa fa-th-large"></i>
                                            </button>
                                        </span>

                                    </div>
                                </div>
                            </div>
                          
                        </div>
                        <div class="row field-specific-product" style="display:none;">
                            <div class="col-sm-10 col-sm-offset-1">
                                <input type="hidden" id="product_row_index" value="0">
                                <div class="table-responsive">
                                    <table class="table table-bordered table-striped table-condensed" id="sync_product_table">
                                        <thead>
                                            <tr>
                                                <th class="col-sm-4 text-center">
                                                    @lang('sale.product')
                                                </th>
                                                <th class="col-sm-2 text-center">
                                                    @lang('lang_v1.sku')
                                                </th>
                                               
                                                <th class="col-sm-2 text-center show_price_with_permission">
                                                    @lang('lang_v1.image')
                                                </th>
                                                <th class="col-sm-2 text-center"><i class="fa fa-trash" aria-hidden="true"></i></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                
                    <div class="col-md-6 field-category" style="display:none;">
                        <div class="form-group">
                            {!! Form::label('category_id', __('product.category') . ': (' . __('lang_v1.optional') . ')') !!}
                            {!! Form::select('category_id', $categories, null, [
                                'placeholder' => __('messages.please_select'),
                                'class' => 'form-control select2',
                                'style' => 'width:100%;',
                            ]) !!}
                        </div>
                    </div>


                </div>




                </div>
            @endcomponent
            </br>
            </br>
            <div class="row mt-4">
                <div class="col-sm-12 text-center">
                    <button type="submit"
                        class="tw-dw-btn tw-dw-btn-primary tw-dw-btn-lg tw-text-white">@lang('messages.save')</button>
                </div>
            </div>
        </form>
    </section>
    <!-- /.content -->

    <!-- Products selection modal -->
    <div class="modal fade" id="product_modal" tabindex="-1" role="dialog" aria-labelledby="productModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <style>
                    /* Modal improvements */
                    .sync-modal .filters { padding: 12px; border-right: 1px solid #f0f0f0; }
                    .sync-modal .product-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; max-height:520px; overflow:auto; padding:10px; }
                    .sync-modal .product-card { background:#fff; border:1px solid #e6e6e6; border-radius:6px; padding:8px; text-align:center; cursor:pointer; position:relative; height:150px; display:flex; flex-direction:column; justify-content:flex-start; }
                    .sync-modal .product-card img { width:80px; height:80px; object-fit:cover; margin:0 auto 6px; border-radius:4px; }
                    .sync-modal .product-card .p-name { font-size:13px; line-height:1.1; height:30px; overflow:hidden; text-overflow:ellipsis; }
                    .sync-modal .product-card .p-sku { font-size:11px; color:#888; }
                    .sync-modal .product-card.added { box-shadow:0 0 0 2px rgba(40,167,69,0.12); }
                    .sync-modal .badge-added { position:absolute; top:6px; right:6px; background:#28a745; color:#fff; padding:2px 6px; font-size:11px; border-radius:12px; display:none; }
                    .sync-modal .product-card.added .badge-added { display:block; }
                    .sync-modal .filters .btn-small { padding:6px 8px; font-size:13px; }
                </style>
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="productModalLabel">@lang('sync::lang.select_products')</h4>
                </div>
                <div class="modal-body sync-modal">
                    <div id="modal_filter_hint_wrap" style="margin-left:8px; align-self:center; display:none;"><small id="modal_filter_hint" class="text-muted">@lang('sync::lang.choose_filter_type_first')</small></div>
                    <div class="filters row" style="margin-bottom:10px;">
                        <div class="col-md-12 d-flex flex-wrap align-items-center" style="gap:8px;">
                            <div class="form-group" style="margin:0 8px 8px 0;">
                                {!! Form::label('modal_filter_type', __('sync::lang.filter_by'), ['style' => 'display:block; font-weight:600; font-size:12px;']) !!}
                                {!! Form::select('modal_filter_type', ['none' => __('messages.none'), 'brand' => __('product.brand'), 'category' => __('product.category')], 'none', ['class' => 'form-control', 'id' => 'modal_filter_type']) !!}
                            </div>

                            <div class="form-group" id="modal_brand_wrap" style="margin:0 8px 8px 0;">
                                {!! Form::label('modal_brand_filter', __('product.brand'), ['style' => 'display:block; font-weight:600; font-size:12px;']) !!}
                                {!! Form::select('modal_brand_filter', $brands, null, ['class' => 'form-control select2', 'id' => 'modal_brand_filter', 'style' => 'min-width:180px;']) !!}
                            </div>

                            <div class="form-group" id="modal_category_wrap" style="margin:0 8px 8px 0;">
                                {!! Form::label('modal_category_filter', __('product.category'), ['style' => 'display:block; font-weight:600; font-size:12px;']) !!}
                                {!! Form::select('modal_category_filter', $categories, null, ['class' => 'form-control select2', 'id' => 'modal_category_filter', 'style' => 'min-width:180px;']) !!}
                            </div>

                            <div class="form-group" style="flex:1; min-width:200px; margin:0 8px 8px 0;">
                                {!! Form::label('', __('lang_v1.search'), ['style' => 'display:block; font-weight:600; font-size:12px;']) !!}
                                <input type="text" id="modal_search_products" class="form-control" placeholder="@lang('lang_v1.search_product')">
                            </div>

                            <div class="form-group" style="margin:0 8px 8px 0; display:flex; gap:6px; align-items:flex-end;">
                                <button type="button" class="btn btn-default btn-small" id="select_all_brand" style="display:none;">@lang('sync::lang.select_all_from_brand')</button>
                                <button type="button" class="btn btn-default btn-small" id="select_all_category" style="display:none;">@lang('sync::lang.select_all_from_category')</button>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="product-list" aria-live="polite"></div>
                            <div class="text-center" id="modal_loading" style="display:none; margin-top:10px;">@lang('messages.loading')</div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">@lang('messages.close')</button>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('javascript')

    <script>
        $(document).ready(function() {
            // base URLs for images (used when API returns filename instead of full URL)
            var productImageBase = "{{ asset('uploads/img') }}";
            var defaultProductImage = "{{ asset('img/default.png') }}";
            let with_no_variation = false;
            let selectedProductIds = [];
            if (window.transfer) {
                with_no_variation = true;
            }

            function updateSelectedProductIds() {
                $('#selected_product_ids').val(selectedProductIds.join(','));
            }

            // --- Autocomplete existing behaviour ---
            if ($('#search_product_for_srock_adjustment').length > 0) {
                $('#search_product_for_srock_adjustment')
                    .autocomplete({
                        source: function(request, response) {
                            $.getJSON('/sync/products/search', { q: request.term }, function(data) {
                                var products = data.products.map(function(product) {
                                    return {
                                        id: product.id,
                                        name: product.name,
                                        sku: product.sku,
                                        // prefer image_url (appended attribute), fallback to image filename
                                        image_url: product.image_url || product.image,
                                        text: product.name,
                                        variation_id: product.id,
                                        product_id: product.id,
                                        sub_sku: product.sku,
                                        type: 'single',
                                        // keep raw image filename for fallback construction
                                        _image_filename: product.image
                                    };
                                });
                                response(products);
                            });
                        },
                        minLength: 2,
                        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) {
                                swal(LANG.no_products_found || 'No products found');
                            }
                        },
                        focus: function() { return true; },
                        select: function(event, ui) {
                            $(this).val(null);
                            sync_product_row(ui.item.variation_id, ui.item.product_id, ui.item.sku);
                            return false;
                        }
                    })
                    .autocomplete('instance')._renderItem = function(ul, item) {
                        var string = '<div>';
                            var itemImageUrl = item.image_url;
                            if (!itemImageUrl && item._image_filename) {
                                itemImageUrl = productImageBase + '/' + encodeURIComponent(item._image_filename);
                            }
                            if (!itemImageUrl) {
                                itemImageUrl = defaultProductImage;
                            }
                            if (itemImageUrl) {
                                string += '<img src="' + itemImageUrl + '" style="width:30px; height:30px; margin-right:10px;">';
                            }
                        string += item.name;
                        string += '</div>';
                        return $('<li>').append(string).appendTo(ul);
                    };
            }

            // --- Sync product row add (existing endpoint) ---
            function sync_product_row(variation_id, product_id = null, matched_sku = null) {
                // prevent duplicates
                if (product_id && selectedProductIds.includes(product_id)) {
                    return;
                }

                var row_index = parseInt($('#product_row_index').val());

                $.ajax({
                    method: 'POST',
                    url: '/sync/get_product_row',
                    data: {
                        row_index: row_index,
                        variation_id: variation_id,
                        product_id: product_id,
                        matched_sku: matched_sku
                    },
                    dataType: 'html',
                    success: function(result) {
                        $('table#sync_product_table tbody').prepend(result);

                        if (product_id && !selectedProductIds.includes(product_id)) {
                            selectedProductIds.push(product_id);
                            updateSelectedProductIds();
                        }

                        var addedRows = $(result).filter('tr').length;
                        $('#product_row_index').val(row_index + addedRows);

                        // mark product tile in modal if present
                        $('#product_modal').find('[data-product-id="' + product_id + '"]').addClass('added');
                    },
                    error: function(xhr) {
                        alert('حدث خطأ أثناء إضافة المنتج');
                        console.error(xhr);
                    }
                });
            }

            // delegated remove handler so it always works
            $('table#sync_product_table').on('click', '.remove-product', function() {
                var row = $(this).closest('tr');
                var removedProductId = row.find('input[name="product_ids[]"]').val();
                if (removedProductId) {
                    var idx = selectedProductIds.indexOf(parseInt(removedProductId));
                    if (idx > -1) {
                        selectedProductIds.splice(idx, 1);
                        updateSelectedProductIds();
                    }
                    $('#product_modal').find('[data-product-id="' + removedProductId + '"]').removeClass('added');
                }
                row.remove();
            });

            // Toggle fields
            function toggleSyncFields() {
                var type = $('#sync_type').val();
                $('.field-specific-product').hide();
                $('.field-brand').hide();
                $('.field-category').hide();
                $('.field-sub-category').hide();

                if (type === 'specific_product') {
                    $('.field-specific-product').show();
                } else if (type === 'brand') {
                    $('.field-brand').show();
                } else if (type === 'category') {
                    $('.field-category').show();
                } else if (type === 'sub_category') {
                    $('.field-sub-category').show();
                }
            }

            toggleSyncFields();

            // Confirmation when changing type if products exist
            $('#sync_type').on('change', function() {
                var newType = $(this).val();
                if (selectedProductIds.length > 0 && newType !== 'specific_product') {
                    swal({
                        title: '@lang("sync::lang.confirm_change_sync_type")',
                        text: '@lang("sync::lang.products_will_be_removed_when_change_type")',
                        icon: 'warning',
                        buttons: true,
                        dangerMode: true,
                    }).then(function(willChange) {
                        if (willChange) {
                            // clear selections and table
                            selectedProductIds = [];
                            updateSelectedProductIds();
                            $('table#sync_product_table tbody').empty();
                            $('#product_row_index').val(0);
                            toggleSyncFields();
                        } else {
                            $('#sync_type').val('specific_product');
                            toggleSyncFields();
                        }
                    });
                } else {
                    toggleSyncFields();
                }
            });

            // --- Modal product loading / filtering / selection ---
            var modalPage = 1;
            var modalLoading = false;
            var modalLastQuery = '';
            var modalFilterType = 'none'; // 'none' | 'brand' | 'category'

            function updateModalFilterUI() {
                if (modalFilterType === 'brand') {
                    $('#modal_filter_hint_wrap').hide();
                    $('#modal_brand_filter').closest('.form-group').show();
                    $('#modal_category_filter').closest('.form-group').hide();
                    $('#modal_brand_filter').prop('disabled', false).trigger('change.select2');
                    $('#modal_category_filter').prop('disabled', true);
                    $('#select_all_brand').show();
                    $('#select_all_category').hide();
                } else if (modalFilterType === 'category') {
                    $('#modal_filter_hint_wrap').hide();
                    $('#modal_brand_filter').closest('.form-group').hide();
                    $('#modal_category_filter').closest('.form-group').show();
                    $('#modal_brand_filter').prop('disabled', true);
                    $('#modal_category_filter').prop('disabled', false).trigger('change.select2');
                    $('#select_all_brand').hide();
                    $('#select_all_category').show();
                } else {
                    // none: hide selects and show hint
                    $('#modal_filter_hint_wrap').show();
                    $('#modal_brand_filter').closest('.form-group').hide();
                    $('#modal_category_filter').closest('.form-group').hide();
                    $('#modal_brand_filter').prop('disabled', true);
                    $('#modal_category_filter').prop('disabled', true);
                    $('#select_all_brand').hide();
                    $('#select_all_category').hide();
                }
            }

            // when modal filter select changes
            $(document).on('change', '#modal_filter_type', function() {
                modalFilterType = $(this).val();
                updateModalFilterUI();
                loadProductsInModal(true);
            });

            function renderProductsInModal(products, append = false) {
                var $list = $('#product_modal .product-list');
                if (!append) {
                    $list.empty();
                }
                products.forEach(function(p) {
                    var addedClass = selectedProductIds.includes(p.id) ? 'added' : '';
                    // resolve image URL: prefer returned image_url, otherwise build from filename
                    var imageUrl = p.image_url;
                    if (!imageUrl && p._image_filename) {
                        imageUrl = productImageBase + '/' + encodeURIComponent(p._image_filename);
                    }
                    if (!imageUrl) {
                        imageUrl = defaultProductImage;
                    }
                    var $card = $(
                        '<div class="product-card ' + addedClass + '" data-product-id="' + p.id + '">' +
                            '<span class="badge-added">@lang("sync::lang.product_selected")</span>' +
                            '<img src="' + imageUrl + '" alt="' + (p.name || '') + '">' +
                            '<div class="p-name">' + (p.name || '') + '</div>' +
                            '<div class="p-sku">' + (p.sku || '') + '</div>' +
                        '</div>'
                    );
                    $list.append($card);
                });
            }

            function loadProductsInModal(reset = true) {
                if (modalLoading) return;
                if (reset) {
                    modalPage = 1;
                }
                modalLoading = true;
                $('#modal_loading').show();

                var q = $('#modal_search_products').val();
                var brand = null;
                var category = null;
                if (modalFilterType === 'brand') {
                    brand = $('#modal_brand_filter').val();
                } else if (modalFilterType === 'category') {
                    category = $('#modal_category_filter').val();
                }

                var params = { q: q, page: modalPage };
                if (brand) params.brand_id = brand;
                if (category) params.category_id = category;

                $.getJSON('/sync/products/search', params, function(data) {
                    renderProductsInModal(data.products, !reset);
                    modalLoading = false;
                    $('#modal_loading').hide();
                    if (data.products && data.products.length) {
                        modalPage++;
                    }
                    // show select-all buttons when filter applied
                    // buttons visibility handled by modalFilterType
                    updateModalFilterUI();
                }).fail(function() {
                    modalLoading = false;
                    $('#modal_loading').hide();
                });
            }

            // open modal
            $('#open_product_modal').on('click', function() {
                $('#product_modal').modal('show');
                // reset filters
                $('#modal_search_products').val('');
                $('#modal_brand_filter').val(null).trigger('change');
                $('#modal_category_filter').val(null).trigger('change');
                $('#modal_filter_type').val('none');
                modalFilterType = 'none';
                updateModalFilterUI();
                loadProductsInModal(true);
            });

            // click on product card to add
            $('#product_modal').on('click', '.product-card', function() {
                var pid = parseInt($(this).data('product-id'));
                if (selectedProductIds.includes(pid)) {
                    return; // already added
                }
                // mark card as added immediately
                $(this).addClass('added');
                sync_product_row(pid, pid, null);
            });

            // search and filters inside modal
            var modalSearchTimer = null;
            $('#modal_search_products').on('input', function() {
                clearTimeout(modalSearchTimer);
                modalSearchTimer = setTimeout(function() { loadProductsInModal(true); }, 400);
            });
            $('#modal_brand_filter, #modal_category_filter').on('change', function() { loadProductsInModal(true); });

            // infinite scroll inside modal product list
            $('#product_modal .product-list').on('scroll', function() {
                var $this = $(this);
                if ($this.scrollTop() + $this.innerHeight() >= this.scrollHeight - 100) {
                    loadProductsInModal(false);
                }
            });

            // select all for brand/category: load all pages for that filter then add
            function addProductsBulk(products) {
                products.forEach(function(p) {
                    if (!selectedProductIds.includes(p.id)) {
                        sync_product_row(p.id, p.id, null);
                    }
                });
            }

            $('#select_all_brand').on('click', function() {
                // enforce brand filter mode
                modalFilterType = 'brand';
                $('#modal_filter_type').val('brand');
                updateModalFilterUI();
                var brand = $('#modal_brand_filter').val();
                if (!brand) return;
                $('#modal_loading').show();
                $.getJSON('/sync/products/search', { brand_id: brand, per_page: 1000 }, function(data) {
                    addProductsBulk(data.products || []);
                    $('#modal_loading').hide();
                }).fail(function() { $('#modal_loading').hide(); });
            });

            $('#select_all_category').on('click', function() {
                // enforce category filter mode
                modalFilterType = 'category';
                $('#modal_filter_type').val('category');
                updateModalFilterUI();
                var category = $('#modal_category_filter').val();
                if (!category) return;
                $('#modal_loading').show();
                $.getJSON('/sync/products/search', { category_id: category, per_page: 1000 }, function(data) {
                    addProductsBulk(data.products || []);
                    $('#modal_loading').hide();
                }).fail(function() { $('#modal_loading').hide(); });
            });

            // select2 initializations (if any)
            $('.select2-product, .select2').select2({ width: '100%' });

            // submit form validation
            $('form').submit(function(e) {
                var type = $('#sync_type').val();
                if (type === 'specific_product' && selectedProductIds.length === 0) {
                    e.preventDefault();
                    alert('يرجى اختيار منتج واحد على الأقل');
                    return false;
                }
                updateSelectedProductIds();
                return true;
            });
        });
    </script>


@endsection