@extends('layouts.master')





@section('title', 'Add/Edit Employee Contract Settings')

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

@section('script')

    <script>
        //ฟอร์มทั้งหมด

        document.addEventListener("DOMContentLoaded", function() {

            // ===== Employment Track =====
            const employmentRadios = document.querySelectorAll('.employment-track');
            const regularSection = document.getElementById('regular-section');
            const teachingSection = document.getElementById('teaching-section');
            const missionSection = document.getElementById('mission-section');

            function showSection(value){

                if(regularSection) regularSection.style.display = 'none';
                if(teachingSection) teachingSection.style.display = 'none';
                if(missionSection) missionSection.style.display = 'none';

                if(value == '1' && regularSection){
                    regularSection.style.display = 'block';
                }

                if(value == '2' && teachingSection){
                    teachingSection.style.display = 'block';
                }

                if(value == '3' && missionSection){
                    missionSection.style.display = 'block';
                }
            }

            employmentRadios.forEach(radio => {

                radio.addEventListener('change', function(){
                    showSection(this.value);
                });

                if(radio.checked){
                    showSection(radio.value);
                }

            });



            // ===== Regular Mode =====
            const regularModes = document.querySelectorAll('.regular-mode');
            const typeSection = document.getElementById('contract-type-section');
            const rangeSection = document.getElementById('contract-range-section');

            function showRegularOption(value){

                if(typeSection) typeSection.style.display = 'none';
                if(rangeSection) rangeSection.style.display = 'none';

                if(value === 'type' && typeSection){
                    typeSection.style.display = 'block';
                }

                if(value === 'range' && rangeSection){
                    rangeSection.style.display = 'block';
                }

            }

            regularModes.forEach(radio => {

                radio.addEventListener('change', function(){
                    showRegularOption(this.value);
                });

                if(radio.checked){
                    showRegularOption(radio.value);
                }

            });



            // ===== Contract Type → Contract No =====
            const contractType = document.getElementById("contract_type");

            if(contractType){

                contractType.addEventListener("change", function(){

                    const selected = this.options[this.selectedIndex];
                    const no = selected.getAttribute("data-no");

                    document.getElementById("contract_no").value = no ?? "";

                });

                if(contractType.value){
                    const selected = contractType.options[contractType.selectedIndex];
                    const no = selected.getAttribute("data-no");
                    document.getElementById("contract_no").value = no ?? "";
                }

            }



            // ===== Contract Range → Contract No =====
            const contractRange = document.getElementById("contract_range");

            if(contractRange){

                contractRange.addEventListener("change", function(){

                    const selected = this.options[this.selectedIndex];
                    const no = selected.getAttribute("data-no");

                    document.getElementById("age_type_no").value = no ?? "";

                });

                if(contractRange.value){
                    const selected = contractRange.options[contractRange.selectedIndex];
                    const no = selected.getAttribute("data-no");
                    document.getElementById("age_type_no").value = no ?? "";
                }

            }



            // ===== Teaching Type → Contract No =====
            const teachingType = document.getElementById("teaching_type");

            if(teachingType){

                teachingType.addEventListener("change", function(){

                    const selected = this.options[this.selectedIndex];
                    const no = selected.getAttribute("data-no");

                    document.getElementById("teaching_type_no").value = no ?? "";

                });

                if(teachingType.value){
                    const selected = teachingType.options[teachingType.selectedIndex];
                    const no = selected.getAttribute("data-no");
                    document.getElementById("teaching_type_no").value = no ?? "";
                }

            }



            // ===== Mission Type → Contract No =====
            const missionType = document.getElementById("mission_type");

            if(missionType){

                missionType.addEventListener("change", function(){

                    const selected = this.options[this.selectedIndex];
                    const no = selected.getAttribute("data-no");

                    document.getElementById("mission_type_no").value = no ?? "";

                });

                if(missionType.value){
                    const selected = missionType.options[missionType.selectedIndex];
                    const no = selected.getAttribute("data-no");
                    document.getElementById("mission_type_no").value = no ?? "";
                }

            }



            // ===== Mission Type → Show Table Rows =====
            const missionTable = document.getElementById("mission-table");
            const missionRows = document.querySelectorAll(".mission-row");

            if(missionType){

                function showMissionRows(typeId){

                    if(!missionTable) return;

                    missionTable.style.display = "table";

                    missionRows.forEach(row => {

                        if(row.dataset.type === typeId){
                            row.style.display = "";
                        }else{
                            row.style.display = "none";
                        }

                    });

                }

                missionType.addEventListener("change", function(){
                    showMissionRows(this.value);
                });

                if(missionType.value){
                    showMissionRows(missionType.value);
                }

            }

        });


    </script>








        <script>

            let base_url = "{{ asset('file/fcontract') }}";
            let delete_url = "{{ url('/fcontract_delete') }}";


            document.getElementById('request_file1').onchange = function(){

                let file = this.files[0];
                let id = "{{ $fcontract_id }}";

                if(file){
                    document.getElementById('show_request_file1').innerHTML =
                    file.name;
                }

            };

            document.getElementById('request_file2').onchange = function(){

                let file = this.files[0];
                let id = "{{ $fcontract_id }}";

                if(file){
                    document.getElementById('show_request_file2').innerHTML =
                    file.name;
                }

            };

            // โหลดไฟล์เดิม
            window.onload = function(){

                let old1 = document.getElementById('old_file1').value;
                let old2 = document.getElementById('old_file2').value;
                let id = "{{ $fcontract_id }}";

                if(old1){
                    document.getElementById('show_request_file1').innerHTML =
                    '<a href="'+base_url+'/'+old1+'" target="_blank">'+old1+'</a> '+
                    '<a class="btn btn-circle btn-red btn-sm" href="'+delete_url+'/'+id+'/1" '+
                    'onclick="return confirm(\'Confirm Delete ?\');">'+
                    '<i class="uil uil-trash-alt"></i></a>';
                }

                if(old2){
                    document.getElementById('show_request_file2').innerHTML =
                    '<a href="'+base_url+'/'+old2+'" target="_blank">'+old2+'</a> '+
                    '<a class="btn btn-circle btn-red btn-sm" href="'+delete_url+'/'+id+'/2" '+
                    'onclick="return confirm(\'Confirm Delete ?\');">'+
                    '<i class="uil uil-trash-alt"></i></a>';
                }

            };

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

							
                            <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">I. Employee Contract</h5>
                                                    <hr style="border: 0; height: 4px; background-color: #0d6efd; opacity: 1;"/>
                                                    <!-- <hr style="border: 0; height: 4px; background-color: #0d6efd; opacity: 1; margin-top: 10px; margin-bottom: 20px;" /> -->
                                                    
                                                    <form class="contact-form" method="POST" action="{{ url('/fcontract_empedit') }}" enctype="multipart/form-data">
                                                        {{ csrf_field() }}

                                                        <input type="hidden" name="fcontract_id" value="{{ $fcontract->fcontract_id ?? 0 }}">
                                                        <input type="hidden" name="faculty_userid" value="{{ $id }}">

                                                        
                                                        <h5 class="mb-3" style="font-size:20px">A. Employment Track</h5>

                                                        {{-- ===== Employment Track ===== --}}
                                                        <div class="form-check">
                                                            <input class="form-check-input employment-track"
                                                                type="radio"
                                                                name="fcontract_emp_id"
                                                                value="1"
                                                                {{ $fcontract_emp_id == 1 ? 'checked' : '' }}>
                                                            <label class="form-check-label">Regular</label>
                                                        </div>

                                                        <div class="form-check">
                                                            <input class="form-check-input employment-track"
                                                                type="radio"
                                                                name="fcontract_emp_id"
                                                                value="2"
                                                                {{ $fcontract_emp_id == 2 ? 'checked' : '' }}>
                                                            <label class="form-check-label">Teaching Oriented</label>
                                                        </div>

                                                        <div class="form-check mb-4">
                                                            <input class="form-check-input employment-track"
                                                                type="radio"
                                                                name="fcontract_emp_id"
                                                                value="3"
                                                                {{ $fcontract_emp_id == 3 ? 'checked' : '' }}>
                                                            <label class="form-check-label">Mission Based</label>
                                                        </div>


                                                        {{-- ================= REGULAR ================= --}}
                                                        <div id="regular-section" style="display:none; border-left:3px solid #0d6efd; padding-left:15px; margin-bottom:25px;">

                                                            <h6 style="font-weight:600;">Regular Options</h6>

                                                            <div class="form-check">
                                                                <input class="form-check-input regular-mode"
                                                                    type="radio"
                                                                    name="regular_mode"
                                                                    value="type"
                                                                    {{ $fcontract_regular_option == 1 ? 'checked' : '' }}>
                                                                <label class="form-check-label">I. Contract Type (1-60)</label>
                                                            </div>

                                                            <div class="form-check mb-3">
                                                                <input class="form-check-input regular-mode"
                                                                    type="radio"
                                                                    name="regular_mode"
                                                                    value="range"
                                                                    {{ $fcontract_regular_option == 2 ? 'checked' : '' }}>
                                                                <label class="form-check-label">II. Contract Range (after 60)</label>
                                                            </div>

                                                            
                                                            {{-- I. Contract Type --}}
                                                            <div id="contract-type-section" style="display:none;">

                                                                <div class="row">

                                                                    {{-- Contract Type --}}
                                                                    <div class="col-md-4">
                                                                        <div class="form-floating mb-4">

                                                                            <select class="form-select"
                                                                                    id="contract_type"
                                                                                    name="regular_contract_type_id">

                                                                                <option value="" disabled>Select Contract Type</option>

                                                                                @foreach ($contracts as $item)

                                                                                    <option value="{{ $item->contract_id }}"
                                                                                            data-no="{{ $item->contract_no }}"
                                                                                            {{ (isset($fcontract) && $fcontract->fcontract_contract_type_id == $item->contract_id) ? 'selected' : '' }}>

                                                                                        {{ $item->contract_type }}

                                                                                    </option>

                                                                                @endforeach

                                                                            </select>

                                                                            <label>Contract Type *</label>

                                                                        </div>
                                                                    </div>


                                                                    {{-- Contract No --}}
                                                                    <div class="col-md-4">
                                                                        <div class="form-floating mb-4">

                                                                            <input type="text"
                                                                                class="form-control"
                                                                                id="contract_no"
                                                                                name="contract_no"
                                                                                readonly
                                                                                style="background:#e9ecef;"
                                                                                value="{{ $fcontract->contract_no ?? '' }}">

                                                                            <label>Contract No.</label>

                                                                        </div>
                                                                    </div>

                                                                </div>

                                                            </div>
                                                            {{-- II. Contract Range --}}
                                                            <div id="contract-range-section" style="display:none;">
                                                                <div class="row">

                                                                    <div class="col-md-4">
                                                                        <div class="form-floating mb-4">
                                                                            <select class="form-select" id="contract_range" name="regular_contract_range_id">
                                                                                <option disabled selected>Select Contract Range</option>
                                                                                @foreach ($age_type as $age)
                                                                                    <option value="{{ $age->age_type_id }}"
                                                                                            data-no="{{ $age->age_type_no }}"
                                                                                             {{ (isset($fcontract) && $fcontract->fcontract_age_type_id == $age->age_type_id) ? 'selected' : '' }}>
                                                                                        {{ $age->age_type_name }}
                                                                                    </option>
                                                                                @endforeach
                                                                            </select>
                                                                            <label>Contract Range *</label>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-4">
                                                                        <div class="form-floating mb-4">

                                                                            <input type="text"
                                                                                class="form-control"
                                                                                id="age_type_no"
                                                                                name="age_type_no"
                                                                                readonly
                                                                                style="background:#e9ecef;"
                                                                                value="{{ $fcontract->age_type_no ?? '' }}">


                                                                            <label>Contract No.</label>

                                                                        </div>
                                                                    </div>

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



                                                        {{-- ================= TEACHING ================= --}}
                                                        <div id="teaching-section" style="display:none; border-left:3px solid #198754; padding-left:15px; margin-bottom:25px;">

                                                            <h6 style="font-weight:600;">Teaching Oriented</h6>

                                                            <div class="row">
                                                                <div class="col-md-4">
                                                                    <div class="form-floating mb-4">
                                                                        <select class="form-select" id="teaching_type" name="teaching_type_id">
                                                                            <option disabled selected>Select Teaching Oriented Type</option>
                                                                            @foreach ($teaching_type as $item)
                                                                                <option value="{{ $item->teaching_type_id }}"
                                                                                        data-no="{{ $item->teaching_type_no }}"
                                                                                         {{ (isset($fcontract) && $fcontract->fcontract_teaching_type_id == $item->teaching_type_id) ? 'selected' : '' }}>
                                                                                    {{ $item->teaching_type_name }}
                                                                                </option>
                                                                            @endforeach
                                                                        </select>
                                                                        <label>Teaching Oriented Type *</label>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <div class="form-floating mb-4">

                                                                        <input type="text"
                                                                                class="form-control"
                                                                                id="teaching_type_no"
                                                                                name="teaching_type_no"
                                                                                readonly
                                                                                style="background:#e9ecef;"
                                                                                value="{{ $fcontract->teaching_type_no ?? '' }}">

                                                                        <label>Contract No.</label>

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



                                                        {{-- ================= MISSION ================= --}}
                                                        <div id="mission-section" style="display:none; border-left:3px solid #dc3545; padding-left:15px; margin-bottom:25px;">

                                                            <h6 style="font-weight:600;">Mission Based</h6>

                                                            <div class="row">
                                                                <div class="col-md-4">
                                                                    <div class="form-floating mb-4">
                                                                        <select class="form-select" id="mission_type" name="mission_type_id">
                                                                            <option disabled selected>Select Mission Based Type</option>
                                                                            @foreach ($mission_type as $item)
                                                                                <option value="{{ $item->mission_type_id }}" data-no="{{ $item->mission_type_no }}"
                                                                                {{ (isset($fcontract) && $fcontract->fcontract_mission_type_id == $item->mission_type_id) ? 'selected' : '' }}>
                                                                                    {{ $item->mission_type_name }}
                                                                                </option>
                                                                            @endforeach
                                                                        </select>
                                                                        <label>Mission Based Type *</label>
                                                                    </div>
                                                                </div>

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

                                                                        <input type="text"
                                                                                class="form-control"
                                                                                id="mission_type_no"
                                                                                name="mission_type_no"
                                                                                readonly
                                                                                style="background:#e9ecef;"
                                                                                value="{{ $fcontract->mission_type_no ?? '' }}">

                                                                        <label>Contract No.</label>

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

                                                            <table class="table table-bordered" id="mission-table" style="display:none;">
                                                                <thead class="table-light">
                                                                    <tr>
                                                                        <th style="width:40%">Workload Arrangement</th>
                                                                        <th style="width:30%">Unit</th>
                                                                        <th style="width:30%">Value</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>

                                                                @foreach($WAMissions as $w)

                                                                    @php
                                                                        $existing = $mission_value
                                                                            ->where('value_WAMission_id', $w->WAMission_id)
                                                                            ->first();
                                                                    @endphp

                                                                    <tr>

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

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

                                                                        <td>
                                                                            <input type="text"
                                                                                name="value_score[{{ $w->WAMission_id }}]"
                                                                                class="form-control"
                                                                                value="{{ $existing->value_score ?? '' }}">
                                                                        </td>

                                                                    </tr>

                                                                @endforeach

                                                                </tbody>
                                                            </table>
                                                        </div>

                                                        
                                                        
                                                        <br>

                                                        <h5 class="display-1 mb-3" style="font-size: 20px">B. Academic Rank</h5>

                                                        <div class="col-md-12">
                                                            <div class="form-floating mb-4">
                                                                <select class="form-select" placeholder="" name="fcontract_academic_rank" id="">
                                                                    <option value="default" selected disabled>Please Select Academic Rank</option>
                                                                    @foreach ($academic_rank as $id => $item)
                                                                         <option value="{{ $item->academic_rank_id }}"{{ $fcontract_academic_rank == $item->academic_rank_id ? 'selected' : '' }}>{{ $item->academic_rank_name }}</option>
                                                                    @endforeach
                                                                </select>
                                                                <label for="textInputExample">Academic Rank *</label>
                                                            </div>
                                                        </div>
                                                        
                                                        <br>

                                                        <h5 class="display-1 mb-3" style="font-size: 20px">C. Affiliated Fund</h5>
                                                        @foreach ($fund as $item)

                                                        <div class="form-check">

                                                            <input class="form-check-input"
                                                                type="radio"
                                                                name="fund_id"
                                                                id="fund_{{ $item->fund_id }}"
                                                                value="{{ $item->fund_id }}"
                                                                {{ (isset($fcontract) && $fcontract->fcontract_fund == $item->fund_id) ? 'checked' : '' }}>

                                                            <label class="form-check-label" for="fund_{{ $item->fund_id }}">
                                                                {{ $item->fund_name }}
                                                            </label>

                                                        </div>

                                                        @endforeach
                                                       



                                                        

                                                        <br>
                                                       
                                                        <h5 class="display-1 mb-3" style="font-size: 20px">D. 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="{{ $fcontract_start_date }}" placeholder="" name="fcontract_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="{{ $fcontract_end_date }}" placeholder="" name="fcontract_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>
                                                                        <input type="hidden" id="old_file1" value="{{ $fcontract_doc_rank }}">
                                                                        <input type="hidden" id="old_file2" value="{{ $fcontract_doc_tor }}">
                                                                        <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.Academic Rank Appointment</label> <br>
                                                                                            <label class="btn btn-violet btn-sm rounded-pill" style="cursor:pointer; margin-top: 5px">
                                                                                                Browse <input type="file" name="request_file[]" id="request_file1" accept=".pdf" 
                                                                                                            style="display: none;">
                                                                                            </label>
                                                                                            <span id="show_request_file1"></span>
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="col-md-6" style="margin-bottom: 20px">
                                                                                        <div class="form-control">
                                                                                            <label style="color: #9499a3">2.TOR</label> <br>
                                                                                            <label class="btn btn-violet btn-sm rounded-pill" style="cursor:pointer; margin-top: 5px">
                                                                                                Browse <input type="file" name="request_file[]" id="request_file2" accept=".pdf" 
                                                                                                            style="display: none;">
                                                                                            </label>
                                                                                            <span id="show_request_file2"></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="fcontract_remark"
                                                                    style="height:150px">{{ $fcontract_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="fcontract_status">
                                                                    <option value="Draft" {{ $fcontract_status=='Draft'?'selected':'' }}>Draft</option>
                                                                    <option value="Active" {{ $fcontract_status=='Active'?'selected':'' }}>Active</option>
                                                                    <!-- <option value="Expired" {{ $fcontract_status=='Expired'?'selected':'' }}>Expired</option> -->
                                                                    <option value="Expired by admin" {{ $fcontract_status=='Expired by admin'?'selected':'' }}>Expired by admin</option>
                                                                    <option value="Cancelled" {{ $fcontract_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