@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.product_categories') }}
          </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('productcategory.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>
            </div>
          </div>
        </div>
      </div>

      <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('productcategory.index') !!}",
                        data: {
                          "id": $('#id').val()
                        }
                      },
                      columns: [{
                        data: 'DT_RowIndex'
                      }, {
                        data: 'name'
                      }, {
                        data: 'category.name', // Displaying the parent category name
                        name: 'category.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: '{{ url('/admin/productcategory') }}' + '/' + 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.error, {
                                  placement: {
                                    from: "bottom"
                                  },
                                  animate: {
                                    enter: 'animated fadeInRight',
                                    exit: 'animated fadeOutRight'
                                  },
                                  className: 'error',
                                  delay: 5000
                                });
                              }
                            });
                          }
                        },
                        '{{ __('message.cancel') }}': function() {},
                      }
                    });
                  }

                  function redirect_back() {
                    location.href = '{{ url('/admin/productcategory') }}';
                  }
                </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="20%">{{ __('message.name') }}</th>
                      <th width="20%">{{ __('message.parent_category') }}</th>
                      <th width="35%">{{ __('message.description') }}</th>
                      <th width="20%">{{ __('message.action') }}</th>
                    </tr>
                  </thead>
                </table>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection