<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#35A768">

    <title><?= lang('page_title') . ' ' .  $company_name ?></title>

    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/ext/bootstrap/css/bootstrap.min.css') ?>">
    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/ext/jquery-ui/jquery-ui.min.css') ?>">
    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/ext/jquery-qtip/jquery.qtip.min.css') ?>">
    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/ext/cookieconsent/cookieconsent.min.css') ?>">
    <!--<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/frontend.css') ?>">-->
    <link rel='stylesheet' type='text/css' href="<?= asset_url('assets/css/frontend.php') ?>">
    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/general.css') ?>">

    <link rel="icon" type="image/x-icon" href="<?= asset_url('assets/img/favicon.ico') ?>">
    <link rel="icon" sizes="192x192" href="<?= asset_url('assets/img/logo.png') ?>">
    <style>

        #captchamillieerror{
            display: none;
        }


    </style>
</head>

<body>


<div id="main" class="container">
    <div class="wrapper row">
        <div id="book-appointment-wizard" class="col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">

            <!-- FRAME TOP BAR -->

            <div id="header">
                <span id="company-name"><br><img id="logobro" class="default_logo" src=""> </span>

                <div id="steps">
                    <div id="step-1" class="book-step active-step" title="<?= lang('step_one_title') ?>">
                        <strong>1</strong>
                    </div>

                    <div id="step-2" class="book-step" title="<?= lang('step_two_title') ?>">
                        <strong>2</strong>
                    </div>
                    <div id="step-3" class="book-step" title="<?= lang('step_three_title') ?>">
                        <strong>3</strong>
                    </div>
                    <div id="step-4" class="book-step" title="<?= lang('step_four_title') ?>">
                        <strong>4</strong>
                    </div><br><br><br>


                </div>

                <!-- <div class="company-name"><div class="company-name"><iframe width="250" height="150" id="gmap_canvas" src="https://maps.google.com/maps?q=Vaxpro%20LLC%2010144%20N%20Port%20Washington%20Rd%20Suite%20LL-E,%20Mequon,%20WI%2053092,%20United%20States&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="margin-left: 50px;
 margin-top: 10px;
 border-radius: 20px;"></iframe><a href="https://www.embedgooglemap.net"></a></div><style>.mapouter{position:relative;text-align:right;height:150px;width:250px;margin-left: 50px;
 margin-top: 10px;
 border-radius: 20px;}.gmap_canvas {overflow:hidden;background:none!important;height:150px;width:250px;

}</style></div>-->
            </div>

            <?php if ($manage_mode): ?>
                <div id="cancel-appointment-frame" class="booking-header-bar row">
                    <div class="col-xs-12 col-sm-10">
                        <p><?= lang('cancel_appointment_hint') ?></p>
                    </div>
                    <div class="col-xs-12 col-sm-2">
                        <form id="cancel-appointment-form" method="post"
                              action="<?= site_url('appointments/cancel/' . $appointment_data['hash']) ?>">
                            <input type="hidden" name="csrfToken" value="<?= $this->security->get_csrf_hash() ?>" />
                            <textarea name="cancel_reason" style="display:none"></textarea>
                            <input type="text" name="cancel_firstname" id="cancel_firstname" style="display:none">
                            <input type="text" name="cancel_lastname" id="cancel_lastname" style="display:none">
                            <button id="cancel-appointment" class="btn btn-default btn-sm"><?= lang('cancel') ?></button>
                        </form>
                    </div>
                </div>
                <div class="booking-header-bar row">
                    <div class="col-xs-12 col-sm-10">
                        <p><?= lang('delete_personal_information_hint') ?></p>
                    </div>
                    <div class="col-xs-12 col-sm-2">
                        <button id="delete-personal-information" class="btn btn-danger btn-sm"><?= lang('delete') ?></button>
                    </div>
                </div>
            <?php endif; ?>

            <?php
            if (isset($exceptions)) {
                echo '<div style="margin: 10px">';
                echo '<h4>' . lang('unexpected_issues') . '</h4>';
                foreach($exceptions as $exception) {
                    echo exceptionToHtml($exception);
                }
                echo '</div>';
            }
            ?>

            <!-- SELECT SERVICE AND PROVIDER -->

            <div id="wizard-frame-1" class="wizard-frame">
                <div class="frame-container">
                    <h3 class="frame-title"></h3>

                    <div class="frame-content">
                        <div class="form-group" style="display:none">
                           <!-- <label for="select-company" >
                                <strong>Select Company</strong>
                            </label>-->

                            <select id="select-company" class="col-xs-12 col-sm-4 form-control" style="display:none">
                                <option value="" name="">USE DROP DOWN TO SELECT COMPANY</option>

                                <?php
                                //print_r($available_providers);
                                foreach($companies as $provider) {
                                    echo '<option value="' . $provider['id']. '" name="' . $provider['id'] . '">' . $provider['name'] . '</option>';
                                }

                                ?>
                            </select>
                        </div>

                        <div class="form-group"  >
                            <label for="select-provider">
                                <strong>Select Location</strong>
                            </label>


                            <select id="select-provider" class="col-xs-12 col-sm-4 form-control required" style="border: 2px solid black;"></select>

                        </div>

                        <div class="form-group"  >
                            <label for="select-service">
                                <strong>Select Service</strong>
                            </label>

                            <select id="select-service" class="col-xs-12 col-sm-4 form-control required" style="border: 2px solid black;"></select>

                        </div>



                        <div id="service-description" style="display:none; font-size:14px"></div><br>
                        <div id="errorforlinkvar"></div>
                        <div id="linkeprov" style="font-size:14px">
                            <p id="linkprovmillie" ></p><strong><a id="linktoformprov" href="" target="_blank"></a></strong></p>
                        </div><br>

                        <div id="linke2prov" style="font-size:14px" >
                            <p id="linkprovmillie2"></p></p> <strong><a id="linktoform2prov" href="" target="_blank"></a></strong>
                        </div><br>

                        <div id="linke3prov" style="font-size:14px" >
                            <p id="linkprovmillie3" ></p> <strong><a id="linktoform3prov" href="" target="_blank"></a></strong>
                        </div>

                        <div id="linke" style="font-size:14px">
                            <p id="linkmillie" ></p><strong><a id="linktoform" href="" target="_blank"></a></strong></p>
                        </div><br>

                        <div id="linke2" style="font-size:14px" >
                            <p id="linkmillie2"></p></p> <strong><a id="linktoform2" href="" target="_blank"></a></strong>
                        </div><br>

                        <div id="linke3" style="font-size:14px" >
                            <p id="linkmillie3" ></p> <strong><a id="linktoform3" href="" target="_blank"></a></strong>
                        </div>
                        <p id="waitlist" name="waitlist" style="color:red;"></p><a id="hrefwaitlist" name="hrefwaitlist" href=""></a>




                    </div>
                </div>

                <div class="command-buttons" style="padding-top:100px">
                    <button type="button" id="button-next-1" class="btn button-next btn-primary"
                            data-step_index="1">
                        <?= lang('next') ?>
                        <span class="glyphicon glyphicon-forward"></span>
                    </button>
                </div>
            </div>

            <!-- SELECT APPOINTMENT DATE -->

            <div id="wizard-frame-2" class="wizard-frame" style="display:none;">
                <div class="frame-container">

                    <h3 class="frame-title"><?= lang('step_two_title') ?></h3>

                    <div class="frame-content row">
                        <div class="col-xs-12 col-sm-6">
                            <div id="select-date"></div>
                        </div>

                        <div class="col-xs-12 col-sm-6">
                            <div id="available-hours"></div>
                        </div>
                    </div>
                </div>

            <!--<strong><p style="color:red">Use arrows to go to other months to see available dates</p></strong>-->
                <div class="command-buttons">
                    <button type="button" id="button-back-2" class="btn button-back btn-default"
                            data-step_index="2">
                        <span class="glyphicon glyphicon-backward"></span>
                        <?= lang('back') ?>
                    </button>
                    <button type="button" id="button-next-2" class="btn button-next btn-primary"
                            data-step_index="2">
                        <?= lang('next') ?>
                        <span class="glyphicon glyphicon-forward"></span>
                    </button>
                </div>
            </div>

            <!-- ENTER CUSTOMER DATA -->

            <div id="wizard-frame-3" class="wizard-frame" style="display:none;">
                <div class="frame-container">

                    <h3 class="frame-title"><?= lang('step_three_title') ?></h3>

                    <div class="frame-content row">
                        <div class="col-xs-12 col-sm-6">
                            <?php
                            if(lang('first_name_onoff') == 'on'){
                                ?>
                                <div class="form-group">
                                    <label for="first-name" class="control-label"><?= FRONTENDFIELDS::FIRST_NAME_LABEL ?> </label>
                                    <input type="text" id="first-name" class="<?= lang('first_name_required') ?>" maxlength="100" />
                                </div>

                                <?php
                            }
                            ?>

                            <?php
                            if(lang('last_name_onoff') == 'on'){
                                ?>
                                <div class="form-group">
                                    <label for="last-name" class="control-label"><?= FRONTENDFIELDS::LAST_NAME_LABEL ?> </label>
                                    <input type="text" id="last-name" class="<?= lang('last_name_required') ?>" maxlength="120" />
                                </div>

                                <?php
                            }
                            ?>

                            <?php
                            if(lang('birth_date_onoff') == 'on'){
                                ?>
                                <div class="form-group">
                                    <label for="birth-date"  id="birthdatelabel" name="birthdatelabel" class="control-label"><?= FRONTENDFIELDS::BIRTH_DATE_LABEL ?></label>
                                    <input type="date" id="birth-date" class="<?= lang('birth_date_required') ?>">
                                </div>
                                <h6><a style="color:red" href="bdayissues.pdf" target="_blank">Birthdate Issues?</a></h6>
                                <?php
                            }
                            ?>

                            <?php
                            if(lang('email_onoff') == 'on'){
                                ?>
                                <div class="form-group">
                                    <label for="email" class="control-label"><?= FRONTENDFIELDS::EMAIL_LABEL ?></label>
                                    <input type="text" id="email" class="<?= lang('email_required') ?>" maxlength="120" />
                                </div>

                                <?php
                            }
                            ?>

                            <?php
                            if(lang('phone_number_onoff') == 'on'){
                                ?>
                                <div class="form-group">
                                    <label for="phone-number" class="control-label"><?= FRONTENDFIELDS::PHONE_LABEL ?> </label>
                                    <input type="text" id="phone-number" class="<?= lang('phone_number_required') ?>" maxlength="10" />
                                </div>

                                <?php
                            }
                            ?>


                            <?php
                            if(lang('address_onoff') == 'on'){
                                ?>
                                <div class="form-group">
                                    <label for="address" class="control-label"><?= FRONTENDFIELDS::ADDRESS_LABEL ?></label>
                                    <input type="text" id="address" class="<?= lang('address_required') ?>" maxlength="120" />
                                </div>

                                <?php
                            }
                            ?>
                            <?php
                            if(lang('city_onoff') == 'on'){
                                ?>
                                <div class="form-group">
                                    <label for="city" class="control-label"><?= FRONTENDFIELDS::CITY_LABEL ?></label>
                                    <input type="text" id="city" class="<?= lang('city_required') ?>" maxlength="120" />
                                </div>

                                <?php
                            }
                            ?>

                            <div class="form-group">
                                <label for="state" class="control-label">State*</label>
                                <input type="text" id="state" class="required form-control" maxlength="2" />
                            </div>

                            <?php
                            if(lang('zip_code_onoff') == 'on'){
                                ?>
                                <div class="form-group">
                                    <label for="zip-code" class="control-label"><?= FRONTENDFIELDS::POSTAL_CODE_LABEL ?></label>
                                    <input type="text" id="zip-code" class="<?= lang('zip_code_required') ?>" maxlength="5" />
                                </div>

                                <?php
                            }
                            ?>
                            <?php
                            if(lang('notes_onoff') == 'on'){
                                ?>
                                <div class="form-group">
                                    <label for="notes" class="control-label"><?= FRONTENDFIELDS::NOTES_LABEL ?></label>
                                    <textarea id="notes" maxlength="500" class="<?= lang('notes_required') ?>" rows="3"></textarea>
                                </div>
                                <?php
                            }
                            ?>
                        </div>

                        <div class="col-xs-12 col-sm-6">
                            <div id="form_questions" name="form_questions">

                            </div>


                            <?php if ($manage_mode == false){ ?>

                                <div id="checkboxterms" name="checkboxterms">
                                </div>
                            <style>
                                .m-signature-pad--body canvas {
                                    position: relative;
                                    left: 0;
                                    top: 0;
                                    width: 100%;
                                    height: 250px;
                                    border: 1px solid #CCCCCC;


                                }


                            </style>
                            <script src="https://myappts.ca/signature_pad.js"></script>
                            <button  class="btn btn-primary" id="canvasload" name="canvasload" onclick="document.getElementById('signature-pad').style.display = 'block'; $(window).resize(); "
                            >
                                Sign Form
                            </button>

                            <div id="signature-pad" name="signature-pad" class="m-signature-pad" style="display:none">
                                <div class="m-signature-pad--body">
                                    <canvas></canvas>
                                    <input type="hidden" name="signature" id="signature" value="">
                                </div>
                            </div>


                            <button type="button" class="btn btn-primary" id="clearsig" name="clearsig">Clear Signature</button>
                            <?php }?>

                        </div>






                        <?php if ($display_terms_and_conditions): ?>
                            <label>
                                <input type="checkbox" class="required" id="accept-to-terms-and-conditions">
                                <?= strtr(lang('read_and_agree_to_terms_and_conditions'),
                                    [
                                        '{$link}' => '<a href="#" data-toggle="modal" data-target="#terms-and-conditions-modal">',
                                        '{/$link}' => '</a>'
                                    ])
                                ?>
                            </label>
                            <br>
                        <?php endif ?>



                        <?php if ($display_privacy_policy): ?>
                            <label>
                                <input type="checkbox" class="required" id="accept-to-privacy-policy">
                                <?= strtr(lang('read_and_agree_to_privacy_policy'),
                                    [
                                        '{$link}' => '<a href="#" data-toggle="modal" data-target="#privacy-policy-modal">',
                                        '{/$link}' => '</a>'
                                    ])
                                ?>
                            </label>
                            <br>
                        <?php endif ?>

                        <span id="form-message" class="text-danger"><?= lang('fields_are_required') ?></span>

                    </div>

                    <div class="form-group">
                        <!-- <p><strong>The information you provide will be used by the pharmacy to contact you regarding your appointment.</strong></p>-->
                    </div>

                </div>

                <div class="command-buttons">
                    <button type="button" id="button-back-3" class="btn button-back btn-default"
                            data-step_index="3"><span class="glyphicon glyphicon-backward"></span>
                        <?= lang('back') ?>
                    </button>
                    <button type="button" id="button-next-3" class="btn button-next btn-primary"
                            data-step_index="3">
                        <?= lang('next') ?>
                        <span class="glyphicon glyphicon-forward"></span>
                    </button>
                </div>
            </div>

            <!-- APPOINTMENT DATA CONFIRMATION -->

            <div id="wizard-frame-4" class="wizard-frame" style="display:none;">
                <div class="frame-container">
                    <h3 class="frame-title"><?= lang('step_four_title') ?></h3>
                    <span style="color:red">Your appointment is not booked until you click the Confirm button below.</span>
                    <div class="frame-content row">
                        <div id="appointment-details" class="col-xs-12 col-sm-6"></div>
                        <div id="customer-details" class="col-xs-12 col-sm-6"></div>
                    </div>
                    <?php if ($this->settings_model->get_setting('require_captcha') === '0'): ?>
                        <input type="hidden" id="captchayesorno" value="NO">

                    <?php endif; ?>


                    <?php if ($this->settings_model->get_setting('require_captcha') === '1'): ?>
                        <div class="frame-content row">
                            <div class="col-xs-12 col-sm-6">
                                <h4 class="captcha-title">
                                    CAPTCHA
                                    <small class="glyphicon glyphicon-refresh"></small>
                                </h4>
                                <div class="g-recaptcha" data-sitekey="6Ldx-gIbAAAAAOO84cjC_g1ptFWYJ9Y1RJ1rYa8M"></div>
                                <span id="captcha_error" class="text-danger"></span>
                            </div>
                            <div id="captchamillieerror">
                                <p id="millieerror">Captcha Requires Verification</p>
                            </div>
                            <input type="hidden" id="captchayesorno" value="YES">
                        </div>
                    <?php endif; ?>
                </div><br><br>

                <div class="command-buttons">
                    <button type="button" id="button-back-4" class="btn button-back btn-default"
                            data-step_index="4">
                        <span class="glyphicon glyphicon-backward"></span>
                        <?= lang('back') ?>
                    </button>
                    <form id="book-appointment-form" style="display:inline-block" method="post">
                        <button id="book-appointment-submit" type="button" class="btn btn-success">
                            <span class="glyphicon glyphicon-ok"></span>
                            <?= !$manage_mode ? lang('confirm') : lang('update') ?>
                        </button><br>

                        <input type="hidden" name="csrfToken" />
                        <input type="hidden" name="post_data" />
                    </form>
                </div>
            </div>


            <!-- FRAME FOOTER

            <div id="frame-footer">
                Powered By
                <a href="http://amjaysoftware.com" target="_blank">AmjaySoftware</a>
                |

                |
                <a href="<?= site_url('backend'); ?>">
                    <?= $this->session->user_id ? lang('backend_section') : lang('login') ?>
                </a>

                <a href="https://myappts.ca/termsandconditions/privacypolicy.html">| Terms and conditions</a>
            </div>-->
        </div>
    </div>
</div>

<?php if ($display_cookie_notice === '1'): ?>
    <?php require 'cookie_notice_modal.php' ?>
<?php endif ?>

<?php if ($display_terms_and_conditions === '1'): ?>
    <?php require 'terms_and_conditions_modal.php' ?>
<?php endif ?>

<?php if ($display_privacy_policy === '1'): ?>
    <?php require 'privacy_policy_modal.php' ?>
<?php endif ?>

<script>
    var GlobalVariables = {
        availableServices   : <?= json_encode($available_services) ?>,
        availableProviders  : <?= json_encode($available_providers) ?>,
        linkvar  : <?= json_encode($linkvar) ?>,
        baseUrl             : <?= json_encode(config('base_url')) ?>,
        manageMode          : <?= $manage_mode ? 'true' : 'false' ?>,
        customerToken       : <?= json_encode($customer_token) ?>,
        dateFormat          : <?= json_encode($date_format) ?>,
        timeFormat          : <?= json_encode($time_format) ?>,
        displayCookieNotice : <?= json_encode($display_cookie_notice === '1') ?>,
        appointmentData     : <?= json_encode($appointment_data) ?>,
        providerData        : <?= json_encode($provider_data) ?>,
        customerData        : <?= json_encode($customer_data) ?>,
        csrfToken           : <?= json_encode($this->security->get_csrf_hash()) ?>,
        companies:  <?= json_encode($companies) ?>,
        forms:  <?= json_encode($forms) ?>,
    };

    var EALang = <?= json_encode($this->lang->language) ?>;
    var availableLanguages = <?= json_encode($this->config->item('available_languages')) ?>;
</script>

<script src="<?= asset_url('assets/js/general_functions.js') ?>"></script>
<script src="<?= asset_url('assets/ext/jquery/jquery.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/jquery-ui/jquery-ui.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/jquery-qtip/jquery.qtip.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/cookieconsent/cookieconsent.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/bootstrap/js/bootstrap.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/datejs/date.js') ?>"></script>
<script src="https://www.google.com/recaptcha/api.js" async></script>

<script src="<?= asset_url('assets/js/frontend_book_api.js') ?>"></script>
<script src="<?= asset_url('assets/js/frontend_book.js') ?>"></script>


<script>
    $(document).ready(function() {
        FrontendBook.initialize(true, GlobalVariables.manageMode);
        GeneralFunctions.enableLanguageSelection($('#select-language'));
    });
</script>

<?php google_analytics_script(); ?>
</body>
</html>