@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(){

			$('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 getPiOptions()
			{
				return $('#pi_list .pi-row:first select').html();
			}

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

			function createPiRow()
			{
				return `
					<div class="row gx-4 pi-row researcher-row">
						<div class="col-md-7 mb-3">
							<select class="form-select researcher-name" name="project_pi_name[]" required>
								${getPiOptions()}
							</select>
						</div>

						<div class="col-md-3 mb-3">
							<input type="number" name="project_pi_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 createCoPiRow()
			{
				return `
					<div class="row gx-4 copi-row researcher-row">
						<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(){

			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();
		});
	</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">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 : (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/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>
													<select class="form-select" id="project_agency" name="project_agency" required>
														<option disabled selected value="">Select Funding Agency/Client</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>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 <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-9 mb-3">
														<select class="form-select researcher-name" name="project_pi_name[]" required>
															<option disabled selected value="">Select Manager of the SIIT Consulting Center</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" style="display: none">
														<button type="button" class="btn btn-sm btn-primary rounded-pill w-100" id="add_pi">
															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>
										</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-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-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)" 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-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>

									<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