@extends('layouts.master')
@section('breadcrumbs')
<ol class="breadcrumb page-breadcrumb">
    @foreach($breadcrumbs as $dataBread)
    <li class="breadcrumb-item {{@$dataBread['active'] == true ? 'active' : ''}}">
        @if(@$dataBread['url'])
        <a href="{{@$dataBread['url']}}">{{$dataBread['name']}}</a>
        @else
        {{$dataBread['name']}}
        @endif
    </li>
    @endforeach
</ol>
@endsection
@section('content')
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <i class="fal fa-align-justify"></i> {{$title}}
            </div>
            <form action="{{route($route.'.store')}}" method="POST" class="">
            {{csrf_field()}}
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">
                        <input type="hidden" name="secure_id" value="{{@$keyId}}">
                    </div>
                    <div class="col-md-12 mb-3">
                        <div class="form-group">
                            <label class="col-xl-12 form-label" for="fname">Kategori</label>
                            <div class="col-12 pr-1">
                                <select name="kategori" class="form-control form-control-sm @error('kategori') is-invalid @enderror" required>
                                    <option value="">-- Pilih Kategori --</option>
                                    <option value="I.Perencanaan Gerakan PBLHS">I.Perencanaan Gerakan PBLHS</option>
                                    <option value="II.Pelaksanaan Gerakan PBLHS">II.Pelaksanaan Gerakan PBLHS</option>
                                    <option value="III.Pemantauan dan Evaluasi Gerakan PBLHS">III.Pemantauan dan Evaluasi Gerakan PBLHS</option>
                                </select>
                                @error('kategori')
                                <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="col-12 mb-3">
                        <div class="form-group">
                            <label class="col-xl-12 form-label" for="fname">Nomor Halaman</label>
                            <div class="col-12 pr-1">
                                <input type="text" value="{{@$item->page_number ? @$item->page_number :  old('page_number')}}" name="page_number"  class="form-control form-control-sm @error('page_number') is-invalid @enderror numberInput" placeholder="Masukan Nomer Halaman" required>
                                @error('page_number')
                                <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="col-12 mb-3">
                        <div class="form-group">
                            <label class="col-xl-12 form-label" for="fname">Judul Pertanyaan</label>
                            <div class="col-12 pr-1">
                                <input type="text" value="{{@$item->judul ? @$item->judul :  old('judul')}}" name="judul"  class="form-control form-control-sm @error('judul') is-invalid @enderror" placeholder="Masukan Judul Pertanyaan" required>
                                @error('judul')
                                <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 mb-3">
                        <div class="form-group">
                            <label class="col-xl-12 form-label" for="fname">Tipe Pertanyaan</label>
                            <div class="col-12 pr-1">
                                <select name="type" class="form-control selecttype form-control-sm @error('type') is-invalid @enderror" required>
                                    <option value="">-- Pilih Tipe Pertanyaan --</option>
                                    <option value="textarea">Textarea</option>
                                    <option value="freetext">Freetext</option>
                                    <option value="checkbox">Checkbox</option>
                                    <option value="radio_button">Radio Button</option>
                                    <option value="number">Text Number</option>
                                </select>
                                @error('type')
                                <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 mb-3">
                        <table class="table table-bordered" id="tableJawaban" style="display:none;">
                            <tr class="table-info">
                                <th class="text-center" style="vertical-align: middle;">Jawaban</th>
                                <th width="20%" class="text-center"><a href="#" class="btn btn-success btn-sm btnTambahJawaban"><i class="fal fa-plus"></i>&nbsp;Tambah Jawaban</a></th>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-12 mb-3">
                        <div class="form-group">
                            <label class="col-xl-12 form-label" for="fname">Aktifkan Lainnya</label>
                            <div class="col-12 pr-1">
                                <select name="active_lainnya" class="form-control selectActiveLainnya form-control-sm @error('active_lainnya') is-invalid @enderror" required>
                                    <option value="0">Tidak</option>
                                    <option value="1">Ya</option>
                                </select>
                                @error('active_lainnya')
                                <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="col-12 mb-3 divJudulLainnya" style="display:none;">
                        <div class="form-group">
                            <label class="col-xl-12 form-label" for="fname">Judul Lainnya</label>
                            <div class="col-12 pr-1">
                                <input type="text" value="{{@$item->judul_lainnya ? @$item->judul_lainnya :  old('judul_lainnya')}}" name="judul_lainnya" id="judul_lainnya"  class="form-control form-control-sm @error('judul_lainnya') is-invalid @enderror" placeholder="Masukan Judul Lainnya">
                                @error('judul_lainnya')
                                <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="col-12 mb-3 divJumlahJawabanLainnya" style="display:none;">
                        <div class="form-group">
                            <label class="col-xl-12 form-label" for="fname">Jumlah Jawaban Lainnya</label>
                            <div class="col-12 pr-1">
                                <input type="text" value="{{@$item->number_answer_lainnya ? @$item->number_answer_lainnya :  old('number_answer_lainnya')}}" name="number_answer_lainnya" id="number_answer_lainnya"  class="form-control form-control-sm @error('number_answer_lainnya') is-invalid @enderror numberInput" placeholder="Masukan Nomer Halaman">
                                @error('number_answer_lainnya')
                                <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="col-md-12 text-right">
                        <a href="{{route($route.'.index')}}" class="btn btn-danger"><i class="fal fa-times"></i> Batal</a>
                        <button type="submit" class="btn btn-success"><i class="fal fa-save"></i> Simpan</button>
                    </div>
                </div>
            </div>
            </form>
        </div>
    </div>
</div>
@endsection
@section('page-js')
	<script type="text/javascript">
     $(document).ready(function() {
            $('.numberInput').on('input', function() {
                this.value = this.value.replace(/[^0-9]/g, ''); // Hanya angka 0-9
            });
            $('.selecttype').on('change',function(e){
                e.preventDefault(); // Mencegah reload halaman
                var val = $(this).val();
                if((val == 'checkbox') || (val == 'radio_button')){
                    $('#tableJawaban').show();
                }else{
                    $('#tableJawaban').hide();
                }
            });
            $('.selectActiveLainnya').on('change',function(e){
                e.preventDefault(); // Mencegah reload halaman
                var val = $(this).val();
                if((val == '1')){
                    $('.divJudulLainnya').show();
                    $('.divJumlahJawabanLainnya').show();
                    $('#judul_lainnya').removeAttr('disabled');
                    $('#number_answer_lainnya').removeAttr('disabled');
                }else{
                    $('.divJudulLainnya').hide();
                    $('.divJumlahJawabanLainnya').hide();
                    $('#judul_lainnya').attr('disabled',true);
                    $('#number_answer_lainnya').attr('disabled',true);
                }
            });
            $(".btnTambahJawaban").click(function(e) {
                e.preventDefault(); // Mencegah reload halaman

                // Tambahkan baris baru
                $("#tableJawaban").append(`
                    <tr>
                        <td>
                            <div class="input-group">
                                <input type="text" class="form-control form-control-sm" name="jawaban[]">
                            </div>
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger btn-block btn-sm btnHapusJawaban"><i class="fal fa-trash"></i>&nbsp;Hapus</button>
                        </td>

                    </tr>
                `);
            });

            // Hapus baris ketika tombol X diklik
            $(document).on("click", ".btnHapusJawaban", function() {
                $(this).closest("tr").remove();
            });
        });   
    </script>
@endsection