@extends('admin_html.layouts.main')

@section('content')
<div class="container-fluid">
                <div class="row ">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">

                            </div>
                            <div class="card-body">
                                <form method="post" action="">
                                    <input type="hidden" name="_token" value="4mkWgynxLA9jV3fXaAx4onfAl40otix94eEZdhSb"
                                        autocomplete="off">

                                    <div class="row mb-3 align-items-center">
                                        <label for="role" class="col-sm-1 col-form-label">Role <code>*</code></label>
                                        <div class="col-sm-3">
                                            <select id="role" name="role" class="form-control">
                                                <option value=""> Select User</option>
                                                <option selected="" value="1">Administrator</option>
                                                <option value="2">Subscriber</option>
                                                <option value="3">Editor</option>
                                                <option value="4">Writer</option>
                                                <option value="5">Manager</option>
                                            </select>
                                        </div>

                                        <label for="section" class="col-sm-1 col-form-label">Section
                                            <code>*</code></label>
                                        <div class="col-sm-3">
                                            <select id="section" name="section" class="form-control">
                                                <option value=""> Select Section </option>
                                                <option value="1">Dashboard</option>
                                                <option selected="" value="2">Users</option>
                                                <option value="11">Roles</option>
                                                <option value="14">Permission</option>
                                                <option value="19">Base Setting</option>
                                                <option value="20">Logs</option>
                                                <option value="21">Category</option>
                                                <option value="22">Articles</option>
                                                <option value="23">Home Items</option>
                                                <option value="24">Menu Types</option>
                                                <option value="25">Menu</option>
                                                <option value="26">Newsletter</option>
                                                <option value="27">Mediamanager</option>
                                                <option value="28">Frontend</option>
                                                <option value="29">Tags</option>
                                                <option value="30">Contact Us</option>
                                                <option value="31">Ads</option>
                                                <option value="32">Mail Sending</option>
                                                <option value="33">Mail Template</option>
                                                <option value="34">File Edit</option>
                                                <option value="35">Theme</option>
                                                <option value="36">Gallery</option>
                                                <option value="37">Banner</option>
                                            </select>
                                        </div>

                                        <!-- Button aligned with inputs -->
                                        <div class="col-sm-4">
                                            <button type="submit" class="btn btn-primary">Save</button>
                                        </div>
                                    </div>
                                </form>

                                <table class="table table-bordered">
                                    <tbody>
                                        <tr>
                                            <th width="15%">User Role</th>
                                            <th width="15%">Section Name</th>
                                            <th width="60%">Permissions</th>
                                            <th width="12%" class="text-center">Action</th>
                                        </tr>
                                        <tr>
                                            <td>Administrator</td>
                                            <td>Users</td>
                                            <td>
                                                <div class="row">
                                                    <div class="col-4 mb-2">
                                                        <input id="" type="checkbox" class="role-permission" checked=""
                                                            data-page="author.users" data-section="Users"
                                                            data-name="Users" data-action="author.users"
                                                            data-role="Administrator">
                                                        <label class="form-check-label">Users</label>&nbsp;
                                                    </div>
                                                    <div class="col-4 mb-2">
                                                        <input id="" type="checkbox" class="role-permission" checked=""
                                                            data-page="author.user_profile" data-section="Users"
                                                            data-name="User profile" data-action="author.user_profile"
                                                            data-role="Administrator">
                                                        <label class="form-check-label">User profile</label>&nbsp;
                                                    </div>
                                                    <div class="col-4 mb-2">
                                                        <input id="" type="checkbox" class="role-permission" checked=""
                                                            data-page="author.user_create" data-section="Users"
                                                            data-name="User create" data-action="author.user_create"
                                                            data-role="Administrator">
                                                        <label class="form-check-label">User create</label>&nbsp;
                                                    </div>
                                                    <!-- Add more permissions here -->
                                                </div>
                                            </td>
                                            <td></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="card-footer">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
@endsection('content')