@extends('layouts.master')

@section('mainContent')
<div class="page-wrapper page-settings">
    <div class="content">
        <div class="content-page-header content-page-headersplit">
            <h5>Clients</h5>
            <div class="list-btn">
                <a class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#add-client" href="javascript:;"><i class="fa fa-plus me-2"></i>Add New</a>
            </div>
        </div>
        <div class="row">
            <div class="col-12 ">
                <div class="table-resposnive">
                    <table class="table datatable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>Mobile</th>
                                <th>Email</th>
                                <th>Location</th>
                                <th class="text-end">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>Adminstrator</td>
                                <td>9639639631</td>
                                <td>test@yopmail.com</td>
                                <td>Location</td>
                                <td class="justify-content-end d-flex align-items-center gap-14">
                                    <div class="table-actions d-flex gap-10">

                                        <a class="delete-table me-2" data-bs-toggle="modal" data-bs-target="#edit-client" href="javascript:;">
                                           <i class="fe fe-edit-3"></i>
                                        </a>
                                        <a class="delete-table" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#delete-item">
                                            <i class="fe fe-trash-2"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('customModal')
<!-- Add Role -->
<div class="modal fade" id="add-client" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered ">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add Role</h5>
                <button type="button" class="btn-close close-modal" data-bs-dismiss="modal" aria-label="Close">
                    <i class="fe fe-x"></i>
                </button>
            </div>
            <form action="roles-permissions.html">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <div class="form-set">
                                <label>Role Name <span class="mandatory">*</span></label>
                                <input type="text" class="form-control" placeholder="Enter Role Name">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer pt-0">
                    <button type="submit" class="btn btn-primary">Submit</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- /Add Role -->
<!-- Edit Role -->
<div class="modal fade" id="edit-client" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered ">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Edit Role</h5>
                <button type="button" class="btn-close close-modal" data-bs-dismiss="modal" aria-label="Close">
                    <i class="fe fe-x"></i>
                </button>
            </div>
            <form action="roles-permissions.html">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <div class="form-set">
                                <label>Role Name <span class="mandatory">*</span></label>
                                <input type="text" class="form-control" placeholder="Enter Role Name" value="Admin">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer pt-0">
                    <button type="submit" class="btn btn-primary">Submit</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- /Edit Role -->

<!-- Delete -->
<div class="modal fade" id="delete-item" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered ">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Delete Roles Permission</h5>
                <button type="button" class="btn-close close-modal" data-bs-dismiss="modal" aria-label="Close">
                    <i class="fe fe-x"></i>
                </button>
            </div>
            <form action="roles-permissions.html">
                @csrf
                <div class="modal-body">
                    <div class="del-modal">
                        <p>Are you sure want to Delete?</p>
                    </div>
                </div>
                <div class="modal-footer pt-0">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Yes</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- /Delete -->
@endsection