@extends('layout.master')
@section('parentPageTitle', 'Proposal')
@section('title', 'Pengajuan Proposal')
<style>
    .text-warning {
        color: red;
    }
</style>
@section('content')
    <div class="section-body mt-3">
        <div class="container-fluid">
            <div class="card">
                <div class="card-body">
                    <h6>Buat Pengajuan Proposal Kolaborasi Peneltian Internasional</h6>
                    <form method="post" action="{{ route('proposalhibah.storeJoinRiset') }}" enctype="multipart/form-data">
                        @csrf
                        @if (Session::has('alert'))
                            <div class="alert alert-danger">
                                <div><button type="button" class="close" data-dismiss="alert"></button> &nbsp;&nbsp;
                                    {{ Session::get('alert') }}</div>
                            </div>
                        @endif
                        <div class="form-group row">
                            <label for="judul" class="col-sm-6 col-form-label"><b>Judul Proposal <span class="required"
                                        style="color: red;"> *</span></b></label>
                            <div class="col-sm-12">
                                <textarea class="form-control" id="judul" name="judul" placeholder="Tuliskan judul proposal disini" rows="2"
                                    cols="10" required></textarea>
                            </div>
                        </div>

                        <div class="row anggota-dosen-internal">
                            <div class="col-lg-6 col-md-6 col-sm-6">
                                <div class="form-group">
                                    <label for="team"><b>Pilih Anggota Dosen Internal</b>
                                        <span>
                                            <a class="clickable-icon text-warning" onclick="showSweetAlert()">
                                                <i class="fa-solid fa-magnifying-glass"></i>
                                            </a>
                                        </span>
                                    </label>
                                    <select class="selectpicker form-control" name="team[]" id="team" multiple
                                        data-selected-text-format="count > 15" data-max-options="15"
                                        data-live-search="true">
                                        @foreach ($dosen as $d)
                                            <option value="{{ $d['nidn'] }}">{{ $d['nama_dosen'] }} | <span
                                                    class="text-danger">{{ $d['kode_fakultas'] }}</span></option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6">
                                <div class="form-group">
                                    <label for="team"><b>Anggota Dosen Dipilih</b></label>
                                    <div id="selectedDosen" class="row"></div>
                                    <!-- Tempat menampilkan dosen yang dipilih -->
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-12 col-md-6 col-sm-12">
                            <div class="form-group row">
                                <label for="team"><b>Pilih Anggota Dosen Luar (Min. 1)</b> <button
                                        class="btn btn-primary" id="btnAdd3" type="button" onclick="insRowOther('dosen')"
                                        title="Tambah Dosen Luar"><i class="fa fa-plus"></i></button></label>
                                <div class="col-sm-12">
                                    <div class="table-responsive">
                                        <table class="table table-striped" id="tabledosen">
                                            <thead>
                                                <tr>
                                                    <th width="20%"><b>NIDN</b></th>
                                                    <th width="30%"><b>Nama</b></th>
                                                    <th width="45%"><b>Universitas</b></th>
                                                    <th width="5%"><b>Action</b></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <input type="text" placeholder="NIDN 10 karakter" id="nidn"
                                                            maxlength="10" class="form-control tipenumber"
                                                            name="other[nomor][]">
                                                    </td>
                                                    <td>
                                                        <input type="text" placeholder="Nama Dosen" id="nama"
                                                            class="form-control" name="other[nama][]">
                                                    </td>
                                                    <td>
                                                        <input type="text" placeholder="Universitas" id="univ"
                                                            class="form-control" name="other[univ][]">
                                                    </td>
                                                    <td>
                                                        <button type="button" data-type="dosen"
                                                            class="btn btn-danger btnremove" title="Hapus baris ini"
                                                            onclick="deleteRowOther(this);" style="display:none;"><i
                                                                class="fa fa-close"></i></button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @if ($ispengmas == 1)
                            <div class="col-lg-12 col-md-6 col-sm-12">
                                <div class="form-group row">
                                    <label for="team"><b>Pilih Anggota Tendik (Min. 1)</b> <button
                                            class="btn btn-primary" id="btnAdd" type="button" onclick="insRowTendik()"
                                            title="Tambah Tendik"><i class="fa fa-plus"></i></button></label>
                                    <div class="col-sm-12">
                                        <div class="table-responsive">
                                            <table class="table table-striped" id="tabletendik">
                                                <thead>
                                                    <tr>
                                                        <th width="20%"><b>NIP</b></th>
                                                        <th><b>Nama</b></th>
                                                        <th><b>Action</b></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            <input type="text" placeholder="NIP 10 karakter"
                                                                maxlength="10" id="nip"
                                                                class="form-control tipenumber" name="tendik[nip][]">
                                                        </td>
                                                        <td>
                                                            <input type="text" placeholder="Nama" id="nama"
                                                                class="form-control" name="tendik[nama][]">
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-danger btnremove"
                                                                title="Hapus baris ini" id="btnRemove"
                                                                onclick="deleteRowTendik(this);" style="display:none;"><i
                                                                    class="fa fa-close"></i></button>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @else
                            <div class="col-lg-12 col-md-6 col-sm-12">
                                <div class="form-group row">
                                    <label for="team"><b>Pilih Anggota Mahasiswa (Min. 1)</b> <button
                                            class="btn btn-primary" id="btnAdd" type="button" onclick="insRow()"
                                            title="Tambah Mahasiswa"><i class="fa fa-plus"></i></button></label>
                                    <div class="col-sm-12">
                                        <div class="table-responsive">
                                            <table class="table table-striped" id="tablemahasiswa">
                                                <thead>
                                                    <tr>
                                                        <th width="20%"><b>NIM</b></th>
                                                        <th><b>Nama Mahasiswa</b></th>
                                                        <th><b>Action</b></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            <input type="text" placeholder="NIM Max 15 karakter"
                                                                maxlength="15" id="nim"
                                                                class="form-control tipenumber" name="mahasiswa[nim][]">
                                                        </td>
                                                        <td>
                                                            <input type="text" placeholder="Nama Mahasiswa"
                                                                id="nim" class="form-control"
                                                                name="mahasiswa[nama_mahasiswa][]">
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-danger btnremove"
                                                                title="Hapus baris ini" id="btnRemove"
                                                                onclick="deleteRow(this);" style="display:none;"><i
                                                                    class="fa fa-close"></i></button>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                        <div class="form-group row">
                            <label for="nama_unit" class="col-sm-6 col-form-label"><b>Topik Unggulan</b></label>
                            <div class="col-sm-12">
                                <select required class="form-control" id="renstra" name="renstra">
                                    <option value="">-- Pilih Topik Unggulan --</option>
                                    @foreach ($renstra as $r)
                                        <option value="{{ $r->renstra_id }}">{{ $r->rencana_strategi }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="nama_unit" class="col-sm-6 col-form-label"><b>Sub Topik Unggulan</b></label>
                            <div class="col-sm-12">
                                <select required class="form-control" id="subrenstra" name="subrenstra">
                                    <option value="">-- Pilih Sub Topik Unggulan --</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-12 col-md-6 col-sm-12">
                            <div class="form-group">
                                <label for="all_bidang"><b>Bidang Ilmu</b></label>
                                <select class="selectpicker form-control pr-50" id="bid_ilmu" name="bidang_ilmu[]"
                                    multiple data-selected-text-format="count > 3" data-live-search="true">
                                    @foreach ($grouped as $key => $value)
                                        <optgroup label="{{ $key }}" id="{{ $key }}">
                                            @foreach ($grouped[$key] as $data => $value)
                                                <option value="{{ $value[1] }}">{{ $value[0] }}</option>
                                            @endforeach
                                        </optgroup>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <input type="hidden" value="{{ $hibah_id }}" name="hibah_id">
                        <div class="form-group row">
                            <label for="no_sk" class="col-sm-6 col-form-label"><b>Unggah Proposal</b></label>
                            <div class="col-sm-12">
                                <input type="file" class="form-control" id="proposal" name="proposal"
                                    placeholder="Unggah Proposal dalam bentuk Word(doc/docx)">
                            </div>
                            <ul>
                                <li>
                                    <p>Format file untuk diunggah adalah ekstensi *.docx <i
                                            class="fa fa-2x fa-file-word-o"></i></p>
                                </li>
                                <li>
                                    <p>Ukuran maksimal file adalah 5MB</p>
                                </li>
                            </ul>
                        </div>

                        @if ($ispengmas == 1)
                            <div class="form-group row">
                                <label for="mitra_hibah" class="col-sm-6 col-form-label"><b>Mitra Pengabdian
                                        Masyarakat</b></label>
                                <div class="col-sm-12">
                                    <input type="text" class="form-control" id="mitra_hibah" name="mitra_hibah"
                                        placeholder="Mitra Pengabdian Masyarakat">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="lokasi_abdimas" class="col-sm-6 col-form-label"><b>Lokasi Pengabdian
                                        Masyarakat</b></label>
                                <div class="col-sm-12">

                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-4 col-sm-12">
                                    <div class="form-group">
                                        <label for="provinsi" class="col-sm-12 col-form-label">Provinsi</label>
                                        <select name="provinsi" class="form-control" id="provinsi">
                                            <option value="">--- Pilih Provinsi ---</option>
                                            @foreach ($provinsi as $prov)
                                                <option value="{{ $prov['id'] }}">{{ $prov['name'] }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-12">
                                    <div class="form-group">
                                        <label for="kabupaten_kota" class="col-sm-12 col-form-label">Kabupaten /
                                            Kota</label>
                                        <select name="kabupaten_kota" class="form-control" id="kabupaten_kota">
                                            <option value="">--- Pilih Provinsi terlebih dahulu ---</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-4 col-sm-12">
                                    <div class="form-group">
                                        <label for="kecamatan" class="col-sm-12 col-form-label">Kecamatan</label>
                                        <select name="kecamatan" class="form-control" id="kecamatan">
                                            <option value="">--- Pilih Kabupaten Kota terlebih dahulu ---</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-12">
                                    <div class="form-group">
                                        <label for="desa" class="col-sm-12 col-form-label">Desa / Kelurahan</label>
                                        <select name="desa" class="form-control" id="desa">
                                            <option value="">--- Pilih Kecamatan terlebih dahulu ---</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <div class="form-group row">
                            <label for="lama_dana" class="col-sm-4 col-form-label"><b>Simpan dengan Status</b></label>
                            <div class="col-sm-6">
                                <div class="custom-control custom-radio custom-control-inline">
                                    <input type="radio" id="status_proposal_1" value="Draf" name="status_proposal"
                                        class="custom-control-input status">
                                    <label class="custom-control-label" for="status_proposal_1">Draf</label>
                                </div>
                                <div class="custom-control custom-radio custom-control-inline">
                                    <input type="radio" id="status_proposal_2" checked value="Menunggu Persetujuan"
                                        name="status_proposal" class="custom-control-input status">
                                    <label class="custom-control-label" for="status_proposal_2">Ajukan</label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-sm-10">
                                <button type="submit" class="btn btn-primary">Simpan Data</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@stop

@section('page-styles')
    <link rel="stylesheet" href="{{ asset('assets/plugins/sweetalert/sweetalert.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/plugins/bootstrap-select/css/bootstrap-select.min.css') }}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .clickable-icon {
            cursor: pointer;
        }
    </style>

@stop

@section('page-script')
    <script src="{{ asset('assets/plugins/sweetalert/sweetalert.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('assets/js/core.js') }}"></script>
    <script src="{{ asset('assets/js/page/dialogs.js') }}"></script>
    <script src="{{ asset('assets/plugins/bootstrap-select/js/bootstrap-select.min.js') }}"></script>
    <script>
        function deleteRow(row) {
            var i = row.parentNode.parentNode.rowIndex;
            document.getElementById('tablemahasiswa').deleteRow(i);
        }

        function deleteRowTendik(row) {
            var i = row.parentNode.parentNode.rowIndex;
            document.getElementById('tabletendik').deleteRow(i);
        }

        function deleteRowOther(row) {
            var i = row.parentNode.parentNode.rowIndex;
            document.getElementById('tabledosen').deleteRow(i);
        }

        function insRow() {
            // console.log('hi');
            var x = document.getElementById('tablemahasiswa');
            var new_row = x.rows[1].cloneNode(true);
            var len = x.rows.length;
            var ispengmas = $('#ispengmas').val();
            if (ispengmas == 1) {
                if (len <= 3) {
                    var inp1 = new_row.cells[0].getElementsByTagName('input')[0];
                    inp1.id += len;
                    inp1.value = '';
                    var inp2 = new_row.cells[1].getElementsByTagName('input')[0];
                    inp2.id += len;
                    inp2.value = '';
                    var inp3 = new_row.cells[3].getElementsByTagName('button')[0];
                    inp3.id += len;
                    inp3.style.display = 'block';

                    x.appendChild(new_row);
                }
            } else {
                if (len <= 2) {
                    var inp1 = new_row.cells[0].getElementsByTagName('input')[0];
                    inp1.id += len;
                    inp1.value = '';
                    var inp2 = new_row.cells[1].getElementsByTagName('input')[0];
                    inp2.id += len;
                    inp2.value = '';
                    var inp3 = new_row.cells[2].getElementsByTagName('button')[0];
                    inp3.id += len;
                    inp3.style.display = 'block';

                    x.appendChild(new_row);
                }
            }
            // new_row.cells[0].innerHTML = len;
        }

        function insRowTendik() {
            var x = document.getElementById('tabletendik');
            var new_row = x.rows[1].cloneNode(true);
            var len = x.rows.length;
            var ispengmas = $('#ispengmas').val();
            if (len <= 2) {
                var inp1 = new_row.cells[0].getElementsByTagName('input')[0];
                inp1.id += len;
                inp1.value = '';
                var inp2 = new_row.cells[1].getElementsByTagName('input')[0];
                inp2.id += len;
                inp2.value = '';
                var inp3 = new_row.cells[2].getElementsByTagName('button')[0];
                inp3.id += len;
                inp3.style.display = 'block';

                x.appendChild(new_row);
            }
            // new_row.cells[0].innerHTML = len;
        }

        function insRowOther() {
            // console.log('hi');
            var x = document.getElementById('tabledosen');
            var new_row = x.rows[1].cloneNode(true);
            var len = x.rows.length;
            var ispengmas = $('#ispengmas').val();
            if (len <= 2) {
                var inp1 = new_row.cells[0].getElementsByTagName('input')[0];
                inp1.id += len;
                inp1.value = '';
                var inp2 = new_row.cells[1].getElementsByTagName('input')[0];
                inp2.id += len;
                inp2.value = '';
                var inp3 = new_row.cells[2].getElementsByTagName('input')[0];
                inp3.id += len;
                inp3.value = '';
                var inp4 = new_row.cells[3].getElementsByTagName('button')[0];
                inp4.id += len;
                inp4.style.display = 'block';

                x.appendChild(new_row);
            }
            // new_row.cells[0].innerHTML = len;
        }

        $(function() {
            "use strict";

            var date = new Date();
            date.setDate(date.getDate());

            $('.datepickers').datepicker({
                format: "dd-mm-yyyy",
                orientation: "bottom",
                startDate: date,
                clearBtn: true
            });
        });

        $(document).on('change', '#renstra', function() {
            $.ajax({
                type: 'GET',
                url: '/renstra/' + $(this).val(),
                success: function(data) {
                    $('#subrenstra').empty();
                    var val = '';
                    if (data.length > 0) {
                        for (var i = 0; i < data.length; i++) {
                            val += '<option value="' + data[i].sub_renstra_id + '">' + data[i]
                                .sub_renstra + '</option>';
                            if (i == 0)
                                getFirstRenstra(data[i].renstra_id);
                        };
                    } else {
                        val += '<option value="">-- Pilih Sub Topik Unggulan --</option>';
                    }
                    $('#subrenstra').html(val);
                }
            });
        });

        $(document).on('change', '#provinsi', function() {
            $.ajax({
                type: 'GET',
                url: '/kabupatenkota/' + $(this).val(),
                success: function(data) {
                    $('#kabupaten_kota').empty();
                    var val = '';
                    for (var i = 0; i < data.length; i++) {
                        val += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                        if (i == 0)
                            getFirstKecamatan(data[i].id);
                    };
                    $('#kabupaten_kota').html(val);
                }
            });
        });

        $(document).on('change', '#kabupaten_kota', function() {
            $.ajax({
                type: 'GET',
                url: '/kecamatan/' + $(this).val(),
                success: function(data) {
                    $('#kecamatan').empty();
                    var val = '';
                    for (var i = 0; i < data.length; i++) {
                        val += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                        if (i == 0)
                            getFirstDesa(data[i].id);
                    };
                    $('#kecamatan').html(val);
                }
            });
        });

        $(document).on('change', '#kecamatan', function() {
            $.ajax({
                type: 'GET',
                url: '/kelurahan/' + $(this).val(),
                success: function(data) {
                    $('#desa').empty();
                    var val = '';
                    for (var i = 0; i < data.length; i++) {
                        val += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                    };
                    $('#desa').html(val);
                }
            });
        });

        function getFirstKecamatan(kec) {
            $.ajax({
                type: 'GET',
                url: '/kecamatan/' + kec,
                success: function(data) {
                    $('#kecamatan').empty();
                    var val = '';
                    for (var i = 0; i < data.length; i++) {
                        val += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                        if (i == 0)
                            getFirstDesa(data[i].id);
                    };
                    $('#kecamatan').html(val);
                }
            });
        }

        function getFirstDesa(des) {
            $.ajax({
                type: 'GET',
                url: '/kelurahan/' + des,
                success: function(data) {
                    $('#desa').empty();
                    var val = '';
                    for (var i = 0; i < data.length; i++) {
                        val += '<option value="' + data[i].id + '">' + data[i].name + '</option>'
                    };
                    $('#desa').html(val);
                }
            });
        }

        function getFirstRenstra(des) {
            $.ajax({
                type: 'GET',
                url: '/renstra/' + des,
                success: function(data) {
                    $('#subrenstra').empty();
                    var val = '';
                    if (data.length > 0) {
                        for (var i = 0; i < data.length; i++) {
                            val += '<option value="' + data[i].sub_renstra_id + '">' + data[i].sub_renstra +
                                '</option>'
                        };
                    } else {
                        val += '<option value="">-- Pilih Sub Topik Unggulan --</option>';
                    }
                    $('#subrenstra').html(val);
                }
            });
        }
    </script>
    <script>
        function showSweetAlert() {
            swal("Anggota Dosen Internal",
                "Anggota pengusul: Dosen tetap, minimal S2, memiliki NIDN, minimal lektor, sebaiknya melibatkan masing-masing 1 (satu) anggota dosen dari seluruh prodi dalam fakultas. ",
                "info");
        }
    </script>
    <script>
        // Inisialisasi selectpicker
        $(document).ready(function() {
            $('#team').selectpicker();
        });

        // Menampilkan anggota dosen yang dipilih
        $('#team').on('changed.bs.select', function() {
            let selectedOptions = $(this).val(); // Mendapatkan nilai yang dipilih
            let selectedDosenText = '';
            let firstColumn = '';
            let secondColumn = '';
            let thirdColumn = ''; // Menambahkan thirdColumn

            // Jika ada lebih dari 5 anggota dosen yang dipilih, bagi menjadi dua atau tiga kolom
            if (selectedOptions.length > 5) {
                selectedOptions.forEach(function(nidn, index) {
                    let dosenName = $('#team option[value="' + nidn + '"]').text();
                    let dosenText = `
                <p>${index + 1}. ${dosenName} <i class="fa fa-times clickable-icon ml-1 text-danger" onclick="removeDosen('${nidn}')"></i></p>
            `; // Menambahkan nomor dan ikon delete

                    if (index < 5) {
                        firstColumn += dosenText;
                    } else if (index >= 5 && index < 10) {
                        secondColumn += dosenText;
                    } else {
                        thirdColumn += dosenText;
                    }
                });

                // Menampilkan dua atau tiga kolom dalam layout row
                $('#selectedDosen').html(`
            <div class="col-4">${firstColumn}</div>
            <div class="col-4">${secondColumn}</div>
            ${thirdColumn ? '<div class="col-4">' + thirdColumn + '</div>' : ''}
        `);
            } else {
                // Jika kurang dari 6, tampilkan dalam satu kolom secara vertikal
                selectedOptions.forEach(function(nidn, index) {
                    let dosenName = $('#team option[value="' + nidn + '"]').text();
                    selectedDosenText += `
                <p>${index + 1}. ${dosenName} <i class="fa fa-times clickable-icon ml-1 text-danger" onclick="removeDosen('${nidn}')"></i></p>
            `; // Menambahkan nomor dan ikon delete
                });

                $('#selectedDosen').html(`
            <div class="col-12">${selectedDosenText}</div>
        `);
            }
        });

        // Fungsi untuk menghapus dosen yang dipilih
        function removeDosen(nidn) {
            // Hapus nilai dari select input
            let selectElement = $('#team');
            let options = selectElement.find('option[value="' + nidn + '"]');
            options.prop('selected', false); // Unselect the option
            selectElement.selectpicker('refresh'); // Refresh the selectpicker to update UI

            // Trigger changed event to update the displayed selected dosen
            selectElement.trigger('changed.bs.select');
        }
    </script>
@stop