@extends('productcatalogue::layouts.master')
@section('css')
<style>.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#priceRangeSlider .slider .tooltip {
    font-size: 12px;
}
#priceRangeSlider {
    margin: 0 5px;
}
/* Firefox */
.no-spinner[type=number] {
    -moz-appearance: textfield;
}</style>
    @php
    $themeColor = request()->get('c') ? base64_decode(request()->get('c')) : null;
@endphp
 @php
    $quantity = request()->get('q') ? base64_decode(request()->get('q')) : null;
    $unit2= request()->get('u') ? base64_decode(request()->get('u')) : null;
    
@endphp
@if($themeColor)
    <style>
        :root {
            --main-color: {{ $themeColor }};
        }
    </style>
@endif
@endsection
@section('content')

    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg sticky-top">
        <div class="container">
            <a class="navbar-brand" href="#">
              @php
                $logoFile = request()->get('l') ? base64_decode(request()->get('l')) : null;
                
                @endphp

               @if($logoFile)
                    <img src="{{ asset('uploads/business_logos/' . $logoFile) }}" alt="ROOT" width="60">
                @endif
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll"
                aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
                <i class="bi bi-justify"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarScroll">
                <div class="navbar-nav me-auto my-2 my-lg-0" style="--bs-scroll-height: 220px;">
                </div>
                <div class="col-lg-2 col-xs-6 d-flex me-2">
                    <select class="js-example-basic-single form-control" style="width: 100%;" id="selectedCategory" name="category_id">
                        <option value="" selected>يرجى اختيار الصنف</option>
                        @foreach ($products as $product_category)
                            <option value="{{ $product_category->first()->product->category->id ?? '0' }} ">
                                {{ $product_category->first()->product->category->name ?? __('lang_v1.uncategorized')}} </option>
                        @endforeach 
                    </select>
                </div>
                <div class="col-lg-2 col-xs-6">
                <form class="d-flex" role="search" name="search_catalouge_form" id="search_catalouge_form" method="post"
                    action="javascript:void(0)">
                    <input class="form-control me-2" id="searchInput" name="search" type="search"
                        placeholder="ابحث عن المنتج" aria-label="Search">
                </form>
             </div>
            </div>
        </div>
    </nav>
    <!-- Products -->
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="accordion mt-3" id="categories_accordion">
                    @foreach ($products as $key => $product_category)
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="category{{ $loop->index }}">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#panelsStayOpen-collapseOne-{{ $loop->index }}" aria-expanded="true"
                                    aria-controls="panelsStayOpen-collapseOne">
                                    {{ $product_category->first()->product->category->name ?? __('lang_v1.uncategorized') }}
                                </button>
                            </h2>
                            <div id="panelsStayOpen-collapseOne-{{ $loop->index }}"
                                class="accordion-collapse collapse show ">
                                <div class="accordion-body">
                                    <div class="row g-2">
                                        @foreach ($product_category as $product)
                                            <div class="col-lg-3 col-md-4 col-sm-12">
                                                <div class="product">
                                                    <div class="card text-center">
                                                        <div class="card-header">
                                                            <span>{{ $product['product']->name }}</span>
                                                            <div class="red-circle"><span class="circle-user-qtn"
                                                                    id="product_count"></span></div>
                                                            | SKU:
                                                            <span>{{ $product->sub_sku }}</span>
                                                        </div>
                                                        <div class="card-body">
                                                            <img src="{{ $product['media'][0]->display_url ??  $product['product']->image_url  }}"
                                                                class="card-img-top" alt="product image">
                                                            <div class="row"></div>
                                                            <div class="input-group my-3">
                                                                <button class="btn btn-primary add-product" type="button">
                                                                    <i class="bi bi-plus"></i>
                                                                </button>
                                                                 
                                                                    <input
                                                                            max="1000" min="0"
                                                                            step="1" data-sku="{{ $product->id }}" data-sub_sku="{{ $product->sub_sku }}" 
                                                                             data-qtn="{{ $quantity ? $product->variation_location_details->first()->qty_available : '' }}"
                                                                    data-name="{{ $product['product']->name }}"
                                                                    data-price="{{ $product->default_sell_price }}"
                                                                    value="0" 
                                                                    class="form-control btn btn-primary text-center product-item red_qty"
                                                                    placeholder=""
                                                                    aria-label="Example text with two button addons">

                                                                <button class="btn btn-primary remove-product"
                                                                    type="button">
                                                                    <i class="bi bi-dash"></i>
                                                                </button>
                                                            </div>
                                                        
                                                            <select id="productSelect" class="form-select form-select mb-3" @if(!$unit2) style="display: none;" @endif
                                                                aria-label="Small select example">

                                                                <option value="{{ $product['product']['unit']->id }}"
                                                                    data-name="{{ $product['product']['unit']->actual_name }}">
                                                                    {{ $product['product']['unit']->actual_name }}</option>
                                                                @if ($product['product']->sub_unit_ids != null)
                                                                    @foreach ($product['product']->sub_unit_ids as $unit )
                                                                    @php
                                                                    $subUnit = \App\Unit::find($unit); 
                                                                    
                                                                    // Assuming you have a SubUnit model
                                                                @endphp
                                                                       <option value="{{  $unit }}" data-name="{{ $subUnit->name }}"> 
                                                                        {{ $subUnit->actual_name }} | {{ number_format($subUnit->base_unit_multiplier, 0) }}
                                                                    </option>
                                                                    @endforeach
                                                                @endif
                                                            </select>
                                           
                                                          {{-- $product['product']->alert_quantity && $product['product']->alert_quantity > 0 --}}
                                                
                                                            @if ( $quantity)
                                                                <p class="card-text avilable-qtn">الكمية المتوفرة:
                                                                 
                                                               
                                                                   
                                                                   
                                                                      <span>{{ number_format($product->variation_location_details->first()->qty_available,0 )}}</span>

                                                                   
                                                                </p>

                                                            @endif
                                                            @if ($product['product_variation']->variation_template_id != null)
                                                                <p class="card-text">
                                                                    {{ $product['product_variation']->name }} :
                                                                    <span>({{ $product->name }}) -
                                                                        {{ number_format($product->sell_price_inc_tax, 0) }}</span>
                                                                        {{-- <span>{{ number_format($product->variation_location_details->first()->qty_available, 0) }}</span> --}}
                                                                </p>
                                                            @endif
                                                        </div>
                                                        <div class="card-footer text-body-secondary">
                                                            السعر:
                                                            <span>{{ number_format($product->default_sell_price, 0) }}</span>
                                                            د.ع
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            @if ($loop->iteration % 4 == 0)
                                                <div class="clearfix"></div>
                                            @endif
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    <!-- Filters -->
    <button id="filter_button" class="btn btn-primary" type="button" data-bs-toggle="offcanvas"
        data-bs-target="#filters_section" aria-controls="filters_section">
        <i class="bi bi-funnel"></i>
    </button>

    <div class="offcanvas offcanvas-start" tabindex="-1" id="filters_section" aria-labelledby="offcanvasExampleLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasExampleLabel">محددات البحث</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <form name="filter_catalouge_form" id="filter_catalouge_form" method="post">
                @csrf
                <div class="mb-3">
                    <label class="form-label">رتب حسب</label>
                    <div class="row"></div>
                    <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
                        <input type="radio" name="created_at" value="created_at_asc" class="btn-check" id="btncheck1"
                            autocomplete="off">
                        <label class="btn btn-outline-light" for="btncheck1"> الأحدث تصاعديا</label>
                        <input type="radio" name="created_at" value="created_at_desc" class="btn-check"
                            id="btncheck2" autocomplete="off">
                        <label class="btn btn-outline-light" for="btncheck2"> الأحدث تنازليا</label>

                        <input type="radio" name="price_filter" value="price_asc" class="btn-check" id="btncheck3"
                            autocomplete="off">
                        <label class="btn btn-outline-light" for="btncheck3">السعر تصاعديا</label>
                        <input type="radio" name="price_filter" value="price_desc" class="btn-check" id="btncheck4"
                            autocomplete="off">
                        <label class="btn btn-outline-light" for="btncheck4">السعر تنازليا</label>
                    </div>
                </div>
                <div class="mb-3">
                    <label for="priceRangeSlider" class="form-label">مجال السعر</label>
                    <div class="d-flex align-items-center">
                        <span id="price_range_min" class="me-2">0</span>
                        <div id="priceRangeSlider" class="flex-grow-1 mx-2"></div>
                        <span id="price_range_max" class="ms-2">1000</span>
                    </div>
                </div>
                <div class="mb-3">
                    <label for="filter_category" class="form-label">اختر الصنف</label>

                    <select class="form-select" name="category_id" aria-label="Category filter select"
                        id="filter_category">
                        <option value="" selected>يرجى اختيار الصنف</option>
                        @foreach ($products as $product_category)
                            <option value="{{ $product_category->first()->product->category->id ?? '0' }} ">
                                {{ $product_category->first()->product->category->name ?? __('lang_v1.uncategorized') }} </option>
                        @endforeach
                    </select>
                </div>

                <div class="mt-5 text-center">
                    <button id="search_filter" type="submit" class="btn btn-light" data-bs-dismiss="offcanvas"
                        aria-label="Close">البحث</button>
                </div>
                <input type="hidden" name="business_id" id="business_id" value="{{ $business->id }}">
                <input type="hidden" name="location_id" id="location_id" value="{{ $location_id }}">
            </form>
            <input type="hidden" name="location_phone" id="location_phone" value="{{ $location_phone }}">
            <input type="hidden" name="low_price" id="low_price" value="{{ number_format($low_price, 0) }}">
            <input type="hidden" name="top_price" id="top_price" value="{{ number_format($top_price, 0) }}">
        </div>
    </div>
    <div class='scrolltop no-print'>
        <div class='scroll icon'><i class="fas fa-angle-up"></i></div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="payment_confirmation" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form id="user_information_validation">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="staticBackdropLabel">تأكيد عملية الشراء</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center">
                        <p class="fs-4">هل أنت متأكد من عملية الشراء؟</p>
                        <p class="fs-5">منتجاتك</p>
                        <table class="table table-sm table-striped" id="selectedProductTable">
                            <thead>
                                <tr>
                                    <th scope="col">اسم المنتج</th>
                                    <th scope="col">الكمية</th>
                                    <th scope="col">السعر</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                    <div class="container">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="user_name" class="form-label">ادخل اسمك</label>
                                <input type="text" class="form-control" id="user_name" name="user_name" value="">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="user_phone" class="form-label">ادخل رقمك</label>
                                <input type="text" class="form-control" id="user_phone" name="user_phone" value="">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                               <label for="city_id" class="form-label">المدينة</label>
                               
                               {!! Form::select('city_id', $cities, null, ['class' => 'form-control',"id" =>'city_id','placeholder' => 'المدينة', 'required']) !!}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="address" class="form-label">العنوان</label>
                                <input type="text" class="form-control" id="address" name="address" value="">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            لا
                            <i class="bi bi-x-circle-fill"></i>
                        </button>
                        <button type="submit" id="confirm_order" class="btn btn-primary">
                            نعم
                            <i class="bi bi-check-circle-fill"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- whatsapp modal -->
    <div class="modal fade" id="whatsappModal" tabindex="-1" aria-labelledby="whatsappModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="whatsappModalLabel">طلب الشراء</h1>
                </div>
                <div class="modal-body">
                    <h3>يرجى الاحتفاظ برقم الفاتورة</h3>
                    <h3>رقم فاتورتك: <span id="bill_number"></span></h3>
                    <h3>الاسم: <span id="bill_name"></span></h3>
                    <h3>رقم الهاتف: <span id="bill_phone"></span></h3>
                    <h3>العنوان: <span id="bill_address"></span></h3>
                </div>
                <div class="modal-footer">
                    <a id="whatsapp_number" href="" target="_blank" type="button" class="btn btn-primary">
                        التوجه إلى
                        <i class="bi bi-whatsapp"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <footer class="fixed-bottom">
        <div class="container">
            <div class="row">
                <div class="col">
                    <button id="order_button" disabled type="submit" class="btn btn-light" data-bs-toggle="modal"
                        data-bs-target="#payment_confirmation">اطلب</button>
                </div>
                <div class="col text-end">
                    <div class="btn-group" role="group" aria-label="Basic outlined example">
                        <a href="https://wa.me/+9647721448234" class="btn btn-outline-light" target="_blank">
                            <i class="bi bi-whatsapp"></i>
                        </a>
                        <a href="https://www.facebook.com/rootoiq" class="btn btn-outline-light" target="_blank">
                            <i class="bi bi-facebook"></i>
                        </a>
                        <a href="https://www.instagram.com/root0iq/" class="btn btn-outline-light" target="_blank">
                            <i class="bi bi-instagram"></i>
                        </a>
                        <a href="https://www.linkedin.com/company/root0iq/" class="btn btn-outline-light"
                            target="_blank">
                            <i class="bi bi-linkedin"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

@endsection

@section('javascript')
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <!-- jQuery Validation -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.min.js"></script>

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script>
         let selectedProductItems;
        let selectedProducts = [];
        $(document).ready(function() {
            var showUnitSelect = @json($unit2);
            var restrictByQuantity = @json(!empty($quantity) && $quantity);
            $('.js-example-basic-single').select2({
                width: 'resolve'
            });
            console.log(restrictByQuantity);
            
            // Price Range
            let low_price = 0;
            let top_price = 100000;

            var slider = new Slider('#priceRangeSlider', {
                min: low_price,
                max: top_price,
                value: [low_price, top_price],
                range: true,
                tooltip_split: true,
            });

            slider.on('slide', function(values) {
                $('#price_range_min').text(values[0]);
                $('#price_range_max').text(values[1]);
            });

            
            // let selectedProductsJSON = JSON.stringify(selectedProducts) || [];
            // localStorage.setItem("selectedProducts", selectedProductsJSON);

           

            $('#order_button').click(function() {
                selectedProductItems = null;
                let totalQuantity = 0;
                let totalPrice = 0;
                 let selectedProducts = JSON.parse(localStorage.getItem('selectedProducts')) || [];

                if (selectedProducts.length === 0) {
                    alert("No products selected!");
                    return;
                }
                // Clear previous selections in the confirmation table
                $('#payment_confirmation tbody tr').remove();
                $('#selectedProductTable tbody tr').remove();

                // Loop through product inputs
             

                // Append selected products to confirmation table
                $.each(selectedProducts, function(key, value) {
                    selectedProductItems = `
                        <tr data-sku="${value.productNameId}">
                            <th>${value.productName} (${value.productNameSku})</th>
                            <th class="quantity">${value.productQtn} / ${value.productPiece}</th>
                            <th class="price">${Math.round(value.productPrice)}</th>
                          
                        </tr>
                    `;
                    $('#payment_confirmation tbody').append(selectedProductItems);
                });

                // Calculate totals
                $(selectedProducts).each(function(index, product) {
                    totalQuantity += parseInt(product.productQtn);
                    totalPrice += parseFloat(product.productPrice);
                });

                $('#selectedProductTable tbody').append(`
                    <tr>
                        <td>المجموع:</td>
                        <td>${totalQuantity}</td>
                        <td>${Math.round(totalPrice)}</td>
                       
                    </tr>
                `);
            });
// Handle manual input change
            $(document).on('input', '.red_qty', function() {
                let newValue = parseInt($(this).val()) || 0; // Fallback to 0 if empty or invalid
                let qtnValue = $(this).attr('data-qtn');

                // Update red circle
                if (newValue === 0) {
                    $(this).parent().parent().prev().find(".red-circle").hide();
                } else {
                    $(this).parent().parent().prev().find(".red-circle").show();
                    $(this).parent().parent().prev().find(".circle-user-qtn").html(newValue);
                }

                // Handle order button state
                if (newValue > 0) {
                    $("#order_button").removeAttr("disabled");
                } else {
                    // Check if all inputs are 0 before disabling
                    let allZero = true;
                    $('.product-item').each(function() {
                        if (parseInt($(this).val()) > 0) {
                            allZero = false;
                            return false;
                        }
                    });
                    if (allZero) {
                        $("#order_button").attr("disabled", "disabled");
                    }
                }

                // Enforce max quantity restriction
                if (restrictByQuantity && qtnValue !== '' && newValue > qtnValue) {
                    $(this).val(qtnValue);
                    let noAvalibleQtn = `<p class="no-avalible-qtn">لا يمكن اختيار أكثر من الكمية المتوفرة</p>`;
                    $(this).parent().next().next().after(noAvalibleQtn);
                    $(this).siblings(".add-product").attr("disabled", true);
                } else {
                    $(this).siblings(".add-product").attr("disabled", false);
                    $(this).parent().next().next().next(".no-avalible-qtn").remove();
                }
                 updateSelectedProduct(this);
            });

            $(document).on('click', '.add-product', function() {
                $("#order_button").removeAttr("disabled");
                var inputValue = $(this).next().val();
                var qtnValue = $(this).next().attr('data-qtn');

                var newValue = parseInt(inputValue) + 1;
                if (!restrictByQuantity || newValue <= qtnValue || qtnValue == '') {
                    $(this).next().val(newValue);
                    if (newValue === 0)
                        $(this).parent().parent().prev().find(".red-circle").hide();
                    else {
                        $(this).parent().parent().prev().find(".red-circle").show();
                        $(this).parent().parent().prev().find(".circle-user-qtn").html(newValue);
                    }
                }else{
                    let noAvalibleQtn = `
                        <p class="no-avalible-qtn">لا يمكن اختيار أكثر من الكمية المتوفرة</p>
                    `;
                    $(this).parent().next().next().after(noAvalibleQtn);
                    $(this).attr("disabled", true);
                }
               updateSelectedProduct($(this).next());
            });
            $(document).on('click', '.remove-product', function() {
                $('.product-item').each(function() {
                   
                if ($(this).val() > 0) {

                    $("#order_button").removeAttr("disabled");
                }
                else if ($(this).val() == 0) { 
                   
    
}
            });
                var qtnValue = $(this).prev().attr('data-qtn');
                
                if ($(this).prev().val() <= 0) {
                    return;
                }
                var inputValue = $(this).prev().val();
                var newValue = parseInt(inputValue) - 1;
                $(this).prev().val(newValue);
                if (newValue <= qtnValue){
                    console.log($(this));
                    $(this).prev().prev().attr("disabled", false);
                    $(this).parent().next().next().next().remove();
                }
                if (newValue === 0)
                    $(this).parent().parent().prev().find(".red-circle").hide();
                else {
                    $(this).parent().parent().prev().find(".red-circle").show();
                    $(this).parent().parent().prev().find(".circle-user-qtn").html(newValue);
                }
                // $(this).parent().parent().prev().find(".circle-user-qtn").html(newValue);
                  updateSelectedProduct($(this).prev());
            });

            $("#confirm_order").click(function() {
                

            });
            $('#selectedCategory').on('change', function() {
            
                let selectedCategory = $(this).val();
                let business_id = $("#business_id").val();
                let location_id = $("#location_id").val();
                $.ajax({
                    type: 'post',
                    url: '/catalogue-filter',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        category_id: selectedCategory,
                        business_id: business_id,
                        location_id: location_id
                    },
                    success: function(result) {
                        var products = result;
                        var productListHTML = '';
                        $.each(products, function(key, product_category) {
                            productListHTML += '<div class="accordion-item">';
                            productListHTML +=
                                '<h2 class="accordion-header" id="category' + (key +
                                    1) + '">';
                            productListHTML +=
                                '<button class="accordion-button" type="button" data-bs-toggle="collapse"';
                            productListHTML +=
                                'data-bs-target="#panelsStayOpen-collapseOne-' + (key +
                                    1) + '" aria-expanded="true"';
                            productListHTML +=
                                'aria-controls="panelsStayOpen-collapseOne">';
                            // console.log(product_category[0].category);
                            if (product_category[0].product.category !== null &&
                                product_category[0].product.category.name !== null) {
                                productListHTML += product_category[0].product.category
                                    .name;
                            } else {
                                productListHTML += 'غير مصنف';
                            }
                            productListHTML += '</button>';
                            productListHTML += '</h2>';
                            productListHTML += '<div id="panelsStayOpen-collapseOne-' +
                                (key + 1) +
                                '" class="accordion-collapse collapse show">';
                            productListHTML += '<div class="accordion-body">';
                            productListHTML += '<div class="row g-2">';

                            $.each(product_category, function(index, product) {
                                console.log
                                productListHTML +=
                                    '<div class="col-lg-3 col-md-4 col-sm-12">';
                                productListHTML += '<div class="product">';
                                productListHTML +=
                                    '<div class="card text-center">';
                                productListHTML += '<div class="card-header">';
                                productListHTML += '<span>' + product.product
                                    .name +
                                    '</span> <div class="red-circle"><span class="circle-user-qtn" id="product_count"></span></div>| SKU: <span>' +
                                    product
                                    .sub_sku + '</span>';
                                productListHTML += '</div>';
                                productListHTML += '<div class="card-body">';
                               let imageUrl = '';

                                if (product.media && product.media.length > 0 && product.media[0].display_url) {
                                    imageUrl = product.media[0].display_url;
                                } else if (product.product.image_url) {
                                    imageUrl = product.product.image_url;
                                } else {
                                    imageUrl = '/images/default.png'; // fallback if no image
                                }

                                productListHTML += '<img src="' + imageUrl + '" class="card-img-top" alt="product image">';
                                productListHTML += '<div class="row"></div>';
                                productListHTML +=
                                    '<div class="input-group my-3">';
                                productListHTML +=
                                    '<button class="btn btn-primary add-product" type="button"><i class="bi bi-plus"></i></button>';
                                productListHTML += '<input data-sku="' + product
                                    .id +  '"data-sub_sku="' + product.sub_sku + '" ' + '" data-qtn="' + Math.round(product.variation_location_details[0].qty_available ?? 0) + '" data-name="' +
                                    product
                                    .product.name + '" data-price="' + Math
                                    .round(product
                                        .default_sell_price) +
                                    '" value="0"   max="1000" min="0" step="1" class="form-control btn btn-primary text-center product-item red_qty" placeholder="" aria-label="Example text with two button addons">';
                                productListHTML +=
                                    '<button class="btn btn-primary remove-product" type="button"><i class="bi bi-dash"></i></button>';
                                productListHTML += '</div>';
                                console.log(showUnitSelect);
                                
                                productListHTML +=
                                    '<select id="productSelect" class="form-select form-select mb-3" aria-label="Small select example"' 
                  + (showUnitSelect ? '' : 'style="display:none;"')  + '>';
                                productListHTML += '<option value="' + product
                                    .product.unit.id + '" data-name="' + product
                                    .product.unit.actual_name + '">' + product
                                    .product.unit.actual_name + '</option>';
                                $.each(product['product']['unit']['sub_units'],
                                    function(i, unit) {
                                        productListHTML +=
                                            '<option value="' + unit.id +
                                            '" data-name="' + unit
                                            .actual_name + '">' + unit
                                            .actual_name + ' | ' + Math
                                            .round(unit
                                                .base_unit_multiplier) +
                                            '</option>';
                                    });
                                productListHTML += '</select>';
                               if (restrictByQuantity) {
                                    let qtyAvailable = 0;

                                    if (product.variation_location_details && product.variation_location_details.length > 0) {
                                        qtyAvailable = product.variation_location_details[0].qty_available ?? 0;
                                    }

                                    productListHTML +=
                                        '<p class="card-text">الكمية المتوفرة: <span>' +
                                        Math.round(qtyAvailable) +
                                        '</span></p>';
                                }
                                if (product['product_variation']
                                    .variation_template_id != null) {
                                    productListHTML += '<p class="card-text">' +
                                        product['product_variation'].name +
                                        ' : <span>(' + product.name + ') - ' +
                                        Math.round(product.sell_price_inc_tax) +
                                        '</span></p>';
                                }
                                productListHTML += '</div>';
                                productListHTML +=
                                    '<div class="card-footer text-body-secondary">السعر: <span>' +
                                    Math.round(product
                                        .default_sell_price) +
                                    '</span> د.ع</div>';
                                productListHTML += '</div>';
                                productListHTML += '</div>';
                                productListHTML += '</div>';
                            });

                            productListHTML += '</div>';
                            productListHTML += '</div>';
                            productListHTML += '</div>';
                            productListHTML += '</div>';
                        });
                        $('#categories_accordion').html(productListHTML);
                         
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });
            });
            // Start Submit form 
            $("#filter_catalouge_form").on('submit', function(event) {
        
                event.preventDefault();
                const formData = new FormData(this);
               // Initialize formData when sending AJAX
                var values = slider.getValue(); // returns [min, max]
                formData.append('min', values[0]);
                formData.append('max', values[1]);
                formData.append('category_id', $('#filter_category').val());
                let created_at_val = $('input[name="created_at"]:checked').val() || '';
                let price_filter_val = $('input[name="price_filter"]:checked').val() || '';

                formData.append('created_at', created_at_val);
                formData.append('price_filter', price_filter_val);
                $.ajax({
                    url: '/catalogue-filter',
                    method: $(this).attr('method'),
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: formData,
                    dataType: 'JSON',
                    enctype: 'multipart/form-data',
                    contentType: false,
                    cache: false,
                    processData: false,
                    success: function(result) {
                        var products = result;
                        var productListHTML = '';
                        $.each(products, function(key, product_category) {
                            productListHTML += '<div class="accordion-item">';
                            productListHTML +=
                                '<h2 class="accordion-header" id="category' + (key +
                                    1) + '">';
                            productListHTML +=
                                '<button class="accordion-button" type="button" data-bs-toggle="collapse"';
                            productListHTML +=
                                'data-bs-target="#panelsStayOpen-collapseOne-' + (key +
                                    1) + '" aria-expanded="true"';
                            productListHTML +=
                                'aria-controls="panelsStayOpen-collapseOne">';
                            // console.log(product_category[0].category);
                            if (product_category[0].product.category !== null &&
                                product_category[0].product.category.name !== null) {
                                productListHTML += product_category[0].product.category
                                    .name;
                            } else {
                                productListHTML += 'غير مصنف';
                            }
                            productListHTML += '</button>';
                            productListHTML += '</h2>';
                            productListHTML += '<div id="panelsStayOpen-collapseOne-' +
                                (key + 1) +
                                '" class="accordion-collapse collapse show">';
                            productListHTML += '<div class="accordion-body">';
                            productListHTML += '<div class="row g-2">';

                            $.each(product_category, function(index, product) {
                                console.log
                                productListHTML +=
                                    '<div class="col-lg-3 col-md-4 col-sm-12">';
                                productListHTML += '<div class="product">';
                                productListHTML +=
                                    '<div class="card text-center">';
                                productListHTML += '<div class="card-header">';
                                productListHTML += '<span>' + product.product
                                    .name +
                                    '</span><div class="red-circle"><span class="circle-user-qtn" id="product_count"></span></div> | SKU: <span>' +
                                    product
                                    .sub_sku + '</span>';
                                productListHTML += '</div>';
                                productListHTML += '<div class="card-body">';
                                    let imageUrl = '';

                                    if (product.media && product.media.length > 0 && product.media[0].display_url) {
                                        imageUrl = product.media[0].display_url;
                                    } else if (product.product.image_url) {
                                        imageUrl = product.product.image_url;
                                    } else {
                                        imageUrl = '/images/default.png'; // fallback if no image
                                    }

                                productListHTML += '<img src="' + imageUrl + '" class="card-img-top" alt="product image">';
                                
                                productListHTML += '<div class="row"></div>';
                                productListHTML +=
                                    '<div class="input-group my-3">';
                                productListHTML +=
                                    '<button class="btn btn-primary add-product" type="button"><i class="bi bi-plus"></i></button>';
                                                            productListHTML += '<input ' +
                                    'max="1000" min="0" step="1" ' +
                                    'data-sku="' + product.id + '" ' +
                                    'data-sub_sku="' + product.sub_sku + '" ' +
                                    'data-qtn="' + (product.variation_location_details[0].qty_available ?? 0) + '" ' +
                                    'data-name="' + product.product.name + '" ' +
                                    'data-price="' + Math.round(product.default_sell_price) + '" ' +
                                    'value="0" ' +
                                    'class="form-control btn btn-primary text-center product-item red_qty" ' +
                                    'placeholder="" aria-label="Example text with two button addons">';
                                productListHTML +=
                                    '<button class="btn btn-primary remove-product" type="button"><i class="bi bi-dash"></i></button>';
                                productListHTML += '</div>';
                                productListHTML +=
                                    '<select id="productSelect" class="form-select form-select mb-3" aria-label="Small select example" ' 
                    + (showUnitSelect ? '' : 'style="display:none;"')  + '>';
                                productListHTML += '<option value="' + product
                                    .product.unit.id + '" data-name="' + product
                                    .product.unit.actual_name + '">' + product
                                    .product.unit.actual_name + '</option>';
                                $.each(product['product']['unit']['sub_units'],
                                    function(i, unit) {
                                        productListHTML +=
                                            '<option value="' + unit.id +
                                            '" data-name="' + unit
                                            .actual_name + '">' + unit
                                            .actual_name + ' | ' + Math
                                            .round(unit
                                                .base_unit_multiplier) +
                                            '</option>';
                                    });
                                productListHTML += '</select>';
                                if (restrictByQuantity) {
                                let qtyAvailable = 0;

                                if (product.variation_location_details && product.variation_location_details.length > 0) {
                                    qtyAvailable = product.variation_location_details[0].qty_available ?? 0;
                                }

                                productListHTML +=
                                    '<p class="card-text">الكمية المتوفرة: <span>' +
                                    Math.round(qtyAvailable) +
                                    '</span></p>';
                            }
                                if (product['product_variation']
                                    .variation_template_id != null) {
                                    productListHTML += '<p class="card-text">' +
                                        product['product_variation'].name +
                                        ' : <span>(' + product.name + ') - ' +
                                        Math.round(product.sell_price_inc_tax) +
                                        '</span></p>';
                                }
                                productListHTML += '</div>';
                                productListHTML +=
                                    '<div class="card-footer text-body-secondary">السعر: <span>' +
                                    Math.round(product
                                        .default_sell_price) +
                                    '</span> د.ع</div>';
                                productListHTML += '</div>';
                                productListHTML += '</div>';
                                productListHTML += '</div>';
                            });

                            productListHTML += '</div>';
                            productListHTML += '</div>';
                            productListHTML += '</div>';
                            productListHTML += '</div>';
                        });
                        $('#categories_accordion').html(productListHTML);
                         
                    },
                    error: function(error) {
                        console.log(error)
                    },
                });

            });
            $('#searchInput').on('input', function() {
            
                let searchText = $(this).val();
                let business_id = $("#business_id").val();
                let location_id = $("#location_id").val();
                // إرسال البيانات باستخدام Ajax إلى Laravel
                $.ajax({
                    type: 'post',
                    url: '/catalogue-filter',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        searchText: searchText,
                        business_id: business_id,
                        location_id: location_id
                    },
                    success: function(result) {
                        var products = result;
                        var productListHTML = '';
                        $.each(products, function(key, product_category) {
                            productListHTML += '<div class="accordion-item">';
                            productListHTML +=
                                '<h2 class="accordion-header" id="category' + (key +
                                    1) + '">';
                            productListHTML +=
                                '<button class="accordion-button" type="button" data-bs-toggle="collapse"';
                            productListHTML +=
                                'data-bs-target="#panelsStayOpen-collapseOne-' + (key +
                                    1) + '" aria-expanded="true"';
                            productListHTML +=
                                'aria-controls="panelsStayOpen-collapseOne">';
                            // console.log(product_category[0].category);
                            if (product_category[0].product.category != null &&
                                product_category[0].product.category.name != null) {
                                productListHTML += product_category[0].product.category
                                    .name;
                            } else {
                                productListHTML += 'Uncategorized';
                            }
                            productListHTML += '</button>';
                            productListHTML += '</h2>';
                            productListHTML += '<div id="panelsStayOpen-collapseOne-' +
                                (key + 1) +
                                '" class="accordion-collapse collapse show">';
                            productListHTML += '<div class="accordion-body">';
                            productListHTML += '<div class="row g-2">';

                            $.each(product_category, function(index, product) {
                                console.log
                                productListHTML +=
                                    '<div class="col-lg-3 col-md-4 col-sm-12">';
                                productListHTML += '<div class="product">';
                                productListHTML +=
                                    '<div class="card text-center">';
                                productListHTML += '<div class="card-header">';
                                productListHTML += '<span>' + product.product
                                    .name +
                                    '</span><div class="red-circle"><span class="circle-user-qtn" id="product_count"></span></div> | SKU: <span>' +
                                    product
                                    .sub_sku + '</span>';
                                productListHTML += '</div>';
                                productListHTML += '<div class="card-body">';
                                let imageUrl = '';

                                if (product.media && product.media.length > 0 && product.media[0].display_url) {
                                    imageUrl = product.media[0].display_url;
                                } else if (product.product.image_url) {
                                    imageUrl = product.product.image_url;
                                } else {
                                    imageUrl = '/images/default.png'; // fallback if no image
                                }

                                productListHTML += '<img src="' + imageUrl + '" class="card-img-top" alt="product image">';
                                productListHTML += '<div class="row"></div>';
                                productListHTML +=
                                    '<div class="input-group my-3">';
                                productListHTML +=
                                    '<button class="btn btn-primary add-product" type="button"><i class="bi bi-plus"></i></button>';
                                productListHTML += '<input ' +
                                    'max="1000" min="0" step="1" ' +
                                    'data-sku="' + product.id + '" ' +
                                    'data-sub_sku="' + product.sub_sku + '" ' +
                                    'data-qtn="' + (product.variation_location_details[0].qty_available ?? 0) + '" ' +
                                    'data-name="' + product.product.name + '" ' +
                                    'data-price="' + Math.round(product.default_sell_price) + '" ' +
                                    'value="0" ' +
                                    'class="form-control btn btn-primary text-center product-item red_qty" ' +
                                    'placeholder="" aria-label="Example text with two button addons">';
                                productListHTML +=
                                    '<button class="btn btn-primary remove-product" type="button"><i class="bi bi-dash"></i></button>';
                                productListHTML += '</div>';
                                productListHTML +=
                                    '<select id="productSelect" class="form-select form-select mb-3" aria-label="Small select example"' 
                       + (showUnitSelect ? '' : 'style="display:none;"')  + '>';
                                productListHTML += '<option value="' + product
                                    .product.unit.id + '" data-name="' + product
                                    .product.unit.actual_name + '">' + product
                                    .product.unit.actual_name + '</option>';
                                $.each(product['product']['unit']['sub_units'],
                                    function(i, unit) {
                                        productListHTML +=
                                            '<option value="' + unit.id +
                                            '" data-name="' + unit
                                            .actual_name + '">' + unit
                                            .actual_name + ' | ' + Math
                                            .round(unit
                                                .base_unit_multiplier) +
                                            '</option>';
                                    });
                                productListHTML += '</select>';
                              if (restrictByQuantity) {
                                    let qtyAvailable = 0;

                                    if (product.variation_location_details && product.variation_location_details.length > 0) {
                                        qtyAvailable = product.variation_location_details[0].qty_available ?? 0;
                                    }

                                    productListHTML +=
                                        '<p class="card-text">الكمية المتوفرة: <span>' +
                                        Math.round(qtyAvailable) +
                                        '</span></p>';
                                }
                                if (product['product_variation']
                                    .variation_template_id != null) {
                                    productListHTML += '<p class="card-text">' +
                                        product['product_variation'].name +
                                        ' : <span>(' + product.name + ') - ' +
                                        Math.round(product.sell_price_inc_tax) +
                                        '</span></p>';
                                }
                                productListHTML += '</div>';
                                productListHTML +=
                                    '<div class="card-footer text-body-secondary">السعر: <span>' +
                                    Math.round(product
                                        .default_sell_price) +
                                    '</span> د.ع</div>';
                                productListHTML += '</div>';
                                productListHTML += '</div>';
                                productListHTML += '</div>';
                            });

                            productListHTML += '</div>';
                            productListHTML += '</div>';
                            productListHTML += '</div>';
                            productListHTML += '</div>';
                        });
                        $('#categories_accordion').html(productListHTML);
                         
                    },
                });
            });
            $("#whatsapp_number").on('click', function() {
                setTimeout(() => {
                    location.reload();                    
                }, 1000);
            });
           
            $('#user_information_validation').validate({
                submitHandler: function (form) {
            
                    // do other things for a valid form
                    var user_name = $("#user_name").val();
                    var user_phone = $("#user_phone").val();
                    var location_phone = $("#location_phone").val();
                    var city_id = $("#city_id").val();
                    var address = $("#address").val();
                $.ajax({
                    url: "{{ route('store_order') }}",
                    type: 'post',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        selectedProducts,
                        user_name,
                        user_phone,
                        city_id,
                        address
                    },
                    success: function(response) {
                        toastr.success("تم إنشاء الطلب بنجاح، رقم الفاتورة: " + response.invoiceNumber);
                        $("#bill_number").html("#" + response.invoiceNumber);
                        $("#bill_name").html(response.user_name);
                        $("#bill_phone").html(response.user_phone);
                        $("#bill_address").html(response.address);
                    $("#whatsapp_number").attr('href',
    "https://wa.me/" + location_phone +
    "?text=" +
    "رقم فاتورتي هو: " + response.invoiceNumber + "%0A" +
    "الاسم: " + response.user_name + "%0A" +
    "رقم الهاتف: " + response.user_phone + "%0A" +
    "العنوان: " + response.address
);
                        let selectedProducts = [];
                        localStorage.removeItem('selectedProducts');
                        $('#payment_confirmation').modal('hide');
                        $('#whatsappModal').modal('show');
                        
                    },
                    error: function(xhr, status, error) {
                        let errors = JSON.parse(xhr.responseText).errors;
                      
                        
                        let errorMsg = errors['user_name'];
                        let errorPhoneMsg = errors['user_phone'];
                        $("#user_name-error").html(errorMsg);
                        $("#user_name-error").show();
                        // $("#username_errorMsg").removeClass("invalid-feedback ");
                        // $("#user_phone-error").addClass("invalid-error-msg");
                        $("#user_phone-error").empty();
                        $("#user_phone-error").html(errorPhoneMsg);
                        $("#user_phone-error").show();
                        // $("#userphone_errorMsg").removeClass("invalid-feedback ");
                        // $("#userphone_errorMsg").addClass("invalid-error-msg");
                    }
                });
                },
                rules: {
                    user_name: {
                        required: true,
                        minlength: 2,
                    },
                    user_phone: {
                        required: true,
                        digits:true,
                        minlength:11,
                        maxlength:11,
                    }, city_id: {
                        required: true,
                        digits: true,   // ensures integer
                    },
                    address: {
                        required: true,
                        
                    },
                },
                messages: {
                    user_name: {
                        required: 'يجب إدخال اسمك',
                        minlength: 'يجب أن يكون الاسم أطول من محرفين',
                    },
                    user_phone: {
                        required: 'يجب إدخال رقم هاتفك',
                        digits: "يجب أن يكون رقم الهاتف قيمة رقمية فقط",
                        minlength: 'يجب أن يكون رقم هاتفك 11 خانة وأكثر',
                        maxlength: 'يجب أن يكون رقم هاتفك 11 خانة وأكثر',
                    },
                      city_id: {
                            required: "يجب إدخال المدينة",
                            
                        },
                        address: {
                            required: "يجب إدخال العنوان",
                           
                        },
                },
            });
            function updateSelectedProduct(input) {
                let qty = parseInt($(input).val()) || 0;
                let sku = String($(input).attr('data-sku')); // unique key
                let existingIndex = selectedProducts.findIndex(p => p.productNameId === sku);

                if (qty > 0) {
                    let productData = {
                        productName: $(input).data('name'),
                        productNameId: sku,
                        productNameSku: $(input).data('sub_sku'),
                        productQtn: qty,
                        productPrice: $(input).data('price'),
                        productPiece: $(input).parent().next().find('option:selected').data('name'),
                        productPieceVal: $(input).parent().next().find('option:selected').val(),
                        business_id: $("#business_id").val(),
                        location_id: $("#location_id").val()
                    };

                    if (existingIndex >= 0) {
                        selectedProducts[existingIndex] = productData; // update existing
                    } else {
                        selectedProducts.push(productData); // add new
                    }
                } else {
                    // remove product if quantity is 0
                    if (existingIndex >= 0) selectedProducts.splice(existingIndex, 1);
                }

                localStorage.setItem('selectedProducts', JSON.stringify(selectedProducts));
            }
            
        });
       
    </script>
@endsection