@extends('layouts.master')





@section('title', 'Add/Edit Administative Position Settings')

@section('style')
    <style></style>
@endsection

@section('script')
    <script>
        document.getElementById('request_file1').addEventListener('change', function(e) {
            let fileName = e.target.files[0]?.name || 'No file chosen';
            document.getElementById('show_request_file1').innerText = fileName;
        });
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function () {

            const position = document.getElementById('position');
            const subPosition = document.getElementById('sub_position');

            const allOptions = Array.from(subPosition.options);

            function filterSub() {
                const selected = position.value;

                subPosition.innerHTML = '';

                // default option
                // let defaultOption = document.createElement('option');
                // defaultOption.text = 'Please Select Sub Position';
                // defaultOption.disabled = true;
                // defaultOption.selected = true;
                // subPosition.appendChild(defaultOption);
                let defaultOption = document.createElement('option');
                defaultOption.text = 'Please Select Sub Position';
                defaultOption.value = ''; // 🔥 สำคัญมาก
                defaultOption.disabled = false; // 🔥 เอา disabled ออก
                defaultOption.selected = true;
                subPosition.appendChild(defaultOption);

                allOptions.forEach(option => {
                    if(option.dataset.parent == selected){
                        subPosition.appendChild(option);
                    }
                });
            }

            position.addEventListener('change', filterSub);

            // 🔥 ตอน edit (โหลดค่าเก่า)
            if(position.value){
                filterSub();
            }

        });
    </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">
                <h5 class="display-1 mb-3" style="font-size: 30px">@yield('title'):{{ $faculty->faculty_title }} {{ $faculty->faculty_name }}</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">

                            <br>

							<div align="center">
								<div class="item">

                                    @if (empty($faculty->faculty_picture) || $faculty->faculty_picture === 'profile.jpg')

                                        {{-- แสดงอักษรย่อ --}}
                                        <span class="avatar bg-primary text-white w-20 h-20">
                                            <span style="font-size: 25px; font-weight: 600;">
                                                {{ 
                                                    strtoupper(
                                                        mb_substr(explode(' ', $faculty->faculty_name)[0], 0, 1) .
                                                        mb_substr(explode(' ', $faculty->faculty_name)[1] ?? '', 0, 1)
                                                    ) 
                                                }}
                                            </span>
                                        </span>

                                    @else

                                        {{-- แสดงรูป --}}
                                        <img class="rounded-circle w-20 mx-auto mb-4"
                                            src="{{ asset('picture/'.$faculty->faculty_picture) }}"
                                            alt="{{ $faculty->faculty_name }}">

                                    @endif

									<h4 class="mb-1">
										{{ $faculty->faculty_title }} {{ $faculty->faculty_name }}
									</h4>
									<p class="mb-2">{{ $faculty->school_name }} ({{ $faculty->school_shortname }})</p>
								</div>
							</div>

							<hr/>
                            <div class="col-lg-12">
                                <div class="blog single">
                                    <div class="card">
                                        <div class="card-body">
                        
                                            <div class="row">
                                                <div class="col-lg-12">
                                                    <h5 class="display-1 mb-3" style="font-size: 25px">II. Administative Position</h5>
                                                    <hr/>
                                                    
                                                    <form class="contact-form" method="post" action="{{ url('/fcontract_admedit') }}" enctype="multipart/form-data">
                                                        {{ csrf_field() }}


                                                        <input type="hidden" name="adcontract_id" value="{{ $adcontract_id ?? 0 }}">
                                                        <input type="hidden" name="adcontract_faculty_userid" value="{{ $id }}">

                                                        
                                                        <h5 class="display-1 mb-3" style="font-size: 20px">A. Position</h5>
                                                        
                                                        <div class="col-md-12">
                                                            <div class="form-floating mb-4">
                                                                <select class="form-select" name="adcontract_position" id="position" required>
                                                                    <option value="default" selected disabled>Please Select Position</option>

                                                                    @foreach ($admin_position as $row)
                                                                        <option value="{{ $row->admin_position_id }}"
                                                                            {{ ($adcontract_position == $row->admin_position_id) ? 'selected' : '' }}>
                                                                            {{ $row->admin_position_name }}
                                                                        </option>
                                                                    @endforeach

                                                                </select>
                                                                <label>Administrative Position *</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-12">
                                                            <div class="form-floating mb-4">
                                                                <select class="form-select" name="adcontract_position_sub" id="sub_position" required>
                                                                    <option value="" selected>Please Select Sub Position</option>

                                                                    @foreach ($admin_position_sub as $row)
                                                                        <option value="{{ $row->admin_position_sub_id }}"
                                                                            data-parent="{{ $row->admin_position_ids }}"
                                                                            {{ ($adcontract_position_sub == $row->admin_position_sub_id) ? 'selected' : '' }}>
                                                                            {{ $row->admin_position_sub_name }}
                                                                        </option>
                                                                    @endforeach

                                                                </select>
                                                                <label>Sub Position *</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">

                                                            <div class="form-floating mb-4">
                                                                <input id="textInputExample" type="text" class="form-control"
                                                                    value="{{ $adcontract_no }}" placeholder="Appointment No." name="adcontract_no" required>
                                                                <label for="textInputExample">Appointment No.</label>
                                                            </div>
                                                        </div>

                                                        <br>

                                                        <h5 class="display-1 mb-3" style="font-size: 20px">B. Workload Arrangement for Administrative Position Type</h5>
                                                        <p style="color:#6c757d; font-style: italic;">
                                                            The Administrative Position Type will be selected by the faculty member.
                                                        </p>
    
                                                        <br>

                                                        
                                                        <h5 class="display-1 mb-3" style="font-size: 20px">C. Period</h5>


                                                        <div class="row">
                                                            <div class="col-md-4">
                                                                <div class="form-floating mb-4">
                                                                    <input id="textInputExample" type="date" class="form-control"
                                                                        value="{{ $adcontract_start_date }}" placeholder="Start Date" name="adcontract_start_date">
                                                                    <label for="textInputExample">Start Date</label>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <div class="form-floating mb-4">
                                                                    <input id="textInputExample" type="date" class="form-control"
                                                                        value="{{ $adcontract_end_date }}" placeholder="" name="adcontract_end_date">
                                                                    <label for="textInputExample">End Date</label>
                                                                </div>
                                                            </div>
                                                        </div>

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

                                                                        <h5 class="display-1 mb-3" style="font-size: 16px">Required Documents <br><span style="color: red;">File size maximum 10 MB (.PDF)</span></h5>

                                                                        <div id="file-container">
                                                                            <div class="file-group" data-index="1">
                                                                                <div class="row">
                                                                                    <div class="col-md-6" style="margin-bottom: 20px">
                                                                                        <div class="form-control">
                                                                                            <label style="color: #9499a3">1.Administative Position Appointment</label> <br>
                                                                                            <input type="hidden" name="adcontract_file_keep" value="{{ $adcontract_file }}">
                                                                                            <label class="btn btn-violet btn-sm rounded-pill" style="cursor:pointer; margin-top: 5px">
                                                                                                Browse 
                                                                                                <input type="file" name="adcontract_file" id="request_file1" accept=".pdf" style="display: none;">
                                                                                            </label>

                                                                                            <span id="show_request_file1">
                                                                                                {{ $adcontract_file }}
                                                                                            </span>
                                                                                        </div>
                                                                                    </div>
                                                                                    
                                                                                </div>
                                                                            </div>	
                                                                        </div>

                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <br>
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="form-floating mb-4">
                                                                    <textarea id="textareaExample"
                                                                    class="form-control"
                                                                    name="adcontract_remark"
                                                                    style="height:150px">{{ $adcontract_remark ?? '' }}</textarea>
                                                                    <label for="textareaExample">Remark</label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        
                                                        

                                                        <div class="col-md-12">
                                                            <div class="form-floating mb-4">
                                                                <select class="form-select" name="adcontract_status">
                                                                    <option value="Draft" {{ $adcontract_status=='Draft'?'selected':'' }}>Draft</option>
                                                                    <option value="Active" {{ $adcontract_status=='Active'?'selected':'' }}>Active</option>
                                                                    <!-- <option value="Expired" {{ $adcontract_status=='Expired'?'selected':'' }}>Expired</option> -->
                                                                    <option value="Expired by admin" {{ $adcontract_status=='Expired by admin'?'selected':'' }}>Expired by admin</option>
                                                                    <option value="Cancelled" {{ $adcontract_status=='Cancelled'?'selected':'' }}>Cancelled</option>
                                                                </select>
                                                                <label for="textInputExample">Status*</label>
                                                            </div>
                                                        </div>

                                                        <br><br>


                                                        <div class="messages"></div>
                                                        <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>
                                                        
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

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

           
           
        </div>
    </section>


        @include('layouts.footer')

    @endsection