@extends('layouts.app')

@section('title', 'List Category')

@section('content')

        <div class="row">
            <div class="col-lg-12">
                <div class="d-flex flex-wrap flex-wrap align-items-center justify-content-between mb-4">
                    <div>
                        <h4 class="mb-3">Category List</h4>
                    </div>
@if(auth()->user()->role && auth()->user()->role->role_name === 'Admin')
    <a href="{{ route('categories.add') }}" class="btn btn-primary add-list">
        <i class="las la-plus mr-3"></i>Add Category
    </a>
@endif                </div>
            </div>
            <div class="col-lg-12">
                <div class="table-responsive rounded mb-3">
                <table class="data-tables table mb-0 tbl-server-info">
                    <thead class="bg-white text-uppercase">
                        <tr class="ligth ligth-data">
                            <th>
                                <div class="checkbox d-inline-block">
                                    <input type="checkbox" class="checkbox-input" id="checkbox1">
                                    <label for="checkbox1" class="mb-0"></label>
                                </div>
                            </th>
                            <th>Category ID</th>
                            <th>Category Name</th>
                            <th>Description</th>
                            <th>Action</th>                       
                         </tr>
                    </thead>
                    <tbody class="ligth-body">
                         @forelse($categories as $category)
                          <tr> <td>
                            <div class="checkbox d-inline-block">
                                <input type="checkbox"
                           class="checkbox-input"
                           id="checkbox{{ $category->category_id }}">
                           <label for="checkbox{{ $category->category_id }}" class="mb-0"></label>
                         </div>
                        </td>
                         <td> {{ $category->category_id }}</td>
                         <td> {{ $category->category_name }}</td>
                          <td> {{ $category->description }} </td>
<td>
    <div class="d-flex align-items-center list-action">

        {{-- View --}}
        <a
            class="badge badge-info mr-2"
            data-toggle="tooltip"
            data-placement="top"
            title="View"
            href="{{ route('categories.show', $category->category_id) }}"
        >
            <i class="ri-eye-line mr-0"></i>
        </a>

        {{-- ADMIN ONLY --}}
        @if(auth()->user()->role && auth()->user()->role->role_name === 'Admin')

            {{-- Edit --}}
            <a
                class="badge bg-success mr-2"
                data-toggle="tooltip"
                data-placement="top"
                title="Edit"
                href="{{ route('categories.edit', $category->category_id) }}"
            >
                <i class="ri-pencil-line mr-0"></i>
            </a>

            {{-- Delete --}}
            <form
                action="{{ route('categories.destroy', $category->category_id) }}"
                method="POST"
                style="display:inline;"
            >
                @csrf
                @method('DELETE')

                <button
                    type="submit"
                    class="badge bg-warning mr-2 border-0"
                    title="Delete"
                    onclick="return confirm('Are you sure you want to delete this category?')"
                >
                    <i class="ri-delete-bin-line mr-0"></i>
                </button>
            </form>

        @endif

    </div>
</td> </tr>

    @empty

        <tr>
            <td colspan="5" class="text-center">
                No categories found.
            </td>
        </tr>

    @endforelse

</tbody>              
  </table>
                </div>
            </div>
        </div>
        <!-- Page end  -->
    </div>
    <!-- Modal Edit -->
    <div class="modal fade" id="edit-note" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="popup text-left">
                        <div class="media align-items-top justify-content-between">                            
                            <h3 class="mb-3">Product</h3>
                            <div class="btn-cancel p-0" data-dismiss="modal"><i class="las la-times"></i></div>
                        </div>
                        <div class="content edit-notes">
                            <div class="card card-transparent card-block card-stretch event-note mb-0">
                                <div class="card-body px-0 bukmark">
                                    <div class="d-flex align-items-center justify-content-between pb-2 mb-3 border-bottom">                                                    
                                        <div class="quill-tool">
                                        </div>
                                    </div>
                                    <div id="quill-toolbar1">
                                        <p>Virtual Digital Marketing Course every week on Monday, Wednesday and Saturday.Virtual Digital Marketing Course every week on Monday</p>
                                    </div>
                                </div>
                                <div class="card-footer border-0">
                                    <div class="d-flex flex-wrap align-items-ceter justify-content-end">
                                        <div class="btn btn-primary mr-3" data-dismiss="modal">Cancel</div>
                                        <div class="btn btn-outline-primary" data-dismiss="modal">Save</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
   
@endsection