<div class="cb-form-wrapper pfxcbcontent">
    <link href="<?= module_dir_url('appointly', 'assets/css/callbacks_external_form.css'); ?>" rel="stylesheet" type="text/css">
    <?php echo form_open('appointly/appointments_public/request_callback_external', ['id' => 'perfex-callbacks-form']); ?>

    <div class="vertical bar-deactive cb-form-color" data-toggle="tooltip" data-title="<?= _l('callbacks_request_a_callback'); ?>" data-placement="left">
        <!-- <span>Request a Callback</span> -->
        <span class="callback-icon"><img src="data:image/png;base64, "></span>
        </span>
    </div>
    <?php $clientUserData = $this->session->userdata(); ?>
    <div class="text-center">
        <?php hooks()->do_action('callbacks_form_header'); ?>
        <h4 class="text-dark" id="request_callback_label"><?= _l('callbacks_request_a_callback'); ?></h4>
    </div>
    <div class="col-6 message_wrapper">
        <div class="form-group">
            <label for="client_firstname"><?= _l('callbacks_form_firstname'); ?></label>
            <input type="text" class="form-control" value="<?= (isset($clientUserData['client_logged_in'])) ? get_contact_detail($clientUserData['contact_user_id'], 'firstname') : ''; ?>" name="client_firstname" id="client_firstname">
        </div>
        <div class="form-group">
            <label for="client_lastname"><?= _l('callbacks_form_lastname'); ?></label>
            <input type="text" class="form-control" value="<?= (isset($clientUserData['client_logged_in'])) ? get_contact_detail($clientUserData['contact_user_id'], 'lastname') : ''; ?>" name="client_lastname" id="client_lastname">
        </div>

        <div class="form-group">
            <label for="client_email"><?= _l('callbacks_form_your_email'); ?></label>
            <input type="email" class="form-control" value="<?= (isset($clientUserData['client_logged_in'])) ? get_contact_detail($clientUserData['contact_user_id'], 'email') : ''; ?>" name="client_email" id="client_email">
        </div>

        <div class="form-group">
            <label for="client_message"><?= _l('callbacks_form_your_message'); ?></label>
            <textarea type="textarea" class="form-control" rows="5" name="client_message" id="client_message"></textarea>
        </div>

        <div class="form-group">
            <label for="client_phone"><?= _l('callbacks_form_your_phone'); ?></label>
            <input type="tel" class="form-control" value="<?= (isset($clientUserData['client_logged_in'])) ? get_contact_detail($clientUserData['contact_user_id'], 'phonenumber') : ''; ?>" name="client_phone" id="client_phone">
        </div>

        <label for="client_phone"><?= _l('callbacks_form_available_from_to'); ?></label>

        <div class="form-group">
            <div class="col-3 callback_date_from">
                <input type="text" class="form-control dates" value="" name="date_from" id="date_from">
            </div>
            <span class="text-center" style="padding-left:14px">--></span>
            <div class="col-3 callback_date_to">
                <input type="text" class="form-control dates" value="" name="date_to" id="date_to">
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="form-group">
            <label for="timezones" class="control-label"><?php echo _l('settings_localization_default_timezone'); ?></label>
            <select name="timezone" id="timezones" class="form-control selectpicker" data-none-selected-text="<?php echo _l('dropdown_non_selected_tex'); ?>" data-live-search="true">
                <?php foreach (get_timezones_list() as $key => $timezones) { ?>
                    <optgroup label="<?php echo $key; ?>">
                        <?php foreach ($timezones as $timezone) { ?>
                            <option value="<?php echo $timezone; ?>" <?php if (get_option('default_timezone') == $timezone) {
                                echo 'selected';
                            } ?>><?php echo $timezone; ?></option>
                        <?php } ?>
                    </optgroup>
                <?php } ?>
            </select>
        </div>

        <label for="types"><?= _l('callbacks_prefer_to_be_contacted_via'); ?></label>
        <div class="form-group">
            <?php echo render_callbacks_handle_call_type(); ?>
        </div>
        <div class="submit">
            <button type="submit" value="submit" class="btn btn-info pfxcbsubmit" id="pfxcbsubmit"><?= _l('callbacks_request_btn_label'); ?></button>
        </div>
    </div>
    <?= form_close(); ?>
</div>
<script>
    app.locale = "<?= get_locale_key($form->language); ?>";
</script>
<?php require('modules/appointly/assets/js/callbacks_external_form_js.php'); ?>