@extends('app')

@section('content')
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">

<div class="container-fluid">
  @if (count($errors) > 0)
  <div class="alert alert-danger">
    <p>Corrige los siguientes errores:</p>
    <ul>
      @foreach ($errors->all() as $message)
      <li>{{ $message }}</li>
      @endforeach
    </ul>
  </div>
  @endif
  <div class="row">
    <div class="col-sm-6">
      <h1 class="dashboard-heading">
        Stock
      </h1>
      <h2 class="dashboard-heading">
        Incentivos
      </h2>
    </div>
    @if ($incentives_montos->count() > 0)
    <div class="col-sm-6 text-right">
      <button type="button" class="btn btn-primary btn-header" data-toggle="modal" data-target="#pay-manual">
        Asignaciones <i class="fa fa-check" aria-hidden="true"></i>
      </button>
    </div>
    @else
        @endif
  </div>
  @if ($incentives_montos->count() > 0)
  <div class="">
    <table class="table table-striped big-table table_gas table-hover purseIncentivosDatatable">
        <thead>
          <tr>
            <th>NOMBRE DEL TRABAJADOR</th>
            <th>ID TGS SI VALE</th>
            <th>IDENTIFICADOR</th>
            <th>NO. TARJETA</th>
            <th>CONCEPTO</th>
            <th>REGIONES</th>
            <th>ESTATUS</th>
            <th>FECHA DE ENVIO</th>
            <th>MONTO DE FONDEO</th>
            <th>FECHA DE FONDEO</th>
            <th>NOMBRE EMPLEADO</th>
            <th>MES</th>
            <th>AÑO</th>
          </tr>
        </thead>
<!--         <tfoot>
          <th>NOMBRE DEL TRABAJADOR</th>
            <th>ID TGS SI VALE</th>
            <th>IDENTIFICADOR</th>
            <th>NO. TARJETA</th>
            <th>CONCEPTO</th>
            <th>REGIONES</th>
            <th>ESTATUS</th>
            <th>FECHA DE ENVIO</th>
            <th>MONTO DE FONDEO</th>
            <th>FECHA DE FONDEO</th>
            <th>NOMBRE EMPLEADO</th>
            <th>MES</th>
            <th>AÑO</th>
          </tr>
        </tfoot> -->
      </table>
  </div>
  @else
  <div class="alert alert-info">
    No hay registros que mostrar
  </div>
  @endif
</div>

@endsection

@section('modals')
<div class="modal fade" id="pay-manual" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Empieza Formulario --> 
      {!! Form::open(array('action'=>"Charges\IncentivosChargesController@fondeo")) !!}
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Asignaciones</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              {!! Form::label('no_tarjeta', 'NO. TARJETA:')!!}
              <select class="form-control" name="no_tarjeta" id="tarjetas_update" required="true">
                @foreach($tarjetas as $tarjeta)
                <option value="{{$tarjeta->no_tarjeta}}">{{$tarjeta->no_tarjeta}}</option>
                @endforeach
              </select>
            </div>
          </div>
        </div>
        <div class="row">
         <div class="col-md-6">
          <div class="form-group">
            {!! Form::label('nombre_trabajador_fondeo', 'NOMBRE DEL TRABAJADOR:')!!}
            {!! Form::text('nombre_trabajador_fondeo', null, ['class' => 'form-control', 'required' => 'required']) !!}
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            {!! Form::label('identificador', 'IDENTIFICADOR:')!!}
            {!! Form::text('identificador', null, ['class' => 'form-control','readonly' => 'readonly', 'required' => 'required']) !!}
          </div>
        </div>
      </div>
      <div class="row">
       <div class="col-md-6">
        <div class="form-group">
          {!! Form::label('id_tgs_si_vale', 'ID TGS SI VALE:')!!}
          {!! Form::text('id_tgs_si_vale', null, ['class' => 'form-control','readonly' => 'readonly', 'required' => 'required']) !!}
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          {!! Form::label('region_de_fondeo', 'REGIÓN:')!!}
          {!! Form::select('region_de_fondeo', ['Corporativo Call Center' => 'Corporativo Call Center', 'Corporativo Asesores' => 'Corporativo Asesores','Corporativo'=>'Corporativo','Metro Sur'=>'Metro Sur','Metro Norte'=>'Metro Norte','Norte'=>'Norte','Noreste'=>'Noreste','Noroeste'=>'Noroeste','Centro'=>'Centro','Sur'=>'Sur','Sureste'=>'Sureste','Occidente'=>'Occidente','Sin Región'=>'Sin Región'], 'Sin Región',['class' => 'form-control'])!!}
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          {!! Form::label('monto_de_fondeo', 'MONTO DE FONDEO:')!!}
          <div class="input-group">
            <div class="input-group-addon">$</div>
            <!-- {!! Form::text('monto_de_fondeo', null, ['class' => 'form-control','clevar']) !!} -->
            <input type="text" name="monto_de_fondeo" class="form-control clevar" required="true" >
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          {!! Form::label('fecha_de_envio', 'FECHA DE ENVIO', ['class' => 'control-label']) !!}
          {!! Form::date('fecha_de_envio', Carbon\Carbon::today()->format('Y-m-d'), ['class' => 'form-control', 'required' => 'required', 'autofocus' => 'autofocus']) !!}
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          {!! Form::label('fecha_de_fondeo', 'FECHA DE ENVIO', ['class' => 'control-label']) !!}
          {!! Form::date('fecha_de_fondeo', Carbon\Carbon::today()->format('Y-m-d'), ['class' => 'form-control', 'required' => 'required', 'autofocus' => 'autofocus']) !!}
        </div>
      </div>
    </div>
    <input type="hidden" id="id" name="id">
  </div>
  <div class="modal-footer">
    <button class="btn btn-default" data-dismiss="modal">Cancelar</button>
    <button class="btn btn-primary" type="submit">Enviar</button>
  </div>
</div>
<!-- Termina Formulario -->
{!! Form::close() !!}
<!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="charger-manual" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Empieza Formulario --> 
      {!! Form::open(array('action' => "Charges\IncentivosChargesController@store")) !!}
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Asignaciones*</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <div class="form-group" style="text-align: center;">
              <label>Monederos Disponibles:
                <span style="color: #666;">{{$monederos_disp}}</span>
              </label>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
           <div class="form-group">
             {!! Form::label('num_monederos', 'Monederos por Asignar:')!!}
             {!! Form::number('num_monederos', null, ['class' => 'form-control','min'=>1,'max'=>$monederos_disp]) !!}
           </div>
         </div>
         <div class="col-md-6">
          <div class="form-group">
            {!! Form::label('nombre_trabajador', 'NOMBRE DEL TRABAJADOR:')!!}
            {!! Form::text('nombre_trabajador', 'Sin Información', ['class' => 'form-control','placeholder'=>'Sin Información']) !!}
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            {!! Form::label('monto_de_fondeo', 'MONTO DE FONDEO:')!!}
            <div class="input-group">
              <div class="input-group-addon">$</div>
              <!-- {!! Form::text('monto_de_fondeo', null, ['class' => 'form-control','clevar']) !!} -->
              <input type="text" name="monto_de_fondeo" class="clevar form-control">
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            {!! Form::label('fecha_de_fondeo', 'FECHA DE FONDEO', ['class' => 'control-label']) !!}
            {!! Form::date('fecha_de_fondeo', Carbon\Carbon::today()->format('Y-m-d'), ['class' => 'form-control', 'required' => 'required', 'autofocus' => 'autofocus']) !!}
          </div>
        </div>
      </div>
      <div class="row">
       <div class="col-md-6">
        <div class="form-group">
          {!! Form::label('region', 'REGIÓN:')!!}
          {!! Form::select('region', ['Corporativo Call Center' => 'Corporativo Call Center', 'Corporativo Asesores' => 'Corporativo Asesores','Corporativo'=>'Corporativo','Metro Sur'=>'Metro Sur','Metro Norte'=>'Metro Norte','Norte'=>'Norte','Noreste'=>'Noreste','Noroeste'=>'Noroeste','Centro'=>'Centro','Sur'=>'Sur','Sureste'=>'Sureste','Occidente'=>'Occidente','Sin Región'=>'Sin Región'], 'Sin Región',['class' => 'form-control'])!!}
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          {!! Form::label('fecha_de_envio', 'FECHA DE ENVIO', ['class' => 'control-label']) !!}
          {!! Form::date('fecha_de_envio', Carbon\Carbon::today()->format('Y-m-d'), ['class' => 'form-control', 'required' => 'required', 'autofocus' => 'autofocus']) !!}
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button class="btn btn-default" data-dismiss="modal">Cancelar</button>
    <button class="btn btn-primary" type="submit">Enviar</button>
  </div>
</div>
<!-- Termina Formulario -->
{!! Form::close() !!}
<!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="charger-excel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Carga de Archivo excel</h4>
      </div>
      <div class="panel-body">

        <!-- Standar Form -->
        <h4>Selecciona los archivos a subir con extensión .xlsx</h4>
        <form action="ImportPurseIncentive" method="post" enctype="multipart/form-data" id="js-upload-form">
          <div class="form-inline">
            <div class="form-group">
              <input type="file" name="file" id="js-upload-files">
              <input type="hidden" value="{{ csrf_token() }}" name="_token">
            </div>
            <!--             <button type="submit" class="btn btn-sm btn-primary" value="Upload" id="js-upload-submit">Cargar archivo</button> -->
          </div>
          <hr>
          <div class="form-group">
            <label>Sin Asignar</label>
            <input type="checkbox" name="asignado" value="true">
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" data-dismiss="modal">Cancelar</button>
          <button type="submit" class="btn btn-sm btn-primary" value="Upload" id="js-upload-submit">Cargar archivo</button>
        </div>
      </form>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
@endsection


@section('script')
<script>
  $(function() {
    var tarjeta;
    $('[name=no_tarjeta]').change(function() {
      tarjeta = $('#tarjetas_update').val();
      axios.get('/fondeo_tarjetas_incentivos', {
        params: {
          tarjeta: tarjeta
        }
      })
      .then(function (response) {
        console.log(response.data);
        $('[name=nombre_trabajador_fondeo]').val(response.data.nombre_trabajador);    
        $('[name=identificador]').val(response.data.identificador);
        $('[name=id_tgs_si_vale]').val(response.data.id_tgs_si_vale);
        $('[name=id]').val(response.data.id);
        $('[name=region_fondeo]').val(response.data.region);
      })
      .catch(function (error) {
        console.log(error);
      });
    });

  });
</script>
<script type="text/javascript">
  $('.clevar').each(function (i, v) {
    new Cleave(v, {
      numeral: true,
      numeralThousandsGroupStyle: 'thousand'
    });
  });

</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script>
      $(document).ready(function(){
          $('#tarjetas_update').select2();
       });
    </script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js">    
  </script>
<script type="text/javascript">
$(document).ready(function() {
    /* Inicializar el dataTable con los datos de los usuarios */
      $(".purseIncentivosDatatable").DataTable({
        language: {
              "sProcessing":    "Procesando...",
              "sLengthMenu":    "Mostrar _MENU_ registros",
              "sZeroRecords":   "No se encontraron resultados",
              "sEmptyTable":    "Ningún dato disponible en esta tabla",
              "sInfo":          "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
              "sInfoEmpty":     "Mostrando registros del 0 al 0 de un total de 0 registros",
              "sInfoFiltered":  "(filtrado de un total de _MAX_ registros)",
              "sInfoPostFix":   "",
              "sSearch":        "Buscar:",
              "sUrl":           "",
              "sInfoThousands":  ",",
              "sLoadingRecords": "Cargando...",
              "oPaginate": {
                  "sFirst":    "Primero",
                  "sLast":    "Último",
                  "sNext":    "Siguiente",
                  "sPrevious": "Anterior"
              },
              "oAria": {
                  "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                  "sSortDescending": ": Activar para ordenar la columna de manera descendente"
              }
          },
        iDisplayLength: 25,
        processing: true,
        serverSide: true,
        ajax: "{{ url('getPurseIncentives') }}",
        columns: [
            {data: 'nombre_trabajador', name: 'nombre_trabajador'},
            {data: 'id_tgs_si_vale', name: 'id_tgs_si_vale'},
            {data: 'identificador', name: 'identificador'},
            {data: 'no_tarjeta', name: 'no_tarjeta'},
            {data: 'concepto', name: 'concepto'},
            {data: 'region', name: 'region'},
            {data: 'estatus', name: 'estatus'},
            {data: 'fecha_de_envio', name: 'fecha_de_envio'},
            {data: 'monto_de_fondeo', name: 'monto_de_fondeo'},
            {data: 'fecha_de_fondeo', name: 'fecha_de_fondeo'},
            {data: 'empleado', name: 'empleado'},
            {data: 'month', name: 'month'},
            {data: 'year', name: 'year'},
        ]
      });

});
</script>

@endsection