@extends('Layouts_admin.index')
@section('content')
    <!-- widget -->
    <div class="container pt-4 px-md-7 px-2">
        <!-- <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>Error Data! Terjadi Suatu Kasalahan<a href="#" class="ms-2 alert-link hover">Error</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">List Peserta Eksternal</h2>
                        </div>
                        <div class="card-body px-3 pt-2 pb-4">
                            <div class="row">
                                <div class="justify-content-between d-flex mb-4">
                                    <div>
                                        <div class="opendown-wrapper">
                                            <button onclick="openDown(this)" class="btn btn-sm btn-primary fs-14 fw-normal">
                                                <span class="d-none d-md-block">Filter</span>
                                                <span><i class="fa-solid fa-filter ms-md-2"></i></span> 
                                            </button>
                                            <div class="opendown-menu">
                                                <form action="" id="filters-form">
                                                    <div class="opendown-item">
                                                        <div class="form-group mb-0">
                                                            <select name="status"  id="status" class="form-select py-1">
                                                                <option value="">Status Peserta</option>
                                                                <option value="1">Aktif</option>
                                                                <option value="0">Non Aktif</option>
                                                            </select>
                                                        </div> 
                                                    </div>
                                                    <div class="opendown-item">
                                                        <select name="reportRange" id="reportrange-new2" class="filters form-select form-select-md fs-13 p-2 text-dark shadow-none">
                                                            <option class="mt-1 d-none shadow-none p-0" value="" style="border: 0;">Pilih Tanggal</option>
                                                            <input type="hidden" name="tanggal-start" id="filter-tanggal-start" value="{{  request()->input('tanggal-start') != '' ? request()->input('tanggal-start') : '' }}">
                                                            <input type="hidden" name="tanggal-end" id="filter-tanggal-end" value="{{  request()->input('tanggal-end') != '' ? request()->input('tanggal-end') : '' }}">
                                                        </select>
                                                        <!-- <div class="px-4 py-1 bg-light rounded" id="reportrange-new2" style="cursor: pointer; z-index: 1; border: 1px solid #e6e6e6;" data-toggle="tooltip" title="Saat berwarna abu, maka menampilkan semua tanggal.">
                                                            {{-- <input type="text" id="tanggal" class="form-control" disabled style="width: 170px; font-size: 0.65rem; display: inline;"> --}}
                                                            <div class="d-flex justify-content-between">
                                                                <div>
                                                                    <p class="mb-0 text-muted fs-15">Pilih Tanggal</p>
                                                                </div>
                                                                <div>
                                                                    <span class="text-muted"><i class='bx bxs-chevron-down arrow' ></i></span>
                                                                </div>
                                                            </div>
                                                            
                                                        </div> -->
                                                    </div>
                                                    <div class="opendown-item">
                                                        <div class="form-group mb-0">
                                                            <button onclick="srcBtn(this)" class="btn btn-outline-primary fs-13" style="height: 38px; width: 100%;">Cari</button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </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="#">
                                                    <button type="button" onclick="exportData2('ExcelPesertaEksternal', 1, null, dttable)" id="btn-download-pesertaa" class="btn btn-primary fw-normal fs-12">Download Excel<span class="ms-2"><i class="fa-solid fa-up-long"></i></span></button>
                                                    </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>
                                            </div>
                                        </div>             
                                    </div> 
                                </div>
                            </div>
                            <div class="tab-content mt-0" id="nav-tabContent">
                                <div class="tab-pane fade show active p-0 pt-0" id="nav-eksternal" role="tabpanel" 
                                aria-labelledby="nav-eksternal-tab">
                                    <div class="table-responsive">
                                        <div class="text"><small id="datedata"></small></div>
                                    
                                        <table class="table display" id="table-data" width="100%" cellspacing="0">
                                            <thead>
                                                <tr>
                                                    <th>Nama</th>
                                                    <th class="text-center">Tanggal Mendaftar</th>
                                                    <th class="text-center px-0">ID</th>
                                                    <th class="text-center">No Telepon</th>
                                                    <th>Status</th>
                                                    <th><span><i class="fa-solid fa-pen-to-square"></i></span></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <!-- menu-tabs-over -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- widgetend -->
    <script type="text/javascript">
        function openDown(button) {
            let parent = button.closest('.opendown-wrapper');
            let choseChild = parent.children;
            let dMenu = choseChild[1];
            dMenu.classList.toggle('opened');
        };

        function srcBtn(button) {
            let parent = button.closest('.opendown-wrapper');
            let choseChild = parent.children;
            let dMenu = choseChild[1];
            dMenu.classList.toggle('opened');
        };
    </script>

@endsection
<style>
.daterangepicker .drp-calendar{
  display: block !important;
  max-width: 270px;
}
.daterangepicker.show-calendar .drp-buttons{
  display: block !important;
}
</style>
@section('script')
<script>
    $('#filters-form').submit(function(e){
        e.preventDefault();
        dttable.ajax.reload();
    });
    var dttable = $('#table-data').DataTable({
        "aLengthMenu":[
                [10, 30, 50, -1],
                [10, 30, 50, "All"]
            ],
        "language": {
                "paginate": {
                    "first": "Awal",
                    "previous": "Sebelumnya",
                    "next": "Selanjutnya",
                    "last": "Akhir"
                },
                "search": "Pencarian",
                "info": "Tampilan data _START_ sampai _END_ dari _TOTAL_ data",
                "lengthMenu": "Tampil <select>" +
                "<option value='10'>10</option>" +
                "<option value='30'>30</option>" +
                "<option value='50'>50</option>" +
                "<option value='10000000000'>All</option>" +
                "</select> Data"
            },
        serverSide: true,
        processing: true,
        ajax : {
            url: '{{ url("getPesertaEksternal") }}',
            type: 'POST',
            data: function(d){
                d.status = $('[name="status"]').val();
                d.tanggalStart = $('[name="tanggal-start"]').val();
                d.tanggalEnd = $('[name="tanggal-end"]').val();
            },
            dataSrc: function (json) {
                $('#datedata').text('Pencarian data rating dari tanggal: ' + json.date.startdate + ' s/d ' + json.date.enddate);
                return json.data;
            },
            beforeSend: function () {
                $('#datedata').text('Loading...');
            },
            // processData: false,
        },
        columns: [
            { data: 'nama' },
            { data: 'created_at' },
            { data: 'id' },
            { data: 'telp' },
            {
                 data: 'aktif',
                "render": function(data, type, row, meta) {
                    if (data == 1) {
                        return '<a href="#" onclick="changeStatus('+ row.id +',0)" class="aktif btn-aktif"><span class="">Aktif</span></a>'
                    }else{
                        return '<a href="#" onclick="changeStatus('+ row.id +',1)" class="nonaktif btn-aktif"><span class="">Nonaktif</span></a>'
                    }

                }
                  
            },
            { 
                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">' +
                                            '<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('/TambahCourseOffline') }}/' + row.id_lms + '">Pelatihan Tatap Muka</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>';
                    return html;
                }
            }
        ]
    });
    $('#btn-download-peserta').on('click', function(){
        location.href = "{{ url('ExcelPesertaEksternal') }}?status=" + $('#status').val() + '&startDate=' + $('[name="tanggal-start"]').val() + '&endDate=' + $('[name="tanggal-end"]').val();
    })
</script>
<script type="text/javascript">
    function changeStatus(id,param){

        var result = confirm("Apakah anda yakin untuk mengubah status akun?");

        if (result) {
            
        } else {
            return false;
        }

        $.ajax({
        url: "{{ url('/changeStatus') }}",
        type: 'post',
        data: {id:id,param: param,_token:"{{ csrf_token() }}"},
        dataType: 'json',
        beforeSend: function() {
        $('#preloader').show()
            // $('#spinner-btn-submit').show();
        
        },
        success: function(res){
        
        // $('#spinner-btn-submit').hide();
        if(res.return){
            // $('#alert-error').hide();

            
            location.href = "{{ url('/SemuaPeserta') }}";


        }else{
            $('#preloader').hide()
            // $('#alert-error').html(res.msg);
            // $('#alert-error').show();
        }
        },
        error: function(xhr, status, error) {
        $('#preloader').hide()
        }
        });
    }
</script>
@endsection