@extends('layouts.app')
@section('title')
    Kuesioner Form 3
@endsection
@section('content')
<section class="section">
    <div class="section-header">
        <h1>Kuesioner Form 3</h1>
        <div class="section-header-breadcrumb">
            <div class="input-group-prepend">
                <label class="input-group-text bg-primary text-white" for="InstrumentType">Kode Instrumen</label>
            </div>
            <div class="mr-3">
                <select id="InstrumentType" class="custom-select">
                    <option value="default" selected>Pilih</option>
                    <option value="A">A</option>
                    <option value="B">B</option>
                    <option value="">-</option>
                </select>
            </div>
            <a href="{{ route('f3Questionnaires.create')}}" class="btn btn-primary">Kuesioner Form 3<span class="fas fa-plus ml-2"></span></a>
        </div>
    </div>
    <div class="section-body">
       <div class="card">
            <div class="card-body">
                @include('f3_questionnaires.table')
            </div>
       </div>
   </div>
    
</section>
@endsection

@section('modal')
<div id="mEditF3Q" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Pertanyaan</h5>
                <button type="button" aria-label="Close" class="close outline-none" data-dismiss="modal">×</button>
            </div>
            <form method="POST" id="fEditF3Q" action="">
                <div class="modal-body">
                    <div class="alert alert-danger d-none" id="vebEditF3Q"></div>
                    @csrf
                    <input type="hidden" name="id" value="">
                    <input type="hidden" name="_method" value="put">
                    <div class="row">
                         <!-- Aspect Id Field -->
                        <div class="form-group col-sm-6">
                            {!! Form::label('aspect_id', 'Aspek:') !!}
                            {!! Form::select('aspect_id', getAspects(), null, ['class' => 'form-control select2', 'placeholder' => 'Pilih Aspek', 'required' => true]) !!}
                        </div>

                        <!-- Group Id Field -->
                        <div class="form-group col-sm-6">
                            {!! Form::label('group_id', 'Kelompok Indikator:') !!}
                            {!! Form::select('group_id', getGroups(), null, ['class' => 'form-control select2', 'placeholder' => 'Pilih Kelompok Indikator', 'required' => true]) !!}
                        </div>

                        <!-- Indicator Id Field -->
                        <div class="form-group col-sm-6">
                            {!! Form::label('indicator_id', 'Indikator:') !!}
                            {!! Form::select('indicator_id', getIndicators(), null, ['class' => 'form-control select2', 'placeholder' => 'Pilih Indikator', 'required' => true]) !!}   
                        </div>

                        <!-- Num Field -->
                        <div class="form-group col-sm-6">
                            {!! Form::label('num', 'Nomor Urut') !!}
                            {!! Form::number('num', null, ['class' => 'form-control', 'required' => true]) !!}
                        </div>

                        <!-- Instrument Type Field -->
                        <div class="form-group col-sm-6">
                            {!! Form::label('instrument_type', 'Kode Instrument:') !!}
                            {!! Form::select('instrument_type', getInstrumentType(), null, ['class' => 'form-control select2', 'placeholder' => 'Pilih Kode Instrumen', 'required' => true]) !!}
                        </div>

                        <!-- Code Field -->
                        <div class="form-group col-sm-6">
                            {!! Form::label('code', 'Kode Indikator:') !!}
                            {!! Form::text('code', null, ['class' => 'form-control', 'minlength' => 1, 'maxlength' => 10]) !!}
                        </div>

                        <!-- Isu Field -->
                        <div class="form-group col-sm-12 col-lg-12">
                            {!! Form::label('isu', 'Isu:') !!}
                            {!! Form::textarea('isu', null, ['class' => 'form-control summernote-simple1', 'required' => true]) !!}
                        </div>

                        <div class="text-right">
                            <button type="submit" class="btn btn-warning" data-loading-text="<span class='spinner-border spinner-border-sm'></span> Menyimpan ..."><span class="fa fa-edit mr-3"></span>Ganti</button>
                            <button type="button" class="btn btn-light ml-3" data-dismiss="modal"><span class="fas fa-times mr-3"></span>Tutup</button>
                        </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push("js")
    <script>
        function reFitSelect2() {
            $('.select2.select2-container.select2-container--default').css('width', '100%');
        }

        $('#dataTableBuilder').on('click', '.btn-edit', function (e) {
            e.preventDefault()
            reFitSelect2()

            // dataTable button
            const btn = $(this)

            if (btn.attr("data-href")) {
                const data = isDTB(window.LaravelDataTables["dataTableBuilder"]) ? window.LaravelDataTables["dataTableBuilder"].rows(btn.closest('tr').data('index')).data()[0] : null
                const form = $("#mEditF3Q form")
                form.attr('action', btn.attr('data-href'))
                form.find('input[name=id]').val(data.id)
                form.find('input[name=num]').val(data.num)
                $("textarea[name=isu]").summernote("code", data.isu);

                const parser = new DOMParser()
                let code = parser.parseFromString(data.code, "text/html")
                code = code.querySelector("strong")
                code = code.textContent
                form.find('input[name=code]').val(code)
                
                $('#aspect_id').val(data.aspect_id).trigger('change')
                $('#group_id').val(data.group_id).trigger('change')
                $('#indicator_id').val(data.indicator_id).trigger('change')
                $('#instrument_type').val(data.instrument_type_for_edit).trigger('change')
                
                const modal = $('#mEditF3Q')
                modal.modal('show') 
            } else {
                iziToast.warning({title: 'Galat!', message: 'Data indikator tidak dikenali!', position: 'topRight'})
            }
        })

        $('#mEditF3Q').on('submit', 'form', function (e) {
            e.preventDefault()

            const data = new FormData($(this).get(0))
            const bLoader = $(this).find('button[type=submit]')
            bLoader.button('loading')
            const form = $("#mEditF3Q form")

            $.ajax({
                url: form.attr('action'),
                type: 'post',
                data,
                processData: false,
                contentType: false,
                success: function (r) {
                    bLoader.button('reset')
                    if (r && r.success) {
                        iziToast.success({title: 'OK', message: 'Data Opsi Pertanyaan berhasil diganti', position: 'topRight'})

                        // $('#question').val(null).trigger('change');
                        form.get(0).reset();
                        form.closest('.modal').modal('hide')

                        drawDTB(window.LaravelDataTables["dataTableBuilder"])
                    } else {
                        iziToast.warning({title: 'Galat!', message: 'Data Opsi Pertanyaan gagal diganti!', position: 'topRight'})
                    }
                },
                error: function (x) { 
                    bLoader.button('reset');  iziToast.error({title: 'Server Error!', message: 'Data Opsi Pertanyaan gagal diganti!', position: 'topRight'})
                }
            });

            return false;
        })

        $('.summernote-simple1').summernote({
            dialogsInBody: 1,
            minHeight: 150,
            tabDisable: 1,
            disableGrammar: 1,
            toolbar: [
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough', 'superscript', 'subscript']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['insert', ['link']],
                ['view', ['fullscreen', 'codeview']],
            ]
        })
    </script>
@endpush