@extends('layouts.master')
    
@section('title', 'Project Form')
    
@section('style')
	<style>
		/* .form-select{
			color: #000;
		}
		
		.form-floating>label {
			color: #000;
		} */
	</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;
		}
		
		#project_receive_currency,
		#project_receive_thb{
			background:#f1f5f9 !important;
			color:#64748b !important;
			cursor:not-allowed;
		}
	</style>
@endsection
    
@section('script')
	<script>
		$(document).ready(function(){

			$('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
			});
			
			var maxPi = 5;

			function getResearcherOptions()
			{
				return `
					@foreach($researcher as $new_researcher)
						<option value="{{ $new_researcher->researcher_userid }}">
							{{ $new_researcher->researcher_title }} {{ $new_researcher->researcher_fullname }}
						</option>
					@endforeach
				`;
			}

			function getCoPiOptions()
			{
				return $('#copi_list .copi-row:first select').html();
			}

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

						<div class="col-md-7 mb-3">
							<select class="form-select researcher-name" name="project_pi_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_pi_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>
				`;
			}

			function createCoPiRow()
			{
				return `
					<div class="row gx-4 copi-row researcher-row">
						<input type="hidden" name="project_copi_role[]" value="Co-Researcher">
						<div class="col-md-7 mb-3">
							<select class="form-select researcher-name" name="project_copi_name[]" required>
								${getCoPiOptions()}
							</select>
						</div>

						<div class="col-md-3 mb-3">
							<input type="number" name="project_copi_portion[]" class="form-control researcher-portion" placeholder="Portion (%)" required min="0" max="100" step="0.01" 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>
				`;
			}

			function checkPiLimit()
			{
				var piCount = $('#pi_list .pi-row').length;

				if(piCount >= maxPi){
					$('#add_pi').prop('disabled', true).text('Max');
				}
				else{
					$('#add_pi').prop('disabled', false).text('Add');
				}
			}

			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%.');
				}
				else{
					$('#portion_summary_box').addClass('is-warning');
					$('#portion_message').text('Remaining ' + (100 - total) + '%.');
				}
			}

			$('#add_pi').on('click', function(){
				if($('#pi_list .pi-row').length < maxPi){
					$('#pi_list').append(createPiRow());
					initSelect2();
					checkPiLimit();
					calculateTotalPortion();
				}
			});

			$('#add_copi').on('click', function(){
				$('#copi_list').append(createCoPiRow());
				initSelect2();
				calculateTotalPortion();
			});

			$(document).on('click', '.remove-row', function(){
				$(this).closest('.researcher-row').remove();

				if(typeof checkPiLimit === 'function'){
					checkPiLimit();
				}

				if(typeof calculateTotalPortion === 'function'){
					calculateTotalPortion();
				}
			});

			$(document).on('input', '.researcher-portion', function(){
				calculateTotalPortion();
			});

			$('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;
				}
			});

			checkPiLimit();
			calculateTotalPortion();
			
			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>
								${$('#research_unit_list .research-unit-row:first select').html()}
							</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 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>
								${$('#research_center_list .research-center-row:first select').html()}
							</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_research_unit').on('click', function(){
				$('#research_unit_list').append(createResearchUnitRow());
				initSelect2();
			});

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

		});
		
		function createExpectedResearchRow()
		{
			return `
				<div class="row gx-4 researcher-row expected-research-row">
					<div class="col-md-7 mb-3">
						<select class="form-select" name="project_expected_research[]" required>
							${$('#expected_research_list .expected-research-row:first select').html()}
						</select>
					</div>

					<div class="col-md-3 mb-3">
						<input type="text"
							   name="project_expected_research_number[]"
							   class="form-control expected-research-number"
							   placeholder="Output Quantity"
							   autocomplete="off"
							   required>
					</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_expected_research').on('click', function(){
			$('#expected_research_list').append(createExpectedResearchRow());
			initSelect2();
		});
		
		function createKeywordRow()
		{
			return `
				<div class="row gx-4 researcher-row keyword-row">

					<div class="col-md-10 mb-3">
						<input type="text"
							   name="project_keywords[]"
							   class="form-control"
							   placeholder="Keyword"
							   autocomplete="off"
							   required>
					</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_keyword').on('click', function(){
			$('#keyword_list').append(createKeywordRow());
			initSelect2();
		});
	</script>

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

			var maxExtraExtendedDate = 5;

			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: 'dd/mm/yyyy',
						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_equipment_thb').val($('#project_equipment_currency').val());
					$('#project_overhead_thb').val($('#project_overhead_currency').val());
				}
			}

			function calculateReceive(){
				syncTHBIfCurrencyIsTHB();

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

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

				var receiveCurrency = totalCurrency - equipmentCurrency - overheadCurrency;
				var receiveTHB = totalTHB - equipmentTHB - 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_equipment_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_equipment_thb').hide();
					$('#box_project_overhead_thb').hide();
					$('#box_project_receive_thb').hide();

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

				calculateReceive();
			}

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

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

				calculateReceive();
			});

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

			updateBudgetCurrencyMode();
		});
	</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>5.2 Approval Form for Sponsored Project</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">Project 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 == "TU") selected @endif value="TU">TU</option>
														<option @if($project_categories == "SIIT") selected @endif value="SIIT">SIIT</option>
														<option @if($project_categories == "TU-RAC") selected @endif value="TU-RAC">TU-RAC</option>
													</select>
												</div>

												<div class="col-md-6 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 == "R&D Project") selected @endif value="R&D Project">R&D Project</option>
														<option @if($project_type == "Scholarship Project") selected @endif value="Scholarship Project">Scholarship 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 == "Conference Service") selected @endif value="Conference Service">Conference Service</option>
														<option @if($project_type == "Networking Service") selected @endif value="Networking Service">Networking Service</option>
													</select>
												</div>

												<div class="col-md-6 mb-4">
													<div class="project-field-label">Project Nature <span>*</span></div>
													<select class="form-select" id="project_nature" name="project_nature" required>
														<option disabled selected value="">Select project nature</option>
														<option @if($project_nature == "New research project") selected @endif value="New research project">New research project</option>
														<option @if($project_nature == "Continuing research project") selected @endif value="Continuing research project">Continuing research project</option>
													</select>
												</div>

												<div class="col-md-6 mb-4">
													<div class="project-field-label">Type of Research <span>*</span></div>
													<select class="form-select" id="project_type_research" name="project_type_research" required>
														<option disabled selected value="">Select type of research</option>
														<option @if($project_type_research == "Basic research") selected @endif value="Basic research">Basic research</option>
														<option @if($project_type_research == "Applied research") selected @endif value="Applied research">Applied research</option>
														<option @if($project_type_research == "Research for Development") selected @endif value="Research for Development">Research for Development</option>
													</select>
												</div>

												<div class="col-md-6 mb-4">
													<div class="project-field-label">Funding Through <span>*</span></div>
													<select class="form-select" id="project_funding_through" name="project_funding_through" required>
														<option disabled selected value="">Select funding method</option>
														<option @if($project_funding_through == "Funding will be transferred through SIIT") selected @endif value="Funding will be transferred through SIIT">Funding will be transferred through SIIT</option>
														<option @if($project_funding_through == "Funding will be transferred directly to PI") selected @endif value="Funding will be transferred directly to PI">Funding will be transferred directly to PI</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 : (TH) <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 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>
										</div>
										
										<div class="member-box">
											<div class="member-box-title">
												<i class="uil uil-building" style="color:#4f46e5 !important"></i>
												Funding Agency
											</div>

											<div class="row gx-4">
												<div class="col-md-12 mb-4">
													<div class="project-field-label">Granting Agency <span>*</span></div>
													<select class="form-select" id="project_agency" name="project_agency" required>
														<option disabled selected value="">Select granting agency</option>
														@foreach($agency as $new_agency)
															<option value="{{ $new_agency->agency_id }}">
																{{ $new_agency->agency_name }}
															</option>
														@endforeach
													</select>
												</div>
												
												<div class="col-md-6 mb-4">
													<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-6 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>Principal Investigator</h4>
												<p>Specify the principal investigator and co-researcher portion.</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>
												Principal Investigator <span style="font-size: 14px; color: red">(Up to 5 persons)</span>
											</div>

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

													<div class="col-md-7 mb-3">
														<select class="form-select researcher-name" name="project_pi_name[]" required>
															<option disabled selected value="">Select Principal Investigator</option>
															@foreach($researcher as $new_researcher)
																<option value="{{ $new_researcher->researcher_userid }}">
																	{{ $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_pi_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-primary rounded-pill w-100" id="add_pi">
															Add
														</button>
													</div>
												</div>
											</div>
										</div>

										<div class="member-box" id="box_copi">
											<div class="member-box-title">
												<i class="uil uil-users-alt" style="color:#4f46e5 !important"></i>
												Co-Researcher(s)
											</div>

											<div id="copi_list">
												<div class="row gx-4 copi-row researcher-row">
													<input type="hidden" name="project_copi_role[]" value="Co-Researcher">
													
													<div class="col-md-7 mb-3">
														<select class="form-select researcher-name" name="project_copi_name[]" required>
															<option disabled selected value="">Select co-researcher</option>
															@foreach($researcher as $new_researcher)
																<option value="{{ $new_researcher->researcher_userid }}">
																	{{ $new_researcher->researcher_title }} {{ $new_researcher->researcher_fullname }}
																</option>
															@endforeach
														</select>
													</div>

													<div class="col-md-3 mb-3">
														<input type="number" name="project_copi_portion[]" class="form-control researcher-portion" placeholder="Portion (%)" required min="0" max="100" step="0.01" autocomplete="off">
													</div>

													<div class="col-md-2 mb-3">
														<button type="button" class="btn btn-sm btn-primary rounded-pill w-100" id="add_copi">
															Add
														</button>
													</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">
														<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>
													</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)" required
															   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-wallet" style="color:#4f46e5 !important"></i>
												Equipment Expense
											</div>

											<div class="row gx-4">
												<div class="col-md-6 mb-4">
													<div class="project-field-label">Equipment Expense (Original Currency)</div>
													<div class="form-floating">
														<input id="project_equipment_currency" type="text" name="project_equipment_currency" class="form-control" placeholder="Equipment Expense (Original Currency)" 
															   value="{{ $project_equipment_currency }}" autocomplete="off">
														<label>Equipment Expense (Original Currency)</label>
													</div>
												</div>
												
												<div class="col-md-6 mb-4 currency-thb-box" id="box_project_equipment_thb">
													<div class="project-field-label">Equipment Expense (THB)</div>
													<div class="form-floating" style="margin-top: 10px">
														<input id="project_equipment_thb" type="text" name="project_equipment_thb" class="form-control" 
															   placeholder="Equipment Expense (THB)" value="{{ $project_equipment_thb }}" autocomplete="off">
														<label>Equipment Expense (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)" required
															   value="{{ $project_overhead_thb }}" autocomplete="off">
														<label>Total Overhead (THB) *</label>
													</div>
												</div>
												
												<div class="col-md-6 mb-4">
													<div class="project-field-label">Type of Overhead</div>
													<select class="form-select" id="project_overhead_type" name="project_overhead_type">
														<option disabled selected value="">Select Overhead Type</option>
														<option @if($project_overhead_type == "% from total budget, which excluded OH in budget plan") selected @endif value="% from total budget, which excluded OH in budget plan">% from total budget, which excluded OH in budget plan</option>
														<option @if($project_overhead_type == "% from total budget, which included OH in budget plan") selected @endif value="% from total budget, which included OH in budget plan">% from total budget, which included OH in budget plan</option>
														<option @if($project_overhead_type == "% from total budget, which excluded equipment") selected @endif value="% from total budget, which excluded equipment">% from total budget, which excluded equipment</option>
													</select>
												</div>

												<div class="col-md-6 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)" required
															   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>Research Unit & Research Center</h4>
												<p>Specify the affiliated research unit and research center for this project.</p>
											</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">
												<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>
											</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">
												<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>
											</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, keywords and expected research outputs.</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
											</div>

											<div class="form-floating mb-4">
												<textarea id="project_abstract" name="project_abstract" class="form-control" placeholder="Project Summary / Abstract" style="height: 150px" required>{{ $project_abstract }}</textarea>
												<label>Project Summary / Abstract *</label>
											</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>

											<div id="keyword_list">
												<div class="row gx-4 researcher-row keyword-row">

													<div class="col-md-10 mb-3">
														<input type="text" name="project_keywords[]" class="form-control" placeholder="Keyword" autocomplete="off" required>
													</div>

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

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

											<div id="expected_research_list">
												<div class="row gx-4 researcher-row expected-research-row">
													<div class="col-md-7 mb-3">
														<select class="form-select" name="project_expected_research[]" required>
															<option selected value="">Select research output type</option>
															@foreach($expected_research as $new_expected_research)
																<option value="{{ $new_expected_research->expected_research_id }}">
																	{{ $new_expected_research->expected_research_name }}
																</option>
															@endforeach
														</select>
													</div>

													<div class="col-md-3 mb-3">
														<input type="text" name="project_expected_research_number[]" class="form-control expected-research-number"
															   placeholder="Output Quantity" value="" autocomplete="off" required>
													</div>

													<div class="col-md-2 mb-3">
														<button type="button" class="btn btn-sm btn-primary rounded-pill w-100" id="add_expected_research">
															Add
														</button>
													</div>
												</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-red rounded-pill mb-2" href="{{ url('/projectlist') }}" style="margin-right: 10px">
												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