@extends('layouts.tabler')

@section('content')

    <div class="page-header d-print-none">
        <div class="container-xl mt-3 px-4 ">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div>
                    <span class="text-primary">Productos</span>
                </div>
                <div class="d-flex flex-row align-items-center align-items-center">
                    <div>
                        <span class="text-muted" style="white-space: nowrap;">Solo en stock</span>
                    </div>
                    <div class="ps-2">
                        <select class="form-select rounded-pill text-primary border-primary" id="brand_id">
                            <option value="" @if($brand_id == null) selected @endif >Marca</option>
                            @foreach ($brands as $brand)
                                <option @if($brand_id == $brand['id']) selected @endif  data-models="{{ json_encode($brand['models']) }}" value="{{ $brand['id'] }}">
                                    {{ $brand['name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="ps-2">
                        <select class="form-select rounded-pill text-primary border-primary" id="model_id">
                            <option value="" @if($model_id == null) selected @endif>Modelo</option>
                            @foreach ($models as $model)
                            <option @if($model_id == $model->id) selected @endif  value="{{ $model->id }}">
                                {{ $model->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="d-flex mt-2 align-items-center gap-2">

                <div class="flex-shrink-1" style="white-space: nowrap;">Buscar por:</div>
                <div class="w-100">
                    <div class="input-icon">
                     @if(!$storeId)
                        <form class="d-flex" action="{{route('buscar',["pais_id"=>$pais_id])}}" method="get">
                    @else
                        <form class="d-flex" action="{{route('buscaren',["pais_id"=>$pais_id,"store_id"=>$storeId])}}" method="get">
                    @endif
                        @csrf
                        <input type="text" value="@if(!empty($buscar)){{ $buscar }}@endif" id="buscar" name="buscar" class="form-control form-control-rounded border-primary" aria-label="Buscar" autocomplete="off" placeholder="Código">
                        @if(isset($storeId))<input type="hidden" name="store_id" value="{{$storeId}}">@endif
                        @if(isset($brand_id))<input type="hidden" name="brand_id" value="{{$brand_id}}">@endif
                        @if(isset($model_id))<input type="hidden" name="model_id" value="{{$model_id}}">@endif
                        <span class="input-icon-addon">
                            <!-- Download SVG icon from http://tabler-icons.io/i/search -->
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
                                <path d="M21 21l-6 -6"></path>
                            </svg>
                        </span>
                      </form>
                    </div>
                </div>
            </div>
            <div class="row mt-5">
                <span>Módulo</span>
            </div>
            <div id="listProducts">
            @if(count($products) > 0)
            @foreach ($products as $key => $product )
            <div class="row mt-3 mx-1">
                <div class="card rounded-4" style="border-color: #3478f6;">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div class="d-flex flex-row gap-2 align-items-center">
                                <div>

                                  @if($product->image)
                                    <img src="https://tecnicocerca.com/images/ProductImages/{{$product->image}}" width="60" height="60" alt="Carrito">
                                  @else
                                    <img src="{{asset('img/images.png')}}" width="60" height="60" alt="Carrito">
                                  @endif
                                </div>
                                <div>{{$product->name}}</div>
                                @if($storeId)
                                    <div class="text-secondary">
                                        Stock: {{ $productItemsStoresArray[$product->id]['stock'] }}
                                    </div>
                                    <input type="hidden" id="stock{{$product->id}}" value="{{ $productItemsStoresArray[$product->id]['stock'] }}">
                                @else
                                    <input type="hidden" id="stock{{$product->id}}" value="0">
                                @endif
                            </div>
                            <div class="d-flex flex-row gap-3 align-items-center">
                                @if($storeId != null)
                                <div class="inner rounded-pill d-flex align-items-center"
                                    style="background-color: #3478f6;"><span class="text-white p-2">${{$product->unitary_number}} x1</span>
                                </div>
                                <div class="inner rounded-pill d-flex align-items-center"
                                    style="background-color: #3478f6;"><span class="text-white p-2">${{$product->wholesale_number}} x3 o +</span>
                                </div>
                                @endif
                                <div class="inner rounded-pill d-flex flex-row align-items-center justify-content-between"
                                    style="background-color: #82ABF6;">
                                    <div>
                                        <form id="FormProductMenos{{$product->id}}" action="javascript:void(0)" method="POST">
                                            {{ csrf_field() }}
                                            <div>
                                                <input type="hidden" value="{{$product->id}}" id="idMenos" name="id">
                                                <input type="hidden" value="1" id="quantityMenos{{$product->id}}" name="quantity">
                                                <input type="hidden" value="menos" name="op">
                                                <button id="{{$product->id}}" class="btn btn-circle m-1 menosHome">
                                                    <span style="font-size: 1rem">
                                                        <i class="fa-solid fa-minus"></i>
                                                    </span>
                                                </button>
                                            </div>
                                        </form>

                                    </div>
                                    <div class="mx-1">
                                        <span id="contadorHome{{$product->id}}">0</span>
                                    </div>
                                    <div>
                                        <form id="FormProduct{{$product->id}}" action="javascript:void(0)" method="POST" style="margin-bottom: 0px;">
                                            {{ csrf_field() }}
                                            <input type="hidden" value="+" id="op" name="op">
                                            <input type="hidden" value="{{ $product->id }}" id="id" name="id">
                                            <input type="hidden" value="{{ $product->name }}" id="name" name="name">
                                            <input type="hidden" value="{{ $product->unitary }}" id="price" name="price">
                                            <input type="hidden" value="{{ $product->image }}" id="img" name="img">
                                            <input type="hidden" value="{{ $product->slug }}" id="slug" name="slug">
                                            <input type="hidden" value="{{ $storeId }}" id="storeIdd" name="storeId">
                                            <input type="hidden" value="{{ $product->wholesale }}" id="wholesale" name="wholesale">
                                            <input type="hidden" value="{{ $productItemsStoresArray[$product->id]['stock'] }}" id="stock" name="stock">
                                            <input type="hidden" value="1" id="quantity{{$product->id}}" name="quantity">
                                            <button id="{{$product->id}}" data-name="{{$product->name}}" class="btn btn-circle m-1 masHome">
                                                <span style="font-size: 1rem">
                                                    <i class="fa-solid fa-plus"></i>
                                                </span>
                                            </button>
                                        </form>

                                    </div>
                                </div>
                                <div class="inner d-flex flex-row align-items-center">
                                    <div class="d-flex justify-content-center">
                                        {{--<form action="{{ route('cart.store') }}" method="POST" style="margin-bottom: 0px;">
                                            { { csrf_field() }}
                                            <input type="hidden" value="{{ $product->id }}" id="id" name="id">
                                            <input type="hidden" value="{{ $product->name }}" id="name" name="name">
                                            <input type="hidden" value="{{ $product->unitary }}" id="price" name="price">
                                            <input type="hidden" value="{{ $product->image }}" id="img" name="img">
                                            <input type="hidden" value="{{ $product->slug }}" id="slug" name="slug">
                                            <input type="hidden" value="{{ $productItemsStoresArray[$product->id]['stock'] }}" id="stock" name="stock">
                                            <input type="hidden" value="1" id="quantity{{$key}}" name="quantity">
                                            <button class="btn" class="" title="Agregar al carrito">--}}
                                                <img src="{{ asset('img/carro.png') }}" width="30" height="30" alt="Carrito">
                                               {{-- <span class="cartCountHome badge bg-blue text-blue-fg badge-notification badge-pill" id="cartCountHome{{$key}}">0</span>--}}
                                            {{--</button>
                                        </form>--}}
                                    </div>

                                    {{-- <a href="#">
                                        <img src="{{ asset('img/carro.png') }}" width="30" height="30"
                                            alt="Carrito">
                                    </a>--}}
                                    <div class="d-flex justify-content-center h-5 w-4">
                                        <span class="cartCountHome" style="color: #82abf6" id="cartCountHome{{$product->id}}">0</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
            @else
             <div class="card rounded-4 mt-4" style="border-color: #3478f6;">
                <div class="card-body">
                    <div class="d-flex justify-content-center align-items-center">
                        <div class="justify-content-center align-items-center mt-1">
                            <div class="d-flex"><h3>Producto no encontrado</h3></div>
                            <div class="d-flex justify-content-center align-items-center mt-1">
                                <button type="button" id="refresh" class="btn btn-outline-danger">Cancelar busqueda</button>
                            </div>
                        </div>
                    </div>
                </div>
            <div>
            @endif
            </div>


        </div>
        <div id="paginate" class="d-flex justify-content-end mt-2">
          {!! $products->links() !!}
        </div>

    </div>

    <div class="page-body">
        <div class="container-xl">
            <div class="col-10 offset-1">
            </div>
        </div>
    </div>

    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header">
            <h5 id="offcanvasRightLabel">Tus Productos</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            ...
        </div>


    </div>
    @include('layouts.popUpSearch')
    @include('layouts.popUpSucursal')
    @include('layouts.popUpSucursales')


@endsection
@section('js')

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>

        // Modal Datos de envio
        var modalSearch = document.getElementById("myModalSearch");
        var modalSucursal = document.getElementById("myModalSucursal");

        // Get the button that opens the modal
        var btnSearch = document.getElementById("myBtnSearch");
        var btnSucursal = document.getElementById("myBtnSucursal");

        // Get the <span> element that closes the modal
        //var spanSearch = document.getElementsByClassName("closeSearch")[0];
        var spanSucursal = document.getElementsByClassName("closeSucursal")[0];
        var myModalSucursales = null;
        var myModalSearch = null;
        var idproducto = null;



        $(function() {
            myModalSucursales = new bootstrap.Modal(document.getElementById('myModalSucursalesTabler'));
            myModalSearch = new bootstrap.Modal(document.getElementById('myModalSearch'));

            var myModalSucursalesEl = document.getElementById('myModalSucursalesTabler')
            myModalSucursalesEl.addEventListener('hidden.bs.modal', function (event) {
                myModalSearch.toggle();
            })

        });

        $("#search").on('click', function (e) {
            window.current_page = 0;
            getProducts(function(productsObj){
                displayProducts(productsObj);
                /*console.log(productsObj);*/
                if(productsObj.last_page > 1){
                        $('#load-more-products').toggle();
                    }
                });
        });
        $('#load-more-products').on('click', function(e){

            e.preventDefault();

            getProducts(function(productsObj){
                displayProducts(productsObj);
            });
        });
        function displayProducts(productsObj){
            $("#listProductsModal").html("");
            if(productsObj.data.length > 0 ){
                productsObj.data.forEach((product, key) => {
                    let imagen = '';

                    if(product.image === null){
                        imagen = '<img src="{{asset("/img/images.png")}}" width="50" height="50" alt="Carrito">';
                    }else{
                        imagen = '<img src="https://tecnicocerca.com/images/ProductImages/'+product.image+'" width="50" height="50" alt="Carrito">';
                    }

                    let fila = '<div class="card m-2 mb-3" style="border-radius:30px;border-color: #3478f6;width:100%" > \
                <div class="card-body"> \
                <div class="d-flex justify-content-between"> \
                  <div class="d-flex flex-row gap-2 align-items-center">'+ imagen +'<div style="width:20rem">'+ product.name +'\
                    <div class="text-secondary">Stock: '+product.stock_store+'</div></div>\
                    <input type="hidden" value="'+product.stock_store+'" id="stockModal'+product.id+'" >\
                    <div class="d-flex justify-content-center inner rounded-pill d-flex align-items-center" style="background-color: #3478f6;width:8rem">\
                        <div class="d-flex align-items-center" style="height:36px">\
                        <span class="text-white p-2">$'+product.unitary_number+' x1</span>\
                        </div>\
                    </div>\
                    <div class="d-flex justify-content-center inner rounded-pill d-flex align-items-center" style="background-color: #3478f6;width:8rem">\
                        <div class="d-flex align-items-center" style="height:36px">\
                        <span class="text-white p-2">$'+product.wholesale_number+' x3 o +</span>\
                        </div>\
                    </div>\
                  </div> \
                  <div class="d-flex flex-row gap-3 align-items-center"> \
                    <div class="inner rounded-pill d-flex flex-row align-items-center justify-content-between" style="background-color: #82ABF6;"> \
                      <div> \
                        <form id="FormProductMenosModal'+product.id+'" action="javascript:void(0)" method="POST"> @csrf\
                            <div>\
                                <input type="hidden" value="'+product.id+'" id="idMenosModal" name="id">\
                                <input type="hidden" value="1" id="quantityMenosModal'+product.id+'" name="quantity">\
                                <input type="hidden" value="menos" name="op">\
                                <button id="menosModal'+ product.id +'" data-id="'+ product.id +'" class="btn btn-circle m-1 menosModal"> \
                                    <span style="font-size: 1rem"> \
                                        <i class="fa-solid fa-minus"></i> \
                                    </span> \
                                </button> \
                            </div>\
                        </form>\
                      </div> \
                      <div class="mx-1"> \
                       <span id="contadorModal'+ product.id +'">0</span> \
                      </div> \
                      <div> \
                        <form id="FormProductModal'+product.id+'" action="javascript:void(0)" method="POST" style="margin-bottom: 0px;"> @csrf\
                            <input type="hidden" value="+" id="op" name="op">\
                            <input type="hidden" value="'+product.id+'" id="idModal" name="id">\
                            <input type="hidden" value="'+product.name+'" id="nameModal" name="name">\
                            <input type="hidden" value="'+product.unitary+'" id="priceModal" name="price">\
                            <input type="hidden" value="'+product.image+'" id="imgModal" name="img">\
                            <input type="hidden" value="'+product.slug+'" id="slugModal" name="slug">\
                            <input type="hidden" value="'+storeid+'" id="storeIddModal" name="storeId">\
                            <input type="hidden" value="'+product.wholesale+'" id="wholesaleModal" name="wholesale">\
                            <input type="hidden" value="'+product.stock_store+'" id="stockModal" name="stock">\
                            <input type="hidden" value="1" id="quantityModal'+product.id+'" name="quantity">\
                            <button id="masModal'+ product.id +'" data-id="'+ product.id +'" class="btn btn-circle m-1 masModal"> \
                                <span style="font-size: 1rem"> \
                                    <i class="fa-solid fa-plus"></i> \
                                </span> \
                                </button> \
                        </form>\
                      </div> \
                    </div> \
                  </div> \
                  <div class="inner d-flex align-items-center"> \
                    <div class="d-flex justify-content-center h-5 w-4"> \
                      <span id="cartCountModal'+ product.id +'"><b>0</b></span> \
                    </div> \
                  </div> \
                </div> \
                </div> \
              </div>';
              $("#listProductsModal").append(fila);
                });
            }else{
            $("#listProductsModal").html(
                '<div class="card rounded-4 mt-4" style="border-color: #3478f6;"> \
                    <div class="card-body"> \
                        <div class="d-flex justify-content-center align-items-center"> \
                            <div class="justify-content-center align-items-center mt-1"> \
                                <div class="d-flex"><h3>Producto no encontrado</h3></div> \
                                <div class="d-flex justify-content-center align-items-center mt-1"> \
                                    <button id="refresh" type="button" class="btn btn-outline-danger">Cancelar busqueda</button> \
                                </div> \
                            </div> \
                        </div> \
                    </div> \
                <div>')
                        }


        }
        function getProducts(callback) {

            const paisId = {!! json_encode($pais_id) !!};
            var buscar = $('#searchinput').val();
            var storeId =  $("#modal_store_id").val();
            var url = "{{route('buscar','pais_id')}}".replace('pais_id', paisId);

            var data = {
                            'buscar' : $('#searchinput').val(),
                            'page': window.current_page + 1
                        };
            if(storeId.length > 0){
                url = "{{route('buscaren',['pais_id'=>'x','store_id'=>'y'])}}".replace('x', paisId).replace('y', storeId);
                data = {
                            'buscar' : $('#searchinput').val(),
                            'store_id' : $("#modal_store_id").val(),
                            'page': window.current_page + 1
                        };
            }

            if(buscar.length > 0)
            {

                $.ajax({
                    headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url : url,
                        data : data,
                        type : 'GET',
                        dataType : 'json',
                })
                    .done(function( response ) {
                        var productsObj = $.parseJSON(response.products);

                        window.current_page = productsObj.current_page;

                        // hide the [load more] button when all pages are loaded
                        if(window.current_page == productsObj.last_page){
                            $('#load-more-products').hide();
                        }

                        callback(productsObj);
                    })
                    .fail(function( response ) {
                        console.log( "Error: " + response );
                    });
            }else{
                $("#listProductsModal").html("");
            }

        }


        // When the user clicks the button, open the modal
        /*btnSearch.onclick = function() {
          //modalSearch.style.display = "block";
          var myModal = new bootstrap.Modal(document.getElementById('myModalSearch'), {
            keyboard: false
          });
          myModal.toggle();
        }*/

        /*btnSucursal.onclick = function() {
          modalSucursal.style.display = "block";
        }*/

        // When the user clicks on <span> (x), close the modal
        /*spanSearch.onclick = function() {
          modalSearch.style.display = "none";
        }*/

        /*spanSucursal.onclick = function() {
          modalSucursal.style.display = "none";
        }*/

        // When the user clicks anywhere outside of the modal, close it
        /*window.onclick = function(event) {
            if (event.target == modalSearch) {
                modalSearch.style.display = "none";
            }

            if (event.target == modalSucursal) {
                modalSucursal.style.display = "none";
            }
        }*/

        $(function() {

            /*$("#brand_id").val("");*/
            $("#brand_id").change(function() {
                /*if ($("#brand_id").val() == "") {
                    $("#filtro_model_id").html("<option value=''>Modelo</option>");
                    location.reload() //realizar refresh al no elegir un modelo
                    return 0;
                }
                let options = JSON.parse($("#brand_id option:selected").attr("data-models"));
                 console.log("optiones",options);
                $("#filtro_model_id").html("<option value=''>Modelo</option>");
                $.each(options, function(v, e) {
                    //console.log(e.id);
                    $("#filtro_model_id").append("<option value='" + e.id + "'>" + e.name +
                        "</option>");
                });*/
                let queryString = window.location.search;  // get url parameters
                let params = new URLSearchParams(queryString);  // create url search params object
                params.delete('brand_id');  // delete city parameter if it exists, in case you change the dropdown more then once
                params.delete('page');
                params.delete('model_id');
                if($("#brand_id").val().length > 0){
                    params.append('brand_id', document.getElementById("brand_id").value); // add selected city
                    document.location.href = "?" + params.toString(); // refresh the page with new url
                }else{
                    document.location.href = "?" + params.toString(); // refresh the page with new url
                }



            });
            $("#model_id").change(function() {
                let queryString = window.location.search;  // get url parameters
                let params = new URLSearchParams(queryString);  // create url search params object
                params.delete('model_id');  // delete city parameter if it exists, in case you change the dropdown more then once
                params.delete('page');

                if($("#model_id").val().length > 0){
                    params.append('model_id', document.getElementById("model_id").value); // add selected city
                    document.location.href = "?" + params.toString(); // refresh the page with new url
                }else{
                    document.location.href = "?" + params.toString(); // refresh the page with new url
                }



            });

             $("#filtro_model_id").change(function() {
                 /*const paisId = {!! json_encode($pais_id) !!};
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url : "{{route('buscar','pais_id')}}".replace('pais_id', paisId),
                    data : {'model_id' : this.value },
                    type : 'GET',
                    dataType : 'json',
                    success : function(result){

                        $("#listProducts").html("");
                        $("#paginate").html("");

                        if(result.data.length > 0 ){

                            result.data.forEach((product, key) => {

                            let fila = '<div class="row mt-3 mx-1"> \
                                <div class="card rounded-4" style="border-color: #3478f6;"> \
                                    <div class="card-body"> \
                                        <div class="d-flex justify-content-between"> \
                                            <div class="d-flex flex-row gap-2 align-items-center"> \
                                                <div> \
                                                  @if("'+ product.image +'") \
                                                    <img src="https://tecnicocerca.com/images/ProductImages/'+product.image+'" width="60" height="60" alt="Carrito"> \
                                                  @else \
                                                    <img src="{{asset("/img/images.png")}}" width="60" height="60" alt="Carrito"> \
                                                  @endif \
                                                </div> \
                                                <div>'+ product.name +'"</div> \
                                            </div> \
                                            <div class="d-flex flex-row gap-3 align-items-center">\
                                                <div class="inner rounded-pill d-flex align-items-center" \
                                                    style="background-color: #3478f6;"><span class="text-white p-2">$' + product.unitary + ' x1</span> \
                                                </div> \
                                                <div class="inner rounded-pill d-flex align-items-center" \
                                                    style="background-color: #3478f6;"><span class="text-white p-2">$'+ product.wholesale +' x3 o +</span> \
                                                </div> \
                                                <div class="inner rounded-pill d-flex flex-row align-items-center justify-content-between" \
                                                style="background-color: #82ABF6;"> \
                                                    <div> \
                                                        <button id="'+key+'" class="btn btn-circle m-1 menosHome"> \
                                                            <span style="font-size: 1rem"> \
                                                                <i class="fa-solid fa-minus"></i> \
                                                            </span> \
                                                        </button> \
                                                    </div> \
                                                    <div class="mx-1"> \
                                                        <span id="contadorHome'+key+'">0</span>\
                                                    </div>\
                                                    <div>\
                                                        <button id="'+key+'" class=" btn btn-circle m-1 masHome">\
                                                            <span style="font-size: 1rem">\
                                                                <i class="fa-solid fa-plus"></i>\
                                                            </span>\
                                                        </button>\
                                                    </div>\
                                                </div>\
                                                <div class="inner d-flex align-items-center">\
                                                    <a href="#">\
                                                        <img src="{{ asset("/img/carro.png") }}" width="30" height="30" alt="Carrito">\
                                                    </a> \
                                                    <div class="d-flex justify-content-center h-5 w-4">\
                                                        <span class="cartCountHome" style="color: #82abf6" id="cartCountHome'+key+'">0</span>\
                                                    </div>\
                                                </div>\
                                            </div>\
                                        </div>\
                                    </div>\
                                </div>\
                            </div>'

                            $("#listProducts").append(fila);

                            });

                            var numPag = ""
                            result.links.forEach((pagin, key) => {
                            if(key == 0){
                                        numPag += '<li class="page-item disabled" aria-disabled="true" aria-label="« Previo"><span class="page-link" aria-hidden="true">‹</span></li>'
                                    } else if(key == 1){
                                        numPag +=     '<li class="page-item active" aria-current="page"><span class="page-link">'+pagin.label+'</span></li>'
                                    } else if(key > 1 && key < pagin.length - 1){
                                        numPag +=     '<li class="page-item"><a class="page-link" href="'+pagin.url+'">'+pagin.label+'</a></li>'
                                    }else{
                                        numPag +=  pagin.url ?
                                        '<li class="page-item">\
                                            <a class="page-link" href="'+ pagin.url +'" rel="next" aria-label="Próximo »">›</a>\
                                        </li>' :
                                        '<li class="page-item">\
                                            <a class="page-link" rel="next" aria-label="Próximo »">›</a>\
                                        </li>'
                                    }
                            });

                            let pag = '<nav> \
                                        <ul class="pagination">'+numPag+'</ul>\
                                      </nav>'

                            $("#paginate").append(pag);

                        }else{
                            $("#listProducts").html(
                                '<div class="card rounded-4 mt-4" style="border-color: #3478f6;"> \
                                    <div class="card-body"> \
                                        <div class="d-flex justify-content-center align-items-center"> \
                                            <div class="justify-content-center align-items-center mt-1"> \
                                                <div class="d-flex"><h3>Producto no encontrado</h3></div> \
                                                <div class="d-flex justify-content-center align-items-center mt-1"> \
                                                    <button id="refresh" type="button" class="btn btn-outline-danger">Cancelar busqueda</button> \
                                                </div> \
                                            </div> \
                                        </div> \
                                    </div> \
                                <div>')
                        }

                    }
                });*/
             })
             $.ajaxSetup({
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
             });
             $(".sucursal").click(function () {
                let storeid = $(this).data("storeid");
                let storename = $(this).data("storename");

                var data = new FormData();
                data.append("storeid", storeid);
                data.append("storename", storename);


                $("#modal_store_id").val(storeid).trigger('change');
                /*$("#searchinput").val(storeid).trigger('change');*/

                $.ajax({
                    url: "{{route('storesession')}}",
                    data: data,
                    processData: false,
                    type: 'POST',
                    success: function ( data ) {
                       $("#storeid").val(storeid);
                       $(".storenamegrande").html(storename);
                        myModalSucursales.toggle();

                        const paisId = {!! json_encode($pais_id) !!};
                        var storeId =  storeid;
                        /*window.current_page = 0;*/
                        var url = "{{route('stores',['pais_id'=>'x','store_id'=>'y'])}}".replace('x', paisId).replace('y', storeid);

                        $.ajax({
                            headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                },
                                url : url,
                                type : 'GET',
                                dataType : 'json',
                        }).done(function( response ) {
                                $("#listProducts").html("");
                                $("#paginate").html("");
                                var productsObj = $.parseJSON(response.products);

                                var productItemsStoresArray = response.productItemsStoresArray;
                                var count = 0;
                                if(productsObj.data.length > 0 ){
                                    productsObj.data.forEach((product, key) => {
                                        if(product.id == idproducto){
                                            count = 1;
                                        }else{
                                            count = 0;
                                        }
                                        let fila = '<div class="row mt-3 mx-1">\
                                            <div class="card rounded-4" style="border-color: #3478f6;">\
                                                <div class="card-body">\
                                                    <div class="d-flex justify-content-between">\
                                                        <div class="d-flex flex-row gap-2 align-items-center">\
                                                            <div>\
                                                            @if('+ product.image +')\
                                                                <img src="https://tecnicocerca.com/images/ProductImages/'+ product.image +'" width="60" height="60" alt="Carrito">\
                                                            @else\
                                                                <img src="{{asset('img/images.png')}}" width="60" height="60" alt="Carrito">\
                                                            @endif\
                                                            </div>\
                                                            <div>'+ product.name +'</div>\
                                                            @if('+storeid+')\
                                                                <div class="text-secondary">\
                                                                    Stock: '+productItemsStoresArray[product.id]['stock']+'\
                                                                </div>\
                                                                <input type="hidden" id="stock'+product.id+'" value="'+ productItemsStoresArray[product.id]['stock'] + '">\
                                                            @else\
                                                                <input type="hidden" id="stock'+product.id+'" value="0">\
                                                            @endif\
                                                        </div>\
                                                        <div class="d-flex flex-row gap-3 align-items-center">\
                                                            <div class="inner rounded-pill d-flex align-items-center" style="background-color: #3478f6;"><span class="text-white p-2"> $'+product.unitary+' x1</span>\
                                                            </div>\
                                                            <div class="inner rounded-pill d-flex align-items-center" style="background-color: #3478f6;"><span class="text-white p-2"> $'+product.wholesale+' x3 o +</span>\
                                                            </div>\
                                                            <div class="inner rounded-pill d-flex flex-row align-items-center justify-content-between" style="background-color: #82ABF6;">\
                                                                <div>\
                                                                    <form id="FormProductMenos'+product.id+'" action="javascript:void(0)" method="POST"> @csrf\
                                                                        <div>\
                                                                            <input type="hidden" value="'+product.id+'" id="idMenos" name="id">\
                                                                            <input type="hidden" value="1" id="quantityMenos'+product.id+'" name="quantity">\
                                                                            <input type="hidden" value="menos" name="op">\
                                                                            <button id="'+product.id+'" class="btn btn-circle m-1 menosHome">\
                                                                                <span style="font-size: 1rem">\
                                                                                    <i class="fa-solid fa-minus"></i>\
                                                                                </span>\
                                                                            </button>\
                                                                        </div>\
                                                                    </form>\
                                                                </div>\
                                                                <div class="mx-1">\
                                                                    <span id="contadorHome'+product.id+'">'+count+'</span>\
                                                                </div>\
                                                                <div>\
                                                                    <form id="FormProduct'+product.id+'" action="javascript:void(0)" method="POST" style="margin-bottom: 0px;"> @csrf\
                                                                        <input type="hidden" value="+" id="op" name="op">\
                                                                        <input type="hidden" value="'+product.id+'" id="id" name="id">\
                                                                        <input type="hidden" value="'+product.name+'" id="name" name="name">\
                                                                        <input type="hidden" value="'+product.unitary+'" id="price" name="price">\
                                                                        <input type="hidden" value="'+product.image+'" id="img" name="img">\
                                                                        <input type="hidden" value="'+product.slug+'" id="slug" name="slug">\
                                                                        <input type="hidden" value="'+storeid+'" id="storeIdd" name="storeId">\
                                                                        <input type="hidden" value="'+product.wholesale+'" id="wholesale" name="wholesale">\
                                                                        <input type="hidden" value="'+productItemsStoresArray[product.id]['stock']+'" id="stock" name="stock">\
                                                                        <input type="hidden" value="1" id="quantity'+product.id+'" name="quantity">\
                                                                        <button id="'+product.id+'" class="btn btn-circle m-1 masHome">\
                                                                            <span style="font-size: 1rem">\
                                                                                <i class="fa-solid fa-plus"></i>\
                                                                            </span>\
                                                                        </button>\
                                                                    </form>\
                                                                </div>\
                                                            </div>\
                                                            <div class="inner d-flex flex-row align-items-center">\
                                                                <div class="d-flex justify-content-center">\
                                                                            <img src="{{ asset('img/carro.png') }}" width="30" height="30" alt="Carrito">\
                                                                </div>\
                                                                <div class="d-flex justify-content-center h-5 w-4">\
                                                                    <span class="cartCountHome" style="color: #82abf6" id="cartCountHome'+key+'">0</span>\
                                                                </div>\
                                                            </div>\
                                                        </div>\
                                                    </div>\
                                                </div>\
                                            </div>\
                                        </div>';

                                        $("#listProducts").append(fila);
                                    });
                                }



                            })
                            .fail(function( response ) {
                                console.log( "Error: " + response );
                            });


                    }
                });
            });

            $("body").on("click", ".masHome", async function() {

                let id = $(this).attr("id");


                idproducto = id;

                const form = document.querySelector("#FormProduct"+id);
                var data = new FormData(form);
                console.log(data);



                const modalStore = $('#storeid').val();
                const stock = $("#stock"+id).val();
                const cont = parseInt($("#contadorHome"+id).text());


                if(cont <  stock){
                    $("#contadorHome"+id).text(parseInt($("#contadorHome"+id).text()) + 1);
                    $("#cartCountHome"+id).text(parseInt($("#cartCountHome"+id).text()) + 1);
                    /*$("#quantity"+id).val($("#cartCountHome"+id).text());*/
                    $.ajax({
                        type: 'POST',
                        url: "{{route('cart.store')}}",
                        data: data,
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: (data) => {
                        $("#cantidadcarro").text(data.cantidad);

                        },
                        error: function(data) {
                            console.log(data);
                        }
                    });
                }

                /*let name = $(this).data("name");
                $('#searchinput').val(name);
                $('#search').click();*/
                $('#contadorModal'+id).text(1);


                /*if(modalStore.length == 0){
                    myModalSucursales.toggle();
                }else{
                    myModalSearch.toggle();
                }*/





            });



            $("body").on("click", ".menosHome", function() {
                let id = $(this).attr("id");

                let countH = parseInt($("#contadorHome"+id).text()) - 1;
                let countCart = parseInt($("#cartCountHome"+id).text()) - 1;



                const modalStore = @json($modalStore);

                if(modalStore){
                    myModalSucursales.toggle();
                }
                $("#contadorHome"+id).text(countH > 0 ? parseInt($("#contadorHome"+id).text()) - 1 : 0);
                $("#cartCountHome"+id).text(countCart > 0 ? parseInt($("#cartCountHome"+id).text()) - 1 : 0);
                /*$("#quantity"+id).val($("#cartCountHome"+id).text());*/

                const form = document.querySelector("#FormProductMenos"+id);
                var data = new FormData(form);

                $.ajax({
                        type: 'POST',
                        url: "{{route('cart.update')}}",
                        data: data,
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: (data) => {
                            $("#cantidadcarro").text(data.cantidad);
                        },
                        error: function(data) {
                            console.log(data);
                        }
                    });
            });



        });


        $('#buscar').keypress(function (e) {
          var key = e.which;
          if(key == 13)  // the enter key code
            {
              e.preventDefault();
              var form = $(this).parents('form');
              form.submit();
            }
        });

        $("body").on("click", "#refresh", function() {
            window.location.replace(document.referrer);
        })

    </script>
    <script>
        var id = 'buscar';
        moveCursorToEnd(id);
        function moveCursorToEnd(id) {

            var el = document.getElementById(id)
            el.focus()

            //console.log(  el.value.length);
            if (typeof el.selectionStart == "number") {
                el.selectionStart = el.selectionEnd = el.value.length;
            }
            else if (typeof el.createTextRange != "undefined") {
                var range = el.createTextRange();
                range.collapse(false);
                range.select();
            }
        }

        function carrito(e){

            var elemento = $(e);
            var href = elemento.attr('href');
            /*const modalStore = @json($modalStore);*/
            /*const modalStore = $('#storeid').val();
            if(modalStore.length == 0){
                myModalSucursales.toggle();
                return false;
            }*/
            window.location = href;
        }

            $("body").on("click", ".masModal", async function() {
                let id = $(this).data("id");
                const stock = $("#stockModal"+id).val();
                const cont = parseInt($("#contadorModal"+id).text());
                const form = document.querySelector("#FormProductModal"+id);
                var data = new FormData(form);
                if(cont <  stock){
                   $("#contadorModal"+id).text(parseInt($("#contadorModal"+id).text()) + 1);
                   $("#cartCountModal"+id).text(parseInt($("#cartCountModal"+id).text()) + 1);
                   /*$("#quantity"+id).val($("#cartCountModal"+id).text());*/
                   $.ajax({
                        type: 'POST',
                        url: "{{route('cart.store')}}",
                        data: data,
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: (data) => {
                        $("#cantidadcarro").text(data.cantidad);
                        },
                        error: function(data) {
                            console.log(data);
                        }
                    });
               }

           });
            $("body").on("click", ".menosModal", function() {
                let id = $(this).data("id");

                let countH = parseInt($("#contadorModal"+id).text()) - 1;
                let countCart = parseInt($("#cartCountModal"+id).text()) - 1;

                $("#contadorModal"+id).text(countH > 0 ? parseInt($("#contadorModal"+id).text()) - 1 : 0);
                $("#cartCountModal"+id).text(countCart > 0 ? parseInt($("#cartCountModal"+id).text()) - 1 : 0);

                const form = document.querySelector("#FormProductMenosModal"+id);
                var data = new FormData(form);

                $.ajax({
                        type: 'POST',
                        url: "{{route('cart.update')}}",
                        data: data,
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: (data) => {
                            $("#cantidadcarro").text(data.cantidad);
                        },
                        error: function(data) {
                            console.log(data);
                        }
                    });
                /*$("#quantity"+id).val($("#cartCountModal"+id).text());*/
            });
    </script>

@endsection