@extends('admin::curd.index')
@section('heading')
@stop

@section('title')
 <img src="{!!URL::to('img/report/analytics.png')!!}"> &nbsp;{!! ucwords('Reports') !!}
@stop

@section('breadcrumb')
@stop

@section('entry')

@stop

@section('tools')
@stop


@section('content')
  <div class="box-body" >
    <div class="nav-tabs-custom">
      
       <ul class="nav nav-tabs primary">
        
       
        <li class="active"><a href="" class="active">   {!! trans('user_training::user_training.name') !!}  Details</a></li>
      </ul>

      <div class="tab-content">
  
      <div class="tab-pane active clearfix" id="details">


        {!!Form::horizondal_open()
          ->id('usertrainingreportform')
          ->secure()
          ->method('POST')
          ->files('true')
          ->enctype('multipart/form-data') !!}
          
          <div class="col-md-5 col-lg-5">
              {{-- {!! Form::select('search[company_id]')
              -> id('company_id')
              -> label('Company')
              -> addGroupClass('form-group-sm')   
              -> options(Company::companies())
              -> placeholder('select')
              !!} --}}
              
              {!! Form::select('search[category_id]')
              -> options(Category::allCategories())
              ->id('category_id')
              -> addGroupClass('form-group-sm')
              -> label('Equipment Category')
              -> placeholder('Equipment Category')
              !!}
              
              {!! Form::select('search[subcategory_id]')
              ->id('subcategory_id')
              -> options(array())
              -> addGroupClass('form-group-sm')
              -> label('Subcategory')
              -> placeholder('Subcategory')
              !!}
             
              {!! Form::select('search[asset_id]')
              -> options([])
              ->id('asset_id')
              -> addGroupClass('form-group-sm')
              -> label('Equipment ID')
              -> placeholder('select Equipment ID ')
             !!}

              {!! Form::select('search[type]')        
              -> options(trans('user_training::user_training.options.type'))
              -> label(trans('Type'))
              ->id('type')
              -> required()
              -> placeholder('Please select type')
              -> addGroupClass('form-group-sm')
              !!}
              
              {!! Form::text('search[trainer_name]')             
              -> placeholder('Trainer Name')
              ->label(trans('Trainer Name'))
              ->addGroupClass('form-group-sm') !!}
           
            </div> 

            <div class="col-md-5 col-lg-5">
            
              {!! Form::select('search[attendees]')->id('attendees')->options(Company::allUsers())->label('invited')->addGroupClass('form-group-sm') !!}
              {!! Form::select('search[attended_by]')->id('attended_by')->options(Company::allUsers())->label('Attended By')->addGroupClass('form-group-sm') !!}

              <div class="form-group form-group-sm">
                <label for="primary_view" class="control-label col-lg-3 col-md-6 col-sm-6"> 
                 From Date
                </label>
                <div class="col-lg-4 col-md-2 col-sm-6 p-b-10">

              {{-- {!! Form::date('search[created_at][0]')
              -> id('date_from')
              -> addGroupClass('form-group-sm')
              -> placeholder('Date')
              -> label('From Date')->raw()!!} --}}

              {!! Form::date('search[training_date][0]')
              -> id('date_from')
              -> addGroupClass('form-group-sm')
              ->addClass('datepick')
              -> placeholder('Date')
              -> label('From Date')->raw()!!}
                </div>
                <label for="primary_view" class="control-label col-lg-1 col-md-2 col-sm-6"> 
                 To Date
                </label>
                <div class="col-lg-4 col-md-2 col-sm-6 m-l-0">
                  {{-- {!! Form::date('search[created_at][1]')
                  -> id('date_to')
                  -> addGroupClass('form-group-sm')
                  -> placeholder('To Date')
                  -> label('To Date')->raw()
                  ->addClass('date_to')!!} --}}

                  {!! Form::date('search[training_date][1]')
                  -> id('date_to')
                  -> addGroupClass('form-group-sm')
                  ->addClass('datepick')
                  -> placeholder('To Date')
                  -> label('To Date')->raw()
                  ->addClass('date_to')!!}
                </div>
              </div>
              </div>  
              
            <div class="col-md-2 col-lg-2">
              <div class="m-b-20">
                <img src="{!!URL::to('img/report/order.png')!!}">&nbsp;
                <a  id="download_report"  class="headpicture" href="#">Download Report</a>
              </div>
                <div class="m-b-20">
                  <i class="fa fa-file-excel-o" style="color:#000;"></i>&nbsp;
                  <a  id="download_csv"  class="headpicture" href="#">Download Csv</a>
                </div>
                 <div class="m-b-20">
                    <i class="fa fa-refresh" style="color:#000;"></i>&nbsp;
                    <a  id="resetnow" class="headpicture" style="cursor:pointer;">Reset Filter</a>
                </div>
            </div>
           </div>
           </div>
             <div class="col-md-10 col-lg-10">            
                <button type="button" id="gobutton" class="btn btn-success btn-sm" style="width:100%">Go</button>
            </div> 
            {!!Form::close()!!}
        </div>
      </div>
    </div>
  </div>

  <div class="nav-tabs-custom">
    <ul class="nav nav-tabs primary">
      <li class="active"><a href="#tab-full-data" data-toggle="tab">Full Data Set</a></li>
    </ul>
    
    <div class="tab-content table-responsive">
        <div class="tab-pane " id="tab-graph">
          <div class="table-wrapper" style="margin-left: auto; margin-right: auto;overflow-x: auto;">
            <table width="100%"  align="center" cellpadding="0" cellspacing="0" id="table_1" class="form_table table table-striped">
              <tr>
                <td colspan="2">
                  <table width="100%" bgcolor="#FFF" border="0" cellpadding="0" cellspacing="0" style="padding:8px 0 0 0;">
                    <tr>
          
                    </tr>
                    <tr>
                      
                    </tr>
                    <tr>
                      <td height="10" class="form_fields_table">&nbsp;</td>
                      <td width="15%" height="10" colspan="-4" class="form_fields_table">&nbsp;</td>
                      <td width="71%" height="10" colspan="-4" class="form_fields_table">&nbsp;</td>
                    </tr>
                    <tr>
                      <td colspan="3" class="form_fields_table" style="padding:10px;"> <div id="chart_span" style="min-width: 400px; height: 350px; margin: 0 auto"></div></td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div class="tab-pane" id="tab-summary">
          <div class="table-wrapper" style="margin-left: auto; margin-right: auto;overflow-x: auto;">
            <table width="100%" id="data_summary" border="0" align="center" class="table table-striped display datatable data-table" cellpadding="0" cellspacing="0">
            </table>
          </div>
        </div>
        <div class="tab-pane active" id="tab-full-data">
          <table id="full_listings" class="table table-striped data-table" width="100%">
              <thead  class="list_head">
              
                  <th >Ref No</th>
                  <th>Date</th>
                  <th>Type</th>
                  <th>Equipment Category</th>
                  <th>Subcategory</th>
                  <th>Equipment ID</th>
                  <th>Trainer Name</th>
                  <th>Invited</th>
                  <th>Attended By</th>
                  <th>Training Date</th>
                  <th>Start Time </th>
                  <th>End Time </th>
                  <th>Description</th>
                </thead>
              
          </table>
        </div>
    </div>
</div>

<div class="modal fade" id="save-report">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 class="modal-title">Save Report</h3>
        <div class="popup_description">Type the name and save report for future use.</div>
      </div>
      <div class="modal-body" style="height:110px;">
        <div class="form-horizontal">

            <div class="col-md-12 col-lg-12 m-t-20">
              {!!Form::horizontal_open()
              ->id('report_save')
              ->method('POST')
              ->files('true')
              ->action(trans_url('admin/save_report'))!!}

                {!! Form::hidden('screen')
                   -> forceValue('user_training/training')!!}

                {!! Form::text('name')
                 -> placeholder('Enter Name')
                 -> label('Report Name')
                 -> required()!!}

              {!!Form::close()!!}  
            </div>
        </div>
        <div id="resultofsave" class="searchoptiontext"> </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="save-repot" name="Saverep" value="Send" data-dismiss="modal">Save</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="show_report">
  <div class="modal-dialog">
    <div class="modal-content" style="max-width:400px;">
      <div class="modal-header header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Recent Saved Searches</h4>
      </div>
      <div class="modal-body" style="height:210px; overflow-y: auto;">
       
        <div id="saved-reports"></div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary"  name="Closerep" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

@stop
<style>
    .select2-container {
        width: 100% !important;
    }

    label.radio-inline {
        font-size: 12px;
    }

</style>

<script type="text/javascript">

var chart;


 $(document).ready(function () {
   
   $('#resetnow').click(function(){
      $("input[name='search[training_date][0]']").val('');
      $("input[name='search[training_date][1]']").val('');
      $('#usertrainingreportform')[0].reset();
      $('#group_by_label').html('');
      $("#asset_id").empty();
      $("#attendees").val(null).trigger('change');
      $("#attended_by").val(null).trigger('change');
      oTable.api().draw();
    });

    $('#attendees').val({!! @json_encode($user_training->attendees) !!}).trigger('change');
         $('#attended_by').val({!! @json_encode($user_training->attended_by) !!}).trigger('change');

    $('#download_report').click(function(){
      var filter = $("#usertrainingreportform").serialize();
      $('#download_report').attr('href',"{{URL::to('admin/user_training/training/report/graph/pdf')}}"+ "/" + filter);
      $('#download_report').attr("target", "_blank");
    });

    $('#download_csv').click(function(){
      var filter = $("#usertrainingreportform").serialize();
      $('#download_csv').attr('href',"{{URL::to('admin/user_training/training/report/graph/csv')}}"+ "/" + filter);
      $('#download_csv').attr("target", "_blank");
    });


    $('input[id=date_from]').change(function() {  
    $("#date_to").pickadate('picker').set({ select:$('input[id=date_from]').val(), min: new Date($('input[id=date_from]').val())});
    });
    



   oTable = $('#full_listings').dataTable( {
        "bProcessing": true,
        "sDom": 'R<>rt<ilp><"clear">',
        "bServerSide": true,
        "sAjaxSource": '{!!trans_url("admin")!!}/user_training/training/report',
        "fnServerData" : function ( sSource, aoData, fnCallback ) {

            $('#full_listings .search_bar input, #full_listings .search_bar select').each(
                function(){
                    aoData.push( { 'name' : $(this).attr('name'), 'value' : $(this).val() } );
                }
            );
            $('#usertrainingreportform select, #usertrainingreportform input').each(
                function(){
                    if ($(this).val() == null || $(this).val() == '') {
                      return;
                    }

                    aoData.push( { 'name' : $(this).attr('name'), 'value' : $(this).val() } );
                }
            );
            app.dataTable(aoData);
            $.ajax({
                'dataType'  : 'json',
                'data'      : aoData,
                'type'      : 'GET',
                'url'       : sSource,
                'success'   : fnCallback
            });
        },

        "columns": [
                      {data :'ref'},
                      {data :'created_at'},            
                      {data :'type'},            
                      {data :'category_id'},
                      {data :'subcategory_id'},
                      {data :'asset_id'},
                      {data :'trainer_name'},
                      {data :'attendees'},
                      {data :'attended_by'},
                      {data :'training_date'},           
                      {data :'start_time'},           
                      {data :'end_time'},           
                      {data :'description'},                              
                ],  
                
                "order": [[1, 'desc']],
          
        "pageLength": 25
    });

    
    $(document.body).on('click', "#gobutton", function (e) {
      if($('#date_to').val()!= '') {
                var from= $("#date_from").val();
                var to= $("#date_to").val();
                var fromdate  = new Date(from);
                var todate  = new Date(to);                
                if (todate < fromdate){
                    $("#date_to").addClass("error");
                    toastr.error('Check the date range', 'Error');
                    return false;
                }
         }

        e.preventDefault();
        var filter = $("#usertrainingreportform").serialize();        
        var filter_label = '';
        var comma = '';
        $("#usertrainingreportform select, #usertrainingreportform input").each(function () {
            if ($(this).val() != '' || $(this).val() != null ) {
                filter_label += comma + ' ' + $('#' + $(this).attr('id') + ' :selected').text();
                comma = ',';
            }
        });

        $('#full_listings .search_bar').find("."+$(this).attr('id')).prop('disabled',true);
        oTable.api().draw();
    });

    $(".datepick").pickadate({
        format: 'dd mmm, yyyy',
        formatSubmit: 'yyyy-mm-dd',
        hiddenSuffix: '',
        selectMonths: true,
        selectYears: true
    }).prop('type','text');

    $("#attendees").select2({
         placeholder: "Enter attendees name"
     });

     $("#attended_by").select2({
         placeholder: "Enter attendees name"
     });
    
    $("#asset_id").select2({
    // minimumInputLength: 3,
      ajax: {
        url: "{{ trans_url('admin/assets/select2/assetsfortransfer') }}",
        dataType: 'json',
        delay: 250,
        data: function (params) {
          return {
            q: params.term, // search term
            subcategory_id: $("#subcategory_id").val(),
            category_id: $("#category_id").val(),
            page: params.page
          };
        },
        processResults: function (data, params) {

          params.page = params.page || 1;
          return {
            results: data.items,
              pagination: {
                more: (params.page * 30) < data.total_count
              }
          };
        },
        cache: true
      },
    escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
    
    templateResult: formatRepo, // omitted for brevity, see the source of this page
    templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
  });


  function formatRepo (repo) {
    if (repo.loading) return repo.name;
    var markup = "<div class='select2-result-repository clearfix'>" +
    "<div class='select2-result'><span>"+repo.rfc + "-&nbsp;"+repo.name+"&nbsp;"+repo.bar_code+"</span></div>";

    return markup;
  }

  function formatRepoSelection (repo) {
    return repo.name;
  }

    $("#category_id").change(function(){		
    var category = $("#category_id option:selected").val();
    $("#subcategory_id").load('{{URL::to("admin/category/all/subcategory")}}'+'/'+category);
    });    

    $("#subcategory_id").change(function(){
            var subcategory = $("#subcategory_id option:selected").val();           
            $("#subclass_id").load('{{URL::to('admin/category/subclass')}}'+'/'+subcategory);
    }); 
});

</script>

<style type="text/css">
.header{
        background: #3c8dbc;
        color: white;
    }
</style>