@extends('Layouts_admin.index')
@section('content')
    <!-- widget -->
    <div class="container pt-3 px-5">
                <!-- <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">
                    <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-3">
                                         <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                           <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">Master Report</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" style="width: 100%; white-space: nowrap;">
                                            <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)">LOB</a>
                                                            </li>
                                                            <li class="dropdown-item">
                                                                <a class=" filter-button fs-14 px-4" onclick="toggleColumn(3)">Sub Modul</a>
                                                            </li>
                                                            <li class="dropdown-item">
                                                                <a class=" filter-button fs-14 px-4" onclick="toggleColumn(4)">Sub Job</a>
                                                            </li>
                                                            <li class="dropdown-item">
                                                                <a class=" filter-button fs-14 px-4" onclick="toggleColumn(5)">No Telp</a>
                                                            </li>
                                                            <li class="dropdown-item">
                                                                <a class=" filter-button fs-14 px-4" onclick="toggleColumn(6)">Tanggal Akses SubModul</a>
                                                            </li>
                                                            <li class="dropdown-item">
                                                                <a class=" filter-button fs-14 px-4" onclick="toggleColumn(7)">Tanggal Pretest</a>
                                                            </li>
                                                            <li class="dropdown-item">
                                                                <a class=" filter-button fs-14 px-4" onclick="toggleColumn(8)">Hasil Kuis</a>
                                                            </li>
                                                            <li class="dropdown-item">
                                                                <a class=" filter-button fs-14 px-4" onclick="toggleColumn(9)">Tanggal Kuis</a>
                                                            </li>
                                                            <li class="dropdown-item">
                                                                <a class=" filter-button fs-14 px-4" onclick="toggleColumn(10)">Tanggal Post Test</a>
                                                            </li>
                                                            <li class="dropdown-item">
                                                                <a class=" filter-button fs-14 px-4" onclick="toggleColumn(11)">Kategori Kelulusan</a>
                                                            </li>
                                                            <li class="dropdown-item">
                                                                <a class=" filter-button fs-14 px-4" onclick="toggleColumn(12)">Rating Durasi</a>
                                                            </li>
                                                            <li class="dropdown-item">
                                                                <a class=" filter-button fs-14 px-4" onclick="toggleColumn(13)">Rating Video</a>
                                                            </li>
                                                            <li class="dropdown-item">
                                                                <a class=" filter-button fs-14 px-4" onclick="toggleColumn(14)">Rating Audio</a>
                                                            </li>
                                                            <li class="dropdown-item">
                                                                <a class=" filter-button fs-14 px-4" onclick="toggleColumn(15)">Rating Pemahaman</a>
                                                            </li>
                                                            <li class="dropdown-item">
                                                                <a class=" filter-button fs-14 px-4" onclick="toggleColumn(16)">Feedback</a>
                                                            </li>
                                                            <li class="dropdown-item">
                                                                <a class=" filter-button fs-14 px-4" onclick="toggleColumn(17)">Tanggal Generate Sertifikat</a>
                                                            </li>
                                                            <li class="dropdown-item">
                                                                <a class=" filter-button fs-14 px-4" onclick="toggleColumn(18)">Usulan Topik</a>
                                                            </li>
                                                            <li class="dropdown-item">
                                                                <a class=" filter-button fs-14 px-4" onclick="toggleColumn(19)">Tanggal Feedback</a>
                                                            </li>
                                                            <li class="dropdown-item">
                                                                <a class=" filter-button fs-14 px-4" onclick="toggleColumn(20)">Attemp Post Test</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                </ul> 

                                                <ul class="list-unstyled float-end p-0" style="position: absolute; top: 13px; right: 70px;">
                                                    <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 href="{{ url('/ExcelMasterReport') }}" 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 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 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: 120px;">
                                                    <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>
                                            <div class="collapse" id="collapseExample">
                                                <div class="mb-3">
                                                    <div class="col-lg-12">
                                                        <div class="row ms-2">
                                                            <div class="col-lg-2 px-2 py-0">
                                                                <div class="form-group mb-0">
                                                                    <select class="form-select form-select-md fs-13 p-2 text-dark" aria-label="Default select example" style="width: 155px; height: 40px;">
                                                                        <option selected>Modul</option>
                                                                        <option value="1">Eksternal</option>
                                                                        <option value="1">Internal</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-2 p-0">
                                                                <div class="form-group mb-0">
                                                                    <select class="form-select form-select-md fs-13 p-2 text-dark" aria-label="Default select example" style="width: 155px; height: 40px;">
                                                                        <option selected>Klien</option>
                                                                        <option value="1">Human Capital</option>
                                                                        <option value="2">Collector</option>
                                                                        <option value="2">Customer Service</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-2 p-0">
                                                                <div class="form-group mb-0">
                                                                    <select class="form-select form-select-md fs-13 p-2 text-dark" aria-label="Default select example" style="width: 155px; height: 40px;">
                                                                        <option selected>Status Personil</option>
                                                                        <option value="1">TAD</option>
                                                                        <option value="2">Organik</option>
                                                                        <option value="2">Public</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-2 p-0">
                                                                <div class="form-group mb-0">
                                                                    <select class="form-select form-select-md fs-13 p-2 text-dark" aria-label="Default select example" style="width: 155px; height: 40px;">
                                                                        <option selected>Client</option>
                                                                        <option value="1">SIMGROUP</option>
                                                                        <option value="2">BNI</option>
                                                                        <option value="2">FIFGROUP</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-2 p-0">
                                                                <div class="form-group mb-0">
                                                                    <select class="form-select form-select-md fs-13 p-2 text-dark" aria-label="Default select example" style="width: 155px; height: 40px;">
                                                                        <option selected>Job</option>
                                                                        <option value="1">SIMGROUP</option>
                                                                        <option value="2">BNI</option>
                                                                        <option value="2">FIFGROUP</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-2 p-0">
                                                                <div class="p-1 bg-light rounded" id="reportrange2" style="cursor: pointer;max-width: 60px; z-index: 1; ">
                                                                    <i class='bx bx-calendar' ></i>&nbsp;
                                                                    <i class="fa fa-caret-down"></i>
                                                                </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="table-responsive">
                                                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                                                    <thead>
                                                        <tr>
                                                            <th class="text-center px-2">No.</th>
                                                            <th class="text-center px-2">Nama</th>
                                                            <th class="text-center px-2">NIK</th>
                                                            <th class="text-center px-2">Status Peserta</th>
                                                            <th class="text-center px-2">Klien</th>
                                                            <th class="text-center px-2">Job Pelatihan</th>
                                                            <!-- <th class="text-center px-2">Sub Job</th> -->
                                                            <th class="text-center px-2">No Telp</th>
                                                            <th class="text-center px-2">Email</th>
                                                            <th class="text-center px-2">Modul</th>
                                                            <!-- <th class="text-center px-2">Sub Modul</th> -->
                                                            <!-- <th class="text-center px-2">Tanggal Akses Sub Modul</th>
                                                            <th class="text-center px-2">Hasil Pretest</th>
                                                            <th class="text-center px-2">Tanggal Pretest</th>
                                                            <th class="text-center px-2">Hasil Kuis</th>
                                                            <th class="text-center px-2">Tanggal Kuis</th>
                                                            <th class="text-center px-2">Hasil Post Test</th>
                                                            <th class="text-center px-2">Tanggal Post Test</th> -->
                                                            <th class="text-center px-2" style="width :50px;">Detail nilai</th>
                                                            <th class="text-center px-2">Status Kelulusan</th>
                                                            <th class="text-center px-2">Kategori Kelulusan</th>
                                                            <th class="text-center px-2">Rating Durasi Training</th>
                                                            <th class="text-center px-2">Rating Kualitas Audio</th>
                                                            <th class="text-center px-2">Rating Kualitas Video</th>
                                                            <th class="text-center px-2">Rating Pemahaman Materi</th>
                                                            <!-- <th class="text-center px-2">Komen Feedback</th> -->
                                                            <th class="text-center px-2">Usulan Topik</th>
                                                            <th class="text-center px-2">Ulasan Topik</th>
                                                            <th class="text-center px-2">Tanggal Feedback</th>
                                                            <th class="text-center px-2">Tanggal Generate Sertifikat</th>
                                                            <!-- <th class="text-center px-2">Attemp Post Test</th> -->
                                                            <!-- <th class="text-center"><span><i class="fa-solid fa-pen-to-square"></i></span></th> -->
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach($grade as $grd)
                                                                @foreach($courses[$grd->userid] as $course)
                                                                    @foreach($user as $u)
                                                                        @if($u->id_lms == $grd->userid)
                                                                        @if($course->id == $grd->courseid)
                                                                            <tr>
                                                                                <td class="text-center"> <a class="link-dark"href="">1.</a></td>
                                                                                <td class="pb-1 pt-2">
                                                                                    <h2 class="table-avatar ">
                                                                                        <a href="#" class="avatar avatar-sm me-2"><img class="avatar-img rounded-circle" width="40" height="40" src="{{ asset('needed/img/avatars/te1.jpg')}}" alt="User Image"></a>
                                                                                        <a href="#">{{ $grd->userfullname }}<span>firmanmaulana@gmail.com</span></a>             
                                                                                    </h2>
                                                                                </td>
                                                                                <td class="text-center"> <a class="link-dark"href="">{{ $u->nik }}</a></td>
                                                                                <td class="text-center"> <a class="link-dark"href="">{{ $u->status }}</a></td>
                                                                                <td class="text-center"> <a class="link-dark"href="">{{ $u->client }}</a></td>
                                                                                <td class="text-center"> <a class="link-dark"href="">
                                                                                @foreach($list_category as $category)
                                                                                    @if($course->category == $category->id)
                                                                                        {{ $category->name }}
                                                                                    @endif
                                                                                @endforeach
                                                                                </a></td>
                                                                                <!-- <td class="text-center"> <a class="link-dark"href="">FIFGROUP</a></td> -->
                                                                                <td class="text-center"> <a class="link-dark"href="">{{ $u->telp }}</a></td>
                                                                                <td class="text-center"> <a class="link-dark"href="">{{ $u->email }}</a></td>
                                                                                <td class="text-center"> <a class="link-dark"href="">{{ $course->fullname }}</a></td>
                                                                                <!-- <td class="text-center"> <a class="link-dark"href="">01-10-2022</a></td> -->
                                                                                <!-- <td class="text-center"> <a class="link-dark"href="">72</a></td>
                                                                                <td class="text-center"> <a class="link-dark"href="">02-10-2022</a></td>
                                                                                <td class="text-center"> <a class="link-dark"href="">70</a></td>
                                                                                <td class="text-center"> <a class="link-dark"href="">03-10-2022</a></td>
                                                                                <td class="text-center"> <a class="link-dark"href="">65</a></td>
                                                                                <td class="text-center"> <a class="link-dark"href="">03-10-2022</a></td>
                                                                                <td class="text-center"> <a class="link-dark"href="">03-10-2022</a></td> -->
                                                                                <td class="text-center">
                                                                                @foreach($nilai[$grd->userid] as $n)
                                                                                    <span>{{ $n->itemname }} : {{ $n->graderaw }}</span><br>
                                                                                @endforeach
                                                                                </td>
                                                                                <td class="text-center"> <a class="link-dark"href="">Lulus</a></td> 
                                                                                <td class="text-center"> <a class="link-dark"href="">Excellent</a></td>                                                  
                                                                                <td class="ps-3">
                                                                                @if(isset($durasi->id_course))
                                                                                    @if($durasi->id_course == $grd->courseid && $durasi->id_user == $grd->userid)
                                                                                        <span class="text-warning me-2"><i class="fa-solid fa-star"></i></span>{{ $durasi->rate }}
                                                                                    @endif
                                                                                @endif
                                                                                </td>
                                                                                <td class="ps-3">
                                                                                @if(isset($audio->id_course))
                                                                                    @if($audio->id_course == $grd->courseid && $audio->id_user == $grd->userid)
                                                                                        <span class="text-warning me-2"><i class="fa-solid fa-star"></i></span>{{ $audio->rate }}
                                                                                    @endif
                                                                                @endif
                                                                                </td>
                                                                                <td class="ps-3">
                                                                                @if(isset($video->id_course))
                                                                                
                                                                                    @if($video->id_course == $grd->courseid && $video->id_user == $grd->userid)
                                                                                        <span class="text-warning me-2"><i class="fa-solid fa-star"></i></span>{{ $video->rate }}
                                                                                    @endif
                                                                                
                                                                                @endif
                                                                                </td>
                                                                                <td class="ps-3">
                                                                                @if(isset($pemahaman->id_course))
                                                                                
                                                                                    @if($pemahaman->id_course == $grd->courseid && $pemahaman->id_user == $grd->userid)
                                                                                        <span class="text-warning me-2"><i class="fa-solid fa-star"></i></span>{{ $pemahaman->rate }}
                                                                                    @endif
                                                                                
                                                                                @endif
                                                                                </td>
                                                                                <!-- <td class="ps-3">
                                                                                    <span class="text-warning me-2">
                                                                                        <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 text-muted"></i>
                                                                                    </span>
                                                                                </td> -->
                                                                                <td class="text-center">
                                                                                @if(isset($usulan->id_course))

                                                                                    @if($usulan->id_course == $grd->courseid && $usulan->id_user == $grd->userid)
                                                                                        {{ $usulan->answer }}
                                                                                    @endif

                                                                                @endif
                                                                                </td>
                                                                                <td class="text-center">
                                                                                @if(isset($ulasan->id_course))
                                                                                
                                                                                    @if($ulasan->id_course == $grd->courseid && $ulasan->id_user == $grd->userid)
                                                                                        {{ $ulasan->answer }}
                                                                                    @endif

                                                                                @endif
                                                                                </td>
                                                                                <td></td>
                                                                                <td class="text-center"> 
                                                                                @if(isset($ulasan->id_course))
                                                                                
                                                                                    @if($ulasan->id_course == $grd->courseid && $ulasan->id_user == $grd->userid)
                                                                                        {{ $ulasan->created_at }}
                                                                                    @endif
                                                                                
                                                                                @endif
                                                                                </td>
                                                                                <!-- <td class="text-center">2 Attempt</td>   -->
                                                                                <!-- <td class="text-center">
                                                                                <ul class="list-unstyled">
                                                                                    <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</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>
                                                                                </td> -->
                                                                            </tr>
                                                                        @endif
                                                                        @endif
                                                                    @endforeach
                                                            @endforeach
                                                        @endforeach
                                                        
                                                    </tbody>
                                                </table>
                                            </div>
                                            <div class="col-lg-12 mt-2">
                                                <div class="float-end">
                                                    <a href="./contact.html" class="btn btn-sm btn-primary fw-semibold rounded p-3 py-1 fs-13"><span class="ms-4"><i class="fa-solid fa-caret-right"></i></span></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- widgetend -->
    <script>
        var buttons = document.getElementsByClassName("filter-button");

        for (var i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener("click", function() {
            this.classList.toggle("active-filter");
        });
        }

        $(document).ready(function () {
            $('#dataTable').DataTable();
        });
    </script>
@endsection