@extends('layouts.auth')

@section('content')

<style>
    .cambio-lista{
        background-color: #4d7cff;
    }
</style>

<div class="container-fluid">
    
    <img class="mb-3" src="{{ asset('assets/logosinergia.png') }}" alt="Logo Sinergia" style="height: 80px; margin-top: -40px;">
    
    <div class="row">
        <div class="col-12">
                
                <div class="row">    
                    <div class="col-sm-8">
                        <div class="card">
                            <div class="card-body">
                        
                        <h3 class="text-center mb-2">Configuración Inicial</h3>
                        
                        <div id="smartwizard">
                            <ul class="nav">
                   
                                <li class="nav-item">
                                    <a class="nav-link" href="#step-1">
                                       Sistema
                                    </a>
                                </li>
                  
                                <li class="nav-item">
                                    <a class="nav-link" href="#step-2">
                                       Estructura
                                    </a>
                                </li>
                  
                                <li class="nav-item">
                                    <a class="nav-link" href="#step-3">
                                       Moneda
                                    </a>
                                </li>
                                
                                <li class="nav-item">
                                    <a class="nav-link" href="#step-4">
                                       Comisiones
                                    </a>
                                </li>
                  
                            </ul>
                            
                            
                            <div class="tab-content">
                                <div id="step-{{$step}}" class="tab-pane" role="tabpanel" aria-labelledby="step-{{$step}}">
                                </div>    
                            </div>
                        </div>   
                        
                        
                        @if($step == 0)
                        <div class="col-md-12">
                            <div class="row">
                                 
                                <div class="col-md-12">
                                    <h4>Configuración de Sistema </h4>
                                </div> 
                                
                                <div class="col-md-6">
                                    
                                    <div class="form-group">
                                        <form class="" action="{{route('setting-save-logo')}}" method="post" enctype="multipart/form-data">
                                           {{ csrf_field() }}
                       
                       
                                        <div class="col-sm-12 mb-3 mt-4">
                                            <div class="input-group">
                                                
                                                <div class="alert alert-info" role="alert">
                                                     <h5 class="text-center">Nota: El tamaño adecuado de la imagen debe ser 170 X 170 pixeles.</h5>
                                                </div>
            
                                                <div class="custom-file">
                                                   <input type="file" class="custom-file-input" name="logo">
                                                   <label class="custom-file-label">Seleccione el logo Sistema</label>
                                                </div>
                                            </div>
                                        </div>
                        
                                        <div class="row d-flex justify-content-center">
                                            <div class="col-md-6">
                                                <button type="submit" class="btn btn-info btn-block text-white">Aceptar</button>
                                            </div>
                                        </div>
                        
                                        </form>  
                                    </div>
                                </div>
                                
                                
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <form class="" action="{{route('setting-save-favicon')}}" method="post" enctype="multipart/form-data">
                                           {{ csrf_field() }}
                       
                       
                                        <div class="col-sm-12 mb-3 mt-4">
                                            <div class="input-group">
                                                
                                                <div class="alert alert-info" role="alert">
                                                     <h5 class="text-center">Nota: El tamaño de la imagen puede ser de 150 x 150 pixeles o superior, la extencion de la imagen debe ser .icon .</h5>
                                                </div>
                                                
                                                <div class="custom-file">
                                                   <input type="file" class="custom-file-input" name="favicon">
                                                   <label class="custom-file-label">Seleccione el Favicon Sistema</label>
                                                </div>
                                            </div>
                                        </div>
                        
                                        <div class="row d-flex justify-content-center">
                                            <div class="col-md-6">
                                                <button type="submit" class="btn btn-info btn-block text-white">Aceptar</button>
                                            </div>
                                        </div>
                        
                                        </form>  
                                    </div>
                                </div>
                                
                                
                                
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <form class="" action="{{route('setting-save-banner')}}" method="post" enctype="multipart/form-data">
                                           {{ csrf_field() }}
                       
                       
                                        <div class="col-sm-12 mb-3 mt-4">
                                            <div class="input-group">
                                                
                                                <div class="alert alert-info" role="alert">
                                                     <h5 class="text-center">Nota: El tamaño de la imagen adecuado es 1920 X 1279 pixeles.</h5>
                                                </div>
                                                
                                                <div class="custom-file">
                                                   <input type="file" class="custom-file-input" name="banner">
                                                   <label class="custom-file-label">Seleccione el Banner del Login</label>
                                                </div>
                                            </div>
                                        </div>
                        
                                        <div class="row d-flex justify-content-center">
                                            <div class="col-md-6">
                                                <button type="submit" class="btn btn-info btn-block text-white">Aceptar</button>
                                            </div>
                                        </div>
                        
                                        </form>  
                                    </div>
                                </div>
                                
                                
                                
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <form class="" action="{{route('setting-save-banner-formulario')}}" method="post" enctype="multipart/form-data">
                                           {{ csrf_field() }}
                       
                       
                                        <div class="col-sm-12 mb-3 mt-4">
                                            <div class="input-group">
                                                
                                                <div class="alert alert-info" role="alert">
                                                     <h5 class="text-center">Nota: El tamaño de la imagen adecuado es 1440 X 810 pixeles.</h5>
                                                </div>
                                                
                                                <div class="custom-file">
                                                   <input type="file" class="custom-file-input" name="formulario">
                                                   <label class="custom-file-label">Seleccione el Banner del Formulario</label>
                                                </div>
                                            </div>
                                        </div>
                        
                                        <div class="row d-flex justify-content-center">
                                            <div class="col-md-6">
                                                <button type="submit" class="btn btn-info btn-block text-white">Aceptar</button>
                                            </div>
                                        </div>
                        
                                        </form>  
                                    </div>
                                </div>
                                 
                            </div>
                            
                            
                            <div class="d-flex justify-content-end">
                                <div class="col-md-3">
                                    <a class="btn btn-info btn-block text-white" href="{{ route('config-step1') }}">Siguiente</a>
                                </div>
                            </div>
                            
                        </div>
                        @elseif($step == 1)
                        <div class="col-md-12">
                            <div class="row">
                     
                                <div class="col-md-12">
                                     
                                     <h4>Configuración de Estructura </h4>
                                     
                                    <div class="alert alert-info" role="alert">
                                        <strong>¡Aviso!</strong> La Modificación de esta parte va a reiniciar todo el sistema, usarlo solamente para nuevas instalaciones
                                    </div>
                                </div>
                                
                                <div class="col-md-12">
                                    <form class="" action="{{route('setting-save-estructura')}}" method="post">
                                       {{ csrf_field() }}
                       
                                    <div class="row">
                                      
                                         @include('setting.estructura.modal.datos')
                                      
                                    </div>
                                  
                                    </form>
                                </div>    
                                
                            </div>
                            
                            
                            <div class="d-flex justify-content-end">
                                <div class="col-md-3">
                                    <a class="btn btn-danger btn-block text-white" href="{{ route('config-step0') }}">Regresar</a>
                                </div>
                                <div class="col-md-3">
                                    <a class="btn btn-info btn-block text-white" href="{{ route('config-step2') }}">Siguiente</a>
                                </div>
                            </div>
                            
                        </div>    
                        @elseif($step == 2)
                        <div class="col-md-12">
                            <div class="row">
                                
                                <div class="col-md-12">
                                    <h4>Configuración de Moneda </h4>
                                </div>
                                
                                <div class="col-md-12">
                                    @include('setting.moneda.modal.datos')
                                </div>    
                            
                            </div>   
                            
                            
                            <div class="d-flex justify-content-end mt-3">
                                <div class="col-md-3">
                                    <a class="btn btn-danger btn-block text-white" href="{{ route('config-step1') }}">Regresar</a>
                                </div>
                                <div class="col-md-3">
                                    <a class="btn btn-info btn-block text-white" href="{{ route('config-step3') }}">Siguiente</a>
                                </div>
                            </div>
                            
                        </div>
                        
                        @elseif($step == 3)
                        <div class="col-md-12">
                            <div class="row">
                                
                                <div class="col-md-12">
                                    <h4>Configuración de Comisiones </h4>
                                </div>
                                
                                
                                <div class="col-md-12 paso-uno">
                                    
                                    <div class="row">
                                        @include('setting.comisiones.componentes.cabecera')
                                    </div>    
                                    
                                    @include('setting.comisiones.componentes.informacion')
                                    
                                </div>
                                
                                <div class="col-md-12 paso-dos" style="display:none;">
                                    @include('setting.comisiones.componentes.formulario')
                                </div>
                            
                            </div>   
                            
                            
                            <div class="d-flex justify-content-end mt-3">
                                <div class="col-md-3">
                                    <a class="btn btn-danger btn-block text-white" href="{{ route('config-step2') }}">Regresar</a>
                                </div>
                                <div class="col-md-3">
                                    <a class="btn btn-info btn-block text-white" href="{{ route('config-finalizar') }}">Finalizar</a>
                                </div>
                            </div>
                            
                        </div>
                        @endif
                        
                           </div>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="form-group">
                                
                                   <h4>Lista de Configuración</h4>
                                
                                    <ul class="list-group">
                                    
                                        <li class="list-group-item mb-3 @if($step >= 0) cambio-lista @endif">
                                            <h5 class="text-center @if($step >= 0) text-white @endif"> 
                                               Sistema 
                                               
                                                @if($step >= 0)
                                                 <i class="fa-regular fa-circle-check text-success"></i> 
                                                @else
                                                 <i class="fa-regular fa-circle text-danger"></i>
                                                @endif
                                               
                                            </h5>
                                        </li>
                                
                                        <li class="list-group-item mb-3 @if($step >= 1) cambio-lista @endif">
                                            <h5 class="text-center @if($step >= 1) text-white @endif">
                                                Estructura
                                                
                                                @if($step >= 1)
                                                 <i class="fa-regular fa-circle-check text-success"></i> 
                                                @else
                                                 <i class="fa-regular fa-circle text-danger"></i>
                                                @endif
                                               
                                            </h5>
                                        </li>
                                
                                        <li class="list-group-item mb-3 @if($step >= 2) cambio-lista @endif">
                                            <h5 class="text-center @if($step >= 2) text-white @endif">
                                                Moneda
                                                
                                                @if($step >= 2)
                                                 <i class="fa-regular fa-circle-check text-success"></i> 
                                                @else
                                                 <i class="fa-regular fa-circle text-danger"></i>
                                                @endif
                                                
                                            </h5>
                                        </li>
                                
                                        <li class="list-group-item mb-3 @if($step >= 3) cambio-lista @endif">
                                            <h5 class="text-center @if($step >= 3) text-white @endif">
                                                Comisiones
                                                
                                                @if($step >= 3)
                                                 <i class="fa-regular fa-circle-check text-success"></i> 
                                                @else
                                                 <i class="fa-regular fa-circle text-danger"></i>
                                                @endif
                                                
                                            </h5>
                                        </li>
                                   
                                    </ul>
                                    
                                </div>    
                            </div>    
                        </div>
                        
                        <div class="card">
                            <div class="card-body">
                                <div class="form-group">
                                    
                                    <h4>Imagenes del Sistema</h4>
                                   
                                   
                                    <div class="input-group"> 
                                        <div class="alert alert-info" role="alert">
                                            <h5 class="text-center">Para poder ver el cambio de imagenes debe borrar la cache de su navegador.</h5>
                                        </div>
                                    </div>
                                    
                                    
                                    <div class="bootstrap-carousel">
                                        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                                            <div class="carousel-inner">
                                                
                                                <div class="carousel-item active">
                                                    <a data-fancybox data-src="{{asset('fondo/5.jpg')}}" data-caption="Logo">
                                                      <img class="d-block w-100" src="{{asset('fondo/5.jpg')}}" alt="Logo" style="height: 200px;">
                                                    </a>
                                                </div>
                                                
                                                <div class="carousel-item">
                                                    <a data-fancybox data-src="{{asset('favicon.png')}}" data-caption="Logo">
                                                      <img class="d-block w-100" src="{{asset('favicon.png')}}" alt="Favicon" style="height: 200px;">
                                                    </a>  
                                                </div>
                                                
                                                <div class="carousel-item">
                                                    <a data-fancybox data-src="{{ asset('assets/blanco.png') }}" data-caption="Logo">
                                                      <img class="d-block w-100" src="{{ asset('assets/blanco.png') }}" alt="Login banner" style="height: 200px;">
                                                    </a>   
                                                </div>
                                                
                                                <div class="carousel-item">
                                                    <a data-fancybox data-src="{{ asset('assets/formulario.png') }}" data-caption="Logo">
                                                      <img class="d-block w-100" src="{{ asset('assets/formulario.png') }}" alt="Registro Banner" style="height: 200px;">
                                                    </a>  
                                                </div>
                                                
                                            </div>
                             
                                            <a class="carousel-control-prev" href="#carouselExampleIndicators" data-slide="prev">
                                                <span class="carousel-control-prev-icon"></span> 
                                                <span class="sr-only">Previous</span> 
                                            </a>

                                            <a class="carousel-control-next" href="#carouselExampleIndicators" data-slide="next">
                                                <span class="carousel-control-next-icon"></span> 
                                                <span class="sr-only">Next</span>
                                            </a>

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


@include('setting.comisiones.modal.general') 
@include('setting.comisiones.modal.niveles') 
@include('setting.comisiones.modal.producto') 
@include('setting.comisiones.modal.categoria') 
@include('setting.comisiones.modal.nuevacomision') 
@include('setting.comisiones.modal.nivelesnuevo') 


@endsection

@include('usuario.componentes.scritpTable')

@push('script')
<script>
   
   //smartwizard
   $('#smartwizard').smartWizard({
        selected: '{{$step}}',
        theme: 'dots',
          
        toolbar: {
            position: 'bottom',
            showNextButton: false,
            showPreviousButton: false,
            extraHtml: ''
        },
            
        anchor: {
            enableDoneStateNavigation: false,
        },
    });
    
    
    //funcion de la estructura
    function estructuradetalle() {
       $(".matriz").hide(100)
       $(".ambas").hide(100)
       $(".matriz input").removeAttr('required')
       $(".ambas select").removeAttr('required')
       let estrutura = $("#tipoestrutura").val()
    
        if (estrutura == 'matriz') {
          $(".matriz").toggle(100)
          $(".matriz input").attr('required', 'true')
          $('.columna').attr('readonly', false);
        }else if (estrutura == 'binaria') {
          $(".matriz").toggle(100)
          $(".matriz input").attr('required', 'true')
          $(".matriz input").val(2);
          $(".matriz input").attr('readonly', 'true');
        } else if (estrutura == 'ambas') {
          $(".matriz").toggle(100)
          $(".matriz input").attr('required', 'true')
          $(".ambas").toggle(100)
          $(".ambas select").attr('required', 'true')
        }
    }
    
    
    //funcion de las monedas
    function actualizarMoneda(id, nombre, simbolo, mostrar){
      $('.id').val(id);
      $('.nombre').val(nombre);
      $('.simbolo').val(simbolo);
      $('.mostrar').val(mostrar);
    }
    
    
    //funciones de las comisiones
    function eliminar(ID){
        Swal.fire({
           title: 'Está seguro de realizar esta acción, al dar clic es irreversible recuperar la información.',
           type:'warning',
           showCancelButton: true,
           confirmButtonColor: '#3085d6',
           cancelButtonColor: '#d33',
           confirmButtonText: 'Si',
           cancelButtonText: 'No',
        }).then((result) => {
            if (result.value) {
              window.location.href = 'eliminar/comision/'+ID;
            }
        });
    }
    

  function actualizarGeneral(id, nivel, monto){
      $('.id').val(id);
      $('.nivel').val(nivel);
      $('.monto').val(monto);
  }
   
  
  function actualizarNiveles(id, nivel, monto, rango){
      $('.id').val(id);
      $('.nivel').val(nivel);
      $('.monto').val(monto);
      $('.rango').val(rango);
  }
  
  
  function actualizarCategoria(id, nivel, monto, idcategoria){
      $('.id').val(id);
      $('.nivel').val(nivel);
      $('.monto').val(monto);
      $('.idcategoria').val(idcategoria);
  }
  
  function actualizarProducto(id, nivel, monto, idproducto){
      $('.id').val(id);
      $('.nivel').val(nivel);
      $('.monto').val(monto);
      $('.idproducto').val(idproducto);
  }
  
  
  var rangos = null
  var productos = null
  var categorias = null
  $(document).ready(function () {
      
    $.get('getrangosall', function (response) {
      rangos = JSON.parse(response)
    })
    
    $.get('getproductosall', function (response) {
      productos = JSON.parse(response)
    })
    
    $.get('getcategoriasall', function (response) {
      categorias = JSON.parse(response)
    })
    
  })


  function toggle() {
    $('.paso-uno').toggle('slow')
    $('.paso-dos').toggle('slow')
  }
  
  // detalles de la comisiones
  function comisiondetalle() {
    $('#valor').empty()
    $('#valor2').empty()
    let tipoComision = $('#tipocomision').val()
    let niveles = $('#niveles').val()
    if (tipoComision == 'general') {
      $('#valor').append(
            '<div class="col-sm-6">'+
               '<div class="form-group">'+
                  '<label for="">Valor de Comision</label>' +
                  '<input type="number" step="any" class="form-control" name="valorgeneral">'+
                '</div>'+  
            '</div>' 
      )
    } else if (tipoComision == 'detallado') {
      for (var i = 0; i < niveles; i++) {
        $('#valor').append(
            '<div class="col-sm-6">'+
               '<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') {
        
        $('#valor2').append(
            '<div class="col-sm-12">'+
                '<div class="form-group">'+
                   '<div class="alert alert-info" role="alert">' +
                     '<h4> <b>Nota:</b> Si el valor en un nivel es 0, ese nivel no se cobrara</h4>' +
                    '</div>'+
                '</div>'+  
          '</div>'
        )
        
        let comision = ''
        categorias.forEach(item => {
          for (var i = 0; i < niveles; i++) {
            comision = comision + '<div class="col-sm-6">' +
                '<div class="form-group">'+
                   '<label for="">Comision para el nivel: ' + (i + 1) + '</label>' +
                   '<input type="number" class="form-control" step="any" required min="0" name="idcategoria' + item.term_id +
              '_' + (i + 1) + '">' +
                 '</div>'+
              '</div>'
          }
          $('#valor2').append(
              '<div class="col-sm-12">' +
                '<div class="form-group">'+
                    '<h4 class="col-xs-12"> Configuracion de la Categoria - : ' + item.name + ' </h4>' +
                '</div>'+
            '</div>'+    
            comision
          )
          comision = ''
        })
        
      
    }else if(tipoComision == 'niveles'){
        
        let comision = ''
        for (let i = 0; i < niveles; i++) {

          rangos.forEach(item => {
              $('#valor2').append(
            '<div class="col-md-6">' +
               '<div class="form-group">'+
                   '<label for="">Comision para el rango: ' + item.name + ' Nivel ' + (i + 1) + '</label>' +
                   '<input type="number" class="form-control" step="any" required min="0" name="nivel' + item.id +
              '_' + (i + 1) + '">' +
                 '</div>'+
              '</div>'
              )
          });
        }
        
    
    } else if (tipoComision == 'producto') {
      if (productos.length <= 0) {
        $('#valor2').append(
            '<div class="col-sm-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-sm-12">'+
                '<div class="form-group">'+
                   '<div class="alert alert-info" role="alert">' +
                     '<h4> <b>Nota:</b> Si el valor en un nivel es 0, ese nivel no se cobrara</h4>' +
                    '</div>'+
                '</div>'+  
          '</div>'
        )
        let comision = ''
        productos.forEach(item => {
          for (var i = 0; i < niveles; i++) {
            comision = comision + '<div class="col-sm-6">' +
                '<div class="form-group">'+
                   '<label for="">Comision para el nivel: ' + (i + 1) + '</label>' +
                   '<input type="number" class="form-control" step="any" required min="0" name="idproducto' + item.ID +
              '_' + (i + 1) + '">' +
                 '</div>'+
              '</div>'
          }
          $('#valor2').append(
              '<div class="col-sm-12">' +
                '<div class="form-group">'+
                    '<h4 class="col-xs-12"> Configuracion del Producto - ID: ' + item.ID + ' </h4>' +
                '</div>'+
            '</div>'+    
            comision
          )
          comision = ''
        })
      }
    }
  }
    
</script>
@endpush