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

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

		document.getElementById('year').addEventListener('change', function() {
			let year = this.value;
			let semesterSelect = document.getElementById('semester');

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

			data.forEach(item => {
				if(item.year == year){
					semesterSelect.innerHTML += 
						`<option value="${item.semester}">${item.semester}</option>`;
				}
			});
		});

		
	</script>

	<script>
	function openPreview(){

		// year
		let year = document.getElementById('year');
		let yearText = year.options[year.selectedIndex]?.text || '';

		// semester
		let semester = document.getElementById('semester').value;

		// type (radio)
		let type = document.querySelector('input[name="adcontract_value_type_id"]:checked');
		let typeText = type ? document.querySelector('label[for="'+type.id+'"]').innerText : '';

		// set preview
		document.getElementById('preview_year').innerText = yearText;
		document.getElementById('preview_semester').innerText = semester;
		document.getElementById('preview_type').innerText = typeText;

		// show modal
		let modal = new bootstrap.Modal(document.getElementById('previewModal'));
		modal.show();
	}

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

@section('content')

@include('layouts.header')


	@include('layouts.title')
    <!-- <nav aria-label="breadcrumb" style="background-color:#f5f5f5; padding:10px 15px; border-radius:6px;">
        <ol class="breadcrumb" style="margin-bottom:0; background:none;">
            <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ url('/employee') }}">Employee Contract</a></li>
			<li class="breadcrumb-item"><a href="{{ url('/age_typelist') }}">Age Range Type</a></li>
            <li class="breadcrumb-item active" aria-current="page"
                style="color:#000; font-weight:700;">
                @yield('title')
            </li>
        </ol>
    </nav> -->

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


            <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 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('/arrangementedit') }}" 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 }}">
																			{{ $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>
												</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>

                
										<div style="clear: both"></div><br><br><br>
                
										
										<!-- <div class="col-12 text-center">
											<input type="submit" class="btn btn-primary rounded-pill btn-send mb-3" value="Submit">
											<p class="text-muted"><strong>*</strong> These fields are required.</p>
										</div> -->

										<div class="col-12 text-center">
											<button type="button" class="btn btn-primary rounded-pill" onclick="openPreview()">
												
												Preview
											</button>
										</div>

										<!-- Modal -->
										<!-- <div class="modal fade" id="previewModal" tabindex="-1">
										<div class="modal-dialog modal-lg">
											<div class="modal-content">

											<div class="modal-header">
												<h5 class="modal-title">Preview Before Submit</h5>
												<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
											</div>

											<div class="modal-body">
												<h5 class="display-1 mb-3" style="font-size: 25px">II. Administative Position</h5>
												<br>	
												<h5 class="display-1 mb-3" style="font-size: 20px">A. Position</h5>

												<div class="row">
												<div class="col-md-6">
													<b>Administrative Position :</b>
													<span style="color: #0d6efd;">{{ $adcontract->admin_position_name }}</span>
												</div>
												<div class="col-md-6">
													<b>Appointment No. :</b>
													<span style="color: #0d6efd;">{{ $adcontract->adcontract_no }}</span>
												</div>
												</div>
												<br>

									

												<h5 style="font-size:20px">B. Workload Arrangement for Administrative Position Type</h5>
												<div class="row">
												<div class="col-md-6">
													<b>Academic Year :</b>
													<span style="color: #0d6efd;" id="preview_year"></span>
												</div>
												<div class="col-md-6">
													<b>Semester :</b>
													<span style="color: #0d6efd;" id="preview_semester"></span>
												</div>
												</div>

												<div class="mt-2">
												<b>Administrative Position Type :</b>
												<span style="color: #0d6efd;" id="preview_type"></span>
												</div>

												<br>

												<h5 style="font-size:20px">C. Period</h5>
												<div class="row">
												<div class="col-md-6">
													<b>Start Date :</b>
													<span style="color: #0d6efd;">{{ $adcontract->adcontract_start_date }}</span>
												</div>
												<div class="col-md-6">
													<b>End Date :</b>
													<span style="color: #0d6efd;">{{ $adcontract->adcontract_end_date }}</span>
												</div>
												</div>

											</div>

											<div class="modal-footer">
												<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
												Back
												</button>

												
												<button type="submit" class="btn btn-success">
													Send to Approve
												</button>
											</div>

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


										<!-- Modal -->
										<div class="modal fade" id="previewModal" tabindex="-1" aria-hidden="true">
											<div class="modal-dialog modal-lg modal-dialog-centered">
												<div class="modal-content border-0 shadow" style="border-radius: 20px; overflow: hidden;">

													<!-- Header -->
													<div class="modal-header border-0 px-4 pt-4 pb-2">
														<div>
															<div style="font-size:12px; letter-spacing:1px; color:#999;">
																PREVIEW
															</div>
															<h4 class="mb-0 fw-bold">Before Submit</h4>
														</div>

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

													<!-- Body -->
													<div class="modal-body px-4 pt-2 pb-4">

														<!-- Title -->
														<div class="d-flex align-items-center mb-4">
															<div class="me-3 d-flex align-items-center justify-content-center"
																style="
																	width:32px;
																	height:32px;
																	border-radius:50%;
																	background:#dff3ea;
																	color:#1c9c6c;
																	font-weight:600;
																">
																II
															</div>

															<h5 class="mb-0 fw-bold">
																Administrative Position
															</h5>
														</div>

														<!-- Card A -->
														<div class="p-4 mb-4"
															style="
																background:#f5f5f2;
																border-radius:16px;
															">

															<div class="text-uppercase mb-4"
																style="
																	font-size:14px;
																	letter-spacing:.5px;
																	color:#777;
																	font-weight:600;
																">
																A. Position
															</div>

															<div class="row">
																<div class="col-md-6 mb-3 mb-md-0">
																	<div style="font-size:14px; color:#888;">
																		Administrative Position
																	</div>

																	<div class="fw-bold mt-1"
																		style="font-size:20px; color:#138a63;">
																		{{ $adcontract->admin_position_name }}
																	</div>
																</div>

																<div class="col-md-6 mb-3 mb-md-0">
																	<div style="font-size:14px; color:#888;">
																		Sub Position 
																	</div>

																	<div class="fw-bold mt-1"
																		style="font-size:20px; color:#138a63;">
																		{{ $adcontract->admin_position_sub_name }}
																	</div>
																	
																</div>

																<div class="col-md-6">
																	<div style="font-size:14px; color:#888;">
																		Appointment No.
																	</div>

																	<div class="fw-bold mt-1"
																		style="font-size:20px; color:#138a63;">
																		{{ $adcontract->adcontract_no }}
																	</div>
																</div>
															</div>
														</div>

														<!-- Card B -->
														<div class="p-4 mb-4"
															style="
																background:#f5f5f2;
																border-radius:16px;
															">

															<div class="text-uppercase mb-4"
																style="
																	font-size:14px;
																	letter-spacing:.5px;
																	color:#777;
																	font-weight:600;
																">
																B. Workload Arrangement
															</div>

															<div class="row mb-3">
																<div class="col-md-6 mb-3 mb-md-0">
																	<div style="font-size:14px; color:#888;">
																		Academic Year
																	</div>

																	<div class="fw-bold mt-1"
																		style="font-size:20px; color:#138a63;"
																		id="preview_year">
																	</div>
																</div>

																<div class="col-md-6">
																	<div style="font-size:14px; color:#888;">
																		Semester
																	</div>

																	<div class="fw-bold mt-1"
																		style="font-size:20px; color:#138a63;"
																		id="preview_semester">
																	</div>
																</div>
															</div>

															<div>
																<div style="font-size:14px; color:#888;">
																	Administrative Position Type
																</div>

																<div class="fw-bold mt-1"
																	style="font-size:20px; color:#138a63;"
																	id="preview_type">
																</div>
															</div>
														</div>

														<!-- Card C -->
														<div class="p-4"
															style="
																background:#f5f5f2;
																border-radius:16px;
															">

															<div class="text-uppercase mb-4"
																style="
																	font-size:14px;
																	letter-spacing:.5px;
																	color:#777;
																	font-weight:600;
																">
																C. Period
															</div>

															<div class="row">
																<div class="col-md-6 mb-3 mb-md-0">
																	<div style="font-size:14px; color:#888;">
																		Start date
																	</div>

																	<div class="fw-bold mt-1"
																		style="font-size:20px; color:#222;">
																		{{ $adcontract->adcontract_start_date }}
																	</div>
																</div>

																<div class="col-md-6">
																	<div style="font-size:14px; color:#888;">
																		End date
																	</div>

																	<div class="fw-bold mt-1"
																		style="font-size:20px; color:#222;">
																		{{ $adcontract->adcontract_end_date }}
																	</div>
																</div>
															</div>
														</div>

													</div>

													<!-- Footer -->
													<div class="modal-footer border-0 px-4 pb-4 pt-0">

														<button type="button"
																class="btn btn-soft-ash rounded-pill"
																data-bs-dismiss="modal"
																>
															Back
														</button>

														<button type="submit"
																class="btn btn-green rounded-pill"
																>
															Send to approve
														</button>

													</div>

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

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


			

           
           
        </div>
    </section>


        @include('layouts.footer')

    @endsection