@extends('layouts.tabler2')
@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')}}">
  <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 type="text/javascript">
    var jQuery_1_9_1 = $.noConflict(true);
  </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>
    jQuery_1_9_1(function ()
    {
      jQuery_1_9_1("#wizard").steps({
            headerTag: "h2",
            bodyTag: "section",
            transitionEffect: "slideLeft",
            stepsOrientation: "vertical"
        });
    });
  </script>
@endsection
@section('content')




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

    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mt-4">
      <div>
        <span class="text-primary">Tu carro de compras</span>
      </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 mt-5 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">
                <span class="text-black p-2">$xxxx</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div class="row mt-5 mx-1 w-50">
      <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>
            </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 class="fa-solid fa-rotate" style="color:grey;"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row mt-5 mx-1 w-50">
      <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>

            </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 class="fas fa-check-circle fa-lg" style="color:#3478f6;"></i>
              </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">
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">

            <div class="content">


              <div id="wizard">
                  <h2>TARJETA DE CRÉDITO</h2>
                  <section>
                    <b>PAGO CON TARJETA DE CRÉDITO</b>
                    <form method="POST" action="#">
                      @csrf
                      <div class="row mb-3 mt-5">
                          <div>
                              <input id="target_number" type="text" class="form-control @error('target_number') is-invalid @enderror" name="target_number" value="{{ old('target_number') }}" required autocomplete="target_number" autofocus style="border-radius: 20px" placeholder="Número de tarjeta">
                              @error('target_number')
                                  <span class="invalid-feedback" role="alert">
                                      <strong>{{ $message }}</strong>
                                  </span>
                              @enderror
                          </div>
                      </div>
                      <div class="d-flex flex-row justify-content-between align-items-center">
                        <div class="row mb-3 me-1">
                            <div class="col-md-12">
                                <input id="cod_seg" type="cod_seg" class="form-control @error('cod_seg') is-invalid @enderror" name="cod_seg" value="{{ old('cod_seg') }}" required autocomplete="cod_seg" style="border-radius: 20px" placeholder="Cod Seg">
                                @error('cod_seg')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="row mb-3 me-1">
                            <div class="col-md-12">
                                <input id="vto" type="text" class="form-control @error('vto') is-invalid @enderror" name="vto" value="{{ old('vto') }}" required autocomplete="vto" autofocus style="border-radius: 20px" placeholder="Vto (MM/AA)">
                                @error('vto')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <input id="dni" type="text" class="form-control @error('dni') is-invalid @enderror" name="dni" value="{{ old('dni') }}" required autocomplete="dni" autofocus style="border-radius: 20px" placeholder="DNI">
                                @error('dni')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                      </div>
                      <div class="row mb-3">
                          <div class="col-md-12">
                              <input id="headline" type="text" class="form-control @error('headline') is-invalid @enderror" name="headline" value="{{ old('headline') }}" required autocomplete="headline" autofocus style="border-radius: 20px" placeholder="Titular de tarjeta">
                              @error('headline')
                                  <span class="invalid-feedback" role="alert">
                                      <strong>{{ $message }}</strong>
                                  </span>
                              @enderror
                          </div>
                      </div>
                      <div class="d-flex align-items-center" >
                        <a href="#"  class="btn btn-primary rounded-pill w-20 " style="background-color: #3478f6;">CONFIRMAR</a>
                      </div>
                    </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>
                  </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>
                  </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>
                  </section>
              </div>
            </div>



          </div>

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

    <div class="d-md-block w-50 mt-5">
      <div class="d-flex flex-row justify-content-between align-items-center">
        <div class="d-flex align-items-center" >
          <a id="myBtnOrder" class="btn btn-primary rounded-pill w-100 " style="background-color: #3478f6;">CONFIRMAR PEDIDO</a>
        </div>
        <div 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>
        </div>
      </div>
    </div>
  </div>

  @extends('layouts.shipmentinformation')
  @extends('layouts.paymentmethods')
  @extends('layouts.checkOut')



</div>

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

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


@endsection

@section('js')
  <script>
    $(function() {
      $("#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>");
        });
      });
      $("#mas").click(function(){
        $("#contador").text(parseInt($("#contador").text())+1);
      });
      $("#menos").click(function(){
        $("#contador").text(parseInt($("#contador").text())-1);
      });
    });

    // 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];

    // When the user clicks the button, open the modal
    btn.onclick = function() {
      modalInformation.style.display = "block";
    }
    btnPayment.onclick = function() {
      //modalPayment.style.display = "block";
      var myModal = new bootstrap.Modal(document.getElementById('modal-pasos'), {
        keyboard: false
      });
      myModal.toggle();

    }
    btnOrder.onclick = function() {
      modalOrder.style.display = "block";
    }


    // 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";
      }

    }

  </script>

@stop