@extends('backend.layout.masterlayout')
@section('content')
    @include('backend.partial.sidebar')
    @include('backend.partial.topbar')
    <div class="page-wrapper">
        <!--page-content-wrapper-->
        <div class="page-content-wrapper">
            <div class="page-content">
                <div class="row">
                    <div class="col-md-8">
                        <div class="card radius-15">
                            <div class="card-body">
                                <div class="card-title">
                                    <h6 class="mb-0"><b><i class="bx bx-layer"></i> Roles Manager </b>
                                        <form class="" id="sort_all_roles" action="" method="GET"
                                            style="float: right;">
                                            <div class="box-inline pad-rgt pull-left">
                                                <div class="" style="min-width: 200px;">
                                                    <input type="text" class="form-control form-control-sm"
                                                        id="search" name="search"
                                                        @isset($sort_search) value="{{ $sort_search }}" @endisset
                                                        placeholder="Type name & Enter"
                                                        style="font-size: 0.8rem; width:100%;" />
                                                </div>
                                            </div>
                                        </form>
                                    </h6>
                                </div>
                                <hr />
                                <div class="table-responsive">
                                    <table class="table mb-0">
                                        <thead class="thead-primary">
                                            <tr>
                                                <th>#</th>
                                                <th>Title</th>
                                                <th>Permission</th>
                                                <th class="text-center">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                            @if (count($all_roles) > 0)
                                                @foreach ($all_roles as $key => $role)
                                                    <tr>
                                                        <td>{{ $key + 1 }}
                                                        </td>
                                                        <td>{{ $role->title }}</td>
                                                        <td>
                                                            <a href="{{ route('user-permissions', $role->id) }}"
                                                                class="btn btn-outline-secondary m-1 btn-sm"
                                                                data-bs-toggle="tooltip" data-bs-placement="top"
                                                                title=""
                                                                data-bs-original-title="Manage Permissions"><i
                                                                    class="bx bx-cog"></i></a>
                                                        </td>
                                                        <td class="text-center">
                                                            <a class="btn btn-outline-dark m-1 btn-sm"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#renameRole{{ $role->id }}"
                                                                data-bs-placement="top" title=""
                                                                data-bs-original-title="Edit"><i
                                                                    class="bx bx-edit-alt"></i></a>
                                                            <a href="{{ route('delete-user-role', $role->id) }}" onclick="return confirm('Are you sure you want to delete?');"
                                                                class="btn btn-outline-danger m-1 btn-sm"
                                                                data-bs-toggle="tooltip" data-bs-placement="top"
                                                                title="" data-bs-original-title="Delete This"><i
                                                                    class="bx bx-trash"></i></a>
                                                        </td>
                                                    </tr>
                                                    @include('backend.dynamic-modals.rename-role')
                                                @endforeach
                                            @else
                                                <tr>
                                                    <td colspan="4" class="text-center"><i class="bx bx-sad"
                                                            style="font-size:5rem;color: #a2a3a5;"></i>
                                                        <h3 style="color: #a2a3a5;">Nothing found</h3>
                                                    </td>
                                                </tr>
                                            @endif
                                        </tbody>

                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card radius-15">
                            <div class="card-body" style="padding: 2rem 2rem;">
                                <div class="card-title">
                                    <h6 class="mb-0"><b><i class="bx bx-layer-plus"></i> Add New Role </b></h6>
                                </div>
                                <hr />
                                <form class="row g-3" method="POST" action="{{ route('create-user-role') }}"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <div class="col-12">
                                        <label for="inputLastEnterUsername" class="form-label">Title<span
                                                class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <input type="text" class="form-control form-control-sm" placeholder="Title"
                                                name="title" required />
                                        </div>
                                    </div>
                                    <div class="col-md-8"></div>
                                    <div class="col-md-4">
                                        <div class="d-grid">
                                            <button type="submit" class="btn btn-primary">Save</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--end page-content-wrapper-->
    </div>
    <!--end page-wrapper-->
    <!--start overlay-->
    <div class="overlay toggle-btn-mobile"></div>
    <!--end overlay-->
    <!--Start Back To Top Button-->
    <a href="javaScript:;" class="back-to-top"><i class='bx bxs-up-arrow-alt'></i></a> @include('backend.partial.dashboard_footer')
@endsection