@extends('layouts.app')

@section('title', __('lang_v1.update_product_price'))

@section('content')
<section class="content-header">
    <h1>@lang('lang_v1.update_Multiple_products_prices')</h1>
</section>

<section class="content">

    {{-- فلتر نوع الفلترة --}}
    @component('components.widget', ['class' => 'box-solid'])
        <div class="row mb-4">
            <div class="col-md-4 col-md-offset-4">
                <div class="form-group">
                    {!! Form::label('type', __('lang_v1.type') . ':') !!}
                    {!! Form::select(
                        'type',
                        [
                            'category' => __('product.category'),
                            'product' => __('sale.product'),
                            'brand' => __('product.brand'),
                            'all' => __('lang_v1.all_products')
                        ],
                        null,
                        ['class' => 'form-control select2', 'id' => 'goal_type_select', 'style' => 'width:100%']
                    ) !!}
                </div>
            </div>

            {{-- Category select --}}
            <div class="col-md-4 col-md-offset-4 goal-input hide" id="category_input">
                <div class="form-group">
                    {!! Form::label('category_id', __('product.category') . ':') !!}
                    <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-tags"></i></span>
                        {!! Form::select(
                            'category_id',
                            ['' => __('lang_v1.please_select')] + $categories->pluck('name','id')->toArray(),
                            null,
                            ['class' => 'form-control select2', 'id' => 'category_id', 'style' => 'width: 100%;']
                        ) !!}
                    </div>
                </div>
            </div>

            {{-- Brand select --}}
            <div class="col-md-4 col-md-offset-4 goal-input hide" id="brand_input">
                <div class="form-group">
                    {!! Form::label('brand_id', __('product.brand') . ':') !!}
                    <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-briefcase"></i></span>
                        {!! Form::select(
                            'brand_id',
                            ['' => __('lang_v1.please_select')] + $brands->pluck('name','id')->toArray(),
                            null,
                            ['class' => 'form-control select2', 'id' => 'brand_id', 'style' => 'width: 100%;']
                        ) !!}
                    </div>
                </div>
            </div>

            {{-- Product search --}}
            <div class="col-md-8 col-md-offset-2 goal-input hide" id="product_input">
                <div class="form-group">
                    {!! Form::label('search_product_for_stock_adjustment', __('product.product_name') . ':') !!}
                    <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                        {!! Form::text(
                            'search_product_for_stock_adjustment',
                            null,
                            ['class' => 'form-control', 'id' => 'search_product_for_stock_adjustment', 'placeholder' => __('stock_adjustment.search_product')]
                        ) !!}
                    </div>
                    <div id="search_results" style="margin-top:10px;"></div>
                </div>
            </div>
        </div>
    @endcomponent

    {{-- جدول المنتجات --}}
    @component('components.widget', ['class' => 'box-solid'])
        <div id="productsList"></div>
    @endcomponent

    {{-- تحديث الأسعار --}}
    @component('components.widget', ['class' => 'box-solid'])
        <section class="mt-4">
            <h4>@lang('lang_v1.update_prices_for_all_variations')  @show_tooltip(__('tooltip.multiple_prices_update'))</h4>
            <form id="updatePricesForm">

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label>@lang('lang_v1.reference_column')</label>
                        <select id="reference_column" class="form-control select2" style="width: 100%;">
                            <option value="none">@lang('lang_v1.no_reference_column')</option>
                            <option value="default_purchase_price">@lang('lang_v1.purchase_price')</option>
                            <option value="default_sell_price">@lang('lang_v1.selling_price')</option>
                            @foreach($price_groups as $pg)
                                <option value="price_group_{{ $pg->id }}">{{ $pg->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>


                {{-- نوع التعديل والقيمة --}}
                <div class="row mb-3">
                    <div class="col-md-6 d-flex align-items-end gap-2">
                        <div class="flex-fill">
                            <label>@lang('lang_v1.increase_or_discount_type')</label>
                            <select id="price_type" class="form-control select2" style="width: 100%;">
                                <option value="fixed">@lang('lang_v1.fixed')</option>
                                <option value="percentage">@lang('lang_v1.percentage')</option>
                            </select>
                        </div>
                        <div class="flex-fill">
                            <label>@lang('lang_v1.value')</label>
                            <input type="number" id="price_value" class="form-control" placeholder="@lang('lang_v1.enter_value')">
                        </div>
                    </div>
                </div>

                {{-- اختيار الأعمدة --}}
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label>@lang('lang_v1.select_columns_to_update')</label>
                        <select id="columns_to_update" class="form-control select2" multiple="multiple" style="width: 100%;">
                            <option value="default_sell_price">@lang('lang_v1.selling_price')</option>
                            @foreach($price_groups as $pg)
                                <option value="price_group_{{ $pg->id }}">{{ $pg->name }}</option>
                            @endforeach
                        </select>
                        {{-- <small class="text-muted d-block mt-1">@lang('lang_v1.leave_empty_to_update_all_columns')</small> --}}
                    </div>
                </div>
                <br>
                <br>
                {{-- زر التقديم --}}
                <div class="row">
                    <div class="col-md-6">
                        <button type="button" id="applyChangesBtn" class="btn btn-primary">@lang('lang_v1.apply_changes')</button>
                    </div>
                </div>

            </form>
        </section>
    @endcomponent

</section>

{{-- Scripts --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const typeSelect = $('#goal_type_select');
    const brandSelect = $('#brand_id');
    const categorySelect = $('#category_id');
    const productInput = $('#search_product_for_stock_adjustment');

    $('.select2').select2({
        placeholder: function(){ return $(this).data('placeholder') || 'الرجاء الاختيار'; },
        allowClear: true,
        closeOnSelect: false,
        dropdownParent: $(this).closest('.content')
    });

    function handleTypeChange() {
        $('.goal-input').addClass('hide');
        const val = typeSelect.val();
        if (val === 'product') $('#product_input').removeClass('hide');
        else if (val === 'category') $('#category_input').removeClass('hide');
        else if (val === 'brand') $('#brand_input').removeClass('hide');
        else if (val === 'all') fetchProducts();
    }
    typeSelect.on('change', handleTypeChange);
    handleTypeChange();

    let selectedProductIds = [];

    productInput.on('input', function () {
        let query = $(this).val().trim();
        if (query.length >= 2) {
            $.ajax({
                url: '{{ route("search-products") }}',
                method: 'GET',
                data: { search: query },
                success: function(response) {
                    let html = '<ul class="list-group">';
                    if (response.length > 0) {
                        response.forEach(product => {
                            html += `<li class="list-group-item" data-id="${product.id}">${product.name}</li>`;
                        });
                    } else html += '<li class="list-group-item">لا توجد نتائج</li>';
                    html += '</ul>';
                    $('#search_results').html(html);
                },
                error: function(err) {
                    console.error(err);
                    $('#search_results').html('<div class="text-danger">خطأ أثناء البحث</div>');
                }
            });
        } else $('#search_results').empty();
    });

    $(document).on('click', '#search_results li', function () {
        const variationId = parseInt($(this).data('id'));
        if (!selectedProductIds.includes(variationId)) selectedProductIds.push(variationId);
        $('#search_results').empty();
        productInput.val('');
        fetchProducts(selectedProductIds);
    });

    categorySelect.on('change', () => fetchProducts());
    brandSelect.on('change', () => fetchProducts());

    function fetchProducts(variationIds = null) {
        if (variationIds === null) variationIds = selectedProductIds.slice();

        const params = new URLSearchParams();
        let hasSelection = false;
        const typeVal = typeSelect.val();

        if (typeVal === 'product' && variationIds.length > 0) {
            variationIds.forEach(id => params.append('variation_ids[]', id));
            hasSelection = true;
        } else if (typeVal === 'category') {
            const categoryId = categorySelect.val();
            if (categoryId) { params.append('category_id', categoryId); hasSelection = true; }
        } else if (typeVal === 'brand') {
            const brandId = brandSelect.val();
            if (brandId) { params.append('brand_id', brandId); hasSelection = true; }
        } else if (typeVal === 'all') { hasSelection = true; }

        if (!hasSelection) { $('#productsList').empty(); return; }

        fetch(`{{ route('filter-variations') }}?${params.toString()}`, {
            headers: { 'Accept': 'application/json' }
        })
        .then(res => res.json())
        .then(res => {
            renderTable(res);
            syncSelectedFromTable();
        })
        .catch(err => {
            console.error(err);
            $('#productsList').html('<div class="text-danger">خطأ أثناء جلب البيانات</div>');
        });
    }

    function renderTable(data) {
        const variations = data.variations || [];
        const priceGroups = data.price_groups || [];
        let html = '<table class="table table-bordered table-striped"><thead><tr>' +
            '<th>@lang("lang_v1.delete")</th>' +
            '<th>@lang("lang_v1.image")</th>' +
            '<th>@lang("lang_v1.product_name")</th>' +
            '<th>@lang("lang_v1.sku")</th>' +
            '<th>@lang("lang_v1.purchase_price")</th>' +
            '<th>@lang("lang_v1.selling_price")</th>';

        priceGroups.forEach(pg => { html += `<th>${pg.name}</th>`; });
        html += '</tr></thead><tbody>';
        

        // مهيئ فورمات حسب عملتك
const currencyFormatter = new Intl.NumberFormat('EG', { // غيّر "ar-EG" حسب اللغة
    style: 'decimal',
    minimumFractionDigits: 0,
    maximumFractionDigits: 0
});

    if (variations.length > 0) {
        variations.forEach(v => {
            const imgSrc = v.product_image || '/uploads/img/default.png';
            const displayName = (v.name === 'DUMMY') ? v.product_name : `${v.product_name} - ${v.name}`;
            html += `<tr data-variation-id="${v.variation_id}">` +
                `<td><button type="button" class="btn btn-danger btn-sm remove-row">&times;</button></td>` +
                `<td><img src="${imgSrc}" style="width:50px;height:50px;object-fit:cover;" /></td>` +
                `<td>${displayName}</td>` +
                `<td>${v.sku}</td>` +
                `<td class="default-purchase-price" data-original="${v.default_purchase_price}">
                    ${currencyFormatter.format(v.default_purchase_price)}
                </td>` +
                `<td class="default-sell-price" data-original="${v.default_sell_price}">
                    ${currencyFormatter.format(v.default_sell_price)}
                </td>`;

            priceGroups.forEach(pg => {
                const colName = `price_group_${pg.id}`;
                const rawValue = v[colName] ?? 0;

                html += `<td>
                            <span class="price-display">${currencyFormatter.format(rawValue)}</span>
                            <input type="hidden" class="price-group-input" 
                                data-variation-id="${v.variation_id}" 
                                data-price-group-id="${pg.id}" 
                                value="${rawValue}" />
                        </td>`;
            });

            html += `</tr>`;
        });
    }else {
                html += '<tr><td colspan="100%">@lang("lang_v1.no_products_found")</td></tr>';
            }

            html += '</tbody></table>';
            $('#productsList').html(html);
        }

    $(document).on('click', '.remove-row', function() {
        const tr = $(this).closest('tr');
        const variationId = parseInt(tr.data('variation-id'));
        selectedProductIds = selectedProductIds.filter(id => id !== variationId);
        tr.remove();
    });

    function syncSelectedFromTable() {
        const ids = [];
        $('#productsList tr[data-variation-id]').each(function() {
            ids.push(parseInt($(this).data('variation-id')));
        });
        selectedProductIds = ids;
    }

    $('#applyChangesBtn').on('click', function() {
        const proceed = confirm('@lang("lang_v1.are_you_sure")');
        if (!proceed) return; // إذا ضغط إلغاء => يتوقف فقط، الزر يبقى فعال

        const type = $('#price_type').val();
        let value = parseFloat($('#price_value').val());
        if (isNaN(value)) { 
            alert('@lang("lang_v1.please_enter_a_valid_value")'); 
            return; 
        }

        let selectedColumns = $('#columns_to_update').val() || [];
        if (selectedColumns.length === 0) {
            alert('@lang("lang_v1.please_select_columns_to_update")');
            return;
        }

        const variationIds = [];
        const priceGroups = [];

        $('#productsList tr[data-variation-id]').each(function() {
            const tr = $(this);
            const variationId = tr.data('variation-id');
            variationIds.push(variationId);

            tr.find('.price-group-input').each(function() {
                const input = $(this);
                const pgId = input.data('price-group-id');
                if (selectedColumns.length > 0 && !selectedColumns.includes('price_group_' + pgId)) return;

                const currentValue = parseFloat(input.val()) || 0;
                priceGroups.push({ variation_id: variationId, price_group_id: pgId, value: currentValue });
            });
        });

        const referenceColumn = $('#reference_column').val();
        const refColToSend = referenceColumn === 'none' ? null : referenceColumn;

        fetch('{{ route('update-multiple-prices') }}', {
            method: 'POST',
            headers: {
                'Content-Type':'application/json',
                'Accept':'application/json',
                'X-CSRF-TOKEN':'{{ csrf_token() }}'
            },
            body: JSON.stringify({
                variation_ids: variationIds,
                price_groups: priceGroups,
                type,
                value,
                selected_columns: selectedColumns,
                reference_column: refColToSend
            })
        })
        .then(res => res.json())
        .then(res => { 
            if(res.success){ 
                location.reload(); 
            } else { 
                alert(res.message || '@lang("lang_v1.error_updating_prices")'); 
            } 
        })
        .catch(err => { 
            console.error(err); 
            alert('@lang("lang_v1.error_updating_prices")'); 
        });
    });
});
</script>
@stop
<style>
.price-display {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin: 0;
  width: 100%;
  pointer-events: none; /* يمنع التفاعل */
}
.price-display:focus { outline: none; }

/* لتغيير خلفية العناصر المختارة داخل Select2 */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #007bff !important; /* الأزرق */
    border: 1px solid #0056b3 !important;
    color: #fff !important; /* النص أبيض */
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 500;
}

</style>