@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/nilai/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="prodi_id" name="prodi_id" 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 selectstatus">
                        <option value="" selected>-- Status --</option>
                        <option value="LULUS">LULUS</option>
                        <option value="TDK LULUS">TDK LULUS</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>Prodi</th> <!-- 3 -->
                        <th>Kelas</th> <!-- 4 -->
                        <th>Nilai</th> <!-- 5 -->
                        <th>Status</th> <!-- 6 -->
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <!-- /.card -->
    <!-- /.card -->
    <div class="modal fade" id="modal">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <form action="{{ url('/tor/nilai/update') }}" method="post">
                    @csrf
                    <input type="hidden" name="id" value="{{ old('id') }}">
                    <div class="modal-body text-left pb-0">
                        <h5 class="mb-3">Ubah nilai</h5>
                        <div class="form-group">
                            <input type="text" class="form-control input-nilai @error('nilai') is-invalid @enderror"
                                name="nilai" id="nilai" value="{{ old('nilai') }}" placeholder="Nilai">
                            @error('nilai')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <select id="status" name="status" class="form-control form-control-sm">
                                <option value="" selected>-- Status --</option>
                                <option value="LULUS" {{ old('status') == 'LULUS' ? 'selected' : '' }}>LULUS</option>
                                <option value="TDK LULUS" {{ old('status') == 'TDK LULUS' ? 'selected' : '' }}>TDK LULUS
                                </option>
                            </select>
                            @error('status')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                    </div>
                    <div class="modal-footer pt-0 border-0">
                        <a href="javascript:void(0)" class="btn mr-2" data-dismiss="modal">Kembali</a>
                        <button type="submit" class="btn btn-primary">Simpan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @error('nilai')
        <script>
            $(document).ready(function() {
                $('#modal').modal('show')
            })
        </script>
    @enderror
    <script>
        const role = "{{ auth()->user()->role }}"
        $(document).ready(function() {
            var options = {
                onComplete: function(cep) {
                    alert('CEP Completed!:' + cep);
                },
                onKeyPress: function(cep, event, currentField, options) {
                    console.log('A key was pressed!:', cep, ' event: ', event,
                        'currentField: ', currentField, ' options: ', options);
                },
                onChange: function(cep) {
                    console.log('cep changed! ', cep);
                },
                onInvalid: function(val, e, f, invalid, options) {
                    var error = invalid[0];
                    console.log("Digit: ", error.v, " is invalid for the position: ", error.p,
                        ". We expect something like: ", error.e);
                }
            };
            $('.input-nilai').mask("Z", {
                translation: {
                    'Z': {
                        pattern: /[0-9.]/,
                        recursive: true
                    }
                }
            });

            $('.input-nilai').keyup(function(e) {
                if (this.value > 4) {
                    e.preventDefault()
                    $(this).val('')
                    alert('Maksimal nilai 4.00')
                }
            });

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            listData();

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

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

            $('#dt-table').on('click', '.edit', function() {
                var id = $(this).data('id')
                var nilai = $(this).data('nilai')
                var status = $(this).data('status')
                $('#modal input[name="id"]').val(id)
                $('#modal input[name="nilai"]').val(nilai)
                $('#modal #status').val(status).change()
            });

        });

        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/nilai/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 status = $('.selectstatus').val()

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

                        window.location.href = url
                    }

                })
            }
            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/nilai/list') }}",
                    type: "POST",
                    data: {
                        periode: $('.selectperiode').val(),
                        prodi: $('.selectprodi').val(),
                        kelas: $('.selectkelas').val(),
                        status: $('.selectstatus').val(),
                    }
                },
                order: [
                    [1, 'asc']
                ],
                columns: [{
                        data: 'DT_RowIndex'
                    },
                    {
                        data: 'nim',
                        name: 'm.nim',
                    },
                    {
                        data: 'nama',
                        name: 'm.nama'
                    },
                    {
                        data: 'kodeprodi',
                        name: 'p.kode',
                        class: 'dt-body-center'
                    },
                    {
                        data: 'kelas',
                        name: 'tors.kelas',
                        class: 'dt-body-center'

                    },
                    {
                        data: 'nilai',
                        name: 'tors.nilai',
                        class: 'dt-body-center'

                    },
                    {
                        data: 'status',
                        name: 'tors.status',
                        class: 'dt-body-center'

                    },
                    {
                        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