@extends('Layouts.index')
@section('content')
    <div class="container pb-7 pt-3">
        <section class="bg-gray">
            {{-- <div class="certificate-print">
                @include('sertifikat-temp')
            </div> --}}
            <div class="row align-items-center gy-6">
                <div class="col-lg-12 d-flex">
                    <div class="col-md-9">
                        <h2 class="fs-55">Selamat <span class="fw-bold">{{ $user->fullname }} !</span><span class="ms-4"><i class="fa-solid fa-certificate text-yellow"></i></span></h2>
                        <p>Telah menyelesaikan pelatihan <span class="text-underline"></span>, sertifikat mu sudah siap untuk dibuat!</p>
                        <div class="d-flex">
                            <button type="button" class="btn more btn-secondary py-1 fs-15" data-bs-toggle="modal" data-bs-target="#exampleModal">
                                Buat
                            </button>
                            <button class="btn btn-sm btn-primary ms-3"><a class="text-white" href="{{ url('/ProfilePeserta') }}/{{ base64_encode(session()->get('user')[0]['id_lms']) }}">Kembali</a></button>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="card bg-soft-primary border mb-0 border-primary">
                        <div class="card-body py-3">
                            <h4 class="fw-semibold"> <span><i class="fa-solid fa-circle-info text-info me-2"></i></span>Ambil Langkah Selanjutnya!</h4>
                            <div class="row">
                                <div class="col-lg-12">
                                    <h4 class="fw-semibold fs-18 ms-5">Learning Plan</h4>
                                    <p class="fs-14 ms-5">Untuk memperdalam pengetahuan dan kemampuan mu ayo ikuti kelas lainnya yg berkaitan dengan kelas ini.</p>
                                    <a href="{{ url('/ProfilePeserta') }}/{{ base64_encode(session()->get('user')[0]['id_lms']) }}" class="btn btn-primary py-1 fw-normal fs-15 mx-5">Lihat Learning Plan</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="col-lg-12 col-xl-12 mt-0">
                    <div class="align-items-center justify-content-center d-flex mb-4">
                        <li class="nav-item d-none d-md-block px-4 pt-2 py-1">
                            <a href="./contact.html" class="btn btn-sm btn-warning fw-semibold rounded p-3 py-1 fs-18"><span class="me-4"><i class="fa-regular fa-bookmark"></i></span>Cek Status Sertifikat</a>
                        </li>
                    </div>
                </div> -->
            </div>
        </section>
    </div>
    <!--/.card-body -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" 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">
                    <nav>
                        <div class="nav nav-tabs" id="nav-tab" role="tablist">
                            <button class="btn active fs-15 btn-outline-primary fw-normal" id="nav-home-tab" data-bs-toggle="tab" 
                            data-bs-target="#nav-home" type="button" role="tab" aaria-controls="nav-home" 
                            aria-selected="true">Step 1 : Review</button>
            
                            {{-- <button class="btn fs-15 btn-outline-primary fw-normal ms-1 step-lock" id="nav-profile-tab" data-bs-toggle="tab" 
                            data-bs-target="#nav-profile" type="button" role="tab" aaria-controls="nav-profile" 
                            aria-selected="false">Step 2 : Verifikasi</button> --}}

                            <button class="btn fs-15 btn-outline-primary fw-normal ms-1 step-lock" id="nav-contact-tab" data-bs-toggle="tab" 
                            data-bs-target="#nav-contact" type="button" role="tab" aaria-controls="nav-contact" 
                            aria-selected="false">Step 2 : Berhasil</button>

                        </div>
                    </nav>
                <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 class="tab-pane fade show p-3" id="nav-profile" role="tabpanel" 
                        aria-labelledby="nav-profile-tab">
                            <h1 class="modal-title fw-semibold fs-20" id="exampleModalLabel">Periksa Profil kembali sebelum membuat sertifikat</h1>
                            <p class="fs-16">Sebelum membuat sertifikat, pastikan data profil JAGOTI anda sudah benar. Data profil digunakan untuk membuat sertifikat dan seluruh data pada sertifikat tidak bisa di ubah setelah selesai dibuat.</p>
                            <div class="review">
                                @if($contact)
                                <p class="mb-0 fs-14 fw-bold">Nama :</p>
                                <p class="mb-3 fs-17">{{ $contact->nama }}</p>
                                <p class="mb-0 fs-14 fw-bold">Email :</p>
                                <p class="mb-3 fs-17">{{ $contact->email }}</p>
                                <p class="mb-0 fs-14 fw-bold">Nomor Telepon :</p>
                                <p class="mb-3 fs-17">{{ $contact->telp }}</p>
                                @endif
                            </div>
                            <div class="modal-footer py-3 px-3">
                                <button type="button" class="btn btn-secondary fs-15 fw-semibold" data-bs-dismiss="modal">Tutup</button>
                                <a href="{{ url('/ProfilePeserta') }}/{{ session()->get('user')[0]['id_lms'] }}#ProfilSaya" class="btn btn-primary fs-15 fw-semibold">Update Profil</a>
                                <button type="button" class="btn btn-primary fs-15 fw-semibold" onclick="buatSertifikat()">Buat Sertifikat</button>
                            </div>
                        </div> --}}

                        <div class="tab-pane fade show p-3" id="nav-contact" role="tabpanel" 
                        aria-labelledby="nav-profile-tab">
                            <h1 class="modal-title fw-semibold fs-20" id="exampleModalLabel"> <span class="text-success"><i class="fa-solid fa-check"></i></span> Sertifikat Telah Di buat.</h1>
                            <p class="fs-16">Selamat! Kamu telah mendapatkan sertifikat. Download Sekarang.</p>
                            <div class="certificate-print">
                                @include('sertifikat-temp')
                            </div>
                            <div class="review">
                                <figure class="card-img-top rounded text-center">

                                    <!-- <img  src="{{ asset('/needed/img/sertifikat/Sertifikat-firman.png')}}" width="450" height="310" alt=""> -->
                                </figure>
                            </div>
                            <div class="modal-footer py-3 px-3">
                                <button type="button" class="btn btn-secondary fs-15 fw-semibold" data-bs-dismiss="modal">Tutup</button>
                                <button href="#" id="btn-download-sertifikat" onclick="btnDownload()" type="button" class="btn btn-primary fs-15 fw-semibold">Download Sertifikat</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- /Main Wrapper -->

@endsection

<style type="text/css">
    .certificate-print {
        position: absolute;
        left: -9999px;
        /* z-index: 99999; */
        /* position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%,-50%); */
    }
    @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 src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script type="text/javascript" nonce="sha256-SYCOinUrocIgkbXC9Rmb2vAqaCyZ36CPeL64DlyB8IU=">
    function btnDownload(){
        $('#btn-download-sertifikat').prop('disabled', true)
        $('#preloader').show()
        printPdf()
    }
    function printPdf() {

        
        const invoice = this.document.getElementById("certificate-div");
        var opt = {
            margin: 0,
            filename: 'Sertifikat.pdf',
            html2canvas: {
                scale: 2
            },
            image: {
                type: 'jpeg'
            },
            jsPDF: {
                unit: 'in',
                format: 'A4',
                orientation: 'landscape'
            }
        };
        $('#preloader').show();
        html2pdf().from(invoice).set(opt).save().then(
            () => {
                window.close();
                $('#btn-download-sertifikat').prop('disabled', false)
                $('#preloader').hide();
            }
        )
        $('#preloader').hide();
    }
    // window.onload = (event) => {

    //     printPdf();


    // }
</script>
<script type="text/javascript">

    $(document).ready(function () {
        getStatusRating();

        @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 getStatusRating(){
        $.ajax({
            url: "{{ url('/getStatusRating') }}",
            type: 'post',
            data: {idcourse: "",iduser: "{{ session()->get('user')[0]['id_lms'] }}",_token:"{{ csrf_token() }}"},
            dataType: 'json',
            success: function(res){

                if(res.return){
                    $('#nomor_seri').html(res.data.seri);
                    $('#nav-home-tab').hide();
                    $('#nav-home').hide();
                    // $('#nav-profile-tab').click();
                    // $('#nav-profile-tab').html('Step 1: Verifikasi');
                    $('#nav-contact-tab').click();
                    $('#nav-contact-tab').hide();
                    $('#nav-contact-tab').html('Berhasil');
                    $('.step-lock').prop('disabled', false);
                }else{
                    $('.step-lock').prop('disabled', true);
                }

            }
        });

    }

    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() {


            },
            success: function(res){
                if(res.return){
                    $('#nomor_seri').html(res.data.seri);
                    // getStatusRating();
                    // $('#nav-profile-tab').trigger('click');
                    $('.step-lock').prop('disabled', false);
                    $('#nav-contact-tab').click();
                    $('#nav-home-tab').prop('disabled', true);
                }else{
                    res.msg ? alert(res.msg) : alert('Course Gagal Rating!');
                }
            }
        });


    }

    function buatSertifikat(){
        $('#nav-contact-tab').trigger('click');
    }
</script>