<div class="wrap wpcsr-content">
	<h1 class="wp-heading-inline"><?php echo wpcsr_shipment_zones_label(); ?></h1>
	<div class="column-wrap">
		<div class="column one-third">
			<div class="wpcsr-form-section">
				<form id="add-zone-form" class="wpcsr-form">
						<table class="form-table wpcsr_add_table">
							<tr>
								<th><label><?php echo wpcsr_zone_name_label(); ?></label></th>
								<td><input type="text" name="wpcsr_zone" id="wpcsr_zone" class="wpcsr_detail wpcsr_zone" value="" required="required" /></td>
							</tr>
							<tr>
								<th valign="top"><label><?php echo wpcsr_origin_label(); ?></label></th>
								<td>
									<?php if( !empty( get_wpcsr_location() ) ): ?>
										<select id="wpcsr_zone_from" class="wpcsr_from wpcsr_zone" name="wpcsr_zone_from">
										<?php foreach(get_wpcsr_location() as $location): ?>
											<option value="<?php echo $location->location_id;?>" /><?php echo $location->location;?></option>
										<?php endforeach?>
										</select>
									<?php else: ?>
										<?php echo wpcsr_no_location_found_label(); ?>
									<?php endif; ?>
								</td>
							</tr>
							<tr>
								<th valign="top"><label><?php echo wpcsr_destination_label(); ?></label></th>
								<td>
									<?php if( !empty( get_wpcsr_location() ) ): ?>
										<select id="wpcsr_zone_location" class="wpcsr_zone_location wpcsr_zone" name="wpcsr_zone_location" multiple>
										<?php foreach(get_wpcsr_location() as $location): ?>
											<option value="<?php echo $location->location_id;?>" /><?php echo $location->location;?></option>
										<?php endforeach?>
										</select>
									<?php else: ?>
										<?php echo wpcsr_no_location_found_label(); ?>
									<?php endif; ?>
								</td>
							</tr>
							<tr>
								<td></td>
								<td><input type="submit" id="wpcsr_submit_zone" class="button button-primary button-large wpcsr_submit" value="<?php echo wpcsr_add_zone_found_label(); ?>" /></td>
							</tr>
						</table>
				</form>
			</div>
			<div class="wpcsr-form-section">
				<h4><?php esc_html_e('Import Zone', 'wpcargo-shipment-rate' ); ?></h4>
				<p><a href="#" id="download-zonecsv-template"><?php esc_html_e('Download', 'wpcargo-shipment-rate' ); ?></a> <?php esc_html_e('.csv import template.', 'wpcargo-shipment-rate' ); ?></p>
				<form id="import-zone-form" class="wpcsr-form" method="post" enctype="multipart/form-data">
					<?php wp_nonce_field( 'wpc_import_ie_results_callback', 'wpc_ie_nonce' ); ?>
					<p><input type="file" name="shipment_file" id="zone_file"/></p>
					<p><label for="compatibility"><?php esc_html_e('Delimiter', 'wpcargo-shipment-rate' ); ?></label><input id="compatibility" type="text" name="compatibility" value="," size="2"></p>
					<p class="description"><?php esc_html_e('Changed the delimiter if you file cannot be read by the system, based on your upload file delimiter.', 'wpcargo-shipment-rate' ); ?></p>
					<p>
						<input type="hidden" name="section" value="zone" />
						<input type="submit" id="import_zone" class="button button-primary button-large wpcsr_submit" value="<?php esc_html_e('Import Zones', 'wpcargo-shipment-rate' ); ?>" />
					</p>
				</form>
				<?php
				$templatename_unique = "shipping-zone-template.csv";
				$csv_file 		= fopen($templatename_unique, "w");
				$file_header 	= array( 
					wpcsr_zone_id_label(),
					wpcsr_zone_variation_label(), 
					wpcsr_origin_label(), 
					wpcsr_locations_label(), 
				);
				fputcsv( $csv_file, $file_header );
				fclose($csv_file);
				?>
				<script>
				jQuery(document).ready(function($) {
					$('#download-zonecsv-template').on('click', function(e){
						e.preventDefault();
						window.location='<?php echo $templatename_unique; ?>';
					});
				});
				</script>
			</div>
			<div class="wpcsr-form-section">
				<h4><?php esc_html_e('Export Zone', 'wpcargo-shipment-rate' ); ?></h4>
				<a id="wpcsr-export-zone" href="#" class="button button-primary button-large"><?php esc_html_e('Download Zones', 'wpcargo-shipment-rate' ); ?></a>
			</div>
		</div>
		<div class="column two-thirds">
			<div class="wpcsr-table-section wpcsr-zone-table">
				<div class="wpcsr-search-section">
					<input type="text" class="wpcsr-search-table">
					<input type="button" class="wpcsr-search-button" value="Search">
				</div>
				<?php wpcsr_pagination( $pagelink, $page_count, $page ); ?>
				<a href="#" data-section="zone" class="wpcsrate-bulk-delete delete-btn button button-medium"><?php esc_html_e('Delete', 'wpcargo-shipment-rate' ); ?></a>
				<table class="wpcsr-table zone-table">
					<thead>
						<tr>
							<th class="tbl-head bulk-action"><input id="checkall" type="checkbox"></th>
							<th class="tbl-head"><?php esc_html_e('Zone Name', 'wpcargo-shipment-rate' ); ?></th>
							<th class="tbl-head"><?php esc_html_e('From', 'wpcargo-shipment-rate' ); ?></th>
							<th class="tbl-head"><?php esc_html_e('Destinations', 'wpcargo-shipment-rate' ); ?></th>
							<th class="tbl-head"><?php esc_html_e('Actions', 'wpcargo-shipment-rate' ); ?></th>
						</tr>
					</thead>
					<tbody>
						<?php if( !empty( $wpcsr_zones ) ): ?>
							<?php foreach($wpcsr_zones as $data):?>
								<?php
									$zone_location = maybe_unserialize( $data->zone_location );
									$names = array();
									if( !empty( $zone_location ) ){
										foreach ($zone_location as $location_id ) {
											$location_name = get_wpcsr_loc_data( $location_id, 'location' );
											$names[] =$location_name;
										}
									}
									$join_names =  !empty($names)? join(', ', $names) : '';
									$zone = get_wpcsr_location_by_id($data->origin);
								?>
								<tr class="tbl-data tbl-data-<?php echo $data->zone_id;?>">
									<td><input type="checkbox" class="bulk_id" name="rate_bulk_action[]" value="<?php echo $data->zone_id;?>"></td>
									<td class="zone-name"><?php echo !empty($data)? $data->label : ''; ?></td>
									<td class="zone-name"><?php echo !empty($zone)? $zone->location : ''; ?></td>
									<td class="zone-locations"><?php echo $join_names; ?></td>
									<td>
										<span class="dashicons dashicons-edit wpcsr-edit edit-zone" data-section="zone" data-id="<?php echo $data->zone_id;?>"></span>
										<span class="dashicons dashicons-trash wpcsr-delete" data-section="zone" data-id="<?php echo $data->zone_id;?>" ></span>
									</td>
								</tr>
							<?php endforeach;?>
						<?php endif; ?>
					</tbody>
				</table>
				<a href="#" data-section="zone" class="wpcsrate-bulk-delete delete-btn button button-medium"><?php esc_html_e('Delete', 'wpcargo-shipment-rate' ); ?></a>
				<?php wpcsr_pagination( $pagelink, $page_count, $page ); ?>
			</div>
		</div>
	</div>
</div>
<div id="zone-edit" class="modal">
	<div class="modal-content">
		<div class="modal-title">
			<p><?php esc_html_e('Edit Zone', 'wpcargo-shipment-rate' ); ?>
			<span class="close-btn">&times;</span></p>
		</div>
		<div class="modal-body">
			<form id="update-zone" class="wpcsr-form edit-zone-form">
			</form>
		</div>
	</div>
</div>