@extends('layout.main')

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

@section('isi')
<!--begin::Wrapper-->
<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 active" 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" 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 Pekerjaan</h3>
                                </div>
                                <!--end::Heading-->
                                <!--begin::Toolbar-->
                                <div class="card-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('riwpekerjaan.store') }}')" class="btn btn-primary btn-sm">
                                            <span class="indicator-label"><i class="bi bi-file-plus"></i> Tambah Data</span>
                                        </button>
                                    </div>
                                    
                                    
                                </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-40px">No</th>
                                                <th class="min-w-100px">Lembaga</th>
                                                <th class="min-w-150px">Alamat Lembaga</th>
                                                <th class="min-w-150px">Jabatan</th>
                                                <th class="min-w-150px">Uraian Tugas</th>
                                                <th class="min-w-150px" style="text-align: center">Tahun Masuk</th>
                                                <th class="min-w-150px" style="text-align: center">Tahun Keluar</th>
                                                <th class="min-w-150px">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.pekerjaan.formaddmodals')
@includeIf('maba.riwayat.pekerjaan.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('riwpekerjaan.table') }}',
            },
            columns: [
                { data: 'DT_RowIndex', searchable: false, sortable: false },
                { data: 'nmlembaga' },
                { data: 'alamat' },
                { data: 'jabatan' },
                { data: 'uraiantgs' },
                { data: 'thnmsk' },
                { data: 'thnkeluar' },
                { 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-left',
                        },
                        {
                            targets: 5,
                            className: 'text-center',
                        },
                        {
                            targets: 6,
                            className: 'text-center',
                        },
                        {
                            targets: 8,
                            className: 'text-center',
                        }
            ]
        });
    });
 

    function addForm(url) 
    {
        $('#modal-form-add').modal('show');
        $('#modal-form-add .modal-tittle').text('Tambah Riwayat Pekerjaan');
        $('#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=lembaga_name]').focus();
    }

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

        $('#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="lembaga_name"]').focus();
       
        $.get(url)
            .done((response) => {
                $('#modal-form-edit [name=id]').val(response.id);
                $('#modal-form-edit [name=lembaga_name]').val(response.nmlembaga);
                $('#modal-form-edit [name=alamat_name]').val(response.alamat);
                $('#modal-form-edit [name=jabatan_name]').val(response.jabatan);
                $('#modal-form-edit [name=uraian_tugas_name]').val(response.uraiantgs);
                $('#modal-form-edit [name=tahun_masuk_name]').val(response.thnmsk);
                $('#modal-form-edit [name=tahun_keluar_name]').val(response.thnkeluar);
                $('#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"
                    }
                })
            });
   }
        
</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