@extends('layouts.app')

@section('title', 'Role Management')


@section('nav-header')

<div class="iq-navbar-header" style="height: 215px;"><div class="iq-navbar-header" style="height: 215px;">
                <div class="container-fluid iq-container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="flex-wrap d-flex justify-content-between align-items-center">
                                <div>
                                    <h1>User Management</h1>
                                </div>
                                <div>
                                    <button type="button" class="btn btn-success rounded-pill" data-bs-toggle="modal"
                                        data-bs-target="#useraddmodule">
                                        <svg class="icon-25" width="25" viewBox="0 0 24 24" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path d="M12.0001 8.32739V15.6537" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round"></path>
                                            <path d="M15.6668 11.9904H8.3335" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round"></path>
                                        </svg>
                                        &nbsp;Add a New User
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="iq-header-img">
                    <img src="../assets/images/dashboard/top-header.png" alt="header"
                        class="theme-color-default-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header1.png" alt="header"
                        class="theme-color-purple-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header2.png" alt="header"
                        class="theme-color-blue-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header3.png" alt="header"
                        class="theme-color-green-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header4.png" alt="header"
                        class="theme-color-yellow-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header5.png" alt="header"
                        class="theme-color-pink-img img-fluid w-100 h-100 animated-scaleX">
                </div>
            </div> <!-- Nav Header Component End -->
            <!--Nav End-->

@endsection



@section('content')

<!-- Table -->
        <div class="conatiner-fluid content-inner mt-n5 py-0">

            <div class="modal fade" id="useraddmodule" tabindex="-1" aria-labelledby="useraddmodule" aria-hidden="true">
                <div class="modal-dialog modal-halfscreen">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="useraddmodule">Create a New User</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            

                            <form>
                                <div class="row">
                                    <div class="col-12">
                                        <label class="form-label">Full Name</label>
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control" placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label">NIC No:</label>
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control" placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label">Phone Number</label>
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control" placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label">Email Address</label>
                                        <div class="input-group mb-3">
                                            <input type="email" class="form-control" placeholder="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label" for="choices-single-default">Select Role</label>
                                        <select class="form-select" data-trigger name="choices-single-default" id="choices-single-default">
                                            <option value="">Select Role</option>
                                            <option value="Choice 1">Role 1</option>
                                            <option value="Choice 2">Role 2</option>
                                            <option value="Choice 3">Role 3</option>
                                        </select>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label">Username</label>
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control" placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label">Password</label>
                                        <div class="input-group mb-3">
                                            <input type="password" class="form-control" placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label">Confirm Password</label>
                                        <div class="input-group mb-3">
                                            <input type="password" class="form-control" placeholder="">
                                        </div>
                                    </div>
                                </div>
                            </form>


                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Create User</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="usereditmodule" tabindex="-1" aria-labelledby="usereditmodule"
                aria-hidden="true">
                <div class="modal-dialog  modal-halfscreen">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="usereditmodule">Update User</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            

                            <form>
                                <div class="row">
                                    <div class="col-12">
                                        <label class="form-label">Full Name</label>
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control" placeholder="" value="John Doe">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label">NIC No:</label>
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control" placeholder="" value="99261584V">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label">Phone Number</label>
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control" placeholder="" value="0715454454">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label">Email Address</label>
                                        <div class="input-group mb-3">
                                            <input type="email" class="form-control" placeholder="" value="johndoe@gmail.com">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label" for="choices-single-default">Select Role</label>
                                        <select class="form-select" data-trigger name="choices-single-default" id="choices-single-default">
                                            <option value="" disabled>Select Role</option>
                                            <option value="Choice 1" selected>Role 1</option>
                                            <option value="Choice 2">Role 2</option>
                                            <option value="Choice 3">Role 3</option>
                                        </select>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label">Username</label>
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control" readonly="" value="testuser">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label">User Status</label>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="userstatusswitch" checked>
                                            <label class="form-check-label">Inactive / Active</label>
                                        </div>
                                    </div>
                                </div>
                            </form>


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

            <div class="modal fade" id="userviewmodule" tabindex="-1" aria-labelledby="userviewmodule"
                aria-hidden="true">
                <div class="modal-dialog  modal-halfscreen">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="userviewmodule">View User</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            

                            <form>
                                <div class="row">
                                    <div class="col-12">
                                        <label class="form-label">Full Name</label>
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control" readonly="" value="John Doe">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label">NIC No:</label>
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control" readonly="" value="992613288V">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label">Phone Number</label>
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control" readonly="" value="0715454454">
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label">Email Address</label>
                                        <div class="input-group mb-3">
                                            <input type="email" class="form-control" readonly="" value="testdoe@gmail.com">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label" for="role-select-default">Select Role</label>
                                        <select class="form-select" data-trigger name="role-select-default" id="role-select-default" disabled>
                                            <option value="" disabled>Select Role</option>
                                            <option value="Choice 1" selected>Role 1</option>
                                            <option value="Choice 2">Role 2</option>
                                            <option value="Choice 3">Role 3</option>
                                        </select>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label">Username</label>
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control" readonly="" value="testuser">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label">User Status</label>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="userstatusswitch" readonly="" checked disabled>
                                            <label class="form-check-label">Inactive / Active</label>
                                        </div>
                                    </div>
                                </div>
                            </form>


                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-12">
                    <div class="card">

                        <div class="card-body">

                            <div class="table-responsive">
                                <table id="datatable" class="table table-striped" data-toggle="data-table">
                                    <thead>
                                        <tr>

                                            <th>User Name</th>
                                            <th>NIC No:</th>
                                            <th>User Role</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                        <tr>
                                            <td>Virat Kholi</td>
                                            <td>2564545515415</td>
                                            <td>Manager</td>
                                            <td><span class="badge bg-primary">Active</span></td>
                                            <td>
                                                <a data-bs-toggle="tooltip" data-bs-placement="top" title="Edit">
                                                    <button class="btn btn btn-icon btn-warning" type="button"
                                                        data-bs-toggle="modal" data-bs-target="#usereditmodule">
                                                        <span class="btn-inner">

                                                            <svg class="icon-35" width="20" viewBox="0 0 24 24"
                                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <path
                                                                    d="M11.4925 2.78906H7.75349C4.67849 2.78906 2.75049 4.96606 2.75049 8.04806V16.3621C2.75049 19.4441 4.66949 21.6211 7.75349 21.6211H16.5775C19.6625 21.6211 21.5815 19.4441 21.5815 16.3621V12.3341"
                                                                    stroke="currentColor" stroke-width="1.5"
                                                                    stroke-linecap="round" stroke-linejoin="round">
                                                                </path>
                                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                                    d="M8.82812 10.921L16.3011 3.44799C17.2321 2.51799 18.7411 2.51799 19.6721 3.44799L20.8891 4.66499C21.8201 5.59599 21.8201 7.10599 20.8891 8.03599L13.3801 15.545C12.9731 15.952 12.4211 16.181 11.8451 16.181H8.09912L8.19312 12.401C8.20712 11.845 8.43412 11.315 8.82812 10.921Z"
                                                                    stroke="currentColor" stroke-width="1.5"
                                                                    stroke-linecap="round" stroke-linejoin="round">
                                                                </path>

                                                            </svg>
                                                        </span>
                                                    </button>
                                                    <a data-bs-toggle="tooltip" data-bs-placement="top" title="View">
                                                        <button class="btn btn btn-icon btn-info" type="button"
                                                            data-bs-toggle="modal" data-bs-target="#userviewmodule">
                                                            <span class="btn-inner">
                                                                <svg class="icon-35" width="20" viewBox="0 0 24 24"
                                                                    fill="none" xmlns="http://www.w3.org/2000/svg"
                                                                    stroke="currentColor">
                                                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                                                        d="M15.1614 12.0531C15.1614 13.7991 13.7454 15.2141 11.9994 15.2141C10.2534 15.2141 8.83838 13.7991 8.83838 12.0531C8.83838 10.3061 10.2534 8.89111 11.9994 8.89111C13.7454 8.89111 15.1614 10.3061 15.1614 12.0531Z"
                                                                        stroke="currentColor" stroke-width="1.5"
                                                                        stroke-linecap="round" stroke-linejoin="round">
                                                                    </path>
                                                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                                                        d="M11.998 19.355C15.806 19.355 19.289 16.617 21.25 12.053C19.289 7.48898 15.806 4.75098 11.998 4.75098H12.002C8.194 4.75098 4.711 7.48898 2.75 12.053C4.711 16.617 8.194 19.355 12.002 19.355H11.998Z"
                                                                        stroke="currentColor" stroke-width="1.5"
                                                                        stroke-linecap="round" stroke-linejoin="round">
                                                                    </path>

                                                                </svg>
                                                            </span>
                                                        </button>
                                                    </a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Sharukh Khan</td>
                                            <td>5615655226256</td>
                                            <td>Clerk</td>
                                            <td><span class="badge bg-primary">Active</span></td>
                                            <td>
                                                <a data-bs-toggle="tooltip" data-bs-placement="top" title="Edit">
                                                    <button class="btn btn btn-icon btn-warning" type="button"
                                                        data-bs-toggle="modal" data-bs-target="#usereditmodule">
                                                        <span class="btn-inner">

                                                            <svg class="icon-35" width="20" viewBox="0 0 24 24"
                                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <path
                                                                    d="M11.4925 2.78906H7.75349C4.67849 2.78906 2.75049 4.96606 2.75049 8.04806V16.3621C2.75049 19.4441 4.66949 21.6211 7.75349 21.6211H16.5775C19.6625 21.6211 21.5815 19.4441 21.5815 16.3621V12.3341"
                                                                    stroke="currentColor" stroke-width="1.5"
                                                                    stroke-linecap="round" stroke-linejoin="round">
                                                                </path>
                                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                                    d="M8.82812 10.921L16.3011 3.44799C17.2321 2.51799 18.7411 2.51799 19.6721 3.44799L20.8891 4.66499C21.8201 5.59599 21.8201 7.10599 20.8891 8.03599L13.3801 15.545C12.9731 15.952 12.4211 16.181 11.8451 16.181H8.09912L8.19312 12.401C8.20712 11.845 8.43412 11.315 8.82812 10.921Z"
                                                                    stroke="currentColor" stroke-width="1.5"
                                                                    stroke-linecap="round" stroke-linejoin="round">
                                                                </path>

                                                            </svg>
                                                        </span>
                                                    </button>
                                                    <a data-bs-toggle="tooltip" data-bs-placement="top" title="View">
                                                        <button class="btn btn btn-icon btn-info" type="button"
                                                            data-bs-toggle="modal" data-bs-target="#userviewmodule">
                                                            <span class="btn-inner">
                                                                <svg class="icon-35" width="20" viewBox="0 0 24 24"
                                                                    fill="none" xmlns="http://www.w3.org/2000/svg"
                                                                    stroke="currentColor">
                                                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                                                        d="M15.1614 12.0531C15.1614 13.7991 13.7454 15.2141 11.9994 15.2141C10.2534 15.2141 8.83838 13.7991 8.83838 12.0531C8.83838 10.3061 10.2534 8.89111 11.9994 8.89111C13.7454 8.89111 15.1614 10.3061 15.1614 12.0531Z"
                                                                        stroke="currentColor" stroke-width="1.5"
                                                                        stroke-linecap="round" stroke-linejoin="round">
                                                                    </path>
                                                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                                                        d="M11.998 19.355C15.806 19.355 19.289 16.617 21.25 12.053C19.289 7.48898 15.806 4.75098 11.998 4.75098H12.002C8.194 4.75098 4.711 7.48898 2.75 12.053C4.711 16.617 8.194 19.355 12.002 19.355H11.998Z"
                                                                        stroke="currentColor" stroke-width="1.5"
                                                                        stroke-linecap="round" stroke-linejoin="round">
                                                                    </path>

                                                                </svg>
                                                            </span>
                                                        </button>
                                                    </a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>John Wick</td>
                                            <td>2115151515</td>
                                            <td>Manager</td>
                                            <td><span class="badge bg-danger">Inactive</span></td>
                                            <td>
                                                <a data-bs-toggle="tooltip" data-bs-placement="top" title="Edit">
                                                    <button class="btn btn btn-icon btn-warning" type="button"
                                                        data-bs-toggle="modal" data-bs-target="#usereditmodule">
                                                        <span class="btn-inner">

                                                            <svg class="icon-35" width="20" viewBox="0 0 24 24"
                                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <path
                                                                    d="M11.4925 2.78906H7.75349C4.67849 2.78906 2.75049 4.96606 2.75049 8.04806V16.3621C2.75049 19.4441 4.66949 21.6211 7.75349 21.6211H16.5775C19.6625 21.6211 21.5815 19.4441 21.5815 16.3621V12.3341"
                                                                    stroke="currentColor" stroke-width="1.5"
                                                                    stroke-linecap="round" stroke-linejoin="round">
                                                                </path>
                                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                                    d="M8.82812 10.921L16.3011 3.44799C17.2321 2.51799 18.7411 2.51799 19.6721 3.44799L20.8891 4.66499C21.8201 5.59599 21.8201 7.10599 20.8891 8.03599L13.3801 15.545C12.9731 15.952 12.4211 16.181 11.8451 16.181H8.09912L8.19312 12.401C8.20712 11.845 8.43412 11.315 8.82812 10.921Z"
                                                                    stroke="currentColor" stroke-width="1.5"
                                                                    stroke-linecap="round" stroke-linejoin="round">
                                                                </path>

                                                            </svg>
                                                        </span>
                                                    </button>
                                                    <a data-bs-toggle="tooltip" data-bs-placement="top" title="View">
                                                        <button class="btn btn btn-icon btn-info" type="button"
                                                            data-bs-toggle="modal" data-bs-target="#userviewmodule">
                                                            <span class="btn-inner">
                                                                <svg class="icon-35" width="20" viewBox="0 0 24 24"
                                                                    fill="none" xmlns="http://www.w3.org/2000/svg"
                                                                    stroke="currentColor">
                                                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                                                        d="M15.1614 12.0531C15.1614 13.7991 13.7454 15.2141 11.9994 15.2141C10.2534 15.2141 8.83838 13.7991 8.83838 12.0531C8.83838 10.3061 10.2534 8.89111 11.9994 8.89111C13.7454 8.89111 15.1614 10.3061 15.1614 12.0531Z"
                                                                        stroke="currentColor" stroke-width="1.5"
                                                                        stroke-linecap="round" stroke-linejoin="round">
                                                                    </path>
                                                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                                                        d="M11.998 19.355C15.806 19.355 19.289 16.617 21.25 12.053C19.289 7.48898 15.806 4.75098 11.998 4.75098H12.002C8.194 4.75098 4.711 7.48898 2.75 12.053C4.711 16.617 8.194 19.355 12.002 19.355H11.998Z"
                                                                        stroke="currentColor" stroke-width="1.5"
                                                                        stroke-linecap="round" stroke-linejoin="round">
                                                                    </path>

                                                                </svg>
                                                            </span>
                                                        </button>
                                                    </a>
                                            </td>
                                        </tr>
                                    </tbody>

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





        </div>
@endsection