@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="active"><i class="fa-solid fa-house"></i>Home</a></li>
    <li class="nav-item"><a href="{{ route('mahasiswa.penilaian') }}" class=""><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-2 mb-4">
        <div class="fw-bold">Data rencana pencapaian kerja</div>
        <div class="panel">
            <div class="panel-header">
                <div>Daftar jenis pekerjaan:</div>
                <button class="btn btn-sm btn-success btn-add-activity"><i class="fa-solid fa-circle-plus"></i>Tambah data</button>
            </div>
            <div class="panel-body">
                <table class="datatable-aktivitas table table-sm table-striped table-bordered" style="width:100%;"></table>
            </div>
        </div>
    </div>

    <div class="border content-2">
        <div class="fw-bold">Data mahasiswa bimbingan mitra</div>
        <div class="panel">
            <div class="panel-header">
                <div>Daftar mahasiswa yang dibimbing</div>
                <div class="d-flex">
                    <select class="form-control ths" style="display: none;"></select>
                    <button class="btn btn-sm btn-success btn-add-mahasiswa"><i class="fa-solid fa-circle-plus"></i>Tambah data</button>
                </div>
            </div>
            <div class="panel-body">
                <table class="datatable-mahasiswa table table-sm table-striped table-bordered" style="width:100%;"></table>
            </div>
        </div>
    </div>
@endsection

@section('css')
    <style>
        table.data thead th {
            text-align: center;
            font-weight: 300;
        }

        .data-mahasiswa td {
            text-align: center !important;
        }

        .btn-primary {
            background-color: #B4E7FB;
            border-color: #333;
            color: #4F4F4F;
            border-radius: 5px;
        }

        .overflow-elipsis {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .btn-add-mahasiswa {
            flex: 0 0 auto;
        }

        .ths {
            margin-right: 8px;
        }
    </style>
@endsection

@section('script')
    {{-- modal tambah rencana kerja --}}
    <div class="modal" tabindex="-1" id="modalAddRencana">
        <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-body">
                <div class="fw-bold">Buat data rencana kerja untuk mahasiswa</div>
                <div class="panel">
                    <div class="row mb-3">
                        <label class="col-md-5">1. Jenis pekerjaan:</label>
                        <div class="col-sm-7">
                            <input type="text" name="jenis_pekerjaan" placeholder="Masukkan jenis pekerjaan" class="form-control jenis_pekerjaan">
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label class="col-md-5">2. Target pencapaian:</label>
                        <div class="col-sm-7">
                            <input type="text" name="target" placeholder="Masukkan target pencapaian" class="form-control target_pencapaian">
                        </div>
                    </div>

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

                    <div class="row">
                        <div class="col-sm-6"></div>
                        <div class="col-sm-5 d-flex justify-content-between">
                            <button type="button" class="btn btn-sm btn-danger btn-cancel">Cancel</button>
                            <button type="button" class="btn btn-sm btn-success btn-save">Simpan</button>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>

    <!-- modal edit rencana -->
    <div class="modal" tabindex="-1" id="modalEditRencana">
        <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-body">
                <div class="fw-bold">Ubah data rencana kerja untuk mahasiswa</div>
                <div class="panel">
                <div class="row mb-3">
                        <label class="col-md-5">1. Jenis pekerjaan:</label>
                        <div class="col-sm-7">
                            <input type="text" name="jenis_pekerjaan" placeholder="Masukkan jenis pekerjaan" class="form-control jenis_pekerjaan">
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label class="col-md-5">2. Target pencapaian:</label>
                        <div class="col-sm-7">
                            <input type="text" name="target" placeholder="Masukkan target pencapaian" class="form-control target_pencapaian">
                        </div>
                    </div>

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

                    <div class="row">
                        <div class="col-sm-6"></div>
                        <div class="col-sm-5 d-flex justify-content-between">
                            <button type="button" class="btn btn-sm btn-danger btn-cancel">Cancel</button>
                            <button type="button" class="btn btn-sm btn-success btn-save">Simpan</button>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>

    {{-- modal pilih mahasiswa --}}
    <div class="modal" tabindex="-1" id="modalPilihMahasiswa">
        <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-body">
                <div class="fw-bold mb-3">Pilih mahasiswa bimbingan</div>
                <table class="table-mahasiswa table table-sm table-bordered">
                    <tr>
                        <th class="no">No</th>
                        <th class="name">Nama Mahasiswa</th>
                        <th class="nim">NIM</th>
                        <th class="check"><input class="toggle-all-mahasiswa" type="checkbox" /></th>
                    </tr>
                    <tr class="template" style="display: none;">
                        <td class="no">No</td>
                        <td class="name">Nama Mahasiswa</td>
                        <td class="nim">NIM</td>
                        <td class="check"><input type="checkbox" class="mahasiswa" /></td>
                    </tr>
                </table>

                <div class="text-end">
                    <button type="button" class="btn btn-sm btn-danger me-4" data-bs-dismiss="modal">Kembali</button>
                    <button type="button" class="btn btn-sm btn-success btn-simpan-bimbingan">Simpan</button>
                </div>
            </div>
            </div>
        </div>
    </div>

    {{-- modal laporan --}}
    <div class="modal" tabindex="-1" id="modalLaporan">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
            <div class="modal-body">
                <div>Laporan harian bimbingan - <span class="nama"></span> :</div>

                <table class="table-laporan table table-sm table-bordered mt-3">
                    <tr>
                        <th>No</th>
                        <th>Tanggal</th>
                        <th>Laporan Mahasiswa</th>
                        <th>Jenis Pekerjaan</th>
                    </tr>
                    <tr class="template" style="display: none;">
                        <td class="no"></td>
                        <td class="tanggal"></td>
                        <td class="kegiatan"></td>
                        <td class="aktivitas"></td>
                    </tr>
                </table>

                <div class="text-end">
                    <button type="button" class="btn btn-sm btn-danger" data-bs-dismiss="modal">Kembali</button>
                </div>
            </div>
            </div>
        </div>
    </div>

    <script src="{{ asset('js/moment.js') }}"></script>
    <script>
        async function getListThs() {
            let listThs = await $.ajax({
                url: "{{ route('mahasiswa.list_ths') }}"
            })
            listThs = listThs.status === "success" ? listThs.data.list_ths : null
            return listThs
        }

        function convertThs(ths) {
            if (!ths) {
                return '-'
            }

            const stringThs = String(ths)
            const year = stringThs.substr(0, 4);
            let semester = parseInt(stringThs.replace(year, ''))
            semester = semester % 2 === 0 ? 'Genap' : 'Ganjil'

            return `${year} ${semester}`
        }
    </script>
    <script>
        $(async function() {
            const modalAddRencana = new bootstrap.Modal($('#modalAddRencana'))
            const modalEditRencana = new bootstrap.Modal($('#modalEditRencana'))
            const modalPilihMahasiswa = new bootstrap.Modal($('#modalPilihMahasiswa'))
            const modalLaporan = new bootstrap.Modal($('#modalLaporan'))

            let selectedAktivitas = null

            const listThs = await getListThs()
            if (listThs && listThs.length > 0) {
                $('.ths').html('')
                for (const key in listThs) {
                    if (Object.hasOwnProperty.call(listThs, key)) {
                        const element = listThs[key];
                        
                        const option = $('<option>')
                        option.val(element)
                        option.text(convertThs(element))

                        if (key === 0) {
                            option.attr('selected', 'selected')
                        }

                        $('.ths').append(option)
                    }
                }
                $('.ths').show()
            }

            // datatable
            var datatableActivitas = $('.datatable-aktivitas').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": "{{ route('aktivitas.list') }}",
                "columns":[
                    {
                        "title": "No",
                        "data": null,
                        "orderable": false,
                        "searchable": false,
                        "render": function(data, type, row, meta) {
                            return parseInt(meta.row) + 1
                        }
                    },
                    {
                        "title": "Jenis Pekerjaan",
                        "data": "nama_aktivitas",
                    },
                    {
                        "title": "Target Pencapaian",
                        "data": "target_pencapaian",
                    },
                    {
                        "title": "Keterangan",
                        "data": "keterangan",
                    },
                    {
                        "title":"Action",
                        "orderable": false,
                        "searchable": false,
                        "render": function(data, type, row) {
                            let response = `<button class="btn btn-sm btn-edit-activity"><i class="fa-solid fa-pen-to-square"></i></button>`
                            response += `<button class="btn btn-sm btn-delete-activity"><i class="fa-solid fa-trash-can"></i></button>`
                            return response
                        }
                    },
                ],
                "order": [[ 1, "asc" ]],
                // "columnDefs": [
                //     { className: "overflow-elipsis", "targets": [1,2,3] }
                // ],
            });

            // show add activity popup
            $('.btn-add-activity').click(function() {
                const modalAddRencanaEl = $('#modalAddRencana')

                modalAddRencanaEl.find('.jenis_pekerjaan').val(''),
                modalAddRencanaEl.find('.target_pencapaian').val(''),
                modalAddRencanaEl.find('.keterangan').val('')

                modalAddRencana.show()
            })

            // on modal add activity save
            $('#modalAddRencana .btn-save').click(function() {
                const modalAddRencanaEl = $('#modalAddRencana')
                const params = {
                    _token: '{{ csrf_token() }}',
                    jenis_pekerjaan: modalAddRencanaEl.find('.jenis_pekerjaan').val(),
                    target_pencapaian: modalAddRencanaEl.find('.target_pencapaian').val(),
                    keterangan: modalAddRencanaEl.find('.keterangan').val()
                }

                $.ajax({
                    url: '{{ route("aktivitas.create") }}',
                    method: 'POST',
                    data: params,
                    success: function(response) {
                        const data = response
                        if (data.status === "success") {
                            swal.fire({
                                title: '',
                                icon: 'success',
                                text: data.message,
                                showConfirmButton: false
                            })
                            datatableActivitas.ajax.reload(null, false)
                            modalAddRencana.hide()
                        } else {
                            swal.fire({
                                title: '',
                                icon: 'warning',
                                text: data.message,
                                showConfirmButton: false
                            })
                        }
                    }
                })
            })
            
            // on click btn cancel
            $('#modalAddRencana .btn-cancel').click(function() {
                modalAddRencana.hide()
            })

            // show edit activity popup
            $('.datatable-aktivitas').on('click', '.btn-edit-activity', function() {
                const rowData = datatableActivitas.row( $(this).parents('tr') ).data();
                selectedAktivitas = rowData

                const modalEditRencanaEl = $('#modalEditRencana')

                modalEditRencanaEl.find('.jenis_pekerjaan').val(rowData.nama_aktivitas),
                modalEditRencanaEl.find('.target_pencapaian').val(rowData.target_pencapaian),
                modalEditRencanaEl.find('.keterangan').val(rowData.keterangan)

                modalEditRencana.show()
            })

            // delete activity
            $('.datatable-aktivitas').on('click', '.btn-delete-activity', function() {
                const rowData = datatableActivitas.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() }}',
                            aktivitas: rowData.id,
                        }

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

            // on modal add activity save
            $('#modalEditRencana .btn-save').click(function() {
                const modalEditRencanaEl = $('#modalEditRencana')
                const params = {
                    _token: '{{ csrf_token() }}',
                    aktivitas: selectedAktivitas.id,
                    jenis_pekerjaan: modalEditRencanaEl.find('.jenis_pekerjaan').val(),
                    target_pencapaian: modalEditRencanaEl.find('.target_pencapaian').val(),
                    keterangan: modalEditRencanaEl.find('.keterangan').val()
                }

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

            // on click btn cancel
            $('#modalEditRencana .btn-cancel').click(function() {
                modalEditRencana.hide()
            })

            // show modalPilihMahasiswa modal
            $('body').on('click', '.btn-add-mahasiswa', function() {
                // on modal pilih mahasiswa show
                $.ajax({
                    url: '{{ route("mahasiswa.list_mitra_mahasiswa") }}?ths=' + $('.ths').val(),
                    success: function(response) {
                        if (response.status === "success") {
                            const data = response.data

                            // put to table
                            const modalPilihMahasiswaEl = $('#modalPilihMahasiswa');

                            // cleanup row
                            modalPilihMahasiswaEl.find('.mahasiswa-row').remove();
                            
                            // clone data
                            for (const key in data) {
                                if (Object.hasOwnProperty.call(data, key)) {
                                    const element = data[key];
                                    
                                    const row = modalPilihMahasiswaEl.find('.template').clone()
                                    row.addClass('mahasiswa-row').removeClass('template').show()
                                    row.find('.no').text(parseInt(key) + 1)
                                    row.find('.name').text(element.mahasiswa.nama_mahasiswa)
                                    row.find('.nim').text(element.mahasiswa.nim)
                                    row.find('.check .mahasiswa').val(element.id)
                                    if (element.bimbingan) {
                                        row.find('.check .mahasiswa').attr('checked', 'checked')   
                                    } else {
                                        row.find('.check .mahasiswa').removeAttr('checked')  
                                    }
                                    
                                    modalPilihMahasiswaEl.find('.table-mahasiswa').append(row)
                                }
                            }

                            modalPilihMahasiswa.show()
                        } else {
                            swal.fire({
                                title: '',
                                icon: 'warning',
                                text: response.message,
                                showConfirmButton: false
                            })
                        }
                    }
                })
            })

            // datatable mahasiswa
            var datatableMahasiswa = $('.datatable-mahasiswa').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": {
                    'url': "{{ route('mahasiswa.list') }}",
                    'data': function(query) {
                        query.ths = $('.ths').val()
                    },
                },
                "columns":[
                    {
                        "title": "No",
                        "data": null,
                        "orderable": false,
                        "searchable": false,
                        "render": function(data, type, row, meta) {
                            return parseInt(meta.row) + 1
                        }
                    },
                    {
                        "title": "Nama",
                        "data": "mahasiswa.nama_mahasiswa",
                    },
                    {
                        "title": "NIM",
                        "data": "mahasiswa.nim",
                    },
                    {
                        "title": "Tanggal dimulai bimbingan	",
                        "data": "created_at",
                        "render": function(data) {
                            if (typeof data === 'undefined' || data === null) {
                                return '-'
                            }

                            return moment(data).format('dddd, DD MMM YYYY');
                        }
                    },
                    {
                        "title":"Action",
                        "orderable": false,
                        "searchable": false,
                        "render": function(data, type, row) {
                            let response = `<button class="btn btn-sm btn-primary btn-check-laporan">Check</button>`
                            return response
                        }
                    },
                ],
                "order": [[ 3, "desc" ]],
                // "columnDefs": [
                //     { className: "overflow-elipsis", "targets": [1,2,3] }
                // ],
            });

            // on click btn simpan bimbingan
            $('#modalPilihMahasiswa .btn-simpan-bimbingan').click(function() {
                const checkedMahasiswaEl = $('#modalPilihMahasiswa .table-mahasiswa .mahasiswa:checked')
                const checkedMahasiswa = []
                $.each(checkedMahasiswaEl, function(index, el) {
                    checkedMahasiswa.push($(el).val())
                })

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

            // on click toggle all mahasiswa
            $('#modalPilihMahasiswa .toggle-all-mahasiswa').click(function() {
                const checkedMahasiswaEl = $('#modalPilihMahasiswa .table-mahasiswa .mahasiswa:checked')
                const mahasiswaEl = $('#modalPilihMahasiswa .table-mahasiswa .mahasiswa')
                if (checkedMahasiswaEl.length < mahasiswaEl.length) {
                    $.each(mahasiswaEl, function(index, el) {
                        $(el).attr('checked', 'checked')
                    })
                } else {
                    $.each(mahasiswaEl, function(index, el) {
                        $(el).removeAttr('checked')
                    })
                }
            })

            // show modal laporan
            $('.datatable-mahasiswa').on('click', '.btn-check-laporan', function() {
                const rowData = datatableMahasiswa.row( $(this).parents('tr') ).data();
                let url = '{{ route("mahasiswa.list_laporan", ["id_mahasiswa" => "#"]) }}'
                url = url.replace('#', rowData.mahasiswa.id)

                $.ajax({
                    url: url,
                    success: function(response) {
                        if (response.status === "success") {
                            const data = response.data

                            // put to table
                            const modalLaporanEl = $('#modalLaporan');
                            modalLaporanEl.find('.nama').text(rowData.mahasiswa.nama_mahasiswa)

                            // cleanup row
                            modalLaporanEl.find('.laporan-row').remove();
                            
                            // clone data
                            for (const key in data) {
                                if (Object.hasOwnProperty.call(data, key)) {
                                    const element = data[key];

                                    let tanggal = typeof element.created_at === 'undefined' || element.created_at === null ? '-' : moment(element.created_at).format('DD/MM/YY')
                                    
                                    const row = modalLaporanEl.find('.template').clone()
                                    row.addClass('laporan-row').removeClass('template').show()
                                    row.find('.no').text(parseInt(key) + 1)
                                    row.find('.tanggal').text(tanggal)
                                    row.find('.kegiatan').text(element.kegiatan)
                                    row.find('.aktivitas').text(element.activitas.nama_aktivitas)
                                    
                                    modalLaporanEl.find('.table-laporan').append(row)
                                }
                            }

                            modalLaporan.show()
                        } else {
                            swal.fire({
                                title: '',
                                icon: 'warning',
                                text: response.message,
                                showConfirmButton: false
                            })
                        }
                    }
                })
            })

            // on ths changed
            $('.ths').change(function() {
                console.log($(this).val())
                datatableMahasiswa.ajax.reload(null, false)
            })
        })
    </script>
@endsection