@extends('layouts.app')

@section("user-image")
    <img src="{{ $user->gambar_profile_url }}" onerror="this.src = `{{ asset('images/hipp.jpeg') }}`" alt="profile" />
@endsection

@section("user")
    <div class="user-name">{{ $user->name }}</div>
    <div class="user-level">{{ $user->role_name }}</div>
@endsection

@section('menu')
    <li class="nav-item"><a href="{{ route('home') }}" class=""><i class="fa-solid fa-house"></i>Home</a></li>
    <li class="nav-item"><a href="{{ route('mahasiswa.penilaian') }}" class="active"><i class="fa-solid fa-circle-info"></i>Penilaian Mahasiswa</a></li>
    <li class="nav-item"><a href="{{ route('pengaturan.index') }}"><i class="fa-solid fa-gear"></i>Pengaturan</a></li>
    <li class="nav-item"><a href="{{ route('logout') }}" onclick="event.preventDefault();document.getElementById('logout-form').submit();"><i class="fa-solid fa-power-off"></i>Keluar</a></li>

    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
        @csrf
    </form>
@endsection

@section('body')
    <div class="border content">
        <div class="fw-bold">Data Mahasiswa bimbingan mitra</div>
        <div class="panel">
            <div class="panel-header">
                <div>Daftar mahasiswa yang sudah dinilai:</div>
                <button class="btn btn-sm btn-success btn-add-penilaian"><i class="fa-solid fa-circle-plus"></i>Tambah data</button>
            </div>
            <div class="panel-body">
                <table class="datatable-penilaian table table-sm table-striped table-bordered" style="width:100%;"></table>
            </div>
        </div>
    </div>

@endsection

@section('script')
    {{-- modal tambah data --}}
    <div class="modal" tabindex="-1" id="modalAdd">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="fw-bold text-center modal-title mb-4 pb-2">Masukkan nilai mahasiswa:</div>
                    <form action="">
                        <div class="row mb-3">
                            <label class="col-md-6">1. Pilih nama mahasiswa:</label>
                            <div class="col-sm-6">
                                <select name="nama" class="form-select nama-mahasiswa"></select>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label class="col-md-6">2. Pilih jenis pekerjaan:</label>
                            <div class="col-sm-6">
                                <select name="jenis_pekerjaan" class="form-select aktivitas"></select>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label class="col-md-6">3. Keterangan:</label>
                            <div class="col-sm-6">
                                <textarea name="keterangan" placeholder="Masukkan keterangan" class="form-control keterangan"></textarea>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label class="col-md-6">4. Masukkan nilai 1-100:</label>
                            <div class="col-sm-6">
                                <input type="number" min="0" max="100" placeholder="Masukkan nilai" class="form-control nilai" name="nilai" />
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-6"></div>
                            <div class="col-sm-6 d-flex justify-content-between">
                                <button type="button" class="btn btn-sm btn-danger" data-bs-dismiss="modal">Cancel</button>
                                <button type="button" class="btn btn-sm btn-success btn-add-simpan-penilain">Simpan</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- modal edit --}}
    <div class="modal" tabindex="-1" id="modalEdit">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="fw-bold text-center modal-title mb-4 pb-2">Masukkan nilai mahasiswa:</div>
                    <form action="">
                        <div class="row mb-3">
                            <label class="col-md-6">1. Nama mahasiswa:</label>
                            <div class="col-sm-6"><span class="nama-mahasiswa"></span></div>
                        </div>

                        <div class="row mb-3">
                            <label class="col-md-6">2. Pilih jenis pekerjaan:</label>
                            <div class="col-sm-6">
                                <select name="jenis_pekerjaan" class="form-select aktivitas"></select>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label class="col-md-6">3. Keterangan:</label>
                            <div class="col-sm-6">
                                <textarea name="keterangan" placeholder="Masukkan keterangan" class="form-control keterangan"></textarea>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label class="col-md-6">4. Masukkan nilai 1-100:</label>
                            <div class="col-sm-6">
                                <input type="number" min="0" max="100" placeholder="Masukkan nilai" class="form-control nilai" name="nilai" />
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-6"></div>
                            <div class="col-sm-6 d-flex justify-content-between">
                                <button type="button" class="btn btn-sm btn-danger" data-bs-dismiss="modal">Cancel</button>
                                <button type="button" class="btn btn-sm btn-success btn-edit-simpan-penilain">Simpan</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(function() {
            const modalAdd = new bootstrap.Modal($('#modalAdd'))
            const modalEdit = new bootstrap.Modal($('#modalEdit'))

            let selectedPenilaian = null

            // fix bootstrap modal and select2 issue
            $.fn.modal.Constructor.prototype.enforceFocus = function() {};

            // datatable
            var datatablePenilaian = $('.datatable-penilaian').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": "{{ route('mahasiswa.list_penilaian') }}",
                "columns":[
                    {
                        "title": "No",
                        "data": null,
                        "orderable": false,
                        "searchable": false,
                        "render": function(data, type, row, meta) {
                            return parseInt(meta.row) + 1
                        }
                    },
                    {
                        "title": "Nama",
                        "data": "bimbingan.mahasiswa.nama_mahasiswa",
                    },
                    {
                        "title": "NIM",
                        "data": "bimbingan.mahasiswa.nim",
                    },
                    {
                        "title": "Jenis Pekerjaan",
                        "data": "aktivitas.nama_aktivitas",
                    },
                    {
                        "title": "Keterangan",
                        "data": "keterangan",
                    },
                    {
                        "title": "Nilai",
                        "data": "nilai",
                    },
                    {
                        "title":"Action",
                        "width": "75px",
                        "orderable": false,
                        "searchable": false,
                        "render": function(data, type, row) {
                            let response = `<button class="btn btn-sm btn-edit-penilaian"><i class="fa-solid fa-pen-to-square"></i></button>`
                            response += `<button class="btn btn-sm btn-delete-penilaian"><i class="fa-solid fa-trash-can"></i></button>`
                            return response
                        }
                    },
                ],
                "order": [[ 1, "asc" ]],
                // "columnDefs": [
                //     { className: "overflow-elipsis", "targets": [1,2,3] }
                // ],
            });

            // show tambah penilaian
            $('.btn-add-penilaian').click(function() {
                const modalAddEl = $('#modalAdd')
                modalAddEl.find('.nama-mahasiswa').val('')
                modalAddEl.find('.aktivitas').val('')
                modalAddEl.find('.keterangan').val('')
                modalAddEl.find('.nilai').val('')

                modalAdd.show()

                // select2 for nama mahasiswa
                modalAddEl.find('.nama-mahasiswa').select2({
                    dropdownParent: $('#modalAdd'),
                    ajax: {
                        url: '{{ route("mahasiswa.list_dropdown") }}',
                        dataType: 'json',
                        data: function (params) {
                            var query = {
                                search: params.term,
                            }
                            return query;
                        },
                        processResults: function (data) {
                            const response = data.data
                            const result = response.map(function(item) {
                                return {
                                    id: item.id,
                                    text: item.mahasiswa.nama_mahasiswa,
                                    ...item
                                }
                            })

                            return {
                                results: result
                            };
                        }
                    },
                })

                // select2 for aktivitas
                modalAddEl.find('.aktivitas').select2({
                    dropdownParent: $('#modalAdd'),
                    ajax: {
                        url: '{{ route("aktivitas.list_dropdown") }}',
                        dataType: 'json',
                        data: function (params) {
                            var query = {
                                search: params.term,
                            }
                            return query;
                        },
                        processResults: function (data) {
                            const response = data.data
                            const result = response.map(function(item) {
                                return {
                                    id: item.id,
                                    text: item.nama_aktivitas,
                                    ...item
                                }
                            })

                            return {
                                results: result
                            };
                        }
                    },
                })
            })

            // remove select2 on modal hide
            $("#modalAdd").on("hidden.bs.modal", function () {
                $('#modalAdd .nama-mahasiswa').select2('destroy')
                $('#modalAdd .aktivitas').select2('destroy')
            });

            // simpan penilaian
            $('#modalAdd .btn-add-simpan-penilain').click(function() {
                const modalAddEl = $("#modalAdd")

                const params = {
                    _token: '{{ csrf_token() }}',
                    mahasiswa: modalAddEl.find('.nama-mahasiswa').val(),
                    aktivitas: modalAddEl.find('.aktivitas').val(),
                    keterangan: modalAddEl.find('.keterangan').val(),
                    nilai: modalAddEl.find('.nilai').val(),
                }

                $.ajax({
                    url: '{{ route("mahasiswa.create_penilaian") }}',
                    method: 'POST',
                    data: params,
                    success: function(response) {
                        const data = response
                        if (data.status === "success") {
                            swal.fire({
                                title: '',
                                icon: 'success',
                                text: data.message,
                                showConfirmButton: false
                            })
                            modalAdd.hide()
                            datatablePenilaian.ajax.reload(null, false)
                        } else {
                            swal.fire({
                                title: '',
                                icon: 'warning',
                                text: data.message,
                                showConfirmButton: false
                            })
                        }
                    }
                })
            })

            // show edit penilaian
            $('.datatable-penilaian').on('click', '.btn-edit-penilaian', function() {
                const rowData = datatablePenilaian.row( $(this).parents('tr') ).data();

                selectedPenilaian = rowData

                const modalEditEl = $('#modalEdit')
                modalEdit.show()

                // default option
                const option = $('<option>')
                option.text(rowData.aktivitas.nama_aktivitas)
                option.val(rowData.aktivitas.id)

                // empty aktivitas and append default option
                modalEditEl.find('.aktivitas').html('')
                modalEditEl.find('.aktivitas').append(option)

                // select2 for aktivitas
                modalEditEl.find('.aktivitas').select2({
                    dropdownParent: $('#modalEdit'),
                    ajax: {
                        url: '{{ route("aktivitas.list_dropdown") }}',
                        dataType: 'json',
                        data: function (params) {
                            var query = {
                                search: params.term,
                            }
                            return query;
                        },
                        processResults: function (data) {
                            const response = data.data
                            const result = response.map(function(item) {
                                return {
                                    id: item.id,
                                    text: item.nama_aktivitas,
                                    ...item
                                }
                            })

                            return {
                                results: result
                            };
                        }
                    },
                })

                // set data
                modalEditEl.find('.nama-mahasiswa').text(rowData.bimbingan.mahasiswa.nama_mahasiswa)
                modalEditEl.find('.aktivitas').val(rowData.aktivitas.id)
                modalEditEl.find('.keterangan').val(rowData.keterangan)
                modalEditEl.find('.nilai').val(rowData.nilai)
            })

            // remove select2 on modal hide
            $("#modalEdit").on("hidden.bs.modal", function () {
                $('#modalEdit .aktivitas').select2('destroy')
            });

            // simpan penilaian
            $('#modalEdit .btn-edit-simpan-penilain').click(function() {
                const modalEditEl = $("#modalEdit")

                const params = {
                    _token: '{{ csrf_token() }}',
                    penilaian: selectedPenilaian.id,
                    aktivitas: modalEditEl.find('.aktivitas').val(),
                    keterangan: modalEditEl.find('.keterangan').val(),
                    nilai: modalEditEl.find('.nilai').val(),
                }

                $.ajax({
                    url: '{{ route("mahasiswa.update_penilaian") }}',
                    method: 'POST',
                    data: params,
                    success: function(response) {
                        const data = response
                        if (data.status === "success") {
                            swal.fire({
                                title: '',
                                icon: 'success',
                                text: data.message,
                                showConfirmButton: false
                            })
                            modalEdit.hide()
                            datatablePenilaian.ajax.reload(null, false)
                        } else {
                            swal.fire({
                                title: '',
                                icon: 'warning',
                                text: data.message,
                                showConfirmButton: false
                            })
                        }
                    }
                })
            })

            // delete penilaian
            // mahasiswa.delete_penilaian
            $('.datatable-penilaian').on('click', '.btn-delete-penilaian', function() {
                const rowData = datatablePenilaian.row( $(this).parents('tr') ).data();

                swal.fire({
                    title: '',
                    icon: 'success',
                    text: 'Yakin data akan dihapus?',
                    showCancelButton: true,
                    confirmButtonText: 'Hapus',
                    reverseButtons: true
                }).then(function(result) {
                    if (result.isConfirmed) {
                        const params = {
                            _token: '{{ csrf_token() }}',
                            penilaian: rowData.id,
                        }

                        $.ajax({
                            url: '{{ route("mahasiswa.delete_penilaian") }}',
                            method: 'POST',
                            data: params,
                            success: function(response) {
                                const data = response
                                if (data.status === "success") {
                                    swal.fire({
                                        title: '',
                                        icon: 'success',
                                        text: data.message,
                                        showConfirmButton: false
                                    })
                                    datatablePenilaian.ajax.reload(null, false)
                                } else {
                                    swal.fire({
                                        title: '',
                                        icon: 'warning',
                                        text: data.message,
                                        showConfirmButton: false
                                    })
                                }
                            }
                        })
                    }
                })
            })
        })


        $(document).ready(function () {
            $('table.data').DataTable();
        });

        modalAdd = new bootstrap.Modal(document.getElementById('modalAdd'))
        modalEdit = new bootstrap.Modal(document.getElementById('modalEdit'))
        function tambahData() {
            modalAdd.show()
        }

        function simpan() {
            swal.fire({
                title: '',
                icon: 'question',
                text: 'apakah anda yakin untuk simpan data? Penilaian hanya bisa dilakukan sekali berdasarkan jenis pekerjaan!',
                showCancelButton: true,
                confirmButtonText: 'simpan',
                reverseButtons: true
            }).then(function(result) {
                if (result.isConfirmed) {
                    modalAdd.hide()
                    swal.fire({
                        icon: 'success',
                        text: 'Data berhasil disimpan',
                        showConfirmButton: false
                    })
                }
            })
        }

        function hapus() {
            swal.fire({
                title: '',
                icon: 'success',
                text: 'Yakin data akan dihapus?',
                showCancelButton: true,
                confirmButtonText: 'Hapus',
                reverseButtons: true
            }).then(function(result) {
                if (result.isConfirmed) {
                    swal.fire({
                        icon: 'success',
                        text: 'Data berhasil dihapus',
                        showConfirmButton: false
                    })
                }
            })
        }

        function edit() {
            modalEdit.show()
        }

        function update() {
            swal.fire({
                icon: 'success',
                text: 'Data berhasil disimpan',
                showConfirmButton: false
            })
            modalEdit.hide()
        }
        
    </script>
@endsection