@extends('layouts.app')

@section('styles')
    <link href="{{ asset('assets/plugins/select2/select2.min.css') }}" rel="stylesheet" />
    <!-- INTERNAL File Uploads css -->
    <link href="{{ asset('assets/plugins/fancyuploder/fancy_fileupload.css') }}" rel="stylesheet" />
    <!-- INTERNAL File Uploads css-->
    <link href="{{ asset('assets/plugins/fileupload/css/fileupload.css') }}" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="{{ asset('assets/plugins/tagify-master/dist/tagify.css') }}">
@endsection

@section('content')
    <!--Page header-->
    <div class="page-header">
        <div class="page-leftheader">
            <h4 class="page-title mb-0 text-primary">حصص فردية</h4>
        </div>
    </div>
    <!--End Page header-->

    <!-- Row -->
    <x-form.form title="تعديل مقرر" method="put" action="{{ route('admin.lessons.update', $lesson) }}">


        <x-form.select2 name="provider_id" placeholder="مقدم الخدمة" multiple="{{ false }}">
            @foreach ($providers as $provider)
                <option value="{{ $provider->id }}"
                    {{ old('providers') ? ($provider->id == old('providers') ? 'selected' : '') : ($provider->id == $lesson->provider_id ? 'selected' : '') }}>
                    {{ $provider->first_name . ' ' . $provider->last_name }}
                </option>
            @endforeach
        </x-form.select2>

        <x-form.select2 id="educational_stages" name="educational_stage_id" placeholder="المرحلة الدراسية"
            multiple="{{ false }}">
            @foreach ($educational_stages as $educational_stage)
                <option value="{{ $educational_stage->id }}"
                    {{ old('educational_stage_id') ? ($educational_stage->id == old('educational_stage_id') ? 'selected' : '') : ($educational_stage->id == $lesson->educational_stage_id ? 'selected' : '') }}>
                    {{ $educational_stage->name }}
                </option>
            @endforeach
        </x-form.select2>

        <x-form.select2 id="educational_years" name="educational_year_id" placeholder="السنة الدراسية"
            multiple="{{ false }}">
            @foreach ($educational_years as $educational_year)
                <option value="{{ $educational_year->id }}"
                    {{ old('educational_year_id') ? ($educational_year->id == old('educational_year_id') ? 'selected' : '') : ($educational_year->id == $lesson->educational_year_id ? 'selected' : '') }}>
                    {{ $educational_year->name }}
                </option>
            @endforeach
        </x-form.select2>

        <x-form.select2 id="subjects" name="subject_id" placeholder="المادة" multiple="{{ false }}">
            @foreach ($subjects as $subject)
                <option value="{{ $subject->id }}"
                    {{ old('subject_id') ? ($subject->id == old('subject_id') ? 'selected' : '') : ($subject->id == $lesson->subject_id ? 'selected' : '') }}>
                    {{ $subject->name }}
                </option>
            @endforeach
        </x-form.select2>


        <x-form.textarea id="content" name='content' value="{{ old('content') ?? $lesson->content }}" title="الوصف" />


        <x-form.input id="hour_price" name='hour_price' value="{{ old('hour_price') ?? $lesson->hour_price->dollar }}" title="سعر الساعة غير شامل الضريبة" />

        <button type="submit" class="btn btn-primary mt-4 mb-0">حفظ</button>
    </x-form.form>
    <!-- /Row -->
@endsection('content')


@section('scripts')
    <script src="{{ asset('assets/plugins/select2/select2.full.min.js') }}"></script>
    <script src="{{ asset('assets/js/select2.js') }}"></script>
    <!-- INTERNAL File uploads js -->
    <script src="{{ asset('assets/plugins/fileupload/js/dropify.js') }}"></script>
    <script src="{{ asset('assets/js/filupload.js') }}"></script>
    <script src="{{ asset('assets/plugins/tagify-master/dist/jQuery.tagify.min.js') }}"></script>
@endsection

@push('scripts')
    <script>
        function getEducationalYears(id) {
            $.ajax({
                type: 'GET',
                url: "{{ route('admin.options.educationalYears') }}",
                data: {
                    educational_stage_id: id
                },
                success: function(data) {
                    // console.log(data);
                    $('#educational_years').empty();
                    $('#educational_years').append(data);

                    var educationalYear = $('#educational_years').find(":selected").val();
                    getEducationalSubjects(educationalYear);
                }
            });
        }

        function getEducationalSubjects(id) {
            $.ajax({
                type: 'GET',
                url: "{{ route('admin.options.subjects') }}",
                data: {
                    educational_year_id: id
                },
                success: function(data) {
                    $('#subjects').empty();
                    $('#subjects').append(data);;
                }
            });
        }


        $(function() {

            $('#educational_stages').on('change', function() {
                var educationalStage = $('#educational_stages').find(":selected").val();
                getEducationalYears(educationalStage);
            });

            $('#educational_years').on('change', function() {
                var educationalYear = $('#educational_years').find(":selected").val();
                getEducationalSubjects(educationalYear);
            });

        });
    </script>
@endpush