<div class="wrap wpcsr-content">
	<h1 class="wp-heading-inline"><?php esc_html_e('Shipment Rates', 'wpcargo-shipment-rate' ); ?></h1>
	<div class="column-wrap" style="margin:0;">
		<div class="column two-thirds first postbox">
			<div class="wpcsr-form-section">
			<h4><?php esc_html_e('Add a new shipment rate', 'wpcargo-shipment-rate' ); ?></h4>
				<form id="add-shipment-rate-form" class="wpcsr-form">
					<table class="form-table wpcsr_add_table">
						<?php foreach( wpcsr_rate_fields() as $wpcsr_rate_fields ): ?>
							<tr>
								<th><label><?php echo $wpcsr_rate_fields['label']; ?></label></th>
								<td>
									<?php
										if( $wpcsr_rate_fields['field_type'] == 'text' ){
											$placeholder = "";
											if( $wpcsr_rate_fields['field_key'] == 'logo_url' ){
												$placeholder = "https://mydomain.com/mylogo.png";
											}
											echo sprintf(
												'<input type="text" name="%s" id="wpcsr_%s" class="wpcsr_detail wpcsr_%s" value="" placeholder="%s" />',
												$wpcsr_rate_fields['field_key'],
												$wpcsr_rate_fields['field_key'],
												$wpcsr_rate_fields['field_key'],
												$placeholder
											);
											if( $wpcsr_rate_fields['field_key'] == 'logo_url' ){
												?>
													<a href="#" class="wpcsr-select-logo button button-small button-secondary" style="margin-top:8px;"><?php _e('Add Logo', 'wpcargo-shipment-rate' ); ?></a>
												<?php
											}
											if( $wpcsr_rate_fields['field_key'] == 'coverage' ){
												echo '<p class="description"><strong>Note:</strong>This value will be  added to your Insurance coverage text, use this shortcode <strong>'.wpcsr_get_insurance_coverage_shortcode().'</strong> to retrieve the value. You can update your Insurance Coverage content in Shipping Rate settings.</p>';
											}
										}elseif( $wpcsr_rate_fields['field_type'] == 'select' ){
											$multiple = ( $wpcsr_rate_fields['field_key'] == 'user_group' ) ? 'multiple' : '';
											echo sprintf(
												'<select name="%s" id="wpcsr_%s" class="wpcsr_detail wpcsr_%s" %s>',
												$wpcsr_rate_fields['field_key'],
												$wpcsr_rate_fields['field_key'],
												$wpcsr_rate_fields['field_key'],
												$multiple
											);
											foreach( $wpcsr_rate_fields['options'] as $data ){
												if( $wpcsr_rate_fields['field_key'] == 'zone_id' ){
													$data_value = $data->zone_id;
													$data_label = $data->label;
												}elseif( $wpcsr_rate_fields['field_key'] == 'delivery_id' ){
													$data_value = $data->id;
													$data_label = $data->title;
												}elseif( $wpcsr_rate_fields['field_key'] == 'user_group' ){
													$data_value = $data->user_group_id;
													$data_label = $data->label;
												}
												echo sprintf(
													'<option value="%s">%s</option>',
													$data_value,
													$data_label
												);
											}
											echo '</select>';
										}elseif( $wpcsr_rate_fields['field_type'] == 'radio' ){
											?><ul id="wpcsr_opt_<?php echo $wpcsr_rate_fields['id'] ?>"><?php
											foreach( $wpcsr_rate_fields['options'] as $value => $label ){
												?><li><?php
												echo sprintf(
													'<label><input type="radio" name="%s" value="%s" class="wpcsr_detail wpcsr_%s">%s</label>',
													$wpcsr_rate_fields['field_key'],
													$value,
													$wpcsr_rate_fields['field_key'],
													$label
												);
												?></li><?php
											}
											?><ul/><?php
										}elseif( $wpcsr_rate_fields['field_type'] == 'checkbox' ){
											foreach( $wpcsr_rate_fields['options'] as $value => $label ){
												echo sprintf(
													'<label><input type="checkbox" name="%s" value="%s" class="wpcsr_detail wpcsr_%s">%s</label><br>',
													$wpcsr_rate_fields['field_key'],
													$label,
													$wpcsr_rate_fields['field_key'],
													$label
												);
											}
										}elseif( $wpcsr_rate_fields['field_type'] == 'textarea' ){
											echo sprintf(
												'<textarea rows="6" name="%s" id="wpcsr_%s" class="wpcsr_detail wpcsr_%s" value=""></textarea>',
												$wpcsr_rate_fields['field_key'],
												$wpcsr_rate_fields['field_key'],
												$wpcsr_rate_fields['field_key']
											);
										}
									?>
								</td>
							</tr>
						<?php endforeach; ?>
						<tr>
							<td></td>
							<td><input type="submit" id="wpcsr_submit" class="wpcsr_btn button button-primary button-large wpcsr_submit" value="<?php esc_html_e('Add Shipment Rate', 'wpcargo-shipment-rate' ); ?>" /></td>
						</tr>
					</table>
				</form>
			</div>
		</div>
		<div class="column one-third">
			<div class="wpcsr-form-section postbox">
				<h4><?php esc_html_e('Import Shipment Rates', 'wpcargo-shipment-rate' ); ?></h4>
				<p><a href="#" id="download-ratecsv-template"><?php esc_html_e('Download', 'wpcargo-shipment-rate' ); ?></a> <?php esc_html_e('.csv import template.', 'wpcargo-shipment-rate' ); ?></p>
				<form id="import-rate-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="rate_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="shipment_rate" />
						<input type="submit" id="import_rate" class="button button-primary button-large" value="<?php esc_html_e('Import Shipment Rates', 'wpcargo-shipment-rate' ); ?>" />
					</p>
				</form>
				<?php
					$templatename_unique = "shipping-rate-template.csv";
					$csv_file 		= fopen($templatename_unique, "w");
					$file_header = array();
					$file_header[] = 'Rate ID';
					foreach( wpcsr_rate_fields() as $wpcsr_rate_fields ){
						$file_header[] = $wpcsr_rate_fields['label'];
					}
					fputcsv( $csv_file, $file_header );
					fclose($csv_file);
					$flat_max_weight = 0;
				?>
				<script>
					jQuery(document).ready(function($) {
						$('#download-ratecsv-template').on('click', function(e){
							e.preventDefault();
							window.location='<?php echo $templatename_unique; ?>';
						});
					});
				</script>
			</div>
			<div class="wpcsr-form-section postbox">
				<h4><?php esc_html_e('Export Shipment Rate', 'wpcargo-shipment-rate' ); ?></h4>
				<a id="wpcsr-export-rate" href="#" class="button button-primary button-large"><?php esc_html_e('Download Shipment Rates', 'wpcargo-shipment-rate' ); ?></a>
			</div>
		</div>
	</div>
	<div class="wpcsr-table-section postbox">
		<h1 style="margin-bottom:18px;"><?php _e('FORMULA:', 'wpcargo-shipment-rate' ); ?></h1>
		<p style="margin-top: 0; color: #d30000; font-size: 1rem" class="description"><strong><?php echo wpcsr_rate_type_weight_cost_label(); ?>:</strong></p>
		<p style="margin-top: 0;" class="description">
			<?php
				echo sprintf(
					'<strong> %s </strong> = (%s) x (%s)',
					esc_html__('Total Rate', 'wpcargo-shipment-rate' ),
					esc_html__('Weight Input', 'wpcargo-shipment-rate' ),
					wpcsr_weight_cost_variation_label()
				);
			?>
		</p>
		<p style="margin-top: 0; color: #d30000; font-size: 1rem;" class="description"><strong><?php echo wpcsr_rate_type_flat_label(); ?>:</strong></p>
		<p style="margin-top: 0; margin-bottom: 18px;" class="description">
			<?php 
			echo sprintf(
				'<strong> %s </strong> = %s + ( ( %s - %s ) x (%s) )',
				esc_html__('Total Rate', 'wpcargo-shipment-rate' ),
				esc_html__('Flat Rate', 'wpcargo-shipment-rate' ),
				esc_html__('(Weight Input)', 'wpcargo-shipment-rate' ),
				esc_html__('(Min Weight)', 'wpcargo-shipment-rate' ),
				esc_html__('Exceeding Cost After Min Weight', 'wpcargo-shipment-rate' )
			);
			?>
		</p>
		<p style="margin-top: 0; color: #d30000; font-size: 1rem;" class="description"><strong><?php echo wpcsr_rate_type_qty_cost_label(); ?>:</strong></p>
		<p style="margin-top: 0; margin-bottom: 18px;" class="description">
			<?php 
			echo sprintf(
				'<strong> %s </strong> = %s x %s',
				esc_html__('Total Rate', 'wpcargo-shipment-rate' ),
				esc_html__('Qty.', 'wpcargo-shipment-rate' ),
				esc_html__('Cost', 'wpcargo-shipment-rate' )
			);
			?>
		</p>
	</div>
	<div class="wpcsr-table-section wpcsr-location-table postbox" style="overflow-x: scroll;">
		<div class="wpcsr-search-section">
			<input type="text" class="wpcsr-search-table">
			<input type="button" class="wpcsr-search-button" value="Search">
		</div>
		<a href="#" data-section="rate" class="wpcsrate-bulk-delete delete-btn button button-medium" style="margin-bottom:18px;"><?php esc_html_e('Bulk Delete', 'wpcargo-shipment-rate' ); ?></a>
		<table class="wpcsr-table list-table">
			<thead>
				<th class="tbl-head bulk-action"><input id="checkall" type="checkbox"></th>
				<th class="tbl-head"><?php _e('ID', 'wpcargo-shipment-rate' ); ?></th>
				<?php foreach( wpcsr_rate_fields() as $wpcsr_rate_fields ): ?>
					<th class="tbl-head"><?php echo $wpcsr_rate_fields['label']; ?></th>
				<?php endforeach; ?>
				<th class="tbl-head"><?php esc_html_e('Actions', 'wpcargo-shipment-rate' ); ?></th>
			</thead>
			<tbody>
				<?php foreach($wpcsr_rates as $data):?>
					<?php
						$zone_id 		= $data->zone_id;
						$wpcsr_label 	= ( get_wpcsr_zone_data($zone_id, 'label') ) ? : '' ;
						$delivery_type 	= get_wpcsr_delivery_by_id( $data->delivery_id );
						if( !empty( $delivery_type ) ){
							$delivery_type = $delivery_type->title;
						}
						$rate_type = ( $data->rate_type == '0' ) ? wpcsr_rate_type_flat_label() : wpcsr_rate_type_weight_cost_label();
					?>
					<tr class="tbl-data">
						<input type="hidden" >
						<td><input type="checkbox" class="bulk_id" name="rate_bulk_action[]" value="<?php echo $data->id;?>"></td>
						<td><?php echo $data->id;?></td>
						<?php foreach( wpcsr_rate_fields() as $wpcsr_rate_fields ): ?>
							<?php
								$name = $wpcsr_rate_fields['field_key'];
								$value = '';
								if( $wpcsr_rate_fields['field_key'] == 'user_group' ){
									$unserialize_value = unserialize( $data->$name );
									$user_group = array();
									if( !empty( $unserialize_value ) ){
										foreach( $unserialize_value as $id ){
											$get_user_group = get_wpcsr_user_group_by_id( $id );
											if( !empty( $get_user_group ) ){
												$user_group[] = $get_user_group->label;
											}
										}
										$value = join( ', ', $user_group );
									}
								}elseif( $wpcsr_rate_fields['field_key'] == 'delivery_id' ){
									$delivery_type 	= get_wpcsr_delivery_by_id( $data->$name );
									if( !empty( $delivery_type ) ){
										$value = $delivery_type->title;
									}
								}elseif( $wpcsr_rate_fields['field_key'] == 'rate_type' ){
									$value = ( $data->$name == '0' ) ? wpcsr_rate_type_flat_label() : wpcsr_rate_type_weight_cost_label();
								}elseif( $wpcsr_rate_fields['field_key'] == 'piece_type' ){
									$value = $data->$name;
								}elseif( $wpcsr_rate_fields['field_key'] == 'zone_id' ){
									$value = get_wpcsr_zone_data( $data->$name, 'label' );
								}elseif( $wpcsr_rate_fields['field_key'] == 'logo_url' ){
									$value = $data->$name ? '<img src="'.$data->$name.'" width="36px">' : '';
								}elseif( 
									$wpcsr_rate_fields['field_key'] == 'min_weight' 
									|| $wpcsr_rate_fields['field_key'] == 'max_weight' 
									|| $wpcsr_rate_fields['field_key'] == 'price' 
									|| $wpcsr_rate_fields['field_key'] == 'weight_cost' 
									|| $wpcsr_rate_fields['field_key'] == 'rate_protection' 
									|| $wpcsr_rate_fields['field_key'] == 'coverage' 
								){
									$value = format_wpcsr_currency( $data->$name, false );
								}else{
									$value = $data->$name;
								}
							?>
							<td><?php echo $value; ?></td>
						<?php endforeach; ?>
						<td>
							<span class="dashicons dashicons-edit edit-rate" data-section="rate" data-id="<?php echo $data->id;?>"></span>
							<span class="dashicons dashicons-trash wpcsr-delete" data-section="rate" data-id="<?php echo $data->id;?>" ></span>
						</td>
					</tr>
				<?php endforeach;?>
			</tbody>
		</table>
		<p><strong><i>

				<?php
				printf( '%s : %s = ** %s / %s / %s',
					__( 'Note', 'wpcargo-shipment-rate' ),	
					wpcsr_rate_variation_label(),	
					__( 'Flat Rate', 'wpcargo-shipment-rate' ),
					__( 'Cost per Weight', 'wpcargo-shipment-rate' ),
					__( 'Cost per QTY', 'wpcargo-shipment-rate' ),
				);
				?>
			</i></strong>
		</p>
		<a href="#" data-section="rate" class="wpcsrate-bulk-delete delete-btn button button-medium"><?php esc_html_e('Bulk Delete', 'wpcargo-shipment-rate' ); ?></a>
		<?php wpcsr_pagination( $pagelink, $page_count, $page ); ?>
	</div>
	</div>
	<div id="shipment-rate-edit" class="modal" style="z-index: 999 !important;">
		<div class="modal-content">
			<div class="modal-title">
				<p><?php esc_html_e('Update Shipment Rate', 'wpcargo-shipment-rate' ); ?>
				<span class="close-btn">&times;</span></p>
			</div>
			<div class="modal-body">
				<form id="update-shipment-rate" class="wpcsr-form">
				</form>
			</div>
		</div>
	</div>
<script>
jQuery(document).ready(function($){
	var file_frame;
	$('body').on('click', '.wpcsr-select-logo', function( event ){
		var currElem = $(this);
		event.preventDefault();
		if ( file_frame ) {
			file_frame.open();
			return;                        }
			// Create the media frame.
			file_frame = wp.media.frames.file_frame = wp.media({
				title: $( this ).data( 'uploader_title' ),
				button: {
					text: $( this ).data( 'uploader_button_text' ),
				},
				multiple: false
				// Set to true to allow multiple files to be selected
			});
			// When an image is selected, run a callback.
			file_frame.on( 'select', function() {
			// We set multiple to false so only get one image from the uploader
			attachment = file_frame.state().get('selection').first().toJSON();
			// Do something with attachment.id and/or attachment.url here
			// $('#image-chooser').val( attachment.url );
			currElem.parent().find('[type="text"]').val( attachment.url );
		});
		// Finally, open the modal
		file_frame.open();
	});
});
</script>