@if($status->statusName == \App\Enumerables\ApplicationTypes::REJECTED)
    <div class="ibox-content">
        <div class="row ">
            <div class="col-sm-12 rowcontainer">
                <label class="col-sm-2" for="rejectionReason">
                    拒绝原因:
                </label>
                <div class="col-sm-6">
                    <select class="form-control" name="rejectionReason" id="rejectionReason">
                        @foreach($rejectionReasons as $value => $reason)
                            <option value="{{$value}}" @if($value == $status->rejectionReason) selected @endif>{{$reason}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
    </div>
@elseif(
    $status->statusName == \App\Enumerables\ApplicationTypes::CONDITIONAL
    || $status->statusName == \App\Enumerables\ApplicationTypes::UNCONDITIONAL_OFFER
)
    <div class="ibox-content">
        <div class="row ">
            <div class="col-sm-12">
                <label class="col-sm-2" for="statusDeadlineDate">
                    Offer 确认截止日期:
                </label>
                <div class="col-sm-3">
                    <div class="input-group date statusDeadlineDate commonEndDatePicker">
                        <span class="input-group-addon">
                            <i class="fa fa-calendar"></i>
                        </span>
                        <input
                            type="text"
                            class="form-control"
                            name="statusDeadlineDate"
                            id="statusDeadlineDate"
                            value="{{$status->statusDeadline}}"
                            autocomplete="off"
                        >
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-20">
            <div class="col-sm-12 rowcontainer">
                <input type="hidden" name="depositCurrency" value="{{$currency->id}}">

                <div class="col-sm-2">
                    Offer 押金要求:
                </div>
                
                <label class="col-sm-1">
                    <input type="radio" name="isDeposit" id="statusDepositNo" value="0" @if(!$status->status_deposit_checkbox) checked="checked" @endif> 否
                </label>
                
                <label class="col-sm-1">
                    <input type="radio" name="isDeposit" id="statusDepositYes" value="1" @if($status->status_deposit_checkbox) checked="checked" @endif> 是
                </label>
                
                <label class="col-sm-2" for="statusDepositAmount">
                    Offer 押金金额 ({{$currency->currency_sign}}):
                </label>
                
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="statusDepositAmount" name="statusDepositAmount" value="{{$status->statusDepositAmount}}" @if(!$status->status_deposit_checkbox) disabled @endif>
                </div>
                
                <label class="col-sm-2" for="statusDepositDate">
                    Offer 押金截止日期:
                </label>
                
                <div class="col-sm-2">
                    <div class="input-group @if($status->status_deposit_checkbox) date @endif" id="offerDatePicker">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input
                            type="text"
                            name="statusDepositDate"
                            id="statusDepositDate"
                            class="form-control"
                            value="{{$status->statusDepositDeadline}}"
                            autocomplete="off"
                            @if(!$status->status_deposit_checkbox) disabled @endif
                        >
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-20">
            <div class="col-sm-12 rowcontainer">
                <div class="col-sm-2">
                    CAS 押金要求:
                </div>
                
                <label class="col-sm-1">
                    <input type="radio" name="casDeposit" id="ref-0" value="0" @if(!$status->cas_deposit_checkbox) checked="checked" @endif> 否
                </label>
                
                <label class="col-sm-1">
                    <input type="radio" name="casDeposit" id="ref-1" value="1" @if($status->cas_deposit_checkbox) checked="checked" @endif> 是
                </label>
    
                <label class="col-sm-2" for="casDepositAmount">
                    CAS 押金金额 ({{$currency->currency_sign}}):
                </label>
                
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="casDepositAmount" name="casDepositAmount" value="{{$status->casDepositAmount}}" @if(!$status->cas_deposit_checkbox) disabled @endif>
                </div>
                
                <label class="col-sm-2" for="casDepositDate">
                    CAS 押金截止日期:
                </label>
                
                <div class="col-sm-2">
                    <div class="input-group @if($status->cas_deposit_checkbox) date @endif" id="casDatePicker">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input
                            type="text"
                            name="casDepositDate"
                            class="form-control"
                            id="casDepositDate"
                            value="{{$status->casDepositDeadline}}"
                            autocomplete="off"
                            @if(!$status->cas_deposit_checkbox) disabled @endif
                        >
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-20">
            <div class="col-sm-12 rowcontainer">
                <label class="col-sm-1" for="depositLink">
                    {{__('Deposit Link')}}:
                </label>
                
                <div class="col-sm-5">
                    <input type="text" id="depositLink" name="depositLink" class="form-control" aria-required="true" value="{{$status->depositLink}}">
                </div>

                <label class="col-sm-1" for="accommodationLink">
                    {{__('Accommodation Link')}}:
                </label>
                
                <div class="col-sm-5">
                    <input type="text" id="accommodationLink" name="accommodationLink" class="form-control" aria-required="true" value="{{$status->accommodationLink}}">
                </div>
            </div>
        </div>
    </div>
    @if($status->statusName == \App\Enumerables\ApplicationTypes::CONDITIONAL)
        <div class="ibox-content">
            <div class="row ">
                <div class="col-sm-12 rowcontainer">
                    <div class="col-sm-1">
                        学术要求:
                    </div>
                    <div class="col-sm-2">
                        <select class="form-control" name="academicRequirement" id="academicRequirement">
                            @foreach($requirementOptions as $key => $value)
                                <option value="{{$value}}" @if(isset($status->academicRequirement) && $value == $status->academicRequirement) selected @endif>{{__($key)}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-sm-3">
                        <input type="text" placeholder="score" class="form-control" id="academicScore" name="academicScore" value="{{$status->academicScore}}">
                    </div>
                </div>
            </div>
            <div class="row mt-20">
                <div class="col-sm-12 rowcontainer">
                    <div class="col-sm-1">
                        语言成绩类型:
                    </div>
                    <div class="col-sm-2">
                        <select class="form-control" name="englishProficiency" id="englishProficiency">
                            <option value="">请选择</option>
                            <option value="IELTS" @if(isset($status->englishProficiency) && 'IELTS' == $status->englishProficiency) selected @endif>雅思</option>
                            <option value="TOEFL" @if(isset($status->englishProficiency) && 'TOEFL' == $status->englishProficiency) selected @endif>托福</option>
                            <option value="PTE" @if(isset($status->englishProficiency) && 'PTE' == $status->englishProficiency) selected @endif>PTE</option>
                            <option value="None" @if(isset($status->englishProficiency) && 'None' == $status->englishProficiency) selected @endif>无</option>
                            <option value="other" @if(isset($status->englishProficiency) && 'other' == $status->englishProficiency) selected @endif>其他</option>
                        </select>
                    </div>
                    
                    <label class="col-sm-1 hideLang" for="ieltsSpeaking">
                        总分:
                    </label>
                    <div class="col-sm-2 hideLang">
                      
                        <div class="col-sm-16 input-wrapper">
                            <input type="text" class="form-control lang" id="ieltsOverall" name="ieltsOverall" value="{{$status->ieltsOverall}}">
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row mt-20 hideLang">
                <div class="col-sm-12 rowcontainer">
                    <label class="col-sm-1" for="ieltsListening">
                        听:
                    </label>
                    
                    <div class="col-sm-2">
                        <div class="col-sm-16 input-wrapper">
                            <input type="text" class="form-control lang" id="ieltsListening" name="ieltsListening" value="{{$status->ieltsListening}}">
                        </div>
                    </div>
                    
                    <label class="col-sm-1" for="ieltsSpeaking">
                        说:
                    </label>
                    
                    <div class="col-sm-2">
                        <div class="col-sm-16 input-wrapper">
                            <input type="text" class="form-control lang" id="ieltsSpeaking" name="ieltsSpeaking" value="{{$status->ieltsSpeaking}}">
                        </div>
                    </div>
                    
                    <label class="col-sm-1" for="ieltsReading">
                        读:
                    </label>
                    
                    <div class="col-sm-2">
                        <div class="col-sm-16 input-wrapper">
                            <input type="text" class="form-control lang" id="ieltsReading" name="ieltsReading" value="{{$status->ieltsReading}}">
                        </div>
                    </div>
                    
                    <label class="col-sm-1" for="ieltsWriting">
                        写:
                    </label>
                    
                    <div class="col-sm-2">
                        <div class="col-sm-16 input-wrapper">
                            <input type="text" class="form-control lang" id="ieltsWriting" name="ieltsWriting" value="{{$status->ieltsWriting}}">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-20">
                <div class="col-sm-12 rowcontainer">
                    <div class="col-sm-1">推荐信要求:</div>
                    {{--<div class="col-sm-2">
                        <select class="form-control" name="refRequirement" id="refRequirement">
                            <option value="0">None</option>
                            <option value="1" @if($i == $status->refRequirement) selected @endif>1 Reference</option>
                            <option value="2" @if($i == $status->refRequirement) selected @endif>2 References</option>
                        </select>
                    </div>--}}
                    <label class="col-sm-1">
                        <input type="radio" name="refRequirement" id="ref-0" value="0" checked="checked"> None
                    </label>
                    <label class="col-sm-1">
                        <input type="radio" name="refRequirement" id="ref-1" value="1" @if($status->refRequirement == 1) checked="checked" @endif> 1 Ref
                    </label>
                    <label class="col-sm-1">
                        <input type="radio" name="refRequirement" id="ref-2" value="2" @if($status->refRequirement == 2) checked="checked" @endif> 2 Ref
                    </label>
                </div>
            </div>
            <div class="row mt-20">
                <div class="col-sm-12 rowcontainer">
                    <label class="col-sm-1" for="otherRequirements">
                        其他要求:
                    </label>
                    <div class="col-sm-5">
                        <textarea id="otherRequirements" name="otherRequirements" class="form-control" required="" aria-required="true">{{$status->otherRequirements}}</textarea>
                    </div>
                </div>
            </div>
        </div>
    @endif
    <script type="text/javascript">
        $('.statusDeadlineDate').datepicker({
            startView: 2,
            todayBtn: "linked",
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: false,
            autoclose: true,
            startDate:new Date("1980-1-1"),
            format: 'dd/mm/yyyy',
        });

        $('input[name="isDeposit"]').change(function () {
            disableDeposit($(this).val());
        });

        function disableDeposit(val) {
            if (val == 0) {
                $('#statusDepositAmount, #statusDepositDate').prop('disabled', true);
                $('#offerDatePicker').datepicker('remove');
            } else {
                $('#statusDepositAmount, #statusDepositDate').prop('disabled', false);
                $('#offerDatePicker')
                    .addClass('date')
                    .datepicker({
                        todayBtn: "linked",
                        keyboardNavigation: false,
                        forceParse: true,
                        calendarWeeks: true,
                        autoclose: true,
                        format: 'dd/mm/yyyy'
                    });
            }
        }

        $('input[name="casDeposit"]').change(function () {
            disableCasDeposit($(this).val());
        });

        function disableCasDeposit(val) {
            if (val == 0) {
                $('#casDepositAmount, #casDepositDate').prop('disabled', true);
                $('#casDatePicker').datepicker('remove');
            } else {
                $('#casDepositAmount, #casDepositDate').prop('disabled', false);
                $('#casDatePicker')
                    .addClass('date')
                    .datepicker({
                        todayBtn: "linked",
                        keyboardNavigation: false,
                        forceParse: true,
                        calendarWeeks: true,
                        autoclose: true,
                        format: 'dd/mm/yyyy'
                    });
            }
        }
        
        function ininSetEnglishProficiency(value){
            if (value === 'IELTS') {
                $(".hideLang").show()
                $("input.lang").each(function () {
                    $(this).attr('data-limit', '9.0')
                });
            } else if (value == 'TOEFL') {
                $(".hideLang").show()
                $("input.lang").each(function () {
                    let _name = $(this).attr('name');
                    if (_name == 'ieltsOverall') {
                        $(this).attr('data-limit', '120')
                    } else {
                        $(this).attr('data-limit', '30')
                    }
                });
            } else if (value == 'PTE') {
                $(".hideLang").show()
                $("input.lang").each(function () {
                    $(this).attr('data-limit', '90')
                });

            } else if (value == 'other') {
                $(".hideLang").show()
                $("input.lang").each(function () {
                    $(this).attr('data-limit', "")
                });
                
            } else {
                $(".hideLang").hide()
            }
        }
        let _proficiency = $("#englishProficiency").val();
        $("#englishProficiency").on("change",function(){
            let _val = $(this).val();
            ininSetEnglishProficiency(_val)
        })
        ininSetEnglishProficiency(_proficiency)
        $("input.lang").on('blur', function () {
            
            let _limit = $(this).attr("data-limit"),
                _val = $(this).val().replace(/[^\d\.]/g, ''),
                _type = $("select[name='englishProficiency']").val();
                console.log(_type)
            $(this).val(_val)
            if (_type == 'IELTS' || _type == 'TOEFL' || _type == 'PTE') {
                if (_val !== "") {
                    if (_limit !== '') {
                        if (_limit == '9.0') {
                            let status = isInteger(Number(_val / 0.5));
                            if (_val > 9) {
                                $(this).val(9)
                            } else if (_val < 0) {
                                $(this).val(0)
                            } else {
                                if (!status) {
                                    $(this).val(Math.round(_val))
                                }
                            }
                        } else {
                            if (_val > parseInt(_limit)) {
                                $(this).val(_limit)

                            }
                        }
                    }
                    $(this).prev("p").remove()
                } else {
                    $(this).css({"border":"1px solid red"})
                    $(this).before("<p>请输入语言成绩</p>")
                }
            }
        });

        $("input.lang").on('focus', function () {
            $(this).css({"border":"1px solid #e5e6e7"})
            $(this).prev("p").remove()
        })

        function isInteger(val) {
            return val % 1 === 0;
        }
    </script>
@elseif($status->statusName == \App\Enumerables\ApplicationTypes::REFUND)
    @php
        /**
         * @var App\OrderItems $orderItem
         */
        $currencySign = ($orderItem->currency == App\Enumerables\Currency::GBP) ? '£ ' : '¥ ';
    @endphp
    <div class="ibox-content">
        <h4>{{__('Application information')}}</h4>
        <div class="row ">
            <div class="col-sm-12 rowcontainer">
                <div class="col-sm-1">{{__('Order Number')}}</div>
                <div class="col-sm-4">
                   {{$orderItem->details->displayOrderNo}}
                </div>
                <div class="col-sm-1">{{__('Order Time')}}</div>
                <div class="col-sm-4">
                    {{$orderItem->details->order_time}}
                </div>
            </div>
        </div>
        <div class="row mt-20">
            <div class="col-sm-12 rowcontainer">
                <div class="col-sm-1">{{__('Third-party Application Fee')}}</div>
                <div class="col-sm-4">
                    @if($orderItem->isApplicationFeesOrder())
                        {{$currencySign.$orderItem->applicationFees}}
                    @else
                        {{__('N/A')}}
                    @endif
                </div>
                <div class="col-sm-1">{{__('Service Fee')}}</div>
                <div class="col-sm-4">
                    {{$currencySign.$orderItem->serviceFees}}
                </div>
                <div class="col-sm-1">{{__('Deposit')}}</div>
                <div class="col-sm-1">
                    {{$currencySign.$orderItem->depositFees}}
                </div>
            </div>
        </div>
        <div class="row mt-20">
            <div class="col-sm-12 rowcontainer">
                <div class="col-sm-1">{{__('Total')}}</div>
                <div class="col-sm-4">
                    {{$currencySign.$orderItem->totalFees}}
                </div>
                <div class="col-sm-1">{{__('Discount')}}</div>
                <div class="col-sm-4">
                    {{$currencySign.number_format($orderItem->discountValue + $orderItem->discountEvent, 2)}}
                </div>
                <div class="col-sm-1">{{__('Paid')}}</div>
                <div class="col-sm-1">
                    {{$currencySign.$orderItem->totalPaid}}
                </div>
            </div>
        </div>
        <div class="row mt-20">
            <div class="col-sm-12 rowcontainer">
                <div class="col-sm-1">{{__('Currency')}}</div>
                <div class="col-sm-4">
                    {{\App\Enumerables\Currency::CURRENCY_STRING[$orderItem->currency]}}
                </div>
                <div class="col-sm-1">{{__('Payment Method')}}</div>
                <div class="col-sm-4">
                    {{$orderItem->paymentMethod}}
                </div>
            </div>
        </div>
        <div class="row mt-20">
            <div class="col-sm-12 rowcontainer">
                <div class="col-sm-1">{{__('Refund Method')}}</div>
                <div class="col-sm-2" id="refundMethod1">
                    <input
                        type="radio"
                        class="dynamic-validation"
                        name="refundMethod"
                        value="original"
                        id="radio1"
                        data-validation-container="refundMethod1"
                        required
                        @if(!$refundMethodValidation) disabled="disabled" @endif
                    >
                    <label for="radio1" name="refundMethod">{{__('Refund through original payment method')}}</label>
                </div>
                <div class="col-sm-2" id="refundMethod2">
                    <input
                        type="radio"
                        class="dynamic-validation"
                        name="refundMethod"
                        value="offline"
                        id="radio2"
                        data-validation-container="refundMethod2"
                        required
                        @if(!$refundMethodValidation) checked="checked" @endif
                    >
                    <label for="radio2">{{__('Offline Refund')}}</label>
                </div>
            </div>
        </div>
        <div class="row mt-20">
            <div class="col-sm-12 rowcontainer">
                @if($orderItem->isApplicationFeesOrder())
                    <label class="col-sm-1" for="applicationFeeRefund">
                        {{__('Application Fee Refund')}}
                    </label>
                    <div class="col-sm-3">
                        <input
                            type="number"
                            class="form-control dynamic-validation"
                            data-counter="total1"
                            name="applicationFeeRefund"
                            id="applicationFeeRefund"
                            value="{{number_format($orderItem->applicationFees, 2, '.','')}}"
                            placeholder="{{__('Please enter a refund amount')}}"
                            max="{{number_format($orderItem->applicationFees, 2, '.','')}}"
                            required
                        >
                    </div>
                @endif
                
                <label class="col-sm-1" for="serviceFeeRefund">
                    {{__('Service Fee/Deposit Refund')}}
                </label>
                <div class="col-sm-3">
                    <input
                        type="number"
                        class="form-control dynamic-validation"
                        data-counter="total1"
                        name="serviceFeeRefund"
                        value="{{number_format($orderItem->serviceFees + $orderItem->depositFees - $orderItem->discountValue - $orderItem->discountEvent, 2, '.','')}}"
                        placeholder="{{__('Please enter a refund amount')}}"
                        max="{{number_format($orderItem->serviceFees + $orderItem->depositFees - $orderItem->discountValue - $orderItem->discountEvent, 2, '.','')}}"
                        id="serviceFeeRefund"
                        required
                    >
                </div>
                
                <label class="col-sm-1" for="total1">
                    {{__('Total')}} {{$currencySign}}
                </label>
                <div class="col-sm-2">
                    <input
                        type="number"
                        class="form-control dynamic-validation"
                        min="0.01"
                        max="{{number_format($orderItem->discountedValue(), 2, '.','')}}"
                        name="total1"
                        id="total1"
                        value="{{number_format($orderItem->discountedValue(), 2, '.','')}}"
                        disabled="disabled"
                        required
                    >
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).on('change', '[data-counter]', function () {
            $(this).parent().removeClass('error');
            var counterID = $(this).attr('data-counter');
            var total = 0;
        
            $('input[data-counter="' + counterID + '"]').each(function () {
                var value = $(this).val();
                value = parseFloat(value);
                value = (value && value > 0) ? value : 0;
                $(this).val(value.toFixed(2));
                total += value;
            });
            $('#' + counterID).val(total.toFixed(2));
        }).on('change', 'input[name=refundMethod]', function () {
            $('input[name=refundMethod]').parent().removeClass('error');
        });
    </script>
@elseif($status->statusName == \App\Enumerables\ApplicationTypes::CHANGE_COURSE)
    @php
        $currencySign = $orderItem->currency ==  App\Enumerables\Currency::GBP ? '£ ' : '¥ ';
        $language = config('app.locale');
    @endphp
    
    <div class="ibox-content">
        <h4>{{__('Current course information')}}</h4>
        <div class="row ">
            <div class="col-sm-12 rowcontainer">
                <div class="col-sm-1">{{__('Order Number')}}</div>
                <div class="col-sm-4">
                   {{$orderItem->details->displayOrderNo}}
                </div>
                <div class="col-sm-1">{{__('Order Time')}}</div>
                <div class="col-sm-4">
                    {{$orderItem->details->order_time}}
                </div>
            </div>
        </div>
        <div class="row mt-20">
            <div class="col-sm-12 rowcontainer">
                <div class="col-sm-1">{{__('Third-party Application Fee')}}</div>
                <div class="col-sm-4">
                    @if($orderItem->isApplicationFeesOrder())
                        {{$currencySign.$orderItem->applicationFees}}
                    @else
                        {{__('N/A')}}
                    @endif
                </div>
                <div class="col-sm-1">{{__('Service Fee')}}</div>
                <div class="col-sm-4">
                    {{$currencySign.$orderItem->serviceFees}}
                </div>
                <div class="col-sm-1">{{__('Deposit')}}</div>
                <div class="col-sm-1">
                    @if($orderItem->isApplicationFeesOrder())
                        {{$currencySign.$orderItem->depositFees}}
                    @else
                        {{__('N/A')}}
                    @endif
                </div>
            </div>
        </div>
        <div class="row mt-20">
            <div class="col-sm-12 rowcontainer">
                <div class="col-sm-1">{{__('Total')}}</div>
                <div class="col-sm-4">
                    {{$currencySign.$orderItem->totalFees}}
                </div>
                <div class="col-sm-1">{{__('Discount')}}</div>
                <div class="col-sm-4">
                    {{$currencySign.number_format($orderItem->discountValue + $orderItem->discountEvent,2)}}
                </div>
                <div class="col-sm-1">{{__('Paid')}}</div>
                <div class="col-sm-1">
                    {{$currencySign.$orderItem->totalPaid}}
                </div>
            </div>
        </div>
        <div class="row mt-20">
            <div class="col-sm-12 rowcontainer">
                <div class="col-sm-1">{{__('Currency')}}</div>
                <div class="col-sm-4">
                    {{\App\Enumerables\Currency::CURRENCY_STRING[$orderItem->currency]}}
                </div>
                <div class="col-sm-1">{{__('Payment Method')}}</div>
                <div class="col-sm-4">
                    {{$orderItem->paymentMethod}}
                </div>
            </div>
        </div>
        <h4 class="mt-20">{{__('Change course information')}}</h4>
        <div class="row mt-20">
            <div class="col-sm-12 rowcontainer">
                <div class="col-sm-3">
                    <select class="form-control dynamic-validation" id="courseLevel" name="courseLevel" required>
                        <option value="">{{__('Level')}}</option>
                        @foreach($courseLevels as $key => $level)
                            <option value="{{$level->id}}">{{($language === 'en')?$level->nameEnglish:$level->nameChinese}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-sm-3">
                    <div class="input-group">
                        <input type="text" class="form-control dynamic-validation" name="universityFilter" id="universityFilter" required>
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="input-group">
                        <input type="text" class="form-control dynamic-validation" name="courseFilter" id="courseFilter" required>
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <select class="form-control dynamic-validation" name="startDate" id="startDate" required>
                        <option value="">{{__('Time of Admission')}}</option>
                    </select>
                </div>
            </div>
        </div>

       <div id='changeCourseData' style="display:none;"></div>

    </div>
    <script>
        $(document).on('change', '#courseLevel', function () {
            $('#universityFilter').val('');
            $('#courseFilter').val('');
            $('#changeCourseData').hide();
            $('#startDate').html('<option value="">{{__('Time of Admission')}}</option>');
            
            populateUniversities(
                $(this).val()
            );
        });
        
        function populateUniversities(courseLevel) {
            $.ajax({
                type: 'POST',
                url: "{{route('getUniversityFilter')}}",
                data: {
                    '_token': "{{ csrf_token() }}",
                    'courseLevel': courseLevel
                },
                dataType: 'JSON',
                success: function (result) {
                    $("#universityFilter").bsSuggest('destroy')
                        .bsSuggest({
                            indexKey: 0,
                            idField: "id",
                            effectiveFields: ['name', 'nameEnglish'],
                            showHeader: false,
                            clearable: true,
                            ignorecase: true,
                            data: {
                                'value': result,
                                'defaults': '全部'
                            }
                        }).on('onSetSelectValue', function (e, selectedData, selectedRawData) {
                            $("#courseFilter").val('');
                            $('#changeCourseData').hide();
                            $('#startDate').html('<option value="">{{__('Time of Admission')}}</option>');
                            
                            populateCourses(selectedRawData.id);
                        });
                }
            });
        }
        
        function populateCourses(uniID) {
            $.ajax({
                type: 'POST',
                url: "{{route('getCourseFilter')}}",
                data: {
                    '_token': "{{ csrf_token() }}",
                    'uniID': uniID,
                    'courseLevel': $('#courseLevel').val()
                },
                dataType:'JSON',
                success: function (result) {
                    $("#courseFilter").bsSuggest('destroy')
                        .bsSuggest({
                            indexKey: 0,
                            idField: "id",
                            effectiveFields: ['name', 'nameEnglish'],
                            showHeader: false,
                            clearable: true,
                            ignorecase: true,
                            data: {
                                'value': result,
                                'defaults': '全部'
                            }
                        }).on('onSetSelectValue', function (e, selectedData, selectedRawData) {
                            $('#changeCourseData').hide();
                            
                            populateStartDates(selectedRawData.id);
                        });
                }
            });
        }
        
        function populateStartDates(courseID) {
            $.ajax({
                type: 'POST',
                url: "{{route('getStartDates')}}",
                data:  {
                    _token: "{{ csrf_token() }}",
                    courseID: courseID
                },
                dataType:'JSON',
                success: function (result) {
                    $('#startDate').html('<option value="">{{__('Time of Admission')}}</option>');

                    for (let year in result) {
                        result[year].forEach(month => {
                            let monthValue = month.replace(/\D/g,'');

                            if (monthValue <= 9) {
                                monthValue = '0' + monthValue;
                            }

                            $('#startDate').append('<option value="'+year+'-'+monthValue+'">'+year+' '+month+'</option>');
                        });
                    }
                    
                    populateCourseData(courseID);
                }
            });
        }
        
        function populateCourseData(courseID) {
            $.ajax({
                type: 'POST',
                url: "{{route('populateCourseData')}}",
                data: {
                    '_token': "{{ csrf_token() }}",
                    'courseID': courseID,
                    'orderItemID': '{{$orderItem->id}}'
                },
                success: function (result) {
                    $('#changeCourseData').html(result);
                }
            });
        }
        
        $('#startDate').on('change', function() {
            if ($(this).val() != 0) {
                $('#changeCourseData').show();
            } else {
                $('#changeCourseData').hide();
            }
        });
    </script>
@endif