@extends('plantilla.plantilla')

@section('titulo','Importadora Cork')

@section('estilos')

    <link rel="stylesheet" type="text/css" href="{{ asset('asset/styles/main_styles.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('asset/styles/responsive.css') }}">

@endsection


@section('contenido')

    <div class="super_container_inner">
        <div class="super_overlay"></div>
        <!-- Home -->
        <div class="page">
            <div class="tienda owl-carousel owl-theme">
                <div class="item">

                    <img src="{{ asset('asset/images/Banner-Shop-1920X451-rines.jpg') }}"
                         class="img-responsive">

                </div>

                <div class="item">
                    <div class="product">
                        <div class="product_image">
                            <img src="{{ asset('asset/images/Banner-Shop-1920X451-llanta.jpg') }}"
                                 class="img-responsive">
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="clearfix"></div>

        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-dark mt-3 mb-5 shadow p-2" style="background-color: #0c1b4a">
                <!-- Container wrapper -->
                <div class="container-fluid">

                    <!-- Navbar brand -->
                    <a class="navbar-brand" href="#">Filtros:</a>

                    <!-- Toggle button -->
                    <button
                            class="navbar-toggler"
                            type="button"
                            data-mdb-toggle="collapse"
                            data-mdb-target="#navbarFiltros"
                            aria-controls="navbarFiltros"
                            aria-expanded="false"
                            aria-label="Toggle navigation">
                        <i class="fas fa-bars"></i>
                    </button>

                    <!-- Collapsible wrapper -->
                    <div class="collapse navbar-collapse" id="navbarFiltros">
                        <ul class="navbar-nav me-auto mb-2 mb-lg-0">

                            <!-- Link -->
                            <li class="nav-item acitve">
                                <a class="nav-link text-white" href="#">Todos</a>
                            </li>
                            <li class="nav-item">
                                <span>Diametro</span>
                                <select class="form-control" id="tamano">
                                    <option value="0">-[Seleccione una opción]-</option>
                                </select>
                            </li>
                            <li class="nav-item">
                                <span>Barrenación</span>
                                <select class="form-control" id="barrenacion">
                                    <option value="0">-[Seleccione una opción]-</option>
                                </select>
                            </li>
                        </ul>


                    </div>
                </div>
                <!-- Container wrapper -->
            </nav>

            <div class="row products_row">



            </div>
            <div class="row ajax-load text-center" style="display:none;">
                <p class="text-center" align="center"><img src="{{ asset('Loading_2.gif')  }}" alt="" width="30%"></p>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var page = 1
            $(window).scroll(function(event) {
                if($(window).scrollTop() + $(window).height() >= ($(document).height() - 5)){
                    page++
                    loadMoreData(page)
                }
            });
        });

        function loadMoreData(page,tamano=0){
            console.log(page)
            var tamano = $('#tamano').val()
            var barrenacion = $('#barrenacion').val()
            
            $.ajax({
                url: '?page='+page+'&tamano='+tamano+'&barre='+barrenacion,
                type: 'get',
                beforeSend: function(){
                    $('.ajax-load').show()
                }
            })
            .done(function(resp) {
                console.log("success");
                if(resp.html==''){
                    alert('no hay mas productos')
                    return false;
                }
                $('.ajax-load').hide()
                $('.products_row').append(resp.html)
            })
            .fail(function() {
                console.log("error");

            })
            .always(function() {
                console.log("complete");
            });
            
        }
        function getProds(){
            var tamano = $('#tamano').val()
            $("html, body").animate({ scrollTop: 0 }, 600);
            page = 1;
            $('.products_row').html('')
            loadMoreData(page,tamano)

        }
        function addItem(codigo){
            $.ajax({
                url: "{{url('agrega_producto')}}",
                type: 'post',
                dataType: 'json',
                data: {codigo: codigo},
            })
            .done(function(resp) {
                console.log("success");
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
            
        }
        
    </script>
@endsection