@extends('layouts.master')





@section('title', 'Workload Arrangement For Administrative Position Add')

@section('style')
    <style>
		/* .section-title {
			color: #0d6efd;
			font-weight: 600;
			margin-bottom: 10px;
		} */

		.info-line {
			font-size: 16px;
			margin-bottom: 5px;
		}

		.info-line .label {
			font-weight: 500;
			color: #333;
			margin-right: 5px;
		}

		.info-line .value {
			color: #0d6efd; /* 🔵 สีน้ำเงิน */
			font-weight: 600;
		}
	</style>
	<style>
		/* radio ปกติ */
		.form-check-input[type="radio"] {
			border: 2px solid #4b5563;
			width: 18px;
			height: 18px;
			cursor: pointer;
			box-shadow: none;
		}

		/* ตอน hover */
		.form-check-input[type="radio"]:hover {
			border-color: #1f2937;
		}

		/* ตอนเลือก */
		.form-check-input[type="radio"]:checked {
			background-color: #2563eb;
			border-color: #1d4ed8;
		}

		/* label */
		.form-check-label {
			color: #374151;
			font-weight: 500;
			cursor: pointer;
		}
	</style>

	<style>

		.arr-selected{

			background:#dbeafe !important;

			font-weight:700;

			color:#0d6efd;

		}

	</style>
@endsection

@section('script')


	<script>
		const data = @json($available);

		// ค่าเดิมจาก DB (ตอน Edit)
		const oldSemester = "{{ $adcontract_value_semester }}";

		function loadSemester(year) {

			let semesterSelect = document.getElementById('semester');

			semesterSelect.innerHTML = '<option value="">Select Semester</option>';

			data.forEach(item => {

				if (item.year == year) {

					let selected = (item.semester == oldSemester) ? 'selected' : '';

					semesterSelect.innerHTML += `
						<option value="${item.semester}" ${selected}>
							${item.semester}
						</option>
					`;
				}

			});

		}

		// เปลี่ยน Year
		document.getElementById('year').addEventListener('change', function () {
			loadSemester(this.value);
		});

		// ====== ตอนเปิดหน้า Edit ======
		window.addEventListener('DOMContentLoaded', function () {

			let year = document.getElementById('year').value;

			if (year != '') {
				loadSemester(year);
			}

		});
	</script>

	<script>

		document
		.querySelectorAll(
			'input[name="adcontract_value_type_id"]'
		)
		.forEach(radio => {

			radio.addEventListener(
				'change',
				function(){

					document
					.querySelectorAll('.arr-col')
					.forEach(col => {

						col.classList.remove(
							'arr-selected'
						);

					});

					document
					.querySelectorAll(
						'.arr-' + this.value
					)
					.forEach(col => {

						col.classList.add(
							'arr-selected'
						);

					});

				}
			);

		});

		window.onload = function(){

			let selected = document.querySelector(
				'input[name="adcontract_value_type_id"]:checked'
			);

			if(selected){

				selected.dispatchEvent(
					new Event('change')
				);

			}

		}

	</script>

	<script>
		function openArrangementPreview()
		{
			const year =
				document.getElementById('year').value;

			const semester =
				document.getElementById('semester').value;

			const selectedType =
				document.querySelector(
					'input[name="adcontract_value_type_id"]:checked'
				);


			if (!year) {

				alert('Please select Academic Year.');
				return;

			}


			if (!semester) {

				alert('Please select Semester.');
				return;

			}


			if (!selectedType) {

				alert(
					'Please select Administrative Position Type.'
				);

				return;

			}


			//=========================================
			// Preview Year
			//=========================================

			document.getElementById(
				'previewArrangementYear'
			).textContent = year;


			//=========================================
			// Preview Semester
			//=========================================

			document.getElementById(
				'previewArrangementSemester'
			).textContent = semester;


			//=========================================
			// Preview Type
			//=========================================

			const typeLabel =
				document.querySelector(
					'label[for="' + selectedType.id + '"]'
				);


			document.getElementById(
				'previewArrangementType'
			).textContent =
				typeLabel
					? typeLabel.textContent.trim()
					: '-';


			//=========================================
			// Preview Arrangement Table
			//=========================================

			const selectedTypeId =
				selectedType.value;


			const previewBody =
				document.getElementById(
					'previewArrangementTable'
				);


			previewBody.innerHTML = '';


			const rows =
				document.querySelectorAll(
				'#workloadArrangementTable tbody tr'
				);

			let no = 1;


			rows.forEach(function(row) {

				const cells =
					row.querySelectorAll('td');


				if (cells.length < 4) {
					return;
				}


				const title =
					cells[1]?.textContent.trim()
					?? '-';


				const unit =
					cells[2]?.textContent.trim()
					?? '-';


				const selectedCell =
					row.querySelector(
						'.arr-' + selectedTypeId
					);


				const value =
					selectedCell
						? selectedCell.textContent.trim()
						: '-';


				const tr =
					document.createElement('tr');


				tr.innerHTML = `

					<td>${no}</td>

					<td>${title}</td>

					<td>${unit}</td>

					<td class="arr-selected">
						${value}
					</td>

				`;


				previewBody.appendChild(tr);

				no++;

			});


			//=========================================
			// Open Modal
			//=========================================

			const modal =
				new bootstrap.Modal(
					document.getElementById(
						'arrangementPreviewModal'
					)
				);


			modal.show();
		}

		function saveArrangementDraft()
		{
			document.getElementById(
				'arrangementAction'
			).value = 'draft';

			document.querySelector(
				'form.contact-form'
			).submit();
		}


		function submitArrangementForApproval()
		{
			if (!confirm(
				'Are you sure you want to send this Workload Arrangement for approval?'
			)) {
				return;
			}


			document.getElementById(
				'arrangementAction'
			).value = 'send';


			document.querySelector(
				'form.contact-form'
			).submit();
		}
	</script>
@endsection

@section('content')

@include('layouts.header')


@include('layouts.title')

    <section class="wrapper bg-light">
        <div class="container py-15 py-md-17">
            <div class="col-md-12">

                <!-- <div class="mb-5">

					<div class="d-flex justify-content-between mb-2">

						<span class="text-primary fw-bold">
							● Workload Arrangement
						</span>

						<span class="text-muted">
							○ Preview
						</span>

						<span class="text-muted">
							○ Approval
						</span>

					</div>

					<div class="progress" style="height:8px">

						<div
							class="progress-bar"
							role="progressbar"
							style="width:33%">
						</div>

					</div>

				</div> -->

                <div class="col-md-12">
                    <h5 class="display-1 mb-3" style="font-size: 30px">@yield('title')</h5>
                    <p class="lead fs-lg pe-lg-15 pe-xxl-12"></p>
                </div>

            </div>
            
            
            

            <div class="col-lg-12">
				<div class="blog single">
					<div class="card">
						<div class="card-body">
		
                        
							<div class="row">
								<div class="col-lg-12">

									<form class="contact-form" method="post" action="{{ url('/loadedit') }}" enctype="multipart/form-data">
										{{ csrf_field() }}
                                       
										<input type="hidden" name="adcontract_value_id" value="{{ $adcontract_value_id }}">
										<input type="hidden" name="adcontract_ids" value="{{ $adcontract_id }}">
										<input type="hidden" name="action" id="arrangementAction" value="">

										<h5 class="display-1 mb-3" style="font-size: 25px">II. Administative Position</h5>
                                        <hr style="border: 0; height: 4px; background-color: #0d6efd; opacity: 1; margin-top: 10px; margin-bottom: 20px;" />
										<h5 class="display-1 mb-3" style="font-size: 20px">A. Position</h5>

										<div class="row info-line">
											<div class="col-md-6">
												<span class="label">Administrative Position :</span>
												<span class="value">{{ $adcontract->admin_position_name }}</span>
											</div>
											<div class="col-md-6">
												<span class="label">Sub Position :</span>
												<span class="value">{{ $adcontract->admin_position_sub_name }}</span>
											</div>

											<div class="col-md-6">
												<span class="label">Appointment No. :</span>
												<span class="value">{{ $adcontract->adcontract_no }}</span>
											</div>
										</div>
										<br>

										<h5 class="display-1 mb-3" style="font-size: 20px">B. Workload Arrangement for Administrative Position Type</h5>
										<h5 class="display-1 mb-3" style="font-size: 16px; color: red;">
											Please Select Your Workload Arrangement For Administrative Position
										</h5>
										<div class="col-lg-12">
											<div class="blog single">
												<div class="card">
													<div class="card-body">
													<div class="row gx-4">

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

																<select name="adcontract_value_year" id="year" class="form-select" required>
																	<option value="">Select Year</option>
																	@foreach($years as $year)
																		<option value="{{ $year }}" @if ($adcontract_value_year == $year) selected @endif>
																			{{ $year }}
																		</option>
																	@endforeach
																</select>
																<label>Academic Year *</label>
															</div>
														</div>

														<div class="col-md-6">
															<div class="form-floating mb-4">
																<select name="adcontract_value_semester" id="semester" class="form-select" required>
																	<option value="">Select Semester</option>
																</select>
																<label>Semester *</label>
															</div>
														</div>

														<!-- 🔷 Radio -->
														<div class="mb-4">
															<h6>
																Administrative Position Type *
															</h6>
															
															<div class="row">
																@foreach ($adposition_type as $item)
																	<div class="col-md-12">
																		<div class="form-check custom-radio">

																			<input class="form-check-input"
																				type="radio"
																				name="adcontract_value_type_id"
																				id="type_{{ $item->adposition_type_id }}"
																				value="{{ $item->adposition_type_id }}"
																				{{ (isset($adcontract_value) && $adcontract_value->adcontract_value_type_id == $item->adposition_type_id) ? 'checked' : '' }} required>
																				

																			<label class="form-check-label" for="type_{{ $item->adposition_type_id }}">
																				{{ $item->adposition_type_name }}
																			</label>

																		</div>
																	</div>
																@endforeach
															</div>
														</div>
														<div class="card mt-4">

															<div class="card-header bg-light">

																<strong>
																	Workload Arrangement Table
																</strong>

															</div>

															<div class="card-body">

																<table id="workloadArrangementTable" class="table table-bordered">

																	<thead>

																		<tr>

																			<th>No.</th>

																			<th>
																				Workload Arrangement
																			</th>

																			<th>
																				Unit
																			</th>

																			@foreach ($adposition_types as $item)

																				<th
																					class="arr-col arr-{{ $item->adposition_type_id }}"
																				>
																					{{ $item->adposition_type_name }}
																				</th>

																			@endforeach

																		</tr>

																	</thead>

																	<tbody>

																		@foreach ($Wadpositions as $index => $w)

																			<tr>

																				<td>
																					{{ $index + 1 }}
																				</td>

																				<td>
																					{{ $w->Wadposition_title }}
																				</td>

																				<td>
																					{{ $w->unit_name }}
																				</td>

																				@foreach ($adposition_types as $item)

																					@php

																						$value = $wpositions
																							->where(
																								'wposition_name',
																								$w->Wadposition_id
																							)
																							->where(
																								'wposition_type_id',
																								$item->adposition_type_id
																							)
																							->first();

																					@endphp

																					<td
																						class="arr-col arr-{{ $item->adposition_type_id }}"
																					>
																						{{ $value->wposition_value ?? '-' }}
																					</td>

																				@endforeach

																			</tr>

																		@endforeach

																	</tbody>

																</table>

															</div>

														</div>

													</div>
												</div>
											</div>
										</div>
										<br>
										
										<h5 class="display-1 mb-3" style="font-size: 20px">C. Period</h5>
										<div class="row info-line">
											<div class="col-md-6">
												<span class="label">Start Date :</span>
												<span class="value">{{ $adcontract->adcontract_start_date }}</span>
											</div>

											<div class="col-md-6">
												<span class="label">End Date :</span>
												<span class="value">{{ $adcontract->adcontract_end_date }}</span>
											</div>
										</div>
										<br>

										
										<hr style="border: 0; height: 4px; background-color: #0d6efd; opacity: 1;"/>
										

                
										<div style="clear: both"></div><br><br><br>


                                        <div class="text-center mt-5">

											<!-- <button
												type="submit"
												name="action"
												value="draft"
												class="btn btn-secondary rounded-pill">

												<i class="uil uil-save me-1"></i>
												Save Draft

											</button> -->
											<button
												type="button"
												class="btn btn-secondary rounded-pill"
												onclick="saveArrangementDraft()">

												Save Draft

											</button>


											<button
												type="button"
												class="btn btn-primary rounded-pill"
												onclick="openArrangementPreview()">

												<i class="uil uil-eye me-1"></i>
												Preview

											</button>

										</div>

										
										
										
									</form>
								</div>
							</div>

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


			

           
           
        </div>
    </section>



	<div class="modal fade" id="arrangementPreviewModal" tabindex="-1" aria-hidden="true">

		<div class="modal-dialog modal-xl modal-dialog-scrollable">

			<div class="modal-content">

				<div class="modal-header bg-primary text-white">

					<h5 class="modal-title text-white">
						Workload Arrangement Preview
					</h5>

					<button
						type="button"
						class="btn-close btn-close-white"
						data-bs-dismiss="modal">
					</button>

				</div>


				<div class="modal-body">

					{{-- ================================ --}}
					{{-- A. Position --}}
					{{-- ================================ --}}

					<h5 class="fw-bold mb-3">
						A. Position
					</h5>

					<div class="row info-line">

						<div class="col-md-6">

							<span class="label">
								Administrative Position :
							</span>

							<span class="value">
								{{ $adcontract->admin_position_name }}
							</span>

						</div>

						<div class="col-md-6">

							<span class="label">
								Sub Position :
							</span>

							<span class="value">
								{{ $adcontract->admin_position_sub_name }}
							</span>

						</div>

						<div class="col-md-12">

							<span class="label">
								Appointment No. :
							</span>

							<span class="value">
								{{ $adcontract->adcontract_no }}
							</span>

						</div>

					</div>


					<hr>


					{{-- ================================ --}}
					{{-- B. Arrangement --}}
					{{-- ================================ --}}

					<h5 class="fw-bold mb-3">

						B. Workload Arrangement for
						Administrative Position Type

					</h5>


					<div class="row info-line">

						<div class="col-md-4">

							<span class="label">
								Academic Year :
							</span>

							<span
								class="value"
								id="previewArrangementYear">
								-
							</span>

						</div>

						<div class="col-md-4">

							<span class="label">
								Semester :
							</span>

							<span
								class="value"
								id="previewArrangementSemester">
								-
							</span>

						</div>

						<div class="col-md-4">

							<span class="label">
								Administrative Position Type :
							</span>

							<span
								class="value"
								id="previewArrangementType">
								-
							</span>

						</div>

					</div>


					<div class="card mt-4">

						<div class="card-header bg-light">

							<strong>
								Workload Arrangement Table
							</strong>

						</div>

						<div class="card-body">

							<div class="table-responsive">

								<table class="table table-bordered">

									<thead>

										<tr>

											<th>No.</th>

											<th>
												Workload Arrangement
											</th>

											<th>
												Unit
											</th>

											<th>
												Selected Value
											</th>

										</tr>

									</thead>

									<tbody id="previewArrangementTable">

										{{-- JS เติมตรงนี้ --}}

									</tbody>

								</table>

							</div>

						</div>

					</div>


					<hr>


					{{-- ================================ --}}
					{{-- C. Period --}}
					{{-- ================================ --}}

					<h5 class="fw-bold mb-3">
						C. Period
					</h5>

					<div class="row info-line">

						<div class="col-md-6">

							<span class="label">
								Start Date :
							</span>

							<span class="value">

								{{ $adcontract->adcontract_start_date }}

							</span>

						</div>

						<div class="col-md-6">

							<span class="label">
								End Date :
							</span>

							<span class="value">

								{{ $adcontract->adcontract_end_date }}

							</span>

						</div>

					</div>

				</div>


				<div class="modal-footer">

					<button
						type="button"
						class="btn btn-light"
						data-bs-dismiss="modal">

						<i class="uil uil-arrow-left me-1"></i>
						Back

					</button>


					

					<button
						type="button"
						class="btn btn-success rounded-pill"
						onclick="submitArrangementForApproval()">

						<i class="uil uil-message me-1"></i>

						Send to Approve

					</button>

				</div>

			</div>

		</div>

	</div>


        @include('layouts.footer')

    @endsection