@extends('layouts.admin')

@section('styles')

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/timepicker@1.13.18/jquery.timepicker.min.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">

    <style>
        .details {

            text-align: center;

        }



        .details h3 {

            font-size: 1rem;

        }



        .details h2 {

            font-size: 1.2rem;

        }



        label {

            font-weight: 600;

            margin-bottom: 0.3rem;

        }
    </style>



@stop

@section('content')

    <div class="card">

        <div class="card-body">

            <div class="details">

                <h3>Training Course on</h3>

                <h2>{{ $course->title }}</h2>

                <h3>Duration: {{ Carbon\Carbon::parse($course->course_start)->format('jS F') }} to

                    {{ Carbon\Carbon::parse($course->course_end)->format('jS F Y') }} ({{ $course->course_duration }} Days)
                </h3>



                </p>

                </h3>

            </div>



            <form action="{{ route('lessons.file.store') }}" method="POST" enctype="multipart/form-data">

                @csrf

                <input type="hidden" name="course_id" value="{{ $course->id }}">

                <div class="row">

                    <div class="col-md-4">

                        <label for=""> Upload lesson plan (excel file)</label>

                        <input type="file" name="file" class="form-control">

                    </div>

                    <div class="col-md-3">

                        <input type="submit" class="btn btn-info mt-4" value="Upload">

                    </div>

                </div>

            </form>

            <br>

            <form id="SubmitForm">

                {{-- <form id="SubmitForm" method="POST" action="{{ route("lessons.store") }}" enctype="multipart/form-data"> --}}

                <input type="hidden" class="course_id" name="course_id" value="{{ $course->id }}">

                <div class="create">

                    <div class="row">

                        <div class="col-md-3">

                            <div class="form-group">

                                <label for="type">Type</label>

                                <select class="form-control select2 type" name="type" id="type">

                                    <option value="" selected hidden disabled></option>

                                    <option value="lesson">Lesson</option>

                                    <option value="break">Break</option>

                                </select>

                            </div>

                        </div>



                    </div>

                    <div class="row">

                        <div class="col-md-12 lesson-selected">

                            <div class="row">

                                <div class="col-md-3">

                                    <div class="form-group">

                                        <label for="type">Date</label>

                                        <input class="form-control datepicker" type="text" name="date" value="">

                                    </div>

                                </div>

                                <div class="col-md-3">

                                    <div class="form-group">

                                        <label for="type">Lesson/Module Name</label>

                                        <input class="form-control lesson_name" type="text" name="lesson_name"
                                            value="">

                                    </div>

                                </div>

                                <div class="col-md-3">

                                    <div class="form-group">

                                        <label for="type">Lesson Start Time</label>

                                        <input class="form-control start_time_picker" type="text" name="start_time"
                                            value="">

                                    </div>

                                </div>

                                <div class="col-md-3">

                                    <div class="form-group">

                                        <label for="type">Lesson End Time</label>

                                        <input class="form-control end_time_picker" type="text" name="end_time"
                                            value="">

                                    </div>

                                </div>

                                <div class="col-md-3">

                                    <div class="form-group">

                                        <label class=""
                                            for="resource_person_id">{{ trans('cruds.lesson.fields.resource_person') }}</label>

                                        <select class="form-control ajaxSearch" name="resource_person_id"
                                            id="resource_person_id">







                                        </select>

                                        @if ($errors->has('resource_person'))
                                            <div class="invalid-feedback">

                                                {{ $errors->first('resource_person') }}

                                            </div>
                                        @endif

                                        <span
                                            class="help-block">{{ trans('cruds.lesson.fields.resource_person_helper') }}</span>

                                    </div>

                                </div>



                                <div class="col-md-3">

                                    <div class="form-group">

                                        <label for="type">Trg Sessons</label>

                                        <input class="form-control trg_session" type="text" name="trg_session"
                                            value="">

                                    </div>

                                </div>

                                <div class="col">

                                    <div class="form-group">

                                        <label for="type">Lesson/Module Topics</label>

                                        <textarea class="form-control ckeditor" name="topic" id="topic">{!! old('topic') !!}</textarea>

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="col-md-12 break-selected">

                            <div class="row">

                                <div class="col-md-3">

                                    <div class="form-group">

                                        <label for="type">Date</label>

                                        <input class="form-control date" id="break_date" type="text" name="date"
                                            value="">

                                    </div>

                                </div>

                                <div class="col-md-3">

                                    <div class="form-group">

                                        <div class="form-group">

                                            <label for="type">Break Name</label>

                                            <input class="form-control break_name" type="text" name="break_name"
                                                value="">

                                        </div>

                                    </div>

                                </div>

                                <div class="col-md-2">

                                    <div class="form-group">

                                        <label for="type">Break Start Time</label>

                                        <input class="form-control start_time_picker" type="text" name="start_time"
                                            value="">

                                    </div>

                                </div>

                                <div class="col-md-2">

                                    <div class="form-group">

                                        <label for="type">Break End Time</label>

                                        <input class="form-control end_time_picker" type="text" name="end_time"
                                            value="">

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="col-md-12">

                            <div class="form-group text-center">

                                <button class="btn btn-success submit-btn" type="submit" style="width:200px">

                                    {{ trans('global.save') }}

                                </button>

                            </div>

                        </div>

                    </div>



                    {{-- lesson plan --}}

                    <div class="lesson-plan-table">

                        <table class="table table-bordered">

                            <thead>

                                <tr>

                                    <th>Lessons/Time</th>

                                    <th>Topics</th>

                                    <th>Resource Persons</th>

                                    <th>Trg. Sessions</th>

                                    <th>Action</th>

                                </tr>

                            </thead>

                            <tbody id="lessonbody">

                                {{-- @foreach ($lessons as $lesson => $contents)

                                    <tr>

                                        <td colspan="4"><b>Day-{{ $loop->index + 1 }} : {{ $lesson }}</b> </td>

                                    </tr>

                                    @foreach ($contents as $content)

                                        <tr>

                                            @if ($content->type == 'break')

                                                <td colspan="4" style="text-align: center;font-weight:800">

                                                    {{ $content->break_name }}</td>

                                            @else

                                                <td>{{ $content->lesson_name }}

                                                    @if ($content->lesson_name)<br>@endif

                                                    {{ $content->start_time }}-{{ $content->end_time }}</td>

                                                <td colspan="{{ $content->lesson_name == null ? '3' : '' }}">

                                                    {!! $content->topic !!}</td>

                                                @if ($content->resource_person_id)

                                                    <td>{{ $content->resource_person->name }}</td>

                                                @endif

                                                @if ($content->trg_session)

                                                    <td>{{ $content->trg_session }}</td>

                                                @endif

                                            @endif

                                        </tr>

                                    @endforeach

                                @endforeach --}}

                            </tbody>

                        </table>

                    </div>

                    {{-- lesson plan end --}}

                </div>

            </form>

        </div>

    </div>

    <!-- modal start -->

    <!-- Modal -->

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">

        <form action="{{ route('lessons.file.store') }}" method="POST" enctype="multipart/form-data">

            @csrf

            <div class="modal-dialog" role="document">

                <div class="modal-content">

                    <div class="modal-header">

                        <h5 class="modal-title" id="exampleModalLabel">Upload Excel File</h5>

                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                            <span aria-hidden="true">&times;</span>

                        </button>

                    </div>

                    <div class="modal-body">

                        <div class="form-group">

                            <label for="type">Excel File</label>

                            <input type="hidden" class="course_id" name="course_id" value="{{ $course->id }}">

                            <input class="form-control" type="file" name="file" accept=".xlsx,.csv">

                        </div>

                    </div>

                    <div class="modal-footer">

                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

                        <button type="submit" class="btn btn-success">Upload</button>

                    </div>

                </div>

            </div>

        </form>

    </div>

    <!-- modal end -->

@endsection



@section('scripts')

    <script src="https://cdn.jsdelivr.net/npm/timepicker@1.13.18/jquery.timepicker.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.datepicker').datetimepicker({
                format: 'DD-MM-YYYY'
            });
        });
    </script>
    <script>
        function SimpleUploadAdapter(editor) {

            editor.plugins.get('FileRepository').createUploadAdapter = function(loader) {

                return {

                    upload: function() {

                        return loader.file

                            .then(function(file) {

                                return new Promise(function(resolve, reject) {

                                    // Init request

                                    var xhr = new XMLHttpRequest();

                                    xhr.open('POST',

                                        '{{ route('lessons.storeCKEditorImages') }}',

                                        true);

                                    xhr.setRequestHeader('x-csrf-token', window._token);

                                    xhr.setRequestHeader('Accept', 'application/json');

                                    xhr.responseType = 'json';



                                    // Init listeners

                                    var genericErrorText =

                                        `Couldn't upload file: ${ file.name }.`;

                                    xhr.addEventListener('error', function() {

                                        reject(genericErrorText)

                                    });

                                    xhr.addEventListener('abort', function() {

                                        reject()

                                    });

                                    xhr.addEventListener('load', function() {

                                        var response = xhr.response;



                                        if (!response || xhr.status !== 201) {

                                            return reject(response && response

                                                .message ?

                                                `${genericErrorText}\n${xhr.status} ${response.message}` :

                                                `${genericErrorText}\n ${xhr.status} ${xhr.statusText}`

                                            );

                                        }



                                        $('form').append(

                                            '<input type="hidden" name="ck-media[]" value="' +

                                            response.id + '">');



                                        resolve({

                                            default: response.url

                                        });

                                    });



                                    if (xhr.upload) {

                                        xhr.upload.addEventListener('progress', function(

                                            e) {

                                            if (e.lengthComputable) {

                                                loader.uploadTotal = e.total;

                                                loader.uploaded = e.loaded;

                                            }

                                        });

                                    }



                                    // Send request

                                    var data = new FormData();

                                    data.append('upload', file);

                                    data.append('crud_id', '{{ $lesson->id ?? 0 }}');

                                    xhr.send(data);

                                });

                            })

                    }

                };

            }

        }

        let theEditor;



        var allEditors = document.querySelectorAll('.ckeditor');

        for (var i = 0; i < allEditors.length; ++i) {

            ClassicEditor.create(

                    allEditors[i], {

                        extraPlugins: [SimpleUploadAdapter]

                    }

                )

                .then(editor => {

                    theEditor = editor;

                })

        }



        function getDataFromTheEditor() {

            return theEditor.getData();

        }

        function removeDataFromTheEditor() {

            return theEditor.setData('');

        }



        let start_time = ''

        let end_time = ''

        let l_id = ''

        $('.start_time_picker').timepicker({

            'minTime': '8:00am',

            'maxTime': '8:00pm',

            'interval': 15,

            'step': '5'

        });

        $('.start_time_picker').on('changeTime', function() {

            start_time = $(this).val();

        });

        $('.end_time_picker').timepicker({

            'minTime': '8:00am',

            'maxTime': '8:00pm',

            'interval': 15,

            'step': '5'

        });

        $('.end_time_picker').on('changeTime', function() {

            end_time = $(this).val();

        });



        $('#SubmitForm').on('submit', function(e) {

            e.preventDefault();

            let type = $('.type').val();

            let date = $('.datepicker').val();

            let break_date = $('#break_date').val();

            let lesson_name = $('.lesson_name').val();

            let trg_session = $('.trg_session').val();

            let resource_person_id = $('#resource_person_id').val();

            let topic = getDataFromTheEditor();

            let course_id = $('.course_id').val();

            let break_name = $('.break_name').val();

            if ($('.submit-btn').text() == 'Update') {

                var url = "{{ route('lessons.update', ':id') }}";

                url = url.replace(':id', l_id);

                form_type = 'PATCH';

            } else {

                var url = '{{ route('lessons.store') }}'

                form_type = 'POST';

            }

            $.ajax({

                url: url,

                type: form_type,

                data: {

                    "_token": "{{ csrf_token() }}",

                    id: l_id,

                    type: type,

                    date: date ? date : break_date,

                    lesson_name: lesson_name,

                    resource_person_id: resource_person_id,

                    topic: topic,

                    start_time: start_time,

                    end_time: end_time,

                    trg_session: trg_session,

                    break_name: break_name,

                    course_id: course_id

                },

                success: function(response) {

                    if (response == 'success') {

                        get_course_lessons()
                        $('#SubmitForm').trigger("reset");
                        removeDataFromTheEditor()
                        $('.lesson-selected').hide()
                        $('.break-selected').hide()

                    }

                    toastr.success('Operation Successful');

                },

                error: function(response) {



                },

            });

        })



        $(document).ready(function() {

            get_course_lessons();

            $(".ajaxSearch").select2({

                allowClear: true,

                tags: false,

                multiple: false,

                tokenSeparators: [',', ' '],

                minimumInputLength: 2,

                minimumResultsForSearch: 10,

                placeholder: 'Search resource person by name',

                ajax: {

                    url: "{{ route('user.search') }}",

                    dataType: "json",

                    type: "GET",

                    data: function(params) {

                        var queryParameters = {

                            term: params.term

                        }

                        return queryParameters;

                    },

                    processResults: function(data) {

                        return {

                            results: $.map(data, function(item) {

                                return {

                                    text: item.name,

                                    id: item.id

                                }

                            })

                        };

                    },

                    cache: false

                }

            });

            $('.lesson-selected').hide()

            $('.break-selected').hide()



            $('.type').on('change', function() {

                if (this.value == 'lesson') {

                    $('.lesson-selected').show()

                    $('.break-selected').hide()

                } else if (this.value == 'break') {

                    $('.lesson-selected').hide()

                    $('.break-selected').show()

                }

            });

        });



        //Get course lessons data

        function get_course_lessons() {

            let course = $('.course_id').val();

            var url = "{{ route('courses.getlesson', ':course') }}";

            url = url.replace(':course', course);

            $.ajax({

                method: 'GET',

                url: url,

                dataType: 'html',

                success: function(result) {

                    document.getElementById("lessonbody").innerHTML = result;

                },

            });

        }



        $('body').on('click', '.editlesson', function(e) {

            var l_name = ($(this).closest('tr').find('td .l_name').text());

            var update_start_time = ($(this).closest('tr').find('td .start_time').text());

            var update_end_time = ($(this).closest('tr').find('td .end_time').text());

            var date = ($(this).closest('tr').find('td .l_date').val());

            var topics = ($(this).closest('tr').find('td .topics').text());

            var resource_person = ($(this).closest('tr').find('td .resource_person').text());

            var session = ($(this).closest('tr').find('td .session').text());

            var rp_id = ($(this).closest('tr').find('td .rp_id').val());

            var new_id = ($(this).closest('tr').find('td .l_id').val());

            $('.type').val('lesson').change();

            $('.datepicker').val(date);

            $('.lesson_name').val(l_name);

            $('.start_time_picker').val(update_start_time);

            start_time = update_start_time

            end_time = update_end_time

            l_id = new_id

            $('.end_time_picker').val(update_end_time);

            $('.trg_session').val(session);

            $('#resource_person_id').val(rp_id).change();

            theEditor.setData(topics);

            $('.submit-btn').text('Update');



        });
    </script>



@endsection