@extends('layouts.dashboardnew')

@section('content')


<style>
.irs--flat .irs-grid-pol {
    background-color: #000 !important;
}

.irs--flat .irs-grid-text {
    color: #000 !important;
    font-size: 15px;
}

.irs--flat .irs-single{
    background-color: #08c !important;
}

.border{
  border-width: 2px !important;  
} 
</style>


<div class="row">
    <div class="col-12">
        
        <div class="col-md-12">
            <div class="form-group mb-3">
                <input type="text" id="range_03" data-plugin="range-slider" data-disable="true">
            </div>
        </div>
        
    </div>
</div>


<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                
                <form method="POST" action="{{ route('fidelizacion-carrito-finalizar') }}" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    
                    
                    <div class="row">
                                
                        <div class="col-md-6">
                            <div class="row">
                            
                                <div class="col-md-12">
                                    <div class="form-group mb-3">
                                        <h2><strong>Pedidos</strong></h2>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group mb-3 mt-3">
                                        <h5 class="text-uppercase">
                                            <i class="fa-regular fa-circle-user text-info"></i> Información de Contacto
                                        </h5>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group form-switch mb-3">
                                        <input type="checkbox" class="form-check-input rellenar" checked onclick="rellenardatos()">
                                        <label>Cambiar datos de pedidos</label>
                                    </div>    
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label>Celular (*)</label>
                                        <input type="text" name="telefono" class="form-control telefono" value="{{ old('telefono') }}" required>
                                    </div>  
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label>Correo Electronico (*)</label>
                                        <input type="email" name="correo" class="form-control correo" value="{{ old('correo') }}" required>
                                    </div>
                                </div>


                                <div class="col-md-12">
                                    <div class="form-group mb-3 mt-3">
                                        <h5 class="text-uppercase">
                                            <i class="fa-solid fa-location-dot text-info"></i> Dirección de Envio
                                        </h5>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label>Nombre (*)</label>
                                        <input type="text" name="nombre" class="form-control nombre" value="{{ old('nombre') }}" required>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label>Apellido (*)</label>
                                        <input type="text" name="apellido" class="form-control apellido" value="{{ old('apellido') }}" required>
                                    </div>  
                                </div>


                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label>País (*)</label>
                                        <select class="form-control pais" name="pais" required>
                                            <option value="" selected disabled>Seleccione una Opción</option>
                                            @foreach($paises as $pais)
                                                <option value="{{$pais->id}}" {{ old('pais') == $pais->id ? 'selected' : '' }} >{{$pais->nombre}}</option>
                                            @endforeach
                                        </select>
                                    </div>  
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label>Dirección (*)</label>
                                        <input type="text" name="direccion" class="form-control direccion" value="{{ old('direccion') }}" required>
                                    </div>  
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label>Departamento / Estado (*)</label>
                                        <input type="text" name="estado" class="form-control departamento" value="{{ old('estado') }}" required>
                                    </div>  
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label>Ciudad (*)</label>
                                        <input type="text" name="ciudad" class="form-control ciudad" value="{{ old('ciudad') }}" required>
                                    </div>  
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label>Código Postal (*)</label>
                                        <input type="text" name="codigo" class="form-control codigo" value="{{ old('codigo') }}" required>
                                    </div>  
                                </div>
                                
                                
                                <div class="col-md-12">
                                    <div class="form-group mb-3 mt-3">
                                        <h5 class="text-uppercase">
                                            <i class="fa-solid fa-note-sticky text-info"></i> Nota
                                        </h5>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group mb-3">
                                        <label>Nota (Opcional)</label>
                                        <textarea class="form-control" name="envio" rows="6"></textarea>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                        
                        
                        <div class="col-md-6">
                            <div class="row">
                                
                                <div class="col-md-12">
                                    <div class="form-group mb-3">
                                        <h2><strong>Resumen del Pedido</strong></h2>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group body-scroll" style="overflow-x: hidden; width: auto; height: 200px;">
                                        <div class="col-md-12">
                                            <div class="row">

                                                @foreach($carritos as $carrito)
                                                <div class="col-md-3 col-4 mb-3">
                                                    <div class="form-group text-center">
                                                        <img class="img-fluid" src="{{$carrito->product->img}}" alt="{{$carrito->product->title}}">
                                                    </div>
                                                </div>

                                                <div class="col-md-9 col-8 mb-3">
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <h5>{{ $carrito->product->title }}</h5>
                                                        </div>
                                                        <div class="col-md-6 col-4 text-truncate">

                                                            <p class="mb-0">
                                                               Puntos lealtad
                                                            </p>

                                                            <p class="mb-0">
                                                               Cantidad
                                                            </p>

                                                            <p>
                                                                <a class="mr-2" style="cursor:pointer;">
                                                                    <i class="fa-solid fa-pen-to-square" data-bs-toggle="modal" data-bs-target="#actualizar" onclick="cantidad('{{$carrito->id}}','{{$carrito->cantidad}}', '{{$carrito->precio}}', '{{$carrito->product->title}}', '{{$carrito->product->img}}')" style="color: #0EA5E9;" aria-hidden="true"></i>
                                                                </a>

                                                                <a href="{{ route('fidelizacion-carrito-eliminar', $carrito->id) }}">
                                                                    <i class="fa-solid fa-xmark text-danger"></i>
                                                                </a>
                                                            </p>

                                                        </div>

                                                        <div class="col-md-6 col-8">
                                                            <h5 class="text-end mb-0">{{ $total }}</h5>

                                                            <p class="text-end mb-0">
                                                               {{ $carrito->cantidad }} 
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                                @endforeach

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                
                                <div class="col-md-12 mt-3">
                                    <div class="row">
                                
                                        <div class="col-md-6 col-6">
                                            <p class="blockquote">
                                                <strong>Total puntos lealtad</strong>
                                            </p>
                                        </div>

                                        <div class="col-md-6 col-6">
                                            <div class="form-group">
                                                <p class="blockquote text-md-end text-end">
                                                    <strong>{{ $total }}</strong>
                                                </p>
                                            </div>  
                                        </div>
                                        
                                        <div class="col-md-6 col-6">
                                            <p class="blockquote">
                                                <strong>Puntos lealtad disponibles</strong>
                                            </p>
                                        </div>

                                        <div class="col-md-6 col-6">
                                            <div class="form-group">
                                                <p class="blockquote text-md-end text-end">
                                                    <strong>{{ Auth::user()->fidelizacion }}</strong>
                                                </p>
                                            </div>  
                                        </div>
                                
                                    </div>    
                                </div>
                        
                                <div class="col-md-12">
                                    <div class="row">
                                    
                                        <div class="col-md-6 col-6 mb-2">
                                            <a class="btn btn-danger w-100" href="{{ route('fidelizacion-productos') }}">Seguir Comprando</a>
                                        </div>
                                    
                                        <div class="col-md-6 col-6 mb-2">
                                            <button class="btn btn-info w-100" type="submit">Confirmar pedido</button>
                                        </div>
                                   
                                    </div>
                                </div>
                        
                            </div>     
                        </div>
                        
                    </div>    
                    
                </form>    
                
            </div>
        </div>
    </div>
</div>    


<div id="actualizar" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="recuperarLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="recuperarLabel">Ingrese la Cantidad</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{route('fidelizacion-carrito-actualizar')}}" method="post">
                    {{ csrf_field() }}
             

                    <input type="hidden" class="id" name="id">
                    <input type="hidden" name="cantidad" class="cantidad" value="1">
                    <input type="hidden" name="precio" class="precio">

                    <div class="col-md-12">
                        <div class="row">
                        
                            <div class="col-md-4 col-4 mb-4">
                                <div class="col-12 text-center">
                                    <div class="image">
                   
                                    </div>
                                </div>
                            </div>
                        
                            <div class="col-md-8 col-8">
                                <div class="row">
                                    <div class="col-md-6 col-7 mt-2 text-center">
                                       <h5 class="title-product"></h5>
                                    </div>
                    
                                    <div class="col-md-6 col-5 mt-2 text-center">
                                       <h5 class="preciovisual"></h5>
                                    </div>
                                
                                
                                    <div class="col-6 mt-2 text-center">
                                        <div class="d-flex justify-content-center flex-row bd-highlight">
                                            <div class="bd-highlight mt-2 text-center" onclick="restar()" style="width: 25px; height:25px; border-radius: 50%; border: 2px solid #7b7d81 !important; cursor:pointer;">
                                                   <a class="text-dark">-</a>
                                            </div>
                                        
                                            <div class="p-2 mt-1 bd-highlight">
                                                <p class="cantidad-text">1</p>
                                            </div>
                                        
                                            <div class="bd-highlight mt-2 text-center" onclick="sumar()" style="width: 25px; height:25px; border-radius: 50%; border: 2px solid #7b7d81 !important; cursor:pointer;">
                                                 <a class="text-dark">+</a>
                                            </div>   
                                        </div>
                                    </div>
                                
                                    <div class="col-6 mt-3 text-center">
                                        <div class="form-group">
                                            <p class="valor-total">
                                             
                                            </p>
                                        </div>
                                    </div>
                                
                                </div>
                            </div>
                        
                        </div>
                    </div>
           
                    <div class="col-md-12">
                        <div class="form-group">
                           <button type="submit" class="btn btn-info w-100">Aceptar</button>
                        </div>  
                    </div>
                
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>


@endsection


@push('script')
<script type="text/javascript">
    
    function cantidad(id, cantidad, precio, nombre, img){
        
        $('.id').val(id);
        $('.canti').val(cantidad);
        $('.precio').val(precio);
        $('.valor-total').text('Total: '+ precio+ ' $');
        $('.image').empty();
        
        var src = img;
        var image = new Image();
        image.src = src;
        image.style.width = '100%';
        
        $('.image').append(image);
        $('.title-product').text(nombre);
        $('.preciovisual').text(precio + ' {{$moneda->simbolo}}');
    }
    
    function sumar(){
       
       var precio = $('.precio').val();
       var cantidad = $('.cantidad').val();

       $('.cantidad').val(parseFloat(cantidad) + 1)
       $('.cantidad-text').text(parseFloat(cantidad) + 1)
       $('.valor-total').text('Total: '+parseFloat(((parseFloat(cantidad) + 1) * precio)).toFixed(2) + '$')
       
    }

   function restar(){
        
        var precio = $('.precio').val();
        var cantidad = $('.cantidad').val();
    
        if(cantidad > 1){
           $('.cantidad').val(parseFloat(cantidad) - 1)
           $('.cantidad-text').text(parseFloat(cantidad) - 1)
           $('.valor-total').text('Total: '+parseFloat(((parseFloat(cantidad) - 1) * precio)).toFixed(2) + '$')
        }
    }
    
    
    $(document).ready(function () {
        
        $('.nombre').val('{{Auth::user()->usercampo->firstname}}');
        $('.apellido').val('{{Auth::user()->usercampo->lastname}}');
        $('.correo').val('{{Auth::user()->user_email}}');
        $('.direccion').val('{{Auth::user()->usercampo->direccion}}');
        $('.departamento').val('{{Auth::user()->usercampo->estado}}');
        $('.ciudad').val('{{Auth::user()->usercampo->ciudad}}');
        $('.codigo').val('{{Auth::user()->usercampo->codigo}}');
        $('.telefono').val('{{Auth::user()->usercampo->phone}}');
        $(".pais option[value='{{Auth::user()->usercampo->idpais}}']").attr("selected", true);
        
    });
    
    
    function rellenardatos(){
        if($('.rellenar').prop('checked')) {
           
           
           $('.nombre').val('{{Auth::user()->usercampo->firstname}}');
           $('.apellido').val('{{Auth::user()->usercampo->lastname}}');
           $('.correo').val('{{Auth::user()->user_email}}');
           $('.direccion').val('{{Auth::user()->usercampo->direccion}}');
           $('.departamento').val('{{Auth::user()->usercampo->estado}}');
           $('.ciudad').val('{{Auth::user()->usercampo->ciudad}}');
           $('.codigo').val('{{Auth::user()->usercampo->codigo}}');
           $('.telefono').val('{{Auth::user()->usercampo->phone}}');
           $(".pais option[value='{{Auth::user()->usercampo->idpais}}']").attr("selected", true);
           
        }else{
           
           $('.nombre').val('');
           $('.apellido').val('');
           $('.correo').val('');
           $('.direccion').val('');
           $('.departamento').val('');
           $('.ciudad').val('');
           $('.codigo').val('');
           $('.telefono').val(''); 
           $(".pais option[value='{{Auth::user()->usercampo->idpais}}']").attr("selected", false);
           $('.pais').val('');
        }
    }
    
    
    
    $('#range_03').ionRangeSlider({
        grid: true,
        min: 0,
        max: '{{ Auth::user()->fidelizacion }}',
        from: '{{ $total }}',
        prefix: ""
    });
    
</script>
@endpush