<?php
include_once('common.php');
?>
<?php 
session_start();
$OpticianName = $_SESSION['OpticianName'];
$OpticianAddress = $_SESSION['OpticianAddress'];
$OpticianPhone = $_SESSION['OpticianPhone']; 
$OpticianLogo = $_SESSION['OpticianLogo'];
 ?>
<!DOCTYPE html>
<html lang="en-US" class="scheme_original" style="margin-top:0px !important;">
   <head>
      <title> <?php echo $OpticianName ?> </title>
      <style type="text/css" media="screen">html{margin-top: 0px !important;}#ui-datepicker-div.booked_custom_date_picker table.ui-datepicker-calendar tbody td a.ui-state-active,#ui-datepicker-div.booked_custom_date_picker table.ui-datepicker-calendar tbody td a.ui-state-active:hover,body #booked-profile-page input[type=submit].button-primary:hover,body .booked-list-view button.button:hover, body .booked-list-view input[type=submit].button-primary:hover,body table.booked-calendar input[type=submit].button-primary:hover,body .booked-modal input[type=submit].button-primary:hover,body table.booked-calendar th,body table.booked-calendar thead,body table.booked-calendar thead th,body table.booked-calendar .booked-appt-list .timeslot .timeslot-people button:hover,body #booked-profile-page .booked-profile-header,body #booked-profile-page .booked-tabs li.active a,body #booked-profile-page .booked-tabs li.active a:hover,body #booked-profile-page .appt-block .google-cal-button > a:hover,#ui-datepicker-div.booked_custom_date_picker .ui-datepicker-header{ background:#12b48b !important; }body #booked-profile-page input[type=submit].button-primary:hover,body table.booked-calendar input[type=submit].button-primary:hover,body .booked-list-view button.button:hover, body .booked-list-view input[type=submit].button-primary:hover,body .booked-modal input[type=submit].button-primary:hover,body table.booked-calendar th,body table.booked-calendar .booked-appt-list .timeslot .timeslot-people button:hover,body #booked-profile-page .booked-profile-header,body #booked-profile-page .appt-block .google-cal-button > a:hover{ border-color:#12b48b !important; }body table.booked-calendar tr.days,body table.booked-calendar tr.days th,body .booked-calendarSwitcher.calendar,body #booked-profile-page .booked-tabs,#ui-datepicker-div.booked_custom_date_picker table.ui-datepicker-calendar thead,#ui-datepicker-div.booked_custom_date_picker table.ui-datepicker-calendar thead th{ background:#12b48b !important; }body table.booked-calendar tr.days th,body #booked-profile-page .booked-tabs{ border-color:#12b48b !important; }#ui-datepicker-div.booked_custom_date_picker table.ui-datepicker-calendar tbody td.ui-datepicker-today a,#ui-datepicker-div.booked_custom_date_picker table.ui-datepicker-calendar tbody td.ui-datepicker-today a:hover,body #booked-profile-page input[type=submit].button-primary,body table.booked-calendar input[type=submit].button-primary,body .booked-list-view button.button, body .booked-list-view input[type=submit].button-primary,body .booked-list-view button.button, body .booked-list-view input[type=submit].button-primary,body .booked-modal input[type=submit].button-primary,body table.booked-calendar .booked-appt-list .timeslot .timeslot-people button,body #booked-profile-page .booked-profile-appt-list .appt-block.approved .status-block,body #booked-profile-page .appt-block .google-cal-button > a,body .booked-modal p.booked-title-bar,body table.booked-calendar td:hover .date span,body .booked-list-view a.booked_list_date_picker_trigger.booked-dp-active,body .booked-list-view a.booked_list_date_picker_trigger.booked-dp-active:hover,.booked-ms-modal .booked-book-appt /* Multi-Slot Booking */{ background:#12b48b; }body #booked-profile-page input[type=submit].button-primary,body table.booked-calendar input[type=submit].button-primary,body .booked-list-view button.button, body .booked-list-view input[type=submit].button-primary,body .booked-list-view button.button, body .booked-list-view input[type=submit].button-primary,body .booked-modal input[type=submit].button-primary,body #booked-profile-page .appt-block .google-cal-button > a,body table.booked-calendar .booked-appt-list .timeslot .timeslot-people button,body .booked-list-view a.booked_list_date_picker_trigger.booked-dp-active,body .booked-list-view a.booked_list_date_picker_trigger.booked-dp-active:hover{ border-color:#12b48b; }body .booked-modal .bm-window p i.fa,body .booked-modal .bm-window a,body .booked-appt-list .booked-public-appointment-title,body .booked-modal .bm-window p.appointment-title,.booked-ms-modal.visible:hover .booked-book-appt{ color:#12b48b; }.booked-appt-list .timeslot.has-title .booked-public-appointment-title { color:inherit; }
      </style>
      <meta name='robots' content='max-image-preview:large' />
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <meta name="format-detection" content="telephone=no">
      <link rel="profile" href="//gmpg.org/xfn/11" />
      <link rel='dns-prefetch' href='//fonts.googleapis.com' />
      <link rel='dns-prefetch' href='//s.w.org' />
      <style type="text/css">
         img.wp-smiley,
         img.emoji {
         display: inline !important;
         border: none !important;
         box-shadow: none !important;
         height: 1em !important;
         width: 1em !important;
         margin: 0 .07em !important;
         vertical-align: -0.1em !important;
         background: none !important;
         padding: 0 !important;
         }
      </style>
      <link rel='stylesheet' id='dashicons-css'  href='https://www.centenaryopticians.co.uk/wp-includes/css/dashicons.min.css?ver=5.7' type='text/css' media='all' />
      <link rel='stylesheet' id='contact-form-7-css'  href='https://www.centenaryopticians.co.uk/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=5.3.2' type='text/css' media='all' />
      <link rel='stylesheet' id='fontello-style-css'  href='https://www.centenaryopticians.co.uk/wp-content/themes/optometry/css/fontello/css/fontello.css' type='text/css' media='all' />
      <link rel='stylesheet' id='optometry-main-style-css'  href='https://www.centenaryopticians.co.uk/wp-content/themes/optometry/style.css' type='text/css' media='all' />
      <link rel='stylesheet' id='optometry-animation-style-css'  href='https://www.centenaryopticians.co.uk/wp-content/themes/optometry/fw/css/core.animation.css' type='text/css' media='all' />
      <link rel='stylesheet' id='optometry-shortcodes-style-css'  href='https://www.centenaryopticians.co.uk/wp-content/plugins/trx_utils/shortcodes/theme.shortcodes.css' type='text/css' media='all' />
      <link rel='stylesheet' id='optometry-skin-style-css'  href='https://www.centenaryopticians.co.uk/wp-content/themes/optometry/skins/optometry/skin.css' type='text/css' media='all' />
      <link rel='stylesheet' id='optometry-custom-style-css'  href='https://www.centenaryopticians.co.uk/wp-content/themes/optometry/fw/css/custom-style.css' type='text/css' media='all' />
      <style id='optometry-custom-style-inline-css' type='text/css'>
         #page_preloader{background-color:#ffffff}.preloader_wrap>div{background-color:#12B48B} .contacts_wrap .logo img{height:30px}
      </style>
      <link rel='stylesheet' id='optometry-responsive-style-css'  href='https://www.centenaryopticians.co.uk/wp-content/themes/optometry/css/responsive.css' type='text/css' media='all' />
      <link rel='stylesheet' id='theme-skin-responsive-style-css'  href='https://www.centenaryopticians.co.uk/wp-content/themes/optometry/skins/optometry/skin.responsive.css' type='text/css' media='all' />
      
      <style id='wpgdprc.css-inline-css' type='text/css'>
         div.wpgdprc .wpgdprc-switch .wpgdprc-switch-inner:before { content: 'Yes'; }
         div.wpgdprc .wpgdprc-switch .wpgdprc-switch-inner:after { content: 'No'; }
      </style>
      <!-- <script type='text/javascript' src='https://www.centenaryopticians.co.uk/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.3.2' id='jquery-migrate-js'></script> -->
      <meta name="generator" content="WordPress 5.7" />
      <meta name="generator" content="WooCommerce 4.9.2" />
      <link rel="canonical" href="https://www.centenaryopticians.co.uk/test/" />
      <link rel='shortlink' href='https://www.centenaryopticians.co.uk/?p=1836' />
      <link rel="alternate" type="application/json+oembed" href="https://www.centenaryopticians.co.uk/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fgkocean.com%2Fcentenary-opticians%2Ftest%2F" />
      <link rel="alternate" type="text/xml+oembed" href="https://www.centenaryopticians.co.uk/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fgkocean.com%2Fcentenary-opticians%2Ftest%2F&#038;format=xml" />
      <noscript>
         <style>.woocommerce-product-gallery{ opacity: 1 !important; }</style>
      </noscript>
      <meta name="generator" content="Powered by WPBakery Page Builder - drag and drop page builder for WordPress."/>
      <style type="text/css" media="print">#wpadminbar { display:none; }</style>
      <style type="text/css" media="screen">
         html { margin-top: 32px !important; }
         * html body { margin-top: 32px !important; }
         @media screen and ( max-width: 782px ) {
         html { margin-top: 46px !important; }
         * html body { margin-top: 46px !important; }
         }
      </style>
      <meta name="generator" content="Powered by Slider Revolution 6.2.23 - responsive, Mobile-Friendly Slider Plugin for WordPress with comfortable drag and drop interface." />
      <style type="text/css" id="wp-custom-css">
         .logo-full {
         display: none;
         }
         .top_panel_middle .logo {
         margin-top: 1.37em;
         margin-bottom: 0;
         }
         .top_panel_middle .menu_main_wrap {
         margin-top: 2.00em;
         margin-bottom: 1.3em;
         }
         .woocommerce ul.products li.product .post_content, .woocommerce-page ul.products li.product .post_content {
         margin-bottom: 1rem;
         }
         .post_item_product {
         padding-top: 50px;
         }
         .single-post .page_paddings_no {
         padding-top: 50px !important;
         }
         span.post_info_item.post_info_counters {
         display: none;
         }
         .align-justify p {
         text-align: justify;
         }
         .prm-brands-widget__item {
         display: block;
         padding: 5px 28px 5px 28px;
         text-align: left;
         width: 100%;
         list-style: disc;
         }
         .prm-brands-widget__title {
         margin-top: 0px;
         }
         .prm-brands-widget__title {
         padding: 4px;
         border-radius: 3px;
         border: 2px solid #ddd;
         }
         h4.widget_title {
         margin-bottom: 10px;
         margin-top: 10px;
         }
         span.posted_in {
         display: none !important;
         }
         .scheme_original .sc_services_style_services-1 .sc_icon {
         color: #12B48B;
         }
         .post_featured {
         overflow: hidden;
         margin-bottom: 0em;
         }
         .fsizes p {
         font-size: 18px;
         margin-bottom: 7px;
         }
         .fsizes h4 {
         font-weight: 500;
         margin-top:0px;
         margin-bottom: 5px;
         }
         .single-services .page_paddings_no {
         padding-top: 50px;
         }
         .fsizes {
         border: 1px solid #ddd;
         border-radius: 2px;
         box-shadow: 0 0 0.875rem 0 rgb(41 48 66 / 9%);
         background-color: #ffffff;
         padding: 10px;
         }
         .iconshad {
         border-radius: 8px !important;
         margin-bottom: 0 !important;
         }
         .icon-content h5 {
         margin: 0;
         font-size: 18px;
         }
         body table.booked-calendar td.today .date span {
         border: 2px solid #12B48B;
         }
         body table.booked-calendar td.today:hover .date span {
         background: #12B48B !important;
         }
         .sgpb-theme-1-overlay{
         background :none;
         }
         .m-auto{
         margin:auto;
         }
         .menu_main_nav > li > ul {
         top: 4.99em;
         }
         .menu_main_nav > li ul li a {
         padding: 0.45em 0.8em 0.45em;
         }
         .top_panel_top_contact_area:before {
         content: '\e8fa';
         font-family: "fontello";
         font-style: normal;
         font-weight: normal;
         speak: none;
         display: inline-block;
         text-decoration: inherit;
         width: 1em;
         margin-right: .2em;
         text-align: center;
         font-variant: normal;
         text-transform: none;
         line-height: 1em;
         margin-left: .2em;
         -webkit-font-smoothing: antialiased;
         }
         .mb-ptag p {
         margin-bottom: 0.5rem;
         }
         .top_panel_top_contact_area {
         margin-right: 1rem;
         }
         .top_panel_top_open_hours {
         margin-right: 1rem;
         }
         .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3 {
         color: #333;
         font-weight:600;
         }
         a.button.product_type_simple:hover {
         background-color: #525251 !important;
         color: #fff !important;
         }
         .woocommerce ul.products li.product .post_content, .woocommerce-page ul.products li.product .post_content {
         padding-bottom: 15px;
         }
         .product-type-simple .post_item_wrap {
         background: #fff;
         box-shadow: 0px 0px 20px 0px rgba(3,15,39,0.07) !important;
         text-align: center;
         } 
         input[type=text],input[type=date], select {
         width: 100%;
         padding: 0px 10px;
         margin: 0px 0;
         height: 35px;
         display: inline-block;
         border: 1px solid #ccc;
         border-radius: 4px;
         box-sizing: border-box;
         }
         input[type=email], select {
         width: 100%;
         padding: 0px 10px;
         margin: 0px 0;
         height: 35px;
         display: inline-block;
         border: 1px solid #ccc;
         border-radius: 4px;
         box-sizing: border-box;
         }
         input[type=submit] {
         margin: 8px 0;
         }
         textarea {
         width: 100%;
         padding: 12px 10px;
         box-sizing: border-box;
         border: 1px solid #ccc;
         border-radius: 4px;
         resize: none;
         }
         .appointinfo {
         padding: 20px;
         background: #fff;
         box-shadow: 0 0.46875rem 2.1875rem rgb(13 16 45 / 6%), 0 0.9375rem 1.40625rem rgb(13 16 45 / 6%), 0 0.25rem 0.53125rem rgb(13 16 45 / 13%), 0 0.125rem 0.1875rem rgb(13 16 45 / 8%);
         }
         .imglogo {
         background: #58595B;
         text-align: center;
         }
         .booking {
         padding: 10px 15px;
         background: #f2f2f2;
         }
         .booking h6 {
         margin-top: 0;
         }
         .bookdetail {
         padding: 0px 15px;
         }
         .confirms {
         background: #fff;
         box-shadow: 0 0.46875rem 2.1875rem rgb(13 16 45 / 6%), 0 0.9375rem 1.40625rem rgb(13 16 45 / 6%), 0 0.25rem 0.53125rem rgb(13 16 45 / 13%), 0 0.125rem 0.1875rem rgb(13 16 45 / 8%);
         padding-bottom: 15px;
         }
         .bookdetail h5 {
         margin: 5px 0;
         }
         .bookdetail p {
         margin: 0px 0;
         }
         ul.time_select li label {
             display: inline-block;
             -moz-transition: all 0.3s ease-in-out;
             -o-transition: all 0.3s ease-in-out;
             -webkit-transition: all 0.3s ease-in-out;
             -ms-transition: all 0.3s ease-in-out;
             transition: all 0.3s ease-in-out;
             background-color: #f8f8f8;
             -webkit-border-radius: 3px;
             -moz-border-radius: 3px;
             -ms-border-radius: 3px;
             border-radius: 3px;
             padding: 15px 10px 12px 10px;
             line-height: 1;
             min-width: 100px;
             margin: 0px;
             text-align: center;
             cursor: pointer;
         }
         ul.time_select li input[type="radio"] {
             display: none;
             cursor: pointer;
         }
         ul, ol {
             list-style: none;
             margin: 0 0 25px 0;
             padding: 0;
         }
         ul.time_select li input[type="radio"]:checked + label {
             background-color: #12b48b;
             color: #fff !important;
         }
         #calendar .datepicker.datepicker-inline, #calendar .datepicker.datepicker-inline table {
             width: 100%;
         }
         ul.legend li {
             display: inline-block;
             position: relative;
             margin-right: 15px;
             padding-left: 30px;
         }
         ul.legend{margin-top:15px;}
         ul.legend li strong {
             display: block;
             width: 20px;
             height: 20px;
             position: absolute;
             left: 0;
             top: -2px;
            border: 1px solid #ddd;
         }
         ul.legend li:first-child strong {
             background-color: #fff;
         }
         ul.legend li:last-child strong {
             background-color: #B0AFB1;
         }
         .datepicker .disabled.disabled-date.day, .datepicker .disabled.disabled-date.day:hover {
             background-color: #34bfd2 !important;
             color: #fff !important;
         }
         .datepicker table tr td.disabled, .datepicker table tr td.disabled:hover {
             background: #b0afb1 !important;
             color: #000 !important;
         }
         .datepicker table tr td.active, .datepicker table tr td.active:hover {
             background: #12b48b !important;
         }
         .datepicker table tr td, .datepicker table tr th {
            height: 65px !important;
         }
      </style>
      <style type="text/css" data-type="vc_shortcodes-custom-css">.vc_custom_1615448114233{padding-top: 30px !important;padding-bottom: 30px !important;}</style>
      <noscript>
         <style> .wpb_animate_when_almost_visible { opacity: 1; }</style>
      </noscript>
   </head>
   <body class="page-template-default page page-id-1836 logged-in admin-bar no-customize-support theme-optometry woocommerce-no-js optometry_body body_style_wide body_filled theme_skin_optometry article_style_stretch layout_single-standard template_single-standard scheme_original top_panel_show top_panel_above sidebar_hide sidebar_outer_hide preloader wpb-js-composer js-comp-ver-6.4.1 vc_responsive">
      
            <?php 
               // ini_set('display_errors', 1);
               // ini_set('display_startup_errors', 1);
               // error_reporting(E_ALL);
               require_once "app-function.php"; 
               $app_fun = new app_function();
            ?>
            <div class="page_content_wrap page_paddings_no">
               <div class="content_wrap">
                  <div class="content">
                     <article class="itemscope post_item post_item_single post_featured_default post_format_standard post-1836 page type-page status-publish hentry" itemscope itemtype="//schema.org/Article">
                        <section class="post_content" itemprop="articleBody">
                           <form action="book-appointment.php" id="addAppointmentFrom" method="post">
                              <div class="vc_row wpb_row vc_row-fluid vc_custom_1615448114233" id="step1">
                                 <?php if(isset($_GET['status']) && $_GET['status']=='success'){ ?>
                                    <div class="alert alert-success alert-dismissible fade in show" role="alert">
                                      Your appointment booking is complete.
                                      <!-- <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                      </button> -->
                                    </div>
                                 <?php } ?>
                                 <?php if(isset($_GET['status']) && $_GET['status']=='failed'){ ?>
                                    <div class="alert alert-danger alert-dismissible fade in show" role="alert">
                                      Something Went Wrong...
                                      <!-- <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                      </button> -->
                                    </div>
                                 <?php } ?>
                                 <div class="wpb_column vc_column_container vc_col-sm-12">
                                    <div class="vc_column-inner">
                                       <div class="wpb_wrapper">
                                          <div class="wpb_text_column wpb_content_element">
                                             <div class="wpb_wrapper">
                                                <div class="appointinfo">
                                                <div class="wpb_wrapper">
                                                <div class="confirms">
                                                   <div class="imglogo">
                                                      <img src=<?php echo $OpticianLogo ?> style="display:block;margin-left:auto;margin-right:auto;width:30%;">
                                                   </div>
                                                   <div class="booking">
                                                      <h6>Your Appointment</h6>
                                                   </div>
                                                   <div class="bookdetail">
                                                      <h4>Your Appointment Details</h4>
                                                      <p id="adate"><?php echo $_SESSION['appointment_date']; ?></p>
                                                      <p id="atime"></p>
                                                      <p>&nbsp;</p>
                                                      <h4><?php echo $OpticianName ?></h4>
                                                      <p><?php echo $OpticianAddress ?></p>
                                                      <p><?php echo $OpticianPhone ?></p>
                                                      <p>&nbsp;</p>
                                                   </div>
                                                </div>
                                             </div>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                              <div class="vc_row wpb_row vc_row-fluid vc_custom_1615448114233" id="step2" style="display:none;">
                                 <div class="wpb_column vc_column_container vc_col-sm-7 col-md-7">
                                    <div class="vc_column-inner">
                                       <div class="wpb_wrapper">
                                          <div class="wpb_text_column wpb_content_element">
                                             <div class="wpb_wrapper">
                                                <div class="appointinfo">
                                                   <div class="personal-info">
                                                      <h4 style="margin-top:0; margin-bottom: 8px;">Personal Information</h4>
                                                   </div>
                                                   <input type="hidden" id="appointment_date" name="appointment_date">
                                                   <div class="form-group">
                                                      <label for="fname">First Name*</label>
                                                      <input type="text" id="fname" name="firstname">
                                                   </div>
                                                   <div class="form-group">
                                                      <label for="lname">Last Name*</label>
                                                      <input type="text" id="lname" name="lastname">
                                                   </div>
                                                   <div class="form-group">
                                                      <label for="Email">Email Address*</label>
                                                      <input type="email" id="email" name="email">
                                                   </div>
                                                   <div class="form-group">
                                                      <label for="mobile">Mobile Number</label>
                                                      <input type="text" id="mobile" name="mobile">
                                                   </div>
                                                   <div class="form-group">
                                                      <label for="dob">Date Of Birth </label>
                                                      <input type="date" id="dob" name="dob" class="form-control">
                                                   </div>
                                                   <div class="form-group">
                                                      <label for="postcode">Post Code</label>
                                                      <input type="text" id="postcode" name="postcode">
                                                   </div>
                                                   <div class="form-group">
                                                      <label for="existing_patient">Existing Patient</label>
                                                      <input type="checkbox" name="existing_patient" value="1">
                                                   </div>
                                                   <div class="form-group">
                                                      <label for="comment">Comment</label>
                                                      <textarea id="comment" name="comment" rows="3" cols="3"></textarea>
                                                   </div>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="wpb_column vc_column_container vc_col-sm-5 col-md-5">
                                    <div class="vc_column-inner">
                                       <div class="wpb_wrapper">
                                          <div class="wpb_text_column wpb_content_element">
                                             <div class="wpb_wrapper">
                                                <div class="confirms">
                                                   <div class="imglogo">
                                                      <img src="https://www.centenaryopticians.co.uk/wp-content/uploads/2021/03/logoappointment.png">
                                                   </div>
                                                   <div class="booking">
                                                      <h6>Your Appointment</h6>
                                                   </div>
                                                   <div class="bookdetail">
                                                      <h4>Your Appointment Details</h4>
                                                      <p id="adate"></p>
                                                      <p id="atime"></p>
                                                      <p>&nbsp;</p>
                                                      <h4>Centenary Opticians</h4>
                                                      <p>3 Bowthrope Shopping Centre, Wendene, Norwich, NR5 9HA.</p>
                                                      <p>01603 362 447</p>
                                                      <p>&nbsp;</p>
                                                   </div>
                                                </div>
                                             </div>
                                          </div>

                                          <div class="row">
                                             <div class="col-md-12" style="margin-top:10px;">
                                                <input type="submit" value="Confirm Booking" name="confirm_booking" class="btn btn-block">
                                             </div>
                                          </div>
                                          
                                          <div class="row">
                                             <div class="col-md-12" style="margin-top:10px;">
                                                <a href="javascript:void(0);" class="btn btn-default nextAction pull-left"  data-step="2">Back</a>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </form>
                           <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
                           <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
                           <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
                           <script type="text/javascript" src="js/moment-with-locales.min.js"></script>
                           <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
                           <script src="js/bootstrap-datepicker.js"></script>
                           <link href="js/icon_fonts/css/all_icons_min.css" rel="stylesheet">
                           <link rel="stylesheet" type="text/css" href="js/date_picker.css">
                           <script>
                              var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
                              var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

                              var day_disabled = [];                              
                              var availableDates = ["<?php echo str_replace(',', '","',$available); ?>"];
                              
                              function available(date) {
                                 
                                 $mon = "0"+(date.getMonth()+1);
                                 
                                dmy = date.getDate() + "/" + ($mon).slice(-2) + "/" + date.getFullYear();

                                firstChar = dmy.split("/");
                                if(firstChar[0].length == 1){
                                    dmy = "0"+dmy;
                                }

                                if ($.inArray(dmy, availableDates) !== -1) {
                                    return true;
                                } else {
                                    return false;
                                }
                              }
                              
                              $('#calendar').datepicker({
                                 todayHighlight: true,
                                 daysOfWeekDisabled: day_disabled,
                                 //startDate: new Date(Date.parse("2021-03-17")),
                                 weekStart: 0,
                                 format: "yyyy-mm-dd",
                                 // datesDisabled: ["2019/07/20", "2017/11/21","2017/12/21", "2018/01/21","2018/02/21","2018/03/21"],
                                 beforeShowDay: available
                              }).on('changeDate', showTestDate);
                              var start_date = '<?php echo date('Y-m-d',strtotime($start_date)); ?>';
                              $('#calendar').datepicker('update', new Date(Date.parse(start_date)));

                              function showTestDate(){
                                 // Single line below changes if before date timeslots retrieved it displays old timeslots or none
                                 $('#timeslots').html("Loading...");

                                var dvalue = $('#calendar').datepicker('getFormattedDate');
                                var value = new Date($('#calendar').datepicker('getFormattedDate'));
                                var selectdate = days[value.getDay()]+" "+value.getDate()+" "+monthNames[value.getMonth()]+" "+value.getFullYear();
                                 $('#selectdate').html(selectdate);
                                // alert(selectdate);
                                 // var w = myDate(value);
                                 $.ajax({
                                     url: "https://localhost/appointments/appointment/available-slot.php",
                                     type: "POST",
                                     data: "date="+dvalue,
                                     success: function(result){
                                         if(result)
                                         {
                                             $('#timeslots').html(result);
                                             // console.log("Times updated")
                                         }else {
                                            console.log("Error updating timeslots");
                                         }
                                     }
                                 });
                              }

                              
                              function formatAMPM(date) {
                                var str = date.split(':');
                                var hours = str[0];
                                var minutes = str[1];
                                var ampm = hours >= 12 ? 'pm' : 'am';
                                hours = hours % 12;
                                hours = hours ? hours : 12; // the hour '0' should be '12'
                                minutes = minutes < 10 ? '0'+minutes : minutes;
                                var strTime = hours + ':' + minutes + ' ' + ampm;
                                return strTime;
                              }

                              $('.nextAction').on('click', function () {
                                 var date = new Date($('#calendar').datepicker('getFormattedDate'));
                                 var adate = days[date.getDay()]+" "+date.getDate()+" "+monthNames[date.getMonth()]+" "+date.getFullYear();
                                 // alert(adate);
                                 $radiotime = $("input[type='radio'][name='appointment_time']:checked").val();
                                 var atime = formatAMPM($radiotime);
                                 //formatted = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
                                 // alert(formatted);
                                 var appointment_date = date.getDate()+"/"+(date.getMonth() + 1)+"/"+date.getFullYear();
                                 $('#adate').html(adate);
                                 $('#atime').html(atime);
                                 $('#appointment_date').val(appointment_date);
                                 var step = $(this).attr('data-step');
                                 if(step==1){
                                    $('#step1').css('display','none');
                                    $('#step2').css('display','block');
                                 }else{
                                    $('#step2').css('display','none');
                                    $('#step1').css('display','block');
                                 }
                              });
                           </script>
                           <script src="formvalidation/js/formValidation.min.js"></script>
                           <script src="formvalidation/js/framework/bootstrap.min.js"></script>
                           <script>
                              $('#addAppointmentFrom').formValidation({
                                   framework: 'bootstrap',
                                   icon: {
                                       valid: 'glyphicon glyphicon-ok',
                                       invalid: 'glyphicon glyphicon-remove',
                                       validating: 'glyphicon glyphicon-refresh'
                                   },
                                   fields: {
                                       firstname: {
                                           validators: {
                                               notEmpty: {
                                                   message: 'First Name is required'
                                               },
                                               // regexp: {
                                               //     regexp: /^[^*|\":<>[\]{}`\\()';@&$]+$/,
                                               //     message: 'The First Name can only consist of alphabetical charecters'
                                               // },
                                           }
                                       },
                                       lastname: {
                                           validators: {
                                               notEmpty: {
                                                   message: 'Last Name is required'
                                               },
                                               // regexp: {
                                               //     regexp: /^[^*|\":<>[\]{}`\\()';@&$]+$/,
                                               //     message: 'The Last Name can only consist of alphabetical charecters'
                                               // },
                                           }
                                       },
                                       comment: {
                                           validators: {
                                               // notEmpty: {
                                               //     message: 'Comment is required'
                                               // },
                                               regexp: {
                                                   regexp: /^[^*|\":<>[\]{}`\\()';@&$,]+$/,
                                                   message: 'Comment can only consist of alphabetical charecters'
                                               },
                                           }
                                       },
                                       email: {
                                           validators: {
                                               notEmpty: {
                                                   message: 'Email is required'
                                               },
                                           }
                                       },
                                       mobile: {
                                           validators: {
                                               notEmpty: {
                                                   message: 'Mobile No. is required'
                                               },
                                               numeric: {
                                                   message: 'Mobile No. is a Number'
                                               },
                                               stringLength: {
                                                   min: 11,
                                                   max: 11,
                                                   message: 'The Mobile number length should 11 characters'
                                               }
                                           }
                                       },
                                       dob: {
                                           validators: {
                                               notEmpty: {
                                                   message: 'dob is required'
                                               }
                                           }
                                       },
                                       postcode: {
                                           validators: {
                                               notEmpty: {
                                                   message: 'Post Code is required'
                                               }
                                           }
                                       },
                                   }
                               });
                           </script>
                        </section>
                        <!-- </section> class="post_content" itemprop="articleBody"> -->
                     </article>
                     <!-- </article> class="itemscope post_item post_item_single post_featured_default post_format_standard post-1836 page type-page status-publish hentry" itemscope itemtype="//schema.org/Article"> -->  
                     <section class="related_wrap related_wrap_empty"></section>
                  </div>
                  <!-- </div> class="content"> -->
               </div>
               <!-- </div> class="content_wrap"> -->      
            </div>
            <!-- </.page_content_wrap> -->
   </body>
</html>