<div id="wpbody-content" style="margin:25px;">
    <div class="wtn-img-container">
<form name="opportunity_form" action="<?php echo esc_html( admin_url( 'admin-post.php' ) ); ?>" method="post"  enctype="multipart/form-data">

           <div class="row" style="padding:10px;">
			 <label>
			 <h1>Import Collaboration Opportunity </h1>
			  </label>		

			</div>
			
			<?php
			// echo $wpdb->last_query;
			if($_GET['status'])
			{ if($_GET['status']=='success')
				{
					$msg="imported successfully";
				}
				elseif($_GET['status']=='faild')
				{
					$msg="Operation failed. Please try again with valid data.";
				}
				elseif($_GET['status']=='CMP')
				{
					$msg="category is not matched with stakeholder.";
				}
				elseif($_GET['status']=='IFF')
				{
					$msg="invelid file format.";
				}
				else
				{
					$msg=$_GET['status'];
				}
				
				
			?>
			<div class="row" style="padding:10px;">
			 <label>
			 <h1 style="color:red"><?php echo $msg;?> </h1>
			  </label>		

			</div>
			<?php
			}
			?>
			
             <div class="row" style="padding:10px;">
			 <label>
			   <strong>Select category 1:</strong>
			   <?php
			  // print_r($resultcat1);
			   ?>
			  </label>
			  <select name="main_cate" id="main_cate" onchange="get_sub_cat(this.value,'<?=$adminUrl?>')" style="width:300px;" required>
			  <option value=".5">Select</option>
			  <?php
			  foreach($resultcat1 as $cat1)
			  {
			  ?>
			    <option value="<?=$cat1->opp_id;?>"><?=$cat1->cate_name;?></option>
			<?php
			  }
			?>
			  </select>
			   <label>
			  <strong> OR Add category 1:</strong>
			  <input type="text" name="add_name1" id="add_name1" value="">
			    <input type="button" name="addcate1" id="addcate1" value="Add1" onclick="addcate_1(this.value,'<?=$adminUrl?>')">
				<span id="altbox1"></span>
			  </label>
			  </div>
			  <div class="row" style="padding:10px;">
			 <label>
			  <strong> Select category 2:</strong>
			  </label>
			 <select name="second_cate" id="second_cate" onchange="get_sub_cat2(this.value,'<?=$adminUrl?>')" style="width:300px;" required>
			  <option value="">Select</option>
			  </select>
			  <label>
			  <strong> OR Add category 2:</strong>
			  <input type="text" name="add_name2" id="add_name2" value="">
			    <input type="button" name="addcate2" id="addcate2" value="Add2" onclick="addcate_2(this.value,'<?=$adminUrl?>')">
				<span id="altbox2"></span>
			  </label>
			  </div>
			  <div class="row" style="padding:10px;">
			 <label>
			  <strong> Select category 3:</strong>
			  </label>
			  <select name="thr_cate" id="thr_cate" style="width:300px;" onchange="get_opp_data(this.value,'<?=$adminUrl?>')">
			  <option value="">Select</option>
			  </select>
			  <label>
			  <strong> OR Add category 3:</strong>
			  <input type="text" name="add_name" id="add_name" value="">
			    <input type="button" name="addcate" id="addcate" value="Add" onclick="addcate_3(this.value,'<?=$adminUrl?>')">
				<span id="altbox"></span>
			  </label>
			  </div>
			    <div class="row" style="padding:10px;">
				Stakeholder:<input type="text" name="stocholder" id="stocholder" value="">
				Unit:<input type="text" name="Unit" id="Unit" value="">
				Website:<input type="text" name="Website" id="Website" value="">
				Group:<input type="text" name="Group" id="Group" value="">
				<input type="button" name="addentry" id="addentry" value="Add Entry" onclick="addentry(this.value,'<?=$adminUrl?>')">
				</div>
			   <div class="row" style="padding:10px;">
			 <label>
			  <strong> Select CSV file (TAb Delimited):</strong>
			  </label>
			  <input id="fileToUpload" name="fileToUpload" type="file"> 
			  </div>
			   <div class="row" style="padding:10px;">
			 <label>
			  <strong> What to do:</strong>
			  </label>
			 <strong> Append:</strong><input id="what_to_do" name="what_to_do" type="radio" value="append" checked> 
			 <strong> Add:(It will remove previous records)</strong><input id="what_to_do" name="what_to_do" type="radio" value="add"> 
			  </div>
			  
			<div class="row" style="padding:10px;">
			 <label>
			  <strong> File format:</strong>
			  </label>
			 <span style="color:red;"> 1.Stakeholder 2.Unit 3.Website 4.Group(Leave blank if not exit.)</span>

			</div>
        <?php
            wp_nonce_field('xs-settings-save', 'xs-custom-message' );
            submit_button();
        ?>
		
</form>
	<div class="row"  id="opp_data" style="padding: 15px; max-height: calc(405px); overflow-y: scroll; width:700px;">
	Existing data will display here.
	</div>
		</div>
	</div>
	


<script>
function get_sub_cat(id_is,adurl)
{
	event.preventDefault();
	
 jQuery.ajax({	    
        type: "post",
        url:adurl,
        data: {
            action: 'mark_message_as_read',
            // add your parameters here
             id: id_is
        },
        success: function (output) {
           document.getElementById('second_cate').innerHTML=output.data
        }
        });
}
function get_sub_cat2(id_is,adurl)
{
	event.preventDefault();
	
 jQuery.ajax({	    
        type: "post",
        url: adurl,
        data: {
            action: 'mark_message_as_read',
            // add your parameters here
             id: id_is
        },
        success: function (output) {
           document.getElementById('thr_cate').innerHTML=output.data
        }
        });
}
function get_opp_data(id_is,adurl)
{
  event.preventDefault();
	var m_cat=document.getElementById('main_cate').value;
	var s_cat=document.getElementById('second_cate').value;
 jQuery.ajax({	    
        type: "post",
        url: adurl,
        data: {
            action: 'geopportunity_data',
            // add your parameters here
             id: id_is,
			 cat1:m_cat,
			 cat2:s_cat,
        },
        success: function (output) {
           document.getElementById('opp_data').innerHTML=output.data
        }
        });	
}

function addcate_3(name_val,adurl)
{
	event.preventDefault();
	var s_cat=document.getElementById('second_cate').value;
	var add_name=document.getElementById('add_name').value;
	if(s_cat=='')
	{
		alert('Please select category');
		return false;
	}
	if(name_val=='')
	{
		alert('Please enter name');
		return false;
	}
 jQuery.ajax({	    
        type: "post",
        url: adurl,
        data: {
            action: 'add_cat_3',
            // add your parameters here
             name: add_name,
			 cat:s_cat
        },
        success: function (output) {
           document.getElementById('altbox').innerHTML='Added successfully';
        }
        });
}

function addcate_2(name_val,adurl)
{
	event.preventDefault();
	var s_cat=document.getElementById('main_cate').value;
	var add_name=document.getElementById('add_name2').value;
	if(s_cat=='')
	{
		alert('Please select main category');
		return false;
	}
	if(name_val=='')
	{
		alert('Please enter name');
		return false;
	}
 jQuery.ajax({	    
        type: "post",
        url: adurl,
        data: {
            action: 'add_cat_2',
            // add your parameters here
             name: add_name,
			 cat:s_cat
        },
        success: function (output) {
           document.getElementById('altbox2').innerHTML='Added successfully';
        }
        });
}
function addcate_1(name_val,adurl)
{
	event.preventDefault();
	var s_cat=0;
	var add_name=document.getElementById('add_name1').value;
	
	if(name_val=='')
	{
		alert('Please enter name');
		return false;
	}
 jQuery.ajax({	    
        type: "post",
        url: adurl,
        data: {
            action: 'add_cat_1',
            // add your parameters here
             name: add_name,
			 cat:s_cat
        },
        success: function (output) {
           document.getElementById('altbox1').innerHTML='Added successfully';
        }
        });
}
</script>