@extends('app')


@section('content')
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
<div class="container-fluid">
	<div class="row">
		<div class="col-md-6">
			<h1 class="dashboard-heading">
				Reportes
			</h1>
			<h2 class="dashboard-heading">
				Incentivos
			</h2>
		</div>
		@if ($incentives_montos->count() > 0)
		<div class="col-md-6 text-right" style="padding-top: 29px">
			{!! Form::open(['method' => 'POST','url' => url('excelincentivos') ]) !!}
			<div class="form-group">
				<button class="btn btn-primary export-button" type="submit">
					Exportar Reporte <i class="fas fa-file-alt"></i>
				</button>
			</div>
			<div class="form-group">
				<button class="btn btn-primary ver-detalle-incentivos" type="button">
					Detalle 
				</button>
			</div>

			<input type="hidden" name="report" value='{!! json_encode($incentives_montos->toArray()) !!}'>
			{!! Form::close() !!}
		</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>
			</table>
		</div>
		@else
		<div class="alert alert-info">
			No hay registros que mostrar
		</div>
		@endif
	</div>

	@endsection
@section('modals')

<div class="modal fade" id="detalle-incentivos-modal" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="exampleModalLabel">Detalle Incentivos</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

@endsection

@section('script')
<script>
	$('body').on('click', '.ver-detalle-incentivos', function(object){
    $("#detalle-incentivos-modal").modal();

    $("#detalle-incentivos-modal .modal-body").empty()

      axios.get('/get-incentivos-detail', {
      }).then(function (response) {
        var data = response.data;
        var monto1 = numeral(data.monto1).format('$0,0.00');
        var monto2 = numeral(data.monto2).format('$0,0.00');
        var montototal = numeral(data.monto1+data.monto2).format('$0,0.00');
        var tarjetastotal = data.tarjetas1+data.tarjetas2;
         $("#detalle-incentivos-modal .modal-body").append(`
            <table class="table"> <thead>
                <tr>
                  <th scope="col">Región</th>
                  <th scope="col">Tarjetas</th>
                  <th scope="col">Monto</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>`+ data.region1+`</td>
                  <td>`+ data.tarjetas1+`</td>
                  <td><span>`+ monto1+`</span></td>
                </tr>
                <tr>
                  <td>`+ data.region2+`</td>
                  <td>`+ data.tarjetas2+`</td>
                  <td><span>`+ monto2+`</span></td>
                </tr>
                <tr>
                  <th scope="row"><span>Total General</span></th>
                  <td><span>`+ tarjetastotal+`</span></td>
                  <td><span>`+ montototal+`</span></td>
                </tr>
              </tbody>
            </table>

          `)

      }).catch(function (error) {
        console.log("error getting incentivos detail",error)
      });
    
    //$($(this).data("target")).modal("show"); 
  });
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></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'},
        ]
     //    createdRow : function( row, data, dataIndex ) {
     //         if ( row[0] == null ) 
     //         {        
     //     $(row).css("color", "red");
     //          }
     //          $(row).css("color", "red");
     // }
      });

});
</script>


@endsection