@extends('Layouts_admin.index')
@section('content')
    <!-- widget -->
    <div class="container pt-4 px-2 px-md-7">
        <!-- <div class="title">
            <h4 class="fw-bold">M</h4>
        </div> -->
        @if(session('status'))

        @if(session('status') == 'error')

        <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>Data telah di upload, namun ada beberapa kesalahan pada data!
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>

        @elseif(session('status') == 'info')

        <div class="alert alert-warning alert-icon alert-dismissible border border-warning fade show" role="alert">
            <i class="uil uil-clock"></i>Data telah di upload, terdapat beberapa informasi terkait ketidaksesuaian data!
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>

        @elseif(session('status') == 'success')
        <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!
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>

        @endif


        @endif
        

        @if(session('alert'))
        <div class="position-relative alert alert-danger alert-icon alert-dismissible  border border-danger fade show fs-15" role="alert">
        
            @foreach(session('alert') as $alert)
            <p> <i class="uil uil-times-circle"></i>{{ $alert['alert'] }}</p>
            @endforeach
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        <div class="row">
            <div class="col-lg-12">
                <div class="col-lg-12">
                <ul class="nav nav-tabs nav-pills">
                    <li class="nav-item"> 
                        <a class="nav-link active" data-bs-toggle="tab" href="#tab1-1">
                        <span>User</span>
                        </a>
                    </li>
                    <li class="nav-item"> 
                        <a class="nav-link" data-bs-toggle="tab" href="#tab2-2">
                        <span>Role</span>
                        </a>
                    </li>
                    <li class="nav-item"> 
                        <a class="nav-link" data-bs-toggle="tab" href="#tab1-2">
                        <span>Network</span>
                        </a>
                    </li>
                    <li class="nav-item"> 
                        <a class="nav-link" data-bs-toggle="tab" href="#tab1-3">
                        <span>Client</span>
                        </a>
                    </li>
                </ul>
                <!-- /.nav-tabs -->
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="tab1-1">
                            <div class="card rounded pt-0 pb-0 px-6">
                                <div class="card-body pb-0 px-0 pt-2">
                                    <h2 class="text-secondary fw-semibold fs-22 mb-0">List user</h2>
                                </div>
                                <div class="card-body px-0 pt-4 pb-0">
                                    <div class="row">
                                        <div class="justify-content-between d-flex mb-4">
                                            <div>
                                                <div class="nav-item dropdown">
                                                    <button class="dropdown btn btn-sm btn-primary fs-14 fw-normal" data-bs-toggle="dropdown">
                                                       <span class="d-none d-md-block">Filter</span><span><i class="fa-solid fa-filter ms-md-2"></i></span> 
                                                    </button>
                                                    <div class="dropdown-menu">
                                                        {{-- <div class="dropdown-item">
                                                            <div class="form-group mb-0">
                                                                <select  name="client" id="client-filter" class="filters form-select">
                                                                    <option value="" selected>Klien</option>
                                                                </select>
                                                            </div> 
                                                        </div> --}}
                                                        <div class="dropdown-item">
                                                            <div class="form-group mb-0">
                                                                <select name="status" id="status-filter" class="filters form-select form-select-md fs-13 p-2 text-dark" aria-label="Default select example">
                                                                    <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="dropdown-item">
                                                            <div class="form-group mb-0">
                                                                <select name="role" id="role-filter" class="filters form-select form-select-md fs-13 p-2 text-dark" aria-label="Default select example">
                                                                    <option class="mt-1" value="">Role</option>
                                                                    @foreach ($role_filters as $role_filter)
                                                                    <option value="{{ $role_filter->id }}" {{ request()->input('role') == $role_filter->id ? 'selected' : '' }}>{{ $role_filter->nama }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="dropdown-item">
                                                            <div class="form-group mb-0">
                                                                <select name="reportRange" id="reportrange-new3" 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="">Pilih Tanggal</option>
                                                                </select>
                                                                {{-- <input type="text" id="tanggal" class="form-control" disabled style="width: 370px; font-size: 0.65rem; display: inline;"> --}}
                                                                <input type="hidden" class="filter-start-peserta" name="tanggal-start-peserta" id="filter-tanggal-start" value="{{  request()->input('tanggal-start-peserta') != '' ? request()->input('tanggal-start-peserta') : '' }}">
                                                                <input type="hidden" class="filter-end-peserta" name="tanggal-end-peserta" id="filter-tanggal-end" value="{{  request()->input('tanggal-end->peserta') != '' ? request()->input('tanggal-end->peserta') : '' }}">
                                                            </div>
                                                        </div>
                                                        <div class="dropdown-item">
                                                            <div class="form-group mb-0">
                                                                <button id="btn-filter" class="btn btn-outline-primary fs-13 w-100" style="height: 48px;">Cari</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="d-flex">
                                                <div>
                                                    <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 href="#" onclick="exportData2('excelUserManagement', 1, null, dttable)" id="btn-download-pesertaa" 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>
                                                        </div>
                                                    </div>
                                                </div>             
                                                <!-- <div class="ms-2">
                                                    <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">Tambah </span><span class="fs-16 fw-normal ms-0 ms-md-2"><i class='bx bx-plus'></i></span> 
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end py-0 border-0">
                                                            <a class="dropdown-item fw-normal" href="#">
                                                                <a href="{{ url('/addNetwork') }}" class="btn btn-primary border-0 py-2 px-10 fw-normal fs-12">Tambah Network<span class="ms-2"><i class="fa-solid fa-plus"></i></span></a>
                                                            </a>
                                                            <a class="dropdown-item fw-normal" href="#">
                                                                <a href="{{ url('/addClient') }}" class="btn btn-primary border-0 py-2 px-9 fw-normal fs-12">Tambah Client<span class="ms-2"><i class="fa-solid fa-plus"></i></span></a>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>   -->
                                            </div> 
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive">
                                    <div class="text"><small id="datedata"></small></div>
                                    <table class="table table-bordered display" id="datatable" cellspacing="0" style="width:100%">
                                        <thead>
                                            <tr>
                                                <th>Email</th>
                                                <th class="text-center">Username</th>
                                                <th class="px-0">SIM ID</th>
                                                <th class="text-center px-0">Status Personil</th>
                                                <th class="text-center">Role</th>
                                                {{-- <th class="text-center">Status Peserta</th> --}}
                                                {{-- <th class="text-center">Job</th> --}}
                                                {{-- <th class="text-center">Network</th>
                                                <th class="text-center px-17">Klien</th> --}}
                                                {{-- <th class="text-center px-10">LOB</th> --}}
                                                <th class="text-center px-10">Tanggal Daftar</th>
                                                <th><span><i class="fa-solid fa-pen-to-square"></i></span></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade show" id="tab1-2">
                            <div class="card rounded pt-0 pb-0">
                                <div class="card-body pb-0 px-4 pt-2">
                                    <h2 class="text-secondary fw-semibold fs-22">Setup Network</h2>
                                </div>
                                <div class="card-body px-0 pt-4 pb-0">
                                    <div class="row">
                                        <div class="justify-content-between d-flex mb-4">
                                            <div class="d-flex">
                                                <div class="ms-2">
                                                    <div class="nav-item dropdown p-0">
                                                        <a href="{{ url('/addNetwork') }}" class="btn btn-primary border-0 py-2 px-9 fw-normal fs-12">
                                                            <span class="d-none d-md-block">Tambah </span><span class="fs-16 fw-normal ms-0 ms-md-2"><i class='bx bx-plus'></i></span> 
                                                        </a>
                                                    </div>
                                                </div>  
                                            </div> 
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body px-4 pt-2 pb-4">
                                    <div class="tab-content mt-0" id="nav-tabContent">
                                        @if(session('success'))
                                            <div class="position-relative alert alert-success alert-icon alert-dismissible  border border-success fade show" role="alert">
                                                {{ session('success') }}
                                            </div>
                                            {{ session()->forget('success') }} <!-- Menghapus session error setelah ditampilkan -->
                                        @endif
                                        <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">
                                                <table class="table table-bordered" id="datatable-network" width="100%" cellspacing="0">
                                                    <thead>
                                                        <tr>
                                                            <th class="text-center">KD Network</th>
                                                            <th class="text-center">Nama Network</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 class="tab-pane fade show" id="tab1-3">
                            <div class="card rounded pt-0 pb-0">
                                <div class="card-body pb-0 px-4 pt-2">
                                    <h2 class="text-secondary fw-semibold fs-22">Setup Client</h2>
                                </div>
                                <div class="card-body px-0 pt-4 pb-0">
                                    <div class="row">
                                        <div class="justify-content-between d-flex mb-4">
                                            <div class="d-flex">
                                                <div class="ms-2">
                                                    <div class="nav-item dropdown p-0">
                                                        <a href="{{ url('/addClient') }}" class="btn btn-primary border-0 py-2 px-9 fw-normal fs-12">
                                                            <span class="d-none d-md-block">Tambah </span><span class="fs-16 fw-normal ms-0 ms-md-2"><i class='bx bx-plus'></i></span> 
                                                        </a>
                                                    </div>
                                                </div>  
                                            </div> 
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body px-4 pt-2 pb-4">
                                    <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">
                                                <table class="table table-bordered" id="datatable-client" width="100%" cellspacing="0">
                                                    <thead>
                                                        <tr>
                                                            <th class="text-center">KD Client</th>
                                                            <th class="text-center">Title</th>
                                                            <th class="text-center">Nama Client</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 class="tab-pane fade show" id="tab2-2">
                            <div class="card rounded pt-0 pb-0">
                                <div class="card-body pb-0 px-4 pt-2">
                                    <h2 class="text-secondary fw-semibold fs-22">Setup Role</h2>
                                </div>
                                <div class="card-body px-0 pt-4 pb-0">
                                    <div class="row">
                                        <div class="justify-content-between d-flex mb-4">
                                            <div class="d-flex">
                                                <div class="ms-2">
                                                    <div class="nav-item dropdown p-0">
                                                        <a href="#" class="btn btn-primary border-0 py-2 px-9 fw-normal fs-12" data-bs-toggle="modal" data-bs-target="#modalRole">
                                                            <span class="d-none d-md-block">Tambah </span><span class="fs-16 fw-normal ms-0 ms-md-2"><i class='bx bx-plus'></i></span> 
                                                        </a>
                                                    </div>
                                                </div>  
                                            </div> 
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body px-4 pt-2 pb-4">
                                    <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">
                                                <table class="table table-bordered" id="datatable-role" width="100%" cellspacing="0">
                                                    <thead>
                                                        <tr>
                                                            <th class="text-center">Nama Role</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>
                <!-- /.tab-content -->
            </div>
        </div>
       
    <!-- widgetend -->
@endsection
      

<style>
.daterangepicker .drp-calendar{
  display: block !important;
  max-width: 270px;
}
.daterangepicker.show-calendar .drp-buttons{
  display: block !important;
}
</style>
<script src="{{ asset('assets/js/jquery-3.6.0.min.js')}}"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>

<script type="text/javascript">
    var dttable;
   $(document).ready(function(){
    
    $('#btn-filter').on('click', function(){
        dttable.ajax.reload()
      })

      var dttable = $('#datatable').DataTable({
        "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='25'>25</option>" +
                "<option value='50'>50</option>" +
                "<option value='-1'>All</option>" +
                "</select> Data"
        },
        serverSide: true,
        processing: true,
        ajax: {
            url: '{{ url("getUserManagement") }}',
            type: 'POST',
            data: function(d) {
                d.status = $('#status-filter').val();
                d.role = $('#role-filter').val();
                d.tanggalStart = $('.filter-start-peserta').val();
                d.tanggalEnd = $('.filter-end-peserta').val();
            },
            dataSrc: function(json) {
                $('#datedata').text('Pencarian data rating dari tanggal: ' + json.date.startdate + ' s/d ' + json.date.enddate);
                return json.data;
            },
            beforeSend: function() {
                $('#datedata').text('Loading...');
            }
        },
        columns: [
            {
                data: 'fullname',
                render: function(data, type, row, meta) {
                    return '<h2 class="table-avatar"><a href="{{ url("/ViewProfile") }}/' + row.id_lms + '" class="avatar avatar-sm me-2"></a><a href="{{ url("/ViewProfile") }}/' + row.id_lms + '">' + row.fullname + '<span>' + row.username + '</span></a></h2>';
                }
            },
            { data: 'username' },
            { data: 'sim_id' },
            { data: 'status' },
            { data: 'role' },
            { data: 'tanggal_daftar' },
            {
                data: 'id',
                render: function(data, type, row, meta) {
                    return '<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 List</h5></div><a class="dropdown-item fw-normal" href="{{ url("/ViewProfile") }}/' + row.id_lms + '">Lihat Profil</a><a class="dropdown-item fw-normal" href="{{ url("/EditPeserta") }}/' + row.id_lms + '">Ubah</a><a class="dropdown-item fw-normal" onclick="return confirm(\'Apakah kamu yakin untuk menghapus data user ini?\');" href="{{ url("/DeletePeserta") }}/' + row.id_lms + '">Hapus</a></div></li></ul>';
                }
            }
        ]
    });
    
    var dtnetwork = $('#datatable-network').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("getNetwork") }}',
            type: 'POST',
            data: function(d){
            },
            // processData: false,
        },
        columns: [
            { data: 'kd_network' },
            { data: 'nama_network' },
            { 
                data: 'id_network',
                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">' +
                                            '<a class="dropdown-item fw-normal" href="{{ url('/editNetwork') }}/' + row.id_network + '">Edit</a>' +
                                            '<a class="dropdown-item fw-normal" onclick="return confirm(\'Apakah kamu yakin untuk menghapus data Client ini?\');" href="{{ url('/deleteNetwork') }}/' + row.id_network + '">Hapus</a>' +
                                        '</div>' +
                                    '</li>' +
                                '</ul>';
                    return html;
                }
            }
        ]
    });

    var dtclient = $('#datatable-client').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("getClient") }}',
            type: 'POST',
            data: function(d){
            },
            // processData: false,
        },
        columns: [
            { data: 'kd_client' },
            { data: 'title' },
            { data: 'client' },
            { 
                data: 'id_client',
                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">' +
                                            '<a class="dropdown-item fw-normal" href="{{ url('/editClient') }}/' + row.id_client + '">Edit</a>' +
                                            '<a class="dropdown-item fw-normal" onclick="return confirm(\'Apakah kamu yakin untuk menghapus data Client ini?\');" href="{{ url('/deleteClient') }}/' + row.id_client + '">Hapus</a>' +
                                        '</div>' +
                                    '</li>' +
                                '</ul>';
                    return html;
                }
            }
        ]
    });

    var dtrole = $('#datatable-role').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("getRole") }}',
            type: 'POST',
            data: function(d){
            },
            // processData: false,
        },
        columns: [
            { data: 'name' },
            { 
                data: 'id',
                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">';
                        
                    if (row.id !== 2) {
                        html += '<a class="dropdown-item fw-normal" href="{{ url('/aksesRole') }}/' + row.id + '">Akses Role</a>';
                    }

                    html +=
                        '<a class="dropdown-item fw-normal" href="{{ url('/EditRole') }}/' + row.id + '">Edit</a>' +
                        '<a class="dropdown-item fw-normal" onclick="return confirm(\'Apakah kamu yakin untuk menghapus data user ini?\');" href="{{ url('/deleteRole') }}/' + row.id + '">Hapus</a>' +
                        '</div>' +
                        '</li>' +
                        '</ul>';
                    return html;
                }
            }
        ]
    });


        $('#btn-filter-log').on('click', function(){
            dttablelog.ajax.reload()
        })

        $('#btn-download-log').on('click', function(){
            location.href = "{{ url('ExcelLogUpload') }}?status=" + $('#status-log').val() + '&startDate=' + $('[name="tanggal-start"]').val() + '&endDate=' + $('[name="tanggal-end"]').val();
        })

        $('#btn-download-peserta').on('click', function(){
            location.href = "{{ url('ExcelPesertaInternal') }}?status=" + $('#status-filter').val() + "&role=" + $('#role-filter').val() + '&startDate=' + $('.filter-start-peserta').val() + '&endDate=' + $('.filter-end-peserta').val();
        })

    });
</script>