<?php
/**
 * GFB Setting View
 *
 * @package GFB.
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

$apbgf_settings = get_option('apbgf_settings', array());

$hide_slot_capacity = isset($apbgf_settings['general']['hide_slot_capacity']) ? $apbgf_settings['general']['hide_slot_capacity'] : 'disabled';

$apbgf_price_policy = isset($apbgf_settings['general']['apbgf_price_policy']) ? $apbgf_settings['general']['apbgf_price_policy'] : '';

$apbgf_appointment_policy = isset($apbgf_settings['general']['apbgf_appointment_policy']) ? $apbgf_settings['general']['apbgf_appointment_policy'] : '';

$gbf_start_of_week = isset($apbgf_settings['general']['gbf_start_of_week']) ? $apbgf_settings['general']['gbf_start_of_week'] : '';
$gbf_lead_time = isset($apbgf_settings['general']['gbf_lead_time']) ? $apbgf_settings['general']['gbf_lead_time'] : '';

$gbf_time_duration = isset($apbgf_settings['general']['gbf_time_duration']) ? $apbgf_settings['general']['gbf_time_duration'] : '';

$gbf_time_interval = isset($apbgf_settings['general']['gbf_time_interval']) ? $apbgf_settings['general']['gbf_time_interval'] : '';

$apbgf_calendar_timeslot_format = isset($apbgf_settings['general']['apbgf_calendar_timeslot_format']) ? $apbgf_settings['general']['apbgf_calendar_timeslot_format'] : '';

$gbf_show_timeslot = isset($apbgf_settings['general']['gbf_show_timeslot']) ? $apbgf_settings['general']['gbf_show_timeslot'] : '';

$apbgf_prior_months_book_appointment = isset($apbgf_settings['general']['apbgf_prior_months_book_appointment']) ? $apbgf_settings['general']['apbgf_prior_months_book_appointment'] : '3';

/*CT-284*/
$apbgf_prior_days_book_appointment = isset($apbgf_settings['general']['apbgf_prior_days_book_appointment']) ? $apbgf_settings['general']['apbgf_prior_days_book_appointment'] : '0';
/*CT-284*/


$apbgf_cal_gradient_color_top = isset($apbgf_settings['display']['apbgf_cal_gradient_color_top']) ? $apbgf_settings['display']['apbgf_cal_gradient_color_top'] : '#f1f3f6';

$apbgf_cal_gradient_color_bottom = isset($apbgf_settings['display']['apbgf_cal_gradient_color_bottom']) ? $apbgf_settings['display']['apbgf_cal_gradient_color_bottom'] : '#f1f3f6';

$apbgf_cal_border_color = isset($apbgf_settings['display']['apbgf_cal_border_color']) ? $apbgf_settings['display']['apbgf_cal_border_color'] : '#26547c21';

$apbgf_cal_header_bg_color = isset($apbgf_settings['display']['apbgf_cal_header_bg_color']) ? $apbgf_settings['display']['apbgf_cal_header_bg_color'] : '#7C9299';

$apbgf_cal_header_text_color = isset($apbgf_settings['display']['apbgf_cal_header_text_color']) ? $apbgf_settings['display']['apbgf_cal_header_text_color'] : '#FFFFFF';

$apbgf_cal_text_color = isset($apbgf_settings['display']['apbgf_cal_text_color']) ? $apbgf_settings['display']['apbgf_cal_text_color'] : '#6D8298';

$apbgf_cal_selected_text_color = isset($apbgf_settings['display']['apbgf_cal_selected_text_color']) ? $apbgf_settings['display']['apbgf_cal_selected_text_color'] : '#FFFFFF';

$apbgf_cal_selected_text_bg_color = isset($apbgf_settings['display']['apbgf_cal_selected_text_bg_color']) ? $apbgf_settings['display']['apbgf_cal_selected_text_bg_color'] : '#00D0AC';

$apbgf_cal_available_days_text_color = isset($apbgf_settings['display']['apbgf_cal_available_days_text_color']) ? $apbgf_settings['display']['apbgf_cal_available_days_text_color'] : '#6D8298';

$apbgf_cal_available_days_bg_color = isset($apbgf_settings['display']['apbgf_cal_available_days_bg_color']) ? $apbgf_settings['display']['apbgf_cal_available_days_bg_color'] : '#FFFFFF';

$apbgf_cal_holiday_days_text_color = isset($apbgf_settings['display']['apbgf_cal_holiday_days_text_color']) ? $apbgf_settings['display']['apbgf_cal_holiday_days_text_color'] : '#6D8298';

$apbgf_cal_holiday_days_bg_color = isset($apbgf_settings['display']['apbgf_cal_holiday_days_bg_color']) ? $apbgf_settings['display']['apbgf_cal_holiday_days_bg_color'] : '';

$apbgf_company_name = isset($apbgf_settings['company']['apbgf_company_name']) ? $apbgf_settings['company']['apbgf_company_name'] : '';

$apbgf_company_address = isset($apbgf_settings['company']['apbgf_company_address']) ? $apbgf_settings['company']['apbgf_company_address'] : '';
$apbgf_company_number = isset($apbgf_settings['company']['apbgf_company_number']) ? $apbgf_settings['company']['apbgf_company_number'] : '';

$apbgf_company_email = isset($apbgf_settings['company']['apbgf_company_email']) ? $apbgf_settings['company']['apbgf_company_email'] : '';

$apbgf_company_website_url = isset($apbgf_settings['company']['apbgf_company_website_url']) ? $apbgf_settings['company']['apbgf_company_website_url'] : '';

$apbgf_sender_name = isset($apbgf_settings['email']['apbgf_sender_name']) ? $apbgf_settings['email']['apbgf_sender_name'] : '';

$apbgf_sender_email = isset($apbgf_settings['email']['apbgf_sender_email']) ? $apbgf_settings['email']['apbgf_sender_email'] : '';

?>
<div class="container">
	<div class="gf_booking_overlayDiv"></div>
	<div class="main-setting--div">        
		<div class="setting--content">
			<div class="top--heading">
				<h2><?php echo esc_html__('Settings', 'appointment-and-booking-for-gravity-forms'); ?></h2>
			</div>

			<div class="gf_booking_card--r1">
				<div class="apbgf_item_box">
					<div class="gf_booking_card--content" id="gf_booking_cardOne">
						<img src="<?php echo esc_url( APBGF_IMAGE_URL ); ?>General-setting.png" alt="">
						<h4><?php echo esc_html__('General Settings', 'appointment-and-booking-for-gravity-forms'); ?></h4>
						<p><?php echo esc_html__('Use these settings to define plugin general settings and default settings for your services and appointments.', 'appointment-and-booking-for-gravity-forms'); ?></p>
					</div>
				</div>
				<div class="apbgf_item_box">
					<div class="gf_booking_card--content" id="gf_booking_cardtwo">
						<span class="apbgf-pro-label"><?php echo esc_attr('PRO', 'appointment-and-booking-for-gravity-forms'); ?></span>
						<img src="<?php echo esc_url( APBGF_IMAGE_URL ); ?>Untitled-2.png" alt="">
						<h4><?php echo esc_html__('Display Settings', 'appointment-and-booking-for-gravity-forms'); ?></h4>
						<p><?php echo esc_html__('Use these settings to define the color scheme of the calendar on front-end.', 'appointment-and-booking-for-gravity-forms'); ?> </p>
					</div>
				</div>
				<div class="apbgf_item_box">
					<div class="gf_booking_card--content" id="gf_bookings_appointments">
						<!-- new changes -->
						<span class="apbgf-pro-label"><?php echo esc_attr('PRO', 'appointment-and-booking-for-gravity-forms'); ?></span>
						<img src="<?php echo esc_url( APBGF_IMAGE_URL ); ?>Appointments.png" alt="">
						<h4><?php echo esc_html__('Labels', 'appointment-and-booking-for-gravity-forms'); ?></h4>
						<p><?php echo esc_html__('Use these settings to change the labels on front-end.', 'appointment-and-booking-for-gravity-forms'); ?></p>
					</div>
				</div>

				<div class="apbgf_item_box">
					<div class="gf_booking_card--content" id="gf_booking_company_detail">
						<img src="<?php echo esc_url( APBGF_IMAGE_URL ); ?>Company.png" alt="">
						<h4><?php echo esc_html__('Company', 'appointment-and-booking-for-gravity-forms'); ?></h4>
						<p><?php echo esc_html__('Use these settings to add your company details.', 'appointment-and-booking-for-gravity-forms'); ?> </p>
					</div>
				</div>
				<div class="apbgf_item_box">
					<div class="gf_booking_card--content" id="gf_booking_email_configuration">
						<img src="<?php echo esc_url( APBGF_IMAGE_URL ) ; ?>Email-Configuration.png" alt="">
						<h4><?php echo esc_html__('Email Configuration', 'appointment-and-booking-for-gravity-forms'); ?></h4>
						<p><?php echo esc_html__('Use this settings to configure email work flow.', 'appointment-and-booking-for-gravity-forms'); ?> </p>
					</div>
				</div>
				<div class="apbgf_item_box">
					<div class="gf_booking_card--content" id="gf_booking_google_calender">
						<!-- new changes -->
						<span class="apbgf-pro-label"><?php echo esc_attr('PRO', 'appointment-and-booking-for-gravity-forms'); ?></span>
						<img src="<?php echo esc_url( APBGF_IMAGE_URL ); ?>Google-Calender.png" alt="">
						<h4><?php echo esc_html__('Google Calender', 'appointment-and-booking-for-gravity-forms'); ?></h4>
						<p><?php echo esc_html__('Use this settings to integrate Google Calendar.', 'appointment-and-booking-for-gravity-forms'); ?></p>
					</div>
				</div>
				<div class="apbgf_item_box">
					<div class="gf_booking_card--content" id="gf_booking_outlook_calender">
						<!-- new changes -->
						<span class="apbgf-pro-label"><?php echo esc_attr('PRO', 'appointment-and-booking-for-gravity-forms'); ?></span>
						<img src="<?php echo esc_url( APBGF_IMAGE_URL ); ?>Outlook-Calender.png" alt="">
						<h4><?php echo esc_html__('Office 365 Calendar', 'appointment-and-booking-for-gravity-forms'); ?></h4>
						<p><?php echo esc_html__('Use this settings to integrate Office 365 Calendar.', 'appointment-and-booking-for-gravity-forms'); ?></p>
					</div>
				</div>
			</div>
		</div>
	</div>

</div>

<?php
// Global Pro popup modal using the shared SVG artwork in this plugin.
$apbgf_pro_popup_img = APBGF_IMAGE_URL . 'ProPopup.svg';
$apbgf_pricing_url   = 'https://gravitybooking.com/pricing/?utm_source=plugin&utm_medium=settings';
if ( $apbgf_pro_popup_img ) :
	?>
	<div id="apbgf-pro-modal" class="apbgf-pro-modal" style="display:none;">
		<div class="apbgf-pro-modal-backdrop" style="position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:100000;"></div>
		<div class="apbgf-pro-modal-inner" style="position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100001;max-width:640px;width:100%;overflow:hidden;border-radius:8px;">
			<div class="apbgf-pro-modal-content" style="position:relative;">
				<img src="<?php echo esc_url( $apbgf_pro_popup_img ); ?>" alt="<?php esc_attr_e( 'Upgrade to Pro', 'appointment-and-booking-for-gravity-forms' ); ?>" style="display:block;width:100%;height:auto;" />
				<a href="<?php echo esc_url( $apbgf_pricing_url ); ?>" target="_blank" rel="noopener noreferrer"
				   aria-label="<?php esc_attr_e( 'Buy Gravity Bookings', 'appointment-and-booking-for-gravity-forms' ); ?>"
				   style="position:absolute;left:31%;top:69%;width:38%;height:15%;background:transparent;border:none;outline:none;box-shadow:none;cursor:pointer;text-indent:-9999px;overflow:hidden;">
					<?php esc_html_e( 'Buy Gravity Bookings', 'appointment-and-booking-for-gravity-forms' ); ?>
				</a>
				<button type="button" class="apbgf-pro-modal-close-area" aria-label="<?php esc_attr_e( 'Close', 'appointment-and-booking-for-gravity-forms' ); ?>" style="position:absolute;top:0;right:0;width:15%;height:12%;background:transparent;border:none;outline:none;box-shadow:none;cursor:pointer;z-index:2;"></button>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		(function() {
			function apbgfReady(fn) {
				if (document.readyState === 'loading') {
					document.addEventListener('DOMContentLoaded', fn);
				} else {
					fn();
				}
			}
			apbgfReady(function() {
				var modal     = document.getElementById('apbgf-pro-modal');
				if (!modal) { return; }
				var closeArea = modal.querySelector('.apbgf-pro-modal-close-area');
				var backdrop  = modal.querySelector('.apbgf-pro-modal-backdrop');

				function openModal(e) {
					if (e) {
						e.preventDefault();
						if (e.stopImmediatePropagation) {
							e.stopImmediatePropagation();
						}
						e.stopPropagation();
					}
					modal.style.display = 'block';
				}

				function closeModal(e) {
					if (e) {
						e.preventDefault();
					}
					modal.style.display = 'none';
				}

				// Attach popup to PRO cards on the main settings grid.
				var proCardIds = [
					'gf_booking_cardtwo',          // Display Settings (PRO)
					'gf_bookings_appointments',    // Labels (PRO)
					'gf_booking_google_calender',  // Google Calendar (PRO)
					'gf_booking_outlook_calender'  // Office 365 Calendar (PRO)
				];
				proCardIds.forEach(function(id) {
					var el = document.getElementById(id);
					if (!el) { return; }
					// Use capture so we intercept before sidebar handlers.
					el.addEventListener('click', openModal, true);
				});

				// Attach popup to key PRO-only controls inside sidebars.
				var triggerInputs = [
					document.getElementById('custom_slots_multiple_enabled'),
					document.getElementById('apbgf_gcal_enabled'),
					document.getElementById('apbgf_gcal_two_way_sync_enabled'),
					document.getElementById('apbgf_ocal_enabled'),
					document.getElementById('gbf_lead_time'),
					document.getElementById('lead-time-pro-feature')
				];
				triggerInputs.forEach(function(input) {
					if (!input) { return; }
					input.addEventListener('click', openModal);
				});

				if (closeArea) {
					closeArea.addEventListener('click', closeModal);
				}
				if (backdrop) {
					backdrop.addEventListener('click', closeModal);
				}
			});
		})();
	</script>
	<?php
endif;
?>

<div class="gf_booking_sidebar">
	<span class="close_icon"></span>
	<div class="apbgf_booking_setting--inner apbgf_fancy_scroll gf_booking_general--inner boxsizing closed">
		<h3 class="apbgf-setting--title"><?php esc_html_e('General Settings', 'appointment-and-booking-for-gravity-forms'); ?></h3>
		<form class="apbgf_setting_form">
			<input type="hidden" name="type" value="general" />
						
			<div class="apbgf-field-wrapper">
				<label><?php echo esc_html__('Slot Capacity on Calendar', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="radio" name="hide_slot_capacity" id="hide_slot_capacity_enabled" value="enabled" <?php checked('enabled', $hide_slot_capacity, true); ?> /> <?php esc_html_e('Hide', 'appointment-and-booking-for-gravity-forms'); ?>&nbsp;&nbsp;
				<input type="radio" name="hide_slot_capacity" id="hide_slot_capacity_disabled" value="disabled" <?php checked('disabled', $hide_slot_capacity, true); ?> />  <?php esc_html_e('Show', 'appointment-and-booking-for-gravity-forms'); ?>
			</div>
			<div class="apbgf-field-wrapper">
				<label class="apbgf-pro-feature-heading"><?php echo esc_html__('Custom Slots Multiple Booking', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<div id="custom-slot-gen-pro-feature">
					<input type="radio" name="" id="custom_slots_multiple_enabled" value="enabled"/> <?php esc_html_e('Enable', 'appointment-and-booking-for-gravity-forms'); ?>&nbsp;&nbsp;
					<input type="radio" name="" id="hide_slot_capacity_disabled" value="disabled"/>  <?php esc_html_e('Disable', 'appointment-and-booking-for-gravity-forms'); ?>
				</div>
			</div>

			<div class="apbgf-field-wrapper">
				<label for="apbgf_price_policy"><?php echo esc_html__('Price Policy', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<select name="apbgf_price_policy" id="apbgf_price_policy">                    
					<option value="admin" <?php selected('admin', $apbgf_price_policy, true); ?>><?php esc_html_e('Admin', 'appointment-and-booking-for-gravity-forms'); ?></option>
					<option value="staff" <?php selected('staff', $apbgf_price_policy, true); ?>><?php esc_html_e('Staff', 'appointment-and-booking-for-gravity-forms'); ?></option>                    
				</select>
				<small><?php esc_html_e('Allow staff/admin to give rights to set the price for any service. Default is Admin', 'appointment-and-booking-for-gravity-forms'); ?></small>
			</div>

			<div class="apbgf-field-wrapper">
				<label for="apbgf_appointment_policy"><?php echo esc_html__('Appointment Policy', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<select name="apbgf_appointment_policy" id="apbgf_appointment_policy">                    
					<option value="admin" <?php selected('admin', $apbgf_appointment_policy, true); ?>><?php esc_html_e('Admin', 'appointment-and-booking-for-gravity-forms'); ?></option>
					<option value="staff" <?php selected('staff', $apbgf_appointment_policy, true); ?>><?php esc_html_e('Staff', 'appointment-and-booking-for-gravity-forms'); ?></option>                    
				</select>
				<small><?php esc_html_e('Allow staff/admin to give rights to confirm appointments assigned to them. Default is Admin', 'appointment-and-booking-for-gravity-forms'); ?></small>
			</div>

			<div class="apbgf-field-wrapper">
				<label for="gbf_start_of_week"><?php echo esc_html__('Start Day of Week', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<select name="gbf_start_of_week" id="gbf_start_of_week">                    
					<option value="monday" <?php selected('monday', $gbf_start_of_week, true); ?>><?php esc_html_e('Monday', 'appointment-and-booking-for-gravity-forms'); ?></option>
					<option value="sunday" <?php selected('sunday', $gbf_start_of_week, true); ?>><?php esc_html_e('Sunday', 'appointment-and-booking-for-gravity-forms'); ?></option>
				</select>
				<small><?php esc_html_e('This will set your calendar day start with.  Default is Monday', 'appointment-and-booking-for-gravity-forms'); ?></small>
			</div>

			 <div class="apbgf-field-wrapper">
				<label class="apbgf-pro-feature-heading" for="gbf_lead_time"><?php echo esc_html__('Lead Time (minutes)', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<div id="lead-time-pro-feature">
					<input type="number" min="1" name="gbf_lead_time" id="gbf_lead_time" value="<?php echo esc_attr($gbf_lead_time); ?>" readonly style="cursor: pointer;" />                    
				</div>
				<small><?php esc_html_e('Time slot lead time. Ex: 180 = 3 hours.  Default is 30 mins', 'appointment-and-booking-for-gravity-forms'); ?></small>
			</div>

			<div class="apbgf-field-wrapper">
				<label for="gbf_time_duration"><?php echo esc_html__('Time Slot Duration (minutes)', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="number" min="1" name="gbf_time_duration" id="gbf_time_duration" value="<?php echo esc_attr($gbf_time_duration); ?>" />                    
				<small><?php esc_html_e('Each time slot duration. Ex: 180 = 3 hours.  Default is 30 mins', 'appointment-and-booking-for-gravity-forms'); ?></small>
			</div>

			<div class="apbgf-field-wrapper">
				<label for="staff"><?php echo esc_html__('Time Slot Interval (minutes)', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="number" min="0" name="gbf_time_interval" id="gbf_time_interval" value="<?php echo esc_attr($gbf_time_interval); ?>" />                    
				<small><?php esc_html_e('Gap between each time slots. Ex: 60 = 1 hour. Default is 15 mins', 'appointment-and-booking-for-gravity-forms'); ?></small>
			</div>

			<div class="apbgf-field-wrapper">
				<label for="apbgf_calendar_timeslot_format"><?php echo esc_html__('Timeslot Format on Calendar', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<select name="apbgf_calendar_timeslot_format" id="apbgf_calendar_timeslot_format">                    
					<option value="24" <?php selected('24', $apbgf_calendar_timeslot_format, true); ?>><?php esc_html_e('24 Hours', 'appointment-and-booking-for-gravity-forms'); ?></option>
					<option value="12" <?php selected('12', $apbgf_calendar_timeslot_format, true); ?>><?php esc_html_e('12 Hours', 'appointment-and-booking-for-gravity-forms'); ?></option>
				</select>
				<small><?php esc_html_e('This will set the time format of the Timeslots on the calendar. Default is 24 Hours', 'appointment-and-booking-for-gravity-forms'); ?></small>
			</div>

			<div class="apbgf-field-wrapper">
				<label for="gbf_show_timeslot"><?php echo esc_html__('Timeslots on Calendar', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<select name="gbf_show_timeslot" id="gbf_show_timeslot">                    
					<option value="right" <?php selected('right', $gbf_show_timeslot, true); ?>><?php esc_html_e('Right', 'appointment-and-booking-for-gravity-forms'); ?></option>
					<option value="bottom" <?php selected('bottom', $gbf_show_timeslot, true); ?>><?php esc_html_e('Bottom', 'appointment-and-booking-for-gravity-forms'); ?></option>
				</select>
				<small><?php esc_html_e('This will set the position of the Timeslots on the calendar. Default is Right', 'appointment-and-booking-for-gravity-forms'); ?></small>
			</div>

			<div class="apbgf-field-wrapper">
				<label for="apbgf_prior_months_book_appointment"><?php echo esc_html__('Prior Months to Book Appointment', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="number" min="0" name="apbgf_prior_months_book_appointment" id="apbgf_prior_months_book_appointment" value="<?php echo esc_attr($apbgf_prior_months_book_appointment); ?>" />                    
				<small><?php esc_html_e('No. of months allowed to book appointments. It cannot be zero.  Default is 3', 'appointment-and-booking-for-gravity-forms'); ?></small>
			</div>

			<!-- CT-284 -->
			<div class="apbgf-field-wrapper">
				<label for="apbgf_prior_days_book_appointment"><?php echo esc_html__('Prior Days to Book Appointment', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="number" min="0" name="apbgf_prior_days_book_appointment" id="apbgf_prior_days_book_appointment" value="<?php echo esc_attr($apbgf_prior_days_book_appointment); ?>" />
				<small><?php esc_html_e('No. of days to block an appointment from current date. 0 will start from today. Default is 0.', 'appointment-and-booking-for-gravity-forms'); ?></small>
			</div>
			<!-- CT-284 -->

			<button><?php esc_html_e('Save', 'appointment-and-booking-for-gravity-forms'); ?></button>
		</form>
	</div>

	<div class="apbgf_booking_setting--inner apbgf_fancy_scroll gf_booking_display--inner boxsizing closed">
		<div class="apbgf-pro-slider">
			<h2>
				<?php esc_html_e('Unlock This Feature', 'appointment-and-booking-for-gravity-forms'); ?>
			</h2>
			<span>
				<a href="https://gravitybooking.com/pricing/?utm_source=plugin&utm_medium=settings" target="_blank"> <?php esc_html_e('Upgrade to Pro', 'appointment-and-booking-for-gravity-forms'); ?></a>
			</span>
		</div>
		<h3 class="apbgf-setting--title"><?php esc_html_e('Display Settings', 'appointment-and-booking-for-gravity-forms'); ?></h3>
		<form class="apbgf_setting_form">
			<input type="hidden" name="type" value="display" />

			<div class="apbgf-field-wrapper">
				<label for="apbgf_cal_gradient_color_top"><?php echo esc_html__('Calendar Background Color Gradient', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="color" name="apbgf_cal_gradient_color_top" id="apbgf_cal_gradient_color_top" value="<?php echo esc_attr($apbgf_cal_gradient_color_top); ?>" />
				<input type="color" name="apbgf_cal_gradient_color_bottom" id="apbgf_cal_gradient_color_bottom" value="<?php echo esc_attr($apbgf_cal_gradient_color_bottom); ?>" />
				<small><?php esc_html_e('Default is #f1f3f6, #f1f3f6', 'appointment-and-booking-for-gravity-forms'); ?></small>         
			</div>

			<div class="apbgf-field-wrapper">
				<label for="apbgf_cal_border_color"><?php echo esc_html__('Calendar Border Color', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="color" name="apbgf_cal_border_color" id="apbgf_cal_border_color" value="<?php echo esc_attr($apbgf_cal_border_color); ?>" />  
				<small><?php esc_html_e('Default is #26547c21', 'appointment-and-booking-for-gravity-forms'); ?></small>               
			</div>

			<div class="apbgf-field-wrapper">
				<label for="apbgf_cal_header_bg_color"><?php echo esc_html__('Calendar Header Background Color', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="color" name="apbgf_cal_header_bg_color" id="apbgf_cal_header_bg_color" value="<?php echo esc_attr($apbgf_cal_header_bg_color); ?>" />  
				<small><?php esc_html_e('Default is #7C9299', 'appointment-and-booking-for-gravity-forms'); ?></small>
			</div>

			<div class="apbgf-field-wrapper">
				<label for="apbgf_cal_header_text_color"><?php echo esc_html__('Calendar Header Text Color', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="color" name="apbgf_cal_header_text_color" id="apbgf_cal_header_text_color" value="<?php echo esc_attr($apbgf_cal_header_text_color); ?>" />  
				<small><?php esc_html_e('Default is #FFFFFF', 'appointment-and-booking-for-gravity-forms'); ?></small>
			</div>

			<div class="apbgf-field-wrapper">
				<label for="apbgf_cal_text_color"><?php echo esc_html__('Calendar Text Color', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="color" name="apbgf_cal_text_color" id="apbgf_cal_text_color" value="<?php echo esc_attr($apbgf_cal_text_color); ?>" />  
				<small><?php esc_html_e('Default is #6D8298', 'appointment-and-booking-for-gravity-forms'); ?></small>               
			</div>

			<div class="apbgf-field-wrapper">
				<label for="apbgf_cal_selected_text_color"><?php echo esc_html__('Calendar Selected Text Color', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="color" name="apbgf_cal_selected_text_color" id="apbgf_cal_selected_text_color" value="<?php echo esc_attr($apbgf_cal_selected_text_color); ?>" /> 
				<small><?php esc_html_e('Default is #FFFFFF', 'appointment-and-booking-for-gravity-forms'); ?></small>                
			</div>

			<div class="apbgf-field-wrapper">
				<label for="apbgf_cal_selected_text_bg_color"><?php echo esc_html__('Calendar Selected Text Background Color', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="color" name="apbgf_cal_selected_text_bg_color" id="apbgf_cal_selected_text_bg_color" value="<?php echo esc_attr($apbgf_cal_selected_text_bg_color); ?>" />   
				<small><?php esc_html_e('Default is #00D0AC', 'appointment-and-booking-for-gravity-forms'); ?></small>              
			</div>

			<div class="apbgf-field-wrapper">
				<label for="apbgf_cal_available_days_text_color"><?php echo esc_html__('Calendar Available Days Text Color', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="color" name="apbgf_cal_available_days_text_color" id="apbgf_cal_available_days_text_color" value="<?php echo esc_attr($apbgf_cal_available_days_text_color); ?>" />  
				<small><?php esc_html_e('Default is #6D8298', 'appointment-and-booking-for-gravity-forms'); ?></small>               
			</div>

			<div class="apbgf-field-wrapper">
				<label for="apbgf_cal_available_days_bg_color"><?php echo esc_html__('Calendar Available Days Background Color', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="color" name="apbgf_cal_available_days_bg_color" id="apbgf_cal_available_days_bg_color" value="<?php echo esc_attr($apbgf_cal_available_days_bg_color); ?>" />
				<small><?php esc_html_e('Default is #FFFFFF', 'appointment-and-booking-for-gravity-forms'); ?></small> 
			</div>

			<div class="apbgf-field-wrapper">
				<label for="apbgf_cal_holiday_days_text_color"><?php echo esc_html__('Calendar Holiday Days Text Color', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="color" name="apbgf_cal_holiday_days_text_color" id="apbgf_cal_holiday_days_text_color" value="<?php echo esc_attr($apbgf_cal_holiday_days_text_color); ?>" />  
				<small><?php esc_html_e('Default is #6D8298', 'appointment-and-booking-for-gravity-forms'); ?></small>               
			</div>

			<div class="apbgf-field-wrapper">
				<label for="apbgf_cal_holiday_days_bg_color"><?php echo esc_html__('Calendar Holiday Days Background Color', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="color" name="apbgf_cal_holiday_days_bg_color" id="apbgf_cal_holiday_days_bg_color" value="<?php echo esc_attr($apbgf_cal_holiday_days_bg_color); ?>" />
				<small><?php esc_html_e('Default is empty', 'appointment-and-booking-for-gravity-forms'); ?></small>
			</div>

			<button><?php esc_html_e('Save', 'appointment-and-booking-for-gravity-forms'); ?></button>
			<!-- end -->
		</form>
	</div>

	<div class="apbgf_booking_setting--inner apbgf_fancy_scroll gf_booking_apointments_listing boxsizing closed">
	   <!-- new changes -->
		<div class="apbgf-pro-slider">
			<h2>
				<?php esc_html_e('Unlock This Feature', 'appointment-and-booking-for-gravity-forms'); ?>
			</h2>
			<span>
				<a href="https://gravitybooking.com/pricing/?utm_source=plugin&utm_medium=settings" target="_blank"> <?php esc_html_e('Upgrade to Pro', 'appointment-and-booking-for-gravity-forms'); ?></a>
			</span>
		</div>
		<h3 class="apbgf-setting--title"><?php esc_html_e('Label Settings', 'appointment-and-booking-for-gravity-forms'); ?></h3>
		<!-- new changes -->
		<div>
			<input type="hidden" name="type" value="label" />            

			<div class="apbgf-field-wrapper">
				<label for="apbgf_label_location"><?php echo esc_html__('Location', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<!-- new changes -->
				<input type="text" name="" id="apbgf_label_location" />                
			</div>

			<div class="apbgf-field-wrapper" style="display: none;">
				<label for="apbgf_label_category"><?php echo esc_html__('Service Category', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<!-- new changes -->
				<input type="text" name="" id="apbgf_label_category"  />                
			</div>

			<div class="apbgf-field-wrapper">
				<label for="apbgf_label_service"><?php echo esc_html__('Service', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<!-- new changes -->
				<input type="text" name="" id="apbgf_label_service"  />                
			</div>

			<div class="apbgf-field-wrapper">
				<label for="apbgf_label_staff"><?php echo esc_html__('Staff', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<!-- new changes -->
				<input type="text" name="" id="apbgf_label_staff" />                
			</div>
			<!-- GB free version PRO Popup -->
			<?php
			/* <div class="apbgf-booking-pro-version">
				<div class="apbgf-pro-version">
					<h2 class="apbgf-pro-cross">X</h2>
					<h3> <?php esc_html_e( "Try pro version to unlock this feature"); ?> </h3>
					<button > <?php esc_html_e('Buy Now'); ?> </button>
				</div>
			</div>
			*/
			?>

			<button><?php esc_html_e('Save', 'appointment-and-booking-for-gravity-forms'); ?></button>
		</div> 
	</div>    

	



	<div class="apbgf_booking_setting--inner apbgf_fancy_scroll gf_booking_compnay_detail boxsizing closed">
		<h3 class="apbgf-setting--title"><?php esc_html_e('Company Settings', 'appointment-and-booking-for-gravity-forms'); ?></h3>
		<form class="apbgf_setting_form">
			<input type="hidden" name="type" value="company" />

			<div class="apbgf-field-wrapper">
				<label for="apbgf_company_name"><?php echo esc_html__('Name', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="text" name="apbgf_company_name" id="apbgf_company_name" value="<?php echo esc_attr($apbgf_company_name); ?>" />
			</div>

			<div class="apbgf-field-wrapper">
				<label for="apbgf_company_address"><?php echo esc_html__('Address', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<textarea name="apbgf_company_address" id="apbgf_company_address" cols="30" rows="10"><?php echo esc_attr($apbgf_company_address); ?></textarea>                
			</div>

			<div class="apbgf-field-wrapper">
				<label for="apbgf_company_number"><?php echo esc_html__('Phone Number', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="text" name="apbgf_company_number" id="apbgf_company_number" value="<?php echo esc_attr($apbgf_company_number); ?>" />                
			</div>

			<div class="apbgf-field-wrapper">
				<label for="apbgf_company_email"><?php echo esc_html__('Email ID', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="email" name="apbgf_company_email" id="apbgf_company_email" value="<?php echo esc_attr($apbgf_company_email); ?>" />                
			</div>

			<div class="apbgf-field-wrapper">
				<label for="apbgf_company_website_url"><?php echo esc_html__('Website URL', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="url" name="apbgf_company_website_url" id="apbgf_company_website_url" value="<?php echo esc_attr($apbgf_company_website_url); ?>" />                
			</div>

		  

			<button><?php esc_html_e('Save', 'appointment-and-booking-for-gravity-forms'); ?></button>
		</form>
   
	</div>   

	<div class="apbgf_booking_setting--inner apbgf_fancy_scroll gf_booking_email_configuration boxsizing closed">
		<h3 class="apbgf-setting--title"><?php esc_html_e('Email Configuration', 'appointment-and-booking-for-gravity-forms'); ?></h3>
		<form class="apbgf_setting_form">
			<input type="hidden" name="type" value="email" />

			<div class="apbgf-field-wrapper">
				<label for="apbgf_sender_name"><?php echo esc_html__('Sender Name', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="text" name="apbgf_sender_name" id="apbgf_sender_name" value="<?php echo esc_attr($apbgf_sender_name); ?>" />
			</div>            

			<div class="apbgf-field-wrapper">
				<label for="apbgf_sender_email"><?php echo esc_html__('Sender Email', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="email" name="apbgf_sender_email" id="apbgf_sender_email" value="<?php echo esc_attr($apbgf_sender_email); ?>" />
				<small><?php esc_html_e('Enter email address from which sender will send the email. Email should be of domain.', 'appointment-and-booking-for-gravity-forms'); ?></small>
			</div>

			<button><?php esc_html_e('Save', 'appointment-and-booking-for-gravity-forms'); ?></button>
		</form>
	</div>
	<!-- google integration -->
	<div class="apbgf_booking_setting--inner apbgf_fancy_scroll gf_booking_google_calander boxsizing closed">
	   
		<!-- new changes -->
		<div class="apbgf-pro-slider">
			<h2>
				<?php esc_html_e('Unlock This Feature', 'appointment-and-booking-for-gravity-forms'); ?>
			</h2>
			<span>
				<a href="https://gravitybooking.com/pricing/?utm_source=plugin&utm_medium=settings" target="_blank"> <?php esc_html_e('Upgrade to Pro', 'appointment-and-booking-for-gravity-forms'); ?></a>
			</span>
		</div>
		<!-- --------------------------- -->

		<h3 class="apbgf-setting--title"><?php esc_html_e('Google Calendar', 'appointment-and-booking-for-gravity-forms'); ?></h3>
		<!-- new changes -->
		<div >
			<input type="hidden" name="type" value="gcal" />
			
			<div class="apbgf-field-wrapper">
				<label><?php echo esc_html__('Enable Google Calendar', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<!-- new changes -->
				<input type="radio" name="" id="apbgf_gcal_enabled"/> <?php esc_html_e('Enable', 'appointment-and-booking-for-gravity-forms'); ?>&nbsp;&nbsp;                                                    
				<!-- new changes -->
				<input type="radio" name="" id="apbgf_gcal_disabled" value=<?php echo esc_attr( true ); ?>/>  <?php esc_html_e('Disable', 'appointment-and-booking-for-gravity-forms'); ?>
			</div>

			<div class="apbgf-field-wrapper">
				<label><?php echo esc_html__('Enable Two Way Sync', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<!-- new changes -->
				<input type="radio" name="" id="apbgf_gcal_two_way_sync_enabled"  /> <?php esc_html_e('Enable', 'appointment-and-booking-for-gravity-forms'); ?>&nbsp;&nbsp;                                                 
				 <!-- new changes -->
				<input type="radio" name="" id="apbgf_gcal_two_way_sync_disabled" value=<?php echo esc_attr( true ); ?> />  <?php esc_html_e('Disable', 'appointment-and-booking-for-gravity-forms'); ?>
			</div>

			<div class="apbgf-field-wrapper">
				<label for="apbgf_gcal_client_id"><?php echo esc_html__('Client ID', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<!-- new changes -->
				<input type="text" name="" id="apbgf_gcal_client_id" />
				<small><?php esc_html_e('Enter Client Id.', 'appointment-and-booking-for-gravity-forms'); ?></small>
			</div>

			<div class="apbgf-field-wrapper">
				<label for="apbgf_gcal_secret_key"><?php echo esc_html__('Secret Key', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="text" name="" id="apbgf_gcal_secret_key"/>
				<small><?php esc_html_e('Enter Secret Key.', 'appointment-and-booking-for-gravity-forms'); ?></small>
			</div>

			<div class="apbgf-field-wrapper">
				<label for="apbgf_gcal_sync_fields"><?php echo esc_html__('Fields to be Sync with Google Calendar', 'appointment-and-booking-for-gravity-forms'); ?></label>
				
				<?php foreach ( self::gcal_synchronization_fields() as $key => $field ) : ?>
					<label class="apbgf-cb-container">
						<!-- new changes -->
						<input type="checkbox" value="1" >
						<div class="apbgf-checkmark"></div>
						<?php echo esc_attr( $field ); ?>
					</label>
				<?php endforeach; ?>

			</div>



			<button><?php esc_html_e('Save', 'appointment-and-booking-for-gravity-forms'); ?></button>

			<div class="apbgf-info">
				<h4>Instructions</h4>
				<p>To find your client ID and client secret, do the following:</p>
				<ol>
					<li>Go to the Google Developers Console.</li>
					<li>Login to your gmail account.</li>
					<li>Select a project, or create a new one.</li>
					<li>Click in the upper left part to see a sliding sidebar. Next, click API Manager. In the list of APIs look for Calendar API and make sure it is enabled.</li>
					<li>In the sidebar on the left, select Credentials.</li>
					<li>Go to OAuth consent screen tab and give a name to the product, then click Save.</li>
					<li>Go to Credentials tab and in New credentials drop-down menu select OAuth client ID.</li>
					<li>Select Web application and create your project's OAuth 2.0 credentials by providing the necessary information. For Authorized redirect URIs enter the Redirect URI '<?php echo esc_url( admin_url() ); ?>'. Click Create.</li>
					<li>If you want to enable add to my calendar functionality then you will need to insert another Authorized Redirect URI i.e. "<?php echo esc_url( site_url() ); ?>/{url_where_form_placed}"</li>
					<li>In the popup window look for the Client ID and Client secret. Use them in the form below on this page.</li>
					<li>Login with Staff Members, on dashboard click Connect.</li>
				</ol>
			</div>
		</div>
	</div>

	<div class="apbgf_booking_setting--inner apbgf_fancy_scroll gf_booking_outlook_calender boxsizing closed"> 
	<!-- new changes -->
	<div class="apbgf-pro-slider">
			<h2>
				<?php esc_html_e('Unlock This Feature', 'appointment-and-booking-for-gravity-forms'); ?>
			</h2>
			<span>
				<a href="https://gravitybooking.com/pricing/?utm_source=plugin&utm_medium=settings" target="_blank"> <?php esc_html_e('Upgrade to Pro', 'appointment-and-booking-for-gravity-forms'); ?></a>
			</span>
		</div>
		<h3 class="apbgf-setting--title"><?php esc_html_e('Office 365 Calendar', 'appointment-and-booking-for-gravity-forms'); ?></h3>
		<div>
			<input type="hidden" name="type" value="ocal" />

			<div class="apbgf-field-wrapper">
				<label><?php echo esc_html__('Enable Office 365 Calendar', 'appointment-and-booking-for-gravity-forms'); ?></label>
				 <!-- new changes -->
				<input type="radio" name="" id="apbgf_ocal_enabled" /> <?php esc_html_e('Enable', 'appointment-and-booking-for-gravity-forms'); ?>&nbsp;&nbsp;
				<!-- new changes -->
				<input type="radio" name="" id="apbgf_ocal_disabled" value="<?php echo esc_attr( true ); ?>" />  <?php esc_html_e('Disable', 'appointment-and-booking-for-gravity-forms'); ?>
			</div>

			<div class="apbgf-field-wrapper">
				<label for="apbgf_ocal_client_id"><?php echo esc_html__('Client ID', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="text" name="" id="apbgf_ocal_client_id" value="" />
				<small><?php esc_html_e('Application (client) ID', 'appointment-and-booking-for-gravity-forms'); ?></small>
			</div>

			<div class="apbgf-field-wrapper">
				<label for="apbgf_ocal_secret_key"><?php echo esc_html__('Secret Key', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="text" name="" id="apbgf_ocal_secret_key" />
				<small><?php esc_html_e('Application Secret Key.', 'appointment-and-booking-for-gravity-forms'); ?></small>
			</div>

			<div class="apbgf-field-wrapper">
				<label for="apbgf_gcal_sync_fields"><?php echo esc_html__('Fields to be Sync with Outlook Calendar', 'appointment-and-booking-for-gravity-forms'); ?></label>
				
				<?php foreach ( self::gcal_synchronization_fields() as $key => $field ) : ?>
					<label class="apbgf-cb-container">
						<!-- new changes -->
						<input type="checkbox" value="1" >
						<div class="apbgf-checkmark"></div>
						<?php echo esc_attr( $field ); ?>
					</label>
				<?php endforeach; ?>

			</div>



			<button><?php esc_html_e('Save', 'appointment-and-booking-for-gravity-forms'); ?></button>

			<div class="apbgf-info">
				<h4>Instructions</h4>
				<p>To find your client ID and client secret, do the following:</p>
				<ol>
					<li>Go to the <a href="https://portal.azure.com/">https://portal.azure.com/</a>.</li>
					<li>Login to your outlook account.</li>
					<li>In the Azure services, Go to App registrations.</li>
					<li>Click on New registration and Enter app name.</li>
					<li>Select this option: Accounts in any organizational directory (Any Azure AD directory – Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)</li>
					<li>Select Web in the application type field.</li>
					<li>Add the Redirect URL '<?php echo esc_url( admin_url() ); ?>'</li>
					<li>Click on register button.</li>
					<li>If you want to enable add to my calendar functionality for customer then on the Overview Screen click on Redirect URIs and you will need to insert another Authorized Redirect URI i.e. "<?php echo esc_url( site_url() ); ?>/{url_where_form_placed}"</li>
					<li>After Registering, click on Certificates & Secrets on the left side of the screen.</li>
					<li>Click on New Client Secret.</li>
					<li>Add Description and Expires details.</li>
					<li>Copy Value and paste into Secret Key.</li>
					<li>Click on add button.</li>
					<li>Click on Overview. Copy Application (client) ID. Paste into Client ID.</li>
					<li>Go to API Permissions and Click on Add Premission.</li>
					<li>Click On Microsoft Graph then Delegated Permissions.</li>
					<li>Search for Calendars and check on Calendars.Read and Calendars.ReadWrite and click on Add Permission.</li>
					<li>Follow the same steps and add the delegated permission for MailboxSettings.Read.</li>
				</ol>
			</div>
			</div>
	</div>
</div>
