@extends('Admin.layout.master1')

@section('title','Kategoriler')

@section('content')

<div class="card mb-3" id="ordersTable" data-list='{"valueNames":["order","name","lastname","job","city","mobile","email","status","created","updated"],"page":10,"pagination":true}'>
            <div class="card-header">
              <div class="row flex-between-center">
                <div class="col-4 col-sm-auto d-flex align-items-center pe-0">
                  <h5 class="fs-0 mb-0 text-nowrap py-2 py-xl-0">Kategori Listesi</h5>
                   <h5 class="fs-0 mb-0 text-nowrap py-2 py-xl-0">Ana ve alt kategori toplamı:{{ $categories->count() }}</h5>


                </div>
                <div class="col-12 col-sm-auto ms-auto text-end ps-0">
                  <div class="d-none" id="orders-bulk-actions">
                    <div class="d-flex"><select class="form-select form-select-sm" aria-label="Bulk actions">
                        <option selected="">Bulk actions</option>
                        <option value="Refund">Refund</option>
                        <option value="Delete">Delete</option>
                        <option value="Archive">Archive</option>
                      </select><button class="btn btn-falcon-default btn-sm ms-2" type="button">Apply</button></div>
                  </div>
                  <div id="orders-actions">
                    <button class="btn btn-falcon-default btn-sm" type="button">
                      <span class="fas fa-plus" data-fa-transform="shrink-3 down-2"></span>
                      <span class="d-none d-sm-inline-block ms-1"><a href="{{ route('add.category')}}">Kategori ekle</a></span>
                    </button>
                    <button class="btn btn-falcon-default btn-sm mx-2" type="button">
                      <span class="fas fa-filter" data-fa-transform="shrink-3 down-2"></span>
                      <span class="d-none d-sm-inline-block ms-1">Filter</span>
                    </button>
                    <button class="btn btn-falcon-default btn-sm" type="button">
                      <span class="fas fa-external-link-alt" data-fa-transform="shrink-3 down-2"></span>
                      <span class="d-none d-sm-inline-block ms-1">Export</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div class="card-body p-0">
              <div class="table-responsive scrollbar">
                <table class="table table-sm table-striped fs--1 mb-0 overflow-hidden">
                  <thead class="bg-200 text-900">
                    <tr>
                      <th>
                        <div class="form-check fs-0 mb-0 d-flex align-items-center"><input class="form-check-input" id="checkbox-bulk-customers-select" type="checkbox" data-bulk-select='{"body":"table-orders-body","actions":"orders-bulk-actions","replacedElement":"orders-actions"}' /></div>
                      </th>
                     <th class="sort pe-1 align-middle white-space-nowrap text-center" data-sort="catID">Kategori ID</th>
                      <th class="sort pe-1 align-middle white-space-nowrap text-center" data-sort="parent">Parent ID</th>
                      <th class="sort pe-1 align-middle white-space-nowrap text-center" data-sort="name">Kategori Adı</th>
                      <th class="sort pe-1 align-middle white-space-nowrap text-center" data-sort="nameEn">Kategori Adı</th>
                      <th class="sort pe-1 align-middle white-space-nowrap text-center" data-sort="nameArb">Kategori Adı</th>
                      <th class="sort pe-1 align-middle white-space-nowrap text-center" data-sort="url">URL</th>
                      <th class="sort pe-1 align-middle white-space-nowrap text-center" data-sort="description">Açıklama</th>
                      <th class="sort pe-1 align-middle white-space-nowrap text-center" data-sort="status">Onay durumu</th>
                      <!--<th class="sort pe-1 align-middle white-space-nowrap text-center" data-sort="created">Kayıt Tarihi</th>
                      <th class="sort pe-1 align-middle white-space-nowrap text-center" data-sort="updated">Güncelleme Tarihi</th>-->
                      <th class="no-sort"></th>
                    </tr>
                  </thead>
                  <tbody class="list" id="table-orders-body">
                @foreach($categories as $category)
                    <tr class="btn-reveal-trigger">
                      <td class="align-middle" style="width: 28px;">
                        <div class="form-check fs-0 mb-0 d-flex align-items-center">
                          <input class="form-check-input" type="checkbox" id="checkbox-0" data-bulk-select-row="data-bulk-select-row" />
                        </div>
                      </td>
                      <td class="catID py-2 align-middle white-space-nowrap">
                        <a>
                          <strong>{{ $category->id }}</strong>
                        </a>
                      </td>
                        <td class="parent py-2 align-middle text-end fs-0 fw-medium text-center">
                          @if($category->parent_id == 0) Ana Kategori @else Alt kategori @endif
                        </td>
                        <td class="name py-2 align-middle text-end fs-0 fw-medium text-center">
                          {{$category->name }}
                        </td>
                        <td class="nameEn py-2 align-middle text-end fs-0 fw-medium text-center">
                          {{$category->name_en }}
                        </td>
                        <td class="nameEn py-2 align-middle text-end fs-0 fw-medium text-center">
                          {{$category->name_arabic }}
                        </td>
                        <td class="url py-2 align-middle text-end fs-0 fw-medium text-center">
                          {{$category->url }}
                        </td>
                        <td class="description py-2 align-middle text-end fs-0 fw-medium text-center">
                          {{$category->description }}
                        </td>

                        <td class="status py-2 align-middle text-center fs-0 white-space-nowrap">
                          @if($category['status'] == 1)
                              <a class="updateCategoryStatus" id="categories-{{ $category['id'] }}"
                                categories_id="{{ $category['id'] }}" href="javascript:void(0)">
                                <i class="fa fa-toggle-on" aria-hidden="true" status="Aktif"></i>
                              </a>
                          @else
                              <a class="updateCategoryStatus" id="categories-{{ $category['id'] }}"
                                categories_id="{{ $category['id'] }}" href="javascript:void(0)">
                                <i class="fa fa-toggle-off" aria-hidden="true" status="Pasif"></i>
                              </a>
                          @endif
                      </td>
                      <!--<td class="created py-2 align-middle">{{ $category->created_at}}</td>
                      <td class="updated py-2 align-middle">{{ $category->updated_at}}</td>-->
                    </tr>
                @endforeach
                  </tbody>
                </table>
              </div>
            </div>
            <div class="card-footer">
              <div class="d-flex align-items-center justify-content-center">
                <button class="btn btn-sm btn-falcon-default me-1" type="button" title="Previous" data-list-pagination="prev">
                  <span class="fas fa-chevron-left"></span>
                </button>
                <ul class="pagination mb-0"></ul>
                <button class="btn btn-sm btn-falcon-default ms-1" type="button" title="Next" data-list-pagination="next">
                  <span class="fas fa-chevron-right"></span>
                </button>
              </div>
            </div>
          </div>
@endsection

@section('javascript')

<script>
 $(document).ready(function() {
    $(document).on('click', '.updateCategoryStatus', function () {
      var status        = $(this).children().attr("status");
      var categories_id = $(this).attr("categories_id");
      //console.log(status);
      //console.log(subscriber_id);
      $.ajax({
         type:'POST',
         url:'{{ route('CatUpdate') }}',
         data:{
           status:status,
           categories_id:categories_id
         },
         headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
         success:function(resp){
           if (resp['status']==0)
           {
             $("#categories-"+categories_id).html("<i class='fa fa-toggle-off' aria-hidden='true' status='Pasif'></i>");
           }
           else if(resp['status']==1)
           {
             $("#categories-"+categories_id).html("<i class='fa fa-toggle-on' aria-hidden='true' status='Aktif'></i>");
           }
         }
      });
    });
});
</script>

@endsection