<!DOCTYPE html>
<html lang="en">
<!-- Mirrored from truelysell.dreamstechnologies.com/html/template/staff-details.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 27 May 2025 11:07:18 GMT -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Truelysell</title>
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.svg">
<!-- Themescript -->
<script src="assets/js/theme-script.js" type="544f1a962e998e74fcd97c34-text/javascript"></script>
<!-- Aos -->
<link rel="stylesheet" href="assets/css/animate.css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Tabler Icon CSS -->
<link rel="stylesheet" href="assets/plugins/tabler-icons/tabler-icons.css">
<!-- select CSS -->
<link rel="stylesheet" href="assets/plugins/select2/css/select2.min.css">
<!-- Datetimepicker CSS -->
<link rel="stylesheet" href="assets/css/bootstrap-datetimepicker.min.css">
<!-- Fontawesome Icon CSS -->
<link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">
<!-- Feather CSS -->
<link rel="stylesheet" href="assets/css/feather.css">
<!-- Style CSS -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body class="provider-page">
<div class="main-wrapper">
<!-- Header -->
<div class="header provider-header">
<!-- Logo -->
<div class="header-left active">
<a href="index.html" class="logo logo-normal">
<img src="assets/img/logo.webp" alt="Logo">
</a>
<a href="index.html" class="logo-small">
<img src="assets/img/logo-small.svg" alt="Logo">
</a>
<a id="toggle_btn" href="javascript:void(0);">
<i class="ti ti-menu-deep"></i>
</a>
</div>
<!-- /Logo -->
<a id="mobile_btn" class="mobile_btn" href="#sidebar">
<span class="bar-icon">
<span></span>
<span></span>
<span></span>
</span>
</a>
<div class="header-user">
<div class="nav user-menu">
<!-- Search -->
<div class="nav-item nav-search-inputs">
<div class="top-nav-search">
<a href="javascript:void(0);" class="responsive-search">
<i class="fa fa-search"></i>
</a>
<form action="#" class="dropdown">
<div class="searchinputs" id="dropdownMenuClickable">
<input type="text" placeholder="Search">
<div class="search-addon">
<span><i class="feather-user"></i></span>
</div>
</div>
</form>
</div>
</div>
<!-- /Search -->
<div class="d-flex align-items-center">
<div class="me-2 site-link">
<a href="javascript:void(0);" class="d-flex align-items-center justify-content-center me-2"><i class="feather-globe me-1"></i>Visit Website</a>
</div>
<div class="provider-head-links">
<div>
<a href="javascript:void(0);" id="dark-mode-toggle" class="dark-mode-toggle me-2">
<i class="fa-regular fa-moon"></i>
</a>
<a href="javascript:void(0);" id="light-mode-toggle" class="dark-mode-toggle me-2">
<i class="ti ti-sun-filled"></i>
</a>
</div>
</div>
<div class="provider-head-links">
<a href="javascript:void(0);" class="d-flex align-items-center justify-content-center me-2 dropdown-toggle notify-link" data-bs-toggle="dropdown"><i class="feather-bell"></i></a>
<div class="dropdown-menu dropdown-menu-end notification-dropdown p-4">
<div class="d-flex dropdown-body align-items-center justify-content-between border-bottom p-0 pb-3 mb-3">
<h6 class="notification-title">Notifications <span class="fs-18 text-gray"> (2)</span></h6>
<div class="d-flex align-items-center">
<a href="#" class="text-primary fs-15 me-3 lh-1">Mark all as read</a>
<div class="dropdown">
<a href="javascript:void(0);" class="bg-white dropdown-toggle"
data-bs-toggle="dropdown" data-bs-auto-close="outside"><i class="ti ti-calendar-due me-1"></i>Today
</a>
<ul class="dropdown-menu mt-2 p-3">
<li>
<a href="javascript:void(0);" class="dropdown-item rounded-1">
This Week
</a>
</li>
<li>
<a href="javascript:void(0);" class="dropdown-item rounded-1">
Last Week
</a>
</li>
<li>
<a href="javascript:void(0);" class="dropdown-item rounded-1">
Last Week
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="noti-content">
<div class="d-flex flex-column">
<div class="border-bottom mb-3 pb-3">
<a href="notification.html">
<div class="d-flex">
<span class="avatar avatar-lg me-2 flex-shrink-0">
<img src="assets/img/profiles/avatar-52.jpg" alt="Profile" class="rounded-circle">
</span>
<div class="flex-grow-1">
<div class="d-flex align-items-center">
<p class="mb-1 w-100"><span class="text-dark fw-semibold">Stephan Peralt</span> rescheduled the service to 14/01/2024. </p>
<span class="d-flex justify-content-end "> <i class="ti ti-point-filled text-primary"></i></span>
</div>
<span>Just Now</span>
</div>
</div>
</a>
</div>
<div class="border-bottom mb-3 pb-3">
<a href="notification.html" class="pb-0">
<div class="d-flex">
<span class="avatar avatar-lg me-2 flex-shrink-0">
<img src="assets/img/profiles/avatar-36.jpg" alt="Profile" class="rounded-circle">
</span>
<div class="flex-grow-1">
<div class="d-flex align-items-center">
<p class="mb-1 w-100"><span class="text-dark fw-semibold">Harvey Smith</span> has requested your service.</p>
<span class="d-flex justify-content-end "> <i class="ti ti-point-filled text-primary"></i></span>
</div>
<span>5 mins ago</span>
<div class="d-flex justify-content-start align-items-center mt-2">
<span class="btn btn-light btn-sm me-2">Deny</span>
<span class="btn btn-dark btn-sm">Accept</span>
</div>
</div>
</div>
</a>
</div>
<div class="border-bottom mb-3 pb-3">
<a href="notification.html">
<div class="d-flex">
<span class="avatar avatar-lg me-2 flex-shrink-0">
<img src="assets/img/profiles/avatar-02.jpg" alt="Profile" class="rounded-circle">
</span>
<div class="flex-grow-1">
<p class="mb-1"><span class="text-dark fw-semibold"> Anthony Lewis</span> has left feedback for your recent service </p>
<span>10 mins ago</span>
</div>
</div>
</a>
</div>
<div class="border-0 mb-3 pb-0">
<a href="notification.html">
<div class="d-flex">
<span class="avatar avatar-lg me-2 flex-shrink-0">
<img src="assets/img/profiles/avatar-22.jpg" alt="Profile" class="rounded-circle">
</span>
<div class="flex-grow-1">
<p class="mb-1"><span class="text-dark fw-semibold">Brian Villaloboshas </span> cancelled the service scheduled for 14/01/2024.
</p>
<span>15 mins ago</span>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="d-flex p-0 notification-footer-btn">
<a href="#" class="btn btn-light rounded me-2">Cancel</a>
<a href="#" class="btn btn-dark rounded ">View All</a>
</div>
</div>
</div>
<div class="provider-head-links">
<a href="javascript:void(0);" class="d-flex align-items-center justify-content-center me-2"><i class="feather-maximize"></i></a>
</div>
<div class="dropdown">
<a href="javascript:void(0);" data-bs-toggle="dropdown">
<div class="booking-user d-flex align-items-center">
<span class="user-img">
<img src="assets/img/profiles/avatar-02.jpg" alt="user">
</span>
</div>
</a>
<ul class="dropdown-menu p-2">
<li><a class="dropdown-item d-flex align-items-center" href="login.html"><i class="ti ti-logout me-1"></i>Logout</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div class="dropdown mobile-user-menu">
<a href="javascript:void(0);" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
aria-expanded="false"><i class="fa fa-ellipsis-v"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="profile.html">My Profile</a>
<a class="dropdown-item" href="profile-settings.html">Settings</a>
<a class="dropdown-item" href="login.html">Logout</a>
</div>
</div>
<!-- /Mobile Menu -->
</div>
<!-- /Header -->
<!-- Sidebar -->
<div class="sidebar" id="sidebar">
<div class="sidebar-inner slimscroll">
<div id="sidebar-menu" class="sidebar-menu">
<ul>
<li>
<a href="provider-dashboard.html"><i class="ti ti-layout-grid"></i><span>Dashboard</span></a>
</li>
<li>
<a href="provider-services.html"><i class="ti ti-briefcase"></i><span>My Services</span></a>
</li>
<li>
<a href="provider-booking.html"><i class="ti ti-calendar-month"></i><span>Bookings </span></a>
</li>
<li class="active">
<a href="staff-list.html"><i class="ti ti-users"></i><span>Staffs</span></a>
</li>
<li>
<a href="customer-list.html"><i class="ti ti-user"></i><span>Customers</span></a>
</li>
<li>
<a href="provider-payout.html"><i class="ti ti-wallet"></i><span>Payout</span></a>
</li>
<li>
<a href="provider-holiday.html"><i class="feather-calendar"></i><span>Holidays & Leave</span></a>
</li>
<li>
<a href="provider-coupons.html"><i class="ti ti-ticket"></i><span>Coupons</span></a>
</li>
<li>
<a href="provider-offers.html"><i class="ti ti-square-percentage"></i><span>Offers</span></a>
</li>
<li>
<a href="provider-reviews.html"><i class="ti ti-star"></i><span>Reviews</span></a>
</li>
<li>
<a href="provider-enquiry.html"><i class="ti ti-mail"></i><span>Enquiries</span></a>
</li>
<li>
<a href="provider-earnings.html"><i class="ti ti-cash-banknote"></i><span>Earnings</span></a>
</li>
<li>
<a href="provider-chat.html"><i class="ti ti-messages"></i><span>Chat</span></a>
</li>
<li class="submenu">
<a href="javascript:void(0);"><i class="ti ti-settings"></i><span>Settings</span><span class="menu-arrow"></span></a>
<ul>
<li>
<a href="provider-appointment-settings.html"><i class="ti ti-chevrons-right me-2"></i>Appointment</a>
</li>
<li>
<a href="provider-accounts-settings.html"><i class="ti ti-chevrons-right me-2"></i>Account</a>
</li>
<li>
<a href="provider-social-profile.html"><i class="ti ti-chevrons-right me-2"></i>Social Profiles</a>
</li>
<li>
<a href="provider-security-settings.html"><i class="ti ti-chevrons-right me-2"></i>Security</a>
</li>
<li>
<a href="provider-plan.html"><i class="ti ti-chevrons-right me-2"></i>Plan & Billings</a>
</li>
<li>
<a href="payment-settings.html"><i class="ti ti-chevrons-right me-2"></i>Payment</a>
</li>
<li>
<a href="provider-notifcations.html"><i class="ti ti-chevrons-right me-2"></i>Notifications</a>
</li>
<li>
<a href="provider-connected-apps.html"><i class="ti ti-chevrons-right me-2"></i>Connected Apps</a>
</li>
<li>
<a href="verification.html"><i class="ti ti-chevrons-right me-2"></i>Profile Verification</a>
</li>
<li>
<a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#del-account"><i class="ti ti-chevrons-right me-2"></i>Delete Account</a>
</li>
</ul>
</li>
<li>
<a href="login.html"><i class="ti ti-logout-2"></i><span>Logout</span></a>
</li>
</ul>
</div>
</div>
</div>
<!-- /Sidebar -->
<!-- Page Wrapper -->
<div class="page-wrapper">
<div class="content container-fluid pb-0">
<h5 class="mb-4">Staff Details</h5>
<div class="d-flex justify-content-between align-items-center bg-light-300 p-3 rounded flex-wrap row-gap-3 mb-4">
<div class="d-flex align-items-center">
<span class="avatar avatar-lg me-2">
<img src="assets/img/profiles/avatar-36.jpg" class="rounded-circle" alt="user">
</span>
<div>
<div class="d-flex align-items-center">
<h6 class="fs-14 me-2">Harvey Smith</h6>
<span class="badge badge-success-100 d-flex align-items-center"><i class="ti ti-point-filled"></i>Active</span>
</div>
<span class="fs-12">Created on 14/02/2025</span>
</div>
</div>
<div>
<h6 class="fs-12 fw-medium">Phone</h6>
<span class="fs-12">+1 245 646 5464</span>
</div>
<div>
<h6 class="fs-12 fw-medium">Email</h6>
<span class="fs-12"><a href="https://truelysell.dreamstechnologies.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb939a898d9e82bb9e839a968b979ed5989496">[email protected]</a></span>
</div>
<div>
<h6 class="fs-12 fw-medium">Address</h6>
<span class="fs-12">4412 Libby Street, Los Angeles, CA 90045</span>
</div>
<div>
<h6 class="fs-12 fw-medium">No of Services</h6>
<span class="fs-12">4</span>
</div>
<div>
<h6 class="fs-12 fw-medium">No of Bookings</h6>
<span class="fs-12">60</span>
</div>
</div>
<h6 class="mb-4">Availability</h6>
<div class="row ">
<div class="col-xxl-4 col-md-6">
<div class="card shadow-none rounded">
<div class="card-body">
<div class="d-flex align-items-center flex-wrap row-gap-2">
<a href="provider-details.html" class="avatar avatar-xl flex-shrink-0 me-2">
<img src="assets/img/providers/provider-15.jpg" class="rounded" alt="Img">
</a>
<div class="flex-fill">
<div class="d-flex justify-content-between">
<h6 class="fs-16 fw-medium"><a href="provider-details.html">Computer Repair</a></h6>
<div class="user-icon d-inline-flex">
<a href="javascript:void(0);" class="me-2" data-bs-toggle="modal" data-bs-target="#edit-availability"><i class="ti ti-edit"></i></a>
<a href="javascript:void(0);" class=""><i class="ti ti-trash"></i></a>
</div>
</div>
<span class="fs-12 d-block mb-2">Days of Availability</span>
<div class="day-span d-flex gap-2">
<span class="badge badge-info-transparent d-flex justify-content-center">Mon</span>
<span class="badge badge-info-transparent d-flex justify-content-center">Tue</span>
<span class="badge badge-info-transparent d-flex justify-content-center">Wed</span>
<span class="badge badge-info-transparent d-flex justify-content-center">Thr</span>
<span class="badge badge-info-transparent d-flex justify-content-center">Fri</span>
<span class="badge badge-light d-flex justify-content-center">Sat</span>
<span class="badge badge-light d-flex justify-content-center">Sun</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xxl-4 col-md-6">
<div class="card shadow-none rounded">
<div class="card-body">
<div class="d-flex align-items-center flex-wrap row-gap-2">
<a href="provider-details.html" class="avatar avatar-xl flex-shrink-0 me-2">
<img src="assets/img/providers/provider-17.jpg" class="rounded" alt="Img">
</a>
<div class="flex-fill">
<div class="d-flex justify-content-between ">
<h6 class="fs-16 fw-medium"><a href="provider-details.html">Steam Car Wash</a></h6>
<div class="user-icon d-inline-flex">
<a href="javascript:void(0);" class="me-2" data-bs-toggle="modal" data-bs-target="#edit-availability"><i class="ti ti-edit"></i></a>
<a href="javascript:void(0);" class=""><i class="ti ti-trash"></i></a>
</div>
</div>
<span class="fs-12 d-block mb-2">Days of Availability</span>
<div class="day-span d-flex gap-2">
<span class="badge badge-info-transparent d-flex justify-content-center">Mon</span>
<span class="badge badge-info-transparent d-flex justify-content-center">Tue</span>
<span class="badge badge-info-transparent d-flex justify-content-center">Wed</span>
<span class="badge badge-info-transparent d-flex justify-content-center">Thr</span>
<span class="badge badge-info-transparent d-flex justify-content-center">Fri</span>
<span class="badge badge-light d-flex justify-content-center">Sat</span>
<span class="badge badge-light d-flex justify-content-center">Sun</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xxl-4 col-md-6">
<div class="card shadow-none rounded">
<div class="card-body">
<div class="d-flex align-items-center flex-wrap row-gap-2">
<a href="provider-details.html" class="avatar avatar-xl flex-shrink-0 me-2">
<img src="assets/img/providers/provider-19.jpg" class="rounded" alt="Img">
</a>
<div class="flex-fill">
<div class="d-flex justify-content-between">
<h6 class="fs-16 fw-medium"><a href="provider-details.html">House Cleaning</a></h6>
<div class="user-icon d-inline-flex">
<a href="javascript:void(0);" class="me-2" data-bs-toggle="modal" data-bs-target="#edit-availability"><i class="ti ti-edit"></i></a>
<a href="javascript:void(0);" class=""><i class="ti ti-trash"></i></a>
</div>
</div>
<span class="fs-12 d-block mb-2">Days of Availability</span>
<div class="day-span d-flex gap-2">
<span class="badge badge-info-transparent d-flex justify-content-center">Mon</span>
<span class="badge badge-info-transparent d-flex justify-content-center">Tue</span>
<span class="badge badge-info-transparent d-flex justify-content-center">Wed</span>
<span class="badge badge-info-transparent d-flex justify-content-center">Thr</span>
<span class="badge badge-info-transparent d-flex justify-content-center">Fri</span>
<span class="badge badge-light d-flex justify-content-center">Sat</span>
<span class="badge badge-light d-flex justify-content-center">Sun</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xxl-4 col-md-6">
<div class="card shadow-none rounded">
<div class="card-body">
<div class="d-flex align-items-center flex-wrap row-gap-2">
<a href="provider-details.html" class="avatar avatar-xl flex-shrink-0 me-2">
<img src="assets/img/providers/provider-14.jpg" class="rounded" alt="Img">
</a>
<div class="flex-fill">
<div class="d-flex justify-content-between">
<h6 class="fs-16 fw-medium"><a href="provider-details.html">Building Construction</a></h6>
<div class="user-icon d-inline-flex">
<a href="javascript:void(0);" class="me-2" data-bs-toggle="modal" data-bs-target="#edit-availability"><i class="ti ti-edit"></i></a>
<a href="javascript:void(0);" class=""><i class="ti ti-trash"></i></a>
</div>
</div>
<span class="fs-12 d-block mb-2">Days of Availability</span>
<div class="day-span d-flex gap-2">
<span class="badge badge-info-transparent d-flex justify-content-center">Mon</span>
<span class="badge badge-info-transparent d-flex justify-content-center">Tue</span>
<span class="badge badge-info-transparent d-flex justify-content-center">Wed</span>
<span class="badge badge-info-transparent d-flex justify-content-center">Thr</span>
<span class="badge badge-info-transparent d-flex justify-content-center">Fri</span>
<span class="badge badge-light d-flex justify-content-center">Sat</span>
<span class="badge badge-light d-flex justify-content-center">Sun</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xxl-4 col-md-6">
<div class="card shadow-none rounded">
<div class="card-body">
<div class="d-flex align-items-center flex-wrap row-gap-2">
<a href="provider-details.html" class="avatar avatar-xl flex-shrink-0 me-2">
<img src="assets/img/providers/provider-16.jpg" class="rounded" alt="Img">
</a>
<div class="flex-fill">
<div class="d-flex justify-content-between ">
<h6 class="fs-16 fw-medium"><a href="provider-details.html">Interior Designing</a></h6>
<div class="user-icon d-inline-flex">
<a href="javascript:void(0);" class="me-2" data-bs-toggle="modal" data-bs-target="#edit-availability"><i class="ti ti-edit"></i></a>
<a href="javascript:void(0);" class=""><i class="ti ti-trash"></i></a>
</div>
</div>
<span class="fs-12 d-block mb-2">Days of Availability</span>
<div class="day-span d-flex gap-2">
<span class="badge badge-info-transparent d-flex justify-content-center">Mon</span>
<span class="badge badge-info-transparent d-flex justify-content-center">Tue</span>
<span class="badge badge-info-transparent d-flex justify-content-center">Wed</span>
<span class="badge badge-info-transparent d-flex justify-content-center">Thr</span>
<span class="badge badge-info-transparent d-flex justify-content-center">Fri</span>
<span class="badge badge-light d-flex justify-content-center">Sat</span>
<span class="badge badge-light d-flex justify-content-center">Sun</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xxl-4 col-md-6">
<div class="card shadow-none rounded">
<div class="card-body">
<div class="d-flex align-items-center flex-wrap row-gap-2">
<a href="provider-details.html" class="avatar avatar-xl flex-shrink-0 me-2">
<img src="assets/img/providers/provider-23.jpg" class="rounded" alt="Img">
</a>
<div class="flex-fill">
<div class="d-flex justify-content-between ">
<h6 class="fs-16 fw-medium"><a href="provider-details.html">Plumbing Services</a></h6>
<div class="user-icon d-inline-flex">
<a href="javascript:void(0);" class="me-2" data-bs-toggle="modal" data-bs-target="#edit-availability"><i class="ti ti-edit"></i></a>
<a href="javascript:void(0);" class=""><i class="ti ti-trash"></i></a>
</div>
</div>
<span class="fs-12 d-block mb-2">Days of Availability</span>
<div class="day-span d-flex gap-2">
<span class="badge badge-info-transparent d-flex justify-content-center">Mon</span>
<span class="badge badge-info-transparent d-flex justify-content-center">Tue</span>
<span class="badge badge-info-transparent d-flex justify-content-center">Wed</span>
<span class="badge badge-info-transparent d-flex justify-content-center">Thr</span>
<span class="badge badge-info-transparent d-flex justify-content-center">Fri</span>
<span class="badge badge-light d-flex justify-content-center">Sat</span>
<span class="badge badge-light d-flex justify-content-center">Sun</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xxl-4 col-md-6">
<div class="card shadow-none rounded">
<div class="card-body">
<div class="d-flex align-items-center flex-wrap row-gap-2">
<a href="staff-details.html" class="avatar avatar-xl flex-shrink-0 me-2">
<img src="assets/img/providers/provider-18.jpg" class="rounded" alt="Img">
</a>
<div class="flex-fill">
<div class="d-flex justify-content-between">
<h6 class="fs-16 fw-medium"><a href="provider-details.html">Electricals</a></h6>
<div class="user-icon d-inline-flex">
<a href="javascript:void(0);" class="me-2" data-bs-toggle="modal" data-bs-target="#edit-availability"><i class="ti ti-edit"></i></a>
<a href="javascript:void(0);" class=""><i class="ti ti-trash"></i></a>
</div>
</div>
<span class="fs-12 d-block mb-2">Days of Availability</span>
<div class="day-span d-flex gap-2">
<span class="badge badge-info-transparent d-flex justify-content-center">Mon</span>
<span class="badge badge-info-transparent d-flex justify-content-center">Tue</span>
<span class="badge badge-info-transparent d-flex justify-content-center">Wed</span>
<span class="badge badge-info-transparent d-flex justify-content-center">Thr</span>
<span class="badge badge-info-transparent d-flex justify-content-center">Fri</span>
<span class="badge badge-light d-flex justify-content-center">Sat</span>
<span class="badge badge-light d-flex justify-content-center">Sun</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /Page Wrapper -->
<!-- Edit Availability -->
<div class="modal fade custom-modal" id="edit-availability">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content doctor-profile">
<div class="modal-header d-flex align-items-center justify-content-between border-bottom">
<h5 class="modal-title">Update Availability</h5>
<a href="javascript:void(0);" data-bs-dismiss="modal" aria-label="Close"><i class="ti ti-circle-x-filled fs-20"></i></a>
</div>
<div class="modal-body">
<form action="#">
<div class="modal-wizard">
<ul class="d-flex align-items-center mb-3" id="progress-list">
<li class="d-flex align-items-center active me-3">
<span><i class="feather-calendar me-2"></i></span>
<p class="fs-14 fw-medium">Add Days</p>
</li>
<li class="d-flex align-items-center me-3">
<span><i class="ti ti-calendar-filled me-2"></i></span>
<p class="fs-14 fw-medium">Breaks</p>
</li>
<li class="d-flex align-items-center">
<span><i class="ti ti-clock-off me-2"></i></span>
<p class="fs-14 fw-medium">Unavailable Days</p>
</li>
</ul>
</div>
<div class="available-slot-details">
<fieldset id="first-availability">
<div class="accordion" id="availability_accordion">
<div>
<div class="card shadow-none rounded">
<div class="card-body">
<div class="accordion-item">
<div class="accordion-header" id="accordion-headingOne">
<div class="accordion-button p-0 border-bottom pb-3" data-bs-toggle="collapse" data-bs-target="#accordion-collapseOne" aria-expanded="true" aria-controls="accordion-collapseOne">
<h6 class="fs-16 fw-medium ms-4">Monday</h6>
<div class="form-check form-switch ms-auto">
<input class="form-check-input" type="checkbox">
</div>
</div>
</div>
<div id="accordion-collapseOne" class="accordion-collapse collapse show" aria-labelledby="accordion-headingOne" data-bs-parent="#availability_accordion">
<div class="accordion-body border-0 p-0 mt-3">
<div class="row gx-3">
<div class="col-md-6 col-lg">
<div class="mb-3">
<label class="form-label">Start Time <span class="text-danger">*</span></label>
<div class=" input-icon position-relative">
<span class="input-icon-addon"><i class="ti ti-clock"></i></span>
<input type="text" class="form-control timepicker" placeholder="dd-mm-yyyy">
</div>
</div>
</div>
<div class="col-md-6 col-lg">
<div class="mb-3">
<label class="form-label">End Time <span class="text-danger">*</span></label>
<div class=" input-icon position-relative">
<span class="input-icon-addon"><i class="ti ti-clock"></i></span>
<input type="text" class="form-control timepicker" placeholder="dd-mm-yyyy">
</div>
</div>
</div>
<div class="col-md-6 col-lg">
<div class="mb-3">
<label class="form-label">Duration <span class="text-danger">*</span></label>
<select class="select">
<option>Select</option>
<option>1 Hr</option>
<option>2 Hr</option>
</select>
</div>
</div>
<div class="col-md-6 col-lg">
<div class="mb-3">
<label class="form-label">No of Slots <span class="text-danger">*</span></label>
<select class="select">
<option>Select</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
<div class="col-md-6 col-lg">
<div class="mb-3">
<label class="form-label">Interval Duration <span class="text-danger">*</span></label>
<select class="select">
<option>Select</option>
<option>15 Mins</option>
<option>30 Mins</option>
</select>
</div>
</div>
</div>
<div class="d-flex align-items-center justify-content-between">
<a href="javascript:void(0);" class="text-primary d-inline-flex align-items-center add-extra fs-14 mb-3"><i class="ti ti-circle-plus me-2"></i>Add New</a>
<button type="button" class="btn btn-dark"><i class="ti ti-rotate-clockwise-2 me-2"></i>Generate Time Slots</button>
</div>
<div class="slots-available mt-3">
<div class="d-flex align-items-center justify-content-between pb-3 mb-3 border-bottom">
<h6 class="fs-16 fw-medium">Slot 1</h6>
<a href="javascript:void(0);" class="text-danger fs-12 fw-medium rounded p-1 bg-white d-block">Remove this Slot</a>
</div>
<div>
<div class="row g-2">
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment">
<span class="visit-rsn fs-12 bg-white">8:30 - 9:30 <span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment">
<span class="visit-rsn fs-12 bg-white">9:30 - 10:00 <span class="d-block fs-10">4 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment">
<span class="visit-rsn fs-12 bg-white">10:00 - 10:30<span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment">
<span class="visit-rsn fs-12 bg-white">10:00 - 10:30<span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment">
<span class="visit-rsn fs-12 bg-white">10:30 - 11:00 <span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment">
<span class="visit-rsn fs-12 bg-white">11:30 - 12:00 <span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment">
<span class="visit-rsn fs-12 bg-white">8:30 - 9:30 <span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment">
<span class="visit-rsn fs-12 bg-white">9:30 - 10:00 <span class="d-block fs-10">4 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment">
<span class="visit-rsn fs-12 bg-white">10:00 - 10:30<span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment">
<span class="visit-rsn fs-12 bg-white">10:00 - 10:30<span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment">
<span class="visit-rsn fs-12 bg-white">10:30 - 11:00 <span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment">
<span class="visit-rsn fs-12 bg-white">11:30 - 12:00 <span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment">
<span class="visit-rsn fs-12 bg-white">8:30 - 9:30 <span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment">
<span class="visit-rsn fs-12 bg-white">9:30 - 10:00 <span class="d-block fs-10">4 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment">
<span class="visit-rsn fs-12 bg-white">10:00 - 10:30<span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment">
<span class="visit-rsn fs-12 bg-white">10:00 - 10:30<span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment">
<span class="visit-rsn fs-12 bg-white">10:30 - 11:00 <span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment">
<span class="visit-rsn fs-12 bg-white">11:30 - 12:00 <span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card shadow-none rounded">
<div class="card-body">
<div class="accordion-item">
<div class="accordion-header" id="accordion-headingTwo">
<div class="accordion-button p-0 border-bottom pb-3" data-bs-toggle="collapse" data-bs-target="#accordion-collapseTwo" aria-expanded="false" aria-controls="accordion-collapseTwo" >
<h6 class="fs-16 fw-medium ms-4">Tuesday</h6>
<div class="form-check form-switch ms-auto">
<input class="form-check-input" type="checkbox">
</div>
</div>
</div>
<div id="accordion-collapseTwo" class="accordion-collapse collapse" aria-labelledby="accordion-headingTwo" data-bs-parent="#availability_accordion">
<div class="accordion-body border-0 p-0 mt-3">
<div class="row gx-3">
<div class="col-md-6 col-lg">
<div class="mb-3">
<label class="form-label">Start Time <span class="text-danger">*</span></label>
<div class=" input-icon position-relative">
<span class="input-icon-addon"><i class="ti ti-clock"></i></span>
<input type="text" class="form-control timepicker" placeholder="dd-mm-yyyy">
</div>
</div>
</div>
<div class="col-md-6 col-lg">
<div class="mb-3">
<label class="form-label">End Time <span class="text-danger">*</span></label>
<div class=" input-icon position-relative">
<span class="input-icon-addon"><i class="ti ti-clock"></i></span>
<input type="text" class="form-control timepicker" placeholder="dd-mm-yyyy">
</div>
</div>
</div>
<div class="col-md-6 col-lg">
<div class="mb-3">
<label class="form-label">Duration <span class="text-danger">*</span></label>
<select class="select">
<option>Select</option>
<option>1 Hr</option>
<option>2 Hr</option>
</select>
</div>
</div>
<div class="col-md-6 col-lg">
<div class="mb-3">
<label class="form-label">No of Slots <span class="text-danger">*</span></label>
<select class="select">
<option>Select</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
<div class="col-md-6 col-lg">
<div class="mb-3">
<label class="form-label">Interval Duration <span class="text-danger">*</span></label>
<select class="select">
<option>Select</option>
<option>15 Mins</option>
<option>30 Mins</option>
</select>
</div>
</div>
</div>
<div class="d-flex align-items-center justify-content-between">
<a href="javascript:void(0);" class="text-primary d-inline-flex align-items-center add-extra fs-14 mb-3"><i class="ti ti-circle-plus me-2"></i>Add New</a>
<button type="button" class="btn btn-dark"><i class="ti ti-rotate-clockwise-2 me-2"></i>Generate Time Slots</button>
</div>
<div class="slots-available mt-3">
<div class="d-flex align-items-center justify-content-between pb-3 mb-3 border-bottom">
<h6 class="fs-16 fw-medium">Slot 1</h6>
<a href="javascript:void(0);" class="text-danger fs-12 fw-medium rounded p-1 bg-white d-block">Remove this Slot</a>
</div>
<div>
<div class="row g-2">
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment2">
<span class="visit-rsn fs-12 bg-white">8:30 - 9:30 <span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment2">
<span class="visit-rsn fs-12 bg-white">9:30 - 10:00 <span class="d-block fs-10">4 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment2">
<span class="visit-rsn fs-12 bg-white">10:00 - 10:30<span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment2">
<span class="visit-rsn fs-12 bg-white">10:00 - 10:30<span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment2">
<span class="visit-rsn fs-12 bg-white">10:30 - 11:00 <span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment2">
<span class="visit-rsn fs-12 bg-white">11:30 - 12:00 <span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment2">
<span class="visit-rsn fs-12 bg-white">8:30 - 9:30 <span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment2">
<span class="visit-rsn fs-12 bg-white">9:30 - 10:00 <span class="d-block fs-10">4 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment2">
<span class="visit-rsn fs-12 bg-white">10:00 - 10:30<span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment2">
<span class="visit-rsn fs-12 bg-white">10:00 - 10:30<span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment2">
<span class="visit-rsn fs-12 bg-white">10:30 - 11:00 <span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment2">
<span class="visit-rsn fs-12 bg-white">11:30 - 12:00 <span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment2">
<span class="visit-rsn fs-12 bg-white">8:30 - 9:30 <span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment2">
<span class="visit-rsn fs-12 bg-white">9:30 - 10:00 <span class="d-block fs-10">4 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment2">
<span class="visit-rsn fs-12 bg-white">10:00 - 10:30<span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment">
<span class="visit-rsn fs-12 bg-white">10:00 - 10:30<span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment">
<span class="visit-rsn fs-12 bg-white">10:30 - 11:00 <span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="form-check-inline visits w-100 p-0 me-0">
<label class="visit-btns">
<input type="radio" class="form-check-input" name="appointment">
<span class="visit-rsn fs-12 bg-white">11:30 - 12:00 <span class="d-block fs-10">2 Slots</span></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-end align-items-center mt-3 pt-3 border-top">
<button class="btn btn-dark next_btn" type="button">Save & Continue</button>
</div>
</fieldset>
<fieldset>
<div class="accordion" id="availability_accordion2">
<form action="https://truelysell.dreamstechnologies.com/html/template/staff-details.html">
<div class="card shadow-none rounded">
<div class="card-body pb-0">
<div class="accordion-item">
<div class="accordion-header" id="accordion2-headingOne">
<div class="accordion-button p-0 border-bottom pb-3" data-bs-toggle="collapse" data-bs-target="#accordion2-collapseOne" aria-expanded="true" aria-controls="accordion2-collapseOne" >
<h6 class="fs-16 fw-medium ms-4">All Days</h6>
<div class="form-check form-switch ms-auto">
<input class="form-check-input" type="checkbox">
</div>
</div>
</div>
<div id="accordion2-collapseOne" class="accordion-collapse collapse show" aria-labelledby="accordion2-headingOne" data-bs-parent="#availability_accordion2">
<div class="accordion-body border-0 p-0 mt-3">
<div class="row">
<div class="col-lg-4">
<div class="mb-3">
<label class="form-label">Morning Break</label>
<div class="sel-cal Calendar-icon">
<span><i class="ti ti-clock"></i></span>
<input class="form-control timepicker" type="text">
</div>
</div>
</div>
<div class="col-lg-4">
<div class="mb-3">
<label class="form-label">Lunch</label>
<div class="sel-cal Calendar-icon">
<span><i class="ti ti-clock"></i></span>
<input class="form-control timepicker" type="text">
</div>
</div>
</div>
<div class="col-lg-4">
<div class="mb-3">
<label class="form-label">Evening Break</label>
<div class="sel-cal Calendar-icon">
<span><i class="ti ti-clock"></i></span>
<input class="form-control timepicker" type="text">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card shadow-none rounded">
<div class="card-body pb-0">
<div class="accordion-item">
<div class="accordion-header" id="accordion2-headingTwo">
<div class="accordion-button p-0 border-bottom pb-3" data-bs-toggle="collapse" data-bs-target="#accordion2-collapseTwo" aria-expanded="false" aria-controls="accordion2-collapseTwo" >
<h6 class="fs-16 fw-medium ms-4">Monday</h6>
<div class="form-check form-switch ms-auto">
<input class="form-check-input" type="checkbox">
</div>
</div>
</div>
<div id="accordion2-collapseTwo" class="accordion-collapse collapse" aria-labelledby="accordion2-headingTwo" data-bs-parent="#availability_accordion2">
<div class="accordion-body border-0 p-0 mt-3">
<div class="row">
<div class="col-lg-4">
<div class="mb-3">
<label class="form-label">Morning Break</label>
<div class="sel-cal Calendar-icon">
<span><i class="ti ti-clock"></i></span>
<input class="form-control timepicker" type="text">
</div>
</div>
</div>
<div class="col-lg-4">
<div class="mb-3">
<label class="form-label">Lunch</label>
<div class="sel-cal Calendar-icon">
<span><i class="ti ti-clock"></i></span>
<input class="form-control timepicker" type="text">
</div>
</div>
</div>
<div class="col-lg-4">
<div class="mb-3">
<label class="form-label">Evening Break</label>
<div class="sel-cal Calendar-icon">
<span><i class="ti ti-clock"></i></span>
<input class="form-control timepicker" type="text">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="d-flex justify-content-end align-items-center mt-3 pt-3 border-top">
<a href="javascript:void(0);" class="btn btn-light prev_btn me-2">Back</a>
<button class="btn btn-dark next_btn" type="button">Save & Continue</button>
</div>
</fieldset>
<fieldset>
<form action="#">
<div class="row">
<div class="col-lg-12">
<div class="mb-3">
<label class="form-label">Stat Date & End Date <span class="text-danger"> *</span></label>
<div class="sel-cal Calendar-icon">
<span><i class="ti ti-calendar"></i></span>
<input class="form-control datetimepicker" type="text">
</div>
</div>
</div>
<div class="col-lg-12">
<div class="mb-0">
<h6 class="fw-medium fs-16 mb-2">Unavailable days</h6>
<div class="d-flex align-items-center justify-content-between border rounded p-2 bg-light-300">
<div>
<span class="fs-14 d-block mb-1">Unavailable on</span>
<p class="fs-14 fw-medium">Sep 15 2024, Wednesday</p>
</div>
<span class="badge badge-success">Upcoming</span>
</div>
</div>
</div>
</div>
</form>
<div class="d-flex justify-content-end align-items-center mt-3 pt-3 border-top">
<a href="javascript:void(0);" class="btn btn-light prev_btn me-2">Back</a>
<button class="btn btn-dark" type="button" data-bs-toggle="modal" data-bs-target="#successmodal">Save & Continue</button>
</div>
</fieldset>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- /Edit Availability -->
<!-- Delete Account -->
<div class="modal fade custom-modal" id="del-account">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header d-flex align-items-center justify-content-between border-bottom">
<h5 class="modal-title">Delete Account</h5>
<a href="javascript:void(0);" data-bs-dismiss="modal" aria-label="Close"><i class="ti ti-circle-x-filled fs-20"></i></a>
</div>
<form action="#">
<div class="modal-body">
<p class="mb-3">Are you sure you want to delete This Account? To delete your account, Type your password.</p>
<div class="mb-0">
<label class="form-label">Password</label>
<div class="pass-group">
<input type="password" class="form-control pass-input" placeholder="*************">
<span class="toggle-password feather-eye-off"></span>
</div>
</div>
</div>
<div class="modal-footer">
<a href="javascript:void(0);" class="btn btn-light me-2" data-bs-dismiss="modal">Cancel</a>
<button type="submit" class="btn btn-dark">Delete Account</button>
</div>
</form>
</div>
</div>
</div>
<!-- /Delete Account -->
<!-- Modal Succss -->
<div class="modal fade service-models" id="successmodal">
<div class="modal-dialog modal-dialog-centered ">
<div class="modal-content">
<div class="modal-body">
<div class="text-center py-4">
<span class="success-check mb-3 mx-auto"><i class="ti ti-check"></i></span>
<h4 class="mb-2">Availability Created Successfully</h4>
<p>Availability for “Electrical Services” has been Created, and updated on your List</p>
<div class="f-flex align-items-center justify-content-center mt-3">
<a href="javascript:void(0);" class="btn btn-light me-3" data-bs-dismiss="modal">Close</a>
<a href="staff-list.html" class="btn btn-dark">Go to List</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Succss -->
</div>
<!-- Jquery JS -->
<script data-cfasync="false" src="../../cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="assets/js/jquery-3.7.1.min.js" type="544f1a962e998e74fcd97c34-text/javascript"></script>
<!-- Slimscroll JS -->
<script src="assets/js/jquery.slimscroll.min.js" type="544f1a962e998e74fcd97c34-text/javascript"></script>
<!-- Bootstrap JS -->
<script src="assets/js/bootstrap.bundle.min.js" type="544f1a962e998e74fcd97c34-text/javascript"></script>
<!-- Wow JS -->
<script src="assets/js/wow.min.js" type="544f1a962e998e74fcd97c34-text/javascript"></script>
<!-- select JS -->
<script src="assets/plugins/select2/js/select2.min.js" type="544f1a962e998e74fcd97c34-text/javascript"></script>
<!-- Datetimepicker JS -->
<script src="assets/js/moment.js" type="544f1a962e998e74fcd97c34-text/javascript"></script>
<script src="assets/js/bootstrap-datetimepicker.min.js" type="544f1a962e998e74fcd97c34-text/javascript"></script>
<!-- cursor JS -->
<script src="assets/js/cursor.js" type="544f1a962e998e74fcd97c34-text/javascript"></script>
<!-- Script JS -->
<script src="assets/js/script.js" type="544f1a962e998e74fcd97c34-text/javascript"></script>
<script src="../../cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="544f1a962e998e74fcd97c34-|49" defer></script><script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"rayId":"946509710cf57f51","version":"2025.4.0-1-g37f21b1","serverTiming":{"name":{"cfExtPri":true,"cfL4":true,"cfSpeedBrain":true,"cfCacheStatus":true}},"token":"3ca157e612a14eccbb30cf6db6691c29","b":1}' crossorigin="anonymous"></script>
</body>
<!-- Mirrored from truelysell.dreamstechnologies.com/html/template/staff-details.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 27 May 2025 11:07:18 GMT -->
</html>