@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')}}">{{trans('labels.lectures')}}</a></li>
            <li class="breadcrumb-item active">{{trans('labels.create')}}</li>
        </ol>
    </div>
@endsection

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

                    <form id="form-horizontal" class="form-horizontal form-wizard-wrapper"
                          action="{{route('admin.lectures.store')}}" method="post" enctype="multipart/form-data">
                        @csrf
                        <h3>{{trans('labels.basic_info')}}</h3>
                        <fieldset>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group row">
                                        <label for="type"
                                               class="col-lg-3 col-form-label">{{trans('labels.lecture_type')}}</label>
                                        <div class="col-lg-9">
                                            <select id="type" name="type"
                                                    class="form-control @error('type') is-invalid @enderror">
                                                <option value="">{{trans('labels.select')}}</option>
                                                <option value="lecture"
                                                        @if(old('type') === 'lecture') selected @endif>{{trans('labels.lecture')}}</option>
                                                <option value="revision"
                                                        @if(old('type') === 'revision') selected @endif>{{trans('labels.revision')}}</option>
                                                <option value="exam"
                                                        @if(old('type') === 'exam') selected @endif>{{trans('labels.exam')}}</option>
                                            </select>
                                            @error('type')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group row">
                                        <label for="title"
                                               class="col-lg-3 col-form-label">{{trans('labels.name')}}</label>
                                        <div class="col-lg-9">
                                            <input id="title" name="title" type="text"
                                                   class="form-control @error('title') is-invalid @enderror"
                                                   value="{{old('title')}}">
                                            @error('title')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group row">
                                        <label for="description"
                                               class="col-lg-3 col-form-label">{{trans('labels.description')}}</label>
                                        <div class="col-lg-9">
                                            <textarea id="description" name="description" type="text"
                                                      class="form-control @error('description') is-invalid @enderror">{{old('description')}}</textarea>
                                            @error('description')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group row">
                                        <label for="image"
                                               class="col-lg-3 col-form-label">{{trans('labels.image')}}</label>
                                        <div class="col-lg-9">
                                            <input id="image" name="image" type="file" class="form-control @error('image') is-invalid @enderror">
                                            @error('image')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group row">
                                        <label for="subscription_fees"
                                               class="col-lg-3 col-form-label">{{trans('labels.subscription_fees')}}</label>
                                        <div class="col-lg-9">
                                            <input id="subscription_fees" name="subscription_fees" type="number"
                                                   class="form-control @error('subscription_fees') is-invalid @enderror" value="{{old('subscription_fees')}}">
                                            @error('subscription_fees')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group row">
                                        <label for="duration"
                                               class="col-lg-3 col-form-label">{{trans('labels.duration')}}</label>
                                        <div class="col-lg-9">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group row">
                                                        <label for="txtAddress2Billing"
                                                               class="col-lg-3 col-form-label">{{trans('labels.m')}}</label>
                                                        <div class="col-lg-9">
                                                            <input id="duration" name="duration_minutes" type="number"
                                                                   class="form-control @error('duration_minutes') is-invalid @enderror" value="{{old('duration_minutes')}}">
                                                            @error('duration_minutes')
                                                            <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group row">
                                                        <label for="txtAddress2Billing"
                                                               class="col-lg-3 col-form-label">{{trans('labels.h')}}</label>
                                                        <div class="col-lg-9">
                                                            <input id="duration" name="duration_hours" type="number"
                                                                   class="form-control @error('duration_hours') is-invalid @enderror" value="{{old('duration_hours')}}">
                                                            @error('duration_hours')
                                                            <span class="invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group row">
                                        <label for="subscription_fees"
                                               class="col-lg-3 col-form-label">{{trans('labels.expired_at')}}</label>
                                        <div class="col-lg-9">
                                            <input id="expired_at" name="expired_at" type="date"
                                                   class="form-control @error('expired_at') is-invalid @enderror" value="{{old('expired_at')}}">
                                            @error('expired_at')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        <h3>{{trans('labels.lecture_sections')}}</h3>
                        <fieldset>
                            <div class="row">
                                 <div class="col-12">
                                <div id="accordion">
                                    @foreach($data['sections'] as $key => $section)

                                    <div class="card mb-1">
                                        <div class="card-header p-3" id="heading{{$key}}">
                                            <h6 class="m-0 font-14">
                                                <input id="order" class="form-control" name="sections[{{$key}}]['order']" type="number" min="1" style="float: left; width: 5%;" value="0">
                                                <input type="hidden" name="sections[{{$key}}][section]" value="{{$section->id}}">
                                                <a href="#collapse{{$key}}" class="text-dark" data-toggle="collapse"
                                                        aria-expanded="true"
                                                        aria-controls="collapse{{$key}}"
                                                        style="font-size: 18px;">
                                                    
                                                    {{$section->title}} <span id="section_content{{$key}}"></span>
                                                </a>
                                            </h6>
                                        </div>

                                        <div id="collapse{{$key}}" class="collapse"
                                                aria-labelledby="heading{{$key}}" data-parent="#accordion" data-section-key="{{$key}}">
                                            <div class="card-body">
                                                <button type="button"
                                                            class="addcontent btn btn-primary inner" data-section-key="{{$key}}"><i class="ti-plus"></i>
                                                    </button>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                                <div class="col-12 outer-repeater">
                                    <div data-repeater-list="sections">
                                        <div data-repeater-item class="row bg-light mb-2">
                                            <div class="row col-12 bg-light">
                                                <div class="form-group col-lg-1">
                                                    <label for="order">{{trans('labels.order')}}</label>
                                                    <input id="order" class="form-control" name="order" type="number" min="1">
                                                    @error('title')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                    @enderror
                                                </div>
                                                <div class="form-group col-lg-5">
                                                    <label>{{trans('labels.section')}}</label>
                                                    <select class="form-control @error('section') is-invalid @enderror"
                                                            name="section">
                                                        <option value="">{{trans('labels.select')}}</option>
                                                        @foreach($data['sections'] as $section)
                                                            <option value="{{$section->id}}"
                                                                    @if(old('title') == $section->id) selected @endif>{{$section->title}}</option>
                                                        @endforeach
                                                    </select>
                                                    @error('title')
                                                    <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                                    @enderror
                                                </div>
                                                <div class="form-group col-lg-1 align-self-end">
                                                    <button data-repeater-delete type="button"
                                                            class="btn btn-danger">
                                                        <i class="far fa-trash-alt"></i></button>

                                                </div>
                                            </div>
                                            <div class="form-group col-lg-10">
                                                <div class="inner-repeater mb-4">
                                                    <div data-repeater-list="contents" class="inner form-group">
                                                        <div data-repeater-item class="inner mb-3 row">
                                                            <div class="col-lg-1">
                                                                <label for="order">{{trans('labels.order')}}</label>
                                                                <input id="order" class="form-control" name="order" type="number" min="1">
                                                                @error('title')
                                                                <span class="invalid-feedback" role="alert">
                                                                    <strong>{{ $message }}</strong>
                                                                </span>
                                                                @enderror
                                                            </div>
                                                            <div class="col-md-3">
                                                                <label for="type"
                                                                       class="col-lg-12">{{trans('labels.type')}}</label>
                                                                <select id="type" name="type"
                                                                        class="inner form-control type">
                                                                    <option value="">{{trans('labels.select')}}</option>
                                                                    <option
                                                                        value="exam">{{trans('labels.exam')}}</option>
                                                                    <option
                                                                        value="file">{{trans('labels.file')}}</option>
                                                                    <option
                                                                        value="video">{{trans('labels.video')}}</option>
                                                                </select>
                                                            </div>
                                                            <div class="col-md-3 exam">
                                                                <label for="exam"
                                                                       class="col-lg-12">{{trans('labels.exam')}}</label>
                                                                <select id="exam" name="exam"
                                                                        class="inner form-control">
                                                                    <option value="">{{trans('labels.select')}}</option>
                                                                    @foreach($data['exams'] as $exam)
                                                                        <option value="{{$exam->id}}"
                                                                                @if(old('title') == $exam->id) selected @endif>{{$exam->title}}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            <div class="col-md-3 file">
                                                                <label for="file"
                                                                       class="col-lg-12">{{trans('labels.file')}}</label>
                                                                <input type="file" id="file" name="file"
                                                                       class="inner form-control">
                                                            </div>
                                                            <div class="col-md-3 video">
                                                                <label for="video"
                                                                       class="col-lg-12">{{trans('labels.video')}}</label>
                                                                <input type="file" id="video" name="video"
                                                                       class="inner form-control">
                                                            </div>
                                                            <div class="col-md-2 col-4 align-self-end">
                                                                <button data-repeater-delete type="button"
                                                                        class="btn btn-danger inner">
                                                                    <i class="far fa-trash-alt"></i></button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <button data-repeater-create type="button"
                                                            class="btn btn-primary inner"><i class="ti-plus"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <input data-repeater-create type="button" class="btn btn-success mo-mt-2"
                                           value="{{trans('labels.add_section')}}"/>
                                </div>
                            </div>
                        </fieldset>
                    </form>

                </div>
            </div>
        </div> <!-- end col -->
    </div>
    <div style="display: none;" id="content">
        <div class="inner-repeater mb-4">
            <div data-repeater-list="contents" class="form-group">
                <div class=" mb-3 row">
                    <div class="col-lg-1">
                        <label for="order">{{trans('labels.order')}}</label>
                        <input id="order" class="form-control inner" name="order" type="number" min="1" data-name="order" value="0" required>
                        @error('title')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                    <div class="col-md-3">
                        <label for="type"
                               class="col-lg-12">{{trans('labels.type')}}</label>
                        <select id="type" name="type"
                                class="inner form-control type" data-name="type" required>
                            <option value="">{{trans('labels.select')}}</option>
                            <option
                                value="exam">{{trans('labels.exam')}}</option>
                            <option
                                value="file">{{trans('labels.file')}}</option>
                            <option
                                value="video-type">{{trans('labels.video')}}</option>
                        </select>
                    </div>
                    <div class="col-md-3 exam" style="display: none;">
                        <label for="exam"
                               class="col-lg-12">{{trans('labels.exam')}}</label>
                        <select id="exam" name="exam"
                                class="inner form-control" data-name="exam">
                            <option value="">{{trans('labels.select')}}</option>
                            @foreach($data['exams'] as $exam)
                                <option value="{{$exam->id}}"
                                        @if(old('title') == $exam->id) selected @endif>{{$exam->title}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3 file" style="display: none;">
                        <label for="file"
                               class="col-lg-12">{{trans('labels.file')}}</label>
                        <input type="file" id="file" name="file"
                               class="inner form-control" data-name="file">
                    </div>
                    <div class="col-md-3 video-type" style="display: none;">
                        <label for="video-type"
                               class="col-lg-12">{{trans('labels.video')}}</label>
                        <select name="video-type"
                                class="inner form-control video-type" data-name="video-type">
                            <option value="">{{trans('labels.select')}}</option>
                            <option value="by_upload">{{trans('labels.by_upload')}}</option>
                            <option value="by_id">{{trans('labels.by_id')}}</option>
                        </select>
                    </div>

                    <div class="col-md-3 by_upload" style="display: none;">
                    
                        <label for="by_upload"
                               class="col-lg-12">{{trans('labels.by_upload')}}</label>
                        <input type="file" id="by_upload" name="by_upload"
                           class="inner form-control" data-name="by_upload">
                    </div>
                    <div class="col-md-3 by_id" style="display: none;">
                    
                        <label for="by_id"
                               class="col-lg-12">{{trans('labels.by_id')}}</label>
                        <input type="text" id="by_id" name="by_id"
                           class="inner form-control" data-name="by_id">
                    </div>
                    <div class="col-md-2 col-4 align-self-end">
                        <button type="button"
                                class="btn btn-danger remove">
                            <i class="far fa-trash-alt"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <!-- form wizard -->
    <script src="{{ URL::asset('dashboard/plugins/jquery-steps/jquery.steps.min.js') }}"></script>
    <script type="text/javascript">

        $(document).on('click', '.addcontent', function(){
            console.log('rr3');
            var key = $(this).data('section-key');
            var elementsCount = $('#collapse'+key + ' .inner-repeater').length;
            var name = '';
            $("#content .inner").each(function(index) {
                name = $(this).data('name');
                $(this).attr('name', 'sections['+key+'][contents]['+elementsCount+']['+name+']');
            });
            $(this).before($('#content').html());
            $('#section_content'+key).text('('+(elementsCount+1)+')')
        })

        $(document).on('change', '.type', function () {
            var row = this;
            var name = $(this).attr('name');
            var options = ['video-type', 'exam', 'file'];
            options.splice(options.indexOf($(this).val()), 1);
            options.forEach(function (option) {
                $(row).parent().siblings('.'+option).hide();
                $('[name="' + name.replace('type', option) + '"]').attr('required', false);
                // $('[name="' + name.replace('type', option) + '"]').parent().hide();
            });
            console.log($(this).val())
             $(this).parent().siblings('.'+$(this).val()).show();
             $('[name="' + name.replace('type', $(this).val()) + '"]').attr('required', true);
            // $('[name="' + name.replace('type', $(this).val()) + '"]').parent().show();
        });

        $(document).on('change', '.video-type', function(){
            var row = this;
            var value = $(this).val();
            var name = $(this).attr('name');
            console.log(18);
            var options = ['by_id', 'by_upload'];
            options.splice(options.indexOf($(this).val()), 1);
            options.forEach(function (option) {
                $(row).parent().siblings('.'+option).hide();
                $('[name="' + name.replace('type', option) + '"]').attr('required', false);
            });
            $(this).parent().siblings('.'+value).show();
            $('[name="' + name.replace('type', $(this).val()) + '"]').attr('required', true);
        })

        $(document).on('click', '.remove', function(){
            var sectionContentDivId = $(this).closest('.collapse').attr('id');
            key = $('#'+sectionContentDivId).data('section-key');
            $(this).closest('.inner-repeater').remove();
            var elementsCount = $('#collapse'+key + ' .inner-repeater').length;
            $('#section_content'+key).text('('+(elementsCount)+')')
            $("#"+sectionContentDivId+" .inner-repeater").each(function(pos) {
                $(this).find('.inner').each(function(index) {
                    console.log(index)
                    name = $(this).data('name');
                    $(this).attr('name', 'sections['+key+'][contents]['+pos+']['+name+']');
                });
            });


        });

    </script>
@endsection

<!-- @section('script-bottom')
    <script>
        $(function () {
            $("#form-horizontal").steps({
                labels: {
                    finish: "{{trans('labels.create')}}",
                    next: "{{trans('labels.next')}}",
                    previous: "{{trans('labels.previous')}}",
                },
                rtl: "true",
                headerTag: "h3",
                bodyTag: "fieldset",
                transitionEffect: "slide",
                onFinished: function (event, currentIndex) {
                    $(this).submit();
                }
            });

            $('.type').change(function () {
                var name = $(this).attr('name');
                var options = ['video', 'exam', 'file'];
                options.splice(options.indexOf($(this).val()), 1);
                options.forEach(function (option) {
                    console.log(option)
                    $('[name="' + name.replace('type', option) + '"]').parent().hide();
                });
                $('[name="' + name.replace('type', $(this).val()) + '"]').parent().show();
            });
        });

    </script>
    <script src="{{asset('dashboard/plugins/jquery-repeater/jquery.repeater.min.js')}}"></script>
    {{--    <script src="{{asset('dashboard/assets/pages/form-repeater.int.js')}}"></script>--}}
    <script>

        $(function () {
            window.outerRepeater = $('.outer-repeater').repeater({
                defaultValues: {'text-input': 'outer-default'},
                show: function () {
                    console.log('outer show');
                    $(this).slideDown();
                    $('.type').change(function () {
                        var name = $(this).attr('name');
                        var options = ['video', 'exam', 'file'];
                        options.splice(options.indexOf($(this).val()), 1);
                        options.forEach(function (option) {
                            console.log(option)
                            $('[name="' + name.replace('type', option) + '"]').parent().hide();
                        });
                        $('[name="' + name.replace('type', $(this).val()) + '"]').parent().show();
                    });
                },
                hide: function (deleteElement) {
                    console.log('outer delete');
                    $(this).slideUp(deleteElement);
                },
                repeaters: [{
                    selector: '.inner-repeater',
                    defaultValues: {'inner-text-input': 'inner-default'},
                    show: function () {
                        console.log('inner show');
                        $(this).slideDown();
                        $('.type').change(function () {
                            var name = $(this).attr('name');
                            var options = ['video', 'exam', 'file'];
                            options.splice(options.indexOf($(this).val()), 1);
                            options.forEach(function (option) {
                                console.log(option)
                                $('[name="' + name.replace('type', option) + '"]').parent().hide();
                            });
                            $('[name="' + name.replace('type', $(this).val()) + '"]').parent().show();
                        });
                    },
                    hide: function (deleteElement) {
                        console.log('inner delete');
                        $(this).slideUp(deleteElement);
                    }
                }]
            });
        });
    </script>
@endsection -->