@extends('layouts.admin')
@section('content')
@can('customer_luck_draw_data_create')
    <div style="margin-bottom: 10px;" class="row">
        <div class="col-lg-12">
            <a class="btn btn-success" href="{{ route('admin.customer-luck-draw-datas.create') }}">
                {{ trans('global.add') }} {{ trans('cruds.customerLuckDrawData.title_singular') }}
            </a>
            <button class="btn btn-warning" data-toggle="modal" data-target="#csvImportModal">
                {{ trans('global.app_csvImport') }}
            </button>
            @include('csvImport.modal', ['model' => 'CustomerLuckDrawData', 'route' => 'admin.customer-luck-draw-datas.parseCsvImport'])
        </div>
    </div>
@endcan
@can('customer_luck_draw_data_reject')
@include('admin.customerLuckDrawDatas.reject')
@endcan
<div class="card">
    <div class="card-header">
        {{ trans('cruds.customerLuckDrawData.title_singular') }} {{ trans('global.list') }}
    </div>

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

                    </th>
                    <th>
                        {{ trans('cruds.customerLuckDrawData.fields.id') }}
                    </th>
                    <th>
                        {{ trans('cruds.customerLuckDrawData.fields.luck_draw_data') }}
                    </th>
                    <th>
                        {{ trans('cruds.customerLuckDrawData.fields.customer') }}
                    </th>
                    <th>
                        {{ trans('cruds.customerLuckDrawData.fields.upload_photo') }}
                    </th>
                    <th>
                        {{ trans('cruds.customerLuckDrawData.fields.entered_happy_code') }}
                    </th>
                    <th>
                        {{ trans('cruds.customerLuckDrawData.fields.remark') }}
                    </th>
                    {{-- <th>
                        {{ trans('cruds.customerLuckDrawData.fields.reject_remark') }}
                    </th> --}}
                    <th>
                        {{ trans('cruds.customerLuckDrawData.fields.status') }}
                    </th>
                    <th>
                        &nbsp;
                    </th>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                        <input class="search" type="text" placeholder="{{ trans('global.search') }}">
                    </td>
                    <td>
                        <select class="search">
                            <option value>{{ trans('global.all') }}</option>
                            @foreach(App\Models\LuckDrawData::STATUS_SELECT as $key => $item)
                                <option value="{{ $key }}">{{ $item }}</option>
                            @endforeach
                        </select>
                    </td>
                    <td>
                        <select class="search">
                            <option value>{{ trans('global.all') }}</option>
                            @foreach($customers as $key => $item)
                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                            @endforeach
                        </select>
                    </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>
                        <select class="search" strict="true">
                            <option value>{{ trans('global.all') }}</option>
                            @foreach(App\Models\CustomerLuckDrawData::STATUS_SELECT as $key => $item)
                                <option value="{{ $key }}">{{ $item }}</option>
                            @endforeach
                        </select>
                    </td>
                    <td>
                    </td>
                </tr>
            </thead>
        </table>
    </div>
</div>



@endsection
@section('scripts')
@parent
<script>

function reject(button)
{
    var id = button.getAttribute("data-id");
    document.getElementById('datatables-reject-form').action = 'customer-luck-draw-datas/' + id + '/rejectDetails';
}

$(function () {
    $.fn.dataTable.ext.errMode = 'throw';
    let dtButtons = $.extend(true, [], $.fn.dataTable.defaults.buttons)
    @can('customer_luck_draw_data_delete')
      let deleteButtonTrans = '{{ trans('global.datatables.delete') }}';
      let deleteButton = {
        text: deleteButtonTrans,
        url: "{{ route('admin.customer-luck-draw-datas.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.datatables.areYouSure.delete') }}')) {
            $.ajax({
              headers: {'x-csrf-token': _token},
              method: 'POST',
              url: config.url,
              data: { ids: ids, _method: 'DELETE' }})
              .done(function () { 
                location.reload()
              })
          }
        }
      }
    dtButtons.push(deleteButton)
    @endcan
    @can('customer_luck_draw_data_approve')
      let approveButtonTrans = '{{ trans('global.datatables.approve') }}';
      let approveButton = {
        text: approveButtonTrans,
        url: "{{ route('admin.customer-luck-draw-datas.massApprove') }}",
        className: 'btn-success',
        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.datatables.areYouSure.approve') }}')) {
            $.ajax({
              headers: {'x-csrf-token': _token},
              method: 'POST',
              url: config.url,
              data: { ids: ids, _method: 'PUT' }})
              .done(function(response) { 
                 if(response == undefined)
                 {
                     location.reload()
                 }
                 else
                 {
                    if(response.status_code == 204)
                    {
                        alert(response.message);
                    }
                 }
              })
          }
        }
      }
    dtButtons.push(approveButton)
    @endcan
    @can('customer_luck_draw_data_reject')
      let rejectButtonTrans = '{{ trans('global.datatables.reject') }}';
      let rejectButton = {
        text: rejectButtonTrans,
        url: "{{ route('admin.customer-luck-draw-datas.massReject') }}",
        className: 'btn-warning',
        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.datatables.areYouSure.reject') }}')) {
            $.ajax({
              headers: {'x-csrf-token': _token},
              method: 'POST',
              url: config.url,
              data: { ids: ids, _method: 'PUT' }})
              .done(function (response) { 
                if(response == undefined)
                {
                    location.reload()
                }
                else
                {
                    if(response.status_code == 204)
                    {
                        alert(response.message);
                    }
                }
              })
          }
        }
      }
      dtButtons.push(rejectButton)
    @endcan

    let dtOverrideGlobals = {
        buttons: dtButtons,
        processing: true,
        serverSide: true,
        retrieve: true,
        aaSorting: [],
        ajax: "{{ route('admin.customer-luck-draw-datas.index') }}",
        columns: [
            { data: 'placeholder', name: 'placeholder' },
            { data: 'id', name: 'id' },
            { data: 'luck_draw_data_status', name: 'luck_draw_data.status' },
            { data: 'customer_name', name: 'customer.id' },
            { data: 'upload_photo', name: 'upload_photo', sortable: false, searchable: false },
            { data: 'entered_happy_code', name: 'entered_happy_code' },
            { data: 'remark', name: 'remark' },
            { data: 'status', name: 'status' },
            { data: 'actions', name: '{{ trans('global.actions') }}' }
        ],
        orderCellsTop: true,
        order: [[ 1, 'desc' ]],
        pageLength: 100,
    };

    let table = $('.datatable-CustomerLuckDrawData').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);
        });
    });

    function SimpleUploadAdapter(editor) {
        editor.plugins.get('FileRepository').createUploadAdapter = function(loader) {
        return {
            upload: function() {
              return loader.file
                .then(function (file) {
                  return new Promise(function(resolve, reject) {
                    // Init request
                    var xhr = new XMLHttpRequest();
                    xhr.open('POST', '{{ route('admin.shipping-lucky-draws.storeCKEditorImages') }}', true);
                    xhr.setRequestHeader('x-csrf-token', window._token);
                    xhr.setRequestHeader('Accept', 'application/json');
                    xhr.responseType = 'json';

                    // Init listeners
                    var genericErrorText = `Couldn't upload file: ${ file.name }.`;
                    xhr.addEventListener('error', function() { reject(genericErrorText) });
                    xhr.addEventListener('abort', function() { reject() });
                    xhr.addEventListener('load', function() {
                      var response = xhr.response;

                      if (!response || xhr.status !== 201) {
                        return reject(response && response.message ? `${genericErrorText}\n${xhr.status} ${response.message}` : `${genericErrorText}\n ${xhr.status} ${xhr.statusText}`);
                      }

                      $('form').append('<input type="hidden" name="ck-media[]" value="' + response.id + '">');

                      resolve({ default: response.url });
                    });

                    if (xhr.upload) {
                      xhr.upload.addEventListener('progress', function(e) {
                        if (e.lengthComputable) {
                          loader.uploadTotal = e.total;
                          loader.uploaded = e.loaded;
                        }
                      });
                    }

                    // Send request
                    var data = new FormData();
                    data.append('upload', file);
                    data.append('crud_id', '{{ $shippingLuckyDraw->id ?? 0 }}');
                    xhr.send(data);
                  });
                })
            }
          };
        }
    }

    var allEditors = document.querySelectorAll('.ckeditor');
    for (var i = 0; i < allEditors.length; ++i) {
        ClassicEditor.create(
            allEditors[i], {
                extraPlugins: [SimpleUploadAdapter]
            }
        )
    }
});

</script>
@endsection