@extends('layouts.tabler')
@section('css')
  <link rel="stylesheet" href="{{asset('plugins/steps/css/normalize.css')}}">
  {{-- <link rel="stylesheet" href="{{asset('plugins/steps/css/main.css')}}"> --}}
  <link rel="stylesheet" href="{{asset('plugins/steps/css/jquery.steps.css')}}">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/css/intlTelInput.css">

  <style>
    .number{
      display: none;
    }
    .contact{
        display: none;
    }
    
    .contactCheck{
        display: none;
    }

    .wizard > .steps a, .wizard > .steps a:hover, .wizard > .steps a:active {
      font-size: min(calc(0.4em + 0.5vw),1em);
    }
    .opciones-alerta {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 10px;
        z-index: 9999;
        width: 30%;
    }
    /*.modal-backdrop {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      /* height: 100%; * /
      background-color: rgba(0, 0, 0, 0.5); /* Ajusta el valor alfa (último valor) para cambiar la opacidad * /
      z-index: -1; /*Coloca el fondo oscuro detrás del modal * /
    }*/
    .iti{
      width: 100%;
    }
    .titulo-precio{
      margin-right: 360px;
    }
    @media ( 856px  <= width <= 1104px) {
      .titulo-precio{
        margin-right: 130px;
      }
    }
    @media (width <= 856px) {
      .titulo-precio{
        margin-right: 0px;
      }
      .opciones-alerta {
        width: 80vw;
    }
    }
    .pricespan{
        min-width: 110px;
        text-align: center;
    }
    

    



  </style>
  <script src="{{asset('plugins/steps/lib/modernizr-2.6.2.min.js')}}"></script>
  <script src="{{asset('plugins/steps/lib/jquery-1.9.1.min.js')}}"></script>
  <script src="{{asset('plugins/steps/lib/jquery.cookie-1.3.1.js')}}"></script>
  <script src="{{asset('plugins/steps/build/jquery.steps.js')}}"></script>

  <script>
    $(function ()
    {
      $("#wizard").steps({
            headerTag: "h2",
            bodyTag: "section",
            transitionEffect: "slideLeft",
            stepsOrientation: "vertical",
            enableAllSteps: true,
            enablePagination: false
        });
    });
  </script>

@endsection
@section('content')




<div class="page-header d-print-none">
  <div class="container-xl px-4 ">

    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mt-4">
      <div>
        @if(\Cart::session('session')->getTotalQuantity()>0)
          <div class="d-flex" >
            <div class="m-2 h2">
              <a href="{{session()->get('home')}}"><i class="fa-solid fa-arrow-left fa-lg"></i></a>
            </div>
            <div class="m-2 h2">
              <span class="text-primary">Tu carro de compras({{ \Cart::session('session')->getTotalQuantity()}})</span>
            </div>
          </div>
        @else
             <div class="d-flex" >
              <div class="m-2 h2">
                <a href="{{session()->get('home')}}"><i class="fa-solid fa-arrow-left fa-lg"></i></a>
              </div>
              <div class="m-2 h2">
                <span class="text-primary">Tu carro de compras</span>
            </div>
            </div>
            {{-- <a id="continue-tienda" href="{{route('stores',['pais_id'=>$pais_id,'store_id'=>$store_id])}}" class="btn btn-primary rounded-pill">Continue en la tienda</a>--}}
        @endif
      </div>
      <div>
        <button id="btn-agregar" class="btn btn-primary rounded-pill me-2">Agregar más productos</button>
      </div>
      <div id="mensajecart" class="alert alert-important alert-success alert-dismissible mt-2 w-100" role="alert" style="display: none">
        <div class="d-flex">
          <div>
            <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-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="M5 12l5 5l10 -10"></path></svg>
          </div>
          <div>
            <span id='mensajetexto'></span>
          </div>
        </div>
        <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
      </div>
    </div>

    @if(session()->has('success_msg'))
        <div class="alert alert-important alert-success alert-dismissible mt-2" role="alert">
          <div class="d-flex">
            <div>
              <!-- Download SVG icon from http://tabler-icons.io/i/check -->
              <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-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="M5 12l5 5l10 -10"></path></svg>
            </div>
            <div>
            {{ session()->get('success_msg') }}
            </div>
          </div>
          <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
        </div>
    @endif
    @if(session()->has('alert_msg'))
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            {{ session()->get('alert_msg') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
        </div>
    @endif
    @if(count($errors) > 0)
        @foreach($errors->all() as $error)
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ $error }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
        @endforeach
    @endif
    @if(count($cartCollection)>0)
    <div class="d-none d-md-block titulo-precio">
      <div class="d-flex justify-content-between flex-wrap gap-1 mt-3">
          <div></div>
          <div class="d-flex flex-row gap-5">
              <div class="text-primary fw-bold">Precio unitario</div>
              <div class="text-primary fw-bold">Precio mayorista 3 o +</div>
          </div>
      </div>
    </div>
    @endif
    <div id="listProductsCart">
    @foreach($cartCollection as $key => $item)
    <div class="row mt-3 mx-1">
      <div class="card rounded-4" style="border-color: #3478f6;">
        <div class="d-block d-sm-none">
          <div class="card-header" style="border-bottom-width: 0px;border-bottom-style: solid;padding-bottom: 0px;padding-right: 0px;">
            <div class="card-actions btn-actions">
              <form action="{{ route('cart.remove') }}" method="POST">
              {{ csrf_field() }}
              <input type="hidden" value="{{ $item->id }}" id="id" name="id">
              <button type="submit" class="btn-action" style="margin-right: 10px;"><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="M18 6l-12 12"></path><path d="M6 6l12 12"></path></svg></button>
              </form>
            </div>
          </div>
        </div>
        <div class="card-body" style="padding-left: 12px;padding-right: 12px;padding-top: 0px;">
          <div class="d-flex justify-content-between flex-wrap align-items-center gap-2" >
            <div class="d-flex flex-row gap-2 align-items-center mt-2 flex-grow-1">
              <div class="d-none d-sm-block">
                @if($item->attributes->image)
                  <img src="https://tecnicocerca.com/images/ProductImages/{{$item->attributes->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 class="d-none d-sm-block">
                  <strong>{{ $item->name }}</strong>. {{$item->attributes->part}}
                </div>
                <div class="d-none d-sm-block text-secondary">
                  Stock: {{ $item->attributes->stock }}
                  <input type="hidden" id="stock{{$key}}" value="{{$item->attributes->stock}}">
                </div>
              </div>

              <div class="d-block d-sm-none">
                @if($item->attributes->image)
                  <img src="https://tecnicocerca.com/images/ProductImages/{{$item->attributes->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-block d-sm-none">
                <div class="d-flex flex-column">
                  <div>
                    <strong>{{ $item->name }}</strong>.{{$item->attributes->part}}
                  </div>
                  <div class="text-secondary">
                    Stock: {{ $item->attributes->stock }}
                    <input type="hidden" id="stock{{$key}}" value="{{$item->attributes->stock}}">
                  </div>
                  <div class="text-secondary">
                    <span class="form-check-description">
                      <span>$ {{number_format($item->price, 2, ',', '.');}}</span>
                      <span>$ {{ $item->attributes->wholesale_format }}</span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="d-none d-sm-block">
              <div class="d-flex flex-row gap-1 align-items-center mt-2 flex-wrap">
                <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">$ {{ $item->attributes->price_format }}</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">$ {{ $item->attributes->wholesale_format }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="d-flex flex-row gap-4 justify-content-end align-items-center mt-2">
              <div class="d-flex flex-row d-flex align-items-center rounded-pill" 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="contador{{$key}}" onchange="alert('aca')">{{ $item->quantity }}</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>
              <form id="FormActualizar{{$item->id}}" action="{{ route('cart.update') }}" method="POST">
              {{ csrf_field() }}
              <div>
                <input type="hidden" value="{{$item->id}}" id="id" name="id">
                <input type="hidden" value="{{$item->quantity}}" id="quantity{{$key}}" name="quantity">
                <input type="hidden" value="" id="cartop{{$item->id}}" name="op">
                <button class="btn btn-secondary" style="display: none"><i class="fa fa-edit" ></i></button>
              </div>
              </form>
            </div>
            <div class="d-none d-sm-block">
              <div class="d-flex flex-row gap-4 justify-content-end align-items-center mt-2" >
                <div class="card p-2 d-flex flex-row d-flex justify-content-center align-items-center rounded-4" style="border-color: #3478f6;">
                  <span class="text-primary" style="width:130px;text-align:center">${{ number_format(round(\Cart::session('session')->get($item->id)->getPriceSum()), 0, ',', '.');  }}</span>
                </div>
                <div >
                  <form action="{{ route('cart.remove') }}" method="POST">
                  {{ csrf_field() }}
                  <input type="hidden" value="{{ $item->id }}" id="id" name="id">
                  <button type="submit" class="btn btn-danger" style="margin-right: 10px;"><i class="fa fa-trash"></i></button>
                  </form>
                </div>
              </div>
            </div>
            <div class="d-block d-sm-none d-flex flex-row gap-2 justify-content-end align-items-center mt-2" >
              <div class="p-2 d-flex flex-row d-flex justify-content-center align-items-center">
                <h2><span class="text-black p-2 ">${{ number_format(\Cart::session('session')->get($item->id)->getPriceSum(), 2, ',', '.'); }}</span></h2>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    @endforeach
  </div>
</div>
    {{--<div class="row mt-5 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><img src="{{asset('img/4114-modulo-samsung-j4-2018-j400-oled_negro1-31.jpg')}}" width="60" height="60" alt="Carrito"></div>
              <div>Modulo samsung j4 2018 j400 oled negro</div>
            </div>
            <div class="d-flex flex-row gap-3 align-items-center">
              <div class="rounded-pill d-flex align-items-center">
                <span class="text-black p-2">x3</span>
              </div>
            </div>
            <div class="d-flex flex-row gap-4 align-items-center ">
              <div class="d-flex flex-row d-flex align-items-center rounded-pill" style="background-color: #82ABF6;">
                <div>
                  <button id="menos" class="btn btn-circle m-1">
                    <span style="font-size: 1rem">
                      <i class="fa-solid fa-minus"></i>
                    </span>
                  </button>
                </div>
                <div class="mx-1">
                 <span id="contador">0</span>
                </div>
                <div>
                  <button id="mas" class="btn btn-circle m-1">
                    <span style="font-size: 1rem">
                      <i class="fa-solid fa-plus"></i>
                    </span>
                  </button>
                </div>
              </div>
            </div>
            <div class="d-flex flex-row gap-4 align-items-center" >
                <div class="card p-2 d-flex flex-row d-flex align-items-center rounded-4" style="border-color: #3478f6;">
                  <span class="text-primary">$22.166,67</span>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    --}}
    <div class="row mx-1">
      <div class="card" style="background-color:#f6f8fb; border:0">
        <div class="card-body">
          <div class="d-flex justify-content-between">
            <div class="d-flex flex-row gap-2 align-items-center">
              <div>Total</div>
            </div>
            <div class="d-flex flex-row gap-3 align-items-center">
              <div class="d-flex align-items-center">
                <h2><span id="totalcarro" class="text-black p-2">${{ number_format(round(\Cart::session('session')->getTotal()), 0, ',', '.'); }}</span></h2>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div class="row mx-1 px-4">
      <div class="card" style="border-color: #3478f6;border-top-right-radius: 80px 80px;border-bottom-right-radius: 80px 80px;">
        <div id="myBtnInformation" class="card-body">
          <div class="d-flex justify-content-between">
            <div class="d-flex flex-row gap-2 align-items-center">
              <div style="width:3em"><img src="{{asset('img/camion.png')}}" width="30" height="25" alt="Carrito"></div>
              <div>Datos de envio</div>
              <input type="hidden" id="datos_completos" value="{{$datos_completos}}" >
            </div>
            <div class="d-flex flex-row gap-3 align-items-center" style="border-left: 1px solid #3478f6;">
              <div class="d-flex align-items-center" style="width:2em; display: flex; justify-content: center">
                @if($datos_completos)
                  <i id="icono1" class="fas fa-check-circle fa-lg" style="color:#3478f6;"></i>
                @else
                  <i id="icono1" class="fa-solid fa-rotate" style="color:grey;"></i>
                @endif
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row mt-3 mx-1 px-4">
      <div class="card" style="border-color: #3478f6;border-top-right-radius: 80px 80px;border-bottom-right-radius: 80px 80px;">
        <div id="myBtnPayment" class="card-body">
          <div class="d-flex justify-content-between">
            <div class="d-flex flex-row gap-2 align-items-center">
              <div style="width:3em"><img src="{{asset('img/Tarjet.png')}}" width="30" height="25" alt="Carrito"></div>
              <div>Datos de Pago</div>
              <input type="hidden" id="datos_completos_paymentways" value="{{$datos_completos_paymentways}}" >
            </div>
            <div class="d-flex flex-row gap-3 align-items-center" style="border-left: 1px solid #3478f6;" >
              <div class="d-flex align-items-center" style="width:2em; display: flex; justify-content: center">
                {{--<i id="icono2" class="fa-solid fa-rotate" style="color:grey;"></i>--}}
                @if($datos_completos_paymentways)
                  <i id="icono2" class="fas fa-check-circle fa-lg" style="color:#3478f6;"></i>
                @else
                  <i id="icono2" class="fa-solid fa-rotate" style="color:grey;"></i>
                @endif
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    {{-- <a href="#" class="btn mt-2 " data-bs-toggle="modal" data-bs-target="#modal-pasos">
      BotónPrueba
    </a>--}}

    <div class="modal modal-blur fade" id="modal-pasos" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header" style="border-bottom-width: 0px;border-bottom-style: solid;">
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body" style="padding-top: 0px;">

            <div class="content">


              <div id="wizard">
                @foreach ($payment_ways as $payment_way)
                  <h2 style="font-size: calc(0.5em + 0.5vw);">{{ Str::upper($payment_way->name) }}</h2>
                  <section>
                    <b style="font-size: min(calc(0.5em + 0.5vw), 1em);">{{ Str::upper($payment_way->name) }}</b>
                    <div class="text-blue align-items-center" style="font-size: 0.8rem">
                      @if (Str::contains(Str::lower($payment_way->name), ['banca', 'banco', 'transferencia', 'deposito']))
                        <div style="height:200px;">
                          @php echo $bancos; @endphp
                          <br>
                        </div>
                      @endif
                    </div>

                    <form onsubmit="paymentWays(this); return false;" id="FormPaymentWays{{ $payment_way->id }}" data-id="{{ $payment_way->id }}" action="{{ route('list.paymentways') }}" method="POST" style="margin-bottom: 0px;">
                      {{ csrf_field() }}
                        <input type="hidden" value="{{ $payment_way->id }}" name="paymentways">      
                            <input type="hidden" value="{{ $payment_way }}" name="paymentways_data">
                        <button type="submit" class="btn btn-primary rounded-pill mt-4">Aceptar</button>
                    </form>
                    <!-- <form onsubmit="paymentWays(this); return false;" id="FormPaymentWays{{$payment_way->id}}" data-id="{{$payment_way->id}}" action="{{ route('list.paymentways') }}" method="POST" style="margin-bottom: 0px;">
                        {{ csrf_field() }}
                        <input type="hidden" value="{{$payment_way->id}}"  name="paymentways">
                        <input type="hidden" value="{{$payment_way}}"  name="paymentways_data">

                        <button  type="submit" class="btn btn-primary rounded-pill mt-4 ">Aceptar</button>
                      </form> -->
                  </section>
                @endforeach
                <h2>MULTIPAGO</h2>
                  <section>
                    <b>MULTIPAGO</b>
                    <div class="text-blue align-items-center" style="font-size: 0.8rem"></div>
                    <label>Selecciona múltiples métodos de pago:</label>
                    <form onsubmit="paymentWays(this); return false;" id="FormPaymentWays{{ $payment_way->id }}" data-id="{{ $payment_way->id }}" action="{{ route('list.paymentways') }}" method="POST" style="margin-bottom: 0px;">
                      {{ csrf_field() }}
                      @php
                      $showBankInfo = false;
                      @endphp
                      <div class="d-flex flex-wrap gap-3">
                        @foreach ($payment_ways as $way)
                          @if (Str::lower($way->name) !== 'multipago')
                            @php
                              $showBankInfo = Str::contains(Str::lower($way->name), ['banca', 'banco', 'transferencia', 'deposito']);
                            @endphp
                            <div>
                              <!-- {{$way}} -->
                              <input type="checkbox" id="paymentWay{{ $way->id }}" name="selected_payment_ways[]" value="{{ $way }}">
                              <label for="paymentWay{{ $way->id }}">{{ $way->name }}</label>
                            </div>
                          @endif
                        @endforeach
                      </div>
                      <div id="bankInfoMultipagoContainer" style="display: none; ">
                        @if($showBankInfo)
                          {!! $bancos !!}
                        @endif
                      </div>
                      <button type="submit" class="btn btn-primary rounded-pill mt-1">Aceptar</button>
                    </form>
                  </section>

                 {{-- <h2>PAGO EN EFECTIVO</h2>
                  <section>
                    <b>PAGO EN EFECTIVO</b>
                    <label>Selecciona múltiples métodos de pago:</label>
                    <div class="text-blue align-items-center" style="font-size: 0.8rem"></div>
                    <form onsubmit="paymentWays(this); return false;" class="formpaymentways" id="FormPaymentMethods" action="{{ route('list.paymentways') }}" method="POST" style="margin-bottom: 0px;">
                      {{ csrf_field() }}
                      <input type="hidden" value="efectivo"  name="paymentways">
                      <button type="submit" class="btn btn-primary rounded-pill mt-4 ">Aceptar</button>
                    </form>
                  </section>


                  <h2>LINK DE DOLARES</h2>
                  <section >
                    <b>LINK EN DOLARES</b>
                    <div class="text-blue align-items-center mt-4" style="font-size: 0.8rem">LINK EN USD: HTTPS/ADOIFJSADCALZXKCLAZDKC</div>
                    <button class="btn btn-primary rounded-pill mt-4 btn-payment">Aceptar</button>




                  </section>

                  <h2>TRANSFERENCIAS</h2>
                  <section>
                    <b>TRANSFERENCIAS</b>
                    <div class="text-blue align-items-center mt-4" style="font-size: 0.8rem">Alias: oferta.cerca.ok</div>
                    <div class="text-blue align-items-center mt-4" style="font-size: 0.8rem">CBU: 0747564812353210009845</div>
                    <button class="btn btn-primary rounded-pill mt-4">Aceptar</button>
                  </section>

                  <h2>DEPÓSITO BANCARIO</h2>
                  <section>
                    <b>DEPÓSITO BANCARIO</b>
                    <div class="text-blue align-items-center mt-4" style="font-size: 0.8rem">Alias: oferta.cerca.ok</div>
                    <div class="text-blue align-items-center mt-4" style="font-size: 0.8rem">CBU: 0747564812353210009845</div>
                    <button class="btn btn-primary rounded-pill mt-4">Aceptar</button>
                  </section>--}}
              </div>
            </div>



          </div>

        </div>
      </div>
    </div>

    <div class="d-md-block w-100 mt-3 p-4">
      <div class=" d-flex flex-row justify-content-between align-items-center">
      <div class="d-flex align-items-center me-2" >
          <a href="" id="myBtnOrder" class="btn btn-primary rounded-pill w-100 " style="background-color: #3478f6;">CONFIRMAR PEDIDO</a>
        </div>
        <div id="btn-clear" class="d-flex align-items-center" >
          {{-- <a href="#"  class="btn btn-primary rounded-pill w-100 text-primary" style="background-color: white;border-color: #3478f6;">CANCELAR PEDIDO</a>--}}
          @if(count($cartCollection)>0)
            <form id="formCancelar" action="{{ route('cart.clear') }}" method="POST" >
                {{ csrf_field() }}
                <button class="btn btn-primary rounded-pill w-100 text-primary" style="background-color: white;border-color: #3478f6;" onclick="sessionStorage.setItem('selected', '4');">CANCELAR PEDIDO</button>
            </form>
          @endif
        </div>
      </div>
    </div>
  </div>

<div id="user" style="display: none">
  {{$user->city_id}}
</div>
</div>

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

    </div>
  </div>
</div>--}}
@include('layouts.popUpSearchProduct')
@include('layouts.shipmentinformation')
@include('layouts.paymentmethods')
@include('layouts.checkOut')
@endsection

@section('js')
<script type="text/javascript">
  var jQuery_3_7_1 = jQuery.noConflict(true);
</script>
<script src="{{asset('js/functions.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/intlTelInput.min.js"></script>
<script>
    var modalSmall = null;
    let user=@json($user);
    let isEdit=false;

        $(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);



        });



    const inputs = document.querySelectorAll(".phone_number");
    inputs.forEach(function(input) {
      window.intlTelInput(input, {
          utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/utils.js",
          autoInsertDialCode: true,
          nationalMode : false,
          initialCountry: "AR"
      });

      // Establecer el ancho del input en porcentaje
        // input.style.width = "100%";

    })

    
   
    
    
    console.log('selected: ' + sessionStorage.getItem("selected"));

  function shippingWay(valor) {
    // Aquí puedes usar el valor recibido como parámetro
    console.log("El valor seleccionado es: " + valor);

    var subcadena1 = "retiro personalmente";
    var subcadena2 = "envio a sucursal";

    if (!valor.toLowerCase().includes(subcadena1)) {
      document.getElementById('opcionesAlerta').style.display = 'block';
    }

    // Puedes hacer lo que necesites con este valor dentro de la función
  }


  function confirmarOpcion() {
      var opcionSeleccionada = document.querySelector('input[name="opcion"]:checked');
      if (opcionSeleccionada) {
          var opcion = opcionSeleccionada.value;
          document.getElementById('opcionesAlerta').style.display = 'none';
          if(opcion == "domicilio"){
            $(".contact").show();
            $(".contactCheck").show();
            $('#toggleCheckbox').prop('checked', true);
            $('#toggleCheckbox').trigger('change');
          }else{
            $(".contact").css("display", "none");
            $(".contactCheck").css("display", "none");
          }
      } else {
          alert('Por favor, selecciona una opción.');
      }
  }

  function cancelarOpcion() {
      document.getElementById('opcionesAlerta').style.display = 'none';
  }

  $("#habilitar").click(function() {
      isEdit = !isEdit
      event.preventDefault();
      if(isEdit) {
        $(".miInputEdit").prop("disabled", false);
          $('#province').prop('disabled', false);
          $('#cities').prop('disabled', false);
          /*$("#city_id").hide()
          $('#cities').show()*/
      } else {
        $(".miInputEdit").prop("disabled", true);
          $('#province').prop('disabled', true);
          $('#cities').prop('disabled', true);
          /*$("#city_id").hide()
          $('#cities').show()*/
      }
  });

  $(".modal-backdrop").click(function() {
      // Verificar si el modal está visible
      event.preventDefault();
      if ($("#myModalInformation").is(":visible")) {
        $(".miInputEdit").prop("disabled", true);
          myModal.toggle();
      }
  });

  $("#closeModal").click(function() {
      // Verificar si el modal está visible
      event.preventDefault();
      if ($("#myModalInformation").is(":visible")) {
        $(".miInputEdit").prop("disabled", true);
        // myModal.toggle();
      }
  });


</script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js" integrity="sha512-eyHL1atYNycXNXZMDndxrDhNAegH2BDWt1TmkXJPoGf1WLlNYt08CSjkqF5lnCRmdm3IrkHid8s2jOUY4NIZVQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script>
    var myModalSearchProduct = null;
    var cartCollection = @json($cartCollection);
    var shipment = null;


    $(function() {

      setTimeout(function() {
          $(".alert").fadeOut(750);
      },2000);
      shipment = $('#FormShipment').parsley();
      // ParsleyConfig definition if not already set
      // Validation errors messages for Parsley
      // Load this after Parsley

           

      Parsley.addMessages('es', {
        defaultMessage: "Este valor parece ser inválido.",
        type: {
          email:        "Este valor debe ser un correo válido.",
          url:          "Este valor debe ser una URL válida.",
          number:       "Este valor debe ser un número válido.",
          integer:      "Este valor debe ser un número válido.",
          digits:       "Este valor debe ser un dígito válido.",
          alphanum:     "Este valor debe ser alfanumérico."
        },
        notblank:       "Este valor no debe estar en blanco.",
        required:       "Este valor es requerido.",
        pattern:        "Este valor es incorrecto.",
        min:            "Este valor no debe ser menor que %s.",
        max:            "Este valor no debe ser mayor que %s.",
        range:          "Este valor debe estar entre %s y %s.",
        minlength:      "Este valor es muy corto. La longitud mínima es de %s caracteres.",
        maxlength:      "Este valor es muy largo. La longitud máxima es de %s caracteres.",
        length:         "La longitud de este valor debe estar entre %s y %s caracteres.",
        mincheck:       "Debe seleccionar al menos %s opciones.",
        maxcheck:       "Debe seleccionar %s opciones o menos.",
        check:          "Debe seleccionar entre %s y %s opciones.",
        equalto:        "Este valor debe ser idéntico."
      });

      Parsley.setLocale('es');

      myModalSearchProduct = new bootstrap.Modal(document.getElementById('myModalSearchProduct'));



      $("#brand_id").val("");
      $("#brand_id").change(function(){
        if($("#brand_id").val() == ""){
          $("#model_id").html("<option value=''>Modelo</option>");
          return 0;
        }
        let options = JSON.parse($("#brand_id option:selected").attr("data-models"));
          /*console.log(options);*/
        $("#model_id").html("<option value=''>Modelo</option>");
          $.each(options, function(v,e){
          $("#model_id").append("<option value='"+e.id+"'>"+e.name+"</option>");
        });
      });
      $("#cities").change(function(){
        $("#city_id").val($("#cities").val());
      });

      let continuarmodal = 0;
      
      if (window.sessionStorage) {
        continuarmodal = sessionStorage.getItem("continuarmodal");
          console.log(continuarmodal);
          if(continuarmodal == 1){
              $('#btn-agregar').click();
              sessionStorage.setItem("continuarmodal",0);
          }
      }


      $("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");
                          const stock = $("#stock"+id).val();
                          const cont = parseInt($("#contador"+id).text());
                          if(stock == 0){
                              Swal.fire({
                                  title: "Producto con stock en 0",
                                  icon: "info"
                              });
                          }
                          if(cont <  stock){
                              $("#contador"+id).text(parseInt($("#contador"+id).text()) + 1);
                              $("#quantity"+id).val($("#contador"+id).text());
                              $("#cartop"+id).val('mas');
                              $("#FormActualizar"+id).submit();
                          }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;
                          }
                        }else{
                            messageStock(data,false);
                        }
                       
                       },
                       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");
                          let count = parseInt($("#contador"+id).text()) - 1;
                          $("#contador"+id).text(count > 1 ? parseInt($("#contador"+id).text()) - 1 : 1);
                          $("#quantity"+id).val($("#contador"+id).text());
                          $("#cartop"+id).val('menos');
                          $("#FormActualizar"+id).submit();
                        }else{
                            messageStock(data,false);
                        }
                       },
                       error: function(data) {
                           console.log(data);
                       }
                });      



                
            });
    });


    var myModal = document.getElementById('myModalSearchProduct');
    myModal.addEventListener('shown.bs.modal', function () {
      $( "#search" ).trigger( "click" );
    });


    $("#btn-agregar").click(function(){
      myModalSearchProduct.toggle();
    });


    // Modal Datos de envio
    var modalInformation = document.getElementById("myModalInformation");
    var modalPayment = document.getElementById("myModalPayment");
    var modalPayment = document.getElementById("modal-pasos");
    var modalOrder = document.getElementById("myModalOrder");


    // Get the button that opens the modal
    var btn = document.getElementById("myBtnInformation");
    var btnPayment = document.getElementById("myBtnPayment");
    var btnOrder = document.getElementById("myBtnOrder");

    // Get the <span> element that closes the modal
    //var spanInformation = document.getElementsByClassName("closeInformation")[0];
    var spanPayment = document.getElementsByClassName("closePayment")[0];
    var spanOrder = document.getElementsByClassName("closeOrder")[0];

    var myModal = null;
    modalInformation.addEventListener('shown.bs.modal', function () {
      if( $(".miInputEdit").prop("disabled")){
        $('#province').prop('disabled', true);
        $('#cities').prop('disabled', true);
        $('#phone_number').prop('disabled', true);
      }else{
        $('#province').prop('disabled', false);
        $('#cities').prop('disabled', false);
        $('#phone_number').prop('disabled', false);
      }
      
     
    });
    // When the user clicks the button, open the modal
    btn.onclick = function() {
     // modalInformation.style.display = "block";
      myModal = new bootstrap.Modal(document.getElementById('myModalInformation'), {
        keyboard: false
      });
      myModal.toggle();
    }

    btnPayment.onclick = function() {
      //modalPayment.style.display = "block";
      myModal = new bootstrap.Modal(document.getElementById('modal-pasos'), {
        keyboard: false
      });
      myModal.toggle();

    }

    btnOrder.onclick = function(e) {
      e.preventDefault();
      //alert('aca');
      // modalOrder.style.display = "block";

      myModalOrder = new bootstrap.Modal(document.getElementById('myModalOrder'), {
        keyboard: false,
      });

      if( $("#datos_completos").val() != "1" && $("#datos_completos_paymentways").val() != "1"){
        Swal.fire({
          title: "Debes completar los pasos anteriores",
          text: "Datos de envío y datos de pago para confirmar tu compra",
          icon: "info"
        });
        return false;

      }

      if( $("#datos_completos").val() != "1"){
        Swal.fire({
          title: "Debes completar los pasos anteriores",
          text: "Datos de envío para confirmar tu compra",
          icon: "info"
        });
        return false;
      }

      if($("#datos_completos_paymentways").val() != "1" ){
        Swal.fire({
          title: "Debes completar los pasos anteriores",
          text: "Datos de pago para confirmar tu compra",
          icon: "info"
        });
        return false;
      }
     

      /*alert('Continuando');*/
                $.ajax({
                    type: 'GET',
                    url: "{{route('placeorder')}}",
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: (data) => {
                      if(data.status == 'success'){
                        console.log("/placeorder", data);
                        $('#ticket').text(data.ticket.id);
                        $('#ticket_total').text(Math.round(data.ticket.total));
                        $('#ticket_articles_count').text(data.ticket_count);
                        $('#ship_company').text(data.ship_company);
                        // $('#pay_method').text(data.pay_method);
                        $('#destination').text(data.destination);
                        myModalOrder.toggle();
                        console.log("toggle")
                      }
                      if(data.status == 'error'){
                        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;
                        }
                        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?';
                        }
                        
                        let showConfirmButton = true;
                        if(data.msg_product_stock_bajo == ""){
                          showConfirmButton = false;
                        }

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

    }


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

    /*spanPayment.onclick = function() {
      modalPayment.style.display = "none";
    }*/

   /* spanOrder.onclick = function() {
      modalOrder.style.display = "none";
    }*/

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {

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

    }

    window.onload = function() {
      const cartCollection = @json($cartCollection);
      for(const [key, value] of Object.entries(cartCollection)){
        $("#quantity"+value.id).val($("#contador"+value.id).text());
      }
    }

    //*****************************************Buscar productos***********************************************************************************/
       $("#search").on('click', function (e) {

            $("#icon_search").hide();
            $("#mi_loading").show();


            window.current_page = 0;

            getProducts(function(productsObj){
              /*if(window.buscar_home_respuesta == null){
                window.buscar_home_respuesta = "";
              }*/
              if(window.buscar_home_pregunta == window.buscar_home_respuesta){
                displayProducts(productsObj);
                $("#icon_search").show();
                $("#mi_loading").hide();
              }
              if($('#searchinput').val() == ""){
                displayProducts(productsObj);
                $("#icon_search").show();
                $("#mi_loading").hide();
              }


                /*console.log(productsObj);*/
                /*if(productsObj.last_page > 1){
                        $('#load-more-products').toggle();
                    }*/
                });
        });
        $('#load-more-products').on('click', function(e){

            e.preventDefault();

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

                    if(product.image === null){
                        imagen = '<img src="{{asset("/img/images.png")}}" width="60" height="60" alt="Carrito">';
                    }else{
                        imagen = '<img src="https://tecnicocerca.com/images/ProductImages/'+product.image+'" width="50" height="50" alt="Carrito">';
                    }
                    let cantidad = 0;
                    let totallinea = 0;
                    if (typeof  cartCollection[product.id] != "undefined") {
                      cantidad = cartCollection[product.id].quantity;
                      totallinea = cartCollection[product.id].attributes.getPriceSum;
                    }

                    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 flex-wrap gap-2"> \
                  <div class="d-flex flex-row gap-2 align-items-center flex-grow-1">'+ imagen +'\
                    <div><strong>'+ product.name +'</strong>. '+ product.part + '\
                    <div class="text-secondary">Stock: '+product.stock_store+'</div>\
                    <div class="d-block d-sm-none"><div class="text-secondary"><span class="form-check-description">\<span>$'+product.unitary_number+' x1</span> <span>$'+product.wholesale_number+' x3 o +</span> </span>\</div> </div>\
                    </div>\
                    <input type="hidden" value="'+product.stock_store+'" id="stockModal'+product.id+'" >\
                  </div> \
                  <div class="d-none d-sm-block"> \
                    <div class="d-flex flex-row gap-1 align-items-center mt-2 flex-wrap">\
                        <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> \
                  <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 class="d-block d-sm-none d-flex flex-row gap-2 justify-content-end align-items-center" >\
                    <div class="p-2 d-flex flex-row d-flex justify-content-center align-items-center">\
                      <h2><span id="totallinea'+ product.id +'" class="text-black p-2 ">$'+totallinea+'</span></h2>\
                    </div>\
                  </div>\
                </div> \
                </div> \
              </div>';

                  $("#listProductsModal").append(fila);
                  success_msg = null;
                });
                $("#btn-clear").html(`<form action="{{ route('cart.clear') }}" method="POST">{{ csrf_field() }}<button class="btn btn-primary rounded-pill w-100 text-primary" style="background-color: white;border-color: #3478f6;" onclick="sessionStorage.setItem('selected', '4');">CANCELAR PEDIDO</button></form>`);

            }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.links.length > 0 ){
                let linea = '';

                $("#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>';
                  console.log(productsObj);
                for (let index = 1; index < productsObj.links.length-1  ; index++) {
                  /*console.log(productsObj);*/
                  let pag = null;
                  let active = '';
                  if(productsObj.links[index]){
                    pag = productsObj.links[index];
                    if( pag.active){
                      active = 'active';
                    }

                  }
                  let pagina = pag != null ? pag.label : '';
                  let estilo = '';
                  if(pagina == '...'){
                    estilo = 'style="pointer-events: none"';
                  }
                  /*console.log(pagina);*/

                  /*if(window.current_page == index){
                    linea = linea + '<li class="page-item active"><a class="page-link" href="javascript:void(0)"  onclick="paginador('+index+');" ' + estilo + '>' + pagina + '</a></li>';
                  }else{
                    linea = linea + '<li class="page-item"><a class="page-link" href="javascript:void(0)"  onclick="paginador('+index+');" ' + estilo + '>' + pagina + '</a></li>';
                  }*/
                  linea = linea + '<li class="page-item ' + active + '"><a class="page-link" href="javascript:void(0)"  onclick="paginador('+pagina+');" ' + estilo + '>' + pagina + '</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(),
                            'page': window.current_page + 1,
                            'stock': true
                        };
            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,
                            'stock': true
                        };
            }
            /*if(buscar.length > 0)
            {*/

                $.ajax({
                    headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url : url,
                        data : data,
                        type : 'GET',
                        dataType : 'json',
                })
                    .done(function( response ) {
                        var productsObj = $.parseJSON(response.products);
                        /*console.log(productsObj);*/
                        window.buscar_home_respuesta=response.buscar;
                        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 );
                    });
            /*}else{
                $("#listProductsModal").html("");
            }*/

        }
        /*********************************************************************************************************************************/

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



                  $.ajax({
                       type: 'GET',
                       url: '{{asset('')}}' + 'confirmValidateStockBranch/' + $('#storeid').val() +'/carrito',
                       success: (data) => {
                        if(data.status == 'success'){
                          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(stock == 0){
                                  Swal.fire({
                                      title: "Producto con stock en 0",
                                      icon: "info"
                                  });
                              }
                          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) => {
                                    myModalSearchProduct.hide();
                                    
                                    $("#mensajetexto").text(data.msg);
                                    $("#mensajecart").removeClass( "alert-warning" ).addClass( "alert-success" );
                                    $("#mensajecart").fadeToggle(750);
                                    setTimeout(function() {
                                        $("#mensajecart").fadeOut(750);
                                    },2000);
                                   
                                    //alert('aca');
                                    $("#mensaje").text(data.msg);
                                    $("#mostrarmensaje").removeClass( "alert-warning" ).addClass( "alert-success" );
                                    $("#mostrarmensaje").fadeToggle(750);
                                    setTimeout(function() {
                                        $("#mostrarmensaje").fadeOut(750);
                                    },2000);

                                    $("#cantidadcarro").text(data.cantidad);
                                    $("#cantidadcarro1").text(data.cantidad);
                                    $("#totalcarro").text(data.total);
                                    $("#totallinea"+id).text('$'+data.getPriceSum);
                                    var productsObj = $.parseJSON(data.cartCollection);
                                    displayProductsCart(productsObj);
                                   

                                  },
                                  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;
                              }
                        }else{
                            messageStock(data,true);
                        }
                       },
                       error: function(data) {
                           console.log(data);
                       }
                });   



            

        });

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


          $.ajax({
                       type: 'GET',
                       url: '{{asset('')}}' + 'confirmValidateStockBranch/' + $('#storeid').val() +'/carrito',
                       success: (data) => {
                        if(data.status == 'success'){
                          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({
                                  headers: {
                                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                  },
                                  type: 'POST',
                                  url: "{{route('cart.update')}}",
                                  data: data,
                                  cache: false,
                                  contentType: false,
                                  processData: false,
                                  success: (data) => {
                                    console.log(data.cartCollection);
                                      $("#cantidadcarro").text(data.cantidad);
                                      $("#cantidadcarro1").text(data.cantidad);
                                      $("#totallinea"+id).text('$'+data.getPriceSum);
                                      $("#totalcarro").text(data.total);
                                      $("#mensaje").text(data.msg);
                                      $("#mensajetexto").text(data.msg);


                                      $("#mostrarmensaje").removeClass( "alert-success" ).addClass( "alert-warning" );
                                      $("#mostrarmensaje").fadeToggle(750);
                                      setTimeout(function() {
                                          $("#mostrarmensaje").fadeOut(750);
                                      },2000);
                                      var productsObj = $.parseJSON(data.cartCollection);
                                      displayProductsCart(productsObj);
                                  },
                                  error: function(data) {
                                      console.log(data);
                                  }
                              });
                        }else{
                            messageStock(data,true);
                        }
                       },
                       error: function(data) {
                           console.log(data);
                       }
                }); 



          
          /*$("#quantity"+id).val($("#cartCountModal"+id).text());*/
        });

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



            function displayProductsCart(productsObj){

              $("#listProductsCart").html("");
              if( Object.keys(productsObj).length > 0 ){
                Object.keys(productsObj).forEach(function(key) {

          let imagen = '';

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


                      let fila = '\
                        <div class="row mt-3 mx-1">\
                          <div class="card rounded-4" style="border-color: #3478f6;">\
                            <div class="d-block d-sm-none">\
                              <div class="card-header" style="border-bottom-width: 0px;border-bottom-style: solid;padding-bottom: 0px;padding-right: 0px;">\
                                <div class="card-actions btn-actions">\
                                  <form action="{{ route('cart.remove') }}" method="POST">\
                                        {{ csrf_field() }}\
                                        <input type="hidden" value="'+productsObj[key].id+'" id="id" name="id">\
                                        <button type="submit" class="btn-action" style="margin-right: 10px;"><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="M18 6l-12 12"></path><path d="M6 6l12 12"></path></svg></button>\
                                      </form>\
                                </div>\
                              </div>\
                            </div>\
                            <div class="card-body" style="padding-left: 12px;padding-right: 12px;padding-top: 0px;">\
                              <div class="d-flex justify-content-between flex-wrap align-items-center gap-2" >\
                                <div class="d-flex flex-row gap-2 align-items-center mt-2 flex-grow-1">\
                                  <div class="d-none d-sm-block">' + imagen + ' </div>\
                                  <div class="d-flex flex-column">\
                                    <div class="d-none d-sm-block"><strong>' + productsObj[key].name + '</strong>. ' + productsObj[key].attributes.part + '</div>\
                                    <div class="d-none d-sm-block text-secondary">\
                                      Stock: ' + productsObj[key].attributes.stock + '\
                                      <input type="hidden" id="stock'+key+'" value="' + productsObj[key].attributes.stock + '">\
                                    </div>\
                                  </div>\
                                  <div class="d-block d-sm-none">' + imagen + ' </div>\
                                  <div class="d-block d-sm-none">\
                                    <div class="d-flex flex-column">\
                                      <div>\
                                        <strong>' + productsObj[key].name + '</strong>. ' + productsObj[key].attributes.part + '\
                                      </div>\
                                      <div class="text-secondary">\
                                        Stock: ' + productsObj[key].attributes.stock + '\
                                        <input type="hidden" id="stock'+key+'" value="' + productsObj[key].attributes.stock + '">\
                                      </div>\
                                      <div class="text-secondary">\
                                        <span class="form-check-description">\
                                          <span>$ ' + productsObj[key].attributes.price_format + ' x1</span>\
                                          <span>$ ' + productsObj[key].attributes.wholesale_format + ' x3 o + </span>\
                                        </span>\
                                      </div>\
                                    </div>\
                                  </div>\
                                </div>\
                                <div class="d-none d-sm-block">\
                                  <div class="d-flex flex-row gap-1 align-items-center mt-2 flex-wrap">\
                                      <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">$' + productsObj[key].attributes.price_format + '</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">$' + productsObj[key].attributes.wholesale_format + '</span>\
                                        </div>\
                                      </div>\
                                  </div>\
                                </div>\
                                <div class="d-flex flex-row gap-4 justify-content-end align-items-center mt-2">\
                                  <div class="d-flex flex-row d-flex align-items-center rounded-pill" 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="contador'+key+'">'+productsObj[key].quantity+'</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>\
                                  <form id="FormActualizar'+productsObj[key].id+'" action="{{ route('cart.update') }}" method="POST">\
                                    {{ csrf_field() }}\
                                    <div>\
                                        <input type="hidden" value="'+productsObj[key].id+'" id="id" name="id">\
                                        <input type="hidden" value="'+productsObj[key].quantity+'" id="quantity'+productsObj[key].id+'" name="quantity">\
                                        <input type="hidden" value="" id="cartop'+productsObj[key].id+'" name="op">\
                                        <button class="btn btn-secondary" style="display: none"><i class="fa fa-edit" ></i></button>\
                                    </div>\
                                  </form>\
                                </div>\
                                <div class="d-none d-sm-block">\
                                  <div class="d-flex flex-row gap-4 justify-content-end align-items-center mt-2" >\
                                    <div class="card p-2 d-flex flex-row d-flex justify-content-center align-items-center rounded-4" style="border-color: #3478f6;">\
                                      <span class="text-primary" style="width:130px;text-align:center">$'+productsObj[key].attributes.getPriceSum+'</span>\
                                    </div>\
                                    <div>\
                                      <form action="{{ route('cart.remove') }}" method="POST">\
                                        {{ csrf_field() }}\
                                        <input type="hidden" value="'+productsObj[key].id+'" id="id" name="id">\
                                        <button class="btn btn-danger" style="margin-right: 10px;"><i class="fa fa-trash"></i></button>\
                                      </form>\
                                    </div>\
                                  </div>\
                                </div>\
                                <div class="d-block d-sm-none d-flex flex-row gap-2 justify-content-end align-items-center mt-2" >\
                                  <div class="p-2 d-flex flex-row d-flex justify-content-center align-items-center">\
                                    <h2><span class="text-black p-2 ">$'+productsObj[key].attributes.getPriceSum+'</span></h2>\
                                  </div>\
                                </div>\
                              </div>\
                            </div>\
                          </div>\
                      </div>';
                  $("#listProductsCart").append(fila);


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

        }

        function 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);
                /*console.log(productsObj);*/
          });
          }

        }

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

        $('#searchinput').on('keyup', function(e){
            clearTimeout(typingTimer);  // Limpia el temporizador
            typingTimer = setTimeout(doneTyping, doneTypingInterval); // Inicia un nuevo temporizador
            
        });
        $('#searchinput').on('keydown', function () {
                clearTimeout(typingTimer);  // Limpia el temporizador
        });

        function doneTyping () {
              window.buscar_home_pregunta = $('#searchinput').val();
              window.buscar_home_respuesta = null;
              if($('#searchinput').val().length > 1 ){
                $( "#search" ).trigger( "click" );
              }
              
        }


       /* $('#searchinput').keyup(function (e) {
            /*if(!this.value){* /
              window.buscar_home_pregunta = $(this).val();
              window.buscar_home_respuesta = null;
              $( "#search" ).trigger( "click" );
           /* }* /
        });*/



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

          e.preventDefault();
          $(".miInputEdit").prop("disabled", false);
          $('#province').prop('disabled', false);
          $('#cities').prop('disabled', false);
          shipment.validate();
          if(shipment.isValid()){
            const form = document.querySelector("#FormShipment");
            document.querySelectorAll("#FormShipment input:disabled").forEach(input => {
                input.disabled = false;
            });
            // Crear un FormData con los valores del formulario
            const formData = new FormData(form);
            
            // Mostrar los valores del formulario en la consola
            for (let [key, value] of formData.entries()) {
                console.log(`${key}: ${value}`);
            }
            var data = new FormData(form);
            formData.append('province',  $('#cities').val());
            if(isEdit) {
              formData.append('first_name', user.first_name);
              formData.append('last_name',  user.last_name);
              formData.append('dni',  user.dni);
              formData.append('country_id',  user.country_id);
              if (!formData.has('phone_number')) {
                formData.append('phone_number', user.phone_number);
              }
              formData.append('state_id',  $('#province').val());
              formData.append('city_id',  $('#cities').val());
              $.ajax({
                  type: 'POST',
                  url: `/user/${user.id}`,
                  data: formData,
                  cache: false,
                  contentType: false,
                  processData: false,
                  success: (data) => {
                    isEdit = false
                    console.log(data);
                  },
                  error: function(data) {
                      console.log(data);
                  }
              });
            }
            
            $.ajax({
                type: 'POST',
                url: "{{route('list.shipment')}}",
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                success: (data) => {
                  $( "#icono1" ).removeClass( "fa-solid fa-rotate" );
                  $( "#icono1" ).addClass( "fas fa-check-circle fa-lg" );
                  $("#icono1").css("color","#3478f6");
                  $("#datos_completos").val("1");
                  isEdit = false
                  myModal.toggle();
                  /*console.log(data);*/
                },
                error: function(data) {
                    console.log(data);
                }
            });
          } else if(shipment.isValid() === false) {
            if(isEdit === false) {
              isEdit = true
            }
          }
        });

        function paymentWays(e) {
          console.log("paymentWays", e)
          let id = $(e).data("id");
          let bancos = {!! json_encode($bancos) !!};
          let tipo_pay = {!! json_encode($payment_ways) !!};
          let data = new FormData(e);
          console.log("data", data)
          // Comprobar si `selected_payment_ways[]` está vacío y agregar `paymentways_data` si es necesario
          if (!data.has("selected_payment_ways[]")) {
              data.append("selected_payment_ways[]", e.querySelector("input[name='paymentways_data']").value);
          }

          $.ajax({
              type: 'POST',
              url: "{{ route('list.paymentways') }}",
              data: data,
              cache: false,
              contentType: false,
              processData: false,
              success: (data) => {
                  $("#icono2").removeClass("fa-solid fa-rotate").addClass("fas fa-check-circle fa-lg").css("color", "#3478f6");
                  $("#datos_completos_paymentways").val("1");

                  for (let index = 0; index < tipo_pay.length; index++) {
                      if (id == tipo_pay[index].id) {
                          let regex = /transferencia|deposito/i;
                          if (regex.test(tipo_pay[index].name)) {
                              $('#details_pay').html(`<div style="padding: 10px; border: 2px solid blue; border-radius: 10px"><b style="color:gray">Detalles del pago</b><br>${bancos}</div>`);
                          } else {
                              $('#details_pay').html("");
                          }
                      }
                  }

                  myModal.toggle();
              },
              error: (data) => {
                  console.log(data);
              }
          });
      }

        let paises;

        $(function() {

          const elementList = $("#countries");
          elementList.html('<option value="">seleccione un País</option>');
          console.log(elementList);
          $.ajax({
              url: '{{route('paises')}}',
              type: "GET",
              data: {
                  "_token": "{{ csrf_token() }}",
              },
              success: function(res) {
                  paises = res.data;
                  elementList.val('');
                  if (Object.keys(paises).length > 0) {
                      var data = `<option value="" selected>seleccione un País</option>`;
                      $.each(paises, function(index, element) {
                          data += `<option value="${element.id}">${element.country_name}</option>`
                      });
                      $('#province').trigger('change');
                  }else {
                      elementList.html('<option value="">seleccione un País</option>');
                  }
                      elementList.html(data);
              },
              error: function(error) {
                  /*alert(`Error al obtener los datos`)*/
              }
          });
         
        });
        let cities;

        $(function() {
          $.ajax({
              url: '{{route('cities')}}',
              type: "GET",
              data: {
                  "_token": "{{ csrf_token() }}",
              },
              success: function(res) {
                cities = res;
                // console.log("cities1", cities)
              },
              error: function(error) {
                  /*alert(`Error al obtener los datos`)*/
              }
          });

        });
        function stateChange(targetElement) {
         
                countries= paises;
                ciudades = cities
                console.log("cities", ciudades)
                var country_index=@json($pais_id);
                var idcity=@json($idcity);
                var state_index= $(targetElement).find(':selected').data('id');
                var userElement = document.getElementById("user");
                var userValue = userElement.textContent || userElement.innerText;
                $('#cities').html('');
                $('#cities').append(`<option value="">seleccione una Ciudad</option>`);
                /*$('#cities').hide()*/
                if(state_index != '')
                {
                    var cities=countries[country_index].states[state_index].cities;
                    console.log(country_index);
                    console.log(state_index);
                    console.log(countries);
                    const userCityId = userElement.textContent.trim(); 
                    console.log("userCityId:", userCityId);
                    var selectedCity = cities.find(city => city.id === Number(userCityId));
                    if (selectedCity) {
                      // document.getElementById("city_id").value = selectedCity.city_name;
                      /*$("#city_id").val(selectedCity.city_name)*/
                      $('#cities').html('');
                      $('#cities').append(`<option value="${userValue}">${selectedCity.city_name}</option>`);
                    } 
                      if(cities.length>0){
  
                          htmlContent=''
                          let selected = '';
                          for(let i=0;i<cities.length;i++){
                              if(idcity == cities[i]['id']){
                                selected = 'selected';
                              }else{
                                selected = '';
                              }
                              htmlContent+=`<option value="${cities[i]['id']}" ${selected} >${cities[i]['city_name']}</option>`;
                          }
                          $('#cities').append(htmlContent);
                      }
                }
            }

       /*const beforeUnloadHandler = (event) => {
          // Recommended
          event.preventDefault();

          // Included for legacy support, e.g. Chrome/Edge < 119
          event.returnValue = true;
        };
        window.addEventListener("beforeunload", beforeUnloadHandler);*/

        $( window ).on( "load", function() {
          let continuar = 0;
          if (window.sessionStorage) {
            continuar = sessionStorage.getItem("continuar");
            console.log(continuar);
            if(continuar == 1){
              $('#myBtnOrder').click();
              sessionStorage.setItem("continuar",0);
            }
          }
        });

        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 ;
                    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("continuarmodal",1);
                        }
                        location.reload();
                    }
                    if (result.dismiss === Swal.DismissReason.cancel){
                        sessionStorage.setItem("continuarmodal",0);
                        location.reload();
                    } 
                });
           }

  </script>
  <script>
        $(document).ready(function() {
            // Obtener el checkbox y el div
            const checkbox = $('#toggleCheckbox');
            const toggleDiv = $('.contact');

            // Función para alternar el estado del div
            checkbox.change(function() {
                $('#name_contact').val('');
                $('#phone_number_contact').val('');
                $('#aclaraciones').val('');
                if (checkbox.is(':checked')) {
                    toggleDiv.show(); // Mostrar el div
                } else {
                    toggleDiv.hide(); // Ocultar el div
                }
            });
            if( $("#datos_completos").val() == "1" ){
              /*alert('aca');*/
            }
            

            const paymentWaysToShowBankInfo = {
                transferencia: true,
                banco: true,
                banca: true,
                deposito: true,
              };
            let relevantPaymentWayCheckedCount = 0;
            $('input[name="selected_payment_ways[]"]').change(function() {
              var labelId = $(this).attr('id');
              var labelText = $('label[for="' + labelId + '"]').text().trim();

              // Se verifica si se cambio un checkbox con el label Transferencia o deposito
              if (paymentWaysToShowBankInfo[labelText.toLowerCase()]) {
                // Si es asi se verifica si fue marcado o descarmado
                if ($(this).is(':checked')) {
                  // si es marcado se aumenta la cuenta en 1
                    relevantPaymentWayCheckedCount++;
                } else {
                  // si fue desmarcado se disminuye la cuenta en 1
                  relevantPaymentWayCheckedCount--;
                }
              }

              // Si la cuenta de checkboxes relevantes da mayor a cero muestra la cuenta 
              //en la seccion de multipago
              if (relevantPaymentWayCheckedCount > 0) {
                $("#bankInfoMultipagoContainer").show();
              } else {
                // si no no se muestra, se oculta
                $("#bankInfoMultipagoContainer").hide();
              }
            });
        });
    </script>

@stop