@extends('layout.main')

@section('judul')
    <h3 class="text-gray-900 fw-bolder m-0">Riwayat Pelatihan</h3>
@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">
    <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>
   
    <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>
</ul>
@endsection

@section('isi')
    <div class="swal" data-swal="{{ session('success') }}"></div>
    <!--begin::Toolbar-->
    <div id="kt_app_toolbar" class="app-toolbar">
        <!--begin::Toolbar container-->
        <div id="kt_app_toolbar_container" class="app-container container-fluid d-flex align-items-stretch">
            <!--begin::Navs-->
            <ul class="nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bold">
                <!--begin::Nav item-->
                <li class="nav-item mt-2">
                    <a class="nav-link text-active-primary ms-0 me-5 me-lg-8 pt-2 pb-3 pt-lg-4 pb-lg-5" href="{{ route('riwpddk.index') }}">Riwayat Pendidikan</a>
                </li>
                <!--end::Nav item-->
                <!--begin::Nav item-->
                <li class="nav-item mt-2">
                    <a class="nav-link text-active-primary ms-0 me-5 me-lg-8 pt-2 pb-3 pt-lg-4 pb-lg-5" href="{{ route('riwpekerjaan.index') }}">Riwayat Pekerjaan</a>
                </li>
                <!--end::Nav item-->
                
                <!--begin::Nav item-->
                <li class="nav-item mt-2">
                    <a class="nav-link text-active-primary ms-0 me-5 me-lg-8 pt-2 pb-3 pt-lg-4 pb-lg-5 active" href="{{ route('riwpelatihan.index') }}">Riwayat Pelatihan</a>
                </li>
                <!--end::Nav item-->
               
            </ul>
            <!--begin::Navs-->
        </div>
        <!--end::Toolbar container-->
    </div>
    <!--end::Toolbar-->

    <!--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('dasbormaba.index') }}" class="btn btn-info btn-sm">
                                        <i class="bi bi-arrow-left"></i> Beranda
                                    </a>&nbsp;
                                    <button onclick="addForm('{{ route('riwpelatihan.store') }}')" class="btn btn-primary btn-sm">
                                        <span class="indicator-label"><i class="bi bi-file-plus"></i> Tambah Data</span>
                                    </button>
                                </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>
                                                <th class="min-w-150px" style="text-align: center">Aksi</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-->
    @includeIf('maba.riwayat.pelatihan.formaddmodals')
    @includeIf('maba.riwayat.pelatihan.formeditmodals')

    <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 () 
    {
        table = $('.table').DataTable({
            processing: true,
            autoWidth: false,
            ajax: {
                url: '{{ route('riwpelatihan.table') }}',
            },
            columns: [
                { data: 'DT_RowIndex', searchable: false, sortable: false },
                { data: 'tahun' },
                { data: 'penyelengara' },
                { data: 'tmp_pelaksanaan' },
                { data: 'jangkawaktu' },
                { data: 'bukti'},
                { data: 'aksi', searchable: false, sortable: false }
                
            ],
            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',
                        },

                        {
                            targets: 6,
                            data: null,
                            orderable: false,
                            searchable: false,
                            className: 'text-center',
                        }
            ]
        });
 
      
 
     });
 
    
</script>

<script>
     function addForm(url) {
        $('#modal-form-add').modal('show');
        $('#modal-form-add .modal-tittle').text('Tambah Riwayat Pelatihan');
        $('#modal-form-add form')[0].reset();
        $('#modal-form-add form').attr('action', url);

        $('#modal-form-add form [name=_method]').val('post');
        $('#modal-form-add form [name=tahun_name]').focus();
        $('#modal-form-add form [name=tempat_pelaksanaan_name]').focus();
        $('#modal-form-add form [name=penyelengara_name]').focus();
        $('#modal-form-add form [name=jangka_waktu_name]').focus();
    }

    function editForm(url) {
        $('#modal-form-edit').modal('show');
        $('#modal-form-edit .modal-tittle').text('Edit Riwayat Pelatihan');

        $('#modal-form-edit form')[0].reset();
        $('#modal-form-edit form').attr('aksi', url); 
        $('#modal-form-edit form [name=_method]').val('put');
        $('#modal-form-edit form [name="tahun_name"]').focus();
       
        $.get(url)
            .done((response) => {
                $('#modal-form-edit [name=id]').val(response.id);

                $('#modal-form-edit [name=tahun_name]').val(response.tahun);
               
                $('#modal-form-edit [name=tempat_pelaksanaan_name]').val(response.tmp_pelaksanaan);
                $('#modal-form-edit [name=penyelengara_name]').val(response.penyelengara);
                $('#modal-form-edit [name=jangka_waktu_name]').val(response.jangkawaktu);
                $('#modal-form-edit [name=file]').val(response.storage_file_name);
               
            })
            .fail((errors) => {
                Swal.fire({
                    text: "Tidak dapat Menampilkan data.",
                    icon: "error",
                    buttonsStyling: !1,
                    confirmButtonText: "Ok, got it!",
                    customClass: {
                        confirmButton: "btn btn-primary"
                    }
                })
            });
   }

   function deleteData(url){
        Swal.fire({
            title: 'Anda Yakin?',
            text: 'Anda tidak akan dapat memulihkan data ini!',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.post(url, {
                '_token'    : $('[name=csrf-token]').attr('content'),
                '_method'   : 'delete'
            })
                .done((response)=> {
                    table.ajax.reload();
                    Swal.fire({
                        title: 'Success',
                        icon: 'success',
                        text: 'Data has been deleted successfully!',
                        buttonsStyling: false,
                        showConfirmButton: false,
                        timer: 1500,
                    });
                })
                .fail((errors)=>{
                    Swal.fire({
                            text: "Tidak dapat Menghapus data.",
                            icon: "error",
                            buttonsStyling: !1,
                            confirmButtonText: "Ok, got it!",
                            customClass: {
                                confirmButton: "btn btn-primary"
                            }
                    })
                });
            }
        });
    }
</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>

@if(Session::has('errors') && old('mode') == 'add')
<script>
    $(document).ready(function() {
        $('#modal-form-add').modal('show');
    })
</script>
@endif


@if(Session::has('errors') && old('mode') == 'edit')
<script>
    $(document).ready(function() {
        $('#modal-form-edit').modal('show');
    })
</script>
@endif
@endpush