@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>


@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">
                            ● Administrative Position
                        </span>

                        <span class="text-muted">
                            ○ Teaching Load
                        </span>

                        <!-- <span class="text-muted">
                            ○ Supervision
                        </span>

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

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

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

                    </div>

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

                        <div class="progress-bar"
                            role="progressbar"
                            style="width:16%">
                        </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 }}">
										<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 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>
										<div class="alert alert-warning alert-icon" role="alert">
											<b>Note :</b>

											Teaching Load will be imported automatically
											from the Registration System after selecting
											Academic Year and Semester.
										</div>
										<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">

                                                Save Draft

                                            </button>

                                            <button type="submit"
                                                name="action"
                                                value="next"
                                                class="btn btn-success rounded-pill">

                                                Next Step

                                            </button>
                                            ```

                                        </div>

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

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


			

           
           
        </div>
    </section>


        @include('layouts.footer')

    @endsection