@extends('layouts.admin')
@section('content')
@can('time_entry_create')
    <div style="margin-bottom: 10px;" class="row">
        <div class="col-lg-12">
            <a class="btn btn-success" href="{{ route("admin.time-entries.create") }}">
                {{ trans('global.add') }} {{ trans('cruds.timeEntry.title_singular') }}
            </a>
        </div>
    </div>
@endcan
<div class="card">
    <div class="card-header">
        {{ trans('cruds.timeEntry.title_singular') }} {{ trans('global.list') }}
    </div>

    <div class="card-body">
        <div class="table-responsive">
            <table class=" table table-bordered table-striped table-hover ajaxTable datatable datatable-TimeEntry">
                <thead>
                    <tr>
                        <th width="10">

                        </th>
                        <th width="10">

                        </th>
                        <th>
                            {{ trans('cruds.timeEntry.fields.id') }}
                        </th>
                        {{-- <th>
                            {{ trans('cruds.timeEntry.fields.available_store') }}
                        </th> --}}
                        <th>
                            {{ trans('cruds.timeEntry.fields.ptl_no') }}
                        </th>
                        <th>
                            {{ trans('cruds.timeEntry.fields.promoter') }}
                        </th>
                        <th>
                            {{ trans('cruds.timeEntry.fields.date') }}
                        </th>
                        <th>
                            {{ trans('cruds.timeEntry.fields.time_start') }}
                        </th>
                        <th>
                            {{ trans('cruds.timeEntry.fields.clock_in_image') }}
                        </th>
                        <th>
                            {{ trans('cruds.timeEntry.fields.time_end') }}
                        </th>
                        <th>
                            {{ trans('cruds.timeEntry.fields.clock_out_image') }}
                        </th>
                        <th>
                            {{ trans('cruds.timeEntry.fields.status') }}
                        </th>
                        <th>
                            &nbsp;
                        </th>
                    </tr>
                    <tr class="filters">
                        <td>

                        </td>
                        <td>

                        </td>
                        <td>
                            <input class="search" type="text" placeholder="{{ trans('global.search') }}">
                        </td>
                        <td>
                            <input class="search" type="text" placeholder="{{ trans('global.search') }}">
                        </td>
                        <td>
                            <input class="search" type="text" placeholder="{{ trans('global.search') }}">
                        </td>
                       {{--  <td>
                            {{ trans('cruds.timeEntry.fields.available_store') }}
                        </td> --}}
                        <td>
                            <input class="search" type="text" placeholder="{{ trans('global.search') }}">
                        </td>
                        <td>
                            <input class="search" type="text" placeholder="{{ trans('global.search') }}">
                        </td>
                        <td>
                            &nbsp;
                        </td>
                        <td>
                            <input class="search" type="text" placeholder="{{ trans('global.search') }}">
                        </td>
                        <td>
                            &nbsp;
                        </td>
                        <td>
                            <select class="search" strict="true">
                                <option value>{{ trans('global.all') }}</option>
                                @foreach(App\Models\TimeEntry::STATUS_SELECT as $key => $item)
                                    <option value="{{ $key }}">{{ $item }}</option>
                                @endforeach
                            </select>
                        </td>
                        <td>
                        </td>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>



@endsection
@section('scripts')
@parent
<script>
    $(function () {
  let dtButtons = $.extend(true, [], $.fn.dataTable.defaults.buttons)
@can('time_entry_delete')
  let deleteButtonTrans = '{{ trans('global.datatables.delete') }}';
  let deleteButton = {
    text: deleteButtonTrans,
    url: "{{ route('admin.time-entries.massDestroy')}}",
    className: 'btn-danger',
    action: function (e, dt, node, config) {
      var ids = $.map(dt.rows({ selected: true }).data(), function (entry) {
          return entry.id
      });

      if (ids.length === 0) {
        alert('{{ trans('global.datatables.zero_selected') }}')

        return
      }

      if (confirm('{{ trans('global.areYouSure') }}')) {
        $.ajax({
          headers: {'x-csrf-token': _token},
          method: 'POST',
          url: config.url,
          data: { ids: ids, _method: 'DELETE' }})
          .done(function () { 
            alert('The selected time entries are deleted successfully!');
            table.ajax.reload(); 
          })
      }
    }
  }
  dtButtons.push(deleteButton)
@endcan

@can('time_entry_validate')
  let validateButtonTrans = 'Validate selected';
  let validateButton = {
    text: validateButtonTrans,
    url: "{{ route('admin.time-entries.massValidate')}}",
    className: 'btn-secondary',
    action: function (e, dt, node, config) {
      var ids = $.map(dt.rows({ selected: true }).data(), function (entry) {
          return entry.id
      });

      if (ids.length === 0) {
        alert('{{ trans('global.datatables.zero_selected') }}')

        return
      }

      if (confirm('{{ trans('global.areYouSure') }}')) {
        $.ajax({
          headers: {'x-csrf-token': _token},
          method: 'POST',
          url: config.url,
          data: { ids: ids, _method: 'POST' }})
          .done(function () { 
            alert('The selected time entries are validated successfully!');
            table.ajax.reload(); 
          })
      }
    }
  }
  dtButtons.push(validateButton)
@endcan
    
    let dtOverrideGlobals = {
        buttons: dtButtons,
        processing: true,
        serverSide: true,
        retrieve: true,
        responsive: true,
        aaSorting: [],
        ajax: "{{ route('admin.time-entries.index') }}",
        columns: [
            { data: 'placeholder', name: 'placeholder' },
            { data: 'placeholder', name: 'placeholder' },
            { data: 'id', name: 'id' },
            { data: 'promoterTaskList.ptl_no', name: 'promoterTaskList.ptl_no' },
            { data: 'promoter.name', name: 'promoter.name' },
            { data: 'date', name: 'date' },
            { data: 'time_start', name: 'time_start' },
            { data: 'clock_in_image', name: 'clock_in_image' },
            { data: 'time_end', name: 'time_end' },
            { data: 'clock_out_image', name: 'clock_out_image' },
            { data: 'status', name: 'status' },
            { data: 'actions', name: '{{ trans('global.actions') }}' }
        ],
        orderCellsTop: true,
        order: [[ 2, 'desc' ]],
        pageLength: 100,
      };
    let table = $('.datatable-TimeEntry').DataTable(dtOverrideGlobals);
      $('a[data-toggle="tab"]').on('shown.bs.tab click', function(e){
          $($.fn.dataTable.tables(true)).DataTable()
              .columns.adjust();
      });
      
    let visibleColumnsIndexes = null;
    $('.datatable thead').on('input', '.search', function () {
          let strict = $(this).attr('strict') || false
          let value = strict && this.value ? "^" + this.value + "$" : this.value

          let index = $(this).parent().index()
          if (visibleColumnsIndexes !== null) {
            index = visibleColumnsIndexes[index]
          }

          table
            .column(index)
            .search(value, strict)
            .draw()
      });
    table.on('column-visibility.dt', function(e, settings, column, state) {
          visibleColumnsIndexes = []
          table.columns(":visible").every(function(colIdx) {
              visibleColumnsIndexes.push(colIdx);
          });
      });
    table.on('responsive-resize', function ( e, datatable, columns ) {
        hideSearchInputs(columns);
     } );

    $(document).on("click", ".validate-btn", function(){
        let id = $(this).data("time-entry-id");

        Swal.fire({
            icon: 'question',
            title: 'Are you sure want to validate this data?',
            showCancelButton:true,
            showConfirmButton:true,
            allowOutsideClick:true,
            backdrop:true,
            cancelButtonText: 'Cancel',
            confirmButtonText: 'Confirm',
        }).then((result) => {
            if(result.isConfirmed)
            {
                var formData = new FormData();

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                formData.append("timeEntry", id);

                $.ajax({
                    method: "POST",
                    url: "{{ route('admin.time-entries.validateSingleAttendance') }}",
                    processData: false,
                    contentType: false,
                    data: formData,
                    success: (data) => {
                        Swal.fire({
                            icon: 'success',
                            title: data.message,
                            allowOutsideClick:true,
                            backdrop:true,
                        });

                        table.ajax.reload();
                    },
                    error: (res) => console.log(res)
                });
            }
        });
    });
})

</script>
@endsection