@extends('layout.main')

@section('judul')
    <h1 class="text-gray-900 fw-bolder m-0">Riwayat Pelatihan</h1>
@endsection

@push('css')
    <link href="{{ asset('') }}assets/plugins/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css" />
@endpush


@section('breadchums')
    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7">
        <!--begin::Item-->
        <li class="breadcrumb-item text-gray-700 fw-bold lh-1 mx-n1">
            {{-- <a href="{{ route ('dasbormaba.index') }}" class="text-hover-primary"> --}}
                <i class="ki-duotone ki-home text-gray-700 fs-6"></i>
            {{-- </a> --}}
        </li>
        <!--end::Item-->
        

        <!--begin::Item-->
        <li class="breadcrumb-item">
            <i class="ki-duotone ki-right fs-7 text-gray-700"></i>
        </li>
        <li class="breadcrumb-item text-gray-700 fw-bold lh-1 mx-n1">Mahasiswa</li>
        <!--end::Item-->

        <!--begin::Item-->
        <li class="breadcrumb-item">
            <i class="ki-duotone ki-right fs-7 text-gray-700"></i>
        </li>
        <li class="breadcrumb-item text-gray-700 fw-bold lh-1 mx-n1">Verifikasi Berkas</li>
        <!--end::Item-->


        <!--begin::Item-->
        <li class="breadcrumb-item">
            <i class="ki-duotone ki-right fs-7 text-gray-700"></i>
        </li>
        <li class="breadcrumb-item text-gray-700 fw-bold lh-1 mx-n1">Riwayat pelatihan</li>
        <!--end::Item-->
    </ul>
@endsection

@section('isi')
    <div class="swal" data-swal="{{ session('success') }}"></div>

    <!--begin::Main-->
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
        <!--begin::Content wrapper-->
        <div class="d-flex flex-column flex-column-fluid">
            <!--begin::Content-->
            <div id="kt_app_content" class="app-content flex-column-fluid">
                <!--begin::Content container-->
                <div id="kt_app_content_container" class="app-container container-fluid">
                    <!--begin::Navbar-->
                    <div class="card mb-5 mb-xl-10">
                        <!--begin::Card header-->
                            {{-- start table --}}
                            <div class="card-header">
                                <!--begin::Heading-->
                                <div class="card-title">
                                    <h3>Riwayat Pelatihan</h3>
                                </div>
                                <!--end::Heading-->
                                <!--begin::Toolbar-->
                                <div class="card-toolbar">
                                    <a href="{{ route('mahasiswa.verifberkas.index') }}" class="btn btn-info btn-sm">
                                        <i class="bi bi-arrow-left"></i> Beranda
                                    </a>&nbsp;
                                </div>
                                
                            </div>
                            <!--end::Card header-->
                            <!--begin::Card body-->
                            <div class="card-body p-0">
                                <!--begin::Table wrapper-->
                                <div class="table-responsive">
                                    <!--begin::Table-->
                                    <table class="table align-middle table-row-bordered table-row-solid gy-4 gs-9">
                                        <!--begin::Thead-->
                                        <thead class="border-gray-200 fs-5 fw-semibold bg-lighten">
                                            <tr>
                                                <th class="min-w-10px">No</th>
                                                <th class="min-w-40px">Tahun</th>
                                                <th class="min-w-200px">Penyelengara</th>
                                                <th class="min-w-250px">Tempat Penyelengara</th>
                                                <th class="min-w-200px">Jangka Waktu</th>
                                                <th class="min-w-90px" >Dokumen</th>
                                            </tr>
                                        </thead>
                                        <!--end::Thead-->
                                        <!--begin::Tbody-->
                                        <!--<span class="badge badge-light-success fs-7 fw-bold">OK</span>-->
                                        <tbody class="fw-6 fw-semibold text-gray-600">
                                        </tbody>
                                        <!--end::Tbody-->
                                    </table>
                                    <!--end::Table-->
                                </div>
                                <!--end::Table wrapper-->
                            </div>
                             {{-- end table --}}


                    </div>
                    <!--end::Navbar-->
                  
                   
                </div>
                <!--end::Content container-->
            </div>
            <!--end::Content-->
        </div>
        <!--end::Content wrapper-->
      
    </div>
    <!--end:::Main-->

    <div class="modal fade" tabindex="-1" id="kt_modal_1">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Preview File</h3>
    
                    <!--begin::Close-->
                    <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal"
                        aria-label="Close">
                        <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>
                    </div>
                    <!--end::Close-->
                </div>
    
                <div class="modal-body">
                    <iframe src="" frameborder="0" id="iframe_docs" width="100%" height="500px"></iframe>
                </div>
    
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js-vendor')
    <script src="{{ asset('') }}assets/plugins/custom/datatables/datatables.bundle.js"></script>
@endpush

@push('js-page')
<script>
    $(function () 
    {
        var datauserId = {!! json_encode($id) !!};
        table = $('.table').DataTable({
            processing: true,
            autoWidth: false,
            paging: false,
            ajax: {
                url: '{{ route("mahasiswa.verifberkas.tabledatapelatihan") }}' + '/' + datauserId,
                data: function (d) {
                    d.id = datauserId;
                }
            },
            columns: [
                { data: 'DT_RowIndex', searchable: false, sortable: false },
                { data: 'tahun' },
                { data: 'penyelengara' },
                { data: 'tmp_pelaksanaan' },
                { data: 'jangkawaktu' },
                { data: 'bukti'}
                
            ],
            columnDefs: [{
                            targets: 0,
                            orderable: false,
                            data: null,
                            searchable: false,
                        },
                        {
                            targets: 1,
                            data: null,
                            orderable: false,
                            searchable: false,
                            className: 'text-center',
                        },

                        {
                            targets: 4,
                            className: 'text-center',
                        }
            ]
        });
 
      
 
     });
</script>

<script>
    const swal = $('.swal').data('swal');
    if (swal) {
        Swal.fire({
            title: 'Success',
            icon: "success",
            text: swal,
            buttonsStyling: false,
            showConfirmButton: false,
            timer: 1500,
        });
    }
</script>

<script>
    $(document).on('click', '.show-docs', function() {
        var data = $(this).data('url');
        $('#iframe_docs').attr('src', data);
    })
</script>
@endpush