@extends('layouts.app')
@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <h1 class="float-left">Pedoman Baru</h1>
            </div>
        </div>
    </div>
</section>

<section class="content">

    <!-- Default box -->
    <div class="card">
        <div class="card-body">
            @include('layouts.success_error')

            <form method="post" autocomplete="off">
                @csrf
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="nama">Nama Pedoman</label>
                            <input type="text" name="nama" class="form-control" placeholder="Masukan Nama" id="nama"
                                required>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="jenisid">Jenis</label>
                            <select class="custom-select" name="jenis" id="jenisid" required>
                                <option value="">-- PILIH JENIS --</option>
                                <option value="Manajemen Peradilan">Manajemen Peradilan</option>
                                <option value="Administrasi Perkara">Administrasi Perkara</option>
                                <option value="Administrasi Persidangan">Administrasi
                                    Persidangan Dan Pelaksanaan Putusan</option>
                                <option value="Administrasi Umum">Administrasi Umum</option>
                                <option value="Kinerja Pelayanan">Kinerja Pelayanan Publik</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-12">
                        <h5 class="mt-3">List Pedoman</h5>
                        <hr>
                        <div class="form-group">
                            <label for="isi">Isi Pedoman Baru</label>
                            <textarea class="form-control" placeholder="Masukan Isi Pedoman" id="isi"
                                rows="4"></textarea>
                            <button class="btn btn-primary mt-3 float-right" id="btnSimpanList" type="button">Simpan Ke
                                List</button>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <table class="table table-bordered mt-4">
                            <thead>
                                <tr>
                                    <th colspan=2>List Isi Pedoman</th>
                                </tr>
                            </thead>
                            <tbody id="bodyListSimpan">
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <button type="submit" class="btn btn-primary float-right">Simpan</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- /.card -->

</section>
@endsection

@section('js')
<script>
    function nl2br (str, is_xhtml) {
        var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br ' + '/>' : '<br>';
        return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
    }
    var item_row = 0;
    $(document).ready(function(){

        $(document).on('click','#btnSimpanList', function(){
            if($('#isi').val().length > 0) {

                if ($('#jenisid').find(":selected").val() == 'Administrasi Umum') {
                    $('#bodyListSimpan').append(
                        `   
                        <tr>
                            <td>
                                <div class="form-group pilihbidang">
                                <select class="custom-select" id="bidangid" name="isi[${item_row}][bidang]" required>
                                    @foreach($bidang as $item)
                                        <option value="{{$item->id}}">{{$item->nama}}</option>
                                    @endforeach
                                </select>
                                </div>
                                <textarea class="form-control" placeholder="Masukan Isi Pedoman" id="isi" name="isi[${item_row}][keterangan]"
                                    rows="4">${$('#isi').val()}</textarea>
                            </td>
                            <td style="width:10px;">
                                <button type="button" class="btn btn-danger btn-sm float-right hapusList"><i class="fas fa-times"></i></button>
                            </td>
                        </tr>
                        `
                    );
                } else {
                    $('#bodyListSimpan').append(
                        `   
                        <tr>
                            <td>
                                <div class="form-group pilihbidang" style="display: none;">
                                <select class="custom-select" id="bidangid" name="isi[${item_row}][bidang]" required>
                                    @foreach($bidang as $item)
                                        <option value="{{$item->id}}">{{$item->nama}}</option>
                                    @endforeach
                                </select>
                                </div>
                                <textarea class="form-control" placeholder="Masukan Isi Pedoman" id="isi" name="isi[${item_row}][keterangan]"
                                    rows="4">${$('#isi').val()}</textarea>
                            </td>
                            <td style="width:10px;">
                                <button type="button" class="btn btn-danger btn-sm float-right hapusList"><i class="fas fa-times"></i></button>
                            </td>
                        </tr>
                        `
                    );
                }
                item_row++;
                $('#isi').val('');
            }
            $('#isi').focus();
        });

        $(document).on('click', '.hapusList', function(){
            $(this).closest('tr').remove();
        });

        $(document).on('change', '#jenisid', function(){
            if($(this).find(":selected").val() == 'Administrasi Umum') {
                $('.pilihbidang').show();
            } else {
                $('.pilihbidang').hide();
            }
        });
    });
</script>
@endsection