@extends('Layouts.main')
@section('container')
    <div class="row">
        <div class="col-12">
            <form enctype="multipart/form-data" method="post" name="myForm" class="d-inline" id="myForm"
                action="{{ url('/mahasiswa/import') }}">
                @csrf
                <label class="fileContainer d-none">
                    <a href="#" class="btn btn-sm btn-success" title="Import"><i class="fa fa-file-import"></i>
                        &nbsp;Import</a>
                    <input type="file" name="file" id="import" />
                </label>
                <button type="submit" class="btn btn-default mb-2 mb-sm-0" name="port" id="port" value="port"
                    style="position: absolute;left: 0px;z-index: -1;"></button>
            </form>

            <table id="dt-table" class="table table-bordered table-striped" width="100%">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>NIM</th>
                        <th>Nama</th>
                        <th>Tgl Lahir</th>
                        <th>Program</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            listData();

            $('#import').change(function() {
                validateForm();
            });

        });

        function listData() {

            var table = $('#dt-table').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                destroy: true,
                language: {
                    search: "",
                    searchPlaceholder: "Cari data"
                },
                dom: "<'row'<'col-sm-12 col-md-6 d-flex justify-content-start pl-0'f><'col-sm-12 col-md-6 d-flex justify-content-end'B>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",

                buttons: {
                    dom: {
                        button: {
                            className: ''
                        }
                    },
                    buttons: [{
                            extend: 'excel',
                            text: '<i class="fas fa-file fa-sm"></i>',
                            titleAttr: 'Template',
                            className: 'btn btn-sm btn-secondary',
                            extension: '.xlsx',
                            action: function() {
                                window.location.href = "{{ url('/mahasiswa/template') }}"
                            }

                        }, {
                            text: '<i class="fas fa-file-import fa-sm"></i>',
                            titleAttr: 'Import',
                            className: 'btn btn-sm btn-secondary',
                            action: function() {
                                $('#import').trigger('click');
                            }

                        }, {
                            extend: 'excel',
                            text: '<i class="fas fa-file-excel fa-sm"></i>',
                            titleAttr: 'Export',
                            className: 'btn btn-sm btn-secondary',
                            extension: '.xlsx',
                            action: function() {
                                window.location.href = "{{ url('/mahasiswa/export') }}"
                            }

                        },
                        {
                            text: '<i class="fas fa-plus fa-sm mr-2"></i>Tambah',
                            titleAttr: 'Tambah Data',
                            className: 'btn btn-sm btn-primary',
                            action: function() {
                                window.location.href = "{{ url('/mahasiswa/form') }}"
                            }

                        }
                    ]
                },
                ajax: {
                    url: "{{ url('/mahasiswa/list') }}",
                    type: "POST"
                },
                order: [
                    [1, 'asc']
                ],
                columns: [{
                        data: 'DT_RowIndex'
                    },
                    {
                        data: 'nim'
                    },
                    {
                        data: 'nama'
                    },
                    {
                        data: 'tgllahir'
                    },
                    {
                        data: 'program'
                    },
                    {
                        data: 'action',
                        className: 'dt-body-center',
                        orderable: false,
                        searchable: false
                    },
                ],
                columnDefs: [{
                    searchable: false,
                    sortable: false,
                    targets: [0]
                }]
            });

            $('#dt-table_wrapper .dt-buttons').removeClass('btn-group')
            $('#dt-table_filter, #dt-table_filter label,#dt-table_filter input').css({
                'width': '100%',
                'display': 'inline-block'
            });
        }

        function validateForm() {

            function hasExtension(inputID, exts) {
                var fileName = document.getElementById(inputID).value;
                return (new RegExp('(' + exts.join('|').replace(/\./g, '\\.') + ')$')).test(fileName);
            }

            if (!hasExtension('import', ['.xlsx'])) {
                alert("Only .xlsx allowed");
                return false;
            } else {
                $('.loading-wrapper').removeClass('hide-this')
                $('#port').trigger('click');
            }

        }
    </script>
@endsection