@extends('layouts.tabler')
@section('css')
<style>
    /* #spinner-div {
      position: fixed;
      display: none;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      text-align: center;
      background-color: rgba(255, 255, 255, 0.8);
      z-index: 2;
    } */

    .responsiveSearch {
      /* width:100%; /* Ocupa todo el ancho disponible */
      font-size: 16px; /* Tamaño de fuente base */
    }
    .responsiveContainerSearch{
        /* width:50%; Ocupa todo el ancho disponible */
       /* overflow: hidden;
        text-overflow: ellipsis;*/
        font-size: 16px; /* Tamaño de fuente base */
    }

    /* Media query para adaptar el select en pantallas pequeñas */
    @media screen and (max-width: 600px) {
      .responsiveSearch {
        font-size: 10px; /* Reduce el tamaño de la fuente */
      }
      .price{
        background-color: white!important;
        color: blue!important;
      }

    }
    .carousel .carousel-control-prev {
        position: absolute;
        left: -10%;
        z-index: 1;
        color: #0a0a0a !important;
        font-weight: bold;
        width:15%;
    }

    .carousel .carousel-control-next {
        position: absolute;
        right: -10%;
        z-index: 1;
        color: #0a0a0a !important;
        font-weight: bold;
        width:15%;
        }
    .list-group-item{
        border: 0;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 0px;
        padding-right: 0px;
    }
    .swal2-confirm1 {
        width:80%;
    }
    .swal2-deny1 {
        width:80%;
    }
    .swal2-cancel1 {
        width:80%;
    }
    .pricespan{
        width: 8.5rem;
        text-align: center;
    }
    
</style>


@endsection

@section('content')

    <div class="page-header d-print-none m-0 p-0">
        <div class="mt-3 w-100">
            <div class="container-xl">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 w-100">
                <div>
                    <span class="text-primary">Productos</span>
                </div>
                <div class="d-flex flex-row flex-wrap align-items-center gap-1">
                    <div class="mb-2">
                        <label class="form-check form-switch" style="margin-bottom: 0px;padding-left: 0px;">
                            <label class="form-check form-switch" style="margin-bottom: 0px;">
                                <input id="ultimos-vendidos" class="form-check-input" type="checkbox" @if(isset($ultimos_vendidos)) @if($ultimos_vendidos) checked  @endif @endif>
                                <!-- <input id="ultimos-vendidos" class="form-check-input" type="checkbox" checked> -->
                                <span class="text-muted" style="white-space: nowrap;">Últimos Vendidos</span>
                            </label>
                          </label>
                    </div>
                    <div class="mb-2">
                        <label class="form-check form-switch" style="margin-bottom: 0px;">
                            <label class="form-check form-switch" style="margin-bottom: 0px;padding-left: 0px;">
                                <input id="solo-stock" class="form-check-input" type="checkbox" @if(isset($stock)) @if($stock == 'true') checked  @endif @endif>
                                <span class="text-muted" style="white-space: nowrap;">Solo en stock</span>
                            </label>
                        {{--<span class="text-muted" style="white-space: nowrap;">Solo en stock</span>--}}
                          </label>
                        {{--<span class="text-muted" style="white-space: nowrap;">Solo en stock</span>--}}
                    </div>
                    <div class="mb-2">
                        <select class="form-select rounded-pill text-primary border-primary responsiveSearch" id="category_id" style="width: 140px;" data-bs-toggle="tooltip" data-bs-placement="bottom" title="categoría">
                            <option value="" @if($category_id == null) selected @endif >Categoría</option>
                            @foreach ($categories as $category)
                                <option @if($category_id == $category['id']) selected @endif   value="{{ $category['id'] }}">
                                    {{ $category['name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-2">
                        <select class="form-select rounded-pill text-primary border-primary responsiveSearch" id="brand_id" style="width: 140px;" data-bs-toggle="tooltip" data-bs-placement="bottom" title="marca">
                            <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="mb-2">
                        <select class="form-select rounded-pill text-primary border-primary responsiveSearch" id="model_id" style="width: 140px;" data-bs-toggle="tooltip" data-bs-placement="bottom" @if($brand_id == null) title="elige una marca" @else title="modelo" @endif>
                            <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-4 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 responsiveSearch" aria-label="Buscar" autocomplete="off">
                        @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">
                            <div id="icon_search" style="padding-bottom: 5px;">
                            <!-- 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>
                            </div>
                            <div id="mi_loading" style="display:none;" class="spinner-border"   role="status">
                              <span class="visually-hidden">Loading...</span>
                            </div>
                        </span>

                    </div>
                </div>
                <div class="flex-shrink-1">
                    <button type="submit" disabled hidden class="btn btn-primary rounded-pill responsiveSearch">Buscar</button>
                </div>
                </form>
            </div>
            @if($storeId)
                <div class="row mt-5">
                    <div class="d-flex p-0 m-0 justify-content-between flex-wrap gap-1 px-2">
                        <div {{--style="width:50%"--}}><span>Módulo</span></div>
                        <div class="d-flex justify-content-end flex-row flex-wrap gap-2" {{--style="width:50%"--}} >
                            <div class="responsiveContainerSearch"><button id="btn-lista" class="btn rounded-pill responsiveSearch"><div class="responsiveSearch">Buscar en todas las sucursales<span id="cantidadlista" class="badge bg-blue text-blue-fg ms-2 badge-pill">@if(isset($list)) {{$countList}} @else 0 @endif</span></div></button></div>
                            <div class="responsiveContainerSearch">
                                <select class="form-select rounded-pill text-primary border-primary responsiveSearch" id="selectStore" onchange="redirectToStore()">
                                    <option selected disabled >Buscar en una sucursal</option>
                                    <option value="{{route('getAll',['pais_id'=>$pais_id])}}">Todas las sucursales</option>
                                    @foreach ($stores as $store )
                                        @if ($store->name !== $store_name)
                                            <option @if($storeId == $store->id) selected @endif value="{{route('stores', ['pais_id' => $pais_id, 'store_id' => $store->id]) }}">
                                                {{$store->name}}
                                            </option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <div class="row mt-5">
                    <div class="d-flex justify-content-between flex-wrap gap-1">
                        <div {{--style="width:50%"--}}><span>Módulo</span></div>
                        <div class="d-flex justify-content-end flex-row flex-wrap gap-2" {{--style="width:50%"--}}>
                            <div class="responsiveContainerSearch"><button id="btn-lista" class="btn rounded-pill responsiveSearch">Buscar en todas las sucursales<span id="cantidadlista" class="badge bg-blue text-blue-fg ms-2 badge-pill">@if(isset($list)) {{$countList}} @else 0 @endif</span></button></div>
                            <div class="responsiveContainerSearch">
                                <select class="form-select rounded-pill text-primary border-primary responsiveSearch" id="selectStore" onchange="redirectToStore()">
                                    <option selected disabled >Buscar en una sucursal</option>
                                    <!-- <option value="{{route('home',['pais_id'=>$pais_id])}}">Todas las sucursales</option> -->
                                        @foreach ($stores as $store )
                                            <option @if($storeId == $store->id) selected @endif value="{{route('stores', ['pais_id' => $pais_id, 'store_id' => $store->id]) }}">
                                                @if ($store->name !== $store_name)
                                                    {{$store->name}}
                                                @endif
                                            </option>
                                        @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
            <div class="d-none d-md-block">
                <div class="d-flex justify-content-between flex-wrap gap-1 mt-3">
                    <div></div>
                    <div class="d-flex flex-row gap-3">
                        <div class="text-primary fw-bold">Precio unitario</div>
                        <div class="text-primary fw-bold" style="margin-right: 150px">Precio mayorista 3 o +</div>
                    </div>
                </div>
            </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 flex-wrap">
                            <div class="d-flex flex-row gap-3 mb-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 class="d-flex flex-column">
                                    <div><strong>{{$product->name}}</strong></div> 
                                    <div class="text-secondary d-flex flex-wrap">{{$product->part}}</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'] }}">
                                    @if(isset($product->days_to_arrival) && isset($product->arrival_date) )
                                        <div class="text-secondary">En <strong>{{ $product->days_to_arrival }} Días</strong> llegarán más de este producto a la Sucursal.</div>
                                        <div class="text-secondary">Fecha aproximada: <strong>{{ $product->arrival_date }}</strong></div>
                                    @endif
                                @else
                                    <input type="hidden" id="stock{{$product->id}}" value="0">
                                @endif
                                </div>
                            </div>
                            <div class="priceall d-flex flex-row gap-3 mb-2 align-items-center flex-wrap">
                                <div class="price inner rounded-pill d-flex align-items-center"
                                    style="background-color: #3478f6;color:white">
                                    <span class="pricespan p-2 d-md-none w-100 text-start">Precio unitario </span>
                                    <span class="pricespan p-2">${{$product->unitary_number}}</span>
                                </div>
                                <div class="price inner rounded-pill d-flex align-items-center" style="background-color: #3478f6;color:white">
                                    <span class="pricespan p-2 d-md-none w-100 text-start">Precio Mayorista (+3) </span>
                                    <span class="pricespan p-2">${{$product->wholesale_number}}</span>
                                </div>
                                @if($storeId )

                                    {{--@if($productItemsStoresArray[$product->id]['stock']>0)--}}
                                    <div class="d-flex flex-row flex-fill align-items-center justify-content-between">

                                        <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}}">@if(\Cart::session('session')->get($product->id)) {{\Cart::session('session')->get($product->id)['quantity']}} @else 0 @endif</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->part }}" id="part" name="part">
                                                    <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 ms-2">
                                                {{--<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 d-none" style="color: #82abf6" id="cartCountHome{{$product->id}}">0</span>
                                            </div>
                                        </div>
                                    </div>

                                    {{--@endif--}}

                                @else
                                {{--@if($productItemsStoresArray[$product->id]['stock']>0)--}}
                                    <div class="d-flex flex-row flex-fill align-items-center justify-content-end">
                                        <div class="inner rounded-pill d-flex flex-row align-items-center justify-content-between"
                                            style="background-color: #82ABF6;">
                                            <div>
                                                <form id="FormProductMenosList{{$product->id}}" action="javascript:void(0)" method="POST">
                                                    {{ csrf_field() }}
                                                    <div>
                                                        <input type="hidden" value="{{$product->id}}" id="idMenosList" name="id">
                                                        <input type="hidden" value="1" id="quantityMenosList{{$product->id}}" name="quantity">
                                                        <input type="hidden" value="menos" name="op">
                                                        <button id="{{$product->id}}" class="btn btn-circle m-1 menosHomeList">
                                                            <span style="font-size: 1rem">
                                                                <i class="fa-solid fa-minus"></i>
                                                            </span>
                                                        </button>
                                                    </div>
                                                </form>

                                            </div>
                                            <div class="mx-1">
                                                <span class="contadorHomeList" id="contadorHomeList{{$product->id}}">@if(isset($list)) @if(array_key_exists($product->id, $list)) {{ $list[$product->id]['quantity'] }} @else 0 @endif  @else 0 @endif</span>
                                            </div>
                                            <div>
                                                <form id="FormProductList{{$product->id}}" action="javascript:void(0)" method="POST" style="margin-bottom: 0px;">
                                                    {{ csrf_field() }}
                                                    <input type="hidden" value="+" id="opList" name="op">
                                                    <input type="hidden" value="{{ $product->id }}" id="idList" name="id">
                                                    <input type="hidden" value="{{ $product->name }}" id="name" name="name">
                                                    <input type="hidden" value="{{ $product->part }}" id="part" name="part">
                                                    <input type="hidden" value="{{ $product->unitary_formulated }}" 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_formulated }}" id="wholesale" name="wholesale">
                                                    <input type="hidden" value="{{ $productItemsStoresArray[$product->id]['stock'] }}" id="stock" name="stock">
                                                    <input type="hidden" value="1" id="quantityList{{$product->id}}" name="quantity">
                                                    <button id="{{$product->id}}" data-name="{{$product->name}}" class="btn btn-circle m-1 masHomeList">
                                                        <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 d-none d-md-inline">
                                            <div class="d-flex justify-content-center ms-2">
                                                {{--<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="cartCountHomeList d-none" style="color: #82abf6" id="cartCountHomeList{{$product->id}}">@if(isset($list)) @if(array_key_exists($product->id, $list)) {{ $list[$product->id]['quantity'] }} @else 0 @endif  @else 0 @endif</span>
                                            </div>
                                        </div>
                                    </div>
                                  {{--  @endif --}}
                                @endif
                            </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>No hay Productos disponible en este momento</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>
        <div class="d-flex justify-content-end container-xl mt-2 px-4 mx-1 pagination-sm">
            <button id="btn-lista1" class="btn rounded-pill responsiveSearch"><div class="responsiveSearch">Buscar en todas las sucursales<span id="cantidadlista1" class="badge bg-blue text-blue-fg ms-2 badge-pill">@if(isset($list)) {{$countList}} @else 0 @endif</span></div></button> 
        </div>
        <div id="paginate" class="d-flex justify-content-end container-xl mt-2 px-4 mx-1 pagination-sm">
          {!! $products->onEachSide(0)->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.popUpListProduct')
    @include('layouts.popUpSucursal')
    @include('layouts.popUpSucursales')

@endsection
@section('js')


    <script>
        var modalSmall = null;
        

        $(document).ready(function() {
            
            modalSmall = new bootstrap.Modal(document.getElementById('modal-small'), {
                keyboard: false
            });

            function updatePendingRequests() {
               if($.active == 0){
                    modalSmall.hide();
                }else{
                    modalSmall.show();
                }
                // console.log('Peticiones Ajax pendientes: ' + $.active);
                
                /*console.log(ajaxRequests);*/
            }

            // Llamar a la función cada cierto intervalo de tiempo
            setInterval(updatePendingRequests, 500);



        });
       /* var modalSmall = null;*/
        

        $(document).ready(function() {


            
           /* modalSmall = new bootstrap.Modal(document.getElementById('modal-small'), {
                keyboard: false
            });

            function updatePendingRequests() {
               if($.active == 0){
                    modalSmall.hide();
                }else{
                    modalSmall.show();
                }
                console.log('Peticiones Ajax pendientes: ' + $.active);
                
                
            }*/

            // Llamar a la función cada cierto intervalo de tiempo
            /*setInterval(updatePendingRequests, 5000);*/


            $('#solo-stock').click(function() {
                let soloStock = false;
                let queryString = window.location.search;
                let params = new URLSearchParams(queryString);
                params.delete('stock');
                params.delete('page');

                if ($(this).is(':checked')) {
                    soloStock = true;
                }
                if(soloStock){
                    params.append('stock', soloStock);
                    document.location.href = "?" + params.toString();
                }else{
                    const parametros = params.toString();
                    if(parametros.length > 0){
                        document.location.href = "?" + params.toString();
                    }else{
                        const url = document.location.href;
                        window.location.href = url.replace(queryString, '');
                    }

                }


            });
        });
        // $(document).ready(function() {
        //     function handleCheckboxChange() {
        //         console.log("window.location.href", window.location.href)
        //         console.log("Ruta:", window.location.pathname); // Ver la ruta después del dominio
        //         console.log("Cadena de consulta:", window.location.search);
        //         let ultimosVendidos = $('#ultimos-vendidos').is(':checked') ? 'true' : 'false';
        //         console.log("ultimosVendidos", ultimosVendidos)
        //         if(ultimosVendidos === 'true' && window.location.search !== "?ultimos_vendidos=true"){
        //             document.location.href = "?" + "ultimos_vendidos=true";
        //         } else {
        //             return
        //         }
        //     }
        //     handleCheckboxChange();
        // });
            $('#ultimos-vendidos').click(function() {
                let ultimosVendidos = false;
                let queryString = window.location.search;
                let params = new URLSearchParams(queryString);
                params.delete('ultimos_vendidos');
                params.delete('page');

                if ($(this).is(':checked')) {
                    ultimosVendidos = true;
                }
                params.append('ultimos_vendidos', ultimosVendidos);
                document.location.href = "?" + params.toString();
                // if(ultimosVendidos){
                //     params.append('ultimos_vendidos', ultimosVendidos);
                //     document.location.href = "?" + params.toString();
                // }else{
                //     const parametros = params.toString();
                //     if(parametros.length > 0){
                //         document.location.href = "?" + params.toString();
                //     }else{
                //         const url = document.location.href;
                //         window.location.href = url.replace(queryString, '');
                //     }

                // }


            });
        function miBusquedaAjax(data, list) {
            $("#listProducts").html("");
            $("#paginate").html("");

            console.log("BUSQUEDA AJAX")

            if(data.data.length > 0 ){

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

                let listObj = list;
                let existsInList =  listObj ? listObj.hasOwnProperty(product.id) : 0;
                let storeId = @json($storeId);
                let productItemsStoresArray = @json($productItemsStoresArray);
                /*console.log(data);*/
                let imageSrc =  product.image ? "https://tecnicocerca.com/images/ProductImages/" + product.image : "https://tc.ecom.itoeste.com.ar/img/images.png" ;
                let quantity = list ? (existsInList ? list[product.id]['quantity'] : 0) : 0
                let stock = storeId != null ? '<div class="text-secondary"> Stock: ' + product.stock + ' </div> <input type="hidden" id="stock' + product.id + '" value="' + product.stock + '">' : '<input type="hidden" id="stock' + product.id + '" value="0">';
                let botones =  '<div class="d-flex flex-row flex-fill align-items-center justify-content-between "> \
                                        <div class="inner rounded-pill d-flex flex-row align-items-center justify-content-between" \
                                            style="background-color: #82ABF6;"> \
                                            <div> \
                                                <form id="FormProductMenosList'+product.id+'" action="javascript:void(0)" method="POST">\
                                                    <div> \
                                                        <input type="hidden" value="'+product.id+'" id="idMenosList" name="id"> \
                                                        <input type="hidden" value="1" id="quantityMenosList'+product.id+'" name="quantity"> \
                                                        <input type="hidden" value="menos" name="op"> \
                                                        <button id="'+product.id+'" class="btn btn-circle m-1 menosHomeList">\
                                                            <span style="font-size: 1rem"> \
                                                                <i class="fa-solid fa-minus"></i> \
                                                            </span> \
                                                        </button> \
                                                    </div> \
                                                </form> \
                                            </div> \
                                            <div class="mx-1"> \
                                                <span class="contadorHomeList" id="contadorHomeList'+product.id+'">'+quantity+'</span> \
                                            </div> \
                                            <div> \
                                                <form id="FormProductList'+product.id+'" action="javascript:void(0)" method="POST" style="margin-bottom: 0px;"> \
                                                    <input type="hidden" value="+" id="opList" name="op"> \
                                                    <input type="hidden" value="'+product.id+'" id="idList" name="id"> \
                                                    <input type="hidden" value="'+product.name+'" id="name" name="name"> \
                                                    <input type="hidden" value="'+product.part+'" id="part" name="part"> \
                                                    <input type="hidden" value="'+product.unitary_formulated+'" 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_formulated+'" id="wholesale" name="wholesale"> \
                                                    <input type="hidden" value="'+productItemsStoresArray[product.id]["stock"]+'" id="stock" name="stock"> \
                                                    <input type="hidden" value="1" id="quantityList'+product.id+'" name="quantity"> \
                                                    <button id="'+product.id+'" data-name="'+product.name+'" class="btn btn-circle m-1 masHomeList"> \
                                                        <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 ms-2"> \
                                            </div> \
                                            <div class="d-flex justify-content-center h-5 w-4"> \
                                                <span class="cartCountHomeList d-none" style="color: #82abf6" id="cartCountHomeList'+product.id+'">'+quantity+'</span> \
                                            </div> \
                                        </div> \
                                    </div>'; /*:''; product.stock_store > 0 ?/*/
                let botonesStore =  '<div class="d-flex flex-row flex-fill align-items-center justify-content-between "> \
                                        <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 class="contadorHome" id="contadorHome'+product.id+'">'+quantity+'</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.part+'" id="part" name="part"> \
                                                    <input type="hidden" value="'+product.unitary_formulated+'" 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_formulated+'" 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 ms-2"> \
                                            </div> \
                                            <div class="d-flex justify-content-center h-5 w-4"> \
                                                <span class="cartCountHome d-none" style="color: #82abf6" id="cartCountHome'+product.id+'">'+quantity+'</span> \
                                            </div> \
                                        </div> \
                                    </div>';

                let botonera = storeId != null ? botonesStore : botones;

                let filaNew = '<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 flex-wrap"> \
                                <div class="d-flex flex-row gap-3 mb-2 align-items-center"> \
                                    <div> \
                                        <img src="'+imageSrc+'" width="60" height="60" alt="Carrito"> \
                                    </div> \
                                    <div class="d-flex flex-column"> \
                                        <div><strong>'+product.name+'</strong></div> \
                                        <div class="text-secondary d-flex flex-wrap">'+product.part+'</div>' + stock + '</div> \
                                </div> \
                                <div class="priceall d-flex flex-row gap-3 mb-2 align-items-center flex-wrap"> \
                                    <div class="price inner rounded-pill d-flex align-items-center" \
                                        style="background-color: #3478f6;color:white"><span class="pricespan p-2">$'+product.unitary_number+'</span> \
                                    </div> \
                                    <div class="price inner rounded-pill d-flex align-items-center" style="background-color: #3478f6;color:white"><span class="pricespan p-2">$'+ product.wholesale_number+'</span> \
                                    </div> ' + botonera + '</div> \
                            </div> \
                        </div> \
                    </div> \
                </div>'


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

                });

                var numPag = ""
                // Obtén los enlaces de paginación de tu respuesta JSON
                let links = data.links;
                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){
                        console.log("pagina 1")
                        numPag += pagin.active ?
                            ('<li class="page-item active" aria-current="page"><span class="page-link">'+pagin.label+'</span></li>') :
                            ('<li class="page-item" aria-current="page"><span class="page-link">'+pagin.label+'</span></li>')

                    } else if(key > 1 && key < links.length - 1){
                        console.log("pagina  >1 y menos al >")

                        numPag += pagin.active ?
                            ('<li class="page-item active" aria-current="page"><a class="page-link paginationLink" href="'+pagin.url+'">'+pagin.label+'</a></li>'):
                            ('<li class="page-item" aria-current="page"><a class="page-link paginationLink" href="'+pagin.url+'">'+pagin.label+'</a></li>')

                        }else{
                            console.log("pagina  ultima" ,pagin.url )

                            numPag +=  pagin.url ?
                                ('<li class="page-item"><a class="page-link paginationLink" href="'+ pagin.url +'" rel="next" aria-label="Próximo »">›</a></li>') :
                                ('<li class="page-item"><a class="page-link paginationLink" rel="next" aria-label="Próximo »">›</a></li>')
                        }
                });

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

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

                $(".paginationLink").on("click", function(event) {
                    event.preventDefault(); // Evita que el enlace siga el enlace href

                    // Obtiene la URL del enlace de paginación
                    let nextPageUrl = $(this).attr("href");
                    
                    console.log("SIG PAG>>>>>>>>>>>>>>>>>>", nextPageUrl)

                    // Realiza la solicitud AJAX
                    $.ajax({
                        url: nextPageUrl,
                        method: "GET",
                        dataType: "json",
                        success: function(result) {
                            // Maneja los datos de la respuesta, por ejemplo, actualiza la parte de la página con los nuevos datos
                            console.log("AJAX//// PAGINATE", result);
                            miBusquedaAjax(result.data, result.list);

                        },
                        error: function(xhr, status, error) {
                            console.error('Error al cargar la página siguiente:', error);
                        }
                    });

                });

            }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>')
            }

        }

        let typingTimer;                // Temporizador
        let doneTypingInterval = 500;   // Tiempo en ms (medio segundo en este caso)

        $('#buscar').on('keyup', function(e){
            
            // Obtener el valor del input
            window.buscar_home = $(this).val();
            
            if (e.keyCode == 13 || $(this).val().length < 2 ) {
                return;
            }
            clearTimeout(typingTimer);  // Limpia el temporizador
            typingTimer = setTimeout(doneTyping, doneTypingInterval); // Inicia un nuevo temporizador
        });
        $('#buscar').on('keydown', function () {
                clearTimeout(typingTimer);  // Limpia el temporizador
        });

        function doneTyping () {
            console.log(doneTypingInterval);
            const paisId = {!! json_encode($pais_id) !!};
            const store_id = {!! json_encode($storeId) !!};
            const category_id = {!! json_encode($category_id) !!};
            const brand_id = {!! json_encode($brand_id) !!};
            const model_id = {!! json_encode($model_id) !!};
            const stock = {!! json_encode($stock) !!};
            const ultimosVendidos = {!! json_encode($ultimos_vendidos) !!};
            const data = {};
            const buscar = $('#buscar').val();
            if(buscar.length>0){
                data["buscar"] =  $('#buscar').val();
            }
            
            

            if(category_id){
                data["category_id"] = category_id;
            }
            if(brand_id){
                data["brand_id"] = brand_id;
            }
            if(model_id){
                data["model_id"] = model_id;
            }
            if(stock){
                data["stock"] = stock;
            }
            if(ultimosVendidos){
                data["ultimos_vendidos"] = ultimosVendidos;
            }

            $("#icon_search").hide();
            $("#mi_loading").show();
            let url = "";
            console.log('store_id: ' + store_id);
            if(store_id == null){
                url = "{{route('buscar2','pais_id')}}".replace('pais_id', paisId);
            }else{
                url = "{{route('buscaren',['pais_id'=>'x','store_id'=>'y'])}}".replace('x', paisId).replace('y', store_id);
            }
            
            /*let queryString = window.location.search;
            let params = new URLSearchParams(queryString);
            params.append('buscar', $(this).val());
            url = url + "?" + params.toString();*/
            //location.assign(url);
            /*$('#buscar').prop('readonly', true);*/
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url : url,
                data : data,
                type : 'GET',
                dataType : 'json',
                success : function(result){
                    //console.log(result);
                    let buscar_result = result.buscar;
                    if(buscar_result == null){
                        buscar_result = "";
                    }
                    if(buscar_result == window.buscar_home){
                        miBusquedaAjax(result.data, result.list);
                    }

                },
                complete: function() {
                    $("#mi_loading").hide();
                    $("#icon_search").show();
                   /* $('#buscar').prop('readonly', false);*/
                }
            });
        }
        function redirectToStore() {
            var selectElement = document.getElementById("selectStore");
            var selectedOption = selectElement.value;
            if (selectedOption) {
                let queryString = window.location.search;
                let params = new URLSearchParams(queryString);
                params.delete('page');
                //document.location.href = "?" + params.toString();
                window.location.href = selectedOption + "?" + params.toString();
            }
        }

        // 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 initializeModalsAndHandlers() {
            // Inicializa los modales de Bootstrap
            myModalSucursales = new bootstrap.Modal(document.getElementById('myModalSucursalesTabler'));
            myModalListProduct = new bootstrap.Modal(document.getElementById('myModalListProduct'));

            // Maneja el evento cuando el modal 'myModalListProduct' se muestra
            var myModal = document.getElementById('myModalListProduct');

            myModal.addEventListener('shown.bs.modal', function () {
                $('#despacho').val("-1");
                $.ajax({
                    url: '{{route('getItemsStores')}}',
                    type: 'GET',
                    success: function(data) {
                        var $select = $('#despacho');
                        $select.empty(); // Vacía el select
                    
                        $select.append('<option value="-1" selected>Provincia de despacho</option>');
                        $.each(data, function(key, value) {
                            $select.append(`<option value="${value.id}">
                                                ${value.name}  -- --  (${value.max_product_count}/${value.totalItemsList})
                                            </option>`);
                        });
                    }
                });
                lista();
                console.log("?????");
            });

            // Maneja el evento cuando el modal 'myModalListProduct' se oculta
            myModal.addEventListener('hidden.bs.modal', function () {
                $("#listProductsModal").html("");
                $("#pagination").html("");
            });

            // Ajusta el estilo según el ancho de la ventana
            if ($(window).width() < 600) {
                $('.priceall').removeClass('gap-3 align-items-center flex-row');
                $('.pricespan').removeClass('p-2').addClass('p-1');
                $('.price').addClass('w-100');
            } else {
                $('.priceall').addClass('gap-3');
                $('.pricespan').removeClass('p-1').addClass('p-2');
                $('.priceall').removeClass('w-100');
            }

            // Maneja la sesión para continuar
            let continuar = 0;
            if (window.sessionStorage) {
                continuar = sessionStorage.getItem("continuar");
                console.log(continuar);
                if (continuar == 1) {
                    $('#btn-lista').click();
                    sessionStorage.setItem("continuar", 0);
                }
            }
        }

        $(function() {
            initializeModalsAndHandlers();
        });

        $(function() {

            /*$("#brand_id").val("");*/
            $("#category_id").change(function() {

                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');*/
                params.delete('category_id');

                if($("#category_id").val().length > 0){
                    params.append('category_id', document.getElementById("category_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
                }
            });
            $("#brand_id").change(function() {

                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
                }

                console.log("HHHHHH ",params.toString())
               // alert("¡Hola mundo!");

            });

            $("#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() {

                

                $.ajax({
                       type: 'GET',
                       url: '{{asset('')}}' + 'confirmValidateStockBranch/' + $('#storeid').val() +'/carrito',
                       success: (data) => {
                        if(data.status == 'success'){
                            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(stock == 0){
                                Swal.fire({
                                    title: "Producto con stock en 0",
                                    icon: "info"
                                });
                                return;
                            }
                            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);
                                $("#cantidadcarro1").text(data.cantidad);
                                },
                                error: function(data) {
                                    console.log(data);
                                }
                            });
                        }else{
                            if(stock == 1){
                                Swal.fire({
                                    title: "Solo hay una unidad de este producto en stock",
                                    icon: "info"
                                });
                            }else{
                                Swal.fire({
                                    title: "Solo hay " + stock + " unidades de este producto en stock",
                                    icon: "info"
                                });
                            }
                        return;
                        }


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


                        /*if(modalStore.length == 0){
                            myModalSucursales.toggle();
                        }else{
                            myModalSearch.toggle();
                        }*/
                        }else{
                            messageStock(data);
                        }
                       
                       },
                       error: function(data) {
                           console.log(data);
                       }
                });  




                





            });



            $("body").on("click", ".menosHome", function() {


                $.ajax({
                       type: 'GET',
                       url: '{{asset('')}}' + 'confirmValidateStockBranch/' + $('#storeid').val() +'/carrito',
                       success: (data) => {
                        if(data.status == 'success'){
                            let id = $(this).attr("id");

                            if(parseInt($("#contadorHome"+id).text()) == 0){
                                console.log('contador en cero');
                                return;
                            }

                            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);
                                        $("#cantidadcarro1").text(data.cantidad);
                                    },
                                    error: function(data) {
                                        console.log(data);
                                    }
                            }); 
                        }else{
                            messageStock(data);
                        }
                       
                       },
                       error: function(data) {
                           console.log(data);
                       }
                });  

                
            });



        });


        /*$('#buscar').keypress(function (e) {

            var key = e.which;
            if(key == 13){
              e.preventDefault();
              var form = $(this).parents('form');
              form.submit();
            }
        });*/
       /*$('#buscar').keyup(function (e) {
            if(!this.value){
                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");
           idproducto = id;

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

           const cont = parseInt($("#contadorModal"+id).text());
           $("#contadorModal"+id).text(parseInt($("#contadorModal"+id).text()) + 1);



               $.ajax({
                   type: 'POST',
                   url: "{{route('list.store')}}",
                   data: data,
                   cache: false,
                   contentType: false,
                   processData: false,
                   success: (data) => {
                    /*console.log(data);*/
                        $("#cantidadlista").text(data.cantidad);
                        $("#cantidadlista1").text(data.cantidad);
                        $("#contadorHomeList"+id).text($("#contadorModal"+id).text());
                        $("#cartCountHomeList"+id).text($("#contadorModal"+id).text());
                        lista();
                   },
                   error: function(data) {
                       console.log(data);
                   }
               });
       });
       $("body").on("click", ".menosModal", function() {

           let id = $(this).data("id");
           /*console.log(id);*/
           let countH = parseInt($("#contadorModal"+id).text()) - 1;

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

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

           $.ajax({
                   type: 'POST',
                   url: "{{route('list.update')}}",
                   data: data,
                   cache: false,
                   contentType: false,
                   processData: false,
                   success: (data) => {
                       $("#cantidadlista").text(data.cantidad);
                       $("#cantidadlista1").text(data.cantidad);
                       $("#contadorHomeList"+id).text($("#contadorModal"+id).text());
                        $("#cartCountHomeList"+id).text($("#contadorModal"+id).text());
                        lista();
                   },
                   error: function(data) {
                       console.log(data);
                   }
               });
       });

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


            $.ajax({
                    type: 'GET',
                    url: '{{asset('')}}' + 'confirmValidateStockBranch/null/lista',
                    success: (data) => {
                        if(data.status == 'success'){
                            let id = $(this).data("id");
                            idproducto = id;




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

                        

                            const cont = parseInt($("#contadorModalList"+id).text());

                                if(cont + 1 > data.get("stock")){
                                    if(data.get("stock") == 1){
                                        Swal.fire({
                                        title: "Solo hay " + data.get("stock") + " unidad de este producto en stock",
                                        icon: "info"
                                    });
                                    }else{
                                        Swal.fire({
                                        title: "Solo hay " + data.get("stock") + " unidades de este producto en stock",
                                        icon: "info"
                                    });
                                    }
                                    
                                    return;
                                }   
                        

                            $("#contadorModalList"+id).text(parseInt($("#contadorModalList"+id).text()) + 1);
                            $.ajax({
                                type: 'POST',
                                url: "{{route('list.store')}}",
                                data: data,
                                cache: false,
                                contentType: false,
                                processData: false,
                                success: (data) => {
                                /*console.log(data);*/
                                    $("#cantidadlista").text(data.cantidad);
                                    $("#cantidadlista1").text(data.cantidad);
                                    $("#contadorHomeList"+id).text($("#contadorModalList"+id).text());
                                    $("#cartCountHomeList"+id).text($("#contadorModalList"+id).text());
                                },
                                error: function(data) {
                                    console.log(data);
                                }
                            });
                        }else{
                            messageStock(data,true);
                        }
                    },
                    error: function(data) {
                        console.log(data);
                    }
            });    

                
            });

            $("body").on("click", ".menosModalList", function() {

                $.ajax({
                       type: 'GET',
                       url: '{{asset('')}}' + 'confirmValidateStockBranch/null/lista',
                       success: (data) => {
                        if(data.status == 'success'){
                            let id = $(this).data("id");

                            if(parseInt($("#contadorModalList"+id).text()) == 0){
                                return;
                            }
                            let countH = parseInt($("#contadorModalList"+id).text()) - 1;
                            $("#contadorModalList"+id).text(countH > 0 ? parseInt($("#contadorModalList"+id).text()) - 1 : 0);



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

                            $.ajax({
                                    type: 'POST',
                                    url: "{{route('list.update')}}",
                                    data: data,
                                    cache: false,
                                    contentType: false,
                                    processData: false,
                                    success: (data) => {
                                        $("#cantidadlista").text(data.cantidad);
                                        $("#cantidadlista1").text(data.cantidad);
                                        if(countH == 0){
                                            $("#div"+id).remove();
                                            $("#contadorHomeList"+id).text('0');
                                            $("#cartCountHomeList"+id).text('0');

                                        }else{
                                            $("#contadorHomeList"+id).text($("#contadorModalList"+id).text());
                                            $("#cartCountHomeList"+id).text($("#contadorModalList"+id).text());
                                        }

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

                
            });
            document.addEventListener("DOMContentLoaded", function () {
                const cookieName = "first_visit";

                if (!document.cookie.split("; ").find(row => row.startsWith(`${cookieName}=`))) {

                    // Crea la cookie
                    document.cookie = `${cookieName}=true; path=/;`; // Expira en 1 día
                }

            });
            /*$("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());
            });*/


            /****************************************Listado de Solicitud***************************************************************/
            $("#search").on('click', function (e) {
                let buscar = $('#searchinput').val();
                if(buscar.length >0){
                    window.current_page = 0;
                    getProducts(function(productsObj){
                        displayProducts(productsObj);
                    });
                }/*else{
                    alert('listado de solicitud');
                }*/

            });

            $("#btn-lista").on('click', function (e) {

                let storeid = @json($storeId);
                if(storeid != null){
                    Swal.fire({
                        title: "Al buscar en todas las sucursales se borrará el carrito",
                        showCancelButton: true,
                        confirmButtonText: "Si, cambiar",
                        cancelButtonText: "Cancelar",
                        icon: "info"
                    }).then((result) => {
                        /* Read more about isConfirmed, isDenied below */
                        if (result.isConfirmed) {
                            const paisId = {!! json_encode($pais_id) !!};
                            // let url = "{{route('home','pais_id')}}".replace('pais_id', paisId);
                            let url = "{{route('getAll','pais_id')}}".replace('pais_id', paisId);
                            let queryString = window.location.search;
                            let params = new URLSearchParams(queryString);
                            window.location.href = url + "?" + params.toString();
                            /*myModalListProduct.toggle();*/
                        }
                    });
                }else{
                    myModalListProduct.toggle();
                }


            });
            $("#btn-lista1").on('click', function (e) {

                let storeid = @json($storeId);
                if(storeid != null){
                    Swal.fire({
                        title: "Al buscar en todas las sucursales se borrará el carrito",
                        showCancelButton: true,
                        confirmButtonText: "Si, cambiar",
                        cancelButtonText: "Cancelar",
                        icon: "info"
                    }).then((result) => {
                        /* Read more about isConfirmed, isDenied below */
                        if (result.isConfirmed) {
                            const paisId = {!! json_encode($pais_id) !!};
                            let url = "{{route('home','pais_id')}}".replace('pais_id', paisId);
                            let queryString = window.location.search;
                            let params = new URLSearchParams(queryString);
                            window.location.href = url + "?" + params.toString();
                            /*myModalListProduct.toggle();*/
                        }
                    });
                }else{
                    myModalListProduct.toggle();
                }


                });

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

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

               idproducto = id;

               
                $.ajax({
                       type: 'GET',
                       url: '{{asset('')}}' + 'confirmValidateStockBranch/null/lista',
                       success: (data) => {
                        console.log(data);
                        if(data.status == 'success'){
                            
                            const form = document.querySelector("#FormProductList"+id);
                            var data = new FormData(form);
                            console.log(data.get("stock"));
                            if(data.get("stock")==0){
                                Swal.fire({
                                    title: "Producto en stock 0 en todas las sucursales",
                                    icon: "info"
                                });
                                return;
                            }

                            const cont = parseInt($("#contadorHomeList"+id).text());
                                    if(cont + 1 > data.get("stock")){
                                        if(data.get("stock") == 1){
                                            Swal.fire({
                                            title: "Solo hay " + data.get("stock") + " unidad de este producto en stock",
                                            icon: "info"
                                        });
                                        }else{
                                            Swal.fire({
                                            title: "Solo hay " + data.get("stock") + " unidades de este producto en stock",
                                            icon: "info"
                                        });
                                        }
                                        
                                        return;
                                    }   
                            


                                $("#contadorHomeList"+id).text(parseInt($("#contadorHomeList"+id).text()) + 1);
                                $("#cartCountHomeList"+id).text(parseInt($("#cartCountHomeList"+id).text()) + 1);

                                    

                                $.ajax({
                                    type: 'POST',
                                    url: "{{route('list.store')}}",
                                    data: data,
                                    cache: false,
                                    contentType: false,
                                    processData: false,
                                    success: (data) => {
                                        /*console.log(data);*/
                                    $("#cantidadlista").text(data.cantidad);
                                    $("#cantidadlista1").text(data.cantidad);
                                    },
                                    error: function(data) {
                                        console.log(data);
                                    }
                                });

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



              



           });

           function messageStock(data,modal){
                let html = "";
                let html1 = "";
                if(data.msg_product_stock_cero != ""){
                    html = '<b>El producto ya no se encuentra en stock</b> <br>' + data.msg_product_stock_cero;
                }
                let showCancelButton = true;

                if(data.msg_product_stock_bajo != ""){
                    html1 = '<b>El producto disminuyó en stock</b> <br>' + data.msg_product_stock_bajo + '  <br>¿Deseas continuar con la compra?';
                    showCancelButton = false;
                }
                
                let showConfirmButton = true;
                if(data.msg_product_stock_bajo == ""){
                    showConfirmButton = false;
                }

                Swal.fire({
                    icon:"info",
                    html: html + '<br>' + html1,
                    cancelButtonColor: "#3085d6",
                    showCancelButton: showCancelButton,
                    showConfirmButton: showConfirmButton,
                    confirmButtonText: "Aceptar",
                    cancelButtonText: "Aceptar"
                }).then((result) => {
                /* Read more about isConfirmed, isDenied below */
                    if (result.isConfirmed) {
                        /*Swal.fire("Confirmado!", "", "success");*/
                        if(modal){
                            sessionStorage.setItem("continuar",1);
                        }
                        location.reload();
                    }
                    if (result.dismiss === Swal.DismissReason.cancel){
                        sessionStorage.setItem("continuar",0);
                        location.reload();
                    } 
                });
           }



           $("body").on("click", ".menosHomeList", function() {

                let id = $(this).attr("id");
                /*console.log(id);*/

                $.ajax({
                       type: 'GET',
                       url: '{{asset('')}}' + 'confirmValidateStockBranch/null/lista',
                       success: (data) => {
                        if(data.status == 'success'){
                            let countH = parseInt($("#contadorHomeList"+id).text()) - 1;
                            let countCart = parseInt($("#cartCountHomeList"+id).text()) - 1;
                            $("#contadorHomeList"+id).text(countH > 0 ? parseInt($("#contadorHomeList"+id).text()) - 1 : 0);
                            $("#cartCountHomeList"+id).text(countCart > 0 ? parseInt($("#cartCountHomeList"+id).text()) - 1 : 0);


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

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




                
            });


           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 cantidad = $("#contadorHomeList"+product.id).text();
                    cantidad = cantidad.length > 0 ? cantidad : 0;

                    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-1 align-items-center w-50">'+ imagen +'<div>'+ product.name +'\
                    <div class="text-secondary">'+product.part+'</div><div class="text-secondary">Stock: '+product.stock_store+'</div></div>\
                  </div> \
                  <div class="d-flex flex-row gap-1 align-items-center">\
                    <div class="d-flex justify-content-center inner rounded-pill d-flex align-items-center" style="background-color: #3478f6;width:8.5rem">\
                        <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:8.5rem">\
                        <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 +'">'+cantidad+'</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.part+'" id="partModal" name="part">\
                            <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> \
                </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>')
            }*/
            if(productsObj.data.length > 0 ){
                let linea = '';
                /*console.log(productsObj.last_page);*/
                $("#pagination").html('');
                linea = '<ul class="pagination m-0 ms-auto"><li class="page-item"><a class="page-link" href="javascript:void(0)" tabindex="-1" aria-disabled="true" onclick="paginador(-2);"><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="M15 6l-6 6l6 6"></path></svg></a></li>';

                for (let index = 1; index <= productsObj.last_page; index++) {
                  if(window.current_page == index){
                    linea = linea + '<li class="page-item active"><a class="page-link" href="javascript:void(0)"  onclick="paginador('+index+');">' + index + '</a></li>';
                  }else{
                    linea = linea + '<li class="page-item"><a class="page-link" href="javascript:void(0)"  onclick="paginador('+index+');">' + index + '</a></li>';
                  }

                }


                linea = linea + '<li class="page-item"><a class="page-link" href="javascript:void(0)"  onclick="paginador(-1);"><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="M9 6l6 6l-6 6"></path></svg></a></li></ul>';
                $("#pagination").append(linea);
              }

        }
        function getProducts(callback) {

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

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


            $.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;
                        window.last_page = productsObj.last_page;

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

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


                   


        }


        function paginador(pagina){
          if(pagina == '-1'){
            if(window.current_page != window.last_page){
              getProducts(function(productsObj){
                displayProducts(productsObj);
            });
            }

          }else if(pagina == '-2'){
            if((window.current_page-2) > -1 ){
              window.current_page =  window.current_page-2;
              getProducts(function(productsObj){
                displayProducts(productsObj);
              });
            }
          }else{
            window.current_page = pagina-1;
              getProducts(function(productsObj){
                displayProducts(productsObj);
          });
          }

        }
        $('#searchinput').keyup(function (e) {
            if(!this.value){
                $("#listProductsModal").html("");
                $("#pagination").html("");
                /*lista();*/
            }
        });

        function lista(){
            console.log("?2")

            $("#listaSeleccionados").html("");
            /*$("#pagination").html("");*/
                 $("#spinner-div1").show();
                $("#spinner-div2").show();
                $("#spinner-div3").show();

                $.ajax({
                        type: 'GET',
                        url: "{{route('list.get')}}",
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: (result) => {
                            /*console.log(result);*/
                            var productsObj = $.parseJSON(result.data);

                            displayProductsList(productsObj);

                            $("#spinner-div1").hide();
                            $("#spinner-div2").hide();
                            $("#spinner-div3").hide();

                        },
                        error: function(result) {
                            console.log(result);
                            $("#spinner-div").hide();
                        }
                });
            }

        function displayProductsList(productsObj){

            $("#listaSeleccionados").html("");


                if(productsObj != null && Object.keys(productsObj).length > 0 ){
                Object.keys(productsObj).forEach(function(key) {
                console.log(productsObj[key]);
                    let imagen = '';

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

                    let fila = '<div id="div'+productsObj[key].id+'" 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 flex-wrap align-items-center"> \
                  <div class="d-flex flex-row gap-1 align-items-center flex-grow-1">'+ imagen +'<div>'+ productsObj[key].name +'\
                    <div class="text-secondary">' + productsObj[key].attributes.part + '</div></div>\
                  </div> \
                  <div class="d-flex flex-row gap-3 align-items-center mt-2 ms-1"> \
                    <div class="inner rounded-pill d-flex flex-row align-items-center justify-content-between" style="background-color: #82ABF6;"> \
                      <div> \
                        <form id="FormProductMenosModalList'+productsObj[key].id+'" action="javascript:void(0)" method="POST"> @csrf\
                            <div>\
                                <input type="hidden" value="'+productsObj[key].id+'" id="idMenosModalList" name="id">\
                                <input type="hidden" value="1" id="quantityMenosModalList'+productsObj[key].id+'" name="quantity">\
                                <input type="hidden" value="menos" name="op">\
                                <button id="menosModalList'+ productsObj[key].id +'" data-id="'+ productsObj[key].id +'" class="btn btn-circle m-1 menosModalList"> \
                                    <span style="font-size: 1rem"> \
                                        <i class="fa-solid fa-minus"></i> \
                                    </span> \
                                </button> \
                            </div>\
                        </form>\
                      </div> \
                      <div class="mx-1"> \
                       <span id="contadorModalList'+ productsObj[key].id +'">'+productsObj[key].quantity+'</span> \
                      </div> \
                      <div> \
                        <form id="FormProductModalList'+productsObj[key].id+'" action="javascript:void(0)" method="POST" style="margin-bottom: 0px;"> @csrf\
                            <input type="hidden" value="+" id="op" name="op">\
                            <input type="hidden" value="'+productsObj[key].id+'" id="idModalList" name="id">\
                            <input type="hidden" value="'+productsObj[key].name+'" id="nameModalList" name="name">\
                            <input type="hidden" value="'+productsObj[key].attributes.part+'" id="partModalList" name="part">\
                            <input type="hidden" value="'+productsObj[key].price+'" id="priceModalList" name="price">\
                            <input type="hidden" value="'+productsObj[key].attributes.image+'" id="imgModalList" name="img">\
                            <input type="hidden" value="'+productsObj[key].attributes.slug+'" id="slugModalList" name="slug">\
                            <input type="hidden" value="'+storeid+'" id="storeIddModalList" name="storeId">\
                            <input type="hidden" value="'+productsObj[key].attributes.wholesale+'" id="wholesaleModalList" name="wholesale">\
                            <input type="hidden" value="'+productsObj[key].attributes.stock_store+'" id="stockModalList" name="stock">\
                            <input type="hidden" value="1" id="quantityModalList'+productsObj[key].id+'" name="quantity">\
                            <button id="masModalList'+ productsObj[key].id +'" data-id="'+ productsObj[key].id +'" class="btn btn-circle m-1 masModalList"> \
                                <span style="font-size: 1rem"> \
                                    <i class="fa-solid fa-plus"></i> \
                                </span> \
                                </button> \
                        </form>\
                      </div> \
                    </div> \
                  </div> \
                </div> \
                </div> \
              </div>';
            //   $(`#menosModalList${productsObj[key].id}`).onchange(function() {
                // initializeModalsAndHandlers();
            //   })
            //   $(`#masModalList${productsObj[key].id}`).onchange(function() {
                // initializeModalsAndHandlers();
            //   })

                $(".todas-sucursales").show();
                $("#alert-product").hide();


                $("#listaSeleccionados").append(fila);
                });
            }else{
                $(".todas-sucursales").hide();
                let fila = '<div id="no-encontrado" class="d-flex justify-content-center align-items-center"><h3>Debes Seleccionar primero un producto</h3></div>'
                $("#alert-product").html(fila);


                // $("#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>')
            }


        }
        $("#btn-clear").on('click', function (e) {
            $.ajax({
                        type: 'GET',
                        url: "{{route('list.clear')}}",
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: (result) => {
                           /* console.log(result);*/
                            $("#cantidadlista").text(result.cantidad);
                            $("#cantidadlista1").text(result.cantidad);
                            lista();
                            let textos = document.querySelectorAll('.contadorHomeList');

                            textos.forEach((texto) => {
                                texto.textContent = "0";
                            });

                            textos = document.querySelectorAll('.cartCountHomeList');

                            textos.forEach((texto) => {
                                texto.textContent = "0";
                            });

                            $(".todas-sucursales").show();
                            $("#alert-product").show();


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

        $(function() {
            var myModalSucursal = document.getElementById('myModalSucursal')
            myModalSucursal.addEventListener('hidden.bs.modal', function () {

                var myModalEl = document.getElementById('myModalSucursal')
                var modal = bootstrap.Modal.getInstance(myModalEl)
                modal.dispose();
            });
            myModalSucursal.addEventListener('shown.bs.modal', async function (e) {

                /*Swal.fire({
                    title: "Debes seleccionar una sucursal",
                    icon: "info"
                });*/


                    /*if($('#despacho').val() == "-1"){
                        Swal.fire({
                                    icon: "info",
                                    title: "Seleccione provincia de despacho",
                                    });
                                    //bootstrap.Modal.getInstance(myModalSucursal).hide();
                                    $('#myModalSucursal').modal({show: 'false'});
                        return 0;
                    }*/



                    $.ajax({
                        type: 'GET',
                        url: "{{route('list.search')}}?despacho="+$('#despacho').val(),
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: (result) => {
                            console.log(result.stores.length);
                           /* console.log(result.product_requisition);*/
                           
                            if( Object.keys(result.product_requisition).length > 0 ){
                                $("#solicitado").html("");
                                let filaInicio = '<div><b>Solicitado</b></div><div class="d-none d-sm-none d-md-block" style="height: 16px;" ></div>';
                                let filaMedio = '';
                                let filaFin = '<div class="d-none d-sm-none d-md-block" style="height: 36px;" ></div></div>';

                                Object.keys(result.product_requisition).forEach(function(key) {
                                    let imagen = '';

                                    if(result.product_requisition[key]['product_image'] === null){
                                        imagen = '<img src="{{asset("/img/images.png")}}" width="60" height="60" alt="Carrito">';
                                    }else{
                                        imagen = '<img src="https://tecnicocerca.com/images/ProductImages/'+result.product_requisition[key]['product_image']+'" width="60" height="60" alt="Carrito">';
                                    }
                                    /*console.log(result.product_requisition[key]);*/
                                    filaMedio = filaMedio + '<div>\
                                                    <div class="card" style="border-radius:30px;border-color: #3478f6;">\
                                                        <div class="card-body" style="padding-top: 8px;padding-bottom: 8px;">\
                                                            <div class="d-flex justify-content-between">\
                                                                <div class="d-flex flex-row gap-2 align-items-center">\
                                                                    <div>'+imagen+'</div>\
                                                                    <div>\
                                                                        <div>'+result.product_requisition[key]['product_name']+'</div>\
                                                                        <div>'+result.product_requisition[key]['product_part']+'</div>\
                                                                    </div>\
                                                                </div>\
                                                                <div class="inner d-flex align-items-center mx-4">\
                                                                    <div class="d-flex justify-content-center">\
                                                                        <span id="cartCount"><b>'+result.product_requisition[key]['cant_solicitada']+'</b></span>\
                                                                    </div>\
                                                                </div>\
                                                            </div>\
                                                        </div>\
                                                    </div>\
                                                </div>';
                                });
                                let fila = filaInicio + filaMedio + filaFin;
                                $("#solicitado").append(fila);
                            }

                            
                            if( Object.keys(result.stores).length > 0 ){


                                var store=1;
                                $("#store-all").html('');
                                var carrusel = 1;
                                var filastore = '';
                                var itemstore = '';
                                var keyactive = 0;
                               
                                Object.keys(result.stores).forEach(function(key) {
                                    
                                    if(result.stores[key].products!=null){
                                    
                                       
                                    
                                        let filaInicio = '';
                                        var filaMedio = '';
                                        let filaFin = '';
                                        let fila = '';
                                        
                                        
                                        if(store == 1){
                                            $("#store1").html("");
                                            filaInicio = '<div><b>Disponibles en sucursal</b></div><div><b>'+result.stores[key]['name']+'</b></div>';
                                            filaMedio = '';
                                            filaFin = '<div class="d-flex align-items-center" style="width:80%" ><a id="elegir1"  onClick = "openElegir(1);" data-idstore="'+result.stores[key]['store_id']+'" data-href="{{asset('')}}choose-branch/'+result.stores[key]['store_id']+'" href="javascript:void(0)" class="btn btn-primary rounded-pill" style="background-color: #3478f6;">ELEGIR SUCURSAL</a></div>';
                                            
                                                Object.keys(result.stores[key].products).forEach(function(key1) {
                                                    /*console.log(result.stores[key].products[key1]);*/
                                                    let imagen = '';
                                                    if(result.stores[key].products[key1]['product_image'] === null){
                                                        imagen = '<img src="{{asset("/img/images.png")}}" width="60" height="60" alt="Carrito">';
                                                    }else{
                                                        imagen = '<img src="https://tecnicocerca.com/images/ProductImages/'+result.stores[key].products[key1]['product_image']+'" width="60" height="60" alt="Carrito">';
                                                    }

                                                    filaMedio = filaMedio + '<div>\
                                                                <div class="card" style="border-radius:30px;border-color: #3478f6;">\
                                                                    <div class="card-body" style="padding-top: 8px;padding-bottom: 8px;">\
                                                                    <div class="d-flex justify-content-between">\
                                                                    <div class="d-flex flex-row gap-2 align-items-center">\
                                                                        <div>'+imagen+'</div>\
                                                                            <div>'+result.stores[key].products[key1]['product_name']+'</div>\
                                                                    </div>\
                                                                    <div class="inner d-flex align-items-center ms-1">\
                                                                        <div class="d-flex justify-content-center">\
                                                                        <span id="cartCount'+result.stores[key].products[key1]['product_id']+'S'+result.stores[key].store_id+'"><b>'+result.stores[key].products[key1]['stock']+'</b></span>\
                                                                        </div>\
                                                                    </div>\
                                                                    </div>\
                                                                    </div>\
                                                                </div>\
                                                                </div>';
                                                });
                                            


                                            fila = filaInicio + filaMedio + filaFin;
                                            /*$("#store1").append(fila);*/
                                            store = 2
                                        }else{
                                            $("#store2").html("");
                                            filaInicio = '<div><b>Disponibles en sucursal</b></div><div><b>'+result.stores[key]['name']+'</b></div>';
                                            filaMedio = '';
                                            filaFin = '<div class="d-flex align-items-center" style="width:80%" ><a id="elegir2" onClick = "openElegir(2);" data-idstore="'+result.stores[key]['store_id']+'" data-href="{{asset('')}}choose-branch/'+result.stores[key]['store_id']+'" href="javascript:void(0)" class="btn btn-primary rounded-pill" style="background-color: #3478f6;">ELEGIR SUCURSAL</a></div>';
                                            
                                                Object.keys(result.stores[key].products).forEach(function(key1) {
                                                    /*console.log(result.stores[key].products[key1]);*/
                                                    let imagen = '';
                                                    if(result.stores[key].products[key1]['product_image'] === null){
                                                        imagen = '<img src="{{asset("/img/images.png")}}" width="60" height="60" alt="Carrito">';
                                                    }else{
                                                        imagen = '<img src="https://tecnicocerca.com/images/ProductImages/'+result.stores[key].products[key1]['product_image']+'" width="60" height="60" alt="Carrito">';
                                                    }
                                                    filaMedio = filaMedio + '<div>\
                                                                                <div class="card" style="border-radius:30px;border-color: #3478f6;">\
                                                                                    <div class="card-body" style="padding-top: 8px;padding-bottom: 8px;">\
                                                                                        <div class="d-flex justify-content-between">\
                                                                                            <div class="d-flex flex-row gap-2 align-items-center">\
                                                                                                <div>'+imagen+'</div>\
                                                                                                    <div>'+result.stores[key].products[key1]['product_name']+'</div>\
                                                                                                </div>\
                                                                                                <div class="inner d-flex align-items-center ms-1">\
                                                                                                    <div class="d-flex justify-content-center">\
                                                                                                        <span id="cartCount'+result.stores[key].products[key1]['product_id']+'S'+result.stores[key].store_id+'"><b>'+result.stores[key].products[key1]['stock']+'</b></span>\
                                                                                                    </div>\
                                                                                                </div>\
                                                                                            </div>\
                                                                                        </div>\
                                                                                    </div>\
                                                                                </div>\
                                                                            </div>';
                                                });
                                            


                                            fila = filaInicio + filaMedio + filaFin;
                                            /*$("#store2").append(fila);*/
                                            store = 1
                                        }

                                        /**/
                                        
                                       
                                        
                                        
                                        Object.keys(result.stores[key].products).forEach(function(key1) {
                                            let imagen = '';
                                            if(result.stores[key].products[key1]['product_image'] === null){
                                                imagen = '<img src="{{asset("/img/images.png")}}" width="60" height="60" alt="Carrito">';
                                            }else{
                                                imagen = '<img src="https://tecnicocerca.com/images/ProductImages/'+result.stores[key].products[key1]['product_image']+'" width="60" height="60" alt="Carrito">';
                                            }
                                            let arrivalDate = result.stores[key].products[key1]['arrival_date'] 
                                                ? '<strong>Fecha de llegada de más items: ' + result.stores[key].products[key1]['arrival_date'] + '</strong>' 
                                                : '<div></div>';
                                            itemstore = itemstore + '<li class="list-group-item">\
                                                                        <div class="card" style="border-radius:30px;border-color: #3478f6;">\
                                                                            <div class="card-body" style="padding-top: 8px;padding-bottom: 8px;">\
                                                                                <div class="row">\
                                                                                    <div class="col">'+result.stores[key].products[key1]['product_name']+'</div>\
                                                                                    <div class="col d-flex justify-content-end"><span id="cartCount'+result.stores[key].products[key1]['product_id']+'S'+result.stores[key].store_id+'"><b>'+result.stores[key].products[key1]['stock']+'</b></span></div>\
                                                                                </div>\
                                                                                    <div class="col"> ' + arrivalDate + '</div>\
                                                                                </div> \
                                                                        </div>\
                                                                    </li>';
                                        });
                                        
                                        
                                        var active = "";
                                        if(keyactive == 0){
                                            active = "active";
                                            keyactive = keyactive + 1;
                                        }else{
                                            active = "";
                                        }
                                        if(carrusel == 1){
                                            filastore = filastore + '<div class="carousel-item '+active+'"\
                                                                        <div class="container">\
                                                                            <div class="row">\
                                                                                <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12">\
                                                                                    <ul class="list-group">\
                                                                                        <li class="list-group-item">\
                                                                                            <b>Disponibles en sucursal</b>\
                                                                                        </li>\
                                                                                        <li class="list-group-item">\
                                                                                            <b>'+result.stores[key]['name']+'</b>\
                                                                                        </li>\
                                                                                        '+itemstore+'\
                                                                                        <li class="list-group-item">\
                                                                                            <a id="elegir'+key+'" onClick = "openElegir('+key+');" data-idstore="'+result.stores[key]['store_id']+'" data-href="{{asset('')}}choose-branch/'+result.stores[key]['store_id']+'" href="javascript:void(0)" class="btn btn-primary rounded-pill w-100" style="background-color: #3478f6;">ELEGIR SUCURSAL</a>\
                                                                                        </li>\
                                                                                    </ul>\
                                                                                </div>';
                                            carrusel = 2;
                                        }else if(carrusel == 2){
                                                        filastore = filastore + '<div class="col-xl-4 col-lg-12 col-md-12 col-sm-12">\
                                                                                    <ul class="list-group">\
                                                                                        <li class="list-group-item">\
                                                                                            <b>Disponibles en sucursal</b>\
                                                                                        </li>\
                                                                                        <li class="list-group-item">\
                                                                                            <b>'+result.stores[key]['name']+'</b>\
                                                                                        </li>\
                                                                                        '+itemstore+'\
                                                                                        <li class="list-group-item">\
                                                                                            <a id="elegir'+key+'" onClick = "openElegir('+key+');" data-idstore="'+result.stores[key]['store_id']+'" data-href="{{asset('')}}choose-branch/'+result.stores[key]['store_id']+'" href="javascript:void(0)" class="btn btn-primary rounded-pill w-100" style="background-color: #3478f6;">ELEGIR SUCURSAL</a>\
                                                                                        </li>\
                                                                                    </ul>\
                                                                                </div>';
                                            carrusel = 3;
                                        }
                                        else{
                                            filastore =  filastore +        '<div class="col-xl-4 col-lg-12 col-md-12 col-sm-12">\
                                                                                    <ul class="list-group">\
                                                                                        <li class="list-group-item">\
                                                                                            <b>Disponibles en sucursal</b>\
                                                                                        </li>\
                                                                                        <li class="list-group-item">\
                                                                                            <b>'+result.stores[key]['name']+'</b>\
                                                                                        </li>\
                                                                                        '+itemstore+'\
                                                                                        <li class="list-group-item">\
                                                                                            <a id="elegir'+key+'" onClick = "openElegir('+key+');" data-idstore="'+result.stores[key]['store_id']+'" data-href="{{asset('')}}choose-branch/'+result.stores[key]['store_id']+'" href="javascript:void(0)" class="btn btn-primary rounded-pill w-100" style="background-color: #3478f6;">ELEGIR SUCURSAL</a>\
                                                                                        </li>\
                                                                                    </ul>\
                                                                                </div>\
                                                                            </div>\
                                                                        </div>\
                                                                    </div>';
                                            carrusel = 1;

                                        }
                                        itemstore = '';
                                        
                                    }
                                    
                                });
                                
                                if(carrusel == 2 || carrusel == 3){
                                    filastore =  filastore + '</div></div></div>';
                                }



                               
                                $("#store-all").append(filastore);
                            }else{
                                $("#store-all").html('');
                                Swal.fire({
                                    title: "Actualmente ninguna de nuestras sucursales de " + $( "#despacho option:selected" ).text() + " no cuenta con stock de los productos solicitados",
                                    icon: "info"
                                });
                            }



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

            });



            $("#btn-sucursal").click(async function(){
                if($('#despacho').val() == "-1"){
                    var states = @json($states);
                    var json_arr = {};

                    states.forEach((elemento, key) => {
                        json_arr[elemento['id']] = elemento['state_name'];
                    });

                    var json_string = JSON.stringify(json_arr);


                    /*Swal.fire({
                                icon: "info",
                                title: "Seleccione provincia de despacho",
                                });*/

                                const inputOptions = {
                                    "#ff0000": "Red",
                                    "#00ff00": "Green",
                                    "#0000ff": "Blue"
                                    };

                                const { value: sucursal } = await Swal.fire({
                                icon: "info",
                                title: 'Selección de ciudad de despacho',
                                target: document.getElementById('myModalListProduct'),
                                input: "select",
                                inputOptions: json_arr,
                                showCancelButton: true,
                                inputValidator: (value) => {
                                    if (!value) {
                                    return "Seleccione una sucursal";
                                    }
                                }
                                });
                                if (sucursal) {
                                    $('#despacho').val(sucursal).trigger('change');
                                }

                                /*const { value: sucursal } = await Swal.fire({
                                target: document.getElementById('myModalListProduct'),
                                icon: "info",
                                title: 'Selección de sucursal',
                                input: 'select',
                                inputOptions: json_arr,
                                inputPlaceholder: 'Seleccione una sucursal',
                                showCancelButton: true,
                                inputValidator: (value) => {
                                    return new Promise((resolve) => {
                                    if (value === '') {
                                        resolve('Seleccione una sucursal')
                                    }
                                    })
                                }
                                })
                                console.log(sucursal);
                                if (sucursal) {
                                Swal.fire('You selected: ' + sucursal)
                                }*/

                    //return false;
                }
                var myModalEl = document.querySelector('#myModalSucursal');
                var modal = bootstrap.Modal.getOrCreateInstance(myModalEl); 
                var myModalEl1 = document.querySelector('#myModalListProduct');
                var modal1 = bootstrap.Modal.getOrCreateInstance(myModalEl1); 

                modal.toggle();
                modal1.toggle();
            });
        });

         /********************************************************************************************************/


            $( "#despacho" ).on( "change", function() {

                /*$("#listProductsModal").html("");
                $("#pagination").html("");
                let buscar = $('#searchinput').val();

                if(buscar.length == 0 && $( "#despacho" ).val()!="-1"){
                    window.current_page = 0;
                    getProducts(function(productsObj){
                        displayProducts(productsObj);
                    });
                }*/


            } );

            function openElegir(opcion){
                let url = "{{route('list.validate-stock-branch','store_id')}}".replace('store_id', $('#elegir'+opcion).data('idstore'));
                
                    $.ajax({
                        headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            url : url,
                            type : 'GET',
                            dataType : 'json',
                    })
                    .done(function( response ) {
                        window.location.href = $('#elegir'+opcion).data('href');
                        /*if(response.seguir == true){
                            window.location.href = $('#elegir'+opcion).data('href');
                        }else{
                            Swal.fire({
                            icon: "error",
                            title: "La existencia a cambiado",
                            });
                            response.existencia.forEach(
                                function (elemento) {
                                    console.log(elemento);
                                    $('#'+elemento['cart_count']).html(`<b>${elemento['stock_new']}</b>`);
                                    $('#'+elemento['cart_count']).addClass('text-primary');

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

            }






            $(window).resize(function(){
                if($(window).width()<600){
                    $('.priceall').removeClass('gap-3');


                    $('.pricespan').removeClass('p-2');
                    $('.pricespan').addClass('p-1');
                    $('.price').addClass('w-100');

                }else{
                    $('.priceall').addClass('gap-3');
                    $('.pricespan').removeClass('p-1');
                    $('.pricespan').addClass('p-2');
                    $('.price').removeClass('w-100');
                }
            });

            $( window ).on( "load", function() {
                const idstore = {!! json_encode($storeId) !!};
                var selected = null;
                const userId = {!! json_encode(auth()->id()) !!};
                console.log("User ID from session:", userId);
                console.log("window.sessionStorage",window.sessionStorage);
                const cookieName = "first_visit";

                    if (window.sessionStorage) {
                        console.log(' entrando en sessionStorage');
                        selected = sessionStorage.getItem("selected");
                        console.log('selected: ' + selected);
                        if(selected === '4'){
                            selected = null;
                        }
                        console.log("coocie", document.cookie.split("; ").find(row => row.startsWith(`${cookieName}=`)))
                        if( !userId ){
                            if(!document.cookie.split("; ").find(row => row.startsWith(`${cookieName}=`))){
                            
                            
     

                                Swal.fire({
                                    icon: "info",
                                    title: "Estas en todas las sucursales ¿Dónde quieres buscar?",
                                    showDenyButton: true,
                                    showCancelButton: true,
                                    confirmButtonText: "Buscar en todas las sucursales",
                                    denyButtonText: `Buscar en una sucursal`,
                                    cancelButtonText: `Ver lista de precios`,
                                    customClass: {
                                        actions: 'my-actions',
                                        cancelButton: 'swal2-cancel1',
                                        confirmButton: 'swal2-confirm1',
                                        denyButton: 'swal2-deny1',
                                    },
                                    }).then((result) => {
                                    /* Read more about isConfirmed, isDenied below */
                                    if (result.isConfirmed) {
                                        $("#selectStore").hide();
                                        $("#btn-lista").click();
                                        sessionStorage.setItem("selected", "1");
                                    } else if (result.isDenied) {
                                        $("#btn-lista").hide();
                                        $("#btn-lista1").hide();
                                        $("#selectStore").show();
                                        var m = new bootstrap.Modal(document.getElementById('myModalSucursalesTabler'));
                                        m.toggle();
                                        sessionStorage.setItem("selected", "2");
                                    }else {
                                        $("#selectStore").show();
                                        $("#btn-lista").show();
                                        $("#btn-lista1").show();
                                        sessionStorage.setItem("selected", "3");
                                    }
                                });
                        }else{
                            if (selected == 1) {
                                        $("#btn-lista").show();
                                        $("#btn-lista1").show();
                                        $("#selectStore").hide();

                                    } else if (selected == 2) {
                                        $("#btn-lista").hide();
                                        $("#btn-lista1").hide();
                                        $("#selectStore").show();
                                    }else if (selected == 3){
                                        $("#selectStore").show();
                                        $("#btn-lista").show();
                                        $("#btn-lista1").show();
                                    }
                        }
                    } else {
                        // const frequentStoreId = {!! json_encode($frequentStoreId) !!};
                        const frequentStoreId = {!! isset($frequentStoreId) ? json_encode($frequentStoreId) : 'null' !!};
                        if (frequentStoreId) {
                            console.log("frequentStoreId", frequentStoreId)
                            const paisId = {!! json_encode($pais_id) !!}; // Asegúrate de tener el pais_id disponible también
                            const url = `{{ route('stores', ['pais_id' => ':pais_id', 'store_id' => ':store_id']) }}` // Construir la ruta
                                .replace(':pais_id', paisId)
                                .replace(':store_id', frequentStoreId);
                                selected = null;
                            
                            // Redireccionar a la nueva URL
                            window.location.href = url;
                        }
                    }



                    }
                        else{
                        throw new Error('Tu Browser no soporta sessionStorage!');
                    }
                
            });

            /*
            $.ajax({
                       type: 'GET',
                       url: '{{asset('')}}' + 'confirmValidateStockBranch/null/lista',
                       success: (data) => {
                        if(data.status == 'success'){

                        }else{
                            messageStock(data);
                        }
                       
                       },
                       error: function(data) {
                           console.log(data);
                       }
                });            
            */

           
         /*// Obtener el elemento de input
         const input = document.getElementById('buscar');

        // Función para mantener el enfoque en el input
        function keepFocus() {
            if (document.activeElement !== input) {
                input.focus();
            }
        }

        // Usar setInterval para verificar y mantener el enfoque
        setInterval(keepFocus, 2000);

        // Inicialmente enfocar el input
        input.focus();*/
    
    </script>

@endsection