@extends('layouts.tienda')

@section('content')

<div class="container-fluid tope-imagen">
    <div class="row">
        <div class="col-12 mt-2">
            <div class="card">
                <div class="card-body">
                
                
                <form method="POST" action="{{ route('tienda-externa-fin') }}" 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 fa-user-circle-o text-info"></i> Información de Contacto
                                    </h5>
                                </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="departamento" class="form-control departamento" value="{{ old('departamento') }}" 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 fa-sticky-note-o 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->imagen}}" alt="{{$carrito->producto}}" style="height: 150px; object-fit: cover;">
                                                </div>
                                            </div>

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

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

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

                                                        <p>
                                                            <a class="mr-2" style="cursor:pointer;">
                                                                <i class="fa fa-pencil-square-o text-info" data-toggle="modal" data-target="#actualizar" onclick="cantidad('{{$carrito->id}}','{{$carrito->cantidad}}', '{{$carrito->precio}}', '{{$carrito->producto}}', '{{$carrito->imagen}}')" style="color: #0EA5E9;" aria-hidden="true"></i>
                                                            </a>

                                                            <a href="{{ route('tienda-externa-delete', $carrito->id) }}">
                                                                <i class="	fa fa-close text-danger"></i>
                                                            </a>
                                                        </p>

                                                    </div>

                                                    <div class="col-md-6 col-8">
                                                        <h5 class="text-right mb-0">
                                                            @if ($moneda->mostrar_a_d)
                                                               {{$moneda->simbolo}} {{ $carrito->precio }}
                                                            @else
                                                               {{ $carrito->precio }} {{$moneda->simbolo}}
                                                            @endif
                                                        </h5>

                                                        <p class="text-right 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">Subtotal</p>
                                    </div>

                                    <div class="col-md-6 col-6">
                                        <div class="form-group">
                                           <p class="blockquote text-md-right text-right">
                                               @if ($moneda->mostrar_a_d)
                                                 {{$moneda->simbolo}} {{$general}}
                                               @else
                                                 {{$general}} {{$moneda->simbolo}}
                                               @endif
                                           </p>
                                        </div>  
                                    </div>

                                    <div class="col-md-6 col-6">
                                        <p class="blockquote">Descuento</p>
                                    </div>

                                    <div class="col-md-6 col-6">
                                        <div class="form-group">
                                           <p class="blockquote text-md-right text-right">
                                                @if ($moneda->mostrar_a_d)
                                                   {{$moneda->simbolo}} {{$descuento}}
                                                @else
                                                   {{$descuento}} {{$moneda->simbolo}}
                                                @endif
                                           </p>
                                        </div>  
                                    </div>

                                    <div class="col-md-6 col-6">
                                        <p class="blockquote">Iva</p>
                                    </div>

                                    <div class="col-md-6 col-6">
                                        <div class="form-group">
                                           <p class="blockquote text-md-right text-right">
                                                @if ($moneda->mostrar_a_d)
                                                   {{$moneda->simbolo}} {{ $ivatotal }}
                                                @else
                                                   {{ $ivatotal }} {{$moneda->simbolo}}
                                                @endif
                                           </p>
                                        </div>  
                                    </div>

                                    <div class="col-md-6 col-6">
                                        <p class="blockquote">Costo envio</p>
                                    </div>

                                    <div class="col-md-6 col-6">
                                        <div class="form-group">
                                           <p class="blockquote text-md-right text-right costo">
                                                @if ($moneda->mostrar_a_d)
                                                   {{$moneda->simbolo}} 0
                                                @else
                                                   0 {{$moneda->simbolo}}
                                                @endif
                                           </p>
                                        </div>  
                                    </div>

                                    <div class="col-md-6 col-6">
                                        <p class="blockquote">
                                            <strong>Total</strong>
                                        </p>
                                    </div>

                                    <div class="col-md-6 col-6">
                                        <div class="form-group">
                                           <p class="blockquote text-md-right text-right">
                                            <strong>
                                                @if ($moneda->mostrar_a_d)
                                                   {{$moneda->simbolo}} {{ $montoGeneral }}
                                                @else
                                                   {{ $montoGeneral }} {{$moneda->simbolo}}
                                                @endif
                                            </strong>    
                                           </p>
                                        </div>  
                                    </div>
                                    
                                      
                                    <div class="col-md-6 col-6">
                                        <p class="blockquote">
                                           <strong>Puntos</strong>
                                        </p>
                                    </div>

                                    <div class="col-md-6 col-6">
                                        <div class="form-group">
                                           <p class="blockquote text-md-right text-right">
                                                <strong>{{ $puntos }}</strong>
                                           </p>
                                        </div>  
                                    </div>
                                    

                                </div>
                            </div>

                            <div class="col-md-12 mt-4">
                                <div class="form-group">
                                    <h3 class="mb-2">Métodos de pago</h3>
                                </div>    
                                    
                                <div class="row">

                                    @foreach($metodosPagos as $metodo)
                                    <div class="col-md-6">
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="radio" name="radio" value="{{$metodo->id}}" required onchange="mostrarSoporte(this.value)">
                                            <label class="form-check-label">{{$metodo->nombre}} @if($metodo->id == '3' && $metodo->aprobado_automatico == 1) (aprobación automática de compra) @endif
                                            </label>
                                        </div>
                                    </div>    
                                    @endforeach
                                         
                                </div>
                            </div>   
                            
                            
                            <div class="col-12 mt-3 soporte" style="display:none;">
                                <div class="form-group">
                                    {!! $banco->contenido !!}
                                </div>
                                
                                <div class="form-group">
                                    <div class="input-group mt-4">
                                       <div class="custom-file">
                                         <input type="file" class="custom-file-input" name="archivo" accept="image/*">
                                           <label class="custom-file-label">Ingrese su soporte de Pago</label>
                                       </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="row">
                                    
                                    <div class="col-md-6 mb-2">
                                       <a class="btn btn-danger btn-block text-white" href="{{ route('tienda-externa-index') }}">Seguir Comprando</a>
                                    </div>
                                    
                                    <div class="col-md-6 mb-2">
                                       <button class="btn btn-info btn-block text-white" type="submit">Confirmar pedido</button>
                                    </div>
                                   
                                </div>
                            </div>

                        </div>

                    </div>

                </div>
                
            </form>    
                
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="actualizar" style="display: none;" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Ingrese la Cantidad</h5>
          <button type="button" class="close" data-dismiss="modal"><span>×</span></button>
          </div>
            <div class="modal-body">
                
            <form action="{{route('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">
                                <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 btn-block">Aceptar</button>
                        </div>  
                    </div>
                
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</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(cantidad) + 1) * precio) + '$')
       
    }

   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(cantidad) - 1) * precio) + '$')
        }
    }


    function buscarCapital(){
        
        $('#capital').empty(); 
        var depa = $('#departamento').val();

        $.get('{{request()->root()}}/tienda/envio/'+depa, function (response) {
           capitales = JSON.parse(response)
      
           $('#capital').append($('<option>', {
             value: "",
             text : "Seleciona una Opcion" 
           }));
        
           capitales.forEach(item => {
             $('#capital').append($('<option>', {
                value: item.id,
                text : ""+item.nombre
             }));
           })
      
        })
    }
    
    
    
    function mostrarSoporte(valor){
        
        if(valor == 2){
            $('.soporte').show()
        }else{
            $('.soporte').hide()
        }
    }
    

</script>
@endpush