@extends('dashboard.layouts.master')
@section('content')
    <div class="card">
        <div class="card-header">
            <h3>{{@$create}}</h3>
        </div>
        <div class="card-body pb-0">
            <form class="lesson_form" method="post" action="{{route(@$route.'.store',@$subject)}}" enctype="multipart/form-data">
                @csrf

                <input type="hidden" name="video_length" id="video_length">
                <div class="row">
                    @if($subject =='aside')
                        <div class="col-md-6 form-group">
                            <label class="form-label"> الماده</label>
                            <select id="" name="subject_id" class="select2-custom subject_id">
                                <option value="">إختر ماده</option>
                                @foreach($subjects as $sub)
                                    <option {{old('subject_id') ==$sub->id ?'selected':''}}  value="{{$sub->id}}">{{$sub->name}}</option>
                                @endforeach
                            </select>
                            @error('subject_id')
                            <span class="text-danger">{{$message}}</span>
                            @enderror
                        </div>
                    @else
                        <input type="hidden" name="type" id="" value="{{$subject->type}}">
                        <input type="hidden" name="lesson_type" id="" value="{{$subject->lesson_type}}">
                        <input type="hidden" name="subject_id" value="{{$subject->id}}">
                    @endif

                    @if($subject =='aside')
                        <div class="shapes">
                            @if(old('type')==1)
                                @include('dashboard.pages.subjects.subject_shapes.shape_1')
                            @elseif(old('type')==2)
                                @include('dashboard.pages.subjects.subject_shapes.shape_2')
                            @elseif(old('type')==3)
                                @include('dashboard.pages.subjects.subject_shapes.shape_3')
                            @endif
                        </div>
                    @else
                        @include('dashboard.pages.subjects.subject_shapes.shape_'.@$shape)
                    @endif

                </div>


                <div class="card-footer">
                    <button class="btn btn-primary btn-air-primary btn-icon" type="submit">
                        <i class="fa fa-save"></i>
                        حفظ
                    </button>
                </div>
            </form>
        </div>
    </div>

@endsection
@push('js')
    @include('dashboard.pages.lessons.submit_with_video',['route'=>route('lessons.uploadVideo')])

    <script>
        /*   $('input[type="checkbox"]').on('change', function (e) {
               let div = $(this).attr('name'),
                   input_name = div.replace('have_', '');

               if ($(this).is(":checked", true)) {
                   $('.' + div).removeClass('d-none');
               } else {
                   $('.' + div).addClass('d-none');
                   $(`input[name=${input_name}]`).val('');

                   if (input_name == 'description') {
                       $('.cke_editable p ').html('');
                   }
                   if (input_name == 'photo') {
                       $('.image_preview').attr('src', '{{getFile()}}')
                }


            }
        });*/


    </script>
    <script>
        $('.subject_id').on('change', function () {
            let id = $(this).val(),
                url = '{{route('lessons.shapes',':id')}}';
            url = url.replace(':id', id);

            $.ajax({
                type: 'get',
                url: url,
                beforeSend: function () {
                    let spinner = `<div class="d-flex justify-content-center">
                           <div class="spinner-border text-success" role="status">
                                <span class="sr-only">Loading...</span>
                           </div>
                        </div>`;

                    $('.shapes').html(spinner)
                },
                success: function (response) {

                    $('.shapes').html(response)
                }
            })
        })
    </script>


    <script>


        /*   $('.form').on('submit', function (e) {
               e.preventDefault();
               $('.is-invalid').removeClass('is-invalid');
               $('.text-danger').remove();
               for (instance in CKEDITOR.instances) {
                   CKEDITOR.instances[instance].updateElement();
               }
               var data = new FormData(e.target),
                   url = $(this).attr('action');

               function callBack(response) {
                   if (response.status == 200) {
                       Toast.fire({
                           icon: 'success',
                           title: 'تم حفظ البيانات بنجاح'
                       })
                       window.location.href = response.data.url;
                   } else {

                       $.each(response.responseJSON.errors, function (key, value) {
                           let input = $(`input[name="${key}"] , select[name="${key}"],textarea[name="${key}"]`);
                           input.addClass('is-invalid');
                           input.parent().append(`<span class="text-danger">${value}</span>`);
                           Toast.fire({
                               icon: 'warning',
                               title: value
                           })
                       })
                   }
               }

               submitFormByAjax(url, data, callBack);

           });*/

        function callBack(response) {
            if (response.status == 200) {
                Toast.fire({
                    icon: 'success',
                    title: 'تم حفظ البيانات بنجاح'
                })
                window.location.href = response.data.url;
            } else {


                $.each(response.responseJSON.errors, function (key, value) {
                    let input = $(`input[name="${key}"] , select[name="${key}"],textarea[name="${key}"]`);
                    input.addClass('is-invalid');
                    input.parent().append(`<span class="text-danger">${value}</span>`);
                    Toast.fire({
                        icon: 'warning',
                        title: value
                    })
                })
            }
        }
    </script>

    <script>


        /*  $('#have_photo').on('click', function () {
              let class_name = $(this).attr('id');
              if ($(this).is(':checked')) {
                  $('.' + class_name).removeClass('d-none');
              } else {
                  $('.' + class_name).addClass('d-none');
              }

          });
          $('#have_video').on('click', function () {
              let class_name = $(this).attr('id');
              if ($(this).is(':checked')) {
                  $('.' + class_name).removeClass('d-none');
              } else {
                  $('.' + class_name).addClass('d-none');
              }

          });*/


        $('input[type="radio"]').on('change', function (e) {
            if ($(this).is(':checked')) {
                if ($(this).val() == 'photo') {

                    $('.have_photo').removeClass('d-none');
                    $('.have_video').addClass('d-none');
                    $('input[name="video"]').val('');
                } else if ($(this).val() == 'video') {
                    $('.have_photo').addClass('d-none');
                    $('.have_video').removeClass('d-none');
                    $('input[name="photo"]').val('');
                }

            } else {

            }

        });

        $('#have_audio').on('click', function () {
            let class_name = $(this).attr('id');

            if ($(this).is(':checked')) {
                $('.' + class_name).removeClass('d-none');
            } else {
                $('.' + class_name).addClass('d-none');
            }

        });

        $('#have_color').on('change', function () {
            $('.have_color').toggleClass('d-none');
            $('.color').val('')
        });

        $('#have_photo').on('change', function () {
            if ($(this).is(':checked')) {
                $('.have_photo').removeClass('d-none');
            } else {
                $('.have_photo').addClass('d-none');
                $('.photo').val('');
                $('.image_preview').attr('src', '{{getFile()}}');
            }
        });

        /*  $('#have_photo').on('change', function () {
              $('.have_photo').toggleClass('d-none');
              $('.photo').val('');
              $('.image_preview').attr('src', '{{getFile(@$lesson->photo)}}');
        });*/

    </script>



@endpush