@extends('Layouts_user.index')
@section('content')
    <div class="container px-1">
        <div class="row">
            <div class="col-lg-12 px-0">
                <a href="javascript:void(0);" onclick="reloadPage();" class="btn btn-sm btn-primary rounded fs-15 mb-3">Kembali</a>
                <button id="btn-cek-progress" onclick="cekProgress()" class="btn btn-sm btn-primary rounded fs-15 mb-3"><span class="loader d-none"></span> Selesaikan Pelatihan</button>
                <p class="text-danger small">* Klik tombol Selesaikan Pelatihan ketika selesai mengerjakan course</p>
                <div class="card rounded pt-0 pb-0">
                    <div class="iframe-container">
                        <iframe allowfullscreen="allowfullscreen" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" src="{{ $intmoodle->url }}course/view.php?id={{ $id_course }}" width="1130" height="550"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- widget -->
@endsection

    <div class="modal fade" id="ratingPelatihan" tabindex="-1" aria-labelledby="ratingPelatihanLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header pb-0 px-2 ms-1">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-0 pb-2 px-2" style="overflow: auto; max-height: 500px;">
                    <div class="tab-content" id="nav-tabContent">
                        <div class="tab-pane fade show active p-3" id="nav-home" role="tabpanel" 
                        aria-labelledby="nav-home-tab">
                            <form id="form-rating">
                                <h1 class="modal-title fw-semibold fs-20" id="ratingPelatihanLabel">Yuk Review, untuk cetak sertifikat.</h1>
                                <p class="fs-16 mb-3"> Isi rating bintang dibawah ini.</p>
                                <div class="row border border-primary rounded mb-3">
                                    <div class="col-lg-12 my-3">
                                        <div class="row align-items-center">
                                            @foreach($rating_question_stars as $rq)
                                            <div class="col-lg-12">
                                                <p class=" mb-0 ms-6 fs-16 mt-2">{{$rq->question}}</p>
                                            </div>
                                            <div class="col-lg-5">
                                                <div class="rating-box mb-0 ms-6 fs-16">
                                                    <div class="stars{{$rq->id_rating_question}} ms-3">
                                                        <i class="fa-solid fa-star"></i>
                                                        <i class="fa-solid fa-star"></i>
                                                        <i class="fa-solid fa-star"></i>
                                                        <i class="fa-solid fa-star"></i>
                                                        <i class="fa-solid fa-star"></i>
                                                    </div>
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                                @foreach($rating_question_input as $rqi)   
                                <div class="review">
                                    <p class=" mb-3">{{$rqi->question}}</p>
                                    <div class="form-floating">
                                        <textarea name="{{$rqi->question}}" class="form-control h-15" placeholder="Leave a comment here" id="{{$rqi->id_rating_question}}-rating" style="height: 100px"></textarea>
                                        <label for="floatingTextarea2">Tulis {{$rqi->question}}..</label>
                                    </div>
                                </div>
                                @endforeach
                                <div class="modal-footer py-3 px-3">
                                    <button type="button" class="btn btn-secondary fs-15 fw-semibold" data-bs-dismiss="modal">Close</button>
                                    <button id="btn-submit-rating" onclick="submitRating()" type="button" class="btn btn-primary fs-15 fw-semibold">Next</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  <!-- widgetend -->
    <style type="text/css">
        @foreach($rating_question_stars as $rq)
        .stars{{$rq->id_rating_question}} i {
            color: #e6e6e6;
            font-size: 16px;
            cursor: pointer;
            transition: color 0.2s ease;
        }
        .stars{{$rq->id_rating_question}} i.active {
            color: #ff9c1a;
        }
        @endforeach
    </style>

    <script src="{{ asset('assets/js/jquery-3.6.0.min.js') }}"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            @foreach ($rating_question_stars as $item)
            var customStars{{ $item->id_rating_question }} = document.querySelectorAll(".stars{{ $item->id_rating_question }} i");
            
            customStars{{ $item->id_rating_question }}.forEach((star, index1) => {
                star.addEventListener("click", () => {
                    customStars{{ $item->id_rating_question }}.forEach((star, index2) => {
                        index1 >= index2 ? star.classList.add("active") : star.classList.remove("active");
                    });
                });
            });
            @endforeach
        });

        function reloadPage() {
            location.reload();
        }


        function cekProgress(){
            var button = $("#btn-cek-progress");
            var loader = button.find(".loader");

            button.prop("disabled", true);
            loader.removeClass("d-none").html('<i class="fa fa-spinner fa-spin"></i>');

            $.ajax({
            url: "{{ url('/cekProgressCourse') }}",
            type: 'post',
            data: {idcourse: "{{ $id_course }}",iduser: "{{ session()->get('user')[0]['id_lms'] }}",_token:"{{ csrf_token() }}"},
            dataType: 'json',
            beforeSend: function() {
                $('#preloader').show()
                    // $('#spinner-btn-submit').show();
                
                },
            success: function(res){
                $('#preloader').hide()
                if(res.return){
                    if(res.rating){
                        location.href = "{{ url('/ProfilePeserta') }}/{{ base64_encode(session()->get('user')[0]['id_lms']) }}#ProgressCourse";

                    }else{
                        button.prop("disabled", false);
                        $("#ratingPelatihan").modal("show");
                    }
                    
                }else{
                    button.prop("disabled", false);
                    alert('Anda belum menyelesaikan course!');
                }

            },
                complete: function() {
                // Enable button and hide loader
                $('#preloader').hide()
                loader.addClass("d-none").empty();
            }
        });
        }

        function submitRating()
        {   
            var question = [];
                        
        var hasInvalidAnswer = false;
        for (let i = 0; i < question.length; i++) {
            if (question[i].answer == 0 || question[i].answer == "") {
                hasInvalidAnswer = true;
                break;
            }
        }

        if (hasInvalidAnswer) {
            alert("Semua rating dan ulasan harus diisi");
            return;
        }

        // var form_data = new FormData($('#form-rating')[0]);

        // form_data.append('star', star);

        $.ajax({
            url: "{{ url('/submitRatingCourse') }}",
            type: 'post',
            data: {question: question,course: "",user: "{{ session()->get('user')[0]['id_lms'] }}",_token:"{{ csrf_token() }}"},
            dataType: 'json',

            beforeSend: function() {
                $('#preloader').show()
                $('#btn-submit-rating').prop('disabled', true);
            },
            success: function(res){
                
                $('#btn-submit-rating').prop('disabled', false);
                if(res.return){
                    location.href = "{{ url('/ProfilePeserta') }}/{{ base64_encode(session()->get('user')[0]['id_lms']) }}#ProgressCourse";

                }else{
                    $('#preloader').hide()
                    res.msg ? alert(res.msg) : alert('Course Gagal Rating!')
                }
            }
        });


        }
    </script>