@extends('layouts.task') 
@section('title', $business->name) 
@section('content') 
    <!-- Navbar --> 
    <nav class="navbar navbar-expand-lg sticky-top"> 
        <div class="container"> 
            <a class="navbar-brand" href="#"> 
                <img src="{{asset('catalouge/logo/logo.png')}}" alt="ROOT" width="60"> 
            </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"> 
                <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 220px;"> 
                    @foreach($products as $key => $product_category) 
                    <li class="nav-item"> 
                        <a class="nav-link mx-3" aria-current="page" href="#category{{$key +1 }}">{{$product_category->first()->product->category->name ?? 'Uncategorized'}} </a> 
                    </li> 
                    @endforeach 
                </ul> 
                {{-- search --}}
                <form class="d-flex" role="search" name="search_catalouge_form" id="search_catalouge_form" method="post" action="javascript:void(0)">
                    @csrf 
                    <input class="form-control me-2" name="search" type="search" placeholder="ابحث عن المنتج" aria-label="Search">
                    <input type="hidden" id="business_id" name="business_id" value="{{ $business->id }}"> 
                    <input type="hidden" id="location_id" name="location_id" value="{{ $location_id }}"> 

                    <button class="btn btn-outline-light" type="submit">ابحث</button>
                </form>
                {{-- search --}}
            </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{{$key + 1}}"> 
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" 
                                    data-bs-target="#panelsStayOpen-collapseOne-{{$key + 1}}" aria-expanded="true" 
                                    aria-controls="panelsStayOpen-collapseOne"> 
                                    {{$product_category->first()->product->category->name ?? 'Uncategorized'}}  
                                </button> 
                            </h2> 
                            <div id="panelsStayOpen-collapseOne-{{$key + 1}}" class="accordion-collapse collapse @if($key + 1 == 1) show @endif"> 
                                <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>
                                                        | SKU:
                                                        <span>{{$product['product']->sku}}</span>
                                                    </div>
                                                    <div class="card-body">
                                                        <img src="{{$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 data-sku="{{ $product->id }}" data-qtn="{{ $product['product']->alert_quantity }}" data-name="{{$product['product']->name}}"
                                                                data-price="{{ $product->default_sell_price }}" value="0" disabled
                                                                class="form-control btn btn-primary text-center product-item"
                                                                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"
                                                            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(count($product['product']['unit']['sub_units']) > 0)
                                                                @foreach($product['product']['unit']['sub_units'] as $unit)
                                                                    <option value="{{ $unit->id}}" data-name="{{ $unit->actual_name}}">{{ $unit->actual_name}} | {{ number_format($unit->base_unit_multiplier, 0) }}</option>
                                                                @endforeach
                                                            @endif
                                                        </select>
                                                            @if($product['product']->alert_quantity && $product['product']->alert_quantity > 0) 
                                                                <p class="card-text">الكمية المتوفرة: <span>{{$product['product']->alert_quantity}}</span></p> 
                                                            @endif 
                                                            @if($product['product_variation']->variation_template_id != null)
                                                                <p class="card-text">{{$product['product_variation']->name}} : <span>({{$product->sub_sku}}) - {{($product->sell_price_inc_tax)}}</span></p> 
                                                            @endif
                                                    </div>
                                                    <div class="card-footer text-body-secondary">
                                                        السعر: <span>{{ $product->default_sell_price }}</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" action="javascript:void(0)"> 
                @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="checkbox" name="created_at" class="btn-check" id="btncheck1" autocomplete="off"> 
                        <label class="btn btn-outline-light" for="btncheck1">الأحدث</label> 
        
                        <input type="checkbox" name="price" class="btn-check" id="btncheck2" autocomplete="off"> 
                        <label class="btn btn-outline-light" for="btncheck2">السعر</label> 
                    </div> 
                </div> 
                <div class="mb-3">
                    <label for="filter_priceRange" class="form-label">مجال السعر</label>
                    <div id="filter_priceRange"></div>
                    <span id="price_range_min"></span> - <span id="price_range_max"></span>
                </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 ?? '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" value="{{ $business->id }}"> 
                <input type="hidden" name="location_id" value="{{ $location_id }}"> 
        
            </form> 
        
        </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">
            <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="fw-bolder fs-3">رقم الفاتورة: <span id="bill_number">#500</span></p> -->
                    <!-- <p class="fs-5">يرجى الاحتفاظ برقم الفاتورة الموجود أعلاه</p> -->
                    <p class="fs-4">هل أنت متأكد من عملية الشراء؟</p>
                    <p class="fs-5">منتجاتك</p>
                    <table class="table table-sm table-striped">
                        <thead>
                            <tr>
                                <th scope="col">اسم المنتج</th>
                                <th scope="col">الكمية</th>
                                <th scope="col">السعر</th>
                                <th scope="col">الوحدة</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
                <form class="row g-3 needs-validation" novalidate>
                    <div class="col-md-4">
                        <label for="validationCustom01" class="form-label">First name</label>
                        <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
                        <div class="valid-feedback">
                        Looks good!
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label for="validationCustom03" class="form-label">City</label>
                        <input type="text" class="form-control" id="validationCustom03" required>
                        <div class="invalid-feedback">
                        Please provide a valid city.
                        </div>
                    </div>
                    <!-- <div class="col-12">
                        <button class="btn btn-primary" type="submit">Submit form</button>
                    </div> -->
                </form>
                <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="button" id="confirm_order" class="btn btn-primary">
                        نعم
                        <i class="bi bi-check-circle-fill"></i>
                    </button>
                </div>
            </div>
        </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">Modal title</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </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="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.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>  
        $(window).scroll(function() {  
            var height = $(window).scrollTop();  
  
            if(height  > 180) {  
                $('nav').addClass('navbar-fixed-top');  
                $('.scrolltop:hidden').stop(true, true).fadeIn();  
            } else {$('nav').removeClass('navbar-fixed-top');  
                $('.scrolltop').stop(true, true).fadeOut();  
            }  
        });  
  
        $(document).on('click', '.scroll', function(e){  
            $("html,body").animate({scrollTop:$("#top").offset().top},"1000");  
            return false;  
        });  
    </script>  
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"
    integrity="sha256-6XMVI0zB8cRzfZjqKcD01PBsAy3FlDASrlC8SxCpInY=" crossorigin="anonymous"></script>
    <script>  
       $(document).ready(function () { 
        // Price Range
        $('#filter_priceRange').slider({
            range: true,
            min: 0,
            max: 500,
            values: [75, 300],
            slide: function (event, ui) {
                $('#price_range_min').html(ui.values[1]);
                $('#price_range_max').html(ui.values[0]);
            },
        });
        $('#price_range_min').html($('#filter_priceRange').slider('values', 1));
        $('#price_range_max').html($('#filter_priceRange').slider('values', 0));
        
        // Start Submit form 
        var form ='#filter_catalouge_form'; 
        $(form).on('submit',function (event) { 
            event.preventDefault(); 
            const formData = new FormData(this); 
            formData.append('min', $('#filter_priceRange').slider('values', 0));
            formData.append('max', $('#filter_priceRange').slider('values', 1));
            $.ajax({ 
                url: '/product-catalogue/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 += '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> | SKU: <span>' + product.product.sku + '</span>';
                            productListHTML += '</div>';
                            productListHTML += '<div class="card-body">';
                            productListHTML += '<img src="' + product.product.image_url + '" 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-qtn="' + product.product.alert_quantity + '" data-name="' + product.product.name + '" data-price="' + product.default_sell_price + '" value="0" disabled class="form-control btn btn-primary text-center product-item" 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">';
                            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 + ' | ' + unit.base_unit_multiplier.toFixed(0) + '</option>';
                            });
                            productListHTML += '</select>';
                            if (product['product'].alert_quantity && product['product'].alert_quantity > 0) {
                                productListHTML += '<p class="card-text">الكمية المتوفرة: <span>' + product['product'].alert_quantity + '</span></p>';
                            }
                            if (product['product_variation'].variation_template_id != null) {
                                productListHTML += '<p class="card-text">' + product['product_variation'].name + ' : <span>(' + product.sub_sku + ') - ' + product.sell_price_inc_tax + '</span></p>';
                            }
                            productListHTML += '</div>';
                            productListHTML += '<div class="card-footer text-body-secondary">السعر: <span>' + 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) 
                }, 
            }); 
             
        }); 
        }); 
    </script>  
 <script>  
    $(document).ready(function () { 
     // Start Submit form 
     var form ='#search_catalouge_form'; 
     $(form).on('submit',function (event) { 
         event.preventDefault(); 
         const formData = new FormData(this); 
         $.ajax({ 
             url: '/product-catalogue/catalogue-filter', 
             method: $(this).attr('method'), 
             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 += '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) {
                         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>';
                         productListHTML += '| SKU: <span>' + product.product.sku + '</span>';
                         productListHTML += '</div>';
                         productListHTML += '<div class="card-body">';
                         productListHTML += '<img src="' + product.product.image_url + '" class="card-img-top" alt="product image">';
                         productListHTML += '<div class="row"></div>';
                         productListHTML += '<div class="btn-group my-3">';
                         productListHTML += '<button type="button" class="btn btn-primary  add-product"><i class="bi bi-plus"></i></button>';
                         productListHTML += '<input data-sku="' + product.id +'" data-qtn="'+ product.product.alert_quantity+'"data-name="'+product.product.name+'" data-price="'+product.default_sell_price+'"value="0" disabled class="form-control btn btn-primary text-center product-item"placeholder="" aria-label="Example text with two button addons">';
                         productListHTML += '<button class="btn btn-primary remove-product" type="button"> ';
                         productListHTML += '<i class="bi bi-dash"></i>';
                         productListHTML += '</button>';
                         productListHTML += '</div>';
                         productListHTML += '<select id="productSelect" class="form-select form-select mb-3" aria-label="Small select example">';
                         productListHTML += '<option value="'+product.product.unit.id +'" data-name="'+product.product.unit.actual_name +'">'+product.product.unit.actual_name +'</option>';
                         if(product.product.unit.sub_units.length > 0){
                            $.each(product.product.unit.sub_units, function(index, unit) {
                                productListHTML += '<option value="'+unit.id +'" data-name="'+unit.actual_name +'">'+unit.actual_name +'| '+Math.round(unit.base_unit_multiplier)+'</option>';
                            });
                         }
                         productListHTML += '</select>' ;
                         
                         if (product.product.alert_quantity && product.product.alert_quantity > 0) {
                             productListHTML += '<p class="card-text">الكمية المتوفرة: <span>' + product.product.alert_quantity + '</span></p>';
                         }
                         if( product.product_variation.variation_template_id != null){
                             productListHTML += '<p class="card-text">' + product.product_variation.name + ' : <span>' + product.sub_sku + '-' + product.sell_price_inc_tax + '</span></p>';
                         }
                         productListHTML += '</div>';
                         productListHTML += '<div class="card-footer text-body-secondary">';
                         productListHTML += 'السعر: <span>' + product.default_sell_price + '</span> د.ع';
                         productListHTML += '</div>';
                         productListHTML += '</div>';
                         productListHTML += '</div>';
                         productListHTML += '</div>';

                         if ((index + 1) % 4 == 0) {
                             productListHTML += '<div class="clearfix"></div>';
                         }
                     });

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

        $(document).ready(function(){
        let selectedProducts = [];
        let selectedProductItems;
        
        $('#order_button').click(function () {
            selectedProducts = [];
            selectedProductItems = null;
            $('#payment_confirmation tbody tr').remove();
            $('.product-item').each(function () {
                if ($(this).val() > 0) {
                    var business_id = $("#business_id").val();
                    var location_id = $("#location_id").val();
                    let productName = $(this).attr('data-name');
                    let productQtn = $(this).val();
                    let productPrice = $(this).attr('data-price');
                    let productPiece = $(this).parent().next().attr('data-name');

                    // عند اختيار الخيار في عنصر select بالهوية المميزة
                    // $("#productSelect").change(function() {
                    //     // الحصول على الخيار المحدد
                    //     var selectedOption = $(this).children("option:selected");
                    //     // الحصول على قيمة السمة data-name للخيار المحدد
                    //     var productPiece = selectedOption.data("name");
                    //     // عرض اسم المنتج
                    //     console.log(productPiece);
                    // });

                    selectedProducts.push({ productName: productName, productQtn: productQtn ,productPrice:productPrice,productPiece:productPiece,business_id: business_id, location_id: location_id});
                    console.log(selectedProducts);
                    $.each(selectedProducts, function (key, value) {
                        selectedProductItems = `
                            <tr>
                                <th>${value.productName}</th>
                                <th>${value.productQtn}</th>
                                <th>${value.productPrice}</th>
                                <th>${value.productPiece}</th>
                            </tr>
                        `;
                    });
                    $('#payment_confirmation tbody').append(selectedProductItems);
                }
            });
        });

        $('.add-product').each(function () {
            $(this).click(function () {
                // console.log(selectedProducts)
                $("#order_button").removeAttr("disabled");
                var inputValue = $(this).next().val();
                var newValue = parseInt(inputValue) + 1;
                $(this).next().val(newValue);
            });
        });

        $('.remove-product').each(function () {
            $(this).click(function () {
                if ($(this).prev().val() <= 0) {
                    return;
                }
                var inputValue = $(this).prev().val();
                var newValue = parseInt(inputValue) - 1;
                $(this).prev().val(newValue);
            });
        });


            $("#confirm_order").click(function(){
                $.ajax({
                    url: '/product-catalogue/storeOrderproduct', 
                    type: 'post',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data:  {selectedProducts} ,
                    success: function(response){
                        console.log(response);
                        $("#bill_number").html("#" + response);
                        $("#whatsapp_number").attr('href', "https://wa.me/+963934072913?text=رقم فاتورتي هو : " + response);
                        let selectedProducts = [];
                    }
                });
            });
        });
        
 </script>

@endsection