@extends('layout.master')
@section('parentPageTitle', 'Riwayat Pengajuan')
@section('title', 'Buat Riwayat Pengajuan')


@section('content')
<div class="section-body mt-3">
    <div class="container-fluid">
        <div class="card">
            <div class="card-body">
                <form method="post" action="{{route('riwayat.store')}}">
                @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="jenis_hibah" class="col-sm-6 col-form-label"><b>Penyelenggara Hibah <span class="required" style="color: red;"> *</span></b></label>
                        <div class="col-sm-12">
                            <div class="custom-control custom-radio custom-control-inline">
                                <input type="radio" id="jenis_program_1" checked value="Ristekdikti" name="jenis_program" class="custom-control-input jenis_program">
                                <label class="custom-control-label" for="jenis_program_1">Ristekdikti</label>
                            </div>
                            <div class="custom-control custom-radio custom-control-inline">
                                <input type="radio" id="jenis_program_2"  value="Non-Ristekdikti" name="jenis_program" class="custom-control-input jenis_program">
                                <label class="custom-control-label" for="jenis_program_2">Non-Ristekdikti</label>
                            </div>
                            {{-- <div class="custom-control custom-radio custom-control-inline">
                                <input type="radio" id="jenis_program_3"  value="Internal" name="jenis_program" class="custom-control-input jenis_program">
                                <label class="custom-control-label" for="jenis_program_3">Internal</label>
                            </div> --}}
                        </div>
                    </div>
                    
                    <div class="form-group row" id="divPenyelenggara" style="display:none;">
                        <label for="lembaga_hibah" class="col-sm-6 col-form-label"><b>Lembaga Penyelenggara Hibah</b></label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="lembaga_hibah" name="lembaga_hibah" placeholder="Lembaga Penyelenggara Hibah">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="tahun_usulan" class="col-sm-4 col-form-label"><b>Tahun Penyelenggaraan</b></label>
                        <div class="col-sm-6">
                            <select class="form-control" name="tahun_usulan">
                                <option value="0">-- Pilih Tahun Penyelenggaraan --</option>
                                                                @for($i=$curr;$i<=date('Y');$i++)
                                <option value="{{$i}}">{{$i}}</option>
                                @endfor
                            </select>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="tahun_pelaksanaan" class="col-sm-4 col-form-label"><b>Tahun Pelaksanaan</b></label>
                        <div class="col-sm-6">
                            <select class="form-control" name="tahun_pelaksanaan">
                                <option value="0">-- Pilih Tahun Pelaksanaan --</option>
                                                                @for($i=$curr;$i<=date('Y');$i++)
                                <option value="{{$i}}">{{$i}}</option>
                                @endfor
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-group row">
                        <label for="jumlah_dana" class="col-sm-12 col-form-label"><b>Jumlah Dana yang dicairkan (Rupiah)</b></label>
                        <div class="col-sm-6">
                            <input type="text" value="0" class="form-control nums" style="text-align:right;" id="jumlah_dana" name="jumlah_dana" placeholder="Jumlah Dana (Rupiah)">
                        </div>
                    </div>

                    <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-6">
                            <textarea class="form-control" id="judul" name="judul" placeholder="Tuliskan judul proposal disini" rows="2" cols="10" required></textarea>
                        </div>
                    </div>

                    <div class="col-lg-12 col-md-6 col-sm-12">
                        <div class="form-group col-sm-6">
                            <label for="team"><b>Pilih Anggota Dosen (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']}}</option>
                                @endforeach
                            </select>
                        </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 (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><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 10 karakter" maxlength="10" 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>

                    <input type="hidden" name="jenis_hibah" value="{{$tipehibah}}">
                    
                    @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">
                        <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') }}">
@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 insRow() {
        // console.log('hi');
        var x = document.getElementById('tablemahasiswa');
        var new_row = x.rows[1].cloneNode(true);
        var len = x.rows.length;
        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() {
        "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', '.jenis_program', function(){
        console.info('tes',$(this).val());
        var val = $(this).val();
        if(val == 'Non-Ristekdikti'){
            $('#divPenyelenggara').show();
        }else{
            $('#divPenyelenggara').hide();
        }
    })

    $(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