@extends('master')

@push('after-style')
<link rel="stylesheet" href="{{ asset('adminn/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('adminn/plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
@endpush

@section('content')

<section id="title_breadcrumbs_bar">
    <div class="container clearfix">
        <div class="floatleft">
            <h1>Download</h1>
        </div>
    </div>
</section>

<section style="padding-top: 0px;">
    <div class="container ">
        <div class="row portfolio_4column portfolio_4column_gallery">
            <div class="portfolio_full_width span12 content ">
                <div class="row">
                    <div class="col-lg-12 col-12 col-md-12">
                        <div class="card">

                            <!-- /.card-header -->
                            <div class="card-body">
                                <table id="table" class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>Unit</th>
                                            <th>Name</th>
                                            <th>File</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.card-body -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End Featured Portfolio -->
@endsection

@push('after-script')
<script src="{{ asset('adminn/plugins/jquery/jquery.min.js') }}"></script>
<!-- jQuery UI 1.11.4 -->
<script src="{{ asset('adminn/plugins/jquery-ui/jquery-ui.min.js') }}"></script>

<script src="{{ asset('adminn/plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('adminn/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('adminn/plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('adminn/plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
<script>
    $(document).ready(function() {
        table = $('#table').DataTable({
            "responsive": true,
            "autoWidth": false,
            "processing": true, //Feature control the processing indicator.
            "serverSide": true, //Feature control DataTables' server-side processing mode.
            "order": [], //Initial no order.

            // Load data for the table's content from an Ajax source
            "ajax": {
                "url": "http://labirin-polkesmed.poltekkes-medan.ac.id/download/get-data-table",
                "type": "get",
                "error": function(xhr, error, code) {
                    console.log(xhr);
                    console.log(error);
                    console.log(code);
                }
            },
            "bDestroy": true,
            // "buttons": [
            //     'copy', 'csv', 'excel', 'pdf', 'print'
            // ],
            // // dom: 'Bfrtip',
            // dom: 'lBfrtip',
            //Set column definition initialisation properties.
            columns: [{
                    data: 'no',
                    name: 'no'
                },
                {
                    data: 'unit_name',
                    name: 'unit_name'
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'fileButton',
                    name: 'fileButton',
                    orderable: false
                }
            ],
            order: [
                [0, 'asc']
            ]
        });
    });
</script>

@endpush