@extends('adminLayouts.app')
@section('title') {{'Category'}} @endsection

@section('css')
<!-- DataTables -->
<link rel="stylesheet" href="{{asset('auth/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{asset('auth/plugins/datatables-responsive/css/responsive.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{asset('auth/plugins/datatables-buttons/css/buttons.bootstrap4.min.css')}}">
<style>
.hide{display:none;}
</style>
@append

@section('js')
<!-- DataTables  & Plugins -->
<script src="{{asset('auth/plugins/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('auth/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{asset('auth/plugins/datatables-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('auth/plugins/datatables-responsive/js/responsive.bootstrap4.min.js')}}"></script>
<script src="{{asset('auth/plugins/datatables-buttons/js/dataTables.buttons.min.js')}}"></script>
<script src="{{asset('auth/plugins/datatables-buttons/js/buttons.colVis.min.js')}}"></script>
<script>
  $(function () {
    var d = new Date();
    var newDate = d.getDate()+ "-" + (d.getMonth()+1) + "-" +d.getFullYear();
    var filename='calik_'+newDate;

    $("#ximilarTable").DataTable({
      "responsive": true, "lengthChange": false, "autoWidth": false,

    }).buttons().container().appendTo('#ximilarTable_wrapper .col-md-6:eq(0)');
  });
</script>
@append

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1> Category</h1>
      </div>
      <div class="col-sm-6">
        <a class="btn btn-primary" href="{{route('add_category')}}">Add Category</a>
      </div>
    </div>
  </div><!-- /.container-fluid -->

  <!-- Main content -->
  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">

           <div class="card">
            <div class="card-header">
              <h3 class="card-title"></h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
              @if (isset($category))


                <table id="ximilarTable" class="table table-bordered table-striped">
                  <thead>
                  <tr>
                      <th> id </th>
                      <th> Name </th>
                      <th> Action </th>
                  </tr>
                  </thead>
                  <tbody>
                      @foreach($category as $d)
                   <tr>
                    <td>{{ $loop->iteration }} </td>
                    <td>{{ $d->name }}</td>
                   <td>
                     <a href="{{url('admin/edit_category/'.$d->id)}}" class="btn btn-app">
                       <i class="fas fa-edit"></i> Edit
                     </a>
                   </td>
                  </tr>
                    @endforeach
                 </tbody>
                </table>

              @endif
            </div>
            <!-- /.card-body -->
            </div>
            <!-- /.card -->
            </div>
            <!-- /.col -->
            </div>
            <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
            </section>
            <!-- /.content -->

            @endsection