@extends('Layouts.index')
@section('content')

    <div class="container">
        <!-- Mentor Widget -->
        <div class="card rounded pt-0">
            <div class="col-lg-12 card-header bg-primary pt-2 ps-3 pb-0"><h5 class="text-white fw-semibold">Profil</h5></div>
            <div class="card-body pt-0">
                <div class="row form-row">
                    <div class="col-lg-9 p-0">
                        <div class="card-header pb-10 d-flex align-items-center">
                            <div class="pe-13">
                                <img src="{{ asset('needed/img/avatars/te1.jpg')}}" alt="User Image" width="152" height="152" class="avatar-img rounded-circle">
                            </div>
                            <div class="">
                                <h2 class="fs-37 mb-0">Aldo Tahar</h2>
                                    <p class="mentor-type mb-1">ID :<span class=" fs-13 mb-1 ms-1">2003</span></p>
                                    <p class="mentor-type mb-1">Status Personil :<span class="mb-1 ms-1">Organik</span></p>
                                    <p class="mentor-type mb-1">(Peserta Internal)</p>
                                    <p class="mentor-type mb-1">Human Capital (Recruitment & Training)</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>	

        <div class="card rounded pt-0 pb-5 shadow-lg">
            <div class="card-header pt-0 px-3 pb-0">
                <nav class="mb-0">
                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
                      <button class="nav-link px-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" 
                      aria-controls="offcanvasWithBothOptions" data-bs-backdrop="false"><i class="fa-solid fa-bars me-2"></i></button>

                      <button class="nav-link" id="nav-home-tab" data-bs-toggle="tab" 
                      data-bs-target="#nav-home" type="button" role="tab" aaria-controls="nav-home" 
                      aria-selected="true">Course Terdaftar</button>
                  
                      <button class="nav-link active" id="nav-profile-tab" data-bs-toggle="tab" 
                      data-bs-target="#nav-profile" type="button" role="tab" aaria-controls="nav-profile" 
                      aria-selected="false">Progress Course</button>
                  
                      <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" 
                      data-bs-target="#nav-contact" type="button" role="tab" aaria-controls="nav-contact" 
                      aria-selected="false">Informasi Peserta</button>

                      <button class="nav-link" id="nav-history-tab" data-bs-toggle="tab" 
                      data-bs-target="#nav-history" type="button" role="tab" aaria-controls="nav-history" 
                      aria-selected="false">Riwayat Komunikasi</button>
                    </div>
                </nav>
            </div>
            
            <div class="offcanvas offcanvas-start px-0 bg-soft-primary" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel" data-bs-backdrop="false">
                <div class="offcanvas-header">
                    <h5 class="fw-semibold pt-3 text-primary">Menu</h5>
                    <button type="button" class="btn-close btn-light" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body p-0">
                    <div class="px-3">
                        <div class="custom-sidebar-nav">
                            <ul>
                                <li><a class="fw-semibold active" href="progress-ourse.html"><i class="fa-solid fa-user"></i></i>Profil Peserta<span><i class="fa-solid fa-caret-right"></i></span></a></li>
                                <li><a class="fw-semibold" href="course-peserta"><i class="fa-solid fa-house-laptop"></i>Lihat Course<span><i class="fa-solid fa-caret-right"></i></span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card-body pt-2 px-0">
                <div class="row">
                    <div class="tab-content mt-0" id="nav-tabContent">
                        <div class="tab-pane fade show active p-3 pt-0" id="nav-profile" role="tabpanel" 
                        aria-labelledby="nav-profile-tab">
                            <div class="table-responsive">
                                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                                    <thead>
                                        <tr>
                                            <th class="text-center">Nama Course</th>
                                            <th class="px-10">Enroll Date</th>
                                            <th class="text-center we-100 px-10">Progress</th>
                                            <th class="text-center we-100 px-10">Ratings</th>
                                            <th class="text-center w-20">Detail Nilai</th>
                                            <th class="text-center">Predikat</th>
                                            <th>Sertifikat</th>
                                            <th><span><i class="fa-solid fa-pen-to-square"></i></span></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="pb-1 pt-2">
                                                <h2 class="table-avatar ">
                                                <a href="profile.html" class="avatar avatar-sm me-2 mt-2"><img class="avatar-img rounded-circle" width="40" height="40" src="{{ asset('/needed/img/course/crs1.jpg')}}" alt="User Image"></a>
                                                <a href="profile.html" class="fs-17 fw-semibold">Cleaning Service</a>				
                                                </h2>
                                            </td>
                                            <td class=" text-center pt-6"><span>16-07-2022</span></td>
                                            <td class=" text-center pt-6"><p class="badge bg-success rounded fs-13 fw-semibold mb-0">Sudah Selesai</p></td>
                                            <td class=" text-center pt-6 ps-8"><span class="ratings five" ></span></td>
                                            <td class="px-2 text-center pt-3 fs-16">Post Test : 81 <br> <span>Pre Test : 90</span> </td>
                                            <td class="text-center pt-6"><p class=" text-center"><span class="badge bg-success rounded fs-13 fw-semibold text-light">Baik</span></p></td>
                                            <td class="text-center pt-6"><a href="sertifikat.html" class="btn text-warning p-1 py-0 fs-20" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Lihat Sertifikat"><i class="fa-solid fa-certificate me-2"></i><span class="fs-16">Tersedia</span></a></td>
                                            <td>
                                                <ul class="list-unstyled float-end p-0">
                                                    <li class="nav-item dropdown p-0 pe-2">
                                                        <a href="#" class="dropdown nav-link 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 List</h5>
                                                            </div>
                                                            <a class="dropdown-item fw-normal" href="dashboard.html">Edit</a>
                                                            <a class="dropdown-item fw-normal" href="progress-course.html">Progress Course</a>
                                                            <a class="dropdown-item fw-normal" href="login.html">Delete</a>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="pb-1 pt-2">
                                                <h2 class="table-avatar ">
                                                <a href="profile.html" class="avatar avatar-sm me-2 mt-2"><img class="avatar-img rounded-circle" width="40" height="40" src="{{ asset('/needed/img/course/crs2.jpg')}}" alt="User Image"></a>
                                                <a href="profile.html" class="fs-17 fw-semibold">Menjadi Rekrutmen</a>				
                                                </h2>
                                            </td>
                                            <td class="text-center pt-6"><span>16-07-2022</span></td>
                                            <td class=" text-center pt-6"><p class="badge bg-warning rounded fs-13 fw-semibold mb-0">Belum Mulai</p></td>
                                            <td class=" text-center ms-5 pt-6"><span class="badge bg-secondary rounded fs-13">Belum Ada</span></td>
                                            <td class="px-2 text-center pt-3 fs-16">Post Test : - <br> 
                                                <span>Pre Test : -</span>
                                                <p class=" text-center mb-0">
                                                    <span class="btn btn-secondary rounded p-1 py-0 fs-13">Beri Rating</span>
                                                </p> 
                                            </td>
                                            <td class="pt-6"><p class="text-ash text-center"><span class="badge bg-secondary rounded fs-13 fw-semibold">Belum Ada</span></p></td>
                                            <td class="text-center pt-6"><button type="button" href="#" class="btn text-muted fs-26 p-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Sertifikat Tidak Tersedia"><i class="fa-regular fa-circle-xmark"></i></button></td>
                                            <td>
                                                <ul class="list-unstyled float-end p-0">
                                                    <li class="nav-item dropdown p-0 pe-2">
                                                        <a href="#" class="dropdown nav-link 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 List</h5>
                                                            </div>
                                                            <a class="dropdown-item fw-normal" href="dashboard.html">Edit</a>
                                                            <a class="dropdown-item fw-normal" href="progress-course.html">Progress Course</a>
                                                            <a class="dropdown-item fw-normal" href="login.html">Delete</a>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="pb-1 pt-2">
                                                <h2 class="table-avatar ">
                                                <a href="profile.html" class="avatar avatar-sm me-2 mt-2"><img class="avatar-img rounded-circle" width="40" height="40" src="{{ asset('/needed/img/course/crs3.jpg')}}" alt="User Image"></a>
                                                <a href="profile.html" class="fs-17 fw-semibold">Menjadi Rekrutmen</a>				
                                                </h2>
                                            </td>
                                            <td class="text-center pt-6"><span>16-07-2022</span></td>
                                            <td class=" text-center pt-6"><p class="badge bg-success rounded fs-13 fw-semibold mb-0">Sudah Selesai</p></td>
                                            <td class=" text-center ms-5 pt-6"><span class="badge bg-secondary rounded fs-13">Belum Ada</span></td>
                                            <td class="px-2 text-center pt-3 fs-16">Post Test : - <br> 
                                                <span>Pre Test : -</span>
                                                <p class=" text-center mb-0">
                                                    <span class="btn btn-yellow rounded p-1 py-0 fs-13">Beri Rating</span>
                                                </p> 
                                            </td>
                                            <td class="text-center pt-6"><p class=" text-center"><span class="badge bg-warning rounded fs-13 fw-semibold text-light">Kurang Baik</span></p></td>
                                            <td class="text-center pt-6"><button type="button" href="#" class="btn text-muted fs-26 p-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Sertifikat Tidak Tersedia"><i class="fa-regular fa-circle-xmark"></i></button></td>
                                            <td>
                                                <ul class="list-unstyled float-end p-0">
                                                    <li class="nav-item dropdown p-0 pe-2">
                                                        <a href="#" class="dropdown nav-link 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 List</h5>
                                                            </div>
                                                            <a class="dropdown-item fw-normal" href="dashboard.html">Edit</a>
                                                            <a class="dropdown-item fw-normal" href="progress-course.html">Progress Course</a>
                                                            <a class="dropdown-item fw-normal" href="login.html">Delete</a>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="pb-1 pt-2">
                                                <h2 class="table-avatar ">
                                                <a href="profile.html" class="avatar avatar-sm me-2 mt-2"><img class="avatar-img rounded-circle" width="40" height="40" src="{{ asset('/needed/img/course/crs4.jpg')}}" alt="User Image"></a>
                                                <a href="profile.html" class="fs-17 fw-semibold">Jago Berjualan</a>				
                                                </h2>
                                            </td>
                                            <td class="text-center pt-6"><span>16-07-2022</span></td>
                                            <td class=" text-center pt-6"><p class="badge bg-info rounded fs-13 fw-semibold mb-0">Sedang Belajar</p></td>
                                            <td class=" text-center ms-5 pt-6"><span class="badge bg-secondary rounded fs-13">Belum Ada</span></td>
                                            <td class="px-2 text-center pt-3 fs-16">Post Test : - <br> 
                                                <span>Pre Test : -</span>
                                                <p class=" text-center mb-0">
                                                    <span class="btn btn-secondary rounded p-1 py-0 fs-13">Beri Rating</span>
                                                </p> 
                                            </td>
                                            <td class="text-center pt-6"><p class=" text-center"><span class="badge bg-secondary rounded fs-13 fw-semibold text-light" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Selesaikan Post-test">Belum ada</span></p></td>
                                            <td class="text-center pt-6"><button type="button" href="#" class="btn text-muted fs-26 p-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Sertifikat Tidak Tersedia"><i class="fa-regular fa-circle-xmark"></i></button></td>
                                            <td>
                                                <ul class="list-unstyled float-end p-0">
                                                    <li class="nav-item dropdown p-0 pe-2">
                                                        <a href="#" class="dropdown nav-link 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 List</h5>
                                                            </div>
                                                            <a class="dropdown-item fw-normal" href="dashboard.html">Edit</a>
                                                            <a class="dropdown-item fw-normal" href="progress-course.html">Progress Course</a>
                                                            <a class="dropdown-item fw-normal" href="login.html">Delete</a>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="pb-1 pt-2">
                                                <h2 class="table-avatar ">
                                                <a href="profile.html" class="avatar avatar-sm me-2 mt-2"><img class="avatar-img rounded-circle" width="40" height="40" src="{{ asset('/needed/img/course/crs5.jpg')}}" alt="User Image"></a>
                                                <a href="profile.html" class="fs-17 fw-semibold">Project Manajemen</a>				
                                                </h2>
                                            </td>
                                            <td class="text-center pt-6"><span>16-07-2022</span></td>
                                            <td class=" text-center pt-6"><p class="badge bg-info rounded fs-13 fw-semibold mb-0">Sedang Belajar</p></td>
                                            <td class=" text-center ms-5 pt-6"><span class="badge bg-secondary rounded fs-13">Belum Ada</span></td>
                                            <td class="px-2 text-center pt-3 fs-16">Post Test : - <br> 
                                                <span>Pre Test : -</span>
                                                <p class=" text-center mb-0">
                                                    <span class="btn btn-secondary rounded p-1 py-0 fs-13">Beri Rating</span>
                                                </p> 
                                            </td>
                                            <td class="text-center pt-6"><p class=" text-center"><span class="badge bg-secondary rounded fs-13 fw-semibold text-light" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Selesaikan Post-test">Belum ada</span></p></td>
                                            <td class="text-center pt-6"><button type="button" href="#" class="btn text-muted fs-26 p-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Sertifikat Tidak Tersedia"><i class="fa-regular fa-circle-xmark"></i></button></td>
                                            <td>
                                                <ul class="list-unstyled float-end p-0">
                                                    <li class="nav-item dropdown p-0 pe-2">
                                                        <a href="#" class="dropdown nav-link 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 List</h5>
                                                            </div>
                                                            <a class="dropdown-item fw-normal" href="dashboard.html">Edit</a>
                                                            <a class="dropdown-item fw-normal" href="progress-course.html">Progress Course</a>
                                                            <a class="dropdown-item fw-normal" href="login.html">Delete</a>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    <!-- <div class="col-lg-12">
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <label class="mentor-type">Sort By</label>
                                    <select class="form-select form-select-md fs-13 p-2 text-dark" aria-label="Default select example" style="width: 200px; height: 40px;">
                                        <option selected>Recently Accessed</option>
                                        <option value="1">Progress</option>
                                        <option value="2">Job</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label class="mentor-type">Filter</label>
                                    <select class="form-select form-select-md fs-13 p-2 text-dark" aria-label="Default select example" style="width: 170px; height: 40px;">
                                        <option selected>Categories</option>
                                        <option value="1">Progress</option>
                                        <option value="2">Job</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col p-6">
                                <div class="form-group">
                                    <select class="form-select form-select-md fs-13 p-2 text-dark" aria-label="Default select example" style="width: 170px; height: 40px;">
                                        <option selected>Progress</option>
                                        <option value="1">Progress</option>
                                        <option value="2">Job</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col p-6">
                                <div class="form-group">
                                    <select class="form-select form-select-md fs-13 p-2 text-dark" aria-label="Default select example" style="width: 170px; height: 40px;">
                                        <option selected>Instruktur</option>
                                        <option value="1">Progress</option>
                                        <option value="2">Job</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col p-6">
                                <a href="profile-settings-mentee.html" class="btn more btn-primary py-1 fw-normal fs-12">Reset</a>
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
    <!-- Biography Content -->
    </div>
<script>
        function gtmDetailCourse(id){
            $('#course_id').val(id);

            $('#gtm-form').submit();
        }
    </script>
@endsection