@extends('Master')
@section('title',"طلب الالتحاق - $last_smtr_name")
@section('content')

<div class="portlet light portlet-fit portlet-form">
    <div class="portlet-body">
        <form id="app-form" class="form-horizontal" action="{{ url('/process_application') }}" method="post">
            {{ csrf_field() }}
            <div class="form-body">
                <div class="row">
                    <div class="col-md-7">
                        <div class="portlet box blue-hoki">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="fa fa-user"></i> البيانات الشخصية
                                </div>
                            </div>
                            <div class="portlet-body">
                                <div class="form-group">
                                    <label class="col-md-3 control-label">الاسم الرباعي</label>
                                    <div class="col-md-9">
                                        <div class="input-icon right">
                                            <i class="fa fa-user"></i>
                                            <input type="text" class="form-control" disabled="disabled"
                                                   value="{{$applicationInfo->NameAra1? $applicationInfo->NameAra1.' '.$applicationInfo->NameAra2.' '.$applicationInfo->NameAra3.' '.$applicationInfo->NameAra4: __('errors.emptyData')}} ">                                                            
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3">الاسم باللغة الإنجليزية</label>
                                    <div class="col-md-9">
                                        <div class="input-icon right">
                                            <i class="fa fa-user"></i>
                                            <input type="text" name="name-en" value="{{ $applicationInfo->NameEng }}" class="form-control" placeholder="اسم الطالب باللغة الإنجليزية"></div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3">البريد الالكتروني</label>
                                    <div class="col-md-9">
                                        <div class="input-icon right">
                                            <i class="fa fa-envelope"></i>
                                            <input type="text" name="email" class="form-control" placeholder="البريد الإلكتروني الخاص بك"
                                                   value="{{ $applicationInfo->EMail ? $applicationInfo->EMail : ''}}">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3">تاريخ الميلاد</label>
                                    <div class="col-md-2">
                                        <input type="text" name="day-of-birth" value="{{ strtotime($applicationInfo->DoB) && strtotime($applicationInfo->DoB) > 0 ? date('j', strtotime($applicationInfo->DoB)) : '' }}" class="form-control" placeholder="اليوم">
                                    </div>
                                    <div class="col-md-2">
                                        <input type="text" name="month-of-birth" value="{{ strtotime($applicationInfo->DoB) && strtotime($applicationInfo->DoB) > 0 ? date('n', strtotime($applicationInfo->DoB)) : '' }}" class="form-control" placeholder="الشهر">
                                    </div>
                                    <div class="col-md-3">
                                        <input type="text" name="year-of-birth" value="{{ strtotime($applicationInfo->DoB) && strtotime($applicationInfo->DoB) > 0 ? date('Y', strtotime($applicationInfo->DoB)) : '' }}" class="form-control" placeholder="السنة">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3">مكان الميلاد</label>
                                    <div class="col-md-9">
                                        <div class="input-icon right">
                                            <i class="fa fa-map-marker"></i>
                                            <input type="text" name="place-of-birth" value="{{ $applicationInfo->PoB }}" class="form-control">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3">الجنس</label>
                                    <div class="col-md-9">
                                        <div class="mt-radio-inline">
                                            <label class="mt-radio">
                                                <input type="radio" name="gender" value="1" {{ $applicationInfo->Gender == 1 ? 'checked' : '' }}> ذكر
                                                <span></span>
                                            </label>
                                            <label class="mt-radio">
                                                <input type="radio" name="gender" value="2" {{ $applicationInfo->Gender == 2 ? 'checked' : '' }}> أنثى
                                                <span></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3">الحالة الاجتماعية</label>
                                    <div class="col-md-9">
                                        <select class="form-control" name="marital-status">
                                            <option value="">-- الرجاء اختيار الحالة الاجتماعية --</option>
                                            @if(!is_null($maritalStatus) && count($maritalStatus)>0)
                                            @foreach($maritalStatus as $mtStatus)
                                            <option value="{{$mtStatus->MaritalstatusNo}}" {{ $applicationInfo->MaritalStatus == $mtStatus->MaritalstatusNo ? 'selected' : '' }}>{{$mtStatus->MaritalstatusName}}</option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3">المدرسة</label>
                                    <div class="col-md-9">
                                        <select class="form-control" name="school">
                                            <option value="">-- الرجاء اختيار المدرسة --</option>
                                            @if(!is_null($schools) && count($schools)> 0)
                                            @foreach($schools as $school)
                                            <option value="{{$school->schoolNo}}" {{ $applicationInfo->school == $school->schoolNo ? 'selected' : '' }}>{{$school->schoolName}}</option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3">المحافظة</label>
                                    <div class="col-md-9">
                                        <select id="address-state" class="form-control" name="address-state" onChange="getCities(this.value)">
                                            <option value="">-- الرجاء اختيار المحافظة --</option>
                                            @if(!is_null($addressState) && count($addressState)> 0)
                                            @foreach($addressState as $state)
                                            <option value="{{$state->StateNo}}"{{ $applicationInfo->AddressState && $applicationInfo->AddressState == $state->StateNo ? 'selected' : '' }}>{{$state->StateName}}</option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3">المدينة</label>
                                    <div class="col-md-9">
                                        <select id="address-city" class="form-control" name="address-city">
                                            <option value="">-- الرجاء اختيار المدينة --</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3">العنوان بالتفصيل</label>
                                    <div class="col-md-9">
                                        <textarea rows="3" class="form-control" name="address-details">{{ $applicationInfo->AddressDetails }}</textarea>
                                        <span class="help-block">كتابتك لبيانات دقيقة يساعدك في الحصول على امتيازات من خلال الكلية</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3">رقم الهاتف</label>
                                    <div class="col-md-9">
                                        <div class="input-icon right">
                                            <i class="fa fa-phone"></i>
                                            <input type="text" value="{{ $applicationInfo->PhoneNo1 }}" class="form-control" name="phone" placeholder="رقم الهاتف يجب أن يتكون من 7 خانات فقط">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3">رقم الجوال</label>
                                    <div class="col-md-9">
                                        <div class="input-icon right">
                                            <i class="fa fa-mobile-phone"></i>
                                            <input type="text" value="{{ $applicationInfo->MobileNo }}" class="form-control" name="mobile" placeholder="رقم الجوال يجب أن يتكون من 10 أرقام وأن يبدأ بـ 059 أو 056">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-5">
                        <div class="portlet box blue-hoki">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="fa fa-check-square-o"></i> الرغبات حسب الترتيب
                                </div>
                            </div>
                            <div class="portlet-body">
                                <div class="form-group">
                                    <label class="col-md-4 control-label">الرغبة الأولى</label>
                                    <div class="col-md-8">
                                        <select class="form-control" name="wish-1" id="wish-1"  {{ ($applicationInfo->StudentStatus >= config('constants.std_status_accredited') || $applicationInfo->Bridged == 1) ? 'disabled' : '' }}>
                                            <option value="">-- الرجاء اختيار الرغبة الأولى --</option>
                                            @foreach($plans as $v)
                                            @if($applicationInfo->WishedPlan2 && $applicationInfo->WishedPlan2 == $v->PlanNo)
                                            @continue
                                            @endif
                                            @if($applicationInfo->WishedPlan3 && $applicationInfo->WishedPlan3 == $v->PlanNo)
                                            @continue
                                            @endif
                                            <option value="{{$v->PlanNo}}" {{ $applicationInfo->WishedPlan1 == $v->PlanNo ? 'selected' : '' }}>{{$v->FullPlanName}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4 control-label">الرغبة الثانية</label>
                                    <div class="col-md-8">
                                        <select class="form-control" name="wish-2" id="wish-2" data-title="-- الرجاء اختيار الرغبة الثانية --" {{ ($applicationInfo->StudentStatus >= config('constants.std_status_accredited') || $applicationInfo->Bridged == 1) ? 'disabled' : '' }}>
                                            <option value="">-- الرجاء اختيار الرغبة الثانية --</option>
                                            @if($applicationInfo->WishedPlan2)
                                            @foreach($plans as $v)
                                            @if($applicationInfo->WishedPlan1 && $applicationInfo->WishedPlan1 == $v->PlanNo)
                                            @continue
                                            @endif
                                            @if($applicationInfo->WishedPlan3 && $applicationInfo->WishedPlan3 == $v->PlanNo)
                                            @continue
                                            @endif
                                            <option value="{{$v->PlanNo}}" {{ $applicationInfo->WishedPlan2 == $v->PlanNo ? 'selected' : '' }}>{{$v->FullPlanName}}</option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4 control-label">الرغبة الثالثة</label>
                                    <div class="col-md-8">
                                        <select class="form-control" name="wish-3" id="wish-3" data-title="-- الرجاء اختيار الرغبة الثالثة --" {{ ($applicationInfo->StudentStatus >= config('constants.std_status_accredited') || $applicationInfo->Bridged == 1) ? 'disabled' : '' }}>
                                            <option value="">-- الرجاء اختيار الرغبة الثالثة --</option>
                                            @if($applicationInfo->WishedPlan2)
                                            @foreach($plans as $v)
                                            @if($applicationInfo->WishedPlan1 && $applicationInfo->WishedPlan1 == $v->PlanNo)
                                            @continue
                                            @endif
                                            @if($applicationInfo->WishedPlan2 && $applicationInfo->WishedPlan2 == $v->PlanNo)
                                            @continue
                                            @endif
                                            <option value="{{$v->PlanNo}}" {{ $applicationInfo->WishedPlan3 == $v->PlanNo ? 'selected' : '' }}>{{$v->FullPlanName}}</option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-actions">
                <div class="row">
                    <div class="col-md-12">
                        <button type="submit" class="btn btn-lg green-meadow"><i class="fa fa-check"></i> حفظ الطلب</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

</div>
@endsection
@section('footerScript')
<script type="text/javascript">
    jQuery(document).ready(function ($) {
        var state = document.getElementById('address-state').value;

        getCities(state);

        var form = $('#app-form');
        var error = $('.alert-danger', form);
        var success = $('.alert-success', form);

        $.validator.addMethod("mobile", function (value, element, params) {
            return this.optional(element) || new RegExp(params).test(value);
        }, 'رقم الجوال يجب أن يتكون من 10 أرقام وأن يبدأ بـ 059 أو 056');

        $(form).validate({
            errorElement: 'span',
            errorClass: 'help-block help-block-error',
            focusInvalid: false,
            ignore: "",
            rules: {
                'name-en': {
                    required: true
                },
                email: {
                    required: true,
                    email: true
                },
                'day-of-birth': {
                    required: true,
                    digits: true
                },
                'month-of-birth': {
                    required: true,
                    digits: true
                },
                'year-of-birth': {
                    required: true,
                    digits: true
                },
                'place-of-birth': {
                    required: true
                },
                gender: {
                    required: true
                },
                'marital-status': {
                    required: true
                },
                school: {
                    required: true
                },
                'address-state': {
                    required: true
                },
                'address-city': {
                    required: true
                },
                'address-details': {
                    required: true
                },
                phone: {
                    required: true,
                    digits: true,
                    minlength: 7,
                    maxlength: 7
                },
                mobile: {
                    required: true,
                    mobile: /^05[6,9][1-9]\d{6}$/
                },
                'wish-1': {
                    required: true
                },
                'wish-2': {
                    required: true
                },
                'wish-3': {
                    required: true
                }
            },
            invalidHandler: function (event, validator) {
                success.hide();
                error.show();

                var errors = validator.numberOfInvalids();

                if (errors) {
                    $('html, body').animate({
                        scrollTop: $(validator.errorList[0].element).offset().top - 100
                    }, 'slow', function () {
                        validator.errorList[0].element.focus();
                    });
                }
            },
            errorPlacement: function (error, element) {
                if (element.parents('.mt-radio-inline').size() > 0 || element.parents('.mt-checkbox-inline').size() > 0) {
                    if (element.parents('.mt-radio-inline').size() > 0) {
                        error.appendTo(element.parents('.mt-radio-inline')[0]);
                    }
                    if (element.parents('.mt-checkbox-inline').size() > 0) {
                        error.appendTo(element.parents('.mt-checkbox-inline')[0]);
                    }
                } else if (element.parent(".input-group").size() > 0) {
                    error.insertAfter(element.parent(".input-group"));
                } else if (element.attr("data-error-container")) {
                    error.appendTo(element.attr("data-error-container"));
                } else {
                    error.insertAfter(element);
                }
            },
            highlight: function (element) {
                $(element).closest('.form-group').addClass('has-error');
            },
            unhighlight: function (element) {
                $(element).closest('.form-group').removeClass('has-error');
            },
            success: function (label) {
                label.closest('.form-group').removeClass('has-error');
            },
            submitHandler: function (form) {
                success.show();
                error.hide();
                form[0].submit();
            }
        });

        $('#wish-1').on('change', function () {
            var wish1 = $(this).val();
            if (wish1 === '') {
                $('#wish-2').html($('<option>', {value: ''}).html($('#wish-2').data('title')).prop('outerHTML'));
                $('#wish-3').html($('<option>', {value: ''}).html($('#wish-3').data('title')).prop('outerHTML'));
            } else {
                get_plans([wish1], $('#wish-2'));
                $('#wish-3').html($('<option>', {value: ''}).html($('#wish-3').data('title')).prop('outerHTML'));
            }
        });

        $('#wish-2').on('change', function () {
            var wish1 = $('#wish-1').val();
            var wish2 = $(this).val();
            if (wish2 === '') {
                $('#wish-3').html($('<option/>', {value: ''}).html($('#wish-3').data('title')).prop('outerHTML'));
            } else {
                get_plans([wish1, wish2], $('#wish-3'));
            }
        });

        if ($('#wish-3').val() === '') {
            $('#wish-2').trigger('change');
        }

        if ($('#wish-2').val() === '') {
            $('#wish-1').trigger('change');
        }
    });

    function getCities(val) {
        $.ajax({
            type: "GET",
            url: "{{url('/getCities')}}",
            data: 's=' + val,
            success: function (data) {
                $("#address-city").html(data);
            }
        });
    }

    function get_plans(selectedWishes, target) {
        $.ajax({
            type: "GET",
            url: "{{url('/get_plans')}}",
            data: {'selected-wishes': selectedWishes},
            success: function (data) {
                var result = JSON.parse(data);
                var title = $('<option/>', {value: ''}).html(target.data('title')).prop('outerHTML');
                var html = title + result.html;
                target.html(html);
            }
        });
    }
</script>
@endsection