@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</h6>
                <form method="post" action="{{route('proposalhibah.store')}}" 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
                    {{-- @if(!$isWaktuPenyerahanProposal)
                        <div class="alert alert-warning">
                            <div>
                                Mohon maaf saat ini bukan masa penyerahan proposal<br>
                                Batas waktu penyerahan proposal adalah dari tanggal {{$hibah->start_penyerahan_proposal}} sd {{$hibah->end_penyerahan_proposal}}
                            </div>
                        </div>
                    @else
                    @if($sudahdaftar)
                        <div class="alert alert-warning">
                            <div>
                                Proposal anda sudah terdaftar dengan status Draf atau Menunggu Persetujuan<br>
                                Jika dalam status Draf, anda masih dapat mengubah proposal anda
                            </div>
                        </div>
                    @else --}}
                    <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>

                    @if($ispengmas == 1)
                    <div class="col-lg-12 col-md-6 col-sm-12">
                        <div class="form-group">
                            <label for="team"><b>Pilih Anggota Dosen (2 orang, Maks. 3)</b></label>
                            <select class="selectpicker form-control" name="team[]" id="team" multiple data-selected-text-format="count > 3" data-max-options="3" 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>
                    @else
                    <div class="col-lg-12 col-md-6 col-sm-12">
                        <div class="form-group">
                            <label for="team"><b>Pilih Anggota Dosen (Min 1 Maks 2)</b></label>
                            <select class="selectpicker form-control" name="team[]" id="team" multiple data-selected-text-format="count > 2" data-max-options="2" 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>
                    @endif
                    <input type="hidden" value="{{$ispengmas}}" name="ispengmas" id="ispengmas">
                    <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, Maks. 2)</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, Maks. 2)</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>
                    {{-- <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, Maks. 3)</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</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" id="nama" 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> --}}
                    @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, Maks. 2)</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 2MB</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">Menunggu Persetujuan</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>
                    {{-- @endif
                    @endif --}}
                </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') }}">
@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>
@stop