@extends('layouts.tabler')

@section('content')

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

      <div class="flex-shrink-1" style="white-space: nowrap;">Buscar por:</div>
      <div class="w-100">
        <div class="input-icon">
          <input type="text" value="" class="form-control form-control-rounded border-primary" placeholder="Código">
          <span class="input-icon-addon">
            <!-- Download SVG icon from http://tabler-icons.io/i/search -->
            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg>
          </span>
        </div>
      </div>
    </div>
    
    <div class="row mt-5">
      <span>Módulo</span>
    </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="inner rounded-pill d-flex align-items-center" style="background-color: #3478f6;"><span class="text-white p-2">$22.931,03 x1</span></div>
              <div class="inner rounded-pill d-flex align-items-center" style="background-color: #3478f6;"><span class="text-white p-2">$22.166,67 x3 o +</span></div>
              <div class="inner rounded-pill d-flex flex-row align-items-center justify-content-between" style="background-color: #82ABF6;">
                <div>
                  <button id="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 class="inner d-flex align-items-center">
                <a href="#">
                  <img src="{{asset('img/carro.png')}}" width="30" height="30" alt="Carrito">
                </a>
                <div class="d-flex justify-content-center h-5 w-4">
                  <span style="color: #82abf6" id="cartCount">0</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

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

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


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

<a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#modal-pasos">
  Boton de Prueba
</a>
<div class="modal modal-blur fade" id="modal-pasos" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Save changes</button>
      </div>
    </div>
  </div>
</div>

@endsection
@section('js')
	<script>
     // Modal Datos de envio
    var modalSearch = document.getElementById("myModalSearch");
    var modalSucursal = document.getElementById("myModalSucursal");

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

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


    // When the user clicks the button, open the modal
    btnSearch.onclick = function() {
      modalSearch.style.display = "block";
    }

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

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

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

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

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

    $(function() {
      $("#brand_id").val("");
      $("#brand_id").change(function(){
        if($("#brand_id").val() == ""){
          $("#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);
        $("#cartCount").text(parseInt($("#cartCount").text())+1);
      });
      $("#menos").click(function(){
        $("#contador").text(parseInt($("#contador").text())-1);
        $("#cartCount").text(parseInt($("#cartCount").text())-1);

      });
    });


	</script>
@stop