<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>
<div class="elex-fpf-loader"></div>
<div id="settings_first_section" class="postbox elex-fpf-table-box elex-fpf-table-box-main ">
	<h1><?php esc_html_e( 'ELEX Catalog Feed for Facebook & Instagram', 'elex-product-feed' ); ?></h1>
	<p id="elex_fpf_start_page_edit_text" style="display: none;"><i><?php esc_html_e( 'If you change the existing Country of Sale, the mapped Google attributes in the feed may be modified or removed based on Country of Sale.', 'elex-product-feed' ); ?></i></p>
	<table>
		<tr>
			<td class="elex-fpf-settings-table-left">
				<?php
					esc_html_e( 'Project Name ', 'elex-product-feed' );
					echo '<span style="color:red;">*</span>';
				?>
			</td>
			<td class='elex-fpf-settings-table-middle'>
				<span class='woocommerce-help-tip tooltip' data-tooltip='<?php esc_html_e( 'Enter a name for the product feed.', 'elex-product-feed' ); ?>'></span>
			</td>
			<td class="elex-fpf-settings-table-right">
				<input type="text" id="elex_project_title" style="width:25%;">
			</td>
			<input type="hidden" name="title_nonce" value="<?php esc_html_e( wp_create_nonce( 'title_nonce' ) ); ?>"/>

		</tr>
		<tr>
			<td class="elex-fpf-settings-table-left">
				<?php esc_html_e( 'Project Description', 'elex-product-feed' ); ?>
			</td>
			<td class='elex-fpf-settings-table-middle'>
				<span class='woocommerce-help-tip tooltip' data-tooltip='<?php esc_html_e( 'Enter a description for the product feed. Leave it blank to use Project Name as Project Description.', 'elex-product-feed' ); ?>'></span>
			</td>
			<td class="elex-fpf-settings-table-right">
				<input type="text" id="elex_project_description" style="width:25%;">
			</td>
		</tr>
		<?php
		$is_connected_to_fb = false;
		if ( ! empty( get_option( 'elex_fb_access_token' ) ) && ! empty( get_option( 'elex_fb_business_id' ) ) ) {
			$is_connected_to_fb = true;
		}
		?>
		<tr>
			<td class="elex-fpf-settings-table-left">
				<?php esc_html_e( 'Sync to Facebook', 'elex-product-feed' ); ?>
			</td>
			<td class='elex-fpf-settings-table-middle'>
				<span class='woocommerce-help-tip tooltip' data-tooltip='<?php esc_html_e( 'Enable this option to sync your WooCommerce products to Facebook Catalog automatically. You can schedule the sync in the option given below', 'elex-product-feed' ); ?>'></span>
			</td>
			<input id="elex_sync_to_fb_check"  type="hidden" 
			<?php 
			if ( $is_connected_to_fb ) {
				?>
				 value=true
				<?php 
			} else {
				?>
value=false<?php } ?> >

			<td class="elex-fpf-settings-table-right">
				<label class="switch">
					<input id="elex_sync_to_fb" type="checkbox" >
					<span class="slider round"></span>
				</label>
			</td>
		</tr>
		<tr>
			<td class="elex-fpf-settings-table-left">
				<?php esc_html_e( 'Refresh Schedule', 'elex-product-feed' ); ?>
			</td>
			<td class='elex-fpf-settings-table-middle'>
				<span class='woocommerce-help-tip tooltip' data-tooltip='<?php esc_html_e( 'Select a time interval to refresh the product feed. This will help to update the feed with any changes you make on your WooCommerce store.', 'elex-product-feed' ); ?>'></span>
			</td>
			<td class="elex-fpf-settings-table-right">
				<select id="refresh_schedule" style="width:25%;">
					<option value="no_refresh"><?php esc_html_e( 'No Refresh', 'elex-product-feed' ); ?></option>
					<option value="daily"><?php esc_html_e( 'Daily', 'elex-product-feed' ); ?></option>
					<option value="weekly"><?php esc_html_e( 'Weekly', 'elex-product-feed' ); ?></option>
					<option value="monthly"><?php esc_html_e( 'Monthly', 'elex-product-feed' ); ?></option>
				</select>
			</td>
		</tr>
		<tr id="elex_select_weekly_day">
			<td class="elex-fpf-settings-table-left">
				<?php esc_html_e( 'Select Days', 'elex-product-feed' ); ?>
			</td>
			<td class='elex-fpf-settings-table-middle'>
				<span class='woocommerce-help-tip tooltip' data-tooltip='<?php esc_html_e( 'Select the days on which you want to refresh the feed.', 'elex-product-feed' ); ?>'></span>
			</td>
			<td class="elex-fpf-settings-table-right">
				<select id="elex_weekly_days" multiple class='elex-fpf-multiple-chosen'>
					<option value="sunday"><?php esc_html_e( 'Sunday', 'elex-product-feed' ); ?></option>
					<option value="monday"><?php esc_html_e( 'Monday', 'elex-product-feed' ); ?></option>
					<option value="tuesday"><?php esc_html_e( 'Tuesday', 'elex-product-feed' ); ?></option>
					<option value="wednesday"><?php esc_html_e( 'Wednesday', 'elex-product-feed' ); ?></option>
					<option value="thursday"><?php esc_html_e( 'Thursday', 'elex-product-feed' ); ?></option>
					<option value="friday"><?php esc_html_e( 'Friday', 'elex-product-feed' ); ?></option>
					<option value="saturday"><?php esc_html_e( 'Saturday', 'elex-product-feed' ); ?></option>
				</select>
			</td>
		</tr>

		<tr id="elex_select_monthly_day">
			<td class="elex-fpf-settings-table-left">
				<?php esc_html_e( 'Select Days', 'elex-product-feed' ); ?>
			</td>
			<td class='elex-fpf-settings-table-middle'>
				<span class='woocommerce-help-tip tooltip' data-tooltip='<?php esc_html_e( 'Select the days on which you want to refresh the feed.', 'elex-product-feed' ); ?>'></span>
			</td>
			<td class="elex-fpf-settings-table-right">
				<select id="elex_monthly_days" multiple class='elex-fpf-multiple-chosen'>
				<?php
				for ( $flag = 1;$flag < 32;$flag++ ) {
					?>
						( "<option value='$flag'>$flag</option>" )
					<?php
				}
				?>
				<option value='last'><?php esc_html_e( 'last date', 'elex-product-feed' ); ?></option>
				
				</select>
			</td>
		</tr>

		<tr id="refresh_time_field">
			<td class="elex-fpf-settings-table-left">
				<?php esc_html_e( 'Select Time', 'elex-product-feed' ); ?>
			</td>
			<td class='elex-fpf-settings-table-middle'>
				<span class='woocommerce-help-tip tooltip' data-tooltip='<?php esc_html_e( 'Select the time to refresh the feed.', 'elex-product-feed' ); ?>'></span>
			</td>
			<td class="elex-fpf-settings-table-right">
				<select id="refresh_hour">
					<option value="0">12 AM</option>
					<option value="1">1 AM</option>
					<option value="2">2 AM</option>
					<option value="3">3 AM</option>
					<option value="4">4 AM</option>
					<option value="5">5 AM</option>
					<option value="6">6 AM</option>
					<option value="7">7 AM</option>
					<option value="8">8 AM</option>
					<option value="9">9 AM</option>
					<option value="10">10 AM</option>
					<option value="11">11 AM</option>
					<option value="12">12 PM</option>
					<option value="13">1 PM</option>
					<option value="14">2 PM</option>
					<option value="15">3 PM</option>
					<option value="16">4 PM</option>
					<option value="17">5 PM</option>
					<option value="18">6 PM</option>
					<option value="19">7 PM</option>
					<option value="20">8 PM</option>
					<option value="21">9 PM</option>
					<option value="22">10 PM</option>
					<option value="23">11 PM</option>
				</select>
			</td>
		</tr>
		<?php
		$is_connected_to_fb = false;
		if ( ! empty( get_option( 'elex_fb_access_token' ) ) && ! empty( get_option( 'elex_fb_business_id' ) ) ) {
			$is_connected_to_fb = true;
		}
		if ( $is_connected_to_fb ) {
			?>
		
			<tr id="elex_fb_select_catalog_field" style="display:none;">
				<td class="elex-fpf-settings-table-exclude-left">
			<?php esc_html_e( 'Select Catalog', 'elex-product-feed' ); ?>
				</td>
				<td class='elex-fpf-settings-table-exclude-middle'>
					<span class='woocommerce-help-tip tooltip' data-tooltip='<?php esc_html_e( 'Please select a catalog.', 'elex-product-feed' ); ?>'></span>
				</td>
				<td class="elex-fpf-settings-table-right">
					<select id="elex_fpf_catalogs">
			<?php
								$fb_catalogs = get_option( 'elex_fb_catalog_id' );
			if ( ! empty( $fb_catalogs ) ) {
				foreach ( $fb_catalogs as $key => $value ) {
					echo '<option value="' . esc_html( $key ) . '">' . esc_html( $value ) . '</option>';
				}
			}
			?>
					</select>
				</td>
			</tr>
			<?php
		}
		?>
		<tr id="elex_fpf_sale_country_field">
			<td class="elex-fpf-settings-table-left">
				<?php
					esc_html_e( 'Country of Sale ', 'elex-product-feed' );
				?>
			</td>
			<td class='elex-fpf-settings-table-middle'>
				<span class='woocommerce-help-tip tooltip' data-tooltip='<?php esc_html_e( 'Select the country where you want to market the products in this feed.', 'elex-product-feed' ); ?>'></span>
			</td>
			<td class="elex-fpf-settings-table-right">
				<?php
				$countries = include ELEX_FACEBOOK_FEED_PLUGIN_PATH . 'includes/elex-country-of-sale.php';
				?>
				<select id="country_of_sale" style="width:25%;">
					<option value="">-- <?php esc_html_e( 'Select Country', 'elex-product-feed' ); ?> --</option>
					<?php
					foreach ( $countries as $key => $val ) {
						?>
					<option value="<?php echo esc_attr( $key ); ?>"><?php echo esc_attr( $val ); ?></option>
											  <?php
					}
					?>
				</select>
			</td>
		</tr>
		<tr id="elex_facebook_feed_us">
			<td class="elex-fpf-settings-table-left">
				<?php esc_html_e( 'Feed for Checkout on Facebook', 'elex-product-feed' ); ?>
			</td>
			<td class='elex-fpf-settings-table-middle'>
				<span class='woocommerce-help-tip tooltip' data-tooltip='<?php esc_html_e( 'Enable this option to create a feed for checkout on Facebook.', 'elex-product-feed' ); ?>'></span>
			</td>
			<td class="elex-fpf-settings-table-right">
				<label class="switch">
					<input id="elex_sync_to_fb_for_us" type="checkbox" >
					<span class="slider round"></span>
				</label>
			</td>
		</tr>
		<tr>
			<td class="elex-fpf-settings-table-left">
				<?php 
				esc_html_e( 'Include Variations', 'elex-product-feed' );
				if ( ! elex_fb_premium() ) {
					echo '<span style="vertical-align: super;color:green;font-size:12px">[Premium]</span>';
				}
				?>
			</td>
			<td class='elex-fpf-settings-table-middle'>
				<span class='woocommerce-help-tip tooltip' data-tooltip='<?php esc_html_e( 'Enable this field to include variable products in the feed.', 'elex-product-feed' ); ?>'></span>
			</td>
			<td class="elex-fpf-settings-table-right">
				<label class="switch">
					<input id="include_variation" type="checkbox"
					<?php 
					if ( ! elex_fb_premium() ) {
						echo 'disabled';
					} 
					?>
					 >
					<span class="slider round"></span>
				</label>
			</td>
		</tr>
		<tr>
			<td class="elex-fpf-settings-table-left">
				<?php esc_html_e( 'Default Category', 'elex-product-feed' ); ?>
			</td>
			<td class='elex-fpf-settings-table-middle'>
				<span class='woocommerce-help-tip tooltip' data-tooltip='<?php esc_html_e( 'Choose a Google category. This category will be mapped to all the product categories on your WooCommerce store by default.', 'elex-product-feed' ); ?>'></span>
			</td>
			<td class="elex-fpf-settings-table-right">
				<div class="elex_google_cats_auto">
					<input class="typeahead" id="elex_default_google_category" type="text" placeholder="Please Enter a character">
				</div>
			</td>
		</tr>

		<tr id="elex_fpf_file_format_field">
			<td class="elex-fpf-settings-table-left">
				<?php esc_html_e( 'File Format', 'elex-product-feed' ); ?>
			</td>
			<td class='elex-fpf-settings-table-middle'>
				<span class='woocommerce-help-tip tooltip' data-tooltip='<?php esc_html_e( 'Select the file format to create the feed.', 'elex-product-feed' ); ?>'></span>
			</td>
			<td class="elex-fpf-settings-table-right">
				<select id="feed_file_type" style="width:25%;">
					<option value="xml">XML</option>
					<option value="csv">CSV</option>
					<option value="tsv">TSV</option>
				</select>
			</td>
		</tr>
	
		
<table>
		<tr>
			<td class="elex-fpf-settings-table-left" id="elex_fpf_advanced_settings_div">
				<a href="javaScript:void(0)" id="elex_fpf_advanced_settings"><h3><?php esc_html_e( 'Advanced Options', 'elex-product-feed' ); ?><span class="elex-fpf-icon-arrow-down"  title="View Feed" onclick="" style="display: inline-block; margin: 0px 2px -6px;"></span></h3></a>

			</td>
			<td class="elex-fpf-settings-table-left" id="elex_fpf_advanced_settings_div2">
				<a href="javaScript:void(0)" id="elex_fpf_advanced_settings2"><h3><?php esc_html_e( 'Advanced Options', 'elex-product-feed' ); ?><span class="elex-fpf-icon-arrow-up"  title="View Feed" onclick="" style="display: inline-block; margin: 0px 2px -6px;"></span></h3></a>
			</td>
		</tr>
		<tr id="elex_fpf_currency_conversion_code_div">
			<td class="elex-fpf-settings-table-left">
				<?php esc_html_e( 'Currency Code', 'elex-product-feed' ); ?>
			</td>
			<td class='elex-fpf-settings-table-middle'>
				<span class='woocommerce-help-tip tooltip' data-tooltip='<?php esc_html_e( 'Please enter 3 alphabetical codes for currency. For ex. Use USD for US dollars.', 'elex-product-feed' ); ?>'></span>
			</td>
			<td class="elex-fpf-settings-table-right">
				<input type="text" id="elex_currency_conversion_code" style="width:25%;">
			</td>
		</tr>
		<tr id="elex_fpf_currency_conversion_div">
			<td class="elex-fpf-settings-table-left">
				<?php esc_html_e( 'Currency Conversion', 'elex-product-feed' ); ?>
			</td>
			<td class='elex-fpf-settings-table-middle'>
				<span class='woocommerce-help-tip tooltip' data-tooltip='<?php esc_html_e( 'Specify the conversion rate. The value entered here will be multiplied with the original product price before creating the product feed.', 'elex-product-feed' ); ?>'></span>
			</td>
			<td class="elex-fpf-settings-table-right">
				<input type="number" onkeyup="if(this.value<0){this.value= this.value * -1}" id="elex_currency_conversion" style="width:25%;">
			</td>
		</tr>
		</table>
	</table> 
	<div style="margin-bottom: 2%;">

	<!-- syn facebook toast msg -->
	<div class="elex-fbf-toast-display-back" >
	<div class="elex-fbf-toast" style="width:60%;max-width:450px;">
		<h4>To enable sync,Please go to the Setting & connect your Facebook account</h4>
		<div class="elex-flex">
			<button class="button  " id="elex-go-to-fpf-settings-cancel">Cancel</button>
			<button class="button button-primary " id="elex-go-to-fpf-settings">Go to settings</button>
		</div>
	</div>
	</div>
	
	
	<button id="save_settings_first_page" class="botton button-large button-primary" style="float: right;"><?php esc_html_e( 'Continue', 'elex-product-feed' ); ?></button>
</div>
</div>
<?php

require_once ELEX_FACEBOOK_FEED_TEMPLATE_PATH . '/elex-settings-frontend-map-category.php';
