@extends('Layouts_admin.index')
@section('content')
    <!-- widget -->
    <div class="container pt-6">
                <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">Master Report</h2>
                                </div>
                                <div class="card-body px-4 pt-2 pb-4">
                                    <nav class="mb-0">
                                         <div id="nav-tab" role="tablist">
                                            <form class="mb-0" action="/Report/getDataMasterReport" method="post" target="_blanks">
                                                {{-- <input type="hidden" name="course" value="">
                                                <input type="hidden" name="client" value="">
                                                <input type="hidden" name="status" value="">
                                                <input type="hidden" name="job" value=""> --}}
                                                <input type="hidden" name="tanggalStart" value="0">
                                                <input type="hidden" name="tanggalEnd" value="0">
                                            </form>
                                         </div>
                                    </nav>
                                    <nav class="justify-content-between d-flex mb-4">
                                        <div class="opendown-wrapper">
                                            <button class="btn btn-sm btn-primary fs-14 fw-normal" onclick="openDown(this)" data-bs-toggle="dropdown">
                                                <span class="d-none d-md-block me-2">Filter</span><span><i class="fa-solid fa-filter"></i></span>
                                            </button>
                                            <div class="opendown-lg">
                                                <div class="opendown-lg-content">
                                                    <form action="" id="filters-form">
                                                    <div>
                                                        <h6 class="opendown-header">Pilih Filter</h6>
                                                        <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>
                                                                    @if(!empty($course_filters))
                                                                        @foreach ($course_filters as $course_filter)
                                                                            <option value="{{ $course_filter->id }}" {{ request()->input('course') == $course_filter->id ? 'selected' : '' }}>{{ $course_filter->fullname }}</option>
                                                                        @endforeach
                                                                    @endif
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="opendown-item">
                                                            <div class="form-group mb-0">
                                                                <select name="client" 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="">Klien</option>
                                                                    @foreach ($client_filters as $client_filter)
                                                                        <option value="{{ $client_filter->id_client }}" {{ request()->input('client') == $client_filter->id_client ? 'selected' : '' }}>{{ $client_filter->title != 'PERORANGAN' ? $client_filter->title.'. ': '' }} {{ $client_filter->client }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="opendown-item">
                                                            <div class="form-group mb-0">
                                                                <select name="status" 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="">Status Peserta</option>
                                                                    @foreach ($status_filters as $status_filter)
                                                                        <option value="{{ $status_filter->id_status }}" {{ request()->input('status') == $status_filter->id_status ? 'selected' : '' }}>{{ $status_filter->status }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="opendown-item">
                                                            <div class="form-group mb-0">
                                                                <select name="job" 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="">Job Pelatihan</option>
                                                                    @if(!empty($job_filters))
                                                                        @foreach ($job_filters as $job_filter)
                                                                            <option value="{{ $job_filter->id }}" {{ request()->input('job') == $job_filter->id ? 'selected' : '' }}>{{ $job_filter->name }}</option>
                                                                        @endforeach
                                                                    @endif
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                        <!-- /.column -->
                                                    <div>
                                                        <h6 class="opendown-header open-title" style="visibility: hidden;">Pilih Filter</h6>
                                                        <div class="opendown-item">
                                                            <div class="form-group mb-0">
                                                                <select name="progress" 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="">Progress</option>
                                                                        <option value="00">Belum Mulai</option>
                                                                        <option value="30">Sedang Belajar</option>
                                                                        <option value="100">Selesai</option>
                                                                </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" value="{{  request()->input('tanggal-start') != '' ? request()->input('tanggal-start') : '' }}">
                                                            <input type="hidden" name="tanggal-end" id="filter-tanggal-end" value="{{  request()->input('tanggal-end') != '' ? request()->input('tanggal-end') : '' }}">
                                                            {{-- <input type="text" id="tanggal" class="form-control" disabled style="width: 170px; font-size: 0.65rem; display: inline;"> --}}
                                                        </div>
                                                        <div class="opendown-item">
                                                            <div class="form-group mb-0">
                                                                <button class="btn btn-outline-primary fs-13 w-100" style="height: 40px;" onclick="srcBtn(this)">Cari</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- /.column -->
                                                    </form>
                                                </div>
                                                <!-- /auto-column -->
                                            </div>
                                            <button style="display:none" id="generateReport" class="btn btn-sm btn-primary fs-14 fw-normal refresh-button" >
                                                <span class="d-none d-md-block me-2 ">Regenerate</span><span><i class="fa-solid fa-refresh"></i></span>
                                            </button>
                                        </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('ExcelMasterReport', 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('PdfReportTraining', 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('CsvReportTraining', 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-0 pt-0" id="nav-home" role="tabpanel"
                                        aria-labelledby="nav-home-tab">
                                            <div class="table-responsive" style="width: 100%; white-space: nowrap;">
                                                <div class="text"><small id="datedata"></small></div>
                                                <table class="table table-bordered" id="table-data" width="100%" cellspacing="0">
                                                    <thead>
                                                        <tr>
                                                        <th style="position: sticky; left: 0; background: white; z-index: 2;">
                                                                <input type="checkbox" id="checkAll">
                                                            </th>
                                                            <th>#</th>
                                                            <th>Nama</th>
                                                            <th>SIM ID</th>
                                                            <th class="text-center">NIK</th>
                                                            <th class="text-center">Status Peserta</th>
                                                            <th class="text-center">Klien</th>
                                                            <th class="text-center">Area</th>
                                                            <th class="text-center">Job Peserta</th>
                                                            <th class="text-center">Job Pelatihan</th>
                                                            <th class="text-center">No Telp</th>
                                                            <th class="text-center">Email</th>
                                                            <th>Pelatihan</th>
                                                            <th>Progress</th>
                                                            <th>Tanggal Mulai Pelatihan</th>
                                                            <th>Tanggal Selesai Pelatihan</th>
                                                            <th>Tanggal Terakhir Akses Pelatihan</th>
                                                            <!-- <th class="text-center" colspan="3">Detail Nilai</th> -->
                                                            <th>Pre Test</th>
                                                            <th>Post Test</th>
                                                            <th>% Kenaikan</th>
                                                            <th>Refresh</th>
                                                            <th class="text-center">Fitur LMS mudah dipahami</th>
                                                            <th class="text-center">LMS berjalan dengan lancar tanpa lag</th>
                                                            <th class="text-center">Desain dan tata letak LMS menarik</th>
                                                            <th class="text-center">Ukuran teks dan ikon nyaman dilihat
                                                            </th>
                                                            <th class="text-center">Design LMS Responsive
                                                            </th>
                                                            <th>Kendala yang dialami</th>
                                                            <th>Saran perbaikan</th>
                                                            <th>Tanggal Generate Sertifikat</th>
                                                            <!-- <th><span><i class="fa-solid fa-pen-to-square"></i></span></th> -->
                                                        </tr>
                                                    </thead>
                                                    <tbody></tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </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
<style>
    .daterangepicker .drp-calendar{
    display: block !important;
    max-width: 270px;
    }
    .daterangepicker.show-calendar .drp-buttons{
    display: block !important;
    }
    input[type="checkbox"] {
    -webkit-appearance: checkbox !important;
}
</style>
@section('script')
    <script>
        $(document).ready(function () {
            function toggleGenerateButton() {
                // Jika ada checkbox yang dicentang, tampilkan tombol
                if ($('.checkbox-item:checked').length > 0) {
                    $('#generateReport').show();
                } else {
                    $('#generateReport').hide();
                }
            }
            // Ketika checkbox "Check All" diubah
            $('#checkAll').on('change', function () {
                // Set semua checkbox dengan class .checkbox-item sama dengan checkbox checkAll
                $('.checkbox-item').prop('checked', $(this).is(':checked'));
                toggleGenerateButton();
            });

            // Ketika salah satu checkbox-item diubah
            $(document).on('click', '.checkbox-item', function() {
                // Cek jika semua checkbox-item dicentang
                let allChecked = $('.checkbox-item').length === $('.checkbox-item:checked').length;
                
                // Update status checkbox "Check All"
                $('#checkAll').prop('checked', allChecked);
                toggleGenerateButton();
            });
        });
        $('#filters-form').submit(function(e){
            e.preventDefault();
            dttable.ajax.reload();
        });
        var dttable = $('#table-data').DataTable({
            "aLengthMenu":[
                [10, 30, 50, -1],
                [10, 30, 50, "All"]
            ],
            "language": {
                "paginate": {
                    "first": "Awal",
                    "previous": "Sebelumnya",
                    "next": "Selanjutnya",
                    "last": "Akhir"
                },
                "search": "Pencarian",
                "info": "Tampilan data _START_ sampai _END_ dari _TOTAL_ data",
                "lengthMenu": "Tampil <select>" +
                "<option value='10'>10</option>" +
                "<option value='30'>30</option>" +
                "<option value='50'>50</option>" +
                "<option value='10000000000'>All</option>" +
                "</select> Data"
            },
            serverSide: false,
            processing: true,
            ajax : {
                url: '{{ url("Report/getDataMasterReport") }}',
                type: 'POST',
                data: function(d){
                    d.course = $('[name="course"]').val();
                    d.progress = $('[name="progress"]').val();
                    d.client = $('[name="client"]').val();
                    d.status = $('[name="status"]').val();
                    d.job = $('[name="job"]').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...');
                },
                // processData: false,
            },
            columnDefs: [
        {
            targets: 0, // Indeks kolom untuk checkbox
            createdCell: function(td, cellData, rowData, row, col) {
                $(td).css({
                    position: 'sticky',
                    left: 0,
                    background: 'white',
                    zIndex: 1
                });
            }
        }
    ],
            columns: [
                {
                    data: 'id_user_lms',
                    render: function(data, type, row, meta) {
                        return `<input type="checkbox" class="checkbox-item" data-id-course="${row.id_course}" data-id-user="${row.id_user_lms}">`;
                    }
                },
                {
                    data: 'no',
                    render: function(data,type,row,meta){
                        return meta.row + 1;
                    }
                },
                { data: 'nama' },
                { data: 'sim_id' },
                { data: 'nik' },
                { data: 'status_peserta' },
                { data: 'klien' },
                { data: 'area' },
                { data: 'job_peserta' },
                { data: 'job_pelatihan' },
                { data: 'telepon' },
                { data: 'email' },
                { data: 'pelatihan' },
                { data: 'progress' },
                { data: 'mulai_pelatihan', render: function(data,type,row,meta){
                    return data ?? '-'
                }},
                { data: 'selesai_pelatihan', render: function(data,type,row,meta){
                    return data ?? '-'
                }},
                {
                    data: 'tanggal_terakhir_akses_pelatihan',
                    "render": function(data, type, row, meta) {
                        var date = new Date(data * 1000);

                        var day = date.getDate();
                        var month = date.getMonth() + 1;
                        var year = date.getFullYear();
                        var hours = date.getHours();
                        var minutes = date.getMinutes();
                        var seconds = date.getSeconds();

                        // Add leading zeros if necessary
                        day = day < 10 ? "0" + day : day;
                        month = month < 10 ? "0" + month : month;
                        hours = hours < 10 ? "0" + hours : hours;
                        minutes = minutes < 10 ? "0" + minutes : minutes;
                        seconds = seconds < 10 ? "0" + seconds : seconds;

                        return data;

                    }
                },
                {
                    data: 'pre_test',
                    render: function(data,type,row,meta){
                        if(!data){
                            return '-';
                        }
                        var html = '';
                        data.forEach(function(item) {
                            if(item == "<span></span><br>"){
                                html += "0";
                            }else{
                                html += item;
                            }
                        });
                        return html;
                    }
                },
                {
                    data: 'post_test',
                    render: function(data,type,row,meta){
                        if(!data){
                            return '-';
                        }
                        var html = '';
                        data.forEach(function(item) {
                            if(item == "<span></span><br>"){
                                html += "0";
                            }else{
                                html += item;
                            }
                            
                        });
                        return html;
                    }
                },
                { data: 'kenaikan' },
                // {
                //     data: 'grade',
                //     render: function(data,type,row,meta){
                //         var html = '';
                //         // var arr = JSON.parse(data);
                //         data.forEach(function(item) {
                //             html += item;
                //         });
                //         return html;
                //     }
                // },
                { data: 'id_course',
                    class: 'btn-refresh',
                    render: function(data,type,row,meta){
                        
                        var html = `
                        <button 
                            class="btn btn-sm btn-primary fs-14 fw-normal refresh-button" 
                            data-courseid="${row.id_course}" 
                            data-userid="${row.id_user_lms}">
                            <span><i class="fa-solid fa-refresh"></i></span>
                        </button>`;
                        return html;
                    }
                },
                { data: 'rating_durasi' },
                { data: 'rating_audio' },
                { data: 'rating_video' },
                { data: 'rating_mudah_dipahami' },
                { data: 'rating_responsive' },
                { data: 'komentar' },
                { data: 'usulan_topik' },
                { data: 'tanggal_generate_sertif' }
            ]
        });

        $('#generateReport').on('click', function () {

            var clickedButton = $(this); // Tombol yang diklik

            // Disable semua tombol
            $('.refresh-button').prop('disabled', true);

            // Tambahkan loader pada tombol yang diklik
            var originalContent = clickedButton.html(); // Simpan konten asli
            clickedButton.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');

                var selectedData = [];
                
                // Collect data from checked checkboxes
                $('.checkbox-item:checked').each(function () {
                    var courseId = $(this).data('id-course');
                    var userId = $(this).data('id-user');
                    selectedData.push({ course_id: courseId, user_id: userId });
                });

                // Send the selected data to the server via AJAX
                $.ajax({
                    url: '{{ url('/GenerateMasterReportBatchHandler') }}', // Replace with your controller URL
                    type: 'POST',
                    data: {
                        data: selectedData, // Send selected data
                    },
                    success: function (response) {
                        response = JSON.parse(response);
                        // alert(response.status);
                        if (response.status === true) {
                            $('#generateReport').hide();
                            alert('Report generated successfully!');
                            dttable.ajax.reload();
                        } else {
                            alert('Failed to generate report: ' + response.message);
                        }
                    },
                    error: function (xhr, status, error) {
                        // Handle error
                        alert('An error occurred while generating the report.');
                        console.log(xhr.responseText);
                    },
                    complete: function() {
                    // Kembalikan tombol ke keadaan semula
                    clickedButton.html(originalContent);
                    $('.refresh-button').prop('disabled', false); // Enable semua tombol
                }
                });
            });

        

        $(document).on('click', '.refresh-button', function() {
            var courseId = $(this).data('courseid');
            var userId = $(this).data('userid');
            var clickedButton = $(this); // Tombol yang diklik

            // Disable semua tombol
            $('.refresh-button').prop('disabled', true);

            // Tambahkan loader pada tombol yang diklik
            var originalContent = clickedButton.html(); // Simpan konten asli
            clickedButton.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');

            // alert(courseId);
            $.ajax({
                url: "{{ url('/GenerateMasterReportHandler') }}", // Ganti dengan URL ke controller Anda
                method: 'POST', // Gunakan metode yang sesuai
                data: {
                    course_id: courseId,
                    user_id: userId
                },
                success: function(response) {
                    response = JSON.parse(response);
                    // alert(response.status);
                    if (response.status === true) {
                        alert('Report generated successfully!');
                        dttable.ajax.reload();
                    } else {
                        alert('Failed to generate report: ' + response.message);
                    }
                },
                error: function(xhr, status, error) {
                    // Tindakan jika terjadi error
                    console.error('Error:', error);
                    alert('An error occurred. Please try again.');
                },
                complete: function() {
                    // Kembalikan tombol ke keadaan semula
                    clickedButton.html(originalContent);
                    $('.refresh-button').prop('disabled', false); // Enable semua tombol
                }
            });
        });
    </script>
@endsection