@extends('layouts.default')
@section('content')
            <div class="page-title">
                    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li><h1>Add Roles</h1></li>
            <li class="breadcrumb-item">
                <a href="{{ url('index') }}">
                    <svg width="16" height="16" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M2.125 6.375L8.5 1.41667L14.875 6.375V14.1667C14.875 14.5424 14.7257 14.9027 14.4601 15.1684C14.1944 15.4341 13.8341 15.5833 13.4583 15.5833H3.54167C3.16594 15.5833 2.80561 15.4341 2.53993 15.1684C2.27426 14.9027 2.125 14.5424 2.125 14.1667V6.375Z" stroke="var(--bs-body-color)" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M6.375 15.5833V8.5H10.625V15.5833" stroke="var(--bs-body-color)" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    Home
                </a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">Add Roles</li>
        </ol>
    </nav>
                <a class="text-primary fs-13" data-bs-toggle="offcanvas" href="#addTaskmodal" role="button" aria-controls="addTaskmodal">+ Add Task</a>
            </div>
            <div class="container">
                <div class="row">
                    <h4 class="mb-3">Account Setting</h4>
                    <div class="col-xl-3">
                        <div class="row">
                        
                            <div class="col-xl-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title">Personal</h4>
                                    </div>
                                    <div class="card-body px-0 py-2">
                                        <div class="list-group">
                                            <a href="javascript:void(0);" class="list-group-item list-group-item-action border-0">
                                                <i class="fa-solid fa-user text-primary me-2"></i> Profile
                                            </a>
                                            <a href="javascript:void(0);" class="list-group-item list-group-item-action border-0">
                                                <i class="fa-solid fa-lock text-primary me-2"></i> Password
                                            </a>
                                            <a href="javascript:void(0);" class="list-group-item list-group-item-action border-0">
                                                <i class="fa-solid fa-calendar-days text-primary me-2"></i> Date
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-xl-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title">Company</h4>
                                    </div>
                                    <div class="card-body px-0 py-2">
                                        <div class="list-group">
                                            <a href="javascript:void(0);" class="list-group-item list-group-item-action border-0">
                                                <i class="fa-solid fa-building text-primary me-2"></i> Commpany Details
                                            </a>
                                            <a href="javascript:void(0);" class="list-group-item list-group-item-action border-0">
                                                <i class="fa-solid fa-user-plus text-primary me-2"></i> Team Members
                                            </a>
                                            <a href="javascript:void(0);" class="list-group-item list-group-item-action border-0">
                                                <i class="far fa-clock text-primary me-2"></i> Format setting
                                            </a>
                                            <a href="javascript:void(0);" class="list-group-item list-group-item-action border-0">
                                                <i class="fa-solid fa-briefcase text-primary me-2"></i> Job boards
                                            </a>
                                            <a href="javascript:void(0);" class="list-group-item list-group-item-action border-0">
                                                <i class="far fa-user text-primary me-2"></i> Positions
                                            </a>
                                            <a href="javascript:void(0);" class="list-group-item list-group-item-action border-0">
                                                <i class="fas fa-times-circle text-danger me-2"></i>Rejections resions
                                            </a>
                                            <a href="javascript:void(0);" class="list-group-item list-group-item-action border-0">
                                                <i class="fas fa-envelope text-primary me-2"></i>Automated message
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                    
                    <div class="col-xl-9">
                        <div class="row">
                            
                            <div class="col-xl-12">
                                <div class="card overflow-hidden">
                                    <div class="card-header d-block border-0">
                                        <h4 class="card-title">Team Members</h4>
                                        <p class="mb-0">Invitite or manage your origanisation's members.</p>
                                    </div>
                                    <div class="card-body bg-light py-2">
                                        <div class="d-flex justify-content-between">
                                            <h4 class="mb-0">All Users</h4>
                                            <h4 class="mb-0 text-primary">Users Role Manager</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-xl-12">
                                <h5 class="mb-2"><i class="fa-solid fa-user-plus text-primary"></i> Job Management</h5>
                            </div>
                            <div class="col-xl-12 mb-2">
                                <div class="card">
                                    <div class="card-body table-card-body p-0">
                                        <div class="table-responsive">
                                            <table class="table table-borderless my-1">
                                                <thead>
                                                    <tr>
                                                        <th class="mw-250">Actions</th>
                                                        <th class="mw-100 text-end">Member</th>
                                                        <th class="mw-100 text-end">Manager</th>
                                                        <th class="mw-100 text-end">Admin</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            <h6 class="mb-0">Create new job and stage</h6>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-warning float-end">
                                                                <input type="checkbox" class="form-check-input" checked="" id="customCheckBox1" required="">
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-primary float-end">
                                                                <input type="checkbox" class="form-check-input" id="customCheckBox2" required="">
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-success float-end">
                                                                <input type="checkbox" class="form-check-input" checked="" id="customCheckBox3" required="">
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <h6 class="mb-0">Edit job and stage</h6>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-warning float-end">
                                                                <input type="checkbox" class="form-check-input" id="customCheckBox4" required="">
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-primary float-end">
                                                                <input type="checkbox" class="form-check-input" checked="" id="customCheckBox5" required="">
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-success float-end">
                                                                <input type="checkbox" class="form-check-input" checked="" id="customCheckBox6" required="">
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <h6 class="mb-0">Atchive jobs</h6>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-warning float-end">
                                                                <input type="checkbox" class="form-check-input" checked="" id="customCheckBox7" required="">
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-primary float-end">
                                                                <input type="checkbox" class="form-check-input" id="customCheckBox8" required="">
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-success float-end">
                                                                <input type="checkbox" class="form-check-input" checked="" id="customCheckBox9" required="">
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <h6 class="mb-0">Change jobs status</h6>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkboxcheckbox-warning float-end">
                                                                <input type="checkbox" class="form-check-input" checked="" id="customCheckBox10" required="">
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-primary float-end">
                                                                <input type="checkbox" class="form-check-input"  checked="" id="customCheckBox11" required="">
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-success float-end">
                                                                <input type="checkbox" class="form-check-input" id="customCheckBox12" required="">
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-xl-12">
                                <h5 class="mb-2"><i class="fa-solid fa-user text-primary"></i> Candidate Management</h5>
                            </div>
                            <div class="col-xl-12 mb-2">
                                <div class="card">
                                    <div class="card-body table-card-body p-0">
                                        <div class="table-responsive">
                                            <table class="table table-borderless my-1">
                                                <thead>
                                                    <tr>
                                                        <th class="mw-250">Actions</th>
                                                        <th class="mw-100 text-end">Member</th>
                                                        <th class="mw-100 text-end">Manager</th>
                                                        <th class="mw-100 text-end">Admin</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            <h6 class="mb-0">Create new job and stage</h6>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-warning float-end">
                                                                <input type="checkbox" class="form-check-input" checked="" id="customCheckBox13" required="">
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-primary float-end">
                                                                <input type="checkbox" class="form-check-input" id="customCheckBox14" required="">
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-success float-end">
                                                                <input type="checkbox" class="form-check-input" checked="" id="customCheckBox15" required="">
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <h6 class="mb-0">Edit job and stage</h6>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-warning float-end">
                                                                <input type="checkbox" class="form-check-input" id="customCheckBox16" required="">
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-primary float-end">
                                                                <input type="checkbox" class="form-check-input" checked="" id="customCheckBox17" required="">
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-success float-end">
                                                                <input type="checkbox" class="form-check-input" checked="" id="customCheckBox18" required="">
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <h6 class="mb-0">Atchive jobs</h6>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-warning float-end">
                                                                <input type="checkbox" class="form-check-input" checked="" id="customCheckBox19" required="">
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-primary float-end">
                                                                <input type="checkbox" class="form-check-input" id="customCheckBox20" required="">
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-success float-end">
                                                                <input type="checkbox" class="form-check-input" checked="" id="customCheckBox21" required="">
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <h6 class="mb-0">Change jobs status</h6>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkboxcheckbox-warning float-end">
                                                                <input type="checkbox" class="form-check-input" checked="" id="customCheckBox22" required="">
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-primary float-end">
                                                                <input type="checkbox" class="form-check-input"  checked="" id="customCheckBox23" required="">
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-success float-end">
                                                                <input type="checkbox" class="form-check-input" id="customCheckBox24" required="">
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-xl-12">
                                <h5 class="mb-2"><i class="fa-solid fa-users text-primary"></i> Commpany Management</h5>
                            </div>
                            <div class="col-xl-12 mb-2">
                                <div class="card">
                                    <div class="card-body table-card-body p-0">
                                        <div class="table-responsive">
                                            <table class="table table-borderless my-1">
                                                <thead>
                                                    <tr>
                                                        <th class="mw-250">Actions</th>
                                                        <th class="mw-100 text-end">Member</th>
                                                        <th class="mw-100 text-end">Manager</th>
                                                        <th class="mw-100 text-end">Admin</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            <h6 class="mb-0">Create new job and stage</h6>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-warning float-end">
                                                                <input type="checkbox" class="form-check-input" checked="" id="customCheckBox25" required="">
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-primary float-end">
                                                                <input type="checkbox" class="form-check-input" id="customCheckBox26" required="">
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-success float-end">
                                                                <input type="checkbox" class="form-check-input" checked="" id="customCheckBox27" required="">
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <h6 class="mb-0">Edit job and stage</h6>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-warning float-end">
                                                                <input type="checkbox" class="form-check-input" id="customCheckBox28" required="">
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-primary float-end">
                                                                <input type="checkbox" class="form-check-input" checked="" id="customCheckBox29" required="">
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-success float-end">
                                                                <input type="checkbox" class="form-check-input" checked="" id="customCheckBox30" required="">
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <h6 class="mb-0">Atchive jobs</h6>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-warning float-end">
                                                                <input type="checkbox" class="form-check-input" checked="" id="customCheckBox31" required="">
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-primary float-end">
                                                                <input type="checkbox" class="form-check-input" id="customCheckBox32" required="">
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-success float-end">
                                                                <input type="checkbox" class="form-check-input" checked="" id="customCheckBox33" required="">
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <h6 class="mb-0">Change jobs status</h6>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkboxcheckbox-warning float-end">
                                                                <input type="checkbox" class="form-check-input" checked="" id="customCheckBox34" required="">
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-primary float-end">
                                                                <input type="checkbox" class="form-check-input"  checked="" id="customCheckBox35" required="">
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="form-check custom-checkbox checkbox-success float-end">
                                                                <input type="checkbox" class="form-check-input" id="customCheckBox36" required="">
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
@endsection

@push('modals')
<div class="offcanvas offcanvas-end custom-offcanvas" tabindex="-1" id="addTaskmodal">
    <div class="offcanvas-header pb-0">
        <h2 class="modal-title fs-5" id="#gridSystemModal1">Add New Task</h2>
        <button type="button" class="btn btn-square btn-danger light btn-sm ms-auto" data-bs-dismiss="offcanvas" aria-label="Close">
            <i class="fa-solid fa-xmark"></i>
        </button>
    </div>
    <div class="offcanvas-body">
        <form class="row">
            <div class="col-xl-6 mb-3">
                <label for="exampleFormControlInputfirst" class="form-label">Title<span class="text-danger">*</span></label>
                <input type="text" class="form-control" id="exampleFormControlInputfirst" placeholder="Title">
            </div>  
            <div class="col-xl-6 mb-3">
                <label class="form-label">Project<span class="text-danger">*</span></label>
                <select class="selectpicker form-select">
                    <option data-display="Select">Project</option>
                    <option value="html">HTML</option>
                    <option value="css">CSS</option>
                    <option value="javascript">JavaScript</option>
                </select>
            </div>  
            <div class="col-xl-6 mb-3">
                <label for="exampleFormControlInputthree" class="form-label">Start Date<span class="text-danger">*</span></label>
                <input type="text" class="form-control bs-datepicker" id="exampleFormControlInputthree">
            </div>
            <div class="col-xl-6 mb-3">
                <label for="exampleFormControlInputfour" class="form-label">End Date<span class="text-danger">*</span></label>
                <input type="text" class="form-control bs-datepicker" id="exampleFormControlInputfour">
            </div>
            <div class="col-xl-6 mb-3">
                <label class="form-label">Estimated Hour<span class="text-danger">*</span></label>
                <input type="text" class="form-control bs-datepicker" value="09:30">
            </div>
            <div class="col-xl-6 mb-3">
                <label class="form-label">Status<span class="text-danger">*</span></label>
                <select class="selectpicker form-select">
                    <option data-display="Select">Status</option>
                    <option value="In Progess">In Progess</option>
                    <option value="Pending">Pending</option>
                    <option value="Completed">Completed</option>
                </select>
            </div>
            <div class="col-xl-6 mb-3">
                <label class="form-label">Priority<span class="text-danger">*</span></label>
                <select class="selectpicker form-select">
                    <option data-display="Select">Priority</option>
                    <option value="Hight">Hight</option>
                    <option value="Medium">Medium</option>
                    <option value="Low">Low</option>
                </select>
            </div>
            <div class="col-xl-6 mb-3">
                <label class="form-label">Category<span class="text-danger">*</span></label>
                <select class="selectpicker form-select">
                    <option data-display="Select">Category</option>
                    <option value="Designing">Designing</option>
                    <option value="Development">Development</option>
                    <option value="react developer">React Developer</option>
                </select>
            </div>
            <div class="col-xl-6 mb-3">
                <label class="form-label">Permission<span class="text-danger">*</span></label>
                <select class="selectpicker form-select">
                    <option data-display="Select">Permission</option>
                    <option value="Public">Public</option>
                    <option value="Private">Private</option>
                </select>
            </div>
            <div class="col-xl-6 mb-3">
                <label class="form-label">Deadline add<span class="text-danger">*</span></label>
                <select class="selectpicker form-select">
                    <option data-display="Select">Deadline</option>
                    <option value="Yes">Yes</option>
                    <option value="No">No</option>
                </select>
            </div>
            <div class="col-xl-6 mb-3">
                <label class="form-label">Assigned to<span class="text-danger">*</span></label>
                <select class="selectpicker form-select">
                    <option data-display="Select">Assigned</option>
                    <option value="Bernard">Bernard</option>
                    <option value="Sergey Brin">Sergey Brin</option>
                    <option value="Larry Ellison">Larry Ellison</option>
                </select>
            </div>
            <div class="col-xl-6 mb-3">
                <label class="form-label">Responsible Person<span class="text-danger">*</span></label>
                <input name='tagify' class="form-control basic-tagify" value='James, Harry'>
            </div>
            <div class="col-xl-12 mb-3">
                <label class="form-label">Description<span class="text-danger">*</span></label>
                <textarea rows="3" class="form-control"></textarea>
            </div>
            <div class="col-xl-12 mb-3">
                <label class="form-label">Summary<span class="text-danger">*</span></label>
                <textarea rows="3" class="form-control"></textarea>
            </div>
            <div class="col-xl-12">                 
                <button class="btn btn-danger light">Cancel</button>
                <button class="btn btn-primary ms-2">Help Desk</button>
            </div>
        </form>
    </div>
</div>
@endpush