@if (isset($data) && !empty($data) && count($data) > 0)
@php
    $i = 1;
@endphp

<div class="table-responsive">
    <table class="table text-md-nowrap text-center our-table table-hover align-middle mb-0"
           id="example2" width="100%"
           style="border: 1px solid #e2e8f0; border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden;">

        <thead>
            <tr style="background-color: #0f172a; color: #ffffff;">
                <th width="3%" class="py-3 text-white border-0 font-weight-bold">#</th>
                <th width="9%" class="py-3 text-white border-0 font-weight-bold">{{ __('home.productNo') }}</th>
                <th width="18%" class="py-3 text-white border-0 text-right pr-3 font-weight-bold">{{ __('home.product') }}</th>
                <th width="9%" class="py-3 text-white border-0 font-weight-bold">{{ __('home.branch') }}</th>
                <th width="9%" class="py-3 text-white border-0 font-weight-bold">{{ __('home.groups') }}</th>
                <th width="8%" class="py-3 text-white border-0 font-weight-bold">{{ __('home.stock_type') }}</th>
                <th width="7%" class="py-3 text-white border-0 font-weight-bold">{{ __('home.productlocation') }}</th>
                <th width="7%" class="py-3 text-white border-0 font-weight-bold" style="background-color: #1e293b;">
                    {{ __('home.quantity') }} <small style="color: #38bdf8;">(متر/حبة)</small>
                </th>
                <th width="8%" class="py-3 text-white border-0 font-weight-bold">{{ __('home.purchaseproductwithouttax') }}</th>
                <th width="7%" class="py-3 text-white border-0 font-weight-bold">{{ __('home.Wholesale_price') }}</th>
                <th width="8%" class="py-3 text-white border-0 font-weight-bold">{{ __('home.sellingproduct without tax') }}</th>
                <th width="7%" class="py-3 text-white border-0 font-weight-bold">{{ __('home.refnumber') }}</th>
                <th width="10%" class="py-3 text-white border-0 font-weight-bold">{{ __('home.notesClient') }}</th>
                <th width="9%" class="py-3 text-white border-0 font-weight-bold" style="background-color: #1e293b;">{{ __('home.operations') }}</th>
            </tr>
        </thead>

        <tbody>
            @foreach ($data as $product)
            <tr id="{{ $product->id }}" style="transition: background-color 0.15s ease;">
                {{-- 1. التسلسل --}}
                <td id="tableData" dir="ltr" class="font-weight-bold text-muted" style="border-bottom: 1px solid #f1f5f9;">
                    {{ $product->id }}
                </td>

                {{-- 2. رقم/كود المنتج --}}
                <td id="tableData" dir="ltr" class="font-weight-bold" style="border-bottom: 1px solid #f1f5f9; color: #2563eb;">
                    <span class="badge badge-light border px-2 py-1" style="font-size: 12.5px;">{{ $product->Product_Code }}</span>
                </td>

                {{-- 3. اسم المنتج --}}
                <td id="tableData" data-target="product_name" class="text-right pr-3 font-weight-bold text-dark" style="border-bottom: 1px solid #f1f5f9; font-size: 14px;">
                    {{ $product->product_name }}
                </td>

                {{-- 4. الفرع --}}
                <td id="tableData" data-target="product_name" class="font-weight-semibold text-secondary" style="border-bottom: 1px solid #f1f5f9;">
                    {{ $product->branch->name ?? '---' }}
                </td>

                {{-- 5. المجموعة --}}
                <td id="tableData" data-target="numberofpice" style="border-bottom: 1px solid #f1f5f9;">
                    <span class="badge badge-light text-dark border px-2 py-1 font-weight-bold">{{ $product->product_group_data->group_ar ?? 'عام' }}</span>
                </td>

                {{-- 6. نوع المخزون --}}
                <td id="tableData" class="text-center" style="border-bottom: 1px solid #f1f5f9;">
                    @if($product->stock_type == 'internal')
                        <span class="badge badge-primary px-2 py-1 font-weight-bold" style="border-radius: 6px;">{{ __('supprocesses.internal_stock') }}</span>
                    @elseif($product->stock_type == 'external')
                        <span class="badge badge-warning px-2 py-1 font-weight-bold text-dark" style="border-radius: 6px;">{{ __('supprocesses.external_stock') }}</span>
                    @else
                        <span class="text-muted">-</span>
                    @endif
                </td>

                {{-- 7. موقع التخزين --}}
                <td id="tableData" data-target="numberofpice" class="text-muted font-weight-bold" style="border-bottom: 1px solid #f1f5f9;">
                    {{ $product->Product_Location ?? '-' }}
                </td>

                {{-- 8. الرصيد / الكمية --}}
                <td id="tableData" data-target="numberofpice" style="border-bottom: 1px solid #f1f5f9; background-color: #f8fafc;">
                    <span class="badge {{ $product->numberofpice <= ($product->minmum_quantity_stock_alart ?? 0) ? 'badge-danger' : 'badge-success' }} px-2 py-1 font-weight-bold" style="font-size: 13px; border-radius: 6px;">
                        {{ $product->numberofpice }}
                    </span>
                </td>

                {{-- 9. سعر الشراء --}}
                <td id="tableData" data-target="numberofpice" class="font-weight-bold text-muted" style="border-bottom: 1px solid #f1f5f9;">
                    {{ number_format($product->purchasingـprice, 2) }}
                </td>

                {{-- 10. سعر الجملة --}}
                <td id="tableData" data-target="numberofpice" class="font-weight-bold" style="border-bottom: 1px solid #f1f5f9; color: #0891b2;">
                    {{ number_format($product->Wholesale_price, 2) }}
                </td>

                {{-- 11. سعر البيع --}}
                <td id="tableData" data-target="numberofpice" class="font-weight-bold text-success" style="border-bottom: 1px solid #f1f5f9; font-size: 14px;">
                    {{ number_format($product->sale_price, 2) }}
                </td>

                {{-- 12. الرقم المرجعي --}}
                <td id="tableData" data-target="numberofpice" class="small text-muted" style="border-bottom: 1px solid #f1f5f9;">
                    {{ $product->refnumber == null ? __('home.notdata') : str_replace("+", " - ", $product->refnumber) }}
                </td>

                {{-- 13. الملاحظات --}}
                <td id="tableData" data-target="numberofpice" class="small text-muted text-truncate" style="max-width: 120px; border-bottom: 1px solid #f1f5f9;" title="{{ $product->notes }}">
                    {{ $product->notes ?? '-' }}
                </td>

                {{-- 14. أزرار العمليات --}}
                <td style="border-bottom: 1px solid #f1f5f9; background-color: #f8fafc;">
                    <div class="d-inline-flex align-items-center">
                        {{-- زر الحذف --}}
                        <a class="modal-effect btn btn-sm btn-outline-danger font-weight-bold py-1 px-2 shadow-sm"
                           data-effect="effect-scale"
                           data-id="{{ $product->id }}"
                           data-toggle="modal"
                           href="#delete_quotation"
                           style="border-radius: 6px; font-size: 12px;" title="{{ __('home.delete') }}">
                            <i class="fa fa-trash"></i>
                        </a>
                    </div>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

{{-- ترقيم الصفحات Pagination --}}
<div class="d-flex justify-content-between align-items-center mt-3 p-2 bg-light rounded" id="ajax_pagination_in_search">
    <div class="font-weight-bold text-muted small">
        عرض <strong>{{ $data->firstItem() }}</strong> إلى <strong>{{ $data->lastItem() }}</strong> من إجمالي <strong>{{ $data->total() }}</strong> صنف
    </div>
    <div>
        {{ $data->links() }}
    </div>
</div>

@else
{{-- في حال عدم وجود نتائج --}}
<div class="alert alert-warning text-center font-weight-bold py-4 my-3" style="border-radius: 10px; border: 1.5px dashed #f59e0b; background-color: #fffbeb;">
    <i class="fa fa-search-minus fa-2x d-block mb-2 text-warning"></i>
    <span>{{ __('home.notfounddata') }}</span>
</div>
@endif