@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 = "任教學校";
@endphp

@section("open_popup_button")
    <div id="{{ $popup_button_id }}" class="w-100-mb" data-toggle="modal" data-target="#{{ $popup_id }}">
        {{ $school_name ?? "未選學校" }}
    </div>
    <input type="text" id="quotation_inquiry_school_id" name="quotation_inquiry_school_id" hidden>
@endsection

{{-- quotation_inquiry_school_id --}}
@section("popup_body")
    <div>
        <h1>學校地區</h1>
        <select name="district" class="district_selector w-100-mb" id="district_selector">
            @foreach (\App\Models\District::all() as $district)
                <option value="{{ $district->id }}">{{ __("school/district." . $district->name) }}</option>
            @endforeach
        </select>
    </div>

    <div>
        <h1>學校類別</h1>
        <select name="school_type" class="school_type_selector w-100-mb" id="school_type_selector">
            @foreach (\App\Models\School\SchoolType::all() as $school_type)
                <option value="{{ $school_type->id }}">{{ __("school/type." . $school_type->name) }}</option>
            @endforeach
        </select>
    </div>


    <div>
        <h1>學校名稱</h1>
        <select name="school" class="school_selector w-100-mb" id="school_selector">

        </select>
    </div>

    <div>
        <input type="text" id="other_school" name="other_school" placeholder="未登記學校/新學校">
    </div>
@endsection

@section("popup_buttons")
@endsection

@section("popup_style")
    <style>
        #{{ $popup_id }} .modal-dialog{
            margin-top:50px;
        }
        #{{ $popup_id }} .close{
            display:none;
        }
    </style>
@endsection

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

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


            getSchoolList();

            function getSchoolList() {
                let district_id = $("#district_selector option:selected").val();
                let school_type = $("#school_type_selector option:selected").val();

                if (school_type == "other") {
                    $("#other_school").show();
                } else {
                    $("#school_menu_loading").show();

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

                        setSchoolId();
                    });
                }
            }

            $({{ $popup_button_id }}).click(function() {
                if (school_list.length == 0) {
                    getSchoolList();
                }

                if ($("#school_selector").val() != "other") {
                    $("#other_school").hide();
                }
            });

            $("#district_selector, #school_type_selector").change(function() {
                getSchoolList();
            });

            $("#school_selector").change(function() {
                if ($(this).val() == "other") {
                    $("#other_school").show();
                } else {
                    $("#other_school").hide();
                }
                setSchoolId();
            });

            function setSchoolId() {
                if ($("#school_selector").val() == "other") {
                    $({{ $popup_button_id }}).text($("#other_school").val());
                    $("#quotation_inquiry_school_id").val('');
                }else {
                    $({{ $popup_button_id }}).text($("#school_selector option:selected").text());
                    $("#quotation_inquiry_school_id").val($("#school_selector option:selected").val());
                }
            }
        });
    </script>
@endsection