@extends('layouts.back-end.body')

@section('content')
  <div class="app-content pt-3 p-md-3 p-lg-4">
    <div class="container-xl">

      <div class="row g-3 mb-4 align-items-center justify-content-between">
        <div class="col-auto">
          <h1 class="app-page-title app-page-header"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22"
              fill="currentColor" class="bi bi-tags-fill" viewBox="0 0 16 16">

              <path
                d="M2 2a1 1 0 0 1 1-1h4.586a1 1 0 0 1 .707.293l7 7a1 1 0 0 1 0 1.414l-4.586 4.586a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 2 6.586V2zm1 1.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm4.004 7.646a.5.5 0 0 0 .708 0L14 7.707l-3.353-3.354L4.354 11.354a.5.5 0 0 0 0 .708l1.646 1.647z" />

            </svg> {{ __('message.category') }}</span></h1>
        </div>
        <div class="col-auto">
          <div class="page-utilities">
            <div class="row g-2 justify-content-start justify-content-md-end align-items-center">
              <div class="col-auto">
                <div class="table-search-form row gx-1 align-items-center">
                  <div class="col-auto">
                    <a href="{{ route('category.create') }}"><button type="button" class="btn app-btn-secondary"><svg
                          xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                          class="bi bi-plus" viewBox="0 0 16 16">

                          <path
                            d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />

                        </svg> {{ __('message.new') }}</button></a>
                  </div>
                </div>
              </div><!--//col-->
            </div><!--//row-->
          </div><!--//table-utilities-->
        </div><!--//col-auto-->
      </div><!--//row-->

      <div class="tab-content" id="orders-table-tab-content">
        <div class="tab-pane fade show active" id="orders-all" role="tabpanel" aria-labelledby="orders-all-tab">
          <div class="app-card app-card-orders-table shadow-sm mb-5">
            <div class="app-card-body">
              <div class="table-responsive tables-view">

                <script type="text/javascript">
                  $(document).ready(function() {
                    $('#category-table').DataTable({
                      processing: true,
                      serverSide: true,
                      ajax: {
                        url: "{!! route('category.index') !!}",
                        data: {
                          "id": $('#id').val()
                        }
                      },
                      columns: [{
                          data: 'DT_RowIndex'
                        },
                        {
                          data: 'thumbnail',
                          name: 'thumbnail'
                        },
                        {
                          data: 'name'
                        },
                        {
                          data: 'description'
                        },
                        {
                          data: 'action'
                        },
                      ]
                    });
                  });

                  function onChangeDelete(rowId) {
                    $.confirm({
                      escapeKey: 'cancel',
                      type: 'red',
                      title: '<label class="text-danger">{{ __('message.delete') }}</label>',
                      content: '{{ __('message.confirm_delete') }}',
                      theme: 'material',
                      buttons: {
                        formSubmit: {
                          text: '{{ __('message.delete') }}',
                          btnClass: 'btn-red',
                          action: function() {
                            if (!rowId) {
                              return false;
                            }
                            $.ajax({
                              type: 'DELETE',
                              url: 'category' + '/' + rowId,
                              data: {
                                'id': rowId,
                                '_token': '{{ csrf_token() }}',
                                'ajaxRequestHtml': 'true'
                              },
                              success: function(data) {
                                if (data.code != 404) {
                                  $.notify(data.message, {
                                    placement: {
                                      from: "bottom"
                                    },
                                    animate: {
                                      enter: 'animated fadeInRight',
                                      exit: 'animated fadeOutRight'
                                    },
                                    className: 'success',
                                    delay: 5000
                                  });
                                  $("#category-table").DataTable().draw();
                                }
                              },
                              error: function(request, status, error) {
                                $.notify(request.responseJSON.message, {
                                  placement: {
                                    from: "bottom"
                                  },
                                  animate: {
                                    enter: 'animated fadeInRight',
                                    exit: 'animated fadeOutRight'
                                  },
                                  className: 'error',
                                  delay: 5000
                                });
                              }
                            });
                          }
                        },
                        '{{ __('message.cancel') }}': function() {},
                      }
                    });
                  }

                  function redirect_back() {
                    location.href = '{{ url('/admin/category') }}';
                  }
                </script>
                <table id="category-table" class="table dataTable no-footer" aria-describedby="category-table_info"
                  style="width:100%">
                  <thead>
                    <tr>
                      <th width="5%">{{ __('message.no') }}</th>
                      <th width="10%">{{ __('message.thumbnail') }}</th>
                      <th width="20%">{{ __('message.name') }}</th>
                      <th width="45%">{{ __('message.description') }}</th>
                      <th width="20%">{{ __('message.action') }}</th>
                    </tr>
                  </thead>
                </table>

              </div><!--//table-responsive-->
            </div><!--//app-card-body-->
          </div><!--//app-card-->
        </div><!--//tab-pane-->
      </div><!--//tab-content-->
    </div>
  </div>
@endsection