@extends('layout.master')
@section('parentPageTitle', 'Jurnal')
@section('title', 'Tambah Jurnal')

@section('content')
<div class="section-body mt-3">
    <div class="container-fluid">
        <div class="card">
            <div class="card-body">
                <form method="post" action="{{route('jurnal.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
                    
                    <div class="row clearfix">
                        <div class="col-lg-12 col-md-12 col-sm-12">
                            <div class="form-group">
                                <label for="nama" class="col-sm-3 col-form-label">Nama Jurnal<span class="required" style="color: red;"> *</span></label>
                                <input type="text" name="nama" class="form-control col-sm-10" placeholder="Nama Jurnal">
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12">
                            <div class="form-group">
                                <label for="issn_1" class="col-sm-12 col-form-label">ISSN<span class="required" style="color: red;"> *</span></label>
                                <div class="col-sm-6">
                                    <table>
                                        <tr>
                                            <td><input type="text" name="issn_1" required class="form-control col-sm-12 issn-column tipenumber" maxlength="4"></td>
                                            <td>&emsp;</td>
                                            <td><input type="text" name="issn_2" required class="form-control col-sm-12 issn-column tipenumber" maxlength="4"></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-6 col-sm-12">
                            <div class="form-group">
                                <label for="tingkat_jurnal" class="col-sm-3 col-form-label">Tingkat Jurnal<span class="required" style="color: red;"> *</span></label>
                                <select class="form-control col-sm-10" required name="tingkat_jurnal">
                                    <option value="Nasional">Nasional</option>
                                    <option value="Internasional">Internasional</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-6 col-sm-12">
                            <div class="form-group">
                                <label for="akreditasi" class="col-sm-3 col-form-label">Akreditasi<span class="required" style="color: red;"> *</span></label>
                                <select class="form-control col-sm-10" required name="akreditasi">
                                    <option value="Sinta 1">Sinta 1</option>
                                    <option value="Sinta 2">Sinta 2</option>
                                    <option value="Sinta 3">Sinta 3</option>
                                    <option value="Sinta 4">Sinta 4</option>
                                    <option value="Sinta 5">Sinta 5</option>
                                    <option value="Belum Terakreditasi">Belum Terakreditasi</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-6 col-sm-12">
                            <div class="form-group">
                                <label for="fokus_ruang_lingkup" class="col-sm-3 col-form-label">Fokus Ruang Lingkup<span class="required" style="color: red;"> *</span></label>
                                <textarea id="fokus_ruang_lingkup" name="fokus_ruang_lingkup" required class="form-control col-sm-10" placeholder="Fokus Ruang Lingkup" rows="5"></textarea>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-6 col-sm-12">
                            <div class="form-group">
                                <label for="akreditasi" class="col-sm-3 col-form-label">Bulan Terbit</label>
                                <select class="selectpicker form-control col-sm-10" multiple data-selected-text-format="count > 3" data-max-options="4" data-live-search="true" name="bulan_terbit[]">
                                    <option value="Januari">Januari</option>
                                    <option value="Februari">Februari</option>
                                    <option value="Maret">Maret</option>
                                    <option value="April">April</option>
                                    <option value="Mei">Mei</option>
                                    <option value="Juni">Juni</option>
                                    <option value="Juli">Juli</option>
                                    <option value="Agustus">Agustus</option>
                                    <option value="September">September</option>
                                    <option value="Oktober">Oktober</option>
                                    <option value="Nopember">Nopember</option>
                                    <option value="Desember">Desember</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-6 col-sm-12">
                            <div class="form-group">
                            <label for="all_fakultas">Fakultas<span class="required" style="color: red;"> *</span></label>
                                <select name="fakultas" id="fakultas" class="form-control col-sm-10">
                                    <option value="" disabled selected>-- Silahkan pilih fakultas --</option>
                                    @foreach($all_fakultas as $value)
                                    <option value="{{ $value['fakultas_id'] }}">{{ $value['nama_fakultas'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-6 col-sm-12">
                            <div class="form-group">
                            <label for="prodi">Program Studi</label>
                                <select name="prodi" id="prodi" class="form-control col-sm-10">
                                    <option value="" disabled selected>-- Silahkan pilih program studi --</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-6 col-sm-12">
                            <div class="form-group">
                                <label for="url" class="col-sm-3 col-form-label">URL<span class="required" style="color: red;"> *</span></label>
                                <input type="url" id="url" name="url" required class="form-control col-sm-10" placeholder="URL">
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-6 col-sm-12">
                            <div class="form-group">
                                <label for="email" class="col-sm-3 col-form-label">Email<span class="required" style="color: red;"> *</span></label>
                                <input type="email" id="email" name="email" required class="form-control col-sm-10" placeholder="Email">
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-6 col-sm-12">
                            <div class="form-group">
                                <label for="kontak" class="col-sm-3 col-form-label">Nomor Kontak<span class="required" style="color: red;"> *</span></label>
                                <input type="kontak" id="kontak" name="kontak" required class="form-control col-sm-10" placeholder="Kontak">
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-6 col-sm-12">
                            <div class="form-group">
                                <label for="alamat" class="col-sm-3 col-form-label">Alamat<span class="required" style="color: red;"> *</span></label>
                                <textarea id="alamat" name="alamat" class="form-control col-sm-10" placeholder="Alamat" rows="5"></textarea>
                            </div>
                        </div>

                        <div class="col-10">
                            <div align="right">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="history.back();">Kembali</button>
                                <button type="submit" class="btn btn-primary">Simpan</button>
                            </div>
                        </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 get_prodi() {
        var id = $('#fakultas option:selected').val();
        var url = "/setting/dosen/prodi/" + id;
        var my_html = "";

        url = url.replace(':id', id);
        $.ajax({
            type: 'GET',
            url: url,
            dataType: 'json',
            success: function(data) {
                if (data.length !== 0) {
                    my_html += '<option value="">Pilih Program Studi</option>';
                    data.forEach(element => {
                        var prodi_id = element.prodi_id;
                        var nama_prodi = element.nama_prodi;
                        my_html += '<option value=' + prodi_id + '>' + nama_prodi + '</option>';
                    });
                    $("#prodi").html(my_html);
                }
            },
            error: function() {
                console.log('Failed');
            }
        });
    }

    get_prodi();

    $("#fakultas").change(function() {
        get_prodi();
    });
</script>
@stop