@extends('layouts.app')
@section('styles')
<!-- DataTables -->
<link rel="stylesheet" href="{{ get_asset('dist/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css')}}">
<link rel=" stylesheet" href="{{ get_asset('dist/plugins/datatables-responsive/css/responsive.bootstrap4.min.css')}}">
<link rel=" stylesheet" href="{{ get_asset('dist/plugins/datatables-buttons/css/buttons.bootstrap4.min.css')}}">

@endsection

@section('content')

<div id="edit-category-modal-container">

</div>
@include('dashboard.categories.partials._category-confirmation-modal',[
'id' => 'delete-category',
'modal_title' => 'Delete Confirmation',
'method'=> 'DELETE'
])


@include('dashboard.categories.partials._category-add-modal',[
'id' => 'add-category',
])
@include('dashboard.categories.partials.success-modal')
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header mx-3">
        <div class="container-fluid">
            <div class="row mb-2 mt-3">
                <div class="col-sm-6">
                    <h3> <i class="fa-solid fa-folder fa-fw"></i>
                        Categories Management</h3>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                        <li class="breadcrumb-item active">Categories Management</li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- /.container-fluid -->

        <div class="row ml-5">
            <label for="search-categories" class="mr-3 mt-2 h5">Category</label>
            <div class="form-group col-md-9">

                <input id="search-categories" class="form-control w-100" type="text" placeholder="Search"
                    aria-label="Search" style="height: 50px;">
                @include('dashboard.users.partials._session')

            </div>


        </div>
        <div class="form-group text-center mt-3">
            <button class="btn btn-primary px-3 py-2 my-2 my-sm-0 srm-button search-filter" type="submit"><i
                    class="fas fa-search"></i> Search</button>
            <button class="btn btn-outline-primary px-3 py-2 my-2 ml-2 my-sm-0 srm-button reset-filter" type="button"><i
                    class="fa-solid fa-eye"></i> Show All</button>
        </div>

        <button class="btn btn-primary add-category-button px-3 py-2 mb-3 float-right srm-button " type="button"
            data-toggle="modal" data-target="#add-category-modal">
            <i class="fas fa-plus"></i> Add New Category
        </button>


        <div class="clearfix card-body mt-3">
            <table id="categories" class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>Category</th>
                        <th>Creation Date</th>
                        <th>Resources Count</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($categories as $category)

                    <tr>
                        <td>
                            @if(strpos($category->icon, '<i class') !==false) {!! $category->icon !!}
                                @else
                                <i class="fa fa-fw" style="font-family: 'FontAwesome'"> {!! '&'. $category->icon
                                    !!}</i>
                                @endif
                                {{ $category->name }}
                        </td>
                        <td>{{ $category->created_at }}</td>
                        <td>{{ $category->resources_count }}</td>
                        <td>
                            @if(!$category->isDefaultCategory("unassigned"))

                            <div class="dropdown">
                                <button type="button" id="ellipsisMenu1" data-toggle="dropdown" aria-haspopup="true"
                                    aria-expanded="false" style="border:none;background:none">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                        class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
                                        <path
                                            d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
                                    </svg>
                                </button>
                                <div class="dropdown-menu" aria-labelledby="ellipsisMenu">
                                    <a class="dropdown-item edit-category"
                                        data-url="{{ route('categories.edit',$category->id) }}">Edit</a>
                                    <a class="dropdown-item delete-category" data-toggle="modal"
                                        data-target="#delete-category-modal"
                                        data-url="{{ route('categories.destroy',$category->id) }}">Delete</a>
                                </div>
                            </div>
                            @endif
                        </td>
                    </tr>
                    @endforeach

                </tbody>
            </table>
        </div>

    </section>

</div>
@endsection
@section('scripts')
<script src="{{ get_asset('dist/plugins/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{ get_asset('dist/plugins/datatables-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{ get_asset('dist/plugins/datatables-responsive/js/responsive.bootstrap4.min.js')}}"></script>
<script src="{{ get_asset('dist/plugins/datatables-buttons/js/dataTables.buttons.min.js')}}"></script>
<script src="{{ get_asset('dist/plugins/datatables-buttons/js/buttons.bootstrap4.min.js')}}"></script>
<script src="{{ get_asset('dist/plugins/jszip/jszip.min.js')}}"></script>
<script src="{{ get_asset('dist/plugins/pdfmake/pdfmake.min.js')}}"></script>
<script src="{{ get_asset('dist/plugins/pdfmake/vfs_fonts.js')}}"></script>
<script src="{{ get_asset('dist/plugins/datatables-buttons/js/buttons.html5.min.js')}}"></script>
<script src="{{ get_asset('dist/plugins/datatables-buttons/js/buttons.print.min.js')}}"></script>
<script src="{{ get_asset('dist/plugins/datatables-buttons/js/buttons.colVis.min.js')}}"></script>
<script src="{{ get_asset('dist/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{ get_asset('dist/js/custom-datatables.js')}}"></script>




<script>
    displayUserPanel();
</script>
<script src="{{ get_asset('dist/js/category.js') }}" defer>
</script>

@endsection