@extends('layouts.master')
@section('title', $title)
@section('content')
<link href="{{ asset('css/Settingadmin1.css') }}" rel="stylesheet">
 <div class="setting_admin">
      <div class="heading">
        <img src="{{ asset('images/process.png') }}" alt="" />
        <h1 style="margin: 24px 23px;
    font-size: 36px;
    font-weight: 500;">Settings: Administation</h1>
      </div>
      <div class="block_two">
        <div class="">
          <h1 style="font-size: 31px;color: #050d9e;font-weight: 700; margin-bottom: 30px; margin-top: 32px;">Import Data - Step 3</h1>
		  <!--div class="block_one_left_innerContainer title">
		  <h3 style="font-size:22px !important;">CATS may discard or fail to read some of the submitted data which it does not understand how to use. Do not discard the original data!</h3>
		  </div-->
          <div class="block_one_left_innerContainer">
		    <h3>Import Into: {{$typeOfImport}}</h3>
			
            <div class="innerContainer_checkboxs">
				<div class="vancy" style="width:100%;padding: 27px;">
					<form name="dataImport" method="post" action="{{route('settings.dataImportScreenRecordSave')}}" enctype="multipart/form-data" style="width:100%">
					@csrf
					    <input type="hidden" name="typeOfImport" value="{{$typeOfImport}}">
						<table class="editTable" width="800" id="importHide10">
							<tbody> 
								@foreach($headers as $key=>$sheetTitle)
								<tr>
									<td class="tdVertical">
									{{$sheetTitle}}</td>
									<td class="tdData">
										<a href="javascript:void(0);">
											<img src="{{ asset('images/contact.gif') }}" alt="" border="0">
										</a>
										&nbsp;
										<select id="importType{{$key}}" name="importType{{$key}}" class="inputbox" onchange="evaluateFieldSelection({{$key}});" style="height: 36px;width: 300px;
    margin-left: 15px; border-radius: 5px;">
											<option value="ni" >Do not import.</option>
											<option value="cats" @if(in_array(ucwords($sheetTitle),$CombinedArray))
											selected
											@endif>Import as a {{$typeOfImport}} field.</option>
											<option value="foreign">Add field to Extra Fields and Import.</option>                          
										</select>
										
										<span id="importIntoSpan{{$key}}" 
										
										@if(!in_array(ucwords($sheetTitle),$CombinedArray))
											style="display:none;"
										@endif
											>
											&nbsp;{{$typeOfImport}} Field:&nbsp;
											<select id="importIntoField{{$key}}" name="importIntoField{{$key}}" class="inputbox" style="height: 36px;width:180px;margin-left: 15px; border-radius: 5px;">
												@foreach($CombinedArray as $keyValue=>$options)
													<option value="{{$keyValue}}" @if(ucwords($sheetTitle) == ucwords($options)) selected @endif>{{ucfirst($options)}}</option>
												@endforeach
											</select>
										</span>
									
									</td>
									
								</tr>
								
								@endforeach
							</tbody>
						</table>
						<table>
							<tr>
								<td>
								   
									<input type="reset" class="button btn" name="reset" id="importHide8" value="Reset">
									<input type="submit" class="button btn" name="submit" id="importHide7" value="Next - Import data">
								</td>
								
							</tr>
						</table>
					</form>
				</div>
			</div>
            
          </div>
      
        </div>
     
@endsection
<style>
.block_one_left_innerContainer.title {margin: 10px;padding: 10px!important;border-radius: 5px !important; margin-bottom: 31px;}
.vancy1 {width:100%;height:20px;}
.btn{       width: 148px!important; 
			margin: 11px 23px!important;
			border-radius: 5px!important;
			background-color: #6610f2!important;
			color: white!important;
			border-color: transparent!important;}
.padding {padding:27px;}
</style>
<script>
function evaluateFieldSelection(key)
{
	var selectedValue = $('#importType'+key). find(':selected').val();
	if(selectedValue == 'ni')
	{
		$('#importIntoSpan'+key).css('display','none');
		
	}
	else if(selectedValue == 'cats')
	{
		$('#importIntoSpan'+key).css('display','');
		
	}
	else if(selectedValue == 'foreign')
	{
		$('#importIntoSpan'+key).css('display','none');
		
	}
	
}
</script>