@include('admin.include.header')

      <!-- Main Content -->
      <div class="main-content">
        <section class="section">
          <div class="section-header">
            <h1>All Category</h1>
            <div class="section-header-breadcrumb">
              <div class="breadcrumb-item active"><a href="{{ url('admin') }}">Dashboard</a></div>
              <div class="breadcrumb-item"><a href="javascript:void(0)">Catgory</a></div>
              <div class="breadcrumb-item">All Category</div>
            </div>
          </div>

          <div class="section-body">

            <div class="row">
              <div class="col-12 col-md-12 col-lg-12">
                <div class="card">
                  <div class="card-header">
                    <h4>Categories</h4>
                  </div>
                  <div class="card-body">
                    <ul class="list-group">
                        @foreach ($data as $category)
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                          <b>{{$category['title']}}</b>
                          <span>
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input category_active" data-id="{{$category['id']}}" id="{{ $category['title'] }}" {{$category['status'] == 1 ? 'checked' : ''}} >
                                <label class="custom-control-label badge {{$category['status'] == 1 ? 'badge-success' : 'badge-danger' }}" for="{{$category['title']}}">{{$category['status'] == 1 ? 'Active' : 'Inactive'}}</label>
                              </div>
                            <a href="javascript:void(0)" data-toggle="modal" data-target="#staticBackdrop" class="p-2 edit" data-id="{{ $category['id'] }}" data-title="{{ $category['title'] }}"><i class="far fa-edit"></i></a><a href="javascript:void(0)" class="p-2 delete" data-id="{{ $category['id'] }}"><i class="far fa-trash-alt text-danger"></i></a></span>
                        </li>
                        @if (count($category['child']) > 0)
                            @foreach ($category['child'] as $item)
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    <p class="pl-5 m-0">{{$item['title']}}</p>
                                    <span>
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" class="custom-control-input category_active" data-id="{{$item['id']}}" id="{{$item['title']}}" {{$item['status'] == 1 ? 'checked' : ''}} >
                                            <label class="custom-control-label badge {{$item['status'] == 1 ? 'badge-success' : 'badge-danger' }}" for="{{$item['title']}}">{{$item['status'] == 1 ? 'Active' : 'Inactive'}}</label>
                                          </div>
                                          <a href="javascript:void(0)" data-toggle="modal" data-target="#staticBackdrop" class="p-2 edit" data-id="{{ $item['id'] }}" data-title="{{ $item['title'] }}"><i class="far fa-edit"></i></a><a href="javascript:void(0)" class="p-2 delete" data-id="{{ $item['id'] }}"><i class="far fa-trash-alt text-danger"></i></a>
                                    </span>
                                </li>
                            @endforeach
                        @endif
                        @endforeach
                    </ul>
                  </div>
                </div>
            </div>
          </div>
        </section>
      </div>

      <!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="staticBackdropLabel">Edit</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form id="editForm">
        <div class="modal-body">
            <div class="form-group">
                <label class="form-control-label">Title</label>
                <input type="text" class="form-control" name="title" id="editTitle" data-id="">
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Update</button>
        </div>
        </form>
      </div>
    </div>
  </div>

@include('admin.include.footer')