@extends('layouts.dashboardnew')

@section('content')

<div class="container-fluid paso-uno">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    
                     <h3>Productos y sus puntos </h3>
                
                <div class="row">    
                    <div class="col-3">
                        <div class="form-group">
                            <a class="btn btn-info btn-block text-white" onclick="toggle()">Agregar Todos los puntos</a>
                        </div>
                    </div> 
                    
                    <div class="col-3">
                        <div class="form-group">
                            <a class="btn btn-info btn-block text-white" data-toggle="modal" data-target="#myModal2">Editar o Agregar Individual</a>
                        </div>
                    </div>     
                    
                    <div class="col-3">
                        <div class="form-group">
                            <a class="btn btn-danger btn-block text-white" data-toggle="modal" data-target="#myModal3">Eliminar Producto</a>
                        </div>
                    </div>  
                </div>    
                
                
                
                <div class="col-12">
                    @empty(!$settingPuntos)
               
                <div class="row">
                    <div class="col-6">
                        <div class="form-group">
                            <h5>Se calcula por</h5>
                            <input type="text" class="form-control" readonly value="{{$settingPuntos->valor}}">
                        </div>    
                    </div>
            
                    <div class="col-6">
                        <div class="form-group">
                          <h5>Forma de ganar puntos</h5>
                            @if($tipopuntos == 'propias')
                            <input type="text" class="form-control" readonly value="Puntos por Compras Propias">
                            @elseif($tipopuntos == 'comision')
                            <input type="text" class="form-control" readonly value="Puntos por Comisiones">
                            @elseif($tipopuntos == 'ambas')
                            <input type="text" class="form-control" readonly value="Puntos por Comisiones y por Compras Propias">
                            @endif
                        </div>    
                    </div>
                    
           
                    <div class="col-12">
                        <div class="form-group">
                            <div class="row">
                    
                             @foreach ($settingPuntos->configuracion as $primerarreglo)
                    
                             <div class="col-4">
                                <div class="form-group"> 
                                    <h5>Información del Producto - {{$primerarreglo->idproductos}}</h5>
                                    @if ($settingPuntos->valor == 'porcentaje')
                                    <input type="text" class="form-control" readonly value="{{($primerarreglo->puntos * 100)}} %">
                                    @else
                                    <input type="text" class="form-control" readonly value="{{$primerarreglo->puntos}} ">
                                    @endif
                                </div>    
                             </div>
                             @endforeach
                             
                            </div>
                        </div>
                    </div>
                </div> 
                
                    @endempty
                </div>
                
                </div>
            </div>
        </div>
    </div>
</div>    


<div class="container-fluid paso-dos" style="display:none;">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                   
                <form class="" action="{{route('setting-save-puntos')}}" method="post">
                  {{ csrf_field() }}
                  
                   <input type="hidden" name="id" value="{{(!empty($settingPuntos)) ? $settingPuntos->id : ''}}">
                   <input type="hidden" class="form-control" name="niveles" id="niveles" required onkeyup="comisiondetalle()" value="1">
                   
                   
            <div class="row">       
                <div class="col-4">
                    <div class="form-group">
                       <label for="">Tipo de Puntos</label>
                       <select class="form-control" name="tipocomision" id="tipocomision" required onchange="comisiondetalle()">
                        <option value="" selected disabled>Seleccione una Opción</option>
                        <option value="producto">Produtos (Los Puntos dependeran del producto)</option>
                       </select>
                    </div>
                </div>
                
                
                <div class="col-4">
                    <div class="form-group">
                       <label for="">Tipo de pago de los puntos</label>
                       <select class="form-control" name="tipopago" required>
                        <option value="" selected disabled>Seleccione una Opción</option>
                        <option value="normal">Valor Fijo</option>
                        <option value="porcentaje">Valor Por Porcentaje</option>
                      </select>
                    </div>  
                </div>
                
                
                <div class="col-4">
                    <div class="form-group">
                      <label for="">Forma de ganar puntos</label>
                       <select class="form-control" name="tipopuntos" required>
                        <option value="" selected disabled>Seleccione una Opción</option>
                        <option value="propias">Puntos por Compras propias</option>
                      </select>
                    </div>  
                </div>
                
                
                <div class="col-12">
                    <div class="row" id="valor2">
                        
                    </div>
                </div>
                
                
                <div class="col-12">
                    <div class="row">
                       <div class="col-6">
                           <a class="btn btn-danger btn-block text-white" onclick="toggle()">Cancelar</a>
                      </div>
                      <div class="col-6">
                           <button type="submit" class="btn btn-info btn-block text-white"> Guardar</button>
                      </div>
                    </div>
                </div>
            </div>
            
                </form>
                
                </div>
            </div>
        </div>
    </div>
</div>


@include('setting.puntos.componente.modal')
@include('setting.puntos.componente.eliminar')


@endsection

@include('usuario.componentes.scritpTable')      


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

  function toggle() {
    $('.paso-uno').toggle('slow')
    $('.paso-dos').toggle('slow')
  }
  
  
  var rangos = null
  var productos = null
  $(document).ready(function () {
    $.get('getrangosall', function (response) {
      rangos = JSON.parse(response)
    })
    $.get('getproductosall', function (response) {
      productos = JSON.parse(response)
    })
  })
  
  
  // detalles de la comisiones
  function comisiondetalle() {
      
    $('#valor2').empty()
    let tipoComision = $('#tipocomision').val()
    let niveles = $('#niveles').val()
    if (tipoComision == 'general') {
      $('#valor').append(
        '<label for="">Valor de Comision</label>' +
        '<input type="number" step="any" class="form-control" name="valorgeneral">'
      )
    } else if (tipoComision == 'detallado') {
      for (var i = 0; i < niveles; i++) {
        $('#valor2').append(
          '<div class="col-12">'+
            '<div class="form-group">'+
              '<label for="">Valor de Comision Nivel ' + (i + 1) + '</label>' +
              '<input type="number" step="any" class="form-control" name="nivel' + (i + 1) + '">'+
            '</div>'+
           '</div>'    
        )
      }
    } else if (tipoComision == 'categoria') {
      if (rangos.length < 2) {
        $('#valor2').append(
            '<div class="col-12">'+
               '<div class="form-group">'+
                  '<div class="alert alert-warning" role="alert">' +
                     '<h4> <b>Aviso:</b> Para usar este modo, primero debes tener la configuración de rango lista</h4>' +
                  '</div>'+
                '</div>'+ 
            '</div>'    
        )
      } else {
        $('#valor2').append(
            '<div class="col-12">'+
               '<div class="form-group">'+
                    '<div class="alert alert-info" role="alert">' +
                      '<h4> <b>Nota:</b> Colocar el nombre exacto que de la categoria que en wordpress, Esto permitira comparar los productos que tienen esas categorias y pagar las comisiones</h4>' +
                    '</div>'+
                '</div>'+    
           '</div>'
        )
        let comision = ''
        for (let i = 0; i < niveles; i++) {

          rangos.forEach(item => {
            comision = comision + 
            '<div class="col-6">'+
               '<div class="form-group">'+
                   '<label for="">Comision para el rango: ' + item.name + '</label>' +
                   '<input type="number" class="form-control" step="any" required min="0" name="idrango' + item.id + '_' + (i + 1) + '">' +
                '</div>'+
             '</div>'    
          });

          $('#valor2').append(
             '<div class="col-6">'+
                '<div class="form-group">'+
                   '<h4 class="col-xs-12"> Configuración de la Categoría ' + (i + 1) + ' </h4>' +
                   '<label for="">Nombre de la Categoria que esta en Wordpress</label>' +
                   '<input type="text" class="form-control" required name="categoria' + (i + 1) + '">' +
                '</div>' +
             '</div>' +comision
          )
          comision = ''
        }

      }
    } else if (tipoComision == 'producto') {
      if (productos.length <= 0) {
        $('#valor2').append(
            '<div class="col-12">'+
                '<div class="form-group">'+
                   '<div class="alert alert-warning" role="alert">' +
                      '<h4> <b>Aviso:</b> Para usar este modo, primero debes tener productos registrado</h4>' +
                    '</div>'+
                '</div>'+    
          '</div>'
        )
      } else {
        $('#valor2').append(
            '<div class="col-12">'+
               '<div class="form-group">'+
                   '<div class="alert alert-info" role="alert">' +
                        '<h4> <b>Nota:</b> Si el valor es 0, ese producto no generara puntos</h4>' +
                    '</div>'+
                '</div>'+    
          '</div>'
        )
        
        
        productos.forEach(item => {
          for (var i = 0; i < niveles; i++) {
           
            
            $('#valor2').append(
                '<div class="col-4">' +
                   '<div class="form-group">'+
                       '<label for="">Valor en puntos del Producto: ' + item.ID + '</label>' +
                       '<input type="number" class="form-control" step="any" required min="0" name="idproducto' + item.ID + '_' + (i + 1) + '">' +
                   '</div>'+
                '</div>' 
            )
          }
          
          
        })
      }
    }
  }
</script>
@endpush