@extends('layouts.contentLayoutMaster')
@php
$breadcrumbs = [[['link' => route('applications.index'), 'name' => "الطلبات"],['name'=> 'طلبات التحاق']],['title' => 'اضافة طلب التحاق']];
@endphp

@section('title', 'تسجيل طلب التحاق جديد')

@section('vendor-style')
<link rel="stylesheet" href="{{asset(mix('vendors/css/forms/select/select2.min.css'))}}">
<link rel="stylesheet" href="{{asset(mix('vendors/css/editors/quill/katex.min.css'))}}">
<link rel="stylesheet" href="{{asset(mix('vendors/css/editors/quill/monokai-sublime.min.css'))}}">
<link rel="stylesheet" href="{{asset(mix('vendors/css/editors/quill/quill.snow.css'))}}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/pickers/flatpickr/flatpickr.min.css')) }}">
@endsection

@section('page-style')
<!-- Page css files -->
{{-- Page Css files --}}
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/pickers/form-flat-pickr.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-validation.css')) }}">
@endsection

@section('content')

@component('components.forms.formCard',['title' => sprintf('طلب التحاق جديد للعام الدراسي %s',$year->year_name)])

{{ Form::open(['route' => 'applications.store','method'=> 'POST' , 'class' => 'row','id' => 'adminform' , 'onsubmit' => 'showLoader()']) }}

<x-ui.divider>معلومات ولي الأمر</x-ui.divider>
    @php
    if(old('guardian_id')) {
    $guardian = App\Models\User::where('id', old('guardian_id'))->get()->pluck('first_name','id');
    }
    @endphp
    <div class="row mb-1">
        <div class="col-md">
            <x-inputs.select.generic label="ولي الأمر" name="guardian_id" data-placeholder="ابحث عن ولي الأمر" data-msg="رجاء ولي الأمر" :options="$guardian ?? []" />
        </div>
    </div>

<div class="row mb-1" id="user_info" style="display: none;">

    <div class="col-md">
        <x-inputs.text.Input label="اسم ولي الأمر" name="full_name" :disabled="true" placeholder="ادخل اسم ولي الأمر" data-msg="'اسم ولي الأمر بشكل صحيح" />
    </div>

    <div class="col-md">
        <x-inputs.text.Input label="رقم الجوال" name="phone" :disabled="true" data-msg="' بشكل صحيح" />
    </div>

    <div class="col-md">
        <x-inputs.text.Input label="رقم الهوية" name="user_national_id" :disabled="true" data-msg="' بشكل صحيح" />
    </div>

    <div class="col-md">
        <x-inputs.text.Input label="الفئة" name="category" :disabled="true" data-msg="' بشكل صحيح" />
    </div>
</div>

<x-ui.divider>معلومات الطالب</x-ui.divider>
    <input type="hidden" name="academic_year_id" value="{{$year->id}}">
    <div class="row mb-1">
        <div class="col-md">
            <x-inputs.text.Input icon="user" label="اسم الطالب" name="student_name" placeholder="ادخل اسم الطالب" data-msg="'اسم الطالب بشكل صحيح" />
        </div>

        <div class="col-md">
            <x-inputs.text.Input label="رقم الهوية" icon="file-text" name="national_id" placeholder="ادخل رقم الهوية" data-msg="ارقم الهوية بشكل صحيح" />
        </div>
    </div>
    <div class="row mb-1">
        <div class="col-md">
            <x-inputs.text.Input icon="map-pin" label="مكان الولادة" name="birth_place" placeholder="ادخل مكان الولادة" data-msg="رجاء ادخال مكان الولادة بشكل صحيح" />
        </div>

        <div class="col-md">
            <x-inputs.text.Input class="form-control flatpickr-basic" label="تاريخ الميلاد" icon="calendar" name="birth_date" placeholder="ادخل تاريخ الميلاد بالصيغة الدولية" data-msg="ادخل تاريخ الميلاد بشكل صحيح" />
        </div>
    </div>

<div class="row mb-1">
    <div class="col-md">
        <x-inputs.select.generic label="جنسية الطالب" name="nationality_id" data-placeholder="اختر جنسية الطالب" data-msg="رجاء اختيار جنسية الطالب" :options="App\Models\nationality::nationalities()" />
    </div>

    <div class="col-md">
        <label class="form-label">رعاية خاصة</label>

        <x-inputs.checkbox name="student_care">
            الطالب يحتاج الي رعاية خاصة
        </x-inputs.checkbox>
    </div>
</div>

<x-ui.divider>معلومات الصف الدراسي </x-ui.divider>

    <div class="row mb-1">
        <div class="row mb-1">
            <div class="col-md">
                <label for="school_id" class="form-label">المدرسة</label>
                <select class="form-select" name="school_id" id="school_id">
                    <option value="">إختر المدرسة </option>
                    @foreach(\App\Models\School::Active()->selectedCorporate()->select('id', 'school_name', 'corporate_id')->get() as $school)
                        <option value="{{$school->id}}"> {{$school->school_name}}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md">
                <x-inputs.select.generic select2="" label="القسم" name="gender_id" data-placeholder="اختر القسم" data-msg="رجاء اختيار القسم" :options="old('school_id') ? App\Models\Gender::genders(true,old('school_id')) : []" />
            </div>

            <div class="col-md">
                <x-inputs.select.generic select2="" label="المسار" name="grade_id" data-placeholder="اختر المسار" data-msg="رجاء اختيار المسار" :options="old('gender_id') ?App\Models\Grade::grades(true,old('gender_id')) : []" />
            </div>

            <div class="col-md">
                <x-inputs.select.generic select2="" label="الصف الدراسي" name="level_id" data-placeholder="اختر الصف الدراسي" data-msg="رجاء اختيار الصف الدراسي" :options="old('grade_id') ? App\Models\Level::levels(true,old('grade_id')) : []" />
            </div>
        </div>
    </div>

<x-ui.divider>موعد المفابلة الشخصية</x-ui.divider>

<div class="row mb-1">
<div class="col-md">
    <x-inputs.text.Input label="تاريخ المقابلة" class="form-control flatpickr-basic" icon="calendar" name="selected_date" onchange="getMeetingSlots(this)" placeholder="ادخل متاح  ابتداء من" />
</div>

<div class="col-md">
    <x-inputs.select.generic label="موعد الأجتماع" name="selected_time" data-placeholder="اختر موعد الأجتماع" data-msg="رجاء اختيار موعد الأجتماع" :options="[]" />
</div>
</div>
<div class="row mb-1">
<div class="col-md">
    <label class="form-label mb-1">اجتماع عن بعد ؟</label>
    <x-inputs.checkbox name="online" onclick="toggleMeetingType(this)">
        ادخال معلومات الأجتماع عن بعد
    </x-inputs.checkbox>
</div>
</div>

<div class="row mb-1" id="meeting_info_div" style="{{ old('online') ? '' : 'display: none;' }}">
<div class="col-md-9">
    <x-inputs.text.Input :required="old('online') ? true : false" label="رايط الأجتماع" icon="link" name="online_url" placeholder="ادخل رايط الأجتماع بالصيغة الدولية" data-msg="ادخل رايط الأجتماع بشكل صحيح" />
</div>

<div class="col-md-3">
    <label class="form-label mb-1">اجتماع جديد ؟</label>
    <div>
        <a type="button" class="btn btn-sm btn-outline-danger waves-effect me-1" href="https://meet.google.com/" target="_blank" data-bs-toggle="popover" data-bs-content="اسم المستخدم: meet@nobala.edu.sa -  كلمة السر : rWD6y<4W  - بعد أن تقوم بإنشاء الاجتماع قم بنسخ رابط الاجتماع ولصقه في مربع رايط الأجتماع  " data-bs-trigger="hover" title="ستخدم بيانات الدخول التالية "> <em data-feather='external-link'></em> انشاء اجتماع جديد</a>


    </div>
</div>
</div>

<x-ui.divider>خطة دفع الرسوم الدراسية</x-ui.divider>

<div class="row mb-1">
    <div class="col-md">
        <x-inputs.select.generic select2="" label="خطة الدفع" name="plan_id" data-placeholder="اختر خطة الدفع" data-msg="رجاء اختيار خطة الدفع" :options="App\Models\Plan::plans()" />
    </div>
</div>

<x-ui.divider>خطة النقل</x-ui.divider>


<div class="row mb-1">
    <div class="col-md">
        <x-inputs.select.generic select2="" :required="false" label="'خطة النقل" name="transportation_id" data-placeholder="اختر النقل" data-msg="رجاء اختيار النقل" :options="['' => 'لا يرغب'] + App\Models\Transportation::transportations()" />
    </div>

    <div class="col-md">
        <x-inputs.select.generic select2="" :required="false" label="خطة دفع النقل" name="transportation_payment" data-placeholder="اختر خطة دفع النقل" data-msg="رجاء اختيار خطة دفع النقل" :options="['' => 'لا يرغب'] + App\Models\Transportation::payment_plans()" />
    </div>
</div>


<div class="col-12 text-center mt-2">
    <x-inputs.submit id="submit_btn">تسجيل طلب الألتحاق</x-inputs.submit>
    <x-inputs.link route="applications.index">عودة</x-inputs.link>
</div>

{!! Form::close() !!}

@endcomponent

@endsection

@section('vendor-script')
<script src="{{ asset(mix('vendors/js/pickers/pickadate/picker.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/pickers/pickadate/picker.date.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/pickers/pickadate/picker.time.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/pickers/pickadate/legacy.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/pickers/flatpickr/flatpickr.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/validation/jquery.validate.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
@endsection

@section('page-script')
<script src="{{ asset(mix('js/scripts/forms/pickers/form-pickers.js')) }}"></script>
<script src="{{ asset(mix('js/scripts/forms/form-select2.js')) }}"></script>

<script>
    $(document).ready(function() {

        $("#submit_btn").on("click", function() {
            // Disable the button to prevent double-click
            $(this).prop("disabled", true);
            $('#adminform').submit();
        });
    });
    const selected_date = document.getElementById('selected_date');
    if (selected_date.value) {
        getMeetingSlots(selected_date).then(
            $('#selected_time').val('