<?php
$service->add_my_setting();
?>

<div class="wrap rentsyst-page-wrapper base-sub-page">
    <h1 class="wp-heading-inline"><?php esc_html_e('Connect Account', 'rentsyst'); ?></h1>
    <div class="connect-status" data-info="<?= json_encode(get_option('rentsyst_access_token')); ?>">
        <hr>
        <p <?= $authInfo ? 'style="display: none"' : ''; ?> id="status-no-connect"><?php esc_html_e('For connect account click next button', 'rentsyst'); ?>
            <input type="submit" data-url="<?= $connectorUrl ?>" id="connect-rentsyst" class="button action"
                   value="<?php esc_attr_e('Connect', 'rentsyst'); ?>"></p>
        <div id="status-connect" <?= ! $authInfo ? 'style="display: none"' : ''; ?>>
        <p><?php esc_html_e('You already connected', 'rentsyst'); ?>
            <input type="submit" data-url="<?= $disconnectorUrl ?>" id="disconnect-rentsyst" class="button action"
                   value="<?php esc_attr_e('Disconnect', 'rentsyst'); ?>">
        </p>
        <hr>
        <p>
            <?php esc_html_e('Last settings synchronize:', 'rentsyst'); ?> <span class="ab-icon setting-sync-time"><?= $lastTimeSyncSettings; ?></span> <input type="submit" data-url="<?= $synchronizeSettingsUrl ?>" id="synchronize-settings-rentsyst" class="button action" value="<?php esc_attr_e('Synchronize settings', 'rentsyst'); ?>">
        </p>
        </div>
        <hr>
		<?php if ( $vehicleCatalogEnable ) { ?>
            <p id="status-upload-vehicles" style="display: <?= $authInfo ? 'display-block' : 'none' ?>;">
                <?php esc_html_e('Last vehicle synchronize:', 'rentsyst'); ?> <span class="ab-icon vehicle-sync-time"><?= $lastTimeSync; ?></span>
                <input type="submit" data-auto-sync="<?= ( ! $lastTimeSync && $authInfo ) ? 1 : '' ?>" data-url="<?= $syncVehicleUrl; ?>" id="upload-vehicle" class="button action"
                       value="<?php esc_attr_e('Synchronize Fleet', 'rentsyst'); ?>">
            </p>
            <hr>
		<?php } ?>
        <p class="static-button-for-booking">
        <div class="ibox-content" style="display: <?= $authInfo ? 'inherit' : 'none' ?>;">
            <form class="form form-horizontal" id="booking_form">
	            <?= wp_nonce_field('rentsyst_ajax_nonce', 'security'); ?>
                <fieldset>
                    <input type="hidden" value="rentsyst" name="page">
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><?php esc_html_e('Enable the catalog of vehicles', 'rentsyst'); ?></label>
                        <div class="col-sm-10">
                            <div class="checkbox">
                                <label>

                                    <input type="checkbox"
                                           name="add_catalog_vehicles"
                                           value="1" <?= $settings['add_catalog_vehicles'] ? 'checked' : '' ?>>
                                    <?php esc_html_e('Add catalog vehicles', 'rentsyst'); ?>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><?php esc_html_e('Individual page', 'rentsyst'); ?></label>
                        <div class="col-sm-10">
                            <div class="checkbox">
                                <label>

                                    <input data-show-subsettings="add-booking-in-menu-wraper" type="checkbox"
                                           name="enable_booking_page"
                                           value="1" <?= $settings['enable_booking_page'] ? 'checked' : '' ?>>
                                    <?php esc_html_e('Add individual page for booking', 'rentsyst'); ?>
                                </label>
                            </div>
                            <div id="add-booking-in-menu-wraper"
                                 style="color: gray; margin-left: 20px;"
                                 class="checkbox subsetting-wraper <?= $settings['enable_booking_page'] ? 'open' : 'close'; ?>">

                            </div>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><?php esc_html_e('Privacy policy page', 'rentsyst'); ?></label>
                        <div class="col-sm-10">
                            <?php
                            wp_dropdown_pages(['name' => 'privacy_policy_page_id', 'selected' => esc_attr($settings['privacy_policy_page_id']), 'show_option_none' => __('no selected', 'rentsyst')]);
                            ?>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><?php esc_html_e('Confirmation page', 'rentsyst'); ?></label>
                        <div class="col-sm-10">
                            <?php
                            wp_dropdown_pages(['name' => 'confirmation_page_id', 'selected' => esc_attr($settings['confirmation_page_id'])]);
                            ?>
                            <input type="button" id="recreate-confirmation-page" class="button action" value="<?php esc_attr_e('Recreate page', 'rentsyst'); ?>" style="margin-left: 10px;">
                            <span id="recreate-confirmation-status" style="margin-left: 10px; display: none;"></span>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><?php esc_html_e('Buttons for booking', 'rentsyst'); ?></label>
                        <div class="col-sm-10">
                            <div class="checkbox">
                                <label>
                                    <input data-show-subsettings="booking-button-settings" type="checkbox"
                                           name="enable_booking_button"
                                           value="1" <?= $settings['enable_booking_button'] ? 'checked' : ''; ?>>
                                    <?php esc_html_e('Create a button on the pages', 'rentsyst'); ?>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div id="booking-button-settings"
                         class="subsetting-wraper <?= $settings['enable_booking_button'] ? 'open' : 'close'; ?>">
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><?php esc_html_e('Button Text', 'rentsyst'); ?></label>
                            <div class="col-sm-10">
                                <input type="text" name="button_text" class="form-control"
                                       value="<?= esc_attr($settings['button_text']); ?>">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><?php esc_html_e('Location of the button', 'rentsyst'); ?></label>
                            <div class="col-sm-10">
                                <select class="form-control" name="button_position">
                                    <option <?= $settings['button_position'] === 'bottom right' ? 'selected' : ''; ?>
                                            value="bottom right">
                                        <?php esc_html_e('Lower right corner', 'rentsyst'); ?>
                                    </option>
                                    <option <?= $settings['button_position'] === 'top right' ? 'selected' : ''; ?>
                                            value="top right">
                                        <?php esc_html_e('Upper right corner', 'rentsyst'); ?>
                                    </option>
                                    <option <?= $settings['button_position'] === 'bottom left' ? 'selected' : ''; ?>
                                            value="bottom left">
                                        <?php esc_html_e('Lower left corner', 'rentsyst'); ?>
                                    </option>
                                    <option <?= $settings['button_position'] === 'top left' ? 'selected' : ''; ?>
                                            value="top left">
                                        <?php esc_html_e('Upper left corner', 'rentsyst'); ?>
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><?php esc_html_e('Button Color', 'rentsyst'); ?></label>
                            <div class="col-sm-10">
                                <input type="color" name="button_color" class="form-control"
                                       value="<?= esc_attr($settings['button_color']); ?>">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><?php esc_html_e('Animation', 'rentsyst'); ?></label>
                            <div class="col-sm-10">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="button_animation"
                                               value="1" <?= $settings['button_animation'] ? 'checked' : ''; ?>>
                                        <?php esc_html_e('Show animation', 'rentsyst'); ?>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><?php esc_html_e('Location of the panel', 'rentsyst'); ?></label>
                            <div class="col-sm-10">
                                <select class="form-control" name="form_position">
                                    <option <?= $settings['form_position'] === 'left' ? 'selected' : ''; ?>
                                            value="left">
                                        <?php esc_html_e('On the left', 'rentsyst'); ?>
                                    </option>
                                    <option <?= $settings['form_position'] === 'right' ? 'selected' : ''; ?>
                                            value="right">
                                        <?php esc_html_e('On the right', 'rentsyst'); ?>
                                    </option>
                                </select>
                            </div>
                        </div>

                    </div>

                    <div class="hr-line-dashed"></div>

	                <?php if (get_option('rentsyst_enable_design_v2') == 0) { ?>
                        <div class="form-group highlight-warning">
                            <label class="col-sm-2 control-label"><?php esc_html_e('Other', 'rentsyst'); ?></label>
                            <div class="col-sm-10">
                                <div class="checkbox">
                                    <label>
                                        <input data-show-subsettings="add-booking-in-menu-wraper" type="checkbox"
                                               name="enable_design_v2"
                                               value="1" <?= $settings['enable_design_v2'] ? 'checked' : '' ?>>
                                        <?php esc_html_e('Enable design builder 2.0 (recommend)', 'rentsyst'); ?>
                                        <p style="color: #d63638; font-weight: bold; margin-top: 10px;">
                                            <?php esc_html_e('This feature is required in the upcoming version. Please enable it.', 'rentsyst'); ?>
                                        </p>
                                    </label>
                                </div>
                                <div id="add-booking-in-menu-wraper"
                                     style="color: gray; margin-left: 20px;"
                                     class="checkbox subsetting-wraper <?= $settings['enable_design_v2'] ? 'open' : 'close'; ?>">

                                </div>
                            </div>
                        </div>
	                <?php } ?>

                    <button class="btn btn-primary btn-block">
                        <?php esc_html_e('Save', 'rentsyst'); ?>
                    </button>
                </fieldset>
            </form>

            <a id="rentsyst_booking_button" class="RentsystButton <?= esc_attr($settings['button_position']); ?>" href="#"
               style="z-index: 10000; display:<?= $settings['enable_booking_button'] ? 'block' : 'none'; ?>">
                <div class="RentsystButtonBackground"
                     style="background-color: <?= esc_attr($settings['button_color']); ?>;"></div>
                <div class="RentsystButtonWave"
                     style="border-color: <?= esc_attr($settings['button_color']); ?>; color: <?= esc_attr($settings['button_color']); ?>; display:  <?= $settings['button_animation'] ? 'block' : 'none'; ?>;"></div>
                <div class="RentsystButtonText"><?= esc_attr($settings['button_text']); ?></div>
                <div class="RentsystButtonIcon"></div>
            </a>
        </div>
        </p>
    </div>
    <div class="rentsyst-loading hidden">
        <div class="img-loader"></div>
        <div class="loader-message"><?php esc_html_e('Loading data', 'rentsyst'); ?></div>
    </div>
