@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-->


    <div class="row">

        @include('request::includes.provider')
        @include('request::includes.client')

    </div>



    <div class="card">
        <div class="card-header">
            <div class="card-title">النوع :
                <span
                    class="badge bg-{{ $request->typeCssClass() }}-light border-{{ $request->typeCssClass() }} fs-11">{{ $request->typeText() }}</span>

            </div>
        </div>
        <div class="card-body">
            <div class="">
                @if ($request->requestable_type == Modules\Course\Entities\Course::class)
                    @include('request::includes.course')
                @endif

                @if ($request->requestable_type == Modules\Lesson\Entities\Lesson::class)
                    @include('request::includes.lesson')
                @endif
            </div>
        </div>
    </div>



    <!-- Row -->
    <x-form.form title="تعديل طلب إشتراك" method="put" action="{{ route('admin.requests.update', $request) }}">


        <x-form.select2 name="status" placeholder="الحالة" multiple="{{ false }}">
            @foreach ($request->statusArray() as $key => $status)
                <option value="{{ $key }}"
                    {{ old('status') ? ($request->status == old('status') ? 'selected' : '') : ($request->status == $key ? 'selected' : '') }}>
                    {{ $status }}
                </option>
            @endforeach
        </x-form.select2>
@error('status')
    <div class="text-danger mt-1">{{ $message }}</div>
@enderror


        <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