@extends('layouts.admin')
@section('content')
@can('invoice_create')
    <div style="margin-bottom: 10px;" class="row">
        <div class="col-lg-12">
            <a class="btn btn-success" href="{{ route('admin.invoices.create') }}">
                {{ trans('global.add') }} Retail POS {{ trans('cruds.invoice.title_singular') }}
            </a>
            <button class="btn btn-warning" data-toggle="modal" data-target="#csvImportModal">
                {{ trans('global.app_csvImport') }}
            </button>
            @include('csvImport.modal', ['model' => 'Invoice', 'route' => 'admin.invoices.parseCsvImport'])
        </div>
    </div>
@endcan
<div class="card">
    <div class="card-header">
        Retail POS {{ trans('cruds.invoice.title_singular') }} {{ trans('global.list') }}
    </div>

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

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

                    </th>
                    <th>
                        {{ trans('cruds.invoice.fields.id') }}
                    </th>
                    <th>
                        {{ trans('cruds.invoice.fields.employee') }}
                    </th>
                    <th>
                        Retail {{ trans('cruds.invoice.fields.customer') }}
                    </th>
                    <th>
                        {{ trans('cruds.invoice.fields.invoice_no') }}
                    </th>
                    <th>
                        {{ trans('cruds.invoice.fields.issue_date') }}
                    </th>
                    <th>
                        {{ trans('cruds.invoice.fields.subtotal_amount') }} (RM)
                    </th>
                    <th>
                        {{ trans('cruds.invoice.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>
                        <select class="search">
                            <option value>{{ trans('global.all') }}</option>
                            @foreach($employees as $id => $employee_name)
                                <option value="{{ $id }}">{{ $employee_name }}</option>
                            @endforeach
                        </select>
                    </td>
                    <td>
                        {{-- <select class="search">
                            <option value>{{ trans('global.all') }}</option>
                            @foreach($customers as $id => $customer_name)
                                <option value="{{ $id }}">{{ $customer_name }}</option>
                            @endforeach
                        </select> --}}
                        <select class="search">
                            <option value>{{ trans('global.all') }}</option>
                            @foreach($retailCustomers as $id => $retail_customer)
                                <option value="{{ $id }}">{{ $retail_customer }}</option>
                            @endforeach
                        </select>
                    </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>
                        <select class="search" strict="true">
                            <option value>{{ trans('global.all') }}</option>
                            @foreach(App\Models\Invoice::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 () {
    let dtButtons = $.extend(true, [], $.fn.dataTable.defaults.buttons)
    @can('invoice_delete')
      let deleteButtonTrans = '{{ trans('global.datatables.delete') }}';
      let deleteButton = {
        text: deleteButtonTrans,
        url: "{{ route('admin.invoices.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 () { location.reload() })
          }
        }
      }
      dtButtons.push(deleteButton)
    @endcan

    let dtOverrideGlobals = {
        buttons: dtButtons,
        processing: true,
        serverSide: true,
        retrieve: true,
        aaSorting: [],
        ajax: "{{ route('admin.invoices.index') }}",
        columns: [
        { data: 'placeholder', name: 'placeholder' },
        { data: 'placeholder', name: 'placeholder' },
        { data: 'id', name: 'id' },
        { data: 'employee', name: 'employee.id' },
        { data: 'retailCustomer', name: 'retailCustomer.id' },
        { data: 'invoice_no', name: 'invoice_no' },
        { data: 'issue_date', name: 'issue_date' },
        { data: 'subtotal_amount', name: 'subtotal_amount' },
        { data: 'status', name: 'status' },
        { data: 'actions', name: '{{ trans('global.actions') }}' }
        ],
        orderCellsTop: true,
        order: [[ 2, 'desc' ]],
        pageLength: 100,
    };
    let table = $('.datatable-Invoice').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', '.btn-whatsapp', function() {
        var contact_number = $(this).data("contact-number");

        if(!contact_number || contact_number.length === 0)
        {
            alert("The contact number is empty. Please enter customer contact number!");
        }
        else
        {
            let url = 'https://api.whatsapp.com/send?phone=6' + contact_number + '&text=';

            let printUrl = $(this).data("href");

            url += printUrl;

            window.open(url);
        }
    });
});
</script>
@endsection