@extends('Layouts_admin.index')
@section('content')
    <!-- widget -->
    <div class="container pt-3 px-md-7 px-2" style="max-width: 1300px;">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="col-lg-12">
                            <div class="card rounded pt-0 pb-0">
                                <div class="card-body px-4 pt-2 pb-0">
                                    <h2 class="text-secondary fw-semibold fs-22 mb-0">Evaluasi Modul</h2>
                                </div>
                                <div class="card-body px-4 pt-2 pb-4">
                                    <nav class="justify-content-between d-flex">
                                        <div class="opendown-wrapper">
                                            <button class="btn btn-sm btn-primary fs-14 fw-normal" onclick="openDown(this)">
                                                <span class="d-none d-md-block me-2">Filter</span><span><i class="fa-solid fa-filter"></i></span> 
                                            </button>
                                            <div class="opendown-menu">
                                                <form action="" id="filters-form">
                                                    <div class="opendown-item">
                                                        <div class="form-group mb-0">
                                                            <select name="course" class="filters form-select form-select-md fs-13 p-2 text-dark" aria-label="Default select example" style="width: 155px; height: 40px;">
                                                                <option value="">Pelatihan</option>
                                                                @foreach ($course_filters as $course_filter)
                                                                    @if ($course_filter->id != 1)
                                                                        <option value="{{ $course_filter->id }}" {{ request()->input('course') == $course_filter->id ? 'selected' : '' }}>{{ $course_filter->fullname }}</option>
                                                                    @endif
                                                                @endforeach
                                                            </select>

                                                        </div>
                                                    </div>
                                                    <div class="opendown-item">
                                                        <select name="reportRange" id="reportrange2" class="filters form-select form-select-md fs-13 p-2 text-dark shadow-none " data-toggle="tooltip" title="Saat berwarna abu, maka menampilkan semua tanggal.">
                                                            <option class="mt-1 d-none shadow-none p-0" value="" style="border: 0;">Pilih Tanggal</option>
                                                        </select>
                                                        <input type="hidden" name="tanggal-start" id="filter-tanggal-start">
                                                        <input type="hidden" name="tanggal-end" id="filter-tanggal-end">
                                                    </div>
                                                    <div class="opendown-item">
                                                        <div class="form-group mb-0">
                                                            <button class="btn btn-outline-primary fs-13" onclick="srcBtn(this)" style="width: 100%; height: 40px;">Cari</button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                        

                                        <div class="d-flex">
                                            <div class="nav-item dropdown p-0">
                                                <a href="#" class="btn btn-sm btn-primary fw-normal fs-15 dropdown" data-bs-toggle="dropdown">
                                                <span class="d-none d-md-block">Download </span><span class="ms-0 ms-md-2"><i class="fa-solid fa-download"></i></span> 
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-end py-0 border-0">
                                                    <a class="dropdown-item fw-normal" href="#">
                                                        <a onclick="exportData2('ExcelEvaluasiModul', 0, null, dttable)" href="#" class="btn btn-primary border-0 py-2 px-9 fw-normal fs-12">Download Excel<span class="ms-2"><i class="fa-solid fa-up-long"></i></span></a>
                                                    </a>
                                                    <a class="dropdown-item fw-normal" href="#">
                                                        <a onclick="exportData2('PdfEvaluasiModul', 0, null, dttable)" href="#" class="btn btn-primary border-0 py-2 px-10 fw-normal fs-12">Download PDF<span class="ms-2"><i class="fa-solid fa-plus"></i></span></a>
                                                    </a>
                                                    <a class="dropdown-item fw-normal" href="#">
                                                        <a onclick="exportData2('CsvEvaluasiModul', 0, null, dttable)" href="#" class="btn btn-primary border-0 py-2 px-9 fw-normal fs-12">Download CSV<span class="ms-2"><i class="fa-solid fa-plus"></i></span></a>
                                                    </a>
                                                </div>
                                            </div>    
                                        </div>
                                    </nav>

                                    <div class="tab-content mt-0" id="nav-tabContent">
                                        <div class="tab-pane fade show active p-3" id="nav-graduate" role="tabpanel" 
										aria-labelledby="nav-graduate-tab">
                                        <div class="row">
                                            <div class="tab-content mt-0" id="nav-tabContent">
                                                <div class="tab-pane fade show active p-0 pt-0" id="nav-home" role="tabpanel" 
                                                aria-labelledby="nav-home-tab">
                                                    <div class="table-responsive">
                                                        <div class="text"><small id="datedata"></small></div>
                                                        <table class="table table-bordered" id="table-data" width="100%" cellspacing="0">
                                                        <thead class="bg-soft-blue">
                                                            <tr>
                                                                <th class="py-8" rowspan="2">Nomor</th>
                                                                <th class="text-center py-1" colspan="2">Tanggal Pelatihan</th>
                                                                <th class="py-8" rowspan="2">Modul</th>
                                                                <th class="text-center py-5" rowspan="2">Jumlah User</th>
                                                                <th class="text-center py-1" colspan="4">Average</th>
                                                                @php $col = 1; $coll = 0; @endphp
                                                                @foreach ($rating_stars as $item)
                                                                @if ($item->category == 'stars')
                                                                @php $col++; @endphp
                                                                @endif
                                                                @endforeach
                                                                <th class="text-center py-1" colspan="{{ $col }}">Average Rating</th>
                                                                @foreach ($rating_stars as $item)
                                                                @if ($item->category == 'input')
                                                                @php $coll++; @endphp
                                                                @endif
                                                                @endforeach
                                                                <th class="text-center py-1" colspan="{{ $coll }}">Total</th>
                                                                
                                                            </tr>
                                                            <tr>
                                                                <th class=" py-2">Mulai Pelatihan</th>
                                                                <th class=" py-2">Selesai Pelatihan</th>
                                                                <th class=" py-2">Pre Test</th>
                                                                <th class=" py-2">Post Test</th>
                                                                <th class=" py-2">Kenaikan Post Test</th>
                                                                <th class="">Kelulusan</th>
                                                                @foreach ($rating_stars as $item)
                                                                @if ($item->category == 'stars')
                                                                    <th class="py-2">{{ $item->question }}</th>
                                                                @endif
                                                                @endforeach
                                                                <th class="">Average Keseluruhan</th>
                                                                @foreach ($rating_stars as $item)
                                                                @if ($item->category == 'input')
                                                                    <th class="py-2">{{ $item->question }}</th>
                                                                @endif
                                                                @endforeach
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                        </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        

										</div>
                                        <!-- menu-tabs-over -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- widgetend -->
            <script type="text/javascript">
                function openDown(button) {
                    let parent = button.closest('.opendown-wrapper');
                    let choseChild = parent.children;
                    let dMenu = choseChild[1];
                    dMenu.classList.toggle('opened');
                };

                function srcBtn(button) {
                    let parent = button.closest('.opendown-wrapper');
                    let choseChild = parent.children;
                    let dMenu = choseChild[1];
                    dMenu.classList.toggle('opened');
                };
            </script>

@endsection
@section('script')
<script>

    $('#filters-form').submit(function(e){
        e.preventDefault();
        dttable.ajax.reload();
    });

    var dttable;
    var dttable = $('#table-data').DataTable({
        "language": {
        "sLengthMenu": "Tampil _MENU_ data",
        "sZeroRecords": "Tidak ada data",
        "sInfo": "Tampilan data _START_ sampai _END_ dari _TOTAL_ data",
        "sInfoEmpty": "Tidak ada data yang tersedia",
        "sInfoFiltered": "(disaring dari _MAX_ total data)",
        "sSearch": "Pencarian:",
        "oPaginate": {
            "sFirst": "Awal",
            "sPrevious": "Sebelumnya",
            "sNext": "Selanjutnya",
            "sLast": "Akhir"
        }
    },
    "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
    serverSide: false,
    processing: true,
    ajax: {
        url: '{{ url("EvaluasiModul/getDataEvalRating") }}',
        type: 'POST',
        data: function (d) {
            d.course = $('[name="course"]').val();
            d.tanggalStart = $('[name="tanggal-start"]').val();
            d.tanggalEnd = $('[name="tanggal-end"]').val();
        },
        dataSrc: function (json) {
            $('#datedata').text('Pencarian data rating dari tanggal: ' + json.date.startdate + ' s/d ' + json.date.enddate);
            return json.data;
        },
        beforeSend: function () {
            $('#datedata').text('Loading...');
        },
    },
    columns: 
        [
            {
                "targets": 0,
                "render": function (data, type, row, meta) {
                    return meta.row + 1;
                }
            },
            {
                data: 'startdate',
                className: 'text-center',
                type: 'string',
                render: function (data, type, row) {
                    if (type === 'sort') {
                        var parts = data.split('/');
                        return parts[2] + '-' + parts[1] + '-' + parts[0];
                    }
                    return data;
                }
            },
            {
                data: 'enddate',
                className: 'text-center',
                type: 'string',
                render: function (data, type, row) {
                    if (type === 'sort') {
                        var parts = data.split('/');
                        return parts[2] + '-' + parts[1] + '-' + parts[0];
                    }
                    return data;
                }
            },
            { data: 'course', type: 'string' },
            { data: 'jumlah_peserta', className: 'text-center' },
            { data: 'pre_test', className: 'text-center' },
            { data: 'post_test', className: 'text-center' },
            { data: 'kenaikan', className: 'text-center',
            "render": function (data, type, row, meta) {
                    return data + ' %';
                } },
            { data: 'kelulusan', className: 'text-center',
            "render": function (data, type, row, meta) {
                    return data + ' %';
                } },
            { data: 'rating_durasi' },
            { data: 'rating_audio', className: 'text-center' },
            { data: 'rating_video', className: 'text-center' },
            { data: 'rating_pemahaman', className: 'text-center' },
            { data: 'average', className: 'text-center' },
            { data: 'rating_ulasan', className: 'text-center' },
            { data: 'rating_usulan', className: 'text-center' },
        ]
    });
</script>

@endsection
<style>
    .daterangepicker .drp-calendar{
    display: block !important;
    max-width: 270px;
    }
    .daterangepicker.show-calendar .drp-buttons{
    display: block !important;
    }
</style>