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

@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.update_multiple_products')</h1>
            </section>

            <!-- Main content -->
            <section class="content">
                <div class="row">
                    <div class="col-md-12">
                        {{-- فلترة المنتجات --}}
                        @component('components.filters', ['title' => __('report.filters')])
                            <div class="col-md-2">
                                <div class="form-group">
                                    {!! Form::label('location_id', __('business.business_location') . ':') !!}
                                    {!! Form::select('location_id', 
                                        ['' => __('lang_v1.all'), 'none' => 'لا أحد'] + $locations->pluck('name', 'id')->toArray(), 
                                        request('location_id'), 
                                        ['class' => 'form-control select2', 'id' => 'product_filter_location', 'style' => 'width:100%']) !!}
                                </div>
                            </div>
                            
                            <div class="col-md-3">
                                <div class="form-group">
                                    {!! Form::label('category_id', __('product.category') . ':') !!}
                                    {!! Form::select('category_id', 
                                        ['' => __('lang_v1.all'), 'none' => 'لا أحد'] + $categories->pluck('name', 'id')->toArray(), 
                                        request('category_id'), 
                                        ['class' => 'form-control select2', 'id' => 'product_filter_category', 'style' => 'width:100%']) !!}
                                </div>
                            </div>
                            
                            <div class="col-md-2">
                                <div class="form-group">
                                    {!! Form::label('sub_category_id', __('product.sub_category') . ':') !!}
                                    {!! Form::select('sub_category_id', ['' => __('lang_v1.all'), 'none' => 'لا أحد'], request('sub_category_id'), 
                                        ['class' => 'form-control select2', 'id' => 'product_filter_sub_category', 'style' => 'width:100%']) !!}
                                </div>
                            </div>
                            
                            <div class="col-md-2">
                                <div class="form-group">
                                    {!! Form::label('brand_id', __('product.brand') . ':') !!}
                                    {!! Form::select('brand_id', 
                                        ['' => __('lang_v1.all'), 'none' => 'لا أحد'] + $brands->pluck('name', 'id')->toArray(), 
                                        request('brand_id'), 
                                        ['class' => 'form-control select2', 'id' => 'product_filter_brand', 'style' => 'width:100%']) !!}
                                </div>
                            </div>
                            
                            <div class="col-md-3">
                                <div class="form-group">
                                    {!! Form::label('search_term', __('sale.product') . ' / ' . __('product.sku') . ':') !!}
                                    <div class="input-group">
                                        {!! Form::text('search_term', request('search_term'), 
                                            ['class' => 'form-control', 'id' => 'product_search_term', 'placeholder' => __('sale.product') . ' / ' . __('product.sku')]) !!}
                                        <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 class="col-md-2">
                                <div class="form-group">
                                    <label style="margin-top: 25px;">
                                        {!! Form::checkbox('show_non_zero_qty', 1, request('show_non_zero_qty'), ['class' => 'filter-checkbox', 'id' => 'filter_non_zero_qty']) !!}
                                        منتجات غير صفرية الكمية
                                    </label>
                                </div>
                            </div>

                            <div class="col-md-2">
                                <div class="form-group">
                                    <label style="margin-top: 25px;">
                                        {!! Form::checkbox('show_max_qty', 1, request('show_max_qty'), ['class' => 'filter-checkbox', 'id' => 'filter_max_qty']) !!}
                                        منتجات لها حد تنبيه الأعلى 
                                    </label>
                                </div>
                            </div>

                            <div class="col-md-2">
                                <div class="form-group">
                                    <label style="margin-top: 25px;">
                                        {!! Form::checkbox('show_alert_qty', 1, request('show_alert_qty'), ['class' => 'filter-checkbox', 'id' => 'filter_alert_qty']) !!}
                                        منتجات لها حد تنبيه الأدنى
                                    </label>
                                </div>
                            </div>
                        @endcomponent
                    </div>
                </div>

        <div class="row">
            <div class="col-md-12">
                @component('components.widget', ['class' => 'box-primary'])
                    {!! Form::open(['url' => action([\App\Http\Controllers\ProductController::class, 'updateMultipleProducts']), 
                            'method' => 'get', 'id' => 'update_multiple_products_form' ]) !!}
                    
                    {{-- حقول مخفية لحفظ قيم الفلترة --}}
                    {!! Form::hidden('location_id', request('location_id'), ['id' => 'form_location_id']) !!}
                    {!! Form::hidden('category_id', request('category_id'), ['id' => 'form_category_id']) !!}
                    {!! Form::hidden('sub_category_id', request('sub_category_id'), ['id' => 'form_sub_category_id']) !!}
                    {!! Form::hidden('brand_id', request('brand_id'), ['id' => 'form_brand_id']) !!}
                    {!! Form::hidden('search_term', request('search_term'), ['id' => 'form_search_term']) !!}
                    {!! Form::hidden('show_non_zero_qty', request('show_non_zero_qty'), ['id' => 'form_show_non_zero_qty']) !!}
                    {!! Form::hidden('show_max_qty', request('show_max_qty'), ['id' => 'form_show_max_qty']) !!}
                    {!! Form::hidden('show_alert_qty', request('show_alert_qty'), ['id' => 'form_show_alert_qty']) !!}
                    
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered" id="products_table">
                            <thead>
                                <tr class="bg-gray">
                                    <th style="width: 50px; text-align: center;">
                                        <input type="checkbox" id="select-all-products" title="{{ __('lang_v1.select_all') }}">
                                    </th>
                                    <th style="width: 80px;">@lang('lang_v1.image')</th>
                                    <th>@lang('sale.product')</th>
                                    <th>@lang('product.sku')</th>
                                    <th>@lang('business.location')</th>
                                    <th>@lang('product.category')</th>
                                    <th>@lang('product.sub_category')</th>
                                    <th>@lang('product.brand')</th>
                                    <th>@lang('lang_v1.quantity')</th>
                                    <th>{{ __('lang_v1.max_quantity_upper_limit') }}</th>
                                    <th>{{ __('lang_v1.alert_quantity_lower_limit') }}</th>
                                </tr>
                            </thead>
                            <tbody id="products-tbody">
                                @include('product.partials.products_table_rows')
                            </tbody>
                        </table>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6" style="text-align: right;">
                            <button type="button" id="assign-to-brand-btn" class="btn btn-sm" style="background-color: #17a2b8; color: white; border: none; padding: 4px 10px; font-size: 12px;" disabled>
                                <i class="fa fa-tag"></i> <span class="d-none d-sm-inline">{{ __('lang_v1.assign_to_brand') }}</span>
                            </button>
                            <button type="button" id="assign-to-category-btn" class="btn btn-sm" style="background-color: #28a745; color: white; border: none; padding: 4px 10px; font-size: 12px;" disabled>
                                <i class="fa fa-folder"></i> <span class="d-none d-sm-inline">{{ __('lang_v1.assign_to_category') }}</span>
                            </button>
                        </div>
                        <div class="col-md-6" style="text-align: left;">
                            <button type="button" id="save-all-changes-btn" class="btn btn-sm btn-primary" style="padding: 4px 10px; font-size: 12px;" disabled>
                                <i class="fa fa-save"></i> <span class="d-none d-sm-inline">{{ __('lang_v1.save_changes') }}</span>
                            </button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12" id="pagination-container">
                            {{ $products->links() }}
                        </div>
                    </div>
                    {!! Form::close() !!}
                @endcomponent
            </div>
        </div>
    </section>

    <!-- Modal لقراءة الباركود - نفس نسخة POS -->
    <div id="barcodeModal" class="custom-swal">
        <div class="custom-swal-content">
            <h3 class="custom-swal-title">مسح الباركود</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_v1.cancel') }}</button>
        </div>
    </div>

    <!-- Modal - Assign to Brand -->
    <div id="assignBrandModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">{{ __('lang_v1.assign_to_brand') }}</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>اختر البراند:</label>
                        <select id="brand_select" class="form-control select2" style="width: 100%;">
                            <option value="">-- اختر براند --</option>
                            @foreach($brands as $brand)
                                <option value="{{ $brand->id }}">{{ $brand->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">إلغاء</button>
                    <button type="button" class="btn btn-primary" id="confirm-assign-brand">تأكيد</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal - Assign to Category / Sub Category -->
    <div id="assignCategoryModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">{{ __('lang_v1.assign_to_category') }}</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>اختر الصنف:</label>
                        <select id="category_select_combined" class="form-control select2" style="width: 100%;">
                            <option value="">-- اختر صنف --</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>اختر الصنف الفرعي (اختياري):</label>
                        <select id="subcategory_select_combined" class="form-control select2" style="width: 100%;">
                            <option value="">-- لم يتم اختيار صنف فرعي --</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">إلغاء</button>
                    <button type="button" class="btn btn-success" id="confirm-assign-category-combined">تأكيد</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('javascript')

<script src="https://unpkg.com/@zxing/library@latest"></script>

<style>
    /* Modal overlay like SweetAlert */
    .custom-swal {
        display: none !important;
        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[style*="display: flex"] {
        display: flex !important;
    }

    /* Modal box */
    .custom-swal-content {
        background:#fff;
        border-radius: 10px;
        width: 300px;
        padding: 20px;
        box-sizing: border-box;
        text-align: center;
        position: relative;
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    }

    /* Title like SweetAlert */
    .custom-swal-title {
        margin:0 0 10px 0;
        font-size: 18px;
        color: #333;
    }

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

    /* Cancel button like SweetAlert */
    .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>

<script>
let codeReader;
let stream;

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

// فتح ماسحة الباركود وقراءة الباركود
$('#scan_barcode_btn').on('click', async function() {
    // Check if getUserMedia is available
    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
        toastr.error('{{ __('lang_v1.camera_not_supported') }}');
        return;
    }
    
    modal.style.display = "flex";
    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);

        // Fill input and trigger autocomplete
        $('#product_search_term').val(result.text).autocomplete('search', result.text);

        // Stop scanner and close modal
        if(stream) stream.getTracks().forEach(track=>track.stop());
        codeReader.reset();
        modal.style.display = "none";

    } catch(err) {
        console.error('Barcode scan error:', err);
        let errorMsg = '{{ __('lang_v1.cant_read_barcode') }}';
        if (err.name === 'NotAllowedError') {
            errorMsg = '{{ __('lang_v1.allow_camera_access') }}';
        } else if (err.name === 'NotFoundError') {
            errorMsg = '{{ __('lang_v1.no_camera_available') }}';
        }
        toastr.error(errorMsg);
        modal.style.display = "none";
        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.style.display = "none";
}

// 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.style.display = "none";
    }
}
</script>

<script>
// دالة لجلب وتحديث المنتجات بدون ريفريش الصفحة
function applyFilters(page = 1) {
    const locationId = $('#form_location_id').val();
    const categoryId = $('#form_category_id').val();
    const subCategoryId = $('#form_sub_category_id').val();
    const brandId = $('#form_brand_id').val();
    const searchTerm = $('#form_search_term').val();
    const showNonZeroQty = $('#form_show_non_zero_qty').val();
    const showMaxQty = $('#form_show_max_qty').val();
    const showAlertQty = $('#form_show_alert_qty').val();
    
    $.ajax({
        method: 'GET',
        url: "{{ action([\App\Http\Controllers\ProductController::class, 'updateMultipleProducts']) }}",
        data: {
            location_id: locationId,
            category_id: categoryId,
            sub_category_id: subCategoryId,
            brand_id: brandId,
            search_term: searchTerm,
            show_non_zero_qty: showNonZeroQty,
            show_max_qty: showMaxQty,
            show_alert_qty: showAlertQty,
            page: page,
            ajax: true
        },
        dataType: 'json',
        success: function(response) {
            if (response.success) {
                updateProductsTable(response.html);
                updatePagination(response.pagination);
            } else {
                toastr.error('{{ __('lang_v1.error_loading_products') }}');
            }
        },
        error: function(xhr, status, error) {
            console.error('Error loading products:', status, error);
            toastr.error('{{ __('lang_v1.error_connection') }}');
        }
    });
}

// دالة تحديث جدول المنتجات
function updateProductsTable(html) {
    $('#products_table tbody').html(html);
    // Reset changed products when table is updated
    changedProducts = {};
    $('#save-all-changes-btn').prop('disabled', true);
}

// دالة تحديث الـ pagination
function updatePagination(paginationHtml) {
    $('#pagination-container').html(paginationHtml);
}

// Track original values and changed fields
let changedProducts = {};

$(document).ready(function() {

        // تعيين القيم الأولية للـ select boxes من الحقول المخفية
        const initialLocationId = $('#form_location_id').val();
        const initialCategoryId = $('#form_category_id').val();
        const initialBrandId = $('#form_brand_id').val();
        const initialSubCategoryId = $('#form_sub_category_id').val();
        const initialSearchTerm = $('#form_search_term').val();
        
        if (initialLocationId) {
            $('#product_filter_location').val(initialLocationId);
        }
        
        if (initialCategoryId) {
            $('#product_filter_category').val(initialCategoryId);
        }
        
        if (initialBrandId) {
            $('#product_filter_brand').val(initialBrandId);
        }
        
        if (initialSearchTerm) {
            $('#product_search_term').val(initialSearchTerm);
        }

        // تحديث الأصناف الفرعية عند تحميل الصفحة إذا كان هناك category_id
        if (initialCategoryId) {
            $.ajax({
                method: 'POST',
                url: '/products/get_sub_categories',
                dataType: 'html',
                data: { cat_id: initialCategoryId },
                success: function(result) {
                    if (result) {
                        $('#product_filter_sub_category').html(result);
                        if (initialSubCategoryId) {
                            $('#product_filter_sub_category').val(initialSubCategoryId);
                        }
                    }
                }
            });
        }

        // تحديث الأصناف الفرعية عند تغيير الصنف الرئيسي
        $('#product_filter_category').on('change', function() {
            const categoryId = $(this).val();
            const subCategorySelect = $('#product_filter_sub_category');
            
            // تحديث القيمة المخفية
            $('#form_category_id').val(categoryId);
            
            subCategorySelect.html('<option value="">@lang("lang_v1.all")</option>');
            $('#form_sub_category_id').val('');
            
            if (categoryId) {
                $.ajax({
                    method: 'POST',
                    url: '/products/get_sub_categories',
                    dataType: 'html',
                    data: { cat_id: categoryId },
                    success: function(result) {
                        if (result) {
                            subCategorySelect.html(result);
                            subCategorySelect.select2('destroy').select2();
                        }
                    }
                });
            } else {
                subCategorySelect.select2('destroy').select2();
            }
            
            applyFilters();
        });

        $('#product_filter_brand').on('change', function() {
            $('#form_brand_id').val($(this).val());
            applyFilters();
        });

        $('#product_filter_sub_category').on('change', function() {
            $('#form_sub_category_id').val($(this).val());
            applyFilters();
        });
        
        $('#product_filter_location').on('change', function() {
            $('#form_location_id').val($(this).val());
            applyFilters();
        });
        
        var searchTimeout;
        $('#product_search_term').on('keyup', function() {
            clearTimeout(searchTimeout);
            const searchValue = $(this).val();
            
            searchTimeout = setTimeout(function() {
                $('#form_search_term').val(searchValue);
                applyFilters();
            }, 500);
        });

        // معالجات الفلترة للـ checkboxes
        $('#filter_non_zero_qty').on('change', function() {
            $('#form_show_non_zero_qty').val($(this).is(':checked') ? 1 : 0);
            applyFilters();
        });

        $('#filter_max_qty').on('change', function() {
            $('#form_show_max_qty').val($(this).is(':checked') ? 1 : 0);
            applyFilters();
        });

        $('#filter_alert_qty').on('change', function() {
            $('#form_show_alert_qty').val($(this).is(':checked') ? 1 : 0);
            applyFilters();
        });

        $(document).on('click', 'a.pagination-link', function(e) {
            e.preventDefault();
            const page = $(this).data('page');
            applyFilters(page);
        });

        

        if ($('#product_search_term').length) {
            $('#product_search_term').autocomplete({
                delay: 300,
                source: function(request, response) {
                    $.getJSON(
                        '/products/list',
                        {
                            term: request.term,
                            location_id: $('#form_location_id').val(),
                            not_for_selling: 0,
                            search_fields: ['name', 'sku', 'product_skus', 'sub_sku']
                        },
                        response
                    );
                },
                minLength: 2,
                response: function(event, ui) {
                    if (ui.content.length == 0) {
                        toastr.error(LANG.no_products_found);
                    }
                },
                select: function(event, ui) {
                    // عند اختيار منتج من القائمة، نضع قيمة SKU في الحقل المخفي ونطبق الفلترة
                    var skuValue = ui.item.sub_sku || ui.item.value;
                    $(this).val(skuValue);
                    $('#form_search_term').val(skuValue);
                    applyFilters();
                    return false;
                }
            }).autocomplete('instance')._renderItem = function(ul, item) {
                var string = '<div>' + item.name;
                if (item.type == 'variable') {
                    string += ' - ' + item.variation;
                }
                
                var selling_price = item.selling_price;
                if (item.variation_group_price) {
                    selling_price = item.variation_group_price;
                }
                
                string += ' (' + item.sub_sku + ')' + '<br> السعر: ' + __currency_trans_from_en(selling_price, false, false, __currency_precision, true);
                if (item.enable_stock == 1) {
                    var qty_available = __currency_trans_from_en(item.qty_available, false, false, __currency_precision, true);
                    string += ' - ' + qty_available + ' ' + (item.unit || '');
                }
                string += '</div>';
                
                return $('<li>')
                    .append(string)
                    .appendTo(ul);
            };
        }
        
        let barcodeBuffer = '';
        let barcodeTimeout;
        
        $(document).on('keypress', function(e) {
            // تطبيق الباركود فقط على حقل البحث الرئيسي
            if ($(e.target).is('#product_search_term')) {
                if (e.which >= 48 && e.which <= 57) {
                    clearTimeout(barcodeTimeout);
                    barcodeBuffer += String.fromCharCode(e.which);
                    
                    barcodeTimeout = setTimeout(function() {
                        if (barcodeBuffer.length > 3) {
                            $('#product_search_term').val(barcodeBuffer);
                            $('#form_search_term').val(barcodeBuffer);
                            applyFilters();
                            barcodeBuffer = '';
                        }
                    }, 100);
                } else {
                    barcodeBuffer = '';
                    clearTimeout(barcodeTimeout);
                }
            }
        });
        
        $('#scan_barcode_btn').on('click', async function() {
            openBarcodeScannerInternal();
        });

        // معالج زر تعبئة الحقول أسفل الحقل الحالي
        $(document).on('click', '.fill-below-btn', function(e) {
            e.preventDefault();
            
            const fieldType = $(this).data('field'); // 'max-qty' أو 'alert-qty'
            const currentRow = $(this).closest('tr');
            const currentValue = currentRow.find('.' + fieldType + '-input').val();
            
            if (!currentValue || currentValue === '') {
                toastr.warning('{{ __("lang_v1.field_required") }}');
                return;
            }
            
            // احصل على جميع الصفوف بعد الصف الحالي
            const currentIndex = currentRow.index();
            const allRows = currentRow.closest('tbody').find('tr');
            
            // تعبئة جميع الحقول أسفل الحقل الحالي
            let filledCount = 0;
            allRows.each(function(index) {
                if (index > currentIndex) {
                    const inputField = $(this).find('.' + fieldType + '-input');
                    if (inputField.length) {
                        inputField.val(currentValue).trigger('input');
                        filledCount++;
                    }
                }
            });
            
            if (filledCount > 0) {
                toastr.success('{{ __("lang_v1.success") }} - تم تعبئة ' + filledCount + ' حقل');
            }
        });
    });
</script>

<script src="https://unpkg.com/@zxing/library@latest"></script>


<div id="productImageModal" class="custom-swal" style="display: none;">
    <div class="custom-swal-content" style="max-width: 500px; padding: 0; border-radius: 10px; overflow: hidden;">
        
        <!-- Header -->
        <div style="background: #667eea; color: white; padding: 20px; text-align: center;">
            <h3 style="margin: 0; font-size: 18px;">تحديث صورة المنتج</h3>
        </div>

        <!-- Body -->
        <div style="padding: 25px;">
            
            <!-- Option 1: Upload File -->
            <div style="margin-bottom: 20px;">
                <label style="display: block; margin-bottom: 10px; font-weight: 600; color: #333;">
                    <i class="fa fa-folder-open"></i> رفع صورة من الجهاز
                </label>
                <label style="display: block; padding: 15px; border: 2px dashed #667eea; border-radius: 8px; background: #f8f9ff; cursor: pointer; text-align: center; transition: all 0.3s;">
                    <i class="fa fa-cloud-upload" style="font-size: 24px; color: #667eea; display: block; margin-bottom: 8px;"></i>
                    <span style="color: #667eea; font-weight: 600;">اختر صورة أو اسحب هنا</span>
                    <small style="display: block; color: #999; margin-top: 5px;">JPG, PNG أو WebP</small>
                    <input type="file" id="product_image_file" accept="image/*" style="display: none;">
                </label>
            </div>

            <!-- Divider -->
            <div style="text-align: center; margin: 20px 0; color: #999;">أو</div>

            <!-- Option 2: Camera -->
            <div style="margin-bottom: 20px;">
                <label style="display: block; margin-bottom: 10px; font-weight: 600; color: #333;">
                    <i class="fa fa-camera"></i> التقط صورة بالكاميرا
                </label>
                <button type="button" id="open_camera_btn" class="btn btn-primary btn-block" style="margin-bottom: 10px;">
                    فتح الكاميرا
                </button>
                <video id="product_camera_video" style="width: 100%; display: none; border-radius: 5px; background: #000;"></video>
                <canvas id="product_canvas" style="display: none;"></canvas>
                <button type="button" id="capture_photo_btn" class="btn btn-success btn-block" style="display: none; margin-top: 10px;">
                    التقط الصورة
                </button>
            </div>
        </div>

        <!-- Footer -->
        <div style="background: #f5f5f5; padding: 15px 25px; display: flex; gap: 10px; border-top: 1px solid #e0e0e0;">
            <button type="button" id="upload_product_image_btn" class="btn btn-primary" style="flex: 1;">
                حفظ
            </button>
            <button type="button" class="btn btn-secondary custom-swal-cancel" style="flex: 1;">
                إلغاء
            </button>
        </div>
    </div>
</div>

<script>
let currentProductId = null;
let productCameraStream = null;
let selectedProductImage = null;

// فتح modal تحديث الصورة
$(document).on('click', '.product-image-update', function() {
    currentProductId = $(this).data('product-id');
    $('#productImageModal').css('display', 'flex');
    resetImageModal();
});

// إغلاق modal تحديث الصورة
$('#productImageModal .custom-swal-cancel').on('click', function() {
    closeImageModal();
});

// تفعيل اختيار الملف عند الضغط على label
$('label').filter(function() {
    return $(this).find('#product_image_file').length > 0;
}).on('click', function(e) {
    if (!$(e.target).is('input')) {
        $('#product_image_file').click();
    }
});

// تفعيل drag and drop
const uploadLabel = $('label').filter(function() {
    return $(this).find('#product_image_file').length > 0;
})[0];

if (uploadLabel) {
    uploadLabel.addEventListener('dragover', (e) => {
        e.preventDefault();
        uploadLabel.style.background = '#e3f2fd';
        uploadLabel.style.borderColor = '#2196F3';
    });

    uploadLabel.addEventListener('dragleave', (e) => {
        e.preventDefault();
        uploadLabel.style.background = '#f8f9ff';
        uploadLabel.style.borderColor = '#667eea';
    });

    uploadLabel.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadLabel.style.background = '#f8f9ff';
        uploadLabel.style.borderColor = '#667eea';
        
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            $('#product_image_file')[0].files = files;
            $('#product_image_file').trigger('change');
        }
    });
}

// فتح الكاميرا
$('#open_camera_btn').on('click', async function() {
    try {
        productCameraStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
        const video = document.getElementById('product_camera_video');
        video.srcObject = productCameraStream;
        await video.play();
        
        $('#open_camera_btn').hide();
        $('#capture_photo_btn').show();
        video.style.display = 'block';
    } catch (err) {
        console.error(err);
        toastr.error('{{ __('lang_v1.error_opening_camera') }}');
    }
});

// التقاط صورة من الكاميرا
$('#capture_photo_btn').on('click', function() {
    const video = document.getElementById('product_camera_video');
    const canvas = document.getElementById('product_canvas');
    const ctx = canvas.getContext('2d');
    
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    ctx.drawImage(video, 0, 0);
    
    canvas.toBlob(function(blob) {
        selectedProductImage = blob;
        
        // إيقاف الكاميرا وإغلاق الفيديو
        if (productCameraStream) {
            productCameraStream.getTracks().forEach(track => track.stop());
        }
        
        video.style.display = 'none';
        $('#capture_photo_btn').hide();
        $('#open_camera_btn').show();
        
        toastr.success('{{ __('lang_v1.photo_captured_success') }}');
    }, 'image/jpeg');
});

// رفع صورة من الملفات
$('#product_image_file').on('change', function() {
    if (this.files && this.files[0]) {
        selectedProductImage = this.files[0];
        toastr.success('{{ __('lang_v1.image_selected_success') }}');
    }
});

// حفظ الصورة
$('#upload_product_image_btn').on('click', function() {
    if (!selectedProductImage) {
        toastr.error('{{ __('lang_v1.select_image_first') }}');
        return;
    }
    
    const formData = new FormData();
    formData.append('product_id', currentProductId);
    formData.append('image', selectedProductImage);
    
    $.ajax({
        url: '{{ route("products.update-image") }}',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            if (response.success) {
                toastr.success('{{ __('lang_v1.image_updated_success') }}');
                
                // تحديث الصورة في الجدول
                $('img[data-product-id="' + currentProductId + '"]').attr('src', response.image_url);
                
                closeImageModal();
            } else {
                toastr.error(response.message || '{{ __('lang_v1.error_saving_image') }}');
            }
        },
        error: function(err) {
            console.error(err);
            toastr.error('{{ __('lang_v1.error_uploading_image') }}');
        }
    });
});

function resetImageModal() {
    selectedProductImage = null;
    $('#product_image_file').val('');
    const video = document.getElementById('product_camera_video');
    video.style.display = 'none';
    $('#capture_photo_btn').hide();
    $('#open_camera_btn').show();
}

function closeImageModal() {
    // إيقاف الكاميرا إن وجدت
    if (productCameraStream) {
        productCameraStream.getTracks().forEach(track => track.stop());
        productCameraStream = null;
    }
    
    resetImageModal();
    $('#productImageModal').css('display', 'none');
    currentProductId = null;
}

// إغلاق Modal عند الضغط خارجه
$('#productImageModal').on('click', function(e) {
    if ($(e.target).is('#productImageModal')) {
        closeImageModal();
    }
});

// Track original values and changed fields
let originalValues = {};

// Track max quantity changes - استخدام data-original مباشرة
$(document).on('input', '.max-qty-input', function() {
    const input = $(this);
    const productId = input.data('product-id');
    const currentValue = input.val() || '';
    const originalValue = input.data('original') || '';
    
    if (currentValue !== originalValue) {
        if (!changedProducts[productId]) changedProducts[productId] = {};
        changedProducts[productId]['max_quantity'] = currentValue;
        input.css('border-color', '#ffc107');
        $('#save-all-changes-btn').prop('disabled', false);
    } else {
        if (changedProducts[productId]) {
            delete changedProducts[productId]['max_quantity'];
            if (Object.keys(changedProducts[productId]).length === 0) {
                delete changedProducts[productId];
            }
        }
        input.css('border-color', '#ddd');
        if (Object.keys(changedProducts).length === 0) {
            $('#save-all-changes-btn').prop('disabled', true);
        }
    }
});

// Track alert quantity changes - استخدام data-original مباشرة
$(document).on('input', '.alert-qty-input', function() {
    const input = $(this);
    const productId = input.data('product-id');
    const currentValue = input.val() || '';
    const originalValue = input.data('original') || '';
    
    if (currentValue !== originalValue) {
        if (!changedProducts[productId]) changedProducts[productId] = {};
        changedProducts[productId]['alert_quantity'] = currentValue;
        input.css('border-color', '#ffc107');
        $('#save-all-changes-btn').prop('disabled', false);
    } else {
        if (changedProducts[productId]) {
            delete changedProducts[productId]['alert_quantity'];
            if (Object.keys(changedProducts[productId]).length === 0) {
                delete changedProducts[productId];
            }
        }
        input.css('border-color', '#ddd');
        if (Object.keys(changedProducts).length === 0) {
            $('#save-all-changes-btn').prop('disabled', true);
        }
    }
});

// Track SKU changes - استخدام data-original مباشرة
$(document).on('input', '.sku-input', function() {
    const input = $(this);
    const productId = input.data('product-id');
    const currentValue = input.val() || '';
    const originalValue = input.data('original') || '';
    
    if (currentValue !== originalValue) {
        if (!changedProducts[productId]) changedProducts[productId] = {};
        changedProducts[productId]['sku'] = currentValue;
        input.css('border-color', '#ffc107');
        $('#save-all-changes-btn').prop('disabled', false);
    } else {
        if (changedProducts[productId]) {
            delete changedProducts[productId]['sku'];
            if (Object.keys(changedProducts[productId]).length === 0) {
                delete changedProducts[productId];
            }
        }
        input.css('border-color', '#ddd');
        if (Object.keys(changedProducts).length === 0) {
            $('#save-all-changes-btn').prop('disabled', true);
        }
    }
});

// Save all changes button
$(document).on('click', '#save-all-changes-btn', function(e) {
    e.preventDefault();
    const btn = $(this);
    const productIds = Object.keys(changedProducts);
    
    if (productIds.length === 0) return;
    
    btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> جاري الحفظ...');
    
    let totalRequests = 0;
    let completedRequests = 0;
    let hasError = false;

    // count total
    productIds.forEach(pid => {
        totalRequests += Object.keys(changedProducts[pid]).length;
    });

    productIds.forEach(productId => {
        const changes = changedProducts[productId];
        Object.keys(changes).forEach(fieldName => {
            let url, data;
            // use same endpoint for all fields including sku
            url = '/products/update-product-fields';
            data = {
                product_id: productId,
                field: fieldName,
                value: changes[fieldName],
                _token: '{{ csrf_token() }}'
            };
            
            $.ajax({
                url: url,
                type: 'POST',
                data: data,
                success: function(response) {
                    if (!response.success) {
                        hasError = true;
                        toastr.error(response.message || '{{ __('lang_v1.error_update') }}');
                    }
                },
                error: function(xhr) {
                    hasError = true;
                    let errorMsg = '{{ __('lang_v1.error_update') }}';
                    
                    // معالجة رسائل الخطأ المختلفة
                    if (xhr.status === 422) {
                        // Validation error
                        const response = xhr.responseJSON;
                        if (response.errors) {
                            const errors = Object.values(response.errors).flat();
                            errorMsg = errors[0] || errorMsg;
                        }
                    } else if (xhr.status === 404) {
                        errorMsg = '{{ __('lang_v1.product_not_found') }}';
                    } else if (xhr.status === 403) {
                        errorMsg = '{{ __('lang_v1.no_permission_to_edit') }}';
                    } else if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    }
                    
                    console.error('Update error:', {
                        status: xhr.status,
                        productId: data.product_id,
                        field: data.field,
                        value: data.value,
                        response: xhr.responseJSON
                    });
                    
                    toastr.error(errorMsg);
                },
                complete: function() {
                    completedRequests++;
                    if (completedRequests === totalRequests) {
                        if (!hasError) {
                            // refresh original values & cleanup
                            productIds.forEach(pid => {
                                const ch = changedProducts[pid];
                                Object.keys(ch).forEach(fn => {
                                    if (fn === 'max_quantity') {
                                        const input = $(`[data-product-id="${pid}"].max-qty-input`);
                                        input.data('original', ch[fn])
                                            .css('border-color', '#ddd');
                                    } else if (fn === 'alert_quantity') {
                                        const input = $(`[data-product-id="${pid}"].alert-qty-input`);
                                        input.data('original', ch[fn])
                                            .css('border-color', '#ddd');
                                    } else if (fn === 'sku') {
                                        const input = $(`[data-product-id="${pid}"].sku-input`);
                                        input.data('original', ch[fn])
                                            .css('border-color', '#ddd');
                                    }
                                });
                            });
                            changedProducts = {};
                            toastr.success('{{ __('lang_v1.all_changes_saved_success') }}', '{{ __('lang_v1.success') }}');

                        }
                        btn.prop('disabled', true).html('<i class="fa fa-save"></i> {{ __('lang_v1.save_changes') }}');
                    }
                }
            });
        });
    });
});

// ========== SKU Barcode Scanner ==========
let currentSkuProductId = null;
let skuCameraStream = null;
let skuCodeReader = null;

// Open barcode scanner for SKU input
$(document).on('click', '.scan-sku-btn', async function(e) {
    e.preventDefault();
    
    // Check if getUserMedia is available
    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
        toastr.error('{{ __('lang_v1.camera_not_supported') }}');
        return;
    }
    
    currentSkuProductId = $(this).data('product-id');
    modal.style.display = "flex";
    skuCodeReader = new ZXing.BrowserBarcodeReader();

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

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

        // Fill the SKU input field
        const skuInput = $(`#sku-${currentSkuProductId}`);
        skuInput.val(result.text).trigger('input');

        // Stop scanner and close modal
        if(skuCameraStream) skuCameraStream.getTracks().forEach(track=>track.stop());
        if(skuCodeReader) skuCodeReader.reset();
        modal.style.display = "none";
        currentSkuProductId = null;

    } catch(err) {
        console.error('Barcode scan error:', err);
        let errorMsg = '{{ __('lang_v1.cant_read_barcode') }}';
        if (err.name === 'NotAllowedError') {
            errorMsg = '{{ __('lang_v1.allow_camera_access') }}';
        } else if (err.name === 'NotFoundError') {
            errorMsg = '{{ __('lang_v1.no_camera_available') }}';
        }
        toastr.error(errorMsg);
        modal.style.display = "none";
        if(skuCameraStream) skuCameraStream.getTracks().forEach(track=>track.stop());
        if(skuCodeReader) skuCodeReader.reset();
        currentSkuProductId = null;
    }
});

// ========== Checkbox Selection Logic ==========
$(document).ready(function() {
    // Select all checkbox
    $(document).on('change', '#select-all-products', function() {
        const isChecked = $(this).is(':checked');
        $('.product-checkbox').prop('checked', isChecked);
        updateButtonStates();
    });

    // Individual product checkbox
    $(document).on('change', '.product-checkbox', function() {
        updateSelectAllCheckbox();
        updateButtonStates();
    });

    // Update select-all checkbox based on individual checkboxes
    function updateSelectAllCheckbox() {
        const totalProducts = $('.product-checkbox').length;
        const checkedProducts = $('.product-checkbox:checked').length;
        
        if (totalProducts === checkedProducts && totalProducts > 0) {
            $('#select-all-products').prop('checked', true);
        } else {
            $('#select-all-products').prop('checked', false);
        }
    }

    // Enable/Disable buttons based on selection
    function updateButtonStates() {
        const checkedCount = $('.product-checkbox:checked').length;
        const hasSelection = checkedCount > 0;
        
        $('#assign-to-brand-btn').prop('disabled', !hasSelection);
        $('#assign-to-category-btn').prop('disabled', !hasSelection);
    }

    // Get selected product IDs
    function getSelectedProductIds() {
        const selectedIds = [];
        $('.product-checkbox:checked').each(function() {
            selectedIds.push($(this).val());
        });
        return selectedIds;
    }

    // ========== Assign to Brand ==========
    $(document).on('click', '#assign-to-brand-btn', function() {
        $('#brand_select').val('').select2('destroy').select2();
        $('#assignBrandModal').modal('show');
    });

    $(document).on('click', '#confirm-assign-brand', function() {
        const brandId = $('#brand_select').val();
        const productIds = getSelectedProductIds();
        
        if (!brandId) {
            toastr.error('{{ __('lang_v1.select_brand') }}');
            return;
        }
        
        const btn = $(this);
        btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i>');
        
        assignProductsToField(productIds, 'brand_id', brandId, function() {
            $('#assignBrandModal').modal('hide');
            btn.prop('disabled', false).html('{{ __('lang_v1.confirm') }}');
            // Reload table
            applyFilters(1);
        });
    });

    // ========== Assign to Category / Sub Category ==========
    $(document).on('click', '#assign-to-category-btn', function() {
        $('#category_select_combined').val('').select2('destroy').select2();
        $('#subcategory_select_combined').html('<option value="">-- لم يتم اختيار صنف فرعي --</option>').select2('destroy').select2();
        $('#assignCategoryModal').modal('show');
    });

    // Load sub-categories when category is selected in modal
    $(document).on('change', '#category_select_combined', function() {
        const categoryId = $(this).val();
        const subCategorySelect = $('#subcategory_select_combined');
        
        subCategorySelect.html('<option value="">-- لم يتم اختيار صنف فرعي --</option>');
        
        if (categoryId) {
            $.ajax({
                method: 'POST',
                url: '/products/get_sub_categories',
                dataType: 'html',
                data: { cat_id: categoryId },
                success: function(result) {
                    if (result) {
                        subCategorySelect.html('<option value="">-- لم يتم اختيار صنف فرعي --</option>' + result);
                        subCategorySelect.select2('destroy').select2();
                    }
                },
                error: function() {
                    toastr.error('{{ __('lang_v1.error_loading_subcategories') }}');
                }
            });
        }
    });

    $(document).on('click', '#confirm-assign-category-combined', function() {
        const categoryId = $('#category_select_combined').val();
        const subCategoryId = $('#subcategory_select_combined').val();
        const productIds = getSelectedProductIds();
        
        if (!categoryId) {
            toastr.error('{{ __('lang_v1.select_category') }}');
            return;
        }
        
        const btn = $(this);
        btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i>');
        
        // Update category_id
        assignProductsToField(productIds, 'category_id', categoryId, function() {
            // If sub-category is selected, update it as well
            if (subCategoryId) {
                assignProductsToField(productIds, 'sub_category_id', subCategoryId, function() {
                    $('#assignCategoryModal').modal('hide');
                    btn.prop('disabled', false).html('{{ __('lang_v1.confirm') }}');
                    applyFilters(1);
                });
            } else {
                $('#assignCategoryModal').modal('hide');
                btn.prop('disabled', false).html('{{ __('lang_v1.confirm') }}');
                applyFilters(1);
            }
        });
    });

    // Common function to assign products to field
    function assignProductsToField(productIds, fieldName, fieldValue, onSuccess) {
        if (productIds.length === 0) {
            toastr.error('{{ __('lang_v1.select_product') }}');
            return;
        }
        
        $.ajax({
            url: '/products/assign-multiple',
            type: 'POST',
            data: {
                product_ids: productIds,
                field: fieldName,
                value: fieldValue,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.success) {
                    toastr.success(response.message || '{{ __('lang_v1.update_success') }}');
                    
                    // Uncheck all checkboxes
                    $('#select-all-products').prop('checked', false);
                    $('.product-checkbox').prop('checked', false);
                    updateButtonStates();
                    
                    // Call onSuccess callback with a small delay
                    setTimeout(function() {
                        if (typeof onSuccess === 'function') {
                            onSuccess();
                        }
                    }, 300);
                } else {
                    toastr.error(response.message || '{{ __('lang_v1.update_error') }}');
                }
            },
            error: function(xhr) {
                console.error('Assignment error:', xhr);
                toastr.error('{{ __('lang_v1.error_connection') }}');
            }
        });
    }
});
</script>
@endsection