@extends('layouts.admin')
@section('styles')
    <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;
        }

        .flex {
            display: flex;
        }

        #learningpointmodal p {
            margin-bottom: 0rem;
        }

        .box-header {
            font-weight: 600;
            margin: 5px 0px;
        }

        .br-theme-bars-pill .br-widget {
            white-space: nowrap;
        }

        .br-theme-bars-pill .br-widget a {
            padding: 7px 15px;
            background-color: #ccc;
            color: #fff;
            text-decoration: none;
            font-size: 13px;
            line-height: 3;
            text-align: center;
            font-weight: 400;
        }

        .br-theme-bars-pill .br-widget a:first-child {
            -webkit-border-top-left-radius: 999px;
            -webkit-border-bottom-left-radius: 999px;
            -moz-border-radius-topleft: 999px;
            -moz-border-radius-bottomleft: 999px;
            border-top-left-radius: 999px;
            border-bottom-left-radius: 999px;
        }

        .br-theme-bars-pill .br-widget a:last-child {
            -webkit-border-top-right-radius: 999px;
            -webkit-border-bottom-right-radius: 999px;
            -moz-border-radius-topright: 999px;
            -moz-border-radius-bottomright: 999px;
            border-top-right-radius: 999px;
            border-bottom-right-radius: 999px;
        }

        .br-theme-bars-pill .br-widget a.br-active {
            background-color: #2eb85c;
            color: white;
        }

        .br-theme-bars-pill .br-widget a.br-selected {
            background-color: #2eb85c;
            color: white;
        }

        .br-theme-bars-pill .br-readonly a {
            cursor: default;
        }

        .br-theme-bars-pill .br-readonly a.br-active,
        .br-theme-bars-pill .br-readonly a.br-selected {
            background-color: #7cead1;
        }

        @media print {
            .br-theme-bars-pill .br-widget a {
                border: 1px solid #b3b3b3;
                border-left: none;
                background: white;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }

            .br-theme-bars-pill .br-widget a.br-active,
            .br-theme-bars-pill .br-widget a.br-selected {
                border: 1px solid black;
                border-left: none;
                background: white;
                color: black;
            }

            .br-theme-bars-pill .br-widget a:first-child {
                border-left: 1px solid black;
            }
        }
    </style>

@stop
@section('content')
    <div class="card">
        <div class="card-header text-center">
            <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>

            </div>
            <div class="form-group" style="float: right;">
                <button type="button" id="print" class="btn btn-success"> <i class="fas fa-print"></i></button>
            </div>
        </div>
        <div class="card-body">
            <div class="create">
                <h5>Lesson Plan</h5>
                <div class="lesson-plan-table">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Lessons</th>
                                <th>Time</th>
                                <th>Topics</th>
                                <th>Resource Persons</th>
                                <th>Trg. Sessions</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($lessons as $lesson)
                                <tr>
                                    <td width="10%">
                                        {{ \Carbon\Carbon::parse(trim($lesson->date))->format('d-m-Y') }}

                                    <td width="10%">{{ $lesson->lesson_name }}</td>

                                    <td> {{ \Carbon\Carbon::parse($lesson->start_time)->format('h:i A') }}-{{ \Carbon\Carbon::parse($lesson->end_time)->format('h:i A') }}
                                    </td>
                                    <td width="30%">
                                        {!! $lesson->topic !!}
                                    </td>

                                    <td width="15%">{{ $lesson->resource_person ? $lesson->resource_person->name : '' }}
                                    </td>


                                    <td>{{ $lesson->trg_session ? $lesson->trg_session : '' }}</td>
                                    @php
                                        $existing_learning_point = App\Models\LearningPoint::where(
                                            'lesson_id',
                                            $lesson->id,
                                        )
                                            ->where('user_id', auth()->user()->id)
                                            ->first();
                                        $today_date = \Carbon\Carbon::now();
                                        $lesson_end_date = date(
                                            'Y-m-d H:i:s',
                                            strtotime($lesson->date . ' ' . $lesson->end_time),
                                        );
                                        $result = $today_date->gte($lesson_end_date);
                                    @endphp
                                    <td>
                                        @can('add_learning_point', $courseRole)
                                            @if ($result && $existing_learning_point == false && $lesson->resource_person)
                                                <a class="btn btn-md btn-primary lp_modal mb-2 d-block" href="#"
                                                    data-lesson-topic="{{ $lesson->topic }}"
                                                    data-lesson-id="{{ $lesson->id }}"
                                                    data-trainer="{{ $lesson->resource_person ? $lesson->resource_person->name : '' }}"
                                                    data-date="{{ \Carbon\Carbon::parse(trim($lesson->date))->format('d-m-Y') }}"
                                                    data-start-time="{{ $lesson->start_time }} data-end-time="{{ $lesson->end_time }}"
                                                    data-toggle="modal" data-target="#learningpointmodal">
                                                    Add learning point
                                                </a>
                                            @endif
                                        @endcan

                                        @can('view_learning_points', $courseRole)
                                            @if ($lesson->resource_person)
                                                <a class="btn btn-md btn-success lp_view_modal mb-2 d-block" target="_blank"
                                                    href="{{ route('courses.viewLessonLearningPoint', $lesson->id) }}">
                                                    View learning points
                                                </a>
                                            @endif
                                        @endcan


                                        @can('trainer_evaluation', $courseRole)
                                            @php
                                                $existing_evaluation = App\Models\TrainerEvaluation::where(
                                                    'lesson_id',
                                                    $lesson->id,
                                                )
                                                    ->where('user_id', auth()->user()->id)
                                                    ->first();
                                            @endphp
                                            @if ($result && $existing_evaluation == false && $lesson->resource_person)
                                                <a class="btn btn-md btn-primary ev_modal mb-2 d-block"
                                                    data-lesson-id="{{ $lesson->id }}" href="#" data-toggle="modal"
                                                    data-target="#evaluationmodal">
                                                    Add evaluation
                                                </a>
                                            @endif
                                        @endcan
                                        @can('view_evaluation', $courseRole)
                                            @if ($lesson->resource_person)
                                                <a class="btn btn-md btn-success lp_view_modal mb-2 d-block" target="_blank"
                                                    href="{{ route('courses.viewLessonEvaluation', $lesson->id) }}">
                                                    View evaluation
                                                </a>
                                            @endif
                                        @endcan
                                    </td>

                                </tr>
                            @endforeach


                            <!-- evaluation Modal start-->
                            <div class="modal fade" id="learningpointmodal" tabindex="-1" role="dialog"
                                aria-labelledby="learningpointmodal" aria-hidden="true">
                                <div class="modal-dialog" role="document" style="max-width: 600px;">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4>Add Learning Point</h4>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">

                                            <form action="{{ route('learning-points.store') }}" method="POST">
                                                @csrf
                                                <input type="hidden" id="lesson_id" name="lesson_id" value="">
                                                <div class="form-group flex">
                                                    <b class="mr-2">Lesson Topic : </b>
                                                    <p id="l_topic"></p>
                                                </div>
                                                <div class="form-group flex">
                                                    <b class="mr-2">Lecturer : </b>
                                                    <p id="lecturer"></p>
                                                </div>
                                                <div class="form-group flex">
                                                    <b class="mr-2">Day and Time : </b>
                                                    <p id="day_time"></p>
                                                </div>
                                                <div class="form-group">
                                                    <b>Learning Points : </b>
                                                    <textarea class="form-control ckeditor" name="learning_points" id="details"></textarea>
                                                </div>
                                                <button type="submit" class="btn btn-primary">Submit</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- evaluation Modal end-->

                            <!-- Modal -->
                            <div class="modal fade" id="evaluationmodal" tabindex="-1" role="dialog"
                                aria-labelledby="evaluationmodal" aria-hidden="true">
                                <div class="modal-dialog" role="document" style="max-width: 1000px;">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4>Evaluation Form (Please make your rating out of 10)</h4>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">

                                            <form id="submitform">

                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="box-header">1. Theoretical Portion</div>
                                                        <div class="box-body">
                                                            <select class="example-pill" data-name="theoretical_portion"
                                                                autocomplete="off">
                                                                <option value="1">1</option>
                                                                <option value="2">2</option>
                                                                <option value="3">3</option>
                                                                <option value="4">4</option>
                                                                <option value="5">5</option>
                                                                <option value="6">6</option>
                                                                <option value="7">7</option>
                                                                <option value="8">8</option>
                                                                <option value="9">9</option>
                                                                <option value="10">10</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="box-header">2 .Citation of practical examples</div>
                                                        <div class="box-body">
                                                            <select class="example-pill"
                                                                data-name="citation_of_practical_examples"
                                                                autocomplete="off">
                                                                <option value="1">1</option>
                                                                <option value="2">2</option>
                                                                <option value="3">3</option>
                                                                <option value="4">4</option>
                                                                <option value="5">5</option>
                                                                <option value="6">6</option>
                                                                <option value="7">7</option>
                                                                <option value="8">8</option>
                                                                <option value="9">9</option>
                                                                <option value="10">10</option>
                                                            </select>
                                                        </div>
                                                    </div>


                                                    <div class="col-md-6">
                                                        <div class="box-header">3. Describing the power sector relevance
                                                        </div>
                                                        <div class="box-body">
                                                            <select class="example-pill"
                                                                data-name="describing_the_power_sector_relevance"
                                                                autocomplete="off">
                                                                <option value="1">1</option>
                                                                <option value="2">2</option>
                                                                <option value="3">3</option>
                                                                <option value="4">4</option>
                                                                <option value="5">5</option>
                                                                <option value="6">6</option>
                                                                <option value="7">7</option>
                                                                <option value="8">8</option>
                                                                <option value="9">9</option>
                                                                <option value="10">10</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="box-header">4. Capacity to make the topic
                                                            understandable</div>
                                                        <div class="box-body">
                                                            <select class="example-pill"
                                                                data-name="capacity_to_make_the_topic_understandable"
                                                                autocomplete="off">
                                                                <option value="1">1</option>
                                                                <option value="2">2</option>
                                                                <option value="3">3</option>
                                                                <option value="4">4</option>
                                                                <option value="5">5</option>
                                                                <option value="6">6</option>
                                                                <option value="7">7</option>
                                                                <option value="8">8</option>
                                                                <option value="9">9</option>
                                                                <option value="10">10</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="box-header">5. Language proficiency</div>
                                                        <div class="box-body">
                                                            <select class="example-pill" data-name="language_proficiency"
                                                                autocomplete="off">
                                                                <option value="1">1</option>
                                                                <option value="2">2</option>
                                                                <option value="3">3</option>
                                                                <option value="4">4</option>
                                                                <option value="5">5</option>
                                                                <option value="6">6</option>
                                                                <option value="7">7</option>
                                                                <option value="8">8</option>
                                                                <option value="9">9</option>
                                                                <option value="10">10</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="box-header">6. Capacity to increase trainees
                                                            involvement</div>
                                                        <div class="box-body">
                                                            <select class="example-pill"
                                                                data-name="capacity_to_increase_trainees_involvement"
                                                                autocomplete="off">
                                                                <option value="1">1</option>
                                                                <option value="2">2</option>
                                                                <option value="3">3</option>
                                                                <option value="4">4</option>
                                                                <option value="5">5</option>
                                                                <option value="6">6</option>
                                                                <option value="7">7</option>
                                                                <option value="8">8</option>
                                                                <option value="9">9</option>
                                                                <option value="10">10</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="box-header">7. Timeliness</div>
                                                        <div class="box-body">
                                                            <select class="example-pill" data-name="timeliness"
                                                                autocomplete="off">
                                                                <option value="1">1</option>
                                                                <option value="2">2</option>
                                                                <option value="3">3</option>
                                                                <option value="4">4</option>
                                                                <option value="5">5</option>
                                                                <option value="6">6</option>
                                                                <option value="7">7</option>
                                                                <option value="8">8</option>
                                                                <option value="9">9</option>
                                                                <option value="10">10</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="box-header">8. Capacity to involve multi-disciplinary
                                                            knowledge</div>
                                                        <div class="box-body">
                                                            <select class="example-pill"
                                                                data-name="capacity_to_involve_multi_disciplinary_knowledge"
                                                                autocomplete="off">
                                                                <option value="1">1</option>
                                                                <option value="2">2</option>
                                                                <option value="3">3</option>
                                                                <option value="4">4</option>
                                                                <option value="5">5</option>
                                                                <option value="6">6</option>
                                                                <option value="7">7</option>
                                                                <option value="8">8</option>
                                                                <option value="9">9</option>
                                                                <option value="10">10</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="box-header">9. Capacity to answer the question</div>
                                                        <div class="box-body">
                                                            <select class="example-pill"
                                                                data-name="capacity_to_answer_the_question"
                                                                autocomplete="off">
                                                                <option value="1">1</option>
                                                                <option value="2">2</option>
                                                                <option value="3">3</option>
                                                                <option value="4">4</option>
                                                                <option value="5">5</option>
                                                                <option value="6">6</option>
                                                                <option value="7">7</option>
                                                                <option value="8">8</option>
                                                                <option value="9">9</option>
                                                                <option value="10">10</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="box-header">10. Training materials</div>
                                                        <div class="box-body">
                                                            <select class="example-pill" data-name="training_materials"
                                                                autocomplete="off">
                                                                <option value="1">1</option>
                                                                <option value="2">2</option>
                                                                <option value="3">3</option>
                                                                <option value="4">4</option>
                                                                <option value="5">5</option>
                                                                <option value="6">6</option>
                                                                <option value="7">7</option>
                                                                <option value="8">8</option>
                                                                <option value="9">9</option>
                                                                <option value="10">10</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="box-header">11. Capacity to control the class</div>
                                                        <div class="box-body">
                                                            <select class="example-pill"
                                                                data-name="capacity_to_control_the_class"
                                                                autocomplete="off">
                                                                <option value="1">1</option>
                                                                <option value="2">2</option>
                                                                <option value="3">3</option>
                                                                <option value="4">4</option>
                                                                <option value="5">5</option>
                                                                <option value="6">6</option>
                                                                <option value="7">7</option>
                                                                <option value="8">8</option>
                                                                <option value="9">9</option>
                                                                <option value="10">10</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="box-header">12. Interaction with the trainees </div>
                                                        <div class="box-body">
                                                            <select class="example-pill"
                                                                data-name="interaction_with_the_trainees"
                                                                autocomplete="off">
                                                                <option value="1">1</option>
                                                                <option value="2">2</option>
                                                                <option value="3">3</option>
                                                                <option value="4">4</option>
                                                                <option value="5">5</option>
                                                                <option value="6">6</option>
                                                                <option value="7">7</option>
                                                                <option value="8">8</option>
                                                                <option value="9">9</option>
                                                                <option value="10">10</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="box-header">13. Overall training capacity </div>
                                                        <div class="box-body">
                                                            <select class="example-pill"
                                                                data-name="overall_training_capacity" autocomplete="off">
                                                                <option value="1">1</option>
                                                                <option value="2">2</option>
                                                                <option value="3">3</option>
                                                                <option value="4">4</option>
                                                                <option value="5">5</option>
                                                                <option value="6">6</option>
                                                                <option value="7">7</option>
                                                                <option value="8">8</option>
                                                                <option value="9">9</option>
                                                                <option value="10">10</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-12 text-center mt-3 mb-3">
                                                        <button type="submit" class="btn btn-primary">Submit</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </tbody>
                    </table>
                    {{ $lessons->links() }}
                </div>
                {{-- lesson plan end --}}
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.2/jquery.barrating.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

    <script>
        ratingEnable();
        var evaluations = []
        let ev_lesson_id = ''

        function ratingEnable() {
            $('.example-pill').barrating('show', {
                theme: 'bars-pill',
                initialRating: '0',
                showValues: true,
                showSelectedRating: false,
                allowEmpty: true,
                emptyValue: '-- no rating selected --',
                onSelect: function(value, text, event) {
                    var el = this;
                    let name = el.$elem.data('name');
                    var obj = {};
                    obj[name] = value;
                    var existIndex = evaluations.findIndex((a) => name in a);

                    if (existIndex !== -1) {
                        evaluations[existIndex][name] = value
                    } else {
                        evaluations.push(obj);
                    }
                }
            });
        }
        ClassicEditor.create($('.ckeditor').get()[0]);
        $(document).on('click', '.lp_modal', function(e) {
            let trainer = $(this).data('trainer')
            let lesson_id = $(this).data('lesson-id')
            let lesson_topic = $(this).data('lesson-topic')
            let date = $(this).data('date')
            let start_time = $(this).data('start-time')
            let end_time = $(this).data('end-time')


            $('#lesson_id').val(lesson_id)
            $('#l_topic').html(lesson_topic)
            $('#lecturer').text(trainer)
            $('#day_time').text(date)
        })

        $(document).on('click', '.ev_modal', function(e) {
            ev_lesson_id = $(this).data('lesson-id')
            $('.br-widget a').removeClass('br-selected');
            //document.querySelector('.example-pill option').setAttribute('selected', 'selected');
        })

        $('#submitform').on('submit', function(e) {
            e.preventDefault();
            var url = '{{ route('trainer-evaluation.store') }}'
            form_type = 'POST';
            $.ajax({
                url: url,
                type: form_type,
                data: {
                    "_token": "{{ csrf_token() }}",
                    evaluations: evaluations,
                    lesson_id: ev_lesson_id
                },
                success: function(response) {
                    if (response == 'success') {
                        $('#evaluationmodal').modal('hide');
                        $('body').removeClass('modal-open');
                        $('.modal-backdrop').remove();
                        toastr.success('Evaluation saved Successfully');
                        $('.ev_modal').hide();
                    }

                },
                error: function(response) {},
            });
        });
    </script>
@endsection