@extends('layout.main')

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

@section('isi')
    <div class="swal" data-swal="{{ session('success') }}"></div>
    <!--begin::Wrapper-->
    <div class="card mb-5 mb-xl-8">
        <!--begin::Header-->
        {{-- <div class="card-header border-0 pt-5">
            <h3 class="card-title align-items-start flex-column">
                <span class="card-label fw-bold fs-3 mb-1">Dokumen Pendukung Matakuliah</span>
            </h3>
        </div> --}}

        <div class="card-body py-3">
            <!--begin::Table container-->
            <div class="table-responsive">
                <div class="d-flex flex-stack mb-5">
                    <!--begin::Search-->
                    <div class="d-flex align-items-center position-relative my-1">
                        <i class="ki-duotone ki-magnifier fs-1 position-absolute ms-6">
                            <span class="path1"></span>
                            <span class="path2"></span>
                        </i>
                        <input type="text" data-kt-docs-table-filter="search" class="form-control form-control-solid w-250px ps-15" placeholder="Search "/>
                    </div>
                    <!--end::Search-->

                    <!--begin::Toolbar-->
                    <div class="d-flex justify-content-end" data-kt-docs-table-toolbar="base">
                        <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('dokumenpendukungmk.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::Toolbar-->
                </div>
                <!--end::Wrapper-->

                <!--begin::Datatable-->
                <table id="kt_datatable_example_1" class="table table-bordered align-middle table-row-dashed fs-6 gy-5">
                    <thead>
                        <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                            <th class="text-center min-w-5px">No</th>
                            <th class="text-left min-w-300px">Nama Dokumen</th>
                            <th class="text-center min-w-50px">Dokumen</th>
                            <th class="text-center min-w-20px">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="text-gray-600 fw-semibold">
                        
                    </tbody>
                </table>
                <!--end::Datatable-->
            </div>
        </div>
    </div>
    @includeIf('maba.upload_pendukung_mk.formaddmodals')
    @includeIf('maba.upload_pendukung_mk.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('dokumenpendukungmk.table') }}',
            },
            columns: [
                { data: 'DT_RowIndex', searchable: false, sortable: false },
                { data: 'nama_dokumen' },
                { data: 'bukti' },
                { data: 'aksi', searchable: false, sortable: false }
            ],
            columnDefs: [
                {
                    targets: 0,
                    orderable: false,
                    data: null,
                    searchable: false,
                    className: 'text-center',
                },
                {
                    targets: 1,
                    className: 'text-left',
                },

                {
                    targets: 2,
                    className: 'text-center',
                },
                {
                    targets: 3,
                    data: null,
                    orderable: false,
                    searchable: false,
                    className: 'text-center',
                },
            ]
        });
        $('[data-kt-docs-table-filter="search"]').on('keyup', function () {
            table.search(this.value).draw();
        });
 
     });
</script>

<script>
    function addForm(url) 
    {
        $('#modal-form-add').modal('show');
        $('#modal-form-add .modal-tittle').text('Tambah Dokumen Pendukung Matakuliah');
        $('#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=nama_dokumen]').focus();
    }

    function editForm(url) 
    {
        $('#modal-form-edit').modal('show');
        $('#modal-form-edit .modal-tittle').text('Edit Dokumen Pendukung Matakuliah');

        $('#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="nama_dokumen"]').focus();
       
        $.get(url)
            .done((response) => {
                $('#modal-form-edit [name=id]').val(response.id);
                $('#modal-form-edit [name=nama_dokumen]').val(response.nama_dokumen);
            })
            .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: "Maaf, 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