@extends('layouts.master')

@push('css')
    <link rel="stylesheet" href="{{ asset('css/sale-rate-create.css') }}">
@endpush

@section('content')
<div class="sr-create-page">

    {{-- Breadcrumb --}}
    <div class="az-content-breadcrumb mb-2">
        <span><a href="{{ url('home') }}" class="text-muted text-decoration-none">Home</a></span>
        <span><a href="{{ route('sale_rate.list') }}" class="text-muted text-decoration-none">Sales Rate Application</a></span>
        <span>Apply Rates</span>
    </div>

    {{-- Page Header --}}
    <div class="sr-page-header">
        <div class="sr-header-title">
            <div class="sr-header-icon">
                <i class="fa-solid fa-tags"></i>
            </div>
            <div class="sr-header-text">
                <h2>Sales Rate Application (سیل ریٹ کا اطلاق)</h2>
                <div class="sr-subtitle">
                    <span>ٹرک کی فروخت پر متفقہ سیل ریٹ لاگو کریں اور کل رقم کا حساب لگائیں</span>
                </div>
            </div>
        </div>
        <div class="sr-header-actions">
            <a href="{{ route('sale_rate.list') }}" class="btn btn-outline-secondary px-3">
                <i class="fa fa-arrow-left mr-1"></i> Back to List
            </a>
            <button type="button" class="btn btn-primary px-4 shadow-sm" onclick="$('form[action=\'{{ route('sale_rate.apply') }}\']').submit();">
                <i class="fa-solid fa-floppy-disk mr-1"></i> Save Rate Application
            </button>
        </div>
    </div>

    {{-- Flash Notifications --}}
    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show shadow-sm border-0 mb-3" role="alert">
            <div class="d-flex align-items-center">
                <i class="fa-solid fa-circle-check fa-lg mr-2 text-success"></i>
                <span class="font-weight-bold">{{ session('success') }}</span>
                <button type="button" class="close ml-auto" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
    @endif

    @if (isset($errors) && count($errors) > 0)
        <div class="alert alert-danger alert-dismissible fade show shadow-sm border-0 mb-3" role="alert">
            <div class="d-flex align-items-center">
                <i class="fa-solid fa-triangle-exclamation fa-lg mr-2 text-danger"></i>
                <div>
                    <strong class="d-block mb-1">فارم میں درج ذیل غلطیاں موجود ہیں:</strong>
                    <ul class="mb-0 pl-3">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                <button type="button" class="close ml-auto" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
    @endif

    {{-- Main Form Card --}}
    <div class="sr-card">
        <form action="{{ route('sale_rate.apply') }}" method="POST">
            @csrf

            {{-- ════════ SECTION 1: DATE & TRUCK SELECTION ════════ --}}
            <div class="sr-section">
                <div class="sr-section-header">
                    <h5 class="sr-section-title">
                        <span class="sr-section-icon icon-purple">
                            <i class="fa-solid fa-truck-moving"></i>
                        </span>
                        Date & Truck Selection (تاریخ اور ٹرک کا انتخاب)
                    </h5>
                    <span class="badge badge-light text-secondary border px-2 py-1">مرحلہ 1</span>
                </div>

                <div class="row align-items-start">
                    {{-- Date Field --}}
                    <div class="col-lg-3 col-md-4 col-12 mb-3 mb-md-0">
                        <div class="sr-form-group">
                            <label class="sr-label" for="sale_rate_date">
                                <span>Rate Application Date <span class="text-danger">*</span></span>
                                <span class="sr-label-urdu">تاریخ اطلاق</span>
                            </label>
                            <div class="sr-input-group">
                                <i class="fa fa-calendar-alt sr-input-icon"></i>
                                <input type="text" class="sr-form-control fc-datepicker" name="sale_rate_date" id="sale_rate_date"
                                    placeholder="YYYY-MM-DD" readonly required>
                            </div>
                        </div>
                    </div>

                    {{-- Truck Selector Field --}}
                    <div class="col-lg-9 col-md-8 col-12">
                        <div class="sr-form-group">
                            <label class="sr-label" for="truck">
                                <span>Select Truck Number <span class="text-danger">*</span></span>
                                <span class="sr-label-urdu font-weight-bold">ٹرک نمبر منتخب کریں</span>
                            </label>

                            <!-- Hidden native select for form submit -->
                            <select class="form-control d-none" name="good_receipts_truck_id" id="truck"
                                value="{{ old('good_receipts_truck_id') }}" required>
                                <option value="">- Select -</option>
                                @foreach ($soldTrucks as $truck)
                                    <option value="{{ $truck->id_truck ?? null }}">
                                        {{ $truck->truck_no ?? null }}
                                    </option>
                                @endforeach
                            </select>

                            <!-- Visible custom dropdown container -->
                            <div class="custom-dropdown">
                                <div class="dropdown-toggle form-control sr-truck-toggle" id="truck-toggle">
                                    <span>
                                        <i class="fa-solid fa-truck mr-2 text-muted"></i>
                                        <span id="truck-toggle-text">- Click here to choose Truck & Items -</span>
                                    </span>
                                    <i class="fa-solid fa-chevron-down text-muted small"></i>
                                </div>

                                <div class="dropdown-content">
                                    <div class="sr-search-box">
                                        <i class="fa fa-search"></i>
                                        <input type="text" id="truck-search" class="form-control"
                                            placeholder="ٹرک نمبر یا سپلائر تلاش کریں (Search truck or supplier)..."
                                            onkeyup="showOnlyThisTruckDetails(this.value)">
                                    </div>
                                    <div class="table-responsive" style="max-height: 280px;">
                                        <table class="table sr-truck-table table-hover align-middle">
                                            <thead>
                                                <tr>
                                                    <th class="text-center" style="width: 50px;">Select</th>
                                                    <th>Truck No</th>
                                                    <th>Supplier</th>
                                                    <th>Main Category</th>
                                                    <th>Parent Category</th>
                                                    <th>Child Category</th>
                                                    <th>Marka</th>
                                                    <th class="text-center">Bori</th>
                                                    <th class="text-right text-end">Weight</th>
                                                    <th class="text-right text-end">Current Rate</th>
                                                    <th class="text-right text-end">Amount</th>
                                                </tr>
                                            </thead>
                                            <tbody id="truck-table-body">
                                                @foreach ($sales as $sale)
                                                    @if (!is_null($sale->goodReceiptTruck))
                                                        @foreach ($sale->salesItemsDetails as $saleDetails)
                                                            <tr class="truck-details"
                                                                data-truck-id="{{ $sale->goodReceiptTruck->id_truck }}"
                                                                data-truck-no="{{ $sale->goodReceiptTruck->truck_no }}"
                                                                data-salesdetails-id="{{ $saleDetails->id_sid }}"
                                                                data-supplier-id="{{ $sale->goodReceiptTruck->goodReceiptDetails->first()->goodReceipt->supplier->id_supplier ?? '' }}"
                                                                data-rent-received="{{ $sale->goodReceiptTruck->goodReceiptDetails->first()->goodReceipt->rent_recieve ?? '' }}">
                                                                <td class="text-center">
                                                                    <input type="checkbox" class="truck-checkbox" hidden
                                                                        data-truck-id="{{ $sale->goodReceiptTruck->id_truck }}">
                                                                    <span class="checkbox-icons">
                                                                        <i class="fa-solid fa-circle-check text-success fa-lg d-none"></i>
                                                                        <i class="fa-regular fa-circle text-muted fa-lg"></i>
                                                                    </span>
                                                                </td>
                                                                <td><span class="badge badge-light text-dark border font-weight-bold">{{ $sale->goodReceiptTruck->truck_no }}</span></td>
                                                                <td class="font-weight-bold text-primary">{{ $sale->goodReceiptTruck->goodReceiptDetails->first()->goodReceipt->supplier->supplier_name ?? 'N/A' }}</td>
                                                                <td>{{ $saleDetails->items_main_cate }}</td>
                                                                <td>{{ $saleDetails->items_parent_cate }}</td>
                                                                <td>{{ $saleDetails->items_child_cate }}</td>
                                                                <td><span class="badge badge-secondary text-white">{{ $saleDetails->marka }}</span></td>
                                                                <td class="text-center font-weight-bold">{{ $saleDetails->bori }}</td>
                                                                <td class="text-right text-end">{{ number_format((float)$saleDetails->weight, 0) }}</td>
                                                                <td class="text-right text-end text-muted">{{ number_format((float)$saleDetails->rate, 0) }}</td>
                                                                <td class="text-right text-end font-weight-bold">{{ number_format((float)$saleDetails->amount, 0) }}</td>
                                                            </tr>
                                                        @endforeach
                                                    @endif
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <!-- Selected Truck Info Badge (placed below toggle to keep horizontal baseline aligned) -->
                            <div class="selected-trucks mt-2" id="selected-trucks">
                                <span class="text-muted small">کوئی ٹرک منتخب نہیں ہے۔ اوپر کلک کر کے ٹرک کا انتخاب کریں۔</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ════════ SECTION 2: ITEMS & RATE CONTROL ════════ --}}
            <div class="sr-section">
                <div class="sr-section-header">
                    <h5 class="sr-section-title">
                        <span class="sr-section-icon icon-blue">
                            <i class="fa-solid fa-clipboard-list"></i>
                        </span>
                        Selected Truck Items & Rate Application (آئٹمز کی تفصیل اور ریٹ لاگو کرنا)
                    </h5>
                    <span class="badge badge-light text-secondary border px-2 py-1">مرحلہ 2</span>
                </div>

                {{-- Unified Rate Application Control Bar --}}
                <div class="sr-rate-box">
                    <div class="sr-rate-info">
                        <h6 class="font-weight-bold mb-1 text-dark d-flex align-items-center">
                            <i class="fa-solid fa-hand-holding-dollar text-primary mr-2"></i>
                            <span>Apply New Price / Rate</span>
                            <span class="sr-label-urdu ml-2 font-weight-normal">(نیا ریٹ درج کریں)</span>
                        </h6>
                        <small class="text-muted">فی 40 کلو کے حساب سے نیا ریٹ لکھیں اور 'Apply Rate' پر کلک کریں تاکہ تمام منتخب مال پر لاگو ہو جائے</small>
                    </div>

                    <div class="sr-rate-inputs">
                        <div class="sr-rate-input-wrap">
                            <span class="sr-rate-currency">Rs.</span>
                            <input type="text" class="form-control" name="custom_price" id="custom_price"
                                placeholder="مثلاً: 2500" value="{{ old('custom_price') }}" required disabled
                                onkeyup="formatWithCommas(this)">
                        </div>

                        <button type="button" class="sr-btn-apply" id="apply_price_btn"
                            onclick="calculateAmount()" disabled>
                            <i class="fa-solid fa-calculator"></i>
                            <span>Apply Rate (ریٹ لاگو کریں)</span>
                        </button>
                    </div>
                </div>

                {{-- Selected Items Table --}}
                <div class="sr-items-card">
                    <div class="table-responsive">
                        <table class="table sr-items-table align-middle" id="item-table">
                            <thead>
                                <tr>
                                    <th>Main Category</th>
                                    <th>Parent Category</th>
                                    <th>Child Category</th>
                                    <th>Marka (مارکہ)</th>
                                    <th class="text-center">Bori (بوری)</th>
                                    <th class="text-right text-end">Weight (وزن)</th>
                                    <th class="text-right text-end">Rate (ریٹ / 40kg)</th>
                                    <th class="text-right text-end">Total Amount (رقم)</th>
                                </tr>
                            </thead>
                            <tbody id="item-details">
                                <tr id="no-items-row">
                                    <td colspan="8" class="text-center py-4 text-muted">
                                        <i class="fa-solid fa-arrow-up text-primary mr-2"></i>
                                        <span>براہ کرم اوپر ڈراپ ڈاؤن سے ٹرک اور آئٹمز منتخب کریں (Please select a truck & items above to apply rates)</span>
                                    </td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th colspan="4" class="text-right text-end text-uppercase">کُل مجموعہ (Grand Total):</th>
                                    <th class="text-center">
                                        <span class="sr-kpi-pill sr-kpi-bori">
                                            <span id="total-bori">0</span> بوری
                                        </span>
                                    </th>
                                    <th class="text-right text-end">
                                        <span class="sr-kpi-pill sr-kpi-weight">
                                            <span id="total-weight">0</span> کلو
                                        </span>
                                    </th>
                                    <th class="text-right text-end text-muted small">—</th>
                                    <th class="text-right text-end">
                                        <span class="sr-kpi-pill sr-kpi-amount">
                                            Rs. <span id="total-amount">0</span>
                                        </span>
                                    </th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>

            {{-- ════════ ACTIONS FOOTER BAR ════════ --}}
            <div class="sr-footer-bar">
                <div class="sr-footer-actions-left">
                    <a href="{{ route('sale_rate.list') }}" class="btn btn-outline-danger px-4">
                        <i class="fa fa-times mr-1"></i> منسوخ کریں (Cancel)
                    </a>
                    <button type="reset" class="btn btn-light px-3 border text-secondary" onclick="location.reload();">
                        <i class="fa fa-undo mr-1"></i> ریسٹ (Reset)
                    </button>
                </div>
                <div>
                    <button type="submit" class="btn btn-primary btn-lg px-5 shadow-sm font-weight-bold">
                        <i class="fa fa-check-circle mr-1"></i> سیل ریٹ محفوظ کریں (Save & Apply Rate)
                    </button>
                </div>
            </div>

        </form>
    </div>

</div>
@endsection

@push('scripts')
<script type="text/javascript">
    // Helper to format number with commas
    function formatWithCommas(element) {
        let value = element.value.replace(/,/g, '');
        if (!isNaN(value) && value.length > 0) {
            element.value = Number(value).toLocaleString('en-US');
        }
    }

    function calculateAmount() {
        var rawVal = $('#custom_price').val();
        if (!rawVal) return;
        var newRate = parseFloat(rawVal.replace(/,/g, ''));

        if (isNaN(newRate) || newRate <= 0) {
            alert('براہ کرم درست ریٹ درج کریں (Please enter a valid rate).');
            return;
        }

        $('#item-details tr').each(function() {
            if ($(this).attr('id') === 'no-items-row') return;
            var weight = parseFloat($(this).find('.weight-input').val()) || 0;
            let newAmount = Math.round((newRate * weight) / 40);

            $(this).find('.rate-input').val(newRate);
            $(this).find('.amount-input').val(newAmount);

            $(this).find('.rateSet').text(newRate.toLocaleString());
            $(this).find('.amountSet').text(newAmount.toLocaleString());
        });

        calculateTotals();
    }

    function calculateTotals() {
        var totalBori = 0;
        var totalWeight = 0;
        var totalAmount = 0;

        $('#item-details tr').each(function() {
            if ($(this).attr('id') === 'no-items-row') return;
            var bori = parseFloat($(this).find('.bori-input').val()) || 0;
            var weight = parseFloat($(this).find('.weight-input').val()) || 0;
            var amount = parseFloat($(this).find('.amount-input').val()) || 0;

            totalBori += bori;
            totalWeight += weight;
            totalAmount += amount;
        });

        $('#total-bori').text(totalBori.toLocaleString());
        $('#total-weight').text(totalWeight.toLocaleString());
        $('#total-amount').text(totalAmount.toLocaleString());
    }

    $(document).ready(function() {
        var today = new Date();
        var formattedDate = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2);

        if (!$("#sale_rate_date").val()) {
            $("#sale_rate_date").val(formattedDate);
        }

        $("#sale_rate_date").datepicker({
            dateFormat: "yy-mm-dd",
            showOtherMonths: true,
            selectOtherMonths: true
        });
    });

    $(document).ready(function() {
        let selectedTruckNumbers = [];
        let selectedTruckIds = [];
        let selectedSuppliers = new Set();

        $('#truck-toggle').click(function() {
            $('.dropdown-content').toggle();
        });

        $('#truck-search').on('input', function() {
            showOnlyThisTruckDetails(this.value);
        });

        // Handle checkbox selection and icon toggle
        $('.truck-checkbox').on('change', function() {
            $('#custom_price').prop('disabled', false);
            $('#apply_price_btn').prop('disabled', false);
            const truckId = $(this).data('truck-id');
            const truckNo = $(this).closest('tr').data('truck-no');
            const salesDetailsId = $(this).closest('tr').data('salesdetails-id');
            const supplierName = $(this).closest('tr').find('td:nth-child(3)').text().trim();
            const icons = $(this).siblings('.checkbox-icons');

            if (this.checked) {
                selectedTruckNumbers.push(truckNo);
                selectedTruckIds.push(truckId);
                selectedSuppliers.add(supplierName);

                icons.find('.fa-circle-check').removeClass('d-none');
                icons.find('.fa-circle').addClass('d-none');

                appendSelectedTruckDetails($(this).closest('tr'));
            } else {
                const index = selectedTruckNumbers.indexOf(truckNo);
                if (index > -1) {
                    selectedTruckNumbers.splice(index, 1);
                    selectedTruckIds.splice(index, 1);
                }

                icons.find('.fa-circle-check').addClass('d-none');
                icons.find('.fa-circle').removeClass('d-none');

                removeTruckDetails(salesDetailsId, $(this).closest('tr'));

                let supplierStillExists = false;
                $('.truck-details').each(function() {
                    const otherSupplier = $(this).find('td:nth-child(3)').text().trim();
                    const otherTruckNo = $(this).data('truck-no');
                    if (selectedTruckNumbers.includes(otherTruckNo) && otherSupplier === supplierName) {
                        supplierStillExists = true;
                    }
                });
                if (!supplierStillExists) {
                    selectedSuppliers.delete(supplierName);
                }
            }

            updateSelectedTrucks(truckNo);
            filterTruckDetails();
        });

        function appendSelectedTruckDetails(truckRow) {
            $('#no-items-row').remove();

            const truckNo = truckRow.data('truck-no');
            const salesDeId = truckRow.data('salesdetails-id');

            const mainCate = truckRow.find('td:nth-child(4)').text().trim();
            const parentCate = truckRow.find('td:nth-child(5)').text().trim();
            const childCate = truckRow.find('td:nth-child(6)').text().trim();
            const marka = truckRow.find('td:nth-child(7)').text().trim();
            const bori = parseFloat(truckRow.find('td:nth-child(8)').text()) || 0;
            const weight = parseFloat(truckRow.find('td:nth-child(9)').text().replace(/,/g, '')) || 0;
            const rate = parseFloat(truckRow.find('td:nth-child(10)').text().replace(/,/g, '')) || 0;
            const amount = parseFloat(truckRow.find('td:nth-child(11)').text().replace(/,/g, '')) || 0;

            $('#item-details').append(`
                <tr data-truck-no="${truckNo}" data-salesdetails-id="${salesDeId}">
                    <td>
                        <input type="hidden" name="salesDeId[]" value="${salesDeId}">
                        <input type="hidden" name="mainCate[]" value="${mainCate}">
                        <span class="font-weight-bold text-dark">${mainCate}</span>
                    </td>
                    <td>
                        <input type="hidden" name="parentCate[]" value="${parentCate}">
                        <span>${parentCate || '—'}</span>
                    </td>
                    <td>
                        <input type="hidden" name="childCate[]" value="${childCate}">
                        <span>${childCate || '—'}</span>
                    </td>
                    <td>
                        <input type="hidden" name="marka[]" value="${marka}">
                        <span class="badge badge-light text-dark border">${marka}</span>
                    </td>
                    <td class="text-center">
                        <input type="hidden" class="bori-input" name="bori[]" value="${bori}">
                        <span class="boriSet font-weight-bold">${bori}</span>
                    </td>
                    <td class="text-right text-end">
                        <input type="hidden" class="weight-input" name="weight[]" value="${weight}">
                        <span class="weightSet">${weight.toLocaleString()}</span>
                    </td>
                    <td class="text-right text-end">
                        <input type="hidden" class="rate-input" name="rate[]" value="${rate}">
                        <span class="rateSet font-weight-bold text-primary">${rate.toLocaleString()}</span>
                    </td>
                    <td class="text-right text-end">
                        <input type="hidden" class="amount-input" name="amount[]" value="${amount}">
                        <span class="amountSet font-weight-bold text-success">${amount.toLocaleString()}</span>
                    </td>
                </tr>
            `);

            calculateTotals();
        }

        function removeTruckDetails(salesDetailsId, truckRow) {
            $(`#item-details tr[data-salesdetails-id="${salesDetailsId}"]`).remove();

            if ($('#item-details tr').length === 0) {
                $('#item-details').html(`
                    <tr id="no-items-row">
                        <td colspan="8" class="text-center py-4 text-muted">
                            <i class="fa-solid fa-arrow-up text-primary mr-2"></i>
                            <span>براہ کرم اوپر ڈراپ ڈاؤن سے ٹرک اور آئٹمز منتخب کریں (Please select a truck & items above to apply rates)</span>
                        </td>
                    </tr>
                `);
            }

            calculateTotals();
        }

        $(document).click(function(event) {
            if (!$(event.target).closest('.custom-dropdown').length) {
                $('.dropdown-content').hide();
            }
        });

        function updateSelectedTrucks(truckNo) {
            if (selectedTruckNumbers.length > 0) {
                const uniqueTrucks = [...new Set(selectedTruckNumbers)];
                $('#selected-trucks').html(`
                    <div class="sr-selected-badge">
                        <i class="fa-solid fa-truck-fast"></i>
                        <span>Selected Truck: <strong>${uniqueTrucks.join(', ')}</strong></span>
                        <span class="badge badge-white bg-white text-dark ml-2">${selectedTruckIds.length} Item(s) Selected</span>
                    </div>
                `);
                $('#truck').html('');
                selectedTruckIds.forEach(function(truckId) {
                    $('#truck').append('<option value="' + truckId + '" selected>' + truckNo + '</option>');
                });
                $('#truck-toggle-text').text(uniqueTrucks.join(', '));
            } else {
                $('#selected-trucks').html('<span class="text-muted small">کوئی ٹرک منتخب نہیں ہے۔ اوپر کلک کر کے ٹرک کا انتخاب کریں۔</span>');
                $('#truck').html('');
                $('#truck-toggle-text').text('- Click here to choose Truck & Items -');
            }
        }

        $('#truck-table-body').on('click', '.truck-details', function(e) {
            if ($(e.target).is('input[type="checkbox"]')) return;
            const checkbox = $(this).find('.truck-checkbox')[0];
            checkbox.checked = !checkbox.checked;
            $(checkbox).trigger('change');
        });

        function filterTruckDetails() {
            const allTrucks = {};

            $('.truck-details').each(function() {
                const truckNo = $(this).data('truck-no');
                const isSelected = selectedTruckNumbers.includes(truckNo);

                if (!allTrucks[truckNo]) {
                    allTrucks[truckNo] = { count: 0, checked: 0 };
                }
                allTrucks[truckNo].count++;
                if (isSelected) {
                    allTrucks[truckNo].checked++;
                }
            });

            $('.truck-details').each(function() {
                const truckNo = $(this).data('truck-no');
                const allSelected = allTrucks[truckNo].checked === allTrucks[truckNo].count;

                if (allSelected) {
                    $(this).find('.truck-checkbox').prop('disabled', false);
                    $(this).removeClass('disabled');
                } else {
                    if (selectedTruckNumbers.length > 0 && !selectedTruckNumbers.includes(truckNo)) {
                        $(this).find('.truck-checkbox').prop('disabled', true);
                        $(this).addClass('disabled');
                    } else if ($('.truck-checkbox:checked').length === 0) {
                        $('#custom_price').prop('disabled', true);
                        $('#apply_price_btn').prop('disabled', true);
                        $('#truck').html('');
                        $(this).find('.truck-checkbox').prop('disabled', false);
                        $(this).removeClass('disabled');
                    }
                }
            });
        }

        window.showOnlyThisTruckDetails = function(searchValue) {
            searchValue = searchValue.toLowerCase();
            document.querySelectorAll('#truck-table-body .truck-details').forEach(function(row) {
                const cells = row.querySelectorAll('td');
                let matchFound = false;

                cells.forEach(function(cell) {
                    if (cell.textContent.toLowerCase().includes(searchValue)) {
                        matchFound = true;
                    }
                });

                row.style.display = matchFound ? '' : 'none';
            });
        };
    });
</script>
@endpush