@extends('layouts.tabler2')

@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>

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