@extends('layouts.master')
    
@section('title', 'Project Form')
    
@section('style')
	<style>
		.project-page-title{
			margin-bottom: 28px;
		}

		.project-form-shell{
			background: #fff;
			border-radius: 24px;
			box-shadow: 0 20px 60px rgba(30,34,40,.08);
			border: 1px solid rgba(120,90,255,.12);
			overflow: hidden;
		}

		.project-form-topbar{
			padding: 28px 32px;
			background: linear-gradient(135deg,#f7f2ff,#f4f9ff);
			border-bottom: 1px solid rgba(120,90,255,.12);
		}

		.project-form-topbar h1{
			margin:0;
			font-weight:800;
			background:linear-gradient(90deg,#7c3aed,#2563eb);
			-webkit-background-clip:text;
			-webkit-text-fill-color:transparent;
		}

		.project-form-topbar p{
			margin:6px 0 0;
			color:#6b7280;
		}

		.project-form-body{
			padding: 32px;
		}

		.project-section{
			margin-bottom: 38px;
			padding-bottom: 28px;
			border-bottom: 1px solid #edf0f7;
		}

		.project-section:last-child{
			border-bottom: none;
			margin-bottom: 0;
			padding-bottom: 0;
		}

		.project-section-header{
			display:flex;
			align-items:center;
			gap:14px;
			margin-bottom:22px;
		}

		.project-section-icon{
			width:46px;
			height:46px;
			border-radius:16px;
			display:flex;
			align-items:center;
			justify-content:center;
			color:#fff;
			font-size:22px;
			background:linear-gradient(135deg,#7c3aed,#3b82f6);
			box-shadow:0 12px 24px rgba(99,102,241,.22);
		}

		.project-section-title h4{
			margin:0;
			font-size:20px;
			font-weight:800;
			color:#1f2937;
		}

		.project-section-title p{
			margin:2px 0 0;
			font-size:16px;
			color:#7b8194;
		}

		.project-field-label{
			font-size:16px;
			font-weight:700;
			color:#374151;
			margin-bottom:8px;
		}

		.project-field-label span{
			color:#7c3aed;
		}

		.project-form-body .form-control,
		.project-form-body .form-select{
			min-height:52px;
			border:1.5px solid #dfe4f0;
			border-radius:14px;
			background-color:#fff;
			box-shadow:none;
			color:#1f2937;
			font-weight:500;
		}

		.project-form-body .form-control:focus,
		.project-form-body .form-select:focus{
			border-color:#7c3aed;
			box-shadow:0 0 0 .18rem rgba(124,58,237,.10);
		}

		.project-form-body .form-floating > label{
			color:#6b7280;
			font-weight:500;
		}

		.member-box{
			background:linear-gradient(135deg,#fbf9ff,#f8fbff);
			border:1px solid #e5dcff;
			border-radius:20px;
			padding:22px;
			margin-bottom:16px;
		}

		.member-box-title{
			font-weight:800;
			color:#4f46e5;
			margin-bottom:16px;
			display:flex;
			align-items:center;
			gap:8px;
		}
		
		.member-box-title i{
			color:#4f46e5 !important;
		}

		.action-bar{
			margin-top:30px;
			padding-top:24px;
			display:flex;
			justify-content:space-between;
			align-items:center;
			gap:16px;
			flex-wrap:wrap;
		}

		.required-note{
			color:#6b7280;
			font-size:16px;
			margin:0;
		}

		.btn-submit-project{
			padding:14px 36px;
			font-size:16px;
			font-weight:700;
			color:#fff;
			border:none;
			border-radius:999px;

			background:linear-gradient(135deg,#7c3aed,#2563eb);

			box-shadow:
				0 12px 30px rgba(99,102,241,.35);

			transition:all .25s ease;
		}

		.btn-submit-project:hover{
			transform:translateY(-2px);
			box-shadow:
				0 18px 40px rgba(99,102,241,.45);

			background:linear-gradient(135deg,#6d28d9,#1d4ed8);
		}

		.btn-submit-project:active{
			transform:translateY(0);
		}
		
		/* PI */
		
		.researcher-row{
			align-items:center;
		}

		.researcher-row + .researcher-row{
			margin-top:2px;
		}

		.portion-summary-box{
			margin-top:16px;
			padding:14px 18px;
			border-radius:14px;
			background:#f7f2ff;
			border:1px solid #e5dcff;
			color:#4b5563;
			font-size:15px;
		}

		.portion-summary-box strong{
			color:#1f2937;
		}

		.portion-summary-box.is-valid{
			background:#ecfdf5;
			border-color:#86efac;
			color:#166534;
		}

		.portion-summary-box.is-warning{
			background:#fff7ed;
			border-color:#fdba74;
			color:#9a3412;
		}

		.portion-summary-box.is-error{
			background:#fef2f2;
			border-color:#fca5a5;
			color:#991b1b;
		}
		
		/* select 2 */
		
		.select2-container{
			width:100% !important;
		}

		.select2-container--default .select2-selection--single{
			height:52px !important;
			border:1.5px solid #dfe4f0 !important;
			border-radius:14px !important;
			background:#fff !important;
			box-shadow:none !important;
			display:flex !important;
			align-items:center !important;
		}

		.select2-container--default .select2-selection--single .select2-selection__rendered{
			color:#1f2937 !important;
			font-weight:500 !important;
			
			line-height:normal !important;
		}

		.select2-container--default .select2-selection--single .select2-selection__clear,
		.select2-container--default .select2-selection--single .select2-selection__arrow{
			display:none !important;
		}
	</style>
@endsection
    
@section('script')
	<script>
		$(document).ready(function(){
			
			// Funding
			@if($project_id == '')
				$('#box_project_grant').hide();
			@endif
			
			$('#project_categories').change(function(){
				var project_categories = $('#project_categories').val();
				
				if(project_categories == 'External'){
					$('#box_project_grant').show();
					$('#project_agency').val('');
				}
				else if(project_categories == 'SIIT'){
					$('#box_project_grant').hide();
					$('#project_agency').val('Sirindhorn International Institute of Technology (SIIT)');
				}
			})
			// Funding
			

			$('select').select2();
			
			function initSelect2(){
				$('select').each(function(){
					if(!$(this).hasClass('select2-hidden-accessible')){
						$(this).select2({
							width: '100%',
							allowClear: false
						});
					}
				});
			}
			
			$('.date').datepicker({
				format: 'yyyy-mm-dd',
				autoclose: true
			});
			
			function getResearcherOptions(){
				return `
					@foreach($researcher as $new_researcher)
						<option value="{{ $new_researcher->researcher_userid }}">
							{{ $new_researcher->researcher_title }} {{ $new_researcher->researcher_fullname }}
						</option>
					@endforeach
				`;
			}


			// ===============================
			// Co-Principal Investigator
			// ===============================
			function createPiRow()
			{
				return `
					<div class="row gx-4 pi-row researcher-row">
						<input type="hidden" name="project_researcher_role[]" value="Co-PI">

						<div class="col-md-7 mb-3">
							<select class="form-select researcher-name" name="project_researcher_name[]" required>
								<option selected disabled value="">
									Select Co-Principal Investigator
								</option>

								${getResearcherOptions()}
							</select>
						</div>

						<div class="col-md-3 mb-3">
							<input type="text"
								   inputmode="decimal"
								   name="project_researcher_portion[]"
								   class="form-control researcher-portion"
								   placeholder="Portion (%)"
								   required
								   autocomplete="off">
						</div>

						<div class="col-md-2 mb-3">
							<button type="button"
									class="btn btn-sm btn-soft-red rounded-pill w-100 remove-row">
								Remove
							</button>
						</div>
					</div>
				`;
			}


			// ===============================
			// Co-Researcher
			// ===============================
			function createCoPiRow()
			{
				return `
					<div class="row gx-4 copi-row researcher-row">
						<input type="hidden" name="project_researcher_role[]" value="Co-Researcher">

						<div class="col-md-7 mb-3">
							<select class="form-select researcher-name" name="project_researcher_name[]" required>
								<option selected disabled value="">
									Select Co-Researcher
								</option>

								${getResearcherOptions()}
							</select>
						</div>

						<div class="col-md-3 mb-3">
							<input type="text"
								   inputmode="decimal"
								   name="project_researcher_portion[]"
								   class="form-control researcher-portion"
								   placeholder="Portion (%)"
								   required
								   autocomplete="off">
						</div>

						<div class="col-md-2 mb-3">
							<button type="button"
									class="btn btn-sm btn-soft-red rounded-pill w-100 remove-row">
								Remove
							</button>
						</div>
					</div>
				`;
			}


			// ===============================
			// Calculate Total Portion
			// ===============================
			function calculateTotalPortion()
			{
				var total = 0;

				$('.researcher-portion').each(function(){

					var value = parseFloat($(this).val());

					if(!isNaN(value)){
						total += value;
					}

				});

				total = Math.round(total * 100) / 100;

				$('#portion_total').text(total);

				$('#portion_summary_box')
					.removeClass('is-valid is-warning is-error');

				if(total == 100){

					$('#portion_summary_box').addClass('is-valid');
					$('#portion_message').text('Complete.');

				}
				else if(total > 100){

					$('#portion_summary_box').addClass('is-error');
					$('#portion_message').text(
						'Total portion exceeds 100% by ' + (total - 100).toFixed(2) + '%.'
					);

				}
				else{

					$('#portion_summary_box').addClass('is-warning');
					$('#portion_message').text(
						'Remaining ' + (100 - total).toFixed(2) + '%.'
					);

				}
			}


			// ===============================
			// Add Co-PI
			// ===============================
			$('#add_pi').on('click', function(){

				$('#pi_list').append(createPiRow());

				initSelect2();

				calculateTotalPortion();

			});


			// ===============================
			// Add Co-Researcher
			// ===============================
			$('#add_copi').on('click', function(){

				$('#copi_list').append(createCoPiRow());

				initSelect2();

				calculateTotalPortion();

			});


			// ===============================
			// Remove
			// ===============================
			$(document).on('click', '.remove-row', function(){

				$(this).closest('.researcher-row').remove();

				calculateTotalPortion();

			});


			// ===============================
			// Portion Change
			// ===============================
			$(document).on('input', '.researcher-portion', function(){

				calculateTotalPortion();

			});


			// ===============================
			// Validate Before Submit
			// ===============================
			$('form').on('submit', function(e){

				var total = 0;

				$('.researcher-portion').each(function(){

					var value = parseFloat($(this).val());

					if(!isNaN(value)){
						total += value;
					}

				});

				total = Math.round(total * 100) / 100;

				if(total != 100){

					e.preventDefault();

					calculateTotalPortion();

					alert(
						'Total portion must be exactly 100%. Current total is ' +
						total +
						'%.'
					);

					return false;
				}

			});

			calculateTotalPortion();
			
			
			function getSchoolOptions(){
				return `
					<option disabled selected value="">Select School</option>
					@foreach($school as $new_school)
						<option value="{{ $new_school->school_id }}">
							{{ $new_school->school_name }} ({{ $new_school->school_shortname }})
						</option>
					@endforeach
				`;
			}

			function createSchoolRow(){
				return `
					<div class="row gx-4 researcher-row school-row">
						<div class="col-md-10 mb-3">
							<select class="form-select" name="project_school[]" required>
								${getSchoolOptions()}
							</select>
						</div>

						<div class="col-md-2 mb-3">
							<button type="button" class="btn btn-sm btn-soft-red rounded-pill w-100 remove-row">
								Remove
							</button>
						</div>
					</div>
				`;
			}
			
			function getResearchUnitOptions(){
				return `
					<option disabled selected value="">Select Research Unit</option>
					@foreach($research_unit as $new_research_unit)
						<option value="{{ $new_research_unit->research_unit_id }}">
							{{ $new_research_unit->research_unit_name }}
						</option>
					@endforeach
				`;
			}

			function createResearchUnitRow(){
				return `
					<div class="row gx-4 researcher-row research-unit-row">
						<div class="col-md-10 mb-3">
							<select class="form-select" name="project_research_unit[]" required>
								${getResearchUnitOptions()}
							</select>
						</div>

						<div class="col-md-2 mb-3">
							<button type="button" class="btn btn-sm btn-soft-red rounded-pill w-100 remove-row">
								Remove
							</button>
						</div>
					</div>
				`;
			}
			
			function getResearchCenterOptions(){
				return `
					<option disabled selected value="">Select Research Center</option>
					@foreach($research_center as $new_research_center)
						<option value="{{ $new_research_center->research_center_id }}">
							{{ $new_research_center->research_center_name }}
						</option>
					@endforeach
				`;
			}

			function createResearchCenterRow(){
				return `
					<div class="row gx-4 researcher-row research-center-row">
						<div class="col-md-10 mb-3">
							<select class="form-select" name="project_research_center[]" required>
								${getResearchCenterOptions()}
							</select>
						</div>

						<div class="col-md-2 mb-3">
							<button type="button" class="btn btn-sm btn-soft-red rounded-pill w-100 remove-row">
								Remove
							</button>
						</div>
					</div>
				`;
			}

			$('#add_school').on('click', function(){
				$('#school_list').append(createSchoolRow());
				initSelect2();
			});
			
			$('#add_research_unit').on('click', function(){
				$('#research_unit_list').append(createResearchUnitRow());
				initSelect2();
			});

			$('#add_research_center').on('click', function(){
				$('#research_center_list').append(createResearchCenterRow());
				initSelect2();
			});

		});
		
		
		// keywords //
		var input = document.querySelector('#project_keywords');

		var tagify = new Tagify(input, {
			delimiters: ",",
			maxTags: 20,
			dropdown: {
				enabled: 0
			}
		});
		// keywords //
	</script>

	<script>
		$(document).ready(function(){

			var maxExtraExtendedDate = 10;

			function getOrdinal(n)
			{
				var suffix = 'th';

				if(n % 100 < 11 || n % 100 > 13){
					if(n % 10 == 1){
						suffix = 'st';
					}
					else if(n % 10 == 2){
						suffix = 'nd';
					}
					else if(n % 10 == 3){
						suffix = 'rd';
					}
				}

				return n + '<sup>' + suffix + '</sup>';
			}

			function refreshExtendedDateOrder()
			{
				$('#extended_date_list .extended-date-row').each(function(index){

					if(index == 0){
						$(this).find('.project-field-label').html('Extended Date');
					}
					else{
						$(this).find('.project-field-label').html(getOrdinal(index) + ' Extended Date');
					}

				});

				var extraCount = $('#extended_date_list .extended-date-row').length - 1;

				if(extraCount >= maxExtraExtendedDate){
					$('#add_extended_date').prop('disabled', true).text('Max');
				}
				else{
					$('#add_extended_date').prop('disabled', false).text('Add Extended Date');
				}
			}

			function createExtendedDateRow()
			{
				return `
					<div class="row gx-4 extended-date-row">
						<div class="col-md-6 mb-3 d-flex align-items-end justify-content-end">
							<button type="button" class="btn btn-sm btn-soft-red rounded-pill remove-extended-date">
								Remove
							</button>
						</div>

						<div class="col-md-6 mb-3">
							<div class="project-field-label"></div>
							<div class="form-floating">
								<input type="text"
									   name="project_extended[]"
									   class="form-control date"
									   placeholder="Extended Date"
									   autocomplete="off">
								<label>Extended Date</label>
							</div>
						</div>
					</div>
				`;
			}

			$('#add_extended_date').on('click', function(){
				var extraCount = $('#extended_date_list .extended-date-row').length - 1;

				if(extraCount < maxExtraExtendedDate){
					$('#extended_date_list').append(createExtendedDateRow());
					refreshExtendedDateOrder();

					$('.date').datepicker({
						format: 'yyyy-mm-dd',
						autoclose: true
					});
				}
			});

			$(document).on('click', '.remove-extended-date', function(){
				$(this).closest('.extended-date-row').remove();
				refreshExtendedDateOrder();
			});

			refreshExtendedDateOrder();

		});
	</script>

	<script>
		$(document).ready(function(){

			function cleanNumber(value){
				value = String(value || '').replace(/,/g, '');
				return parseFloat(value) || 0;
			}

			function formatMoney(value){
				value = parseFloat(value) || 0;
				return value.toFixed(2);
			}

			function isCurrencyTHB(){
				var currencyText = $('#project_currency option:selected').text().trim().toUpperCase();
				return currencyText == 'THB';
			}

			function syncTHBIfCurrencyIsTHB(){
				if(isCurrencyTHB())
				{
					$('#project_total_thb').val($('#project_total_currency').val());
					$('#project_overhead_thb').val($('#project_overhead_currency').val());
				}
			}

			function calculateReceive(){
				syncTHBIfCurrencyIsTHB();

				var totalCurrency = cleanNumber($('#project_total_currency').val());
				var overheadCurrency = cleanNumber($('#project_overhead_currency').val());

				var totalTHB = cleanNumber($('#project_total_thb').val());
				var overheadTHB = cleanNumber($('#project_overhead_thb').val());

				var receiveCurrency = totalCurrency - overheadCurrency;
				var receiveTHB = totalTHB - overheadTHB;

				$('#project_receive_currency').val(formatMoney(receiveCurrency));
				$('#project_receive_thb').val(formatMoney(receiveTHB));
			}

			function updateBudgetCurrencyMode(){
				var currencyValue = $('#project_currency').val();

				if(currencyValue == '' || currencyValue == null){
					$('#box_project_total_thb').hide();
					$('#box_project_overhead_thb').hide();
					$('#box_project_receive_thb').hide();

					$('#project_receive_currency').val('');
					$('#project_receive_thb').val('');

					return;
				}

				if(isCurrencyTHB()){
					$('#box_project_total_thb').hide();
					$('#box_project_overhead_thb').hide();
					$('#box_project_receive_thb').hide();

					$('#project_total_thb').val($('#project_total_currency').val());
					$('#project_overhead_thb').val($('#project_overhead_currency').val());
				}
				else{
					$('#box_project_total_thb').show();
					$('#box_project_overhead_thb').show();
					$('#box_project_receive_thb').show();
				}

				calculateReceive();
			}

			$('#project_currency').on('change', function(){
				updateBudgetCurrencyMode();
			});

			$('#project_total_currency, #project_overhead_currency').on('input keyup change', function(){
				if(isCurrencyTHB()){
					syncTHBIfCurrencyIsTHB();
				}

				calculateReceive();
			});

			$('#project_total_thb, #project_overhead_thb').on('input keyup change', function(){
				calculateReceive();
			});

			updateBudgetCurrencyMode();
		});
		
		function updateAbstractCount(){
			var length = $('#project_abstract').val().length;

			$('#abstract_count').text(length);

			if(length >= 800){
				$('#abstract_counter')
					.removeClass('text-muted')
					.addClass('text-danger fw-bold');
			}
			else{
				$('#abstract_counter')
					.removeClass('text-danger fw-bold')
					.addClass('text-muted');
			}
		}

		$('#project_abstract').on('input', function(){
			updateAbstractCount();
		});

		updateAbstractCount();
	</script>

	<script>
		$('#project_total_currency, #project_total_thb, #project_overhead_currency, #project_overhead_thb').on('input', function(){
			var value = $(this).val();

			value = value.replace(/[^0-9.]/g, '');

			var parts = value.split('.');
			if(parts.length > 2){
				value = parts[0] + '.' + parts.slice(1).join('');
			}

			if(value.indexOf('.') !== -1){
				var decimal = value.split('.');
				value = decimal[0] + '.' + decimal[1].substring(0, 2);
			}

			$(this).val(value);
		});
	</script>
@endsection
    
@section('content')
    
	@include('layouts.header')
	@include('layouts.header-sub')

	<section class="wrapper bg-light">
		<div class="container py-14 py-md-13">
			<div class="row gx-lg-8 gx-xl-12">

				<div class="col-lg-12">
					<div class="blog single">
						<div class="project-form-shell">

							<div class="project-form-topbar">
								<h1>
									10.2a APPROVAL FORM FOR PROJECT BY SIIT CONSULTING CENTER <br>
									(CONDUCTED BY SIIT CONSULTING CENTER)
								</h1>
								<p>Please complete the project information by section.</p>
							</div>

							<div class="project-form-body">

								<form class="contact-form" method="post" action="{{ url('/projectsave') }}" enctype="multipart/form-data">
									{{ csrf_field() }}

									<input name="project_id" value="{{ $project_id }}" type="hidden">
									<input name="project_form" value="{{ $project_form }}" type="hidden">

									<div class="messages"></div>

									<div class="project-section">
										<div class="project-section-header">
											<div class="project-section-icon">
												<i class="uil uil-file-info-alt"></i>
											</div>
											<div class="project-section-title">
												<h4>Project Details</h4>
												<p>General information and classification of the project.</p>
											</div>
										</div>

										<div class="member-box">
											<div class="member-box-title">
												<i class="uil uil-folder-info" style="color:#4f46e5 !important"></i>
												Project Information
											</div>

											<div class="row gx-4">
												<div class="col-md-12 mb-4">
													<div class="project-field-label">Funding Category <span>*</span></div>
													<select class="form-select" id="project_categories" name="project_categories" required>
														<option disabled selected value="">Select project category</option>
														<option @if($project_categories == "External") selected @endif value="External">External</option>
														<option @if($project_categories == "SIIT") selected @endif value="SIIT">SIIT</option>
													</select>
												</div>
												
												<div class="col-md-12 mb-4">
													<div class="project-field-label">Type of Project <span>*</span></div>
													<select class="form-select" id="project_type" name="project_type" required>
														<option disabled selected value="">Select Type of Project</option>
														<option @if($project_type == "Consultant Service") selected @endif value="Consultant Service">Consultant Service</option>
														<option @if($project_type == "Training Service") selected @endif value="Training Service">Training Service</option>
														<option @if($project_type == "Others") selected @endif value="Others">Others</option>
													</select>
												</div>
											</div>
										</div>

										<div class="member-box">
											<div class="member-box-title">
												<i class="uil uil-edit-alt" style="color:#4f46e5 !important"></i>
												Project Title
											</div>

											<div class="row gx-4">
												<div class="col-md-12 mb-4">
													<div class="project-field-label">Project Title : (EN) <span>*</span></div>
													<div class="form-floating">
														<input id="project_name_en" type="text" name="project_name_en" class="form-control" placeholder="Project Title : (EN)" 
															   required value="{{ $project_name_en }}" autocomplete="off">
														<label>Project Title : (EN) *</label>
													</div>
												</div>
												
												<div class="col-md-12 mb-4">
													<div class="project-field-label">Project Title : (TH) (If no Thai project title is available, please enter "-".) <span>*</span></div>
													<div class="form-floating">
														<input id="project_name_th" type="text" name="project_name_th" class="form-control" placeholder="Project Title : (TH)" 
															   required value="{{ $project_name_th }}" autocomplete="off">
														<label>Project Title : (TH) *</label>
													</div>
												</div>

											</div>
										</div>
										
										<div class="member-box">
											<div class="member-box-title">
												<i class="uil uil-building" style="color:#4f46e5 !important"></i>
												Funding Agency/Client
											</div>

											<div class="row gx-4">
												<div class="col-md-12 mb-4">
													<div class="project-field-label">Funding Agency/Client <span>*</span></div>
													<div class="form-floating">
														<input id="project_agency" type="text" name="project_agency" class="form-control" placeholder="Funding Agency/Client" 
															   required value="{{ $project_agency }}" autocomplete="off">
														<label>Funding Agency/Client *</label>
													</div>
												</div>
												
												<div class="col-md-12 mb-4" id="box_project_grant">
													<div class="project-field-label">Title of Grant</div>
													<div class="form-floating">
														<input id="project_grant" type="text" name="project_grant" class="form-control" placeholder="Title of Grant" 
															   value="{{ $project_grant }}" autocomplete="off">
														<label>Title of Grant</label>
													</div>
												</div>

												<div class="col-md-12 mb-4">
													<div class="project-field-label">Type of Funding Agency <span>*</span></div>
													<select class="form-select" id="project_agency_type" name="project_agency_type" required>
														<option disabled selected value="">Select funding agency type</option>
														<option @if($project_agency_type == "Government") selected @endif value="Government">Government</option>
														<option @if($project_agency_type == "Private sector") selected @endif value="Private sector">Private sector</option>
														<option @if($project_agency_type == "Abroad") selected @endif value="Abroad">Abroad</option>
													</select>
												</div>
											</div>
										</div>
									</div>

									<div class="project-section">
										<div class="project-section-header">
											<div class="project-section-icon">
												<i class="uil uil-users-alt"></i>
											</div>
											<div class="project-section-title">
												<h4>Manager of the SIIT Consulting Center</h4>
												<p>Specify Manager of the SIIT Consulting Center.</p>
											</div>
										</div>

										<div class="member-box" id="box_pi">
											<div class="member-box-title">
												<i class="uil uil-user-square" style="color:#4f46e5 !important"></i>
												Manager of the SIIT Consulting Center
											</div>

											<div>
												@php($pi = $project_pi->first())

												<div class="row gx-4 pi-row researcher-row">
													<input type="hidden" name="project_researcher_role[]" value="PI">

													<div class="col-md-7 mb-3">
														<select class="form-select researcher-name" name="project_researcher_name[]" required>
															<option disabled value="" @if(empty($pi)) selected @endif>Select Manager of the SIIT Consulting Center</option>
															@foreach($researcher as $new_researcher)
																<option value="{{ $new_researcher->researcher_userid }}"
																	@if(!empty($pi) && $pi->project_researcher_user_id == $new_researcher->researcher_userid) selected @endif>
																	{{ $new_researcher->researcher_title }} {{ $new_researcher->researcher_fullname }}
																</option>
															@endforeach
														</select>
													</div>

													<div class="col-md-3 mb-3">
														<input type="text" inputmode="decimal" name="project_researcher_portion[]" class="form-control researcher-portion"
															   placeholder="Portion (%)" required autocomplete="off"
															   value="{{ !empty($pi) ? $pi->project_researcher_portion : '' }}">
													</div>
												</div>
											</div>
											
										</div>
										
										<div class="portion-summary-box" id="portion_summary_box">
											<div>
												<strong>Total Portion:</strong>
												<span id="portion_total">0</span>%
												<span id="portion_message" class="ms-2">Please specify portions.</span>
											</div>
										</div>
									</div>

									<div class="project-section">
										<div class="project-section-header">
											<div class="project-section-icon">
												<i class="uil uil-calendar-alt"></i>
											</div>
											<div class="project-section-title">
												<h4>Project Timeline</h4>
												<p>Important project dates and duration.</p>
											</div>
										</div>

										<div class="member-box">
											<div class="member-box-title">
												<i class="uil uil-calendar-alt" style="color:#4f46e5 !important"></i>
												Project Timeline
											</div>

											<div class="row gx-4">
												<div class="col-md-6 mb-4">
													<div class="project-field-label">Project Signed <span>*</span></div>
													<div class="form-floating">
														<input id="project_signed" type="text" name="project_signed" class="form-control date" placeholder="Project Signed" required 
															   value="{{ $project_signed }}" autocomplete="off">
														<label>Project Signed *</label>
													</div>
												</div>

												<div class="col-md-6 mb-4"></div>

												<div class="col-md-6 mb-4">
													<div class="project-field-label">Project Duration From <span>*</span></div>
													<div class="form-floating">
														<input id="project_from" type="text" name="project_from" class="form-control date" placeholder="Project Duration From" required 
															   value="{{ $project_from }}" autocomplete="off">
														<label>Project Duration From *</label>
													</div>
												</div>

												<div class="col-md-6 mb-4">
													<div class="project-field-label">Project Duration To <span>*</span></div>
													<div class="form-floating">
														<input id="project_to" type="text" name="project_to" class="form-control date" placeholder="Project Duration To" required 
															   value="{{ $project_to }}" autocomplete="off">
														<label>Project Duration To *</label>
													</div>
												</div>
												
												<div class="col-md-12 mb-4">
													<div id="extended_date_list">
														@if($project_extended->count() > 0)

															@foreach($project_extended as $key => $extended)
																<div class="row gx-4 extended-date-row">
																	<div class="col-md-6 mb-3 d-flex align-items-end justify-content-end">
																		@if($key == 0)
																			<button type="button" class="btn btn-sm btn-primary rounded-pill" id="add_extended_date">
																				Add Extended Date
																			</button>
																		@else
																			<button type="button" class="btn btn-sm btn-soft-red rounded-pill remove-extended-date">
																				Remove
																			</button>
																		@endif
																	</div>

																	<div class="col-md-6 mb-3">
																		<div class="project-field-label">Extended Date</div>
																		<div class="form-floating">
																			<input type="text" name="project_extended[]" class="form-control date" placeholder="Extended Date"
																				   value="{{ $extended->project_extended_date }}" autocomplete="off">
																			<label>Extended Date</label>
																		</div>
																	</div>
																</div>
															@endforeach

														@else

															<div class="row gx-4 extended-date-row">
																<div class="col-md-6 mb-3 d-flex align-items-end justify-content-end">
																	<button type="button" class="btn btn-sm btn-primary rounded-pill" id="add_extended_date">
																		Add Extended Date
																	</button>
																</div>

																<div class="col-md-6 mb-3">
																	<div class="project-field-label">Extended Date</div>
																	<div class="form-floating">
																		<input type="text" name="project_extended[]" class="form-control date" placeholder="Extended Date"
																			   value="" autocomplete="off">
																		<label>Extended Date</label>
																	</div>
																</div>
															</div>

														@endif
													</div>
												</div>
												
											</div>
										</div>
									</div>
									
									<div class="project-section">
										<div class="project-section-header">
											<div class="project-section-icon">
												<i class="uil uil-money-stack"></i>
											</div>
											<div class="project-section-title">
												<h4>Project Budget</h4>
												<p>Specify the project budget, equipment expenses and overhead costs.</p>
											</div>
										</div>

										<div class="member-box">
											<div class="member-box-title">
												<i class="uil uil-wallet" style="color:#4f46e5 !important"></i>
												Total Budget
											</div>

											<div class="row gx-4">
												<div class="col-md-6 mb-4">
													<div class="project-field-label">Budget Year <span>*</span></div>
													<div class="form-floating">
														<input id="project_budget_year" type="text" name="project_budget_year" class="form-control" placeholder="Budget Year"
															   required value="{{ $project_budget_year }}" autocomplete="off">
														<label>Budget Year *</label>
													</div>
												</div>

												<div class="col-md-6 mb-4">
													<div class="project-field-label">Currency <span>*</span></div>
													<select class="form-select" id="project_currency" name="project_currency" required>
														<option disabled selected value="">Select currency</option>
														@foreach($currency as $new_currency)
															<option @if($project_currency == $new_currency->currency_id) selected @endif value="{{ $new_currency->currency_id }}">
																{{ $new_currency->currency_name }}
															</option>
														@endforeach
													</select>
												</div>

												<div class="col-md-6 mb-4">
													<div class="project-field-label">Total Budget (Original Currency) <span>*</span></div>
													<div class="form-floating">
														<input id="project_total_currency" type="text" name="project_total_currency" class="form-control"
															   placeholder="Total Budget (Original Currency)" required
															   value="{{ $project_total_currency }}" autocomplete="off">
														<label>Total Budget (Original Currency) *</label>
													</div>
												</div>

												<div class="col-md-6 mb-4 currency-thb-box" id="box_project_total_thb">
													<div class="project-field-label">Total Budget (THB) <span></span></div>
													<div class="form-floating">
														<input id="project_total_thb" type="text" name="project_total_thb" class="form-control"
															   placeholder="Total Budget (THB)" value="{{ $project_total_thb }}" autocomplete="off">
														<label>Total Budget (THB)</label>
													</div>
												</div>
											</div>
										</div>

										<div class="member-box">
											<div class="member-box-title">
												<i class="uil uil-percentage" style="color:#4f46e5 !important"></i>
												Overhead
											</div>

											<div class="row gx-4">
												<div class="col-md-12 mb-4">
													<div class="project-field-label">Overhead <span>*</span></div>
													<select class="form-select" id="project_overhead" name="project_overhead" required>
														<option disabled selected value="">Select overhead</option>
														<option @if($project_overhead == "10 %") selected @endif value="10 %">10 %</option>
														<option @if($project_overhead == "15 %") selected @endif value="15 %">15 %</option>
														<option @if($project_overhead == "0 %") selected @endif value="0 %">0 %</option>
														<option @if($project_overhead == "Waive Overhead") selected @endif value="Waive Overhead">Waive Overhead</option>
														<option @if($project_overhead == "Other") selected @endif value="Other">Other</option>
													</select>
												</div>

												<div class="col-md-6 mb-4">
													<div class="project-field-label">Total Overhead (Original Currency) <span>*</span></div>
													<div class="form-floating">
														<input id="project_overhead_currency" type="text" name="project_overhead_currency" class="form-control"
															   placeholder="Total Overhead (Original Currency)" required
															   value="{{ $project_overhead_currency }}" autocomplete="off">
														<label>Total Overhead (Original Currency) *</label>
													</div>
												</div>

												<div class="col-md-6 mb-4 currency-thb-box" id="box_project_overhead_thb">
													<div class="project-field-label">Total Overhead (THB) <span></span></div>
													<div class="form-floating">
														<input id="project_overhead_thb" type="text" name="project_overhead_thb" class="form-control"
															   placeholder="Total Overhead (THB)" value="{{ $project_overhead_thb }}" autocomplete="off">
														<label>Total Overhead (THB)</label>
													</div>
												</div>

												<div class="col-md-12 mb-4">
													<div class="project-field-label">Remark</div>
													<div class="form-floating">
														<input id="project_overhead_remark" type="text" name="project_overhead_remark" class="form-control"
															   placeholder="Remark"
															   value="{{ $project_overhead_remark }}" autocomplete="off">
														<label>Remark</label>
													</div>
												</div>
											</div>
										</div>

										<div class="member-box">
											<div class="member-box-title">
												<i class="uil uil-money-withdraw" style="color:#4f46e5 !important"></i>
												Total Receive
											</div>

											<div class="row gx-4">
												<div class="col-md-6 mb-4">
													<div class="project-field-label">Total Receive (Original Currency) <span>*</span></div>
													<div class="form-floating">
														<input id="project_receive_currency" type="text" name="project_receive_currency" class="form-control"
															   placeholder="Total Receive (Original Currency)" required
															   value="{{ $project_receive_currency }}" autocomplete="off" readonly>
														<label>Total Receive (Original Currency) *</label>
													</div>
												</div>

												<div class="col-md-6 mb-4 currency-thb-box" id="box_project_receive_thb">
													<div class="project-field-label">Total Receive (THB) <span></span></div>
													<div class="form-floating">
														<input id="project_receive_thb" type="text" name="project_receive_thb" class="form-control"
															   placeholder="Total Receive (THB)" value="{{ $project_receive_thb }}" autocomplete="off" readonly>
														<label>Total Receive (THB)</label>
													</div>
												</div>
											</div>
										</div>
									</div>
									
									<div class="project-section">
										<div class="project-section-header">
											<div class="project-section-icon">
												<i class="uil uil-sitemap"></i>
											</div>
											<div class="project-section-title">
												<h4>School & Research Center & Research Unit</h4>
												<p>Specify the affiliated school, research center and research unit for this project.</p>
											</div>
										</div>
										
										<div class="member-box">
											<div class="member-box-title">
												<i class="uil uil-university" style="color:#4f46e5 !important"></i>
												School
											</div>

											<div id="school_list">
												@if($project_school->count() > 0)

													@foreach($project_school as $key => $new_project_school)
														<div class="row gx-4 researcher-row school-row">
															<div class="col-md-10 mb-3">
																<select class="form-select" name="project_school[]" required>
																	<option disabled value="">Select School</option>
																	@foreach($school as $new_school)
																		<option value="{{ $new_school->school_id }}"
																			@if($new_project_school->project_school_school_id == $new_school->school_id) selected @endif>
																			{{ $new_school->school_name }} ({{ $new_school->school_shortname }})
																		</option>
																	@endforeach
																</select>
															</div>

															<div class="col-md-2 mb-3">
																@if($key == 0)
																	<button type="button" class="btn btn-sm btn-primary rounded-pill w-100" id="add_school">Add</button>
																@else
																	<button type="button" class="btn btn-sm btn-soft-red rounded-pill w-100 remove-row">Remove</button>
																@endif
															</div>
														</div>
													@endforeach

												@else

													<div class="row gx-4 researcher-row school-row">
														<div class="col-md-10 mb-3">
															<select class="form-select" name="project_school[]" required>
																<option disabled selected value="">Select School</option>
																@foreach($school as $new_school)
																	<option value="{{ $new_school->school_id }}">
																		{{ $new_school->school_name }} ({{ $new_school->school_shortname }})
																	</option>
																@endforeach
															</select>
														</div>

														<div class="col-md-2 mb-3">
															<button type="button" class="btn btn-sm btn-primary rounded-pill w-100" id="add_school">Add</button>
														</div>
													</div>

												@endif
											</div>
										</div>
										
										<div class="member-box">
											<div class="member-box-title">
												<i class="uil uil-university" style="color:#4f46e5 !important"></i>
												Research Center
											</div>

											<div id="research_center_list">
												@if($project_center->count() > 0)

													@foreach($project_center as $key => $new_project_center)
														<div class="row gx-4 researcher-row research-center-row">
															<div class="col-md-10 mb-3">
																<select class="form-select" name="project_research_center[]" required>
																	<option disabled value="">Select Research Center</option>
																	@foreach($research_center as $new_research_center)
																		<option value="{{ $new_research_center->research_center_id }}"
																			@if($new_project_center->project_center_center_id == $new_research_center->research_center_id) selected @endif>
																			{{ $new_research_center->research_center_name }}
																		</option>
																	@endforeach
																</select>
															</div>

															<div class="col-md-2 mb-3">
																@if($key == 0)
																	<button type="button" class="btn btn-sm btn-primary rounded-pill w-100" id="add_research_center">Add</button>
																@else
																	<button type="button" class="btn btn-sm btn-soft-red rounded-pill w-100 remove-row">Remove</button>
																@endif
															</div>
														</div>
													@endforeach

												@else

													<div class="row gx-4 researcher-row research-center-row">
														<div class="col-md-10 mb-3">
															<select class="form-select" name="project_research_center[]" required>
																<option disabled selected value="">Select Research Center</option>
																@foreach($research_center as $new_research_center)
																	<option value="{{ $new_research_center->research_center_id }}">
																		{{ $new_research_center->research_center_name }}
																	</option>
																@endforeach
															</select>
														</div>

														<div class="col-md-2 mb-3">
															<button type="button" class="btn btn-sm btn-primary rounded-pill w-100" id="add_research_center">Add</button>
														</div>
													</div>

												@endif
											</div>
										</div>

										<div class="member-box">
											<div class="member-box-title">
												<i class="uil uil-building" style="color:#4f46e5 !important"></i>
												Research Unit
											</div>

											<div id="research_unit_list">
												@if($project_unit->count() > 0)

													@foreach($project_unit as $key => $new_project_unit)
														<div class="row gx-4 researcher-row research-unit-row">
															<div class="col-md-10 mb-3">
																<select class="form-select" name="project_research_unit[]" required>
																	<option disabled value="">Select Research Unit</option>
																	@foreach($research_unit as $new_research_unit)
																		<option value="{{ $new_research_unit->research_unit_id }}"
																			@if($new_project_unit->project_unit_unit_id == $new_research_unit->research_unit_id) selected @endif>
																			{{ $new_research_unit->research_unit_name }}
																		</option>
																	@endforeach
																</select>
															</div>

															<div class="col-md-2 mb-3">
																@if($key == 0)
																	<button type="button" class="btn btn-sm btn-primary rounded-pill w-100" id="add_research_unit">Add</button>
																@else
																	<button type="button" class="btn btn-sm btn-soft-red rounded-pill w-100 remove-row">Remove</button>
																@endif
															</div>
														</div>
													@endforeach

												@else

													<div class="row gx-4 researcher-row research-unit-row">
														<div class="col-md-10 mb-3">
															<select class="form-select" name="project_research_unit[]" required>
																<option disabled selected value="">Select Research Unit</option>
																@foreach($research_unit as $new_research_unit)
																	<option value="{{ $new_research_unit->research_unit_id }}">
																		{{ $new_research_unit->research_unit_name }}
																	</option>
																@endforeach
															</select>
														</div>

														<div class="col-md-2 mb-3">
															<button type="button" class="btn btn-sm btn-primary rounded-pill w-100" id="add_research_unit">Add</button>
														</div>
													</div>

												@endif
											</div>
										</div>
									</div>
									
									<div class="project-section">
										<div class="project-section-header">
											<div class="project-section-icon">
												<i class="uil uil-document-layout-left"></i>
											</div>
											<div class="project-section-title">
												<h4>Research Overview</h4>
												<p>Summary and keywords</p>
											</div>
										</div>

										<div class="member-box">
											<div class="member-box-title">
												<i class="uil uil-file-alt" style="color:#4f46e5 !important"></i>
												Project Summary/Abstract (Maximum 800 characters)
											</div>

											<div class="form-floating mb-4">
												<textarea id="project_abstract" name="project_abstract" class="form-control" placeholder="Project Summary / Abstract" style="height: 150px"
														  maxlength="800" required>{{ $project_abstract }}</textarea>
												<label>Project Summary / Abstract *</label>
											</div>
											<div class="text-end mt-1">
												<small class="text-muted" id="abstract_counter">
													<span id="abstract_count">0</span> / 800 characters
												</small>
											</div>
										</div>
										
										<div class="member-box">
											<div class="member-box-title">
												<i class="uil uil-key-skeleton" style="color:#4f46e5 !important"></i>
												Keyword(s)
											</div>

											<input id="project_keywords" name="project_keywords" class="form-control" placeholder="Type a keyword and press Enter" 
												   value="{{ $project_keyword_tagify }}">
										</div>
									</div>
									
									<div class="project-section">
										<div class="project-section-header">
											<div class="project-section-icon">
												<i class="uil uil-paperclip"></i>
											</div>
											<div class="project-section-title">
												<h4>Project Documents</h4>
												<p>Upload supporting documents related to the project. PDF files only.</p>
											</div>
										</div>

										<div class="member-box">
											<div class="member-box-title">
												<i class="uil uil-file-alt" style="color:#4f46e5 !important"></i>
												TOR / Proposal <span>*</span>
											</div>

											<div class="row gx-4 align-items-center">
												<div class="col-md-12 mb-3">
													<input type="file" id="project_document_tor" name="project_document_tor" class="form-control" 
														   @if($project_id == '') required @endif
														   accept=".pdf,.docx,application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
												</div>
											</div>
										</div>

										<div class="member-box">
											<div class="member-box-title">
												<i class="uil uil-file-check-alt" style="color:#4f46e5 !important"></i>
												Signed Contract <span>*</span>
											</div>

											<div class="row gx-4 align-items-center">
												<div class="col-md-12 mb-3">
													<input type="file" id="project_document_contract" name="project_document_contract" class="form-control" 
														   @if($project_id == '') required @endif
														   accept=".pdf,.docx,application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
												</div>
											</div>
										</div>

										<div class="member-box">
											<div class="member-box-title">
												<i class="uil uil-money-stack" style="color:#4f46e5 !important"></i>
												Budget Plan <span>*</span>
											</div>

											<div class="row gx-4 align-items-center">
												<div class="col-md-12 mb-3">
													<input type="file" id="project_document_budget" name="project_document_budget" class="form-control" 
														   @if($project_id == '') required @endif
														   accept=".pdf,.docx,application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
												</div>
											</div>
										</div>
									</div>

									<div class="action-bar">
										<p class="required-note"><strong>*</strong> These fields are required.</p>

										<div>
											<a class="btn btn-sm btn-soft-ash rounded-pill mb-2" href="{{ url('/projectlist') }}">
												Back
											</a>

											<input type="submit" class="btn btn-sm btn-primary rounded-pill btn-submit-project mb-2" value="Submit Project">
										</div>
									</div>

								</form>

							</div>
						</div>
						
					</div>
				</div>
			</div>
		</div>
	</section>


	@include('layouts.footer')
    
@endsection