@extends('Layouts.main')
@section('container')
    <style>
        #dt-table tbody tr td {
            vertical-align: top;
        }
    </style>

    <div class="row">
        <div class="col-12">
            <form enctype="multipart/form-data" method="post" name="myForm" class="d-inline" id="myForm"
                action="{{ url('/tor/potensi/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>

            <div class="row mb-3">
                <div class="col-2">
                    <select id="periode" name="periode" class="form-control form-control-sm selectperiode">
                        @foreach ($periodes as $periode)
                            <option value="{{ $periode }}" {{ session('periode_tor') == $periode ? 'selected' : '' }}>
                                {{ $periode }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-2">
                    <select id="prodi_id" name="prodi_id" class="form-control form-control-sm selectprodi">
                        @if (auth()->user()->role != 'admin prodi' && auth()->user()->role != 'kaprodi')
                            <option value="" selected>-- Prodi --</option>
                        @endif
                        @foreach ($prodis as $prodi => $val)
                            <option value="{{ $prodi }}">
                                {{ $val }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-2">
                    <select id="kelas" name="kelas" class="form-control form-control-sm selectkelas">
                        <option value="" selected>-- Kelas --</option>
                        @foreach ($kelass as $kelas)
                            <option value="{{ $kelas }}">
                                {{ $kelas }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-2">
                    <select class="form-control form-control-sm selectkonfirmasi">
                        <option value="" selected>-- Konfirmasi --</option>
                        <option value="Diterima">Diterima</option>
                        <option value="Ditolak">Ditolak</option>
                    </select>
                </div>
            </div>

            <table id="dt-table" class="table table-bordered table-striped" width="100%">
                <thead>
                    <tr>
                        <th>No</th> <!-- 0 -->
                        <th>NIM</th> <!-- 1 -->
                        <th>Nama</th> <!-- 2 -->
                        <th>Kelas</th> <!-- 3 -->
                        <th>Prodi</th> <!-- 4 -->
                        <th>Pembimbing</th> <!-- 5 -->
                        <th>Pbb 1</th> <!-- 6 -->
                        <th>Pbb 2</th> <!-- 7 -->
                        <th>Judul</th> <!-- 8 -->
                        <th>Konfirm</th> <!-- 9 -->
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    {{-- <form action="{{ url('/tor/potensi/konfirmasi') }}" method="POST">
        @csrf
        <input type="text" value="accept" name="params">
        <input type="text" value="8" name="id">
        <button type="submit">asd</button>
    </form> --}}
    <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog  modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body pb-0">
                </div>
                <div class="modal-footer border-0">
                    <input type="hidden" id="modalGrid">
                    <button type="button" class="btn btn-muted" data-dismiss="modal">Kembali</button>
                    <button type="button" class="btn btn-primary btn-modal">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    <!-- /.card -->
    <script>
        const role = "{{ auth()->user()->role }}"
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            listData();

            $('.selectperiode, .selectprodi, .selectkelas, .selectkonfirmasi').change(function() {
                listData();
            })

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

            // Ditolak
            $('#dt-table').on('click', '#reject', function() {
                $('#modal .btn-modal').text('Tolak');
                $('#modal .btn-modal').removeClass('btn-primary').addClass('btn-danger');
                $('#modalGrid').val('');
                $('#modalGrid').val($(this).data('grid'));
                $('#modal .modal-body').html('');
                $('#modal .modal-body').html(`
                <h5>Catatan untuk peserta</h5>
                <textarea placeholder="Tulis di sini.." class="form-control" rows="4" name="catatan" id="catatan" required></textarea>
                <input type="hidden" class="params" name="reject" value="1">
            `);

            })

            // Diterima
            $('#dt-table').on('click', '#accept', function() {
                $('#modal .btn-modal').text('Terima');
                $('#modal .btn-modal').removeClass('btn-danger').addClass('btn-primary');
                $('#modalGrid').val('');
                $('#modalGrid').val($(this).data('grid'));
                $('#modal .modal-body').html('');
                $('#modal .modal-body').html(`
      <h5>Anda yakin?</h5>
        <input type="hidden" class="params" name="accept" value="1">
      `);

            })

            // Modal submit
            $('#modal .btn-modal').on('click', function() {
                var params = $('.params').attr('name');
                var grid = $('#modalGrid').val();
                var catatan = '';
                $(this).attr('disabled', '');
                $(this).html(
                    '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class=""> Loading...</span>'
                );
                if (params == 'reject') {
                    catatan = $('#catatan').val();
                }

                $.ajax({
                    url: "{{ url('tor/potensi/konfirmasi') }}",
                    type: 'post',
                    data: {
                        params: params,
                        id: grid,
                        catatan: catatan
                    },
                    success: function(data) {
                        $('#konf' + grid).html(data.status)
                        $('#modal').modal('hide')
                    }
                })

            })

        });

        function listData() {
            var buttons = []

            if (role == 'admin' || role == 'admin adak') {
                buttons.push({
                    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('/tor/potensi/template') }}"
                    }

                })
            }

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

                })
            }

            if (role == 'admin' || role == 'admin adak' || role == 'admin prodi') {
                buttons.push({
                    extend: 'excel',
                    text: '<i class="fas fa-file-excel fa-sm"></i>',
                    titleAttr: 'Export',
                    className: 'btn btn-sm btn-secondary',
                    extension: '.xlsx',
                    action: function() {
                        var periode = $('.selectperiode').val()
                        var prodi = $('.selectprodi').val()
                        var kelas = $('.selectkelas').val()
                        var konfirmasi = $('.selectkonfirmasi').val()

                        let url = "{{ url('/tor/potensi/export/:params') }}"
                        url = url.replace(':params', periode + '/' + prodi + '/' + kelas + '/' +
                            konfirmasi)

                        window.location.href = url

                    }

                })
            }

            if (role == 'admin' || role == 'admin adak') {
                buttons.push({
                    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('/tor/potensi/form') }}"
                    }

                })
            }
            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: buttons
                },
                ajax: {
                    url: "{{ url('/tor/potensi/list') }}",
                    type: "POST",
                    data: {
                        periode: $('.selectperiode').val(),
                        prodi: $('.selectprodi').val(),
                        kelas: $('.selectkelas').val(),
                        konfirmasi: $('.selectkonfirmasi').val(),
                    }
                },
                order: [
                    [1, 'asc']
                ],
                columns: [{
                        data: 'DT_RowIndex'
                    },
                    {
                        data: 'nim',
                        name: 'm.nim',
                        render: function(data, type, row) {
                            var html = row.nim + ' - ' + row.nama + '<br>' + row.kelas + ' ' + row
                                .kodeprodi
                            return html
                        },
                        width: '25%'
                    },
                    {
                        data: 'nama',
                        name: 'm.nama'
                    },
                    {
                        data: 'kelas',
                        name: 'tors.kelas'
                    },
                    {
                        data: 'kodeprodi',
                        name: 'p.kode'
                    },
                    {
                        data: 'kodepbb1',
                        render: function(data, type, row) {
                            var html = '';
                            if (row.kodepbb1 != null) {
                                html = row.kodepbb1 + ' - ' + row.pbb1 + '<br>' + row.kodepbb2 + ' - ' +
                                    row
                                    .pbb2
                            }
                            return html
                        },
                        width: '25%',
                        class: 'text-small',
                        searchable: false
                    },
                    {
                        data: 'kodepbb1',
                        name: 'pbb1.kode'
                    },
                    {
                        data: 'kodepbb2',
                        name: 'pbb2.kode'
                    },
                    {
                        data: 'judul',
                        name: 'tors.judul',
                        width: '30%'
                    },
                    {
                        data: 'konfirmasi',
                        orderable: false,
                        searchable: false,
                        width: 'auto'
                    },
                    {
                        data: 'action',
                        className: 'dt-body-center',
                        orderable: false,
                        searchable: false
                    },
                ],
                columnDefs: [{
                    searchable: false,
                    sortable: false,
                    targets: [0],
                    width: '5%'
                }, {
                    className: 'dt-head-center',
                    targets: '_all'
                }, {
                    visible: false,
                    targets: [2, 3, 4, 6, 7]
                }]
            });

            $('#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