@extends('Layouts_admin.index')
@section('content')
    <!-- widget -->
    <div class="container pt-3 px-10" style="max-width: 1300px;">
                <!-- <div class="alert alert-secondary alert-icon alert-dismissible border border-secondary fade show" role="alert">
                <i class="uil uil-clock"></i>Data Yang Di upload tidak valid atau beberapa format input tidak sesuai<a href="#" class="ms-2 alert-link hover">Coba Lagi</a>.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>

                <div class="alert alert-success alert-icon alert-dismissible border border-success fade show" role="alert">
                <i class="uil uil-check-circle"></i>Upload Data Peserta Berhasil Di lakukan! <a href="#" class=" ms-2 alert-link hover">Lihat Riwayat Upload</a>.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>

                <div class="position-relative alert alert-danger alert-icon alert-dismissible  border border-danger fade show" role="alert">
                <i class="uil uil-times-circle"></i>Upload Data Error! Terjadi Suatu Kasalahan<a href="#" class="ms-2 alert-link hover">Lihat Log</a>.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div> -->

                <div class="row">
                    <h2 class="text-dark fw-semibold">Report</h2>
                    <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-4">
                                    <nav class="mb-3">
                                        <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                            <form action="/RatingPeserta/getData" 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">
                                                <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" 
                                                data-bs-target="#nav-home" type="submit" role="tab" aaria-controls="nav-home" 
                                                aria-selected="true">Rating Peserta</button>
                                            </form>
                                           {{-- <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" 
                                           data-bs-target="#nav-home" type="button" role="tab" aaria-controls="nav-home" 
                                           aria-selected="true">Rating Peserta</button> --}}
                                         </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="col-lg-12 d-flex">
                                            <ul class="list-unstyled p-0" style="position: absolute; top: 13px; right: 20px;">
                                                    <li class="nav-item dropdown p-0">
                                                        <a href="#" class="dropdown nav-link py-st px-2 rounded " data-bs-toggle="dropdown">
                                                            <span class="link-dark fs-16 fw-normal"><i class="fa-solid fa-list-check"></i></span> 
                                                        </a>
                                                        <ul class="dropdown-menu dropdown-menu-end py-0 border-0">
                                                            <li class="dropdown-item">
                                                                <a class=" filter-button fs-14 px-4 " onclick="toggleColumn(0)">Nama</a>
                                                            </li>
                                                            <li class="dropdown-item">
                                                                <a class=" filter-button fs-14 px-4" onclick="toggleColumn(1)">Status</a>
                                                            </li>
                                                            <li class="dropdown-item">
                                                                <a class=" filter-button fs-14 px-4" onclick="toggleColumn(2)">Job</a>
                                                            </li>
                                                            <li class="dropdown-item">
                                                                <a class=" filter-button fs-14 px-4" onclick="toggleColumn(3)">Pelatihan</a>
                                                            </li>
                                                            <li class="dropdown-item">
                                                                <a class=" filter-button fs-14 px-4" onclick="toggleColumn(4)">Pemahaman</a>
                                                            </li>
                                                            <li class="dropdown-item">
                                                                <a class=" filter-button fs-14 px-4" onclick="toggleColumn(5)">Kualitas Audio</a>
                                                            </li>
                                                            <li class="dropdown-item">
                                                                <a class=" filter-button fs-14 px-4" onclick="toggleColumn(6)">Kualitas Video</a>
                                                            </li>
                                                            <li class="dropdown-item">
                                                                <a class=" filter-button fs-14 px-4" onclick="toggleColumn(7)">Durasi</a>
                                                            </li>
                                                            <li class="dropdown-item">
                                                                <a class=" filter-button fs-14 px-4" onclick="toggleColumn(8)">Rating Akhir</a>
                                                             </li>
                                                        </ul>
                                                    </li>
                                                </ul> 
                                                <ul class="list-unstyled float-end p-0" style="position: absolute; top: 13px; right: 20px;">
                                                    <li class="nav-item dropdown p-0">
                                                        <a href="#" class="dropdown nav-link py-st px-2 rounded bg-primary" data-bs-toggle="dropdown">
                                                            <span class="text-light fs-16 fw-normal"><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('ExcelReportRating', 1)" 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('PdfReportRating', 1)" 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('CsvReportRating', 1)" 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>
                                                    </li>
                                                </ul>  
                                                <p class="btn p-1 float-end" style="position: absolute; top: 14px; right: 70px;">
                                                    <a class="nav-link fs-14 fw-normal text-ash" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                                                        Filter<span><i class="fa-solid fa-filter ms-2"></i></span>
                                                    </a>
                                                </p>
                                            </div>
                                            <form action="" id="filters-form">
                                                <div class="collapse" id="collapseExample">
                                                    <div class="mb-3">
                                                        <div class="col-lg-12 px-0">
                                                            <div class="row">
                                                                <div class="col-lg-2 px-2 py-0">
                                                                    <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="">Courses</option>
                                                                            @foreach ($course_filters as $course_filter)
                                                                                <option value="{{ $course_filter->id }}" {{ request()->input('course') == $course_filter->id ? 'selected' : '' }}>{{ $course_filter->fullname }}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-2 p-0">
                                                                    <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="col-lg-2 p-0">
                                                                    <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 Personil</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="col-lg-2 p-0">
                                                                    <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 Course</option>
                                                                            @foreach ($job_filters as $job_filter)
                                                                                <option value="{{ $job_filter->id }}" {{ request()->input('job') == $job_filter->id ? 'selected' : '' }}>{{ $job_filter->name }}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-2 p-0">
                                                                    <div class="p-1 bg-light rounded" id="reportrange2" style="cursor: pointer;z-index: 1;border: 1px solid #aeaeae; max-width: 60px;" data-toggle="tooltip" title="Saat berwarna abu, maka menampilkan semua tanggal.">
                                                                        {{-- <input type="text" id="tanggal" class="form-control" disabled style="width: 170px; font-size: 0.65rem; display: inline;"> --}}
                                                                        <i class='bx bx-calendar' ></i>&nbsp;
                                                                        <i class="fa fa-caret-down"></i>
                                                                        <input type="hidden" name="tanggal-start" id="filter-tanggal-start">
                                                                        <input type="hidden" name="tanggal-end" id="filter-tanggal-end">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-2 p-0">
                                                                    <div class="form-group mb-0">
                                                                        <button class="btn btn-outline-primary fs-13" style="width: 100px; height: 40px;"><i class='bx bx-filter-alt'></i>&nbsp; Filter</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                            <div class="table-responsive" style="width: 100%; white-space: nowrap;">
                                                <table class="table table-bordered" id="table-data" width="100%" cellspacing="0">
                                                    <thead>
                                                        <tr>
                                                            <th>#</th>
                                                            <th class="text-center px-2">Tanggal</th>
                                                            <th class="text-center px-2">Nama</th>
                                                            <th class="text-center px-2">Status Personil</th>
                                                            <th class="text-center px-2">Job User</th>
                                                            <th class="text-center px-2">Job Course</th>
                                                            <th class="text-center px-2">Nama Pelatihan</th>
                                                            @foreach ($rating_stars as $item)
                                                            <th class="text-center px-2">{{ $item->question }}</th>
                                                            @endforeach
                                                            {{-- <th class="text-center px-2">Durasi</th>
                                                            <th class="text-center px-2">Kualitas Audio</th>
                                                            <th class="text-center px-2">Kualitas Video</th>
                                                            <th class="text-center px-2">Pemahaman</th> --}}
                                                            <!-- <th class="text-center px-2">Rating Akhir</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 -->
@endsection
@section('script')
    <script>
        $('#filters-form').submit(function(e){
            e.preventDefault();
            dttable.ajax.reload();
        });
        var dttable = $('#table-data').DataTable({
            serverSide: false,
            processing: true,
            ajax : {
                url: '{{ url("RatingPeserta/getData") }}',
                type: 'POST',
                data: function(d){
                    d.course = $('[name="course"]').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();
                },
            },
            columns: [
                { 
                    data: 'no',
                    render: function(data,type,row,meta){
                        return meta.row + 1;
                    }
                },
                { data: 'tanggal' },
                { data: 'fullname' },
                { data: 'status' },
                { data: 'job' },
                { data: 'category' },
                { data: 'course' },
                @foreach ($rating_stars as $item)
                    {
                        data: 'rating{{ $item->id_rating_question }}',
                    },
                @endforeach
                { 
                    data: 'no',
                    render: function(data,type,row,meta){
                        var html = 
                                '<ul class="list-unstyled float-end p-0">' +
                                        '<li class="nav-item dropdown rounded-circle p-0 pe-2 bg-light px-3">' +
                                            '<a href="#" class="dropdown link-dark px-0" data-bs-toggle="dropdown">' +
                                                '<i class="fa-solid fa-ellipsis-vertical"></i>' +
                                            '</a>' +
                                            '<div class="dropdown-menu dropdown-menu-end p-0">' +
                                                '<div class="user-header">' +
                                                    '<h5 class="fs-15 fw-bold">Edit Course</h5>' +
                                                '</div>' +
                                                '<a class="dropdown-item fw-normal" href="dashboard.html">Ubah</a>' +
                                                '<a class="dropdown-item fw-normal" href="workspace-peserta.html">Sembunyikan</a>' +
                                                '<a class="dropdown-item fw-normal" href="login.html">Hapus</a>' +
                                            '</div>' +
                                        '</li>' +
                                    '</ul>';
                        return html;
                    }
                }
            ]
        });
    </script>
@endsection