@extends('frontend.template.popup.base_popup')

@php
$custom_open_popup_button = true;

$popup_id = 'quotation_inquiry_school_pupop';
$popup_button_id = 'quotation_inquiry_school_pupop_button';

$popup_title = '更新任教學校';
$popup_button_text = '更新任教學校';
$is_lg_model = true;
@endphp

@section('open_popup_button')
    <div id="{{ $popup_button_id }}" class="btn btn-primary px-3 px-xl-5 border-radius-25" data-toggle="modal" data-target="#{{ $popup_id }}">
        {{ $popup_button_text }}
    </div>
    <input type="text" id="quotation_inquiry_school_id" name="quotation_inquiry_school_id" hidden>
@endsection

@section('popup_body')
    <div id="tab-title-all" class='row flex-row mb-4 px-3'>
        <div id="tab-1-title" class="text-center col-3" style="border-bottom:6px solid #0c9">
            <h1 class="sub-title-base">步驟1</h1>
            <p class="text-size-l">更新任教學校</p>
        </div>
        <div id="tab-2-title" class="text-center col-3" style="border-bottom:6px solid #fb8f67">
            <h1 class="sub-title-base">步驟2</h1>
            <p class="text-size-l">更新學科</p>
        </div>
        <div id="tab-3-title" class="text-center col-3 px-0" style="border-bottom:6px solid #fb8f67">
            <h1 class="sub-title-base">步驟3</h1>
            <p class="text-size-l">上傳教師身份證明文件</p>
        </div>
        <div id="tab-4-title" class="text-center col-3" style="border-bottom:6px solid #fb8f67">
            <h1 class="sub-title-base">步驟4</h1>
            <p class="text-size-l">確定更新資料</p>
        </div>
    </div>
    <div class="change_school_popup">
        <div id="tab-1">
            <div id="district_area">
                <h1 style="display:none;text-align:left">選擇新任教學校</h1>
                <select name="district" class="popup_district_selector w-100-mb border-secondary" id="popup_district_selector">
                    <option value="">請選擇學校地區</option>
                    @foreach (\App\Models\District::all() as $district)
                        <option value="{{ $district->id }}">{{ __('school/district.' . $district->name) }}</option>
                    @endforeach
                </select>
                <div class="arrow_box">
                    <i class="arrow fas fa-angle-down"></i>
                </div>
            </div>

            <div id="school_type_area" style="display:none">
                <select name="school_type" class="popup_school_type_selector w-100-mb border-secondary" id="popup_school_type_selector">
                    <option value="">請選擇學校類別</option>
                    @foreach (\App\Models\School\SchoolType::all() as $school_type)
                        <option school_type="{{ $school_type->name }}" value="{{ $school_type->id }}">{{ __('school/type.' . $school_type->name) }}</option>
                    @endforeach
                </select>
                <div class="arrow_box">
                    <i class="arrow fas fa-angle-down"></i>
                </div>
            </div>


            <div id="school_area" style="display:none">
                <select name="school" class="popup_school_selector w-100-mb border-secondary" id="popup_school_selector">

                </select>
                <div class="arrow_box">
                    <i class="arrow fas fa-angle-down"></i>
                </div>
            </div>

            <div id="other_school_area" class="py-2" style="display:none;border-top:2px solid #364A8E;">
                <h1 class="mb-2">未登記學校/新學校</h1>
                <input type="text" id='other_school' class='w-100' style="padding: 0 10px;height:45px;margin-bottom: 15px;" name='other_school' placeholder="學校名稱">
                <input type="text" id='other_school_address' class='w-100' style="padding: 0 10px;height:45px;" name='other_school_address' placeholder="地址">
            </div>
        </div>
        <div id="tab-2">
            <div class='row'>
                <div class="col-12 text-left">
                    @include('frontend.template.position_select_menu', [
                    "default" => $data['teacher']->position,
                    'is_profile' => true,
                    'id' => 'popup_position_selector'
                    ])
                    <div class="arrow_box">
                        <i class="arrow fas fa-angle-down"></i>
                    </div>
                </div>
                <div class="col-12 text-left">
                    @include('.frontend.template.school.subject', [
                    'dropdown_class' => 'border-secondary px-2',
                    'col_number' => '50',
                    'default' => $data['teacher_subject'],
                    'id' => 'change_subject'
                    ])
                    <div class="btn float-right" id="clear_teacher_subjects">清除全部</div>
                </div>
            </div>
        </div>
        <div id="tab-3">
            <div class="row text-left">
                <div class="col-12">
                    @include(
                    'frontend.template.teacher.authentication.normal',[
                    'id' => 'change_school',
                    'teacher_authentication_file' => null
                    ])
                </div>
            </div>
        </div>
        <div id="tab-4">
            <div class="row text-left">
                <div class="col-12">
                    <h2>更改學校資料</h2>
                    <p id="changed_school"></p>
                </div>
                <div class="col-12">
                    <h2>更改職務</h2>
                    <p id="changed_position"></p>
                </div>
                <div class="col-12">
                    <h2>更改任教學科</h2>
                    <div id="changed_subjects"></div>
                </div>
            </div>
        </div>
        <div id="tab-5" class="text-left">
            <h2 class="text-secondary">提醒</h2>
            <p>成功更新學校後會刪除所有報價紀錄，未完成的服務會轉至同校另一老師處理。</p>
            <p>請問您是否確定更新任教學校為</p>
        </div>
    </div>
@endsection

@section('popup_buttons')
    <div>
        <button id="update_school_popup_close" data-dismiss="modal" hidden>close</button>
        <button type="button" id="after_tab" class="btn btn-primary">上一步</button>
        <button type="button" id="next_tab" class="btn btn-primary">下一步</button>
        <button type="button" id="update_school_confirm" class="btn btn-primary">確定更新</button>
    </div>
@endsection

@section('popup_style')
    <style>

        #{{ $popup_id }} .modal-header{
            border: none;
            text-align: center;
        }

        #{{ $popup_id }} .modal-header .close{
            margin: 0;
            padding: 0;
        }
        #{{ $popup_id }} .modal-header .modal-title{
            margin: auto;
        }
        #tab-1 h1{
            margin-bottom: 15px;
        }
        #tab-1 select{
            border: 1px solid #ffc235;
            border-radius: 15px;
            height: 45px;
            margin-bottom: 15px;
        }
        #middle_school_subject_list_change_school_popup,
        #elementary_school_subject_list_change_school_popup,
        #kindergarten_subject_list_change_school_popup {
            max-height: 35vh;
            overflow: auto;
        }

        #quotation_inquiry_school_pupop #after_tab{
          background: #69696b;
          border-radius: 15px;
          color: #fff;
          padding: 0px 15px;
          line-height: 30px;
        }

        #quotation_inquiry_school_pupop #next_tab,
        #quotation_inquiry_school_pupop #update_school_confirm {
            background: #364A8E;
            border-radius: 15px;
            color: #fff;
            padding: 0px 15px;
            line-height: 30px;
        }

        #quotation_inquiry_school_pupop #after_tab:hover,
        #quotation_inquiry_school_pupop #next_tab:hover,
        #quotation_inquiry_school_pupop #update_school_confirm:hover {
            background: #FFC235;
        }

        #quotation_inquiry_school_pupop .close {
            position: relative;
            top: -25px;
            left: 12px;
        }

        #tab-2,
        #tab-3,
        #tab-4,
        #tab-5 {
            display: none;
        }

        .change_school_popup select{
          -moz-appearance:none; /* Firefox */
          -webkit-appearance:none; /* Safari and Chrome */
          appearance:none;
        }

        .change_school_popup .arrow_box{
          position: absolute;
          right: 44px;
        }

        .change_school_popup .arrow_box .arrow {
          position: relative;
          top: -48px;
        }
    </style>
@endsection

@section('popup_script')
    <script>
        $(document).ready(function() {
            var url = "{{ asset('') }}";
            var school_list = [];
            var tab_index = 1;
            var update_data = new Array();

            $("#{{ $popup_id }} .modal-header .modal-title").prepend('<i class="fas fa-graduation-cap mr-1"></i>');

            $('#update_school_confirm').click(function() {
                let teacher_authentication_file_change_school = $('#teacher_authentication_file_change_school');
                update_data['teacher_authentication_file'] = teacher_authentication_file_change_school[0].files[0];
                if(typeof teacher_authentication_file_change_school[0].files[0] == 'undefined'){
                    update_data['teacher_authentication_file'] = '';
                }

                update_data['teacher_subjects'] = JSON.stringify(update_data['teacher_subjects']);

                if(update_data['school_id'] == 'other'){
                    update_data['school_id'] = '';
                }

                var formData = new FormData();
                for (var key in update_data) {
                    formData.append(key,update_data[key])
                }

                $('#update_school_confirm').attr('disabled', 'disabled');

                callAjax($('#update_school_confirm'),{
                    type: 'POST',
                    url: "{{ route('.api.teacher.profile.school.update') }}",
                    data: formData,
                    processData: false,
                    contentType: false,
                },function(response) {
                    $('#update_school_popup_close').click();
                    successMessage(['更新成功']);

                    bootbox.dialog({
                        size: 'large',
                        title: '更新任教學校成功',
                        message: "<p>您已成功更新任教學校，我們會儘快驗證您的教師證明文件以開通報價管理功能。</p><p style='text-align:center'>-5秒後將跳至主頁-</p>",
                        closeButton: false
                    });

                    setTimeout(function(){
                        location.reload();
                    },5000)
                },function(response){
                    getCheckedTeacherSubjects();
                    failMessage(JSON.parse(response.responseText)['errors']);

                    $('#update_school_confirm').removeAttr('disabled');
                })
            });



            $('#update_school_confirm').hide();
            $('#after_tab').hide();
            $('#after_tab').click(function() {
                if(tab_index > 1){
                    tab_index = tab_index - 1;
                }
                if (tab_index == 1) {
                    $('#after_tab').hide();
                }

                $('#update_school_confirm').hide();
                $('#next_tab').show();

                showCurrentTab();
            });

            $('#next_tab').click(function() {
                if(tab_index === 1){
                    let error_school_id_message = '';
                    if (!$('#popup_school_selector').val()) {
                        error_school_id_message = "請填上學校名請選擇學校稱及地址";
                    }

                    if ($('#popup_school_selector').val() === 'other' && (!$('#other_school_address').val() || !$('#other_school').val())) {
                        error_school_id_message = "請填上學校名稱及地址";
                    }

                    if (error_school_id_message) {
                        new Noty({
                            type: 'error',
                            text: error_school_id_message,
                            timeout: 5000,
                        }).show();

                        return;
                    }
                }

                tab_index = tab_index + 1;

                if (tab_index > 1) {
                    $('#after_tab').show();
                }

                if (tab_index === 2) {
                    let school_type = $('#popup_school_type_selector option:selected').text();
                    showSubjectBySchoolType(school_type, 'change_subject');

                    if (school_type === '幼稚園' || school_type ===
                        "{{ App\Models\School\SchoolType::OPTION_KINDERGARTEN }}") {
                        $('#clear_teacher_subjects').hide();
                    }
                }

                if(tab_index === 5){
                    $('#update_school_confirm').show();
                    $('#next_tab').hide();
                }

                showCurrentTab();
            });

            $('#clear_teacher_subjects').click(function() {
                $('#{{ $popup_id }} .teacher_subjects:checked').removeAttr('checked');
            });

            $('#popup_school_selector').change(function(){
                if($(this).val() == 'other'){
                    $('#other_school_address, #other_school').html('');

                    $('#other_school_area').show();
                }else{
                    $('#other_school_area').hide();
                }
            });

            $('#other_school')
            $('#other_school_address')

            $('#popup_district_selector, #popup_school_type_selector').change(function() {
                if($('#popup_district_selector').val().length > 0){
                    $('#school_type_area').show();

                    if($('#popup_school_type_selector').val().length > 0){
                        $('#school_area').show();
                        getSchoolList();
                    }else{
                        $('#school_area').hide();
                    }

                }else{
                    $('#school_area, #school_type_area').hide();
                }
            });

            function updateDate() {
                //school
                update_data['school_id'] = $('#{{ $popup_id }} #popup_school_selector option:selected')
                    .val();

                update_data['school_name'] = '';
                update_data['school_address'] = '';
                if(update_data['school_id'] == 'other'){
                    update_data['school_name'] = $('#{{ $popup_id }} #other_school').val();
                    update_data['school_address'] = $('#{{ $popup_id }} #other_school_address').val();
                }else{
                    update_data['school_name'] = $('#popup_school_selector option:selected').text();
                }
                $('#tab-5 :nth-child(3)').html('請問您是否確定更新任教學校為 <b>' + update_data['school_name'] + '？<b>');

                update_data['district_id'] = $('#popup_district_selector option:selected').val();
                update_data['school_type_id'] = $('#popup_school_type_selector option:selected').val();

                //position
                update_data['position'] = $('#{{ $popup_id }} #popup_position_selector option:selected').val();

                //teacher_subjects
                getCheckedTeacherSubjects();

                //show changed
                $('#changed_school').text(update_data['school_name']);

                var position_name = $('#popup_position_selector option:selected').text();
                $('#changed_position').text(position_name);

                $('#changed_subjects').html('');
                var school_type = $('#popup_school_type_selector option:selected').val();
                update_data['teacher_subjects'].forEach(function(data, index) {
                    var subject_details = data.split(',');

                    switch (school_type) {
                        case "{{ App\Models\School\SchoolType::OPTION_ELEMENTARY_SCHOOL }}":
                            subject_details[0] = '小學'
                            break;
                        case "{{ App\Models\School\SchoolType::OPTION_MIDDLE_SCHOOL }}":
                            subject_details[0] = '中學'
                            break;
                    }

                    var table_subject_details = "";
                    table_subject_details += "<div class='row'>";
                    table_subject_details += "<div class='col'>";
                    table_subject_details += "<p>" + subject_details[1] + "年級-" + $('[value="' + data +
                        '"]').attr('label') + "</p>";
                    table_subject_details += "</div>";
                    table_subject_details += "</div>";
                    $('#changed_subjects').append(table_subject_details);
                });
            }

            function addSchoolOptionsToSchoolSelectMenu(schools) {
                $('#popup_school_selector').find('option').remove();

                $('#popup_school_selector').append('<option value="">請選擇學校</option>');
                $.each(schools, function(index, school) {
                    $('#popup_school_selector').append('<option value="' + school.id + '">' + school.name +
                        '</option>');
                });
                $('#popup_school_selector').append('<option value="other">其他</option>');
            }

            function getSchoolList() {
                let district_id = $('#popup_district_selector option:selected').val();
                let school_type = $('#popup_school_type_selector option:selected').val();

                if(district_id.length > 0 && school_type.length > 0){
                    $('#school_menu_loading').show();

                    $.get(url + "api/school?district=" + district_id + "&school_type=" + school_type, function(
                        data) {
                        addSchoolOptionsToSchoolSelectMenu(data);
                        $('#school_menu_loading').hide()
                    });
                }
            }

            function getCheckedTeacherSubjects() {
                var school_type = $('#popup_school_type_selector option:selected').attr('school_type');
                var checked_teacher_subjects = $('#{{ $popup_id }} .teacher_subjects[school_type="' +
                    school_type + '"]:checked');

                update_data['teacher_subjects'] = new Array();
                checked_teacher_subjects.each(function(index, input) {
                    update_data['teacher_subjects'].push(input.value);
                });
            }

            function showCurrentTab() {
                $('#tab-1').hide();
                $('#tab-2').hide();
                $('#tab-3').hide();
                $('#tab-4').hide();
                $('#tab-5').hide();

                $('#tab-' + tab_index).show();
                $('#tab-' + tab_index + '-title').css('border-color','#0c9');
                for(let loop = 4;loop > tab_index;loop--){
                    $('#tab-' + loop + '-title').css('border-color','#fb8f67');
                }

                updateDate();
            }
        });
    </script>
@endsection