@extends('layouts.master')
@section('content')

<style>
    /* Scrollbar Track */
.table-responsive::-webkit-scrollbar {
    width: 10px; /* Set the width of the scrollbar */
}

/* Scrollbar Thumb */
.table-responsive::-webkit-scrollbar-thumb {
    background: #888; /* Color of the thumb */
    border-radius: 5px; /* Round the corners of the thumb */
}

/* Scrollbar Track on Hover */
.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #555; /* Change color on hover */
}

/* Scrollbar Track */
.table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1; /* Color of the track */
}

/* Scrollbar Track on Hover */
.table-responsive::-webkit-scrollbar-track:hover {
    background: #ddd; /* Change color on hover */
}
.table-responsive{
    cursor: pointer;
}
</style>
    <!-- Main Content-->
    <div class="main-content side-content pt-0">

        <div class="main-container container-fluid">
            <div class="inner-body">

                <!-- Page Header -->
                <div class="page-header">
                    <div>
                        <h2 class="main-content-title tx-24 mg-b-5">Manage Role</h2>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Role</li>
                        </ol>
                    </div>
                    <div class="d-flex">
                        <div class="justify-content-center">
                            <a class="btn ripple btn-primary" data-bs-target="#modal-datepicker" data-bs-toggle="modal"
                                href=""> <i class="fe fe-plus"></i></a>
                        </div>
                    </div>
                </div>
                <!-- Datepicker modal -->
                <div class="modal" id="modal-datepicker">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content modal-content-demo">
                            <div class="modal-header">
                                <h6 class="modal-title">Add Roll</h6><button aria-label="Close" class="btn-close"
                                    data-bs-dismiss="modal" type="button"></button>
                            </div>
                            <div class="modal-body">
                                <h6>Name</h6>
                                <!-- Select2 -->
                                <input type="text" class="edit-item-date form-control" placeholder="Enter Role Name"
                                    name="name" id="eidtrolename">

                                <div class="table-responsive mt-5">
                                    <table id="example3" class="table table-striped table-bordered text-nowrap">
                                        <thead>
                                            <tr>
                                                <th>Modules</th>
                                                <th>Permisions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <div>
                                                        <input type="checkbox" name="" id="">
                                                        <label for="">User</label>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class='col-md-12'>
                                                        <div class='col-md-2'>
                                                            <input type="checkbox" name="" id="">
                                                            <label for="">User</label>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button class="btn ripple btn-primary" type="button">Save changes</button>
                                <button class="btn ripple btn-secondary" data-bs-dismiss="modal"
                                    type="button">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Datepicker modal -->

                <div class="row row-sm">
                    <div class="col-lg-12">
                        <div class="card custom-card">
                            <div class="card-body">
                                <div>
                                    <h6 class="main-content-label mb-1">Vertical Scrollable Data Table</h6>
                                    <p class="text-muted card-sub-title">Responsive is an extension for DataTables that
                                        resolves that problem by optimising the table's layout for different screen sizes
                                        through the dynamic insertion and removal of columns from the table.</p>
                                </div>
                                <div class="table-responsive">
                                    <table id="example3" class="table table-striped table-bordered text-nowrap">
                                        <thead>
                                            <tr>
                                                <th>Role</th>
                                                <th>Permisions</th>
                                                <th>Action</th>

                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Hr</td>
                                                <td>
                                                    <div class="col-md-12 d-flex  flex-wrap">
                                                        <div class="role col-md-2 mt-2">
                                                            <span class="bg-success p-1 rounded">Edit</span>
                                                        </div>

                                                        <div class="role col-md-2 mt-2">
                                                            <span class="bg-success p-1 rounded">Create</span>
                                                        </div>

                                                        <div class="role col-md-2 mt-2">
                                                            <span class="bg-success p-1 rounded">Create</span>
                                                        </div>

                                                        <div class="role col-md-2 mt-2">
                                                            <span class="bg-success p-1 rounded">Edit</span>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex">
                                                        <!-- <a class="btn ripple btn-info" data-bs-target="#scrollingmodal" data-bs-toggle="modal" href="">  <i class="fe fe-edit"></i></a> -->
                                                        <a class="btn ripple btn-info" href="/editrole"> <i
                                                                class="fe fe-edit"></i></a>
                                                        <a class="btn ripple btn-danger ms-2" data-bs-toggle="modal"
                                                            href=""> <i class="fe fe-trash"></i></a>
                                                    </div>
                                                </td>

                                            </tr>

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



        <div class="modal" id="scrollingmodal">
            <div class="modal-dialog" role="document">
                <div class="modal-content modal-content-demo">
                    <div class="modal-header">
                        <h6 class="modal-title">Edit Role</h6><button aria-label="Close" class="btn-close"
                            data-bs-dismiss="modal" type="button"></button>
                    </div>
                    <div class="modal-body">
                        <h6>Name</h6>
                        <!-- Select2 -->
                        <input type="text" class="edit-item-date form-control" placeholder="Enter Role Name"
                            name="name" id="eidtrolename">

                        <div class="table-responsive mt-5">
                            <table id="example3" class="table table-striped table-bordered text-nowrap">
                                <thead>
                                    <tr>
                                        <th>Modules</th>
                                        <th>Permisions</th>

                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <div>
                                                <input type="checkbox" name="" id="">
                                                <label for="">User</label>

                                            </div>
                                        </td>
                                        <td>

                                            <div class='col-md-12'>
                                                <div class='col-md-2'>
                                                    <input type="checkbox" name="" id="">
                                                    <label for="">User</label>

                                                </div>

                                            </div>

                                        </td>

                                    </tr>

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

                    </div>
                    <div class="modal-footer">
                        <button class="btn ripple btn-primary" type="button">Save changes</button>
                        <button class="btn ripple btn-secondary" data-bs-dismiss="modal" type="button">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection