@extends('layouts.dashboardnew')

@section('content')


<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-md-8">
            <div class="card">
                <div class="card-body">
                    
                    <div id="smartwizard">
                
                        @include('carrito.pasos.cabecera.cabeza')
                        
                        
                        <div class="tab-content">
                            <div id="step-1" class="tab-pane" role="tabpanel">
                        
                                <form action="{{route('carrito-ultimopaso')}}" method="POST" enctype="multipart/form-data">
                                    {{ csrf_field() }}
                                    
                                    
                                    <input type="hidden" name="id_datos" value="{{ $id }}">
                            
                                    <div class="row">
                            
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <div class="alert alert-info" role="alert">
                                                    <h4 class="text-center">Selecciona Tus 2 medio de pagos diferidos</h4>
                                                </div>    
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-12">
                                            <div class="row">
                                                
                                                <div class="col-md-6">
                                                    <div class="row">
                                                        
                                                        <div class="col-md-12">
                                                            <div class="form-group mb-3">
                                                                <label>Primer Medio de pago</label>
                                                                <select class="form-control" name="metodo1" required onchange="modificarmetodos(this.value)">
                                                                    <option value="" selected disabled>Seleccione una Opción</option>
          
                                                                    <option value="1">Billetera</option>
                                      
                                                                </select>
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="col-md-12">
                                                            <div class="form-group mb-3">
                                                                <h5 class="texto-metodo1"></h5>
                                                            </div>
                                                        </div>
                                                        
                                                    </div>
                                                </div>
                                                
                                                <div class="col-md-6">
                                                    <div class="row">
                                                        
                                                        <div class="col-md-12">
                                                            <div class="form-group mb-3">
                                                                <label>Segundo Medio de pago</label>
                                                                <select class="form-control metodo2" name="metodo2" required onchange="medio_pago2(this.value)">
                                                                    <option value="" selected disabled>Seleccione una Opción</option>

                                                                    @foreach($metodosPagos as $metodo)
                                                                    <option value="{{ $metodo->id }}">{{ $metodo->nombre }}</option>
                                                                    @endforeach

                                                                </select>
                                                            </div>    
                                                        </div>
                                                        
                                                        
                                                        <div class="col-md-12 mt-2 soporte" style="display:none;">
                                                            <div class="form-group">
                                                                @if($banco != null)
                                                                  {!! $banco->contenido !!}
                                                                @endif
                                                            </div>
                                
                                                            <div class="form-group mb-3">
                                                                <label class="form-label">Seleccione un archivo</label>
                                                                <input class="form-control" type="file" name="archivo">
                                                            </div>
                                                        </div>
                                                        
                                                    </div>    
                                                </div>
                                                
                                            </div>
                                        </div>
                            
                                        <div class="col-md-12">
                                            <div class="d-flex flex-row-reverse bd-highlight">
                                                <div class="p-2 bd-highlight">
                                                    <button type="submit" class="btn btn-info w-100">Finalizar</button>
                                                </div>
                                                <div class="p-2 bd-highlight"></div>
                                                <div class="p-2 bd-highlight">
                                                    <a href="{{ route('carrito-carrito') }}" class="btn btn-danger w-100">Regresar</a>
                                                </div>
                                            </div>
                                        </div>
                                        
                                    </div>
                                    
                                </form>
                            
                            </div>
                        </div>
                        
                    </div>
                    
                </div>
            </div>
        </div>
        
        
        <div class="col-12 col-md-4">
            <div class="card">
                <div class="card-body">
                     
                     @foreach($carritos as $carrito)
                    <div class="col-xs-12 col-md-12">
                        <div class="row">
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    <center>
                                        <img class="mx-auto" style="height: 120px;" src="{{$carrito->product->img}}" alt="{{$carrito->product->title}}">
                                    </center>
                                </div>
                            </div>      
            
                            <div class="col-md-6">
                                <div class="form-group">
                                    <h5><strong> {{ $carrito->producto }} </strong></h5>
                                    <p><strong> 

                                        @if ($moneda->mostrar_a_d)
                                           {{$moneda->simbolo}} {{ $carrito->total }}
                                        @else
                                           {{ $carrito->total }} {{$moneda->simbolo}}
                                        @endif

                                    </strong></p>
                                </div>
                            </div>
                        
                        </div>
                    </div>
                    @endforeach
           
                    <div class="col-md-12">
                        <div class="form-group mt-3 mb-3">
                            <h4><strong class="ms-3"> Costo de envio: 
                            
                            @if ($moneda->mostrar_a_d)
                                {{$moneda->simbolo}} {{ $costo }}
                            @else
                                {{ $costo }} {{$moneda->simbolo}}
                            @endif
                            
                            </strong></h4>
                        </div>
                        
                        <div class="form-group mt-3 mb-3">
                            <h4><strong class="ms-3"> Iva: 
                            
                            @if ($moneda->mostrar_a_d)
                                {{$moneda->simbolo}} {{ $iva }}
                            @else
                                {{ $iva }} {{$moneda->simbolo}}
                            @endif
                            
                            </strong></h4>
                        </div>
                        
                        <div class="form-group mt-3 mb-3">
                            <h4><strong class="ms-3"> Total: 
                            
                            @if ($moneda->mostrar_a_d)
                                {{$moneda->simbolo}} {{ ($total + $costo + $iva) }}
                            @else
                                {{ ($total + $costo + $iva) }} {{$moneda->simbolo}}
                            @endif
                             </strong></h4>
                        </div>
                    </div>
                    
                </div>
            </div>    
        </div>
    </div>
</div>

@endsection

@push('script')
<script type="text/javascript">

    $('#smartwizard').smartWizard({
      selected: 0, // Initial selected step, 0 = first step
      theme: 'dots', // theme for the wizard, related css need to include for other than default theme
      autoAdjustHeight: false, // Automatically adjust content height
      backButtonSupport: false, // Enable the back button support
      enableUrlHash: false, // Enable selection of the step based on url hash
      toolbar: {
          position: 'bottom', // none|top|bottom|both
          showNextButton: false, // show/hide a Next button
          showPreviousButton: false, // show/hide a Previous button
          extraHtml: '' // Extra html to show on toolbar
      },
      anchor: {
          enableNavigation: true, // Enable/Disable anchor navigation 
          enableNavigationAlways: false, // Activates all anchors clickable always
          enableDoneState: true, // Add done state on visited steps
          markPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
          unDoneOnBackNavigation: false, // While navigate back, done state will be cleared
          enableDoneStateNavigation: true // Enable/Disable the done state navigation
      },
      keyboard: {
          keyNavigation: false, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
          keyLeft: [37], // Left key code
          keyRight: [39] // Right key code
      },
  
      disabledSteps: [], // Array Steps disabled
      errorSteps: [], // Array Steps error
      warningSteps: [], // Array Steps warning
      hiddenSteps: [], // Hidden steps
      getContent: null // Callback function for content loading
});
    
    
    function modificarmetodos(valor){ 
        if(valor == 1){
           $('.texto-metodo1').text('Total Wallet disponible: $ {{ Auth::user()->wallet_amount }}')
        }
    }
    
    
    function medio_pago2(valor){
        
        if(valor == 2){
            $('.soporte').show()
        }else{
            $('.soporte').hide()
        }
        
    }
   
</script>
@endpush