@extends('layouts.app')

@push('css')
<link href="{{ asset('js/select2/select2.min.css') }}" rel="stylesheet" />
<style>
    .btn_touchspin{
        padding: 0px 8px;
        height: 20px;
        width: auto;
        text-align: center;
        background-color: #0b5cd7;
        border: none;
        color: #fff;
        font-family: "SKFSans-Medium";
        font-size: 12px;
    }

    .btn_remove{
        padding: 7px 12px;
        /* height: 30px; */
        /* width: auto; */
        text-align: center;
        background-color: #0b5cd7;
        border: none;
        color: #fff;
        font-family: "SKFSans-Medium";
        font-size: 12px;
    }
</style>
@endpush

@section('content')
    <div class="container ml-0 mr-0 pl-0 pr-0 row">
        <div class="animate__animated animate__fadeInUp container tarjetas tarjeta-gris p-3 p-sm-2 p-md-3 p-lg-5 p-xl-5 col-12">
            <div class="row row-bottom">
               <div class="col-6">
                   <h3 class="texto-obscuro">Carrito de pedidos</h3>
                   <nav class="breadcrumb"><a class="breadcrumb-item" href="{{ url('productos') }}">Productos</a><span class="breadcrumb-item active">Carrito</span></nav>
               </div>
           </div>
            <div class="cero-productos @if(count($productos) > 0) d-none @endif">
                <div class="empty-space-20"></div>
                <h1>No cuentas con articulos en tu carrito.</h1>
                <p>Ve a la tienda para poder agregar productos a tu carrito.</p>
                <div class="row botonera-inferior">
                    <div class="col-12 p-0 m-0 text-right botonera-formulario">
                        <a href="{{ url('productos') }}" class="btn btn-principal width-250">Ir a la tienda <span>-></span></a>
                    </div>
                </div>
            </div>
            <div class="list">
            @foreach ($productos as $producto)
                <div class="row row-centrado lista list_custom ml-0 mr-0" id="div_producto_{{ $producto->id }}">
                    <div class="col-2">
                        <img class="img-fluid w-50" src="{{ asset('imagenes/productos/'.$producto->imagen) }}" alt="">
                    </div>
                    <div class="col-2">
                        <p class="m-0 mb-1 texto-obscuro">Producto</p>
                        <h6 class="texto-azul producto_{{ $producto->id }}">{{ $producto->nombre }}</h6>
                    </div>
                    <div class="col-2">
                        <p class="m-0 mb-1 texto-obscuro">Precio</p>
                        <h6 class="texto-azul precio_{{ $producto->id }}" data-precio="{{ number_format($producto->precio,2) }}">${{ number_format($producto->precio,2) }} MXN</h6>
                    </div>
                    <div class="col-3">
                        <p class="m-0 mb-1 texto-obscuro">Cantidad</p>
                        <h6 class="texto-azul cantidad_{{ $producto->id }}"><button class="btn_touchspin updatebutton" data-id="{{ $producto->id }}" data-tipo="menos">-</button> &nbsp;&nbsp; <span id="cantidad_{{ $producto->id }}">{{ $producto->solicitados }}</span> &nbsp;&nbsp; <button data-id="{{ $producto->id }}" data-tipo="mas" class="btn_touchspin updatebutton">+</button></h6>
                    </div>
                    <div class="col-2">
                        <p class="m-0 mb-1 texto-obscuro">Total</p>
                        <h6 class="texto-azul total_{{ $producto->id }}" data-total="{{ ($producto->solicitados * $producto->precio) }}">${{ number_format(($producto->solicitados * $producto->precio),2) }} MXN</h6>
                    </div>
                    <div class="col-1">
                        <button class="btn_remove" data-id="{{ $producto->id }}">X</button>
                    </div>
                </div>
            @endforeach
            </div>
           <div class="empty-space-20"></div>
       </div>
       <div class="animate__animated animate__fadeInUp container tarjetas tarjeta-gris p-3 p-sm-2 p-md-3 p-lg-5 p-xl-5 col-12" style="background: #dfdfdf">
       <div class="empty-space-30"></div>
       <form action="{{ url('enviar_pedido') }}" method="post" class="row-centrado" id="form-pedido">
        @csrf
           <div class="col-12 col-sm-12 col-md-2 col-lg-2 col-xl-2"></div>
           <div class="col-12 col-sm-12 col-md-2 col-lg-4 col-xl-4">
                <h4 class="texto-azul">Revisa tu pedido</h4>
                <p>Al completar tu pedido te enviaremos un e-mail notificándote que hemos recibido tu pedido. El contrato de compra no estará formalizado hasta que un asesor lo verifique y se ponga en contacto contigo.</p>
           </div>
           <div class="col-12 col-sm-12 col-md-2 col-lg-1 col-xl-1"></div>
           <div class="col-12 col-sm-12 col-md-2 col-lg-3 col-xl-3">
                <h2 class="texto-obscuro">Total del pedido</h2>
                <br />
                <br />
                <div class="row-centrado mb-2"><h6 class="m-0 p-0">Subtotal:</h6> <div class="texto-azul" data-cantidad="{{ ($subtotal) }}" id="subtotal">${{ number_format($subtotal,2) }} MXN</div></div>
                <div class="row-centrado mb-2"><h6 class="m-0 p-0">Descuento:</h6> <div class="texto-azul" data-cantidad="{{ ($descuento) }}" id="descuento">-${{ number_format($descuento,2) }} MXN</div></div>
                <div class="row-centrado mb-2"><h6 class="m-0 p-0">I.V.A.:</h6> <div class="texto-azul" data-cantidad="{{ ($iva) }}" id="iva">${{ number_format($iva,2) }} MXN</div></div>
                <div class="row-centrado mb-2"><h6 class="m-0 p-0">Total:</h6> <div class="texto-azul" data-cantidad="{{ ($total) }}" id="total">${{ number_format($total,2) }} MXN</div></div>
                <input type="hidden" id="i_subtotal" value="{{ number_format($subtotal,2) }}" name="subtotal">
                <input type="hidden" id="i_descuento" value="{{ number_format($descuento,2) }}" name="descuento">
                <input type="hidden" id="i_iva" value="{{ number_format($iva,2) }}" name="iva">
                <input type="hidden" id="i_total" value="{{ number_format($total,2) }}" name="total">
           </div>
           <div class="col-12 col-sm-12 col-md-2 col-lg-1 col-xl-1"></div>
           <div class="col-12 col-sm-12 col-md-2 col-lg-1 col-xl-1"></div>
       </form>
       <div class="row botonera-inferior">
            <div class="col-12 p-0 m-0 text-right botonera-formulario">
                <button type="button" id="guardar-cambios" class="btn btn-principal width-250">Realizar pedido <span>-></span></button>
            </div>
        </div>
       <div class="empty-space-30"></div>
   </div>
    </div>
@endsection

@push('scripts')
    <script>
        var url_publica = "{{ url('/') }}";

        $(".btn_remove").click(function(){
            var id = $(this).data('id');

            $.ajax({                
                url: url_publica+"/actualizar_carrito/"+id+"/"+0,
                success: function(respuesta) {
                    window.location.replace(url_publica+"/carrito")
                },
                error: function() {
                    console.log("No se ha podido obtener la información");
                }
            });
        });

        $(".updatebutton").click(function(){
            var id = $(this).data('id');
            var tipo = $(this).data('tipo');
            var cantidad = parseInt($("#cantidad_"+id).text());
            if(tipo == "menos")
            {
                cantidad = cantidad - 1;
                if(cantidad <= 0)
                {
                    cantidad = 0;
                    var precio = $(".precio_"+id).data('precio');
                    $("#div_producto_"+id).remove();
                    var aux = parseInt($("#contador_carrito").text());
                    $("#contador_carrito").html(aux - 1);
                    $("#contador_carrito_movil").html(aux - 1);
                }else{
                    $("#cantidad_"+id).text(cantidad);
                    var precio = $(".precio_"+id).data('precio');
                    
                    $(".total_"+id).html("$"+(precio*cantidad).toFixed(2) +" MXN");
                }
            }else{
                cantidad = cantidad + 1;
                $("#cantidad_"+id).text(cantidad);
                var precio = $(".precio_"+id).data('precio');
                $(".total_"+id).html("$"+(precio*cantidad).toFixed(2) +" MXN");
            }
            var subtotal_temp =  parseFloat($("#subtotal").data('cantidad'));
            var descuento_temp =  parseFloat($("#descuento").data('cantidad'));
            var iva_temp =  parseFloat($("#iva").data('cantidad'));
            var total_temp =  parseFloat($("#total").data('cantidad'));
            console.log(subtotal_temp);
            if(tipo == "menos")
            {
                var auxiliar = parseFloat((precio*(cantidad + 1)).toFixed(2));
                
            }else{
                var auxiliar = parseFloat((precio*(cantidad - 1)).toFixed(2)); 
            }
            subtotal_temp = subtotal_temp - auxiliar + parseFloat((precio*cantidad).toFixed(2));
            iva_temp = subtotal_temp * .16;
            total_temp = subtotal_temp + iva_temp;
            
            $("#subtotal").data('cantidad',subtotal_temp);
            $("#iva").data('cantidad',iva_temp);
            $("#total").data('cantidad',total_temp);
            $("#subtotal").html('$'+subtotal_temp.toFixed(2)+' MXN');
            $("#iva").html('$'+iva_temp.toFixed(2)+' MXN');
            $("#total").html('$'+total_temp.toFixed(2)+' MXN');

            $("#i_subtotal").val(subtotal_temp);
            $("#i_iva").val(iva_temp);
            $("#i_total").val(total_temp);

            if(total_temp > 0)
            {
                $(".cero-productos").addClass('d-none');
            }else{
                $(".cero-productos").removeClass('d-none');
            }

            $.ajax({
                url: url_publica+"/actualizar_carrito/"+id+"/"+cantidad,
                success: function(respuesta) {
                    // console.log(respuesta);
                },
                error: function() {
                    console.log("No se ha podido obtener la información");
                }
            });
        })

        $("#guardar-cambios").click(function(){
            if($("#i_total").val() > 0)
            {
                $("#form-pedido").submit();
            }else{
                alert('No tienes articulos en tu carrito');
            }
        });
    </script>    
@endpush