@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.'.update',[@$subject,$lesson->id])}}" enctype="multipart/form-data">
                @csrf
                @method('put')

                <input type="hidden" name="id" value="{{$lesson->id}}">
                <input type="hidden" name="type" id="" value="{{$lesson->subject->type}}">
                <input type="hidden" name="lesson_type" id="" value="{{$lesson->subject->lesson_type}}">
                <div class="row">
                    @if($subject =='aside')
                        <div class="col-md-6 form-group">
                            <label class="form-label"> الماده</label>
                            <input type="hidden" name="subject_id" value="{{$lesson->subject_id}}">
                            <select disabled id="" readonly name="subject_id" class="select2-custom subject_id">
                                <option value="">إختر ماده</option>
                                @foreach($subjects as $subject)
                                    <option {{old('subject_id',$lesson->subject_id) ==$subject->id ?'selected':''}}  value="{{$subject->id}}">{{$subject->name}}</option>
                                @endforeach
                            </select>
                            @error('subject_id')
                            <span class="text-danger">{{$message}}</span>
                            @enderror
                        </div>
                    @else
                        <input type="hidden" name="subject_id" value="{{$subject}}">
                    @endif
                    <div class="shapes">
                        @if($lesson->subject->type == 1)
                            @include('dashboard.pages.subjects.subject_shapes.shape_1',['subject'=>$lesson->subject])
                        @elseif($lesson->subject->type == 2)
                            @include('dashboard.pages.subjects.subject_shapes.shape_2',['subject'=>$lesson->subject])
                        @elseif($lesson->subject->type == 3)
                            @include('dashboard.pages.subjects.subject_shapes.shape_3',['subject'=>$lesson->subject])
                        @endif
                    </div>
                </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'),'model'=>$lesson])
    <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()}}')
                }


            }
        });

        /*  $('input[type="radio"]').on('change', function (e) {

              if ($(this).is(':checked')) {
                  if ($(this).val() == 'audio') {
                      $('.have_audio').removeClass('d-none');
                      $('.have_video').addClass('d-none');
                      $('input[name="video"]').val('');
                  } else if ($(this).val() == 'video') {
                      $('.have_audio').addClass('d-none');
                      $('.have_video').removeClass('d-none');
                      $('input[name="audio"]').val('');
                  } else {
                      $('.have_audio').addClass('d-none');
                      $('.have_video').addClass('d-none');
                      $('input[name="video"]').val('');
                      $('input[name="audio"]').val('');
                  }

              } else {

              }

          });*/
    </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">

                           </div>
                        </div>`;

                    $('.shapes').html(spinner)
                },
                success: function (response) {
                    console.log(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);

          });*/
    </script>
    <script>
        @if($lesson->subject->type ==1)

        $('input[name="have_media"]').on('change', function () {
            let class_name = $(this).attr('id');
            if (class_name == 'have_photo') {
                $('.have_photo').removeClass('d-none');
                $('.have_video').addClass('d-none');
                $('.video').val('{{$lesson->video}}');
            } else if (class_name == 'have_video') {
                $('.have_video').removeClass('d-none');
                $('.have_photo').addClass('d-none');
                $('.photo').val('');
                $('.image_preview').attr('src', '{{getFile($lesson->photo)}}');
            }
        });
        $('document').on('change', '#have_color', function () {
            $('.have_color').toggleClass('d-none');
            $('.color').val('{{@$lesson->color}}')
        });
        $('document').on('change', '#have_audio', function () {
            $('.have_audio').toggleClass('d-none');
            $('.audio').val('{{$lesson->audio}}')
        })


        @elseif($lesson->subject->type == 2)
        $('document').on('change', '#have_audio', function () {
            $('.have_audio').toggleClass('d-none');
            $('.audio').val('')
        })
        @elseif($lesson->subject->type == 3)
        $('#have_audio ').add('#have_photo').on('click', function () {
            let class_name = $(this).attr('id');
            console.log(class_name)
            $('.' + class_name).toggleClass('d-none');
        });
        @endif
        $('#have_photo').on('change', function () {
            $('.have_photo').toggleClass('d-none');
            $('.photo').val('');
            $('.image_preview').attr('src', '{{getFile()}}');
        });


        $('#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()}}');
            }
        });
    </script>
@endpush