@extends("cms.layouts.app", ['page_id' => 'products_index'])

@push("js")
<script type="text/javascript">
    $(function () {
        const table = window.dataTablesHelper.init({
            serverSide: true,
            pageLength: 25,
            lengthMenu: [10, 25,  50, 100, 200, 300, 400, 500],
            ajax: {
                url: "{{ route('cms.products.datatable') }}",
            },
            columns: [
                { data: 'id', name: 'id', },
                {
                    data: 'status', name: 'status',
                    render: function ( data, type, row, meta ) {
                        var displayName = '{{ __('cms.na') }}';
                        switch (data) {
                            case 1:
                                displayName = "{{ __('cms.product.status.1') }}";
                                break;
                            case 2:
                                displayName = "{{ __('cms.product.status.2') }}";
                                break;
                            default:
                                break;
                        }
                        return `<span class="badge badge-pill badge-status-${data}">${displayName}</span>`;
                    }
                },
                { data: 'barcode', name: 'barcode'},
                { data: 'name_en', name: 'name_en', width: '40%'},
                { data: 'name_ja', name: 'name_ja', width: '40%'},
            ],
            buttons: {
                buttons: []
            },
            onClickRow: function(id) {
                if (!id) { return; }

                var url = '{{ route('cms.products.show', '__id__') }}'.replace('__id__', id);
                window.location.href = url;
            },
        });

        window.initFormSubmit({
          selector: '.modal-import form',
          onSubmit: function ({ form }) {
              location.reload()
          }
      })
    });
</script>
@endpush

@section("title")
{{ __('cms.sidemenu.product') }}
@endsection

@section("top_right")
<div class="btn-group float-right">
    <a class="btn btn-secondary btn-icon" href="#" role="button" data-toggle="modal" data-target="#product_modal_import">
        <i class="las la-upload mr-2"></i> {{ __('cms.import') }}
    </a>
</div>
@endsection

@section("content")
<div class="card">
    <div class="card-body table-dataTable table-responsive">
        <table id="dataTable" class="table table-hover w-100">
            <thead>
                <tr>
                    <th>{{ __('cms.id')}}</th>
                    <th>{{ __('cms.status')}}</th>
                    <th>{{ __('cms.product.barcode') }}</th>
                    <th>{{ __('cms.product.name_en')}}</th>
                    <th>{{ __('cms.product.name_ja')}}</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
{{ Form::open(['method' => 'POST', 'id' => "form-inactivate-item"]) }} {{ Form::close() }}

<x-modal.master id="product_modal_import" class="modal-import" title="{{ __('cms.import') . ' - ' . __('cms.sidemenu.product')}}">
  {{ Form::open(['route' => 'cms.products.import', 'method' => 'POST', 'id' => 'form_import', 'files' => true]) }}
      <x-form.form-group.master
          name="upload_product_files"
          label="{{ __('cms.order.raw_files_excel') }}"
          type="file"
      >
          {{ Form::fileUpload('upload_product_files', null, [
              'multiple' => true,
              'type' => 'document',
              'accept' => '.xlsx, .xls, .csv',
          ]) }}
      </x-form.form-group.master>
      @php

        $type = ['Product','ProductStock'];
          $fields = [
              [
                  'type' => 'select',
                  'name' => 'type',
                  'label' => 'Type',
                  'options' => $type,
                  // 'withAny' => '1'
              ],
          ];
      @endphp
        <x-form.fields field-class="col-12 mb-5" :fields="$fields" editing="1"></x-form.fields>

      <div class="row my-6">
          <div class="col"></div>
          <div class="col-auto">
              <button type="submit" class="btn btn-primary btn-lg">
                  {{ __('cms.import') }}
              </button>
          </div>
      </div>

  {{ Form::close() }}
</x-modal.master>
@endsection