@extends('layouts.master')
@section('title', 'Faculty')

@section('style')
    <style>

    </style>
@endsection

@section('script')

<script>

    //==========================================================
    // Picture
    //==========================================================

    $('#file').on('change', function() {

        let fileName =
            this.files.length > 0
                ? this.files[0].name
                : 'No file selected';

        $('#show_file').text(fileName);

    });


    //==========================================================
    // Program Filter By School
    //==========================================================

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

            const schoolSelect =
                document.getElementById(
                    'faculty_school'
                );


            const programOptions =
                document.querySelectorAll(
                    '.program-option'
                );


            if (!schoolSelect) {
                return;
            }


            function filterProgram(clearSelected)
            {

                const schoolId =
                    String(
                        schoolSelect.value
                        || ''
                    );


                programOptions.forEach(
                    function(option)
                    {

                        const programSchool =
                            String(
                                option.dataset.school
                                || ''
                            );


                        const checkbox =
                            option.querySelector(
                                'input[type="checkbox"]'
                            );


                        const show =
                            schoolId !== ''
                            &&
                            schoolId !== 'default'
                            &&
                            programSchool === schoolId;


                        if (show) {

                            option.style.display =
                                'block';

                        } else {

                            option.style.display =
                                'none';


                            if (
                                clearSelected
                                &&
                                checkbox
                            ) {

                                checkbox.checked =
                                    false;

                            }

                        }

                    }
                );

            }


            // ตอนเปิดหน้า Edit
            // ให้แสดง Program ของ School ปัจจุบัน
            filterProgram(false);


            // ตอนเปลี่ยน School
            schoolSelect.addEventListener(
                'change',
                function()
                {

                    filterProgram(true);

                }
            );

        }
    );

</script>

@endsection

@section('content')
    @include('layouts.header')
    {{-- <section class="video-wrapper bg-overlay bg-overlay-gradient px-12 mt-0 min-vh-60 bg-cover bg-image"
        data-image-src="{{ asset('/bg/bg_01_new.png') }}"
        style="background-image: url({{ asset('/bg/bg_01_new.png') }}); background-size: 100%; background-position: center;">
        <div class="video-content">
            <div class="container text-center">
                <div class="row">
                    <div class="col-lg-8 col-xl-6 text-center text-white mx-auto">
                        <h1 class="display-1 fs-54 text-white mb-5"><span class="rotator-zoom">Faculty Add/Edit</span></h1>

                    </div>
                </div>
            </div>
        </div>
    </section> --}}

    @include('layouts.title')

    <section class="wrapper bg-light">
        <div class="container py-10">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div>
                    <span class="text-dark fs-30">Faculty Add/Edit</span>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <form action="{{ url('/facultyedit') }}" class="text-start mb-3" method="post"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-10"></div>
                        </div>
   
                        <input type="hidden" name="faculty_userid" id="faculty_userid" value="{{ $faculty_userid }}">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-floating mb-4">
                                    <input id="textInputExample" type="text" class="form-control"
                                        value="{{ $faculty_code }}" placeholder="" name="faculty_code">
                                    <label for="textInputExample">Staff ID *</label>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-floating mb-4">
                                    <input id="textInputExample" type="text" class="form-control"
                                        value="{{ $faculty_title }}" placeholder="" name="faculty_title">
                                    <label for="textInputExample">Title *</label>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-floating mb-4">
                                    <input id="textInputExample" type="text" class="form-control"
                                        value="{{ $faculty_firstname }}" placeholder="" name="faculty_firstname">
                                    <label for="textInputExample">First Name *</label>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-floating mb-4">
                                    <input id="textInputExample" type="text" class="form-control"
                                        value="{{ $faculty_lastname }}" placeholder=" " name="faculty_lastname">
                                    <label for="textInputExample">Last Name *</label>
                                </div>
                            </div>
                            
                            <div class="col-md-12">
								<div class="form-floating mb-4">
									<input id="faculty_email" type="text" name="faculty_email" class="form-control" placeholder="E-mail" required value="{{ $faculty_email }}"
													   autocomplete="off">
									<label>E-mail *</label>
								</div>
							</div>
                            <div class="col-md-12">
                                <div class="form-floating mb-4">
                                    <select class="form-select" placeholder="" name="faculty_school"  id="faculty_school">
                                        <option value="default" selected disabled>Please select</option>
                                        @foreach ($school as $i => $item)
                                            <option value="{{ $item->school_id }}"
                                                @if ($faculty_school == $item->school_id) selected @endif>{{ $item->school_name }} ({{ $item->school_shortname }})</option>
                                        @endforeach
                                    </select>
                                    <label for="textInputExample">School *</label>
                                </div>
                            </div>

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

                                <div class="mb-4">

                                    <label class="form-label">
                                        Program
                                    </label>


                                    <div
                                        id="program_container"
                                        class="form-control"
                                        style="
                                            min-height: 120px;
                                            max-height: 220px;
                                            overflow-y: auto;
                                            padding: 12px 15px;
                                        ">

                                        @foreach($program as $item)

                                            <div
                                                class="form-check program-option"
                                                data-school="{{ $item->program_school }}">

                                                <input
                                                    class="form-check-input"
                                                    type="checkbox"
                                                    name="faculty_program[]"
                                                    id="program_{{ $item->program_id }}"
                                                    value="{{ $item->program_id }}"
                                                    {{ in_array((string) $item->program_id, $selected_programs ?? []) ? 'checked' : '' }}>


                                                <label
                                                    class="form-check-label"
                                                    for="program_{{ $item->program_id }}">

                                                    {{ $item->program_name }}

                                                </label>

                                            </div>

                                        @endforeach

                                    </div>


                                    <small class="text-muted">
                                        Select one or more programs.
                                    </small>

                                </div>

                            </div>

                            <div class="col-md-12">
                                <div class="form-floating mb-4">
                                    <select class="form-select" placeholder="" name="faculty_position" id="">
                                        <option value="" selected >Please select</option>
                                        @foreach ($sub_positions as $i => $item)
                                            <option value="{{ $item->admin_position_sub_id  }}"
                                                @if ($faculty_position == $item->admin_position_sub_id ) selected @endif>{{ $item->admin_position_sub_name }}</option>
                                        @endforeach
                                    </select>
                                    <label for="textInputExample">Position *</label>
                                </div>
                            </div>
                            
                            <div class="col-md-12">
                                <div class="form-floating mb-4">
                                    <select class="form-select" placeholder="" value="{{ $faculty_status }}" name="faculty_status"
                                        id="" required>
                                        <option value="Pending" @if ($faculty_status == 'Pending') selected @endif>Pending</option>
                                        <option value="Active" @if ($faculty_status == 'Active') selected @endif>Active</option>
                                        <option value="Inactive" @if ($faculty_status == 'Inactive') selected @endif>Inactive</option>
                                    </select>
                                    <label for="textInputExample">Status*</label>
                                </div>
                            </div>

                            
                            <div class="col-md-12">
                                <div class="form-control">
                                    <label style="color: #9499a3">Picture</label> <br>
                                    <input type="hidden" name="user_file_keep" value="{{ $faculty_picture }}">
                                    <label class="btn btn-violet btn-sm rounded-pill"
                                    style="cursor:pointer; margin-top: 5px">
                                    Browse <input type="file" id="file" name="user_file"
                                    accept=".jpg, .png, .jpeg, .gif" style="display: none;">
                                    </label>
                                    <span id="show_file">{{ $faculty_picture }}</span>
                                </div>
                            </div>
                       
                        </div>

                        <div class="col-12 text-center" style="margin-top: 50px">
                            <input type="submit" class="btn btn-sm btn-primary rounded-pill btn-send mb-3" value="Submit">

                            <a class="btn btn-sm btn-violet rounded-pill btn-send mb-3"
                                href="{{ url('/facultylist') }}">
                                <i class="uil uil-back"></i> Back
                            </a>

                            <p class="text-muted"><strong>*</strong> These fields are required.</p>
                        </div>
                        
                    </form>
                </div>
            </div>
        </div>
    </section>

    @include('layouts.footer')
@endsection