@extends('layouts.dashboardnew')

@section('content')

<div class="row">
    <div class="col-12">
        <div class="row"> 
            
                <div class="col-md-4">
                    <div class="card cta-box overflow-hidden">
                        <div class="card-body">
                            <div class="d-flex">
                                <div class="flex-shrink-0">
                                    <img src="{{ asset('recursos/Billetera.png') }}"  style="width: 51px;">
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h5 class="text-uppercase text-end"><b>Billetera</b></h5>
                                    <h3 class="text-opacity text-end">
                                        @if ($moneda->mostrar_a_d)
                                           {{$moneda->simbolo}} {{number_format(Auth::user()->wallet_amount, 2, "." , ",") . "\n"}}
                                        @else
                                           {{number_format(Auth::user()->wallet_amount, 2, "." , ",") . "\n"}} {{$moneda->simbolo}}
                                        @endif
                                    </h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="card cta-box overflow-hidden">
                        <div class="card-body">
                            <div class="d-flex">
                                <div class="flex-shrink-0">
                                    <img src="{{ asset('recursos/Ganancias.png') }}" style="width: 51px;">
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h5 class="text-uppercase text-end"><b>Retiros en espera</b></h5>
                                    <h3 class="text-opacity text-end">
                                        @if ($moneda->mostrar_a_d)
                                           {{$moneda->simbolo}} {{number_format($espera, 2, "." , ",") . "\n"}}
                                        @else
                                           {{number_format($espera, 2, "." , ",") . "\n"}} {{$moneda->simbolo}}
                                        @endif
                                    </h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                
                <div class="col-md-4">
                    <div class="card cta-box overflow-hidden">
                        <div class="card-body">
                            <div class="d-flex">
                                <div class="flex-shrink-0">
                                    <img src="{{ asset('recursos/pagos.png') }}" style="width: 51px;">
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h5 class="text-uppercase text-end"><b>Pagos Totales</b></h5>
                                    <h3 class="text-opacity text-end">
                                        @if ($moneda->mostrar_a_d)
                                           {{$moneda->simbolo}} {{number_format($pagado, 2, "." , ",") . "\n"}}
                                        @else
                                           {{number_format($pagado, 2, "." , ",") . "\n"}} {{$moneda->simbolo}}
                                        @endif
                                    </h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
        </div>
    </div>
</div>


<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                
                <ul class="nav nav-tabs nav-bordered mb-3" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a href="#retiro-b2" data-bs-toggle="tab" aria-expanded="false" class="nav-link @if($tipo == 0) active @endif" aria-selected="false" tabindex="-1" role="tab">
                            Retiros
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a href="#transferencia-b2" data-bs-toggle="tab" aria-expanded="true" class="nav-link @if($tipo == 1) active @endif" aria-selected="true" role="tab">
                            Transferencia
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a href="#historial-b2" data-bs-toggle="tab" aria-expanded="false" class="nav-link" aria-selected="false" tabindex="-1" role="tab">
                            Historial de Retiros
                        </a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane @if($tipo == 0) active @endif" id="retiro-b2" role="tabpanel">
                        @include('retiro.componentes.retiro')
                    </div>
                    <div class="tab-pane @if($tipo == 1) active @endif" id="transferencia-b2" role="tabpanel">
                        @include('retiro.componentes.transferencia')
                    </div>
                    <div class="tab-pane" id="historial-b2" role="tabpanel">
                        @include('retiro.componentes.historial')
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</div>    

@endsection

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

//if('{{ Auth::user()->tour_sistem }}' == 0){
if('{{ $tipo }}' == '0'){ 

    const driver = window.driver.js.driver;
    
    const driver_step = driver({
        prevBtnText:'Anterior',
        nextBtnText:'Siguiente',
        doneBtnText:'Finalizar',
        showProgress: true,
        allowClose: false,
  
        steps:[ 
            {
               popover: {
                   title:"Paso 1",
                   description:"Recuerda completar en tu perfil los datos de tu método de retiro para que podamos procesar tus pagos sin inconvenientes."
               }
            },
            {
                element: '#paso2',
                popover: {
                   title:"Paso 2",
                   description:"Selecciona tu método de retiro."
                }
            },
            {
                element: '#paso3',
                popover: {
                   title:"Paso 3",
                   description:"Introduce el monto a retirar sin espacios."
                }
            },{
                element: '#paso4',
                popover: {
                   title:"Paso 4",
                   description:"Debe dar clic en aceptar solo 1 vez."
                }
            }
        ],
        
        /*
        onDestroyStarted: () => {
            
            driver_step.destroy();
            
            $.get('{{request()->root()}}/admin/retiro/marcar/guia', function (response) {})
        }
        */
        
    });
    
    driver_step.drive();
    
}

//}
    
    function marcador(valor){
        
        var numero = '{{$metodopagos[($metodopagos->count() - 1)]->id}}';
        
        for(var i = 0; i<=numero; i++){
            if(valor == i){
              $(".id"+i).css("border-style", "solid");
              $(".id"+i).css("border-color", "#3F7BFF");
              $(".id"+i).css("border-radius", "0.625rem");
            }else{
              $(".id"+i).css("border-style", "");
              $(".id"+i).css("border-color", "");
              $(".id"+i).css("border-radius", ""); 
            }
        }
        
        $('.numerobilletera').val(valor);
        
        
        @foreach($metodopagos as $met)
            if('{{$met->id}}' == valor){
                if('{{$met->tipofeed}}' == 0){
                   $('.fee').val('{{$met->feed}}');
                }else{
                   $('.fee').val(parseFloat('{{$met->feed}}' * 100)+' %');
                }
                
                $('.monto_min').val('{{$met->monto_min}}');
                
                if('{{$met->correo}}' == 1){
                    
                    $('.correo').show()
                    $('.wallet').hide()
                    $('.bancario').hide()
                    
                }else if('{{$met->wallet}}' == 1){
                    
                    $('.correo').hide()
                    $('.bancario').hide()
                    $('.wallet').show()
                    
                }else if('{{$met->datosbancarios}}' == 1){
                    
                    $('.correo').hide()
                    $('.wallet').hide()
                    $('.bancario').show()
                    
                }
            }
        @endforeach
        
    }
    
    function totalRetiro(monto){
        
        var metodo = $('.numerobilletera').val();
        var total = 0;
        
        @foreach($metodopagos as $met)
            if('{{$met->id}}' == metodo){
                if('{{$met->tipofeed}}' == 1){
                    
                    total = (monto * '{{$met->feed}}');
                    total = (monto - total);
                    $('.total').val(total);
                    
                }else{
                    
                    total = (monto - '{{$met->feed}}');
                    $('.total').val(total);
                }
            }
        @endforeach
    }
    
</script>
@endpush