|
Server : Apache/2.4.41 (Ubuntu) System : Linux vmi1525618.contaboserver.net 5.4.0-105-generic #119-Ubuntu SMP Mon Mar 7 18:49:24 UTC 2022 x86_64 User : www-data ( 33) PHP Version : 8.2.12 Disable Function : NONE Directory : /var/www/account.appointkrypt.com/storage/framework/views/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
<title>Appointment</title>
<link rel="stylesheet" href="<?php echo e(asset('assets/css/bootstrap.min.css')); ?>">
<link rel="stylesheet" href="<?php echo e(asset('assets/css/style.css')); ?>">
<link rel="stylesheet" href="<?php echo e(asset('assets/css/bootstrap-datepicker.min.css')); ?>">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.datepicker table tr td.day.focused,
.datepicker table tr td.day:hover {
background: #2c6cff26 !important;
}
.datepicker td,
.datepicker th {
height: 35px;
}
.datepicker td,
th {
text-align: center !important;
padding: 12px 12px !important;
font-size: 14px !important;
}
.datepicker table tr td.active.active {
border-radius: 20px;
}
.datepicker table tr td.day.focused,
.datepicker table tr td.day:hover {
border-radius: 20px;
}
</style>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
font-family: 'Roboto', sans-serif;
}
* {
margin: 0;
padding: 0;
}
i {
margin-right: 10px;
}
/*------------------------*/
input:focus,
button:focus,
.form-control:focus {
outline: none;
box-shadow: none;
}
.form-control:disabled,
.form-control[readonly] {
background-color: #fff;
}
/*----------step-wizard------------*/
.d-flex {
display: flex;
}
.justify-content-center {
justify-content: center;
}
.align-items-center {
align-items: center;
}
/*---------signup-step-------------*/
.bg-color {
background-color: #333;
}
.signup-step-container {
padding: 40px 0px;
padding-bottom: 60px;
position: relative;
background-color: #f4f4f4;
height: 100vh;
overflow: auto;
}
.wizard>.bg-white {
box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
}
.tv_frame {
width: 100%;
height: 100%;
background-size: cover;
padding-left: 8px;
border: 1px solid var(--text-color-level3, rgba(26, 26, 26, 0.1));
border-radius: 8px;
box-shadow: 0 1px 8px 0 rgb(0 0 0/8%);
background-color: #ffffff;
}
#details_div {
border-right: 1px solid var(--text-color-level3, rgba(26, 26, 26, 0.1));
border-radius: 8px;
}
.signup-step-container .wizard .tab-pane {
padding: 20px 10px;
}
.signup-step-container .wizard .tab-pane .card {
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.signup-step-container .wizard .section-title h1 {
text-transform: capitalize;
text-align: center;
margin-bottom: 30px;
}
.input-group-text svg {
height: 15px;
width: 15px;
}
.wizard .nav-tabs {
position: relative;
margin-bottom: 0;
border-bottom-color: transparent;
}
.wizard>div.wizard-inner {
position: relative;
margin-bottom: 30px;
text-align: center;
}
.connecting-line {
height: 2px;
background: #e0e0e0;
position: absolute;
width: 75%;
margin: 0 auto;
left: 0;
right: 0;
top: 15px;
z-index: 1;
}
.wizard .nav-tabs>li.active>a,
.wizard .nav-tabs>li.active>a:hover,
.wizard .nav-tabs>li.active>a:focus {
color: #555555;
cursor: default;
border: 0;
border-bottom-color: transparent;
}
.wizard .nav-tabs>li.progress-bar-success:not(:last-of-type) a::after {
background: #0db02b;
}
span.round-tab {
width: 30px;
height: 30px;
margin: 0 auto;
line-height: 30px;
display: inline-block;
border-radius: 50%;
background: #fff;
z-index: 2;
text-align: center;
font-size: 16px;
color: #0e214b;
font-weight: 500;
border: 1px solid #ddd;
position: relative;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
span.round-tab i {
color: #555555;
}
.wizard li.active span.round-tab {
background: #0069ff;
color: #fff;
border-color: #0069ff;
}
.wizard li.active span.round-tab i {
color: #5bc0de;
}
.wizard .nav-tabs>li.active>a i {
color: #0db02b;
}
.wizard .nav-tabs>li {
width: 25%;
}
.wizard li:after {
content: " ";
position: absolute;
left: 46%;
opacity: 0;
margin: 0 auto;
bottom: 0px;
border: 5px solid transparent;
border-bottom-color: red;
transition: 0.1s ease-in-out;
}
.wizard .nav-tabs>li a {
background-color: transparent;
display: block;
text-align: center;
position: relative;
}
.wizard .nav-tabs>li:not(:last-of-type) a::after {
position: absolute;
content: "";
left: 0;
height: 2%;
width: 100%;
background: #878b86e0;
top: 50%;
left: 56%;
}
.appointment-date-tab {
margin-top: 106px;
}
.appointment-date-tab .input-group input {
padding: 10px;
height: auto;
}
.wizard .nav-tabs>li a i {
position: absolute;
top: -15px;
font-style: normal;
font-weight: 400;
white-space: nowrap;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
font-weight: 700;
color: #000;
}
.wizard .nav-tabs>li a:hover {
background: transparent;
}
.wizard .tab-pane {
position: relative;
padding-top: 20px;
}
.wizard h3 {
margin-top: 0;
}
.prev-step,
.next-step {
font-size: 14px;
padding: 13px 24px;
border: none;
border-radius: 4px;
margin-top: 30px;
}
.prev-step.btn-transparent {
background-color: transparent;
border: 1px solid #dfdfdf;
}
.next-step {
background-color: #0069ff;
color: #fff;
font-size: 14px;
}
.submit-step {
font-size: 14px;
padding: 13px 24px;
border: none;
border-radius: 4px;
margin-top: 30px;
}
.submit-step {
background-color: #0069ff;
color: #fff;
font-size: 14px;
}
.step-head {
font-size: 20px;
text-align: center;
font-weight: 500;
margin-bottom: 20px;
}
.term-check {
font-size: 14px;
font-weight: 400;
}
.custom-file {
position: relative;
display: inline-block;
width: 100%;
height: 40px;
margin-bottom: 0;
}
.custom-file-input {
position: relative;
z-index: 2;
width: 100%;
height: 40px;
margin: 0;
opacity: 0;
}
.custom-file-label {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1;
height: 40px;
padding: .375rem .75rem;
font-weight: 400;
line-height: 2;
color: #495057;
background-color: #fff;
border: 1px solid #ced4da;
border-radius: .25rem;
}
.custom-file-label::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 3;
display: block;
height: 38px;
padding: .375rem .75rem;
line-height: 2;
color: #495057;
content: "Browse";
background-color: #e9ecef;
border-left: inherit;
border-radius: 0 .25rem .25rem 0;
}
.footer-link {
margin-top: 30px;
}
.all-info-container {}
.list-content {
margin-bottom: 10px;
}
.list-content a {
padding: 10px 15px;
width: 100%;
display: inline-block;
background-color: #f5f5f5;
position: relative;
color: #565656;
font-weight: 400;
border-radius: 4px;
}
.list-content a[aria-expanded="true"] i {
transform: rotate(180deg);
}
.list-content a i {
text-align: right;
position: absolute;
top: 15px;
right: 10px;
transition: 0.5s;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
background-color: #fdfdfd;
}
.list-box {
padding: 10px;
}
.signup-logo-header .logo_area {
width: 200px;
}
.signup-logo-header .nav>li {
padding: 0;
}
.signup-logo-header .header-flex {
display: flex;
justify-content: center;
align-items: center;
}
.list-inline li {
display: inline-block;
}
.pull-right {
float: right;
}
/*-----------custom-checkbox-----------*/
/*----------Custom-Checkbox---------*/
input[type="checkbox"] {
position: relative;
display: inline-block;
margin-right: 5px;
}
input[type="checkbox"]::before,
input[type="checkbox"]::after {
position: absolute;
content: "";
display: inline-block;
}
input[type="checkbox"]::before {
height: 16px;
width: 16px;
border: 1px solid #999;
left: 0px;
top: 0px;
background-color: #fff;
border-radius: 2px;
}
input[type="checkbox"]::after {
height: 5px;
width: 9px;
left: 4px;
top: 4px;
}
input[type="checkbox"]:checked::after {
content: "";
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: rotate(-45deg);
}
input[type="checkbox"]:checked::before {
background-color: #18ba60;
border-color: #18ba60;
}
.service-card-wrapper ul {
display: flex;
flex-direction: column;
gap: 20px;
}
.service-image {
width: 60px;
height: 60px;
border: 1px solid var(--bs-card-border-color);
border-radius: 50%;
overflow: hidden;
}
.service-image img,
.staff-image img {
width: 100%;
height: 100%;
}
.service-card-wrapper .service-card span.service-price {
line-height: 1;
background: transparent;
padding: 0;
margin: 0;
}
.service-card-wrapper .service-card .service-left-content {
flex: 1;
}
.service-card-wrapper .service-card-left {
width: 100%;
}
.service-card-wrapper .service-card .service-bottom-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.service-card-wrapper .service-card p svg {
height: 14px;
width: 14px;
margin-right: 5px;
}
.service-card-wrapper .service-card input[type="radio"] {
display: none;
padding: 0;
border: 0;
background: transparent;
}
.service-card-wrapper .service-card input[type="radio"]:checked+span {
background: #0069ff;
}
.service-card-wrapper .service-card input[type="radio"]:checked+span h6,
.service-card-wrapper .service-card input[type="radio"]:checked+span .service-price,
.service-card-wrapper .service-card input[type="radio"]:checked+span p {
color: #ffffff;
}
.service-card-wrapper .service-card input[type="radio"]:checked+span p svg path {
fill: #ffffff;
}
.service-card-wrapper .service-card span {
width: auto;
border-radius: 10px;
font-size: 14px;
height: 100%;
display: block;
cursor: pointer;
position: relative;
color: #000;
margin: 0;
vertical-align: bottom;
border-radius: 10px;
display: flex;
align-items: center;
overflow: hidden;
height: 55px !important;
}
.service-card-wrapper .service-card label {
width: 100%;
margin-bottom: 15px;
}
.service-card-wrapper span {
cursor: pointer;
position: relative;
font-size: 12px;
padding-left: 24px;
color: #000;
margin: 0;
vertical-align: bottom;
width: 100%;
}
.location-card .card-content-left span {
width: 100%;
padding-left: 0px;
display: block;
text-align: center;
margin-top: 10px;
}
.service-card-wrapper ul li label {
display: block;
}
.service-content-tab,
.staff-content-tab {
margin-bottom: 30px;
}
.service-card-wrapper h4 {
font-weight: 500;
color: #2a2a2a;
font-size: 24px;
text-transform: capitalize;
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 20px
}
.service-card-wrapper h4 svg path {
fill: #0db02b;
}
.service-card-wrapper ul li input[type="radio"]:checked+span h6 {
color: #fff
}
.service-card-wrapper ul li input[type="radio"]:checked+span .service-card-right svg path {
fill: #fff
}
.service-card-wrapper ul li input[type="radio"]:checked+span .service-price {
background: rgb(255 255 255 / 26%);
color: #fff;
}
.service-card-wrapper ul li input[type="radio"]:checked+span .service-card-right p {
color: #fff;
}
.service-card-wrapper h6 {
font-weight: 400;
margin-bottom: 15px;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.service-card-right p {
display: flex;
align-items: center;
gap: 5px;
}
.staff-content-tab input[type="radio"],
.location-card input[type="radio"],
.appointment-date-tab input[type="radio"] {
display: none !important;
}
.staff-content-tab .checkbox-custom label .card-content-left {
position: relative;
display: inline-block;
vertical-align: middle;
cursor: pointer;
font-size: 14px;
line-height: 1.1;
margin: 0;
padding: 0px;
width: 100%;
border: 0px;
backdrop-filter: blur(10px);
background-color: transparent;
border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
transition: .2s all ease-in-out;
-webkit-transition: .2s all ease-in-out;
-moz-transition: .2s all ease-in-out;
-ms-transition: .2s all ease-in-out;
-o-transition: .2s all ease-in-out;
-webkit-border-radius: 10px;
z-index: 1;
margin-bottom: 10px;
}
.staff-content-tab .checkbox-custom {
border: 1px solid #7fb4ff;
border-radius: 10px;
overflow: hidden;
}
.staff-content-tab .staff-card-content {
padding: 20px;
}
.staff-content-tab .staff-card-content .card-content-left {
margin-bottom: 0px !important;
}
.staff-content-tab input:checked+label .staff-card-content {
background: #0069ff;
color: white !important;
}
.staff-content-tab input:checked+label .staff-image {
outline: 1px solid #0db02b;
outline-offset: 2px;
}
.staff-image {
width: 150px;
height: 150px;
border-radius: 50%;
display: block;
overflow: hidden;
margin: 0 auto 15px;
}
.staff-card-content .card-content-left b {
font-size: 16px;
font-weight: 400 !important;
text-transform: capitalize;
text-align: center;
margin-bottom: 10px;
}
.staff-content-tab .row,
.location-content-tab .row {
row-gap: 20px;
}
.location-card .location-card-inner {
border-radius: 10px;
overflow: hidden;
height: 55px !important;
border: 1px solid #7fb4ff;
}
.email_to_input {
border-radius: 10px;
overflow: hidden;
height: 55px !important;
border: 1px solid #dfdfdf;
background: none;
}
.location-content-tab input:checked+label .location-card-inner {
border: 1px solid #dfdfdf;
background: #0069ff;
;
color: white;
}
.location-image {
/* width: 100%; */
position: relative;
}
.location-image img {
width: 30px;
height: 100%;
}
.location-icon {
background: #0db02b;
border: 3px solid #fff;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 0;
left: 0;
top: 50%;
margin: 0 auto;
transform: translateY(-50%);
}
.location-icon svg path {
fill: #fff;
}
.location-card .location-card-inner .card-content-left {
padding: 15px;
}
.location-card .location-card-inner .card-content-left p {
text-align: center;
font-size: 18px;
font-weight: 500;
display: block;
}
.appointment-date-tab .appoint-date-list input[type="radio"]:checked+span {
border: 1px solid #dfdfdf;
background: #0069ff;
color: white;
}
.appointment-date-tab .appoint-date-list span {
width: auto;
padding: 10px;
/* background-color: rgb(40 167 69 / 7%); */
border-radius: 4px;
font-size: 14px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
color: #0069ff;
margin: 0;
vertical-align: bottom;
text-align: center;
list-style: 1;
border: 1px solid #0069ff;
}
.datepicker table tr td {
color: #0069ff !important;
}
.datepicker table tr td.active.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active.disabled:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active[disabled] {
background-color: #0069ff !important;
color: white !important;
}
.appointment-date-tab .appoint-date-list span svg {
margin-right: 7px;
width: 17px;
filter: invert(15%) sepia(100%) saturate(5198%) hue-rotate(238deg) brightness(90%) contrast(114%);
height: 17px;
display: none;
}
.appointment-date-tab .appoint-date-list input[type="radio"]:checked+span svg {
filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(188deg) brightness(107%) contrast(101%);
}
.appoint-date-list {
row-gap: 15px;
}
.btn-wrapper {
display: flex;
align-items: center;
gap: 15px;
margin-top: 30px !important;
}
.btn-wrapper .default-btn {
margin-top: 0;
}
.booking-input input {
border: 1px solid #0069ff;
padding: 13px 15px;
font-size: 14px;
height: 100%;
}
.booking-input label {
font-weight: 500;
}
.booking-info-tab .row {
row-gap: 15px;
}
.booking-input .form-control:focus {
border: 1px solid #0069ff;
background-color: rgb(40 167 69 / 7%);
}
.booking-info-tab.booking-radio .checkbox-custom input {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
.booking-info-tab.booking-radio .checkbox-custom label {
position: relative;
display: inline-block;
vertical-align: middle;
cursor: pointer;
font-size: 14px;
line-height: 1.1;
margin: 0;
padding: 12px 30px 12px 20px;
width: 100%;
border: 1px solid #e5e7eb;
font-size: 14px;
background-color: transparent;
outline: none;
line-height: 1.2;
border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
transition: .2s all ease-in-out;
-webkit-transition: .2s all ease-in-out;
-moz-transition: .2s all ease-in-out;
-ms-transition: .2s all ease-in-out;
-o-transition: .2s all ease-in-out;
-webkit-border-radius: 10px;
}
.booking-info-tab.booking-radio .checkbox-custom:not(:last-child) {
margin-bottom: 15px;
}
.booking-info-tab.booking-radio .checkbox-custom label:before {
content: '';
appearance: none;
-webkit-appearance: none;
background-color: transparent;
border: 1px solid #e5e7eb;
padding: 8px;
display: inline-block;
position: absolute;
vertical-align: middle;
cursor: pointer;
right: 10px;
top: 50%;
border-radius: 5px;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
margin-left: 15px;
}
.booking-info-tab.booking-radio .checkbox-custom input:checked+label:after {
content: '';
display: block;
position: absolute;
top: 50%;
right: 17px;
width: 4px;
height: 8px;
border: 1px solid #0db02b;
border-width: 0px 1px 1px 0;
transform: translateY(-50%) rotate(45deg);
-moz-transform: translateY(-50%) rotate(45deg);
-ms-transform: translateY(-50%) rotate(45deg);
-o-transform: translateY(-50%) rotate(45deg);
-webkit-transform: translateY(-50%) rotate(45deg);
}
.booking-info-tab.booking-radio .checkbox-custom span {
display: inline-block;
background-color: #d5d8db;
padding: 5px 8px;
border-radius: 50%;
height: 30px;
width: 30px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
margin-right: 5px;
transition: .2s all ease-in-out;
-webkit-transition: .2s all ease-in-out;
-moz-transition: .2s all ease-in-out;
-ms-transition: .2s all ease-in-out;
-o-transition: .2s all ease-in-out;
}
.booking-info-tab.booking-radio input:checked+label {
background-color: rgb(40 167 69 / 7%);
border: 1px solid #0db02b;
}
.booking-info-tab .nav-pills .tab-link .nav-link {
background: rgb(40 167 69 / 7%);
color: #000;
border-radius: 10px;
display: flex;
align-items: center;
}
.booking-info-tab .nav-pills .nav-link svg {
width: 17px;
height: 17px;
margin-right: 10px;
}
.booking-info-tab .nav-pills {
justify-content: center;
gap: 15px;
}
.booking-info-tab input:-internal-autofill-selected {
background-color: rgb(40 167 69 / 7%) !important;
border-color: #0db02b;
}
.booking-info-tab .nav-pills .tab-link.active .nav-link {
background: #0db02b;
color: #fff;
}
.booking-info-tab .nav-pills .tab-link.active .nav-link svg path {
fill: #fff;
}
.wizard-inner .nav-tabs {
justify-content: center;
padding-top: 10px
}
.wizard-inner .nav-tabs p {
margin-bottom: 0px;
margin-top: 10px;
}
.booking-info-tab .tab-wrapper {
margin-bottom: 30px;
}
.booking-info-tab .tab-content.active {
display: block;
}
.booking-info-tab .tab-content {
display: none;
}
.booking-error {
padding: 8px;
background: #ff03031f;
border-radius: 10px;
width: auto;
display: flex;
align-items: center;
max-width: 50%;
width: 100%;
margin-bottom: 15px;
justify-content: center;
}
.booking-error .error {
display: flex;
align-items: center;
gap: 8px;
}
.booking-error svg {
width: 14px;
height: 14px;
}
.booking-error svg path {
fill: #d50000;
}
.booking-error span {
flex: 1;
}
.choose-files .form-control {
height: auto;
}
@media (max-width: 1399px) {
.location-icon {
width: 40px;
height: 40px;
}
.location-icon svg {
width: 20px;
height: 20px;
}
.wizard-inner .nav-tabs p {
display: none;
}
}
@media (max-width: 1199px) {
.staff-image {
width: 130px;
height: 130px;
}
}
@media (max-width: 767px) {
.sign-content h3 {
font-size: 40px;
}
.wizard .nav-tabs>li a i {
display: none;
}
.signup-logo-header .navbar-toggle {
margin: 0;
margin-top: 8px;
}
.signup-logo-header .logo_area {
margin-top: 0;
}
.signup-logo-header .header-flex {
display: block;
}
.staff-card-content .card-content-left b {
font-size: 14px;
}
.staff-image {
width: 120px;
height: 120px;
}
.service-content-tab,
.staff-content-tab {
margin-bottom: 20px;
}
.booking-error {
max-width: 100%;
}
.wizard>div.wizard-inner {
position: relative;
margin-bottom: 20px;
}
}
@media (max-width: 480px) {
.service-card-inner {
flex-direction: column;
align-items: flex-start !important;
row-gap: 15px;
}
.service-image {
width: 50px;
height: 50px;
}
}
@media (max-width: 575px) {
.signup-step-container .card-body {
padding: 15px;
}
}
.datepicker td,
th {
text-align: center;
padding: 8px 12px;
font-size: 14px;
}
.datepicker-inline {
width: 100%;
}
.form_man_box {
/* background: #ebebebcf; */
padding: 56px 0px 0px 0px;
border-radius: 8px;
/* box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; */
}
.select_product {
height: 55px !important;
border: 1px solid #7fb4ff;
font-size: 18px;
}
.meeting_box {
height: 55px !important;
display: flex;
}
.meeting_box b {
margin: 0 !important;
font-size: 18px !important;
}
.form_heading {
font-size: 18px;
display: flex;
justify-content: center;
}
.datepicker tbody tr>td.day.today {
position: relative;
background: #0069ff !important;
color: #fff !important;
}
.details_Box {
margin-bottom: 24px;
border: 1px solid #e7e7e7;
height: 90%;
;
overflow-y: auto;
box-shadow: none !important;
}
.form_box {
border: 1px solid #e7e7e7;
height: 100%;
overflow: auto;
}
.shadow_none {
box-shadow: none !important;
}
.radius-4 {
border-radius: 20px !important;
}
.appoint-date-list li {
width: 100% !important;
}
.appoint-date-list {
height: 345px;
margin-top: 30px;
overflow-y: auto;
}
.next {
position: relative;
;
z-index: 1;
;
}
.next:before {
content: '';
position: absolute;
width: 35px;
height: 35px;
background: #6574ff2b;
border-radius: 50%;
top: 0;
right: 0;
z-index: -1;
}
.next {
color: transparent !important;
}
.datepicker thead th.datepicker-switch:hover,
.datepicker thead th.next:hover,
.datepicker thead th.prev:hover {
background: transparent !important;
}
.next:after {
content: '';
position: absolute;
width: 10px;
height: 10px;
/* background: white; */
top: 13px;
transform: rotate(133deg);
right: 14px;
border-left: 2px solid #0069ff;
z-index: -1;
border-top: 2px solid #0069ff;
}
.prev {
position: relative;
;
z-index: 1;
;
}
.prev:before {
content: '';
position: absolute;
width: 35px;
height: 35px;
background: #6574ff2b;
border-radius: 50%;
top: 0;
right: 0;
z-index: -1;
}
.prev {
color: transparent !important;
}
.datepicker thead th.datepicker-switch:hover,
.datepicker thead th.prev:hover,
.datepicker thead th.prev:hover {
background: transparent !important;
}
.prev:after {
content: '';
position: absolute;
width: 10px;
height: 10px;
/* background: white; */
top: 13px;
transform: rotate(314deg);
right: 11px;
border-left: 2px solid #0069ff;
z-index: -1;
border-top: 2px solid #0069ff;
}
.datepicker.datepicker-inline {
/* border: 1px solid #f1f1f1; */
/* padding: 20px; */
padding-top: 20px;
padding-right: 20px;
border: none !important;
}
/* width */
::-webkit-scrollbar {
width: 5px;
height: 10px !important;
;
}
/* Track */
::-webkit-scrollbar-track {
background: white;
;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #3e50f7;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.heading {
font-weight: 700;
font-size: 28px;
line-height: 32px;
}
#your_details {
padding: 1px 20px;
}
#your_details p {
color: rgb(26 26 26 / 61%);
font-weight: 700;
font-size: 16px;
}
.current_time {
position: relative;
bottom: -76px;
left: 11px;
}
.overflow_auto {
overflow: auto;
height: 91vh
}
.details_h1 {
margin-left: 18px;
font-weight: 500;
color: #2a2a2a;
font-size: 24px;
text-transform: capitalize;
display: flex;
align-items: center;
gap: 7px;
rgb(239, 236, 236) margin-bottom: 20px;
border-bottom: 1px solid #e8e8e8;
padding-bottom: 22px;
}
</style>
<style type="text/css">
<?php echo e(htmlspecialchars_decode($customCss)); ?>
</style>
</head>
<body>
<section class="signup-step-container">
<div class="container">
<div class="row d-flex justify-content-center form_man_box">
<div class="col-md-10">
<div class="wizard">
<div class="section-title">
<h1><?php echo e(__('Take Your Appointment')); ?> </h1>
</div>
<div class="wizard-inner">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab"
aria-expanded="true"><span class="round-tab"><?php echo e(__('1')); ?> </span>
</a>
<p><?php echo e(__('Choose Your Service')); ?></p>
</li>
<li role="presentation" class="disabled">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab"
aria-expanded="false">
<span class="round-tab"><?php echo e(__('2')); ?></span>
</a>
<p><?php echo e(__('Pick a Time')); ?></p>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab"><span
class="round-tab"><?php echo e(__('3')); ?></span> </a>
<p><?php echo e(__('Share Your Details')); ?></p>
</li>
</ul>
</div>
<div class="tv_frame">
<div class="row p-4">
<div id="details_div" class="col-md-4">
<div class="m-t-20">
<h4 class="details_h1">Your Details</h4>
<div id="your_details">
</div>
</div>
</div>
<div class="col-md-8 overflow_auto">
<form id="appointment-form" method="post" enctype="multipart/form-data" novalidate>
<?php echo csrf_field(); ?>
<div class="tab-content" id="main_form">
<div class="tab-pane active" role="tabpanel" id="step1">
<div class="row">
<div class="col-md-12">
<div class="shadow_none">
<div class="service-card-wrapper">
<div class="service-content-tab">
<h4>
<?php echo e(__('Product')); ?>
</h4>
<div class="row">
<div class="col-lg-12 col-12 service-card">
<select
class="form-control select_product service"
name="service" id="service">
<option value="">
--select-product--
</option>
<?php $__currentLoopData = $services; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $service): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<option
data-name="<?php echo e($service->name); ?>"
value="<?php echo e($service->id); ?>">
<?php echo e($service->name); ?>
</option>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</select>
</div>
</div>
</div>
<div class="staff-content-tab">
<h4><?php echo e(__('Meeting')); ?></h4>
<div class="row d-flex justify-content-between">
<?php $__currentLoopData = $staffs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $k => $staff): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<div
class="col-xl-5 col-lg-6 col-md-6 col-sm-6 col-12">
<div class="checkbox-custom">
<input type="radio"
id="quiz-<?php echo e($k); ?>"
data-name="<?php echo e($staff->name); ?>"
name="staff" class="staff"
required=""
value="<?php echo e($staff->user->id); ?>">
<label
for="quiz-<?php echo e($k); ?>"
class="form-field d-block mb-0">
<div
class="staff-card-content meeting_box">
<div
class="card-content-left">
<b class=" d-block">
<?php echo e($staff->name); ?></b>
</div>
</div>
</label>
</div>
</div>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>
</div>
<div class="location-content-tab">
<h4>
<?php echo e(__('Mode')); ?>
</h4>
<div class="row d-flex justify-content-between">
<?php $__currentLoopData = $locations; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $ke => $location): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<div
class="col-lg-5 col-md-6 col-sm-6 col-12">
<div class="location-card">
<input type="radio"
data-name="<?php echo e($location->name); ?>"
id="location-<?php echo e($ke); ?>"
name="location"
class="location"
required=""
value="<?php echo e($location->id); ?>">
<label
for="location-<?php echo e($ke); ?>"
class="form-field d-block mb-0">
<div
class="location-card-inner d-flex justify-content-center align-items-center">
<div
class="location-image ">
<img src="<?php echo e(asset('' . $location->image)); ?>"
alt="">
</div>
<div
class="card-content-left">
<p class="mb-0">
<?php echo e($location->name); ?>
</p>
</div>
</div>
</label>
</div>
</div>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>
</div>
</div>
</div>
</div>
</div>
<ul style="margin-right: 24px;" class="list-inline pull-right ">
<li><button type="button"
class="default-btn next-step"><?php echo e(__('Continue to next step')); ?></button>
</li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step2">
<div class="row">
<div class="col-9">
<div class="form-group mt-2">
<label for="appointment_date"
class="form_heading col-form-label"><?php echo e(__('Select a Date & Time')); ?></label>
<div id="calendar"></div>
<div class="input-group date ">
</div>
</div>
</div>
<div class="col-3">
<p class="current_time"></p>
<div class="card-body appointment-date-tab">
<div id="timeSlotsContainer"></div>
<?php if($custom_field == 'on'): ?>
<hr>
<div class="mt-3">
<div class="row align-items-center">
<?php $__currentLoopData = $custom_fields; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $custom_field): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<div
class="col-sm-12 col-12 mb-3 form-group">
<label for=<?php echo e($custom_field->label); ?>
class="col-form-label"><?php echo e($custom_field->label); ?></label>
<?php if($custom_field->type === 'textfield'): ?>
<input type="text"
name="values[<?php echo e($custom_field->label); ?>]"
placeholder="Value"
value="<?php echo e($custom_field->value); ?>"
class="custom_lbl form-control">
<?php elseif($custom_field->type === 'textarea'): ?>
<textarea name="values[<?php echo e($custom_field->label); ?>]" placeholder="Value" class="custom_lbl form-control"><?php echo e($custom_field->value); ?></textarea>
<?php elseif($custom_field->type === 'date'): ?>
<input type="date"
class="form-control custom_lbl"
name="values[<?php echo e($custom_field->label); ?>]"
value="<?php echo e($custom_field->value); ?>">
<?php elseif($custom_field->type === 'number'): ?>
<input type="number"
class="form-control custom_lbl"
name="values[<?php echo e($custom_field->label); ?>]"
placeholder="Value"
value="<?php echo e($custom_field->value); ?>">
<?php endif; ?>
</div>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>
</div>
<?php endif; ?>
<?php if(!empty($files) && $files->value == 'on'): ?>
<hr>
<div class="mt-2">
<div class="form-group">
<?php echo e(Form::label('attachment', $files->label, ['class' => 'form-label'])); ?>
<div class="choose-files ">
<label for="attachment">
<input type="file"
class="form-control file"
name="attachment" id="attachment"
data-filename="attachment">
</label>
</div>
</div>
</div>
<?php endif; ?>
</div>
</div>
</div>
<ul style="margin-right: 24px;"
class="list-inline pull-right btn-wrapper">
<li><button
type="button"class="default-btn btn-transparent prev-step"><?php echo e(__('Back')); ?></button>
</li>
<li><button
type="button"class="default-btn next-step"><?php echo e(__('Continue')); ?></button>
</li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step3">
<div class="card shadow_none border">
<div class="card-body booking-info-tab tabs-wrapper">
<ul class="nav nav-pills nav-fill tab-wrapper tabs">
<li class="nav-iteam tab-link" data-tab="new-user">
<a href="javascript:;" class="nav-link "
id="new-user">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512">
<path
d="M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM504 312V248H440c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V136c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H552v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z" />
</svg>
<?php echo e(__('New Registration')); ?></a>
</li>
<li class="nav-iteam tab-link " data-tab="existing-user">
<a href="javascript:;" class="nav-link "
id="existing-user">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512">
<path
d="M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM625 177L497 305c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L591 143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z" />
</svg>
<?php echo e(__('Already have account?')); ?></a>
</li>
<li class="nav-iteam tab-link active"
data-tab="guest-user">
<a href="javascript:;" class="nav-link "
id="guest-user">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512">
<path
d="M224 16c-6.7 0-10.8-2.8-15.5-6.1C201.9 5.4 194 0 176 0c-30.5 0-52 43.7-66 89.4C62.7 98.1 32 112.2 32 128c0 14.3 25 27.1 64.6 35.9c-.4 4-.6 8-.6 12.1c0 17 3.3 33.2 9.3 48H45.4C38 224 32 230 32 237.4c0 1.7 .3 3.4 1 5l38.8 96.9C28.2 371.8 0 423.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7c0-58.5-28.2-110.4-71.7-143L415 242.4c.6-1.6 1-3.3 1-5c0-7.4-6-13.4-13.4-13.4H342.7c6-14.8 9.3-31 9.3-48c0-4.1-.2-8.1-.6-12.1C391 155.1 416 142.3 416 128c0-15.8-30.7-29.9-78-38.6C324 43.7 302.5 0 272 0c-18 0-25.9 5.4-32.5 9.9c-4.8 3.3-8.8 6.1-15.5 6.1zm56 208H267.6c-16.5 0-31.1-10.6-36.3-26.2c-2.3-7-12.2-7-14.5 0c-5.2 15.6-19.9 26.2-36.3 26.2H168c-22.1 0-40-17.9-40-40V169.6c28.2 4.1 61 6.4 96 6.4s67.8-2.3 96-6.4V184c0 22.1-17.9 40-40 40zm-88 96l16 32L176 480 128 288l64 32zm128-32L272 480 240 352l16-32 64-32z" />
</svg>
<?php echo e(__('Guest Booking')); ?></a>
</li>
</ul>
<input type="hidden" name="type"
id="selected_tab"value="guest-user">
<div class="booking-error d-none">
<div class="error">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">
<path
d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z" />
</svg>
<span class="error-msg"> </span>
</div>
</div>
<div class="tabs-container">
<div class="tab-content active" id="guest-user">
<div class="row row-gap-3">
<div class="col-md-6 col-12">
<div class="form-group booking-input mb-0">
<label><?php echo e(__('Name')); ?> *</label>
<input class="form-control" type="text"
name="name" class="name"
id="name"
placeholder="Your Full Name" required>
</div>
</div>
<div class=" col-md-6 col-12">
<div class="form-group booking-input mb-0">
<label><?php echo e(__('Email')); ?> *</label>
<input class="form-control" type="email"
name="email" class="email"
id="email"
placeholder="Your email" required>
</div>
</div>
<div class=" col-md-6 col-12">
<div class="form-group booking-input mb-0">
<label><?php echo e(__('Contact')); ?> *</label>
<input class="form-control" type="number"
name="contact" class="contact"
id="contact"
placeholder="Phone Number" required>
</div>
</div>
<div class=" col-md-6 col-12">
<div class="form-group booking-input mb-0">
<label><?php echo e(__('Address')); ?> *</label>
<input class="form-control" type="text"
name="address" class="address"
id="address" placeholder="Address"
required>
</div>
</div>
<div class=" col-md-4 col-12">
<div class="form-group booking-input mb-0">
<label><?php echo e(__('City')); ?> *</label>
<input class="form-control" type="text"
name="city" class="city"
id="city" placeholder="City"
required>
</div>
</div>
<div class=" col-md-4 col-12">
<div class="form-group booking-input mb-0">
<label><?php echo e(__('Pincode')); ?> *</label>
<input class="form-control" type="text"
name="pincode" class="pincode"
id="pincode" placeholder="Pincode"
required>
</div>
</div>
<div class=" col-md-4 col-12">
<div class="form-group booking-input mb-0">
<label><?php echo e(__('State')); ?> *</label>
<input class="form-control" type="text"
name="state" class="state"
id="state" placeholder="State"
required>
</div>
</div>
<div class=" col-md-12 col-12">
<div class="form-group booking-input mb-0">
<label><?php echo e(__('Notes')); ?> *</label>
<input class="form-control" type="text"
name="notes" class="notes"
id="notes" placeholder="Notes"
required>
</div>
</div>
</div>
</div>
<div class="tab-content" id="new-user">
<div class="row row-gap-3">
<div class="col-md-6 col-12">
<div class="form-group booking-input mb-0">
<label><?php echo e(__('Name')); ?> *</label>
<input class="form-control" type="text"
name="name" class="name"
id="name"
placeholder="Your Full Name">
</div>
</div>
<div class=" col-md-6 col-12">
<div class="form-group booking-input mb-0">
<label><?php echo e(__('Email')); ?> *</label>
<input class="form-control" type="email"
name="email" class="email"
id="email"
placeholder="Your email">
</div>
</div>
<div class=" col-md-6 col-12">
<div class="form-group booking-input mb-0">
<label><?php echo e(__('Contact')); ?> *</label>
<input class="form-control" type="number"
name="contact" class="contact"
id="contact"
placeholder="Phone Number">
</div>
</div>
<div class=" col-md-6 col-12">
<div class="form-group booking-input mb-0">
<label><?php echo e(__('password')); ?> *</label>
<input class="form-control"
type="password" name="password"
class="password" id="password"
placeholder="Your password">
</div>
</div>
</div>
</div>
<div class="tab-content" id="existing-user">
<div class="row row-gap-3">
<div class=" col-md-6 col-12">
<div class="form-group booking-input mb-0">
<label><?php echo e(__('Email')); ?> *</label>
<input class="form-control" type="email"
name="email" class="email"
id="email"
placeholder="Your email">
</div>
</div>
<div class=" col-md-6 col-12">
<div class="form-group booking-input mb-0">
<label><?php echo e(__('password')); ?> *</label>
<input class="form-control"
type="password" name="password"
class="password" id="password"
placeholder="Your password">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<ul style="margin-right: 24px;"
class="list-inline pull-right btn-wrapper">
<li><button type="button"
class="default-btn btn-transparent prev-step"><?php echo e(__('Back')); ?></button>
</li>
<li><button type="submit"
class="default-btn submit-step "><?php echo e(__('Finish')); ?></button>
</li>
</ul>
</div>
<input type="hidden" name="business_id" value="<?php echo e($business->id); ?>">
<input type="hidden" name="payment" value="manually">
<div class="clearfix"></div>
</div>
<?php echo e(Form::close()); ?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="<?php echo e(asset('js/jquery.js')); ?>"></script>
<script src="<?php echo e(asset('assets/js/custom-bootstrap.js')); ?>"></script>
<script src="<?php echo e(asset('assets/js/bootstrap-datepicker.js')); ?>"></script>
<script type="text/javascript">
// ------------step-wizard-------------
$(document).ready(function() {
var daysOfWeek = <?php echo json_encode($combinedArray); ?>;
// $('#sandbox-container input').datepicker({
// startDate: '+0d',
// format: 'dd-mm-yyyy',
// autoclose: true,
// daysOfWeekDisabled: daysOfWeek
// });
$('#calendar').datepicker({
startDate: '+0d',
daysOfWeekDisabled: "0,6",
format: 'dd-mm-yyyy',
autoclose: true,
daysOfWeekDisabled: daysOfWeek
});
$('.nav-tabs > li a[title]').tooltip();
//Wizard
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
var target = $(e.target);
if (target.parent().hasClass('disabled')) {
return false;
}
});
$(document).on('click', '.next-step', function(e) {
if (!validateCurrentStep()) {
return false;
}
var active = $('.wizard .nav-tabs li.active');
active.next().removeClass('disabled');
nextTab(active);
});
$(document).on('click', '.prev-step', function(e) {
var active = $('.wizard .nav-tabs li.active');
prevTab(active);
});
});
function validateCurrentStep() {
update_your_details();
var isValid = true;
// Validate fields for the current step
var currentStep = $('.wizard .nav-tabs li.active a[data-toggle="tab"]').attr('href');
if (currentStep === "#step1") {
isValid = validateStep1();
} else if (currentStep === "#step2") {
isValid = validateStep2();
} else if (currentStep === "#step3") {
isValid = validateStep3();
}
// Add more conditions for additional steps if needed
return isValid;
}
function validateStep1() {
var service = $('.service').val();
var staff = $('.staff').is(':checked');
var location = $('.location').is(':checked');
if (!service || !staff || !location) {
alert('Please select all required field.');
return false;
}
return true;
}
function validateStep2() {
var date = $('#calendar').data('datepicker').getFormattedDate('dd-mm-yyyy');
var timeslot = $('.timeslot').is(':checked');
if (!date || !timeslot) {
alert('Please select all required field.');
return false;
}
return true;
}
function validateStep3() {
var name = $('.name').val();
var contact = $('.contact').val();
var email = $('.email').val();
if (!name || !contact || !email) {
alert('Please select all required field.');
return false;
}
return true;
}
function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').trigger('click');
}
function prevTab(elem) {
$(elem).prev().find('a[data-toggle="tab"]').trigger('click');
}
$('.nav-tabs').on('click', 'li', function() {
$('.nav-tabs li.active').removeClass('active');
$(this).addClass('active');
});
$('.service').change(function() {
updateAppointment();
});
$('#calendar').on('changeDate', function() {
updateAppointment();
});
function update_your_details() {
$('#your_details').empty();
var service = $(".service option:selected").html();
// var staff = $('.staff').is(':checked');
var staff = $('input[name="staff"]:checked').data('name');
var location = $('input[name="location"]:checked').data('name');
var date = $('#calendar').data('datepicker').getFormattedDate('dd-mm-yyyy');
var timeslot = $('input[name="duration"]:checked').val();
var name = $('.name').val();
var contact = $('.contact').val();
var email = $('.email').val();
if (service) {
$('#your_details').append("<p><span class='pr-2'>Product:</span>" + service + "</p>");
}
if (staff) {
$('#your_details').append("<p><span class='pr-2'>Meeting:</span>" + staff + "</p>");
}
if (location) {
$('#your_details').append("<p><span class='pr-2'>Mode:</span>" + location + "</p>");
}
// if (date) {
// $('#your_details').append("<p><span class='pr-2'>Date:</span>" + date + "</p>");
// }
if (timeslot && date) {
$('#your_details').append("<p><i class='fa fa-clock-o fa-lg'></i> 30 Min</p>");
$('#your_details').append(
"<p><i class='fa fa-globe fa-lg'></i><span class='pl-2 pr-2'>India Standard Time</span></p>"
);
$('#your_details').append("<p><i class='fa fa-calendar fa-lg'></i><span class='pr-2'></span>" + timeslot +
", " + date + "</p>");
// $('#your_details').append("<p><span class='pr-2'>Timeslot:</span>" + timeslot + "</p>");
}
if (name) {
$('#your_details').append("<p><span class='pr-2'>Name:</span>" + name + "</p>");
}
if (contact) {
$('#your_details').append("<p><span class='pr-2'>Contact:</span>" + contact + "</p>");
}
if (email) {
$('#your_details').append("<p><span class='pr-2'>Email:</span>" + email + "</p>");
}
}
function updateAppointment() {
var selectedService = $('#service').val();
var selectedDate = $('#calendar').data('datepicker').getFormattedDate('dd-mm-yyyy');
// Make an AJAX call
var csrfToken = $('meta[name="csrf-token"]').attr('content');
$.ajax({
url: '<?php echo e(route('appointment.duration')); ?>', // Replace with your actual AJAX endpoint
method: 'POST',
data: {
service: selectedService,
date: selectedDate
// Add other data if needed
},
context: this,
headers: {
'X-CSRF-TOKEN': csrfToken
},
success: function(response) {
if (response.result == 'success') {
// Handle the response from the server
var timeSlots = response.timeSlots;
// Display time slots below the datepicker
var timeSlotsContainer = $('#timeSlotsContainer');
timeSlotsContainer.empty(); // Clear previous time slots
if (timeSlots.length > 0) {
var timeSlotsList = $('<ul class="appoint-date-list row">');
timeSlots.forEach(function(timeSlot, index) {
var timeSlotLabel = $('<label class="d-block mb-0">');
var timeSlotDiv = $('<div class="px-2">');
var input = $('<input type="radio" class="timeslot">')
.attr('name', 'duration')
.attr('value', timeSlot.start + '-' + timeSlot.end)
.attr('id', 'radio' + index);
var svgIcon = $(
'<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512" fill="none">\
<path d="M256 499.2C121.899 499.2 12.8 390.101 12.8 256C12.8 121.899 121.899 12.8 256 12.8C390.101 12.8 499.2 121.899 499.2 256C499.2 390.101 390.101 499.2 256 499.2ZM256 35.962C134.671 35.962 35.962 134.671 35.962 256C35.962 377.329 134.671 476.038 256 476.038C377.329 476.038 476.038 377.329 476.038 256C476.038 134.671 377.329 35.962 256 35.962Z" fill="black"></path>\
<path d="M369.236 267.581H256C249.604 267.581 244.419 262.396 244.419 256V90.0062C244.419 83.6101 249.604 78.4253 256 78.4253C262.396 78.4253 267.581 83.6101 267.581 90.0062V244.419H369.236C375.632 244.419 380.817 249.604 380.817 256C380.817 262.396 375.632 267.581 369.236 267.581Z" fill="black"></path>\
</svg>'
);
var span = $('<span>').append(svgIcon);
span.append($('<p class="mb-0 d-inline-block">').text(' ' + timeSlot
.start + '-' + timeSlot.end));
timeSlotLabel.append(input);
timeSlotLabel.append(span);
timeSlotDiv.append(timeSlotLabel);
timeSlotsList.append($('<li class="col-lg-4 col-md-6 col-sm-6 col-12">')
.append(timeSlotDiv));
});
timeSlotsContainer.append(timeSlotsList);
} else {
timeSlotsContainer.append('<p>No available time slots.</p>');
}
}
}
});
}
$(document).on('submit', '#appointment-form', function(e) {
e.preventDefault(); // Prevent the default form submission
var formData = new FormData(this);
var customerTab = $('.tab-content.active').find('input');
customerTab.each(function() {
var inputName = $(this).attr('name');
var inputValue = $(this).val();
formData.append(inputName, inputValue);
});
var customerTab = customerTab.serialize();
formData.append('appointment_date', $('#calendar').data('datepicker').getFormattedDate('dd-mm-yyyy'));
// Get the active tab
var csrfToken = $('meta[name="csrf-token"]').attr('content');
// Make an AJAX call
$.ajax({
url: '<?php echo e(route('appointment.form.submit')); ?>', // Replace with your actual route
method: 'POST',
data: formData,
processData: false,
contentType: false,
headers: {
'X-CSRF-TOKEN': csrfToken
},
success: function(response) {
console.warn(response);
if (response.msg == 'success') {
window.location.href = response.url;
} else {
$('.booking-error').removeClass('d-none').addClass('d-block');
$('.error-msg').html(response.error);
}
}
});
});
$('#appointment-form').on('change', function(e) {
var paymentAction = $('[data-payment-action]:checked').data("payment-action");
if (paymentAction) {
$("#appointment-form").attr("action", paymentAction);
} else {
$("#appointment-form").attr("action", '');
}
});
$(document).on('click', 'ul.tabs li', function() {
$('.tabs-container .tab-content').find('input').val('');
var $this = $(this);
var $theTab = $this.attr('data-tab');
if ($this.hasClass('active')) {
// do nothing
} else {
$this.closest('.tabs-wrapper').find('ul.tabs li, .tabs-container .tab-content').removeClass(
'active');
$('.tabs-container .tab-content[id="' + $theTab + '"], ul.tabs li[data-tab="' + $theTab + '"]')
.addClass('active');
}
});
$('.tab-link').on('click', function() {
var selectedTab = $(this).data('tab');
$('#selected_tab').val(selectedTab);
});
</script>
<script type="text/javascript">
<?php echo htmlspecialchars_decode($customJs); ?>
</script>
</body>
</html>
<?php /**PATH /var/www/account.appointkrypt.com/resources/views/embeded_appointment/index.blade.php ENDPATH**/ ?>