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

			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>

	<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>
									6.6a REQUEST FORM FOR HOLDING CONFERENCES
								</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>Conference Details</h4>
												<p>General information and classification of the conference.</p>
											</div>
										</div>

										<div class="member-box">
											<div class="member-box-title">
												<i class="uil uil-folder-info" style="color:#4f46e5 !important"></i>
												Conference 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 == "TU") selected @endif value="TU">TU</option>
													</select>
												</div>
											</div>

											<div class="row gx-4">
												<div class="col-md-6 mb-4">
													<div class="project-field-label">Conference Fee <span>*</span></div>
													<select class="form-select" id="project_fee" name="project_fee" required>
														<option disabled selected value="">Select Project Fee</option>
														<option @if($project_fee == "No-Registration Fee") selected @endif value="No-Registration Fee">
															No-Registration Fee
														</option>
														<option @if($project_fee == "with Registration Fee") selected @endif value="with Registration Fee">
															with Registration Fee
														</option>
													</select>
												</div>
												
												<div class="col-md-6 mb-4">
													<div class="project-field-label">Conference Organizing Type <span>*</span></div>
													<select class="form-select" id="project_type" name="project_type" required>
														<option disabled selected value="">Select Conference Organizing Type</option>
														<option @if($project_type == "Host") selected @endif value="Host">Host</option>
														<option @if($project_type == "Co-Host") selected @endif value="Co-Host">Co-Host</option>
													</select>
												</div>
											</div>
										</div>
										
										<div class="member-box">
											<div class="member-box-title">
												<i class="uil uil-location-pin-alt" style="color:#4f46e5 !important"></i>
												Venue
											</div>

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

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

											<div class="row gx-4">
												<div class="col-md-12 mb-4">
													<div class="project-field-label">Conference Title : (EN) <span>*</span></div>
													<div class="form-floating">
														<input id="project_name_en" type="text" name="project_name_en" class="form-control" placeholder="Conference Title : (EN)" 
															   required value="{{ $project_name_en }}" autocomplete="off">
														<label>Conference Title : (EN) *</label>
													</div>
												</div>
												
												<div class="col-md-12 mb-4">
													<div class="project-field-label">
														Conference Title : (TH) (If no Thai conference 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="Conference Title : (TH)" 
															   required value="{{ $project_name_th }}" autocomplete="off">
														<label>Conference 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>
												Major Funding Agency
											</div>

											<div class="row gx-4">
												<div class="col-md-12 mb-4">
													<div class="project-field-label">Major Funding Agency <span>*</span></div>
													<div class="form-floating">
														<input id="project_agency" type="text" name="project_agency" class="form-control" placeholder="Major Funding Agency" 
															   required value="{{ $project_agency }}" autocomplete="off">
														<label>Major Funding Agency *</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 Agency") selected @endif value="Government Agency">Government Agency</option>
														<option @if($project_agency_type == "Private Organization") selected @endif value="Private Organization">
															Private Organization
														</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>SIIT Principal Organizer</h4>
												<p>Specify the principal organizer and co-organizer 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>
												SIIT Principal Organizer
											</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 SIIT Principal Organizer</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" style="margin-bottom: 16px">
											<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 class="member-box">
											<div class="member-box-title">
												<i class="uil uil-building" style="color:#4f46e5 !important"></i>
												Co-Organizer and Organization
											</div>

											<div class="row gx-4">
												<div class="col-md-12 mb-4">
													<div class="project-field-label">Co-Organizer(s) <span>*</span></div>
													<div class="form-floating">
														<input id="project_organizer" type="text" name="project_organizer" class="form-control" placeholder="Co-Organizer(s)" 
															   required value="{{ $project_organizer }}" autocomplete="off">
														<label>Co-Organizer(s) *</label>
													</div>
												</div>
												
												<div class="col-md-12 mb-4">
													<div class="project-field-label">Organization(s) <span>*</span></div>
													<div class="form-floating">
														<input id="project_organization" type="text" name="project_organization" class="form-control" placeholder="Organization(s)" 
															   required value="{{ $project_organization }}" autocomplete="off">
														<label>Organization(s) *</label>
													</div>
												</div>
											</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>Conference 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>
												Date of Conference
											</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">Conference From <span>*</span></div>
													<div class="form-floating">
														<input id="project_from" type="text" name="project_from" class="form-control date" placeholder="Conference From" required 
															   value="{{ $project_from }}" autocomplete="off">
														<label>Conference From *</label>
													</div>
												</div>

												<div class="col-md-6 mb-4">
													<div class="project-field-label">Conference To <span>*</span></div>
													<div class="form-floating">
														<input id="project_to" type="text" name="project_to" class="form-control date" placeholder="Conference To" required 
															   value="{{ $project_to }}" autocomplete="off">
														<label>Conference 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)" value="{{ $project_total_thb }}" autocomplete="off">
														<label>Total Budget (THB)</label>
													</div>
												</div>
												
												<div class="col-md-12 mb-4">
													<div class="project-field-label">Brief description of the academic benefit to SIIT</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 class="col-md-12 mb-4">
													<div class="form-check">
														<input class="form-check-input" type="radio" name="project_overhead_type" id="project_overhead_type" value="In this work, I will not use any SIIT facilities, personnel, or process in which SIIT holds propriety rights.">
														<label class="form-check-label">
															In this work, I will not use any SIIT facilities, personnel, or process in which SIIT holds propriety rights.
														</label>
													</div>
													<div class="form-check mb-4">
														<input class="form-check-input" type="radio" name="project_overhead_type" id="project_overhead_type" value="In this work, I will use the following SIIT facilities, personnel, or processses (usage fees follows SIIT rates).">
														<label class="form-check-label">
															In this work, I will use the following SIIT facilities, personnel, or processses (usage fees follows SIIT rates).
														</label>
													</div>
												</div>
											</div>
										</div>
										
										<div class="member-box" style="display: none">
											<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>Keywords</p>
											</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