@extends('layouts.dashboardnew')

@section('content')

{{-- filtro por fecha --}}
@include('usuario.componentes.filtroPorFecha', ['ruta' => 'activar-filtreact-lista', 'form' => ''])


{{-- filtro por Nombre --}}
@include('usuario.componentes.filtroNombre', ['ruta' => 'activar-filtreact-lista', 'form' => ''])


{{-- filtro por ID --}}
@include('usuario.componentes.filtroID', ['ruta' => 'activar-filtreact-lista', 'form' => ''])


<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    
                <table class="table table-bordered table-striped zero-configuration">
				<thead>
					<tr>
						<th class="text-center">ID</th>
						<th class="text-center">Usuario</th>
						<th class="text-center">Correo</th>
						<th class="text-center">Billetera</th>
						<th class="text-center">Estado</th>
						<th class="text-center">Acciónes</th>
					</tr>
				</thead>

				<tbody>
					@foreach ($users as $user)
					<tr>
						<td class="text-center">{{ $user->ID }}</td>
						<td class="text-center">{{ $user->display_name }}</td>
						<td class="text-center">{{ $user->user_email }}</td>
						<td class="text-center">{{ $user->wallet_amount }}</td>
						<td class="text-center">
						    @if($user->status == 1)
						    Activo
						    @else
						    Inactivo
						    @endif
						</td>
						<td class="text-center">
						    
						    <a class="btn btn-info text-white" data-toggle="modal" data-target="#product" onclick="selector('{{$user->ID}}')">
						       <i class="fa-solid fa-shop"></i>
						    </a> 
                      
						</td>
					</tr>
					@endforeach
				</tbody>
			</table> 
			
                </div>
            </div>
        </div>
    </div>
</div>



<div class="modal fade" id="product" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Registrar Compra</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form action="{{route('activar-usuario')}}" method="post" enctype="multipart/form-data">
          {{ csrf_field() }} 
            
           <input type="hidden" class="iduser" name="iduser">
           <input type="hidden" name="tipo" value="3">
            
            
                <div class="row">
                    
                    <div class="col-6">
                        <div class="form-group">
                            <label>Método de Pago</label>
                            <input type="text" name="metodo" class="form-control" required>
                        </div>
                    </div>
            
            
                    <div class="col-6">
                        <div class="form-group">
                            <label>Productos</label>
                    
                            <select class="form-control chosen adicionales" name="productos[]" required multiple onchange="seleccionar()">
                                  @foreach($productos as $adicion)
                                     <option value="{{$adicion->ID}}">{{$adicion->post_title}}</option>
                                  @endforeach
                            </select>
            
                        </div>
                    </div>
                    
                    
                    <div class="col-12">
                        <div class="row informacion">
                        </div>
                    </div>
                    
                </div>    
            
            <div class="col-12">
                <div class="d-flex justify-content-center">
                    <div class="col-md-4">
                        <div class="form-group">   
                           <button type="submit" class="btn btn-info btn-block">Aceptar</button>
                        </div> 
                    </div>     
                </div>
            </div>
             
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div> 

@endsection
@include('usuario.componentes.scripBotones')


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

$(document).ready(function(){
  $(".chosen").chosen({width: "100%",max_selected_options: 5});
});


function seleccionar(){
    
    $('.informacion').empty()
    var adicional = $('.adicionales').val();
    
    @foreach($productos as $adicion)
    for(var i=0; i<=adicional.length; i++){
        if(adicional[i] == '{{$adicion->ID}}'){
            
            $('.informacion').append(
                '<div class="col-4">'+
                   '<div class="form-group">'+
                     '<label>Producto: {{$adicion->post_title}}</label>'+
                     '<input type="text" name="name'+ (i) +'" class="form-control" readonly value="{{$adicion->post_title}}">'+
                   '</div>'+
                '</div>'+
                
                '<div class="col-4">'+
                   '<div class="form-group">'+
                     '<label>Precio: {{$adicion->post_title}}</label>'+
                     '<input type="text" name="precio'+ (i) +'" class="form-control" readonly value="{{$adicion->meta_value}}">'+
                   '</div>'+
                '</div>'+
                
                '<div class="col-4">'+
                   '<div class="form-group">'+
                     '<label>Cantidad: {{$adicion->post_title}}</label>'+
                     '<input type="number" min="1" name="cantidad_'+ (i) +'" class="form-control" required value="1">'+
                   '</div>'+
                '</div>'
            );
        
        }
    }
    @endforeach
} 
   
   
function selector(id){
    $('.iduser').val(id);
}

</script>
@endpush