@extends('dashboard.layouts.master')

@section('css')
    <!--Jquery steps CSS -->
    <link rel="stylesheet" href="{{ URL::asset('dashboard/plugins/jquery-steps/jquery.steps.css') }}">
    <style>
        .wizard > .steps > ul > li, .wizard > .actions > ul > li {
            float: right;
        }

        /*.file, .video, .exam {
            display: none;
        }*/
    </style>
@endsection

@section('breadcrumb')
    <div class="col-sm-6">
        <h4 class="page-title">{{trans('labels.lecture')}}</h4>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">{{trans('labels.dashboard')}}</a></li>
            <li class="breadcrumb-item"><a href="{{route('admin.lectures.index')}}">محاضرات</a></li>
            <li class="breadcrumb-item">{{$data->title}}</li>
            <li class="breadcrumb-item active">اضافة محتوى</li>
        </ol>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">

                    <h3>اضافة {{trans('labels.'.request()->type)}} جديد في قسم {{$section->title ?? '----'}}</h3>
                    <fieldset>
                        <div class="row">
                            <div class="col-12">
                                @if(request()->type == 'video')
                                    @include('dashboard.pages.lectures.sections.content.video')
                                @elseif(request()->type == 'exam')
                                    @include('dashboard.pages.lectures.sections.content.exam')
                                @elseif(request()->type == 'file')
                                    @include('dashboard.pages.lectures.sections.content.file')
                                @elseif(request()->type == 'homework')
                                    @include('dashboard.pages.lectures.sections.content.homework')
                                @endif
                            </div>

                        </div>
                </fieldset>


                </div>
            </div>
        </div> <!-- end col -->
    </div>
@endsection

@section('script')

<script>

$(document).on('change', '.video_method', function(){
    var row = this;
    var value = $(this).val();
    var name = $(this).attr('name');
    // var options = ['by_id', 'by_upload'];
    var options = ['by_id', 'by_iframe', 'by_inkryptvideos_id','by_youtube'];
    if($(this).val()){
        options.splice(options.indexOf($(this).val()), 1);
        options.forEach(function (option) {
            $(row).parent().siblings('.'+option).hide();
            $('[name="' + option + '"]').attr('required', false);
            $('[name="' + option + '"]').removeClass('required');
        });
        // console.log($(this).html());
        $(this).parent().siblings('.'+value).show();
        // console.log($(this).html());
        $(this).parent().siblings('.video_title').show();
        $('[name="' + name.replace('type', $(this).val()) + '"]').attr('required', true);
        $('[name="' + name.replace('type', $(this).val()) + '"]').addClass('required');
    }

})

</script>
    <script src="{{ URL::asset('js/lecture-creation.js') }}"></script>

@endsection