@extends('layouts.app')
@section('title')
Detail Pertanyaan Kuesioner Form 1
@endsection
@section('content')
<section class="section">
    <div class="card rounded">
        <div class="card-header">
            <h4>Detail Pertanyaan Kuesioner F-01</h4>
            <div class="card-header-action">
                <a href="{{ route('f1qq.index') }}" class="btn btn-primary"><span class="fa fa-arrow-left mr-2"></span>Kembali</a>
            </div>
        </div>
    </div>
    @include('stisla-templates::common.errors')
    <div class="section-body">
        <div class="card">
            <div class="card-body">
                @include('f1_questionnaire_questions.show_fields')
            </div>
        </div>
    </div>
    <div class="card card-primary">
        <div class="card-header">
            <h4>Opsi Kuesioner</h4>
            <div class="card-header-action">
                <a href="{{ route('f1qo.create')}}" class="btn btn-primary btn-create">OPSI<span class="fas fa-plus ml-2"></span></a>
            </div>
        </div>
        <div class="card-body px-0">
            {!! $dataTable->table(['width' => '100%', 'class' => 'table table-striped table-bordered'], false) !!}
        </div>
    </div>
</section>
@endsection

@section('modal')
<div id="mEditF1QO" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Opsi Pertanyaan</h5>
                <button type="button" aria-label="Close" class="close outline-none" data-dismiss="modal">×</button>
            </div>
            <form method="POST" id="fEditF1QO" action="">
                <div class="modal-body">
                    <div class="alert alert-danger d-none" id="vebEditF1QO"></div>
                    @csrf
                    <input type="hidden" name="id" value="">
                    <input type="hidden" name="_method" value="put">
                    <div class="row">
                        <div class="form-group col-lg-8 col-sm-12">
                            {!! Form::label('f1_questionnaire_question_id', 'Pertanyaan <span class="required">*</span>', [], false) !!}
                            {!! Form::select('f1_questionnaire_question_id', getF1QQs(), null, ['id' => 'question', 'class' => 'form-control select2', 'placeholder' => 'Pilih Pertanyaan', 'required' => true]) !!}
                        </div>
                        <div class="form-group col-lg-4 col-sm-12">
                            {!! Form::label('type', 'Tipe Opsi <span class="required">*</span>', [], false) !!}
                            {!! Form::select('type', getF1QOptions(), null, ['class' => 'form-control', 'required' => true, 'placeholder' => 'Pilih Tipe Opsi']) !!}
                        </div>
                        <div class="form-group col-lg-4 col-sm-12">
                            {!! Form::label('num', 'Nomor Urut <span class="required">*</span>', [], false) !!}
                            {!! Form::number('num', null, ['id' => 'number', 'class' => 'form-control', 'required' => true]) !!}
                        </div>
                        <div class="form-group col-lg-4 col-sm-12">
                            {!! Form::label('score', 'Skor atau Nilai <span class="required">*</span>', [], false) !!}
                            {!! Form::number('score', null, ['class' => 'form-control', 'step' => 'any', 'required' => true]) !!}
                        </div>
                        <div class="form-group col-sm-4" id="qoValueContainer">
                            {!! Form::label('value', 'Isian / Value <span class="required">*</span>', [], false) !!}
                            {!! Form::select('value', getF1QOVs(), null, ['class' => 'form-control', 'placeholder' => 'Pilih Isian / Value']) !!}
                        </div>
                        <div class="form-group col-lg-12 col-sm-12">
                            {!! Form::label('option', 'Opsi') !!}
                            {!! Form::textarea('option', null, ['class' => 'form-control']) !!}
                        </div>
                    </div>
                    <div class="row" id="qoIsVerticalContainer">
                        <div class="form-group col-lg-6 col-sm-12">
                            <div class="custom-control custom-checkbox">
                                {!! Form::checkbox('is_vertical', 1, false, ['id' => 'isVertical', 'class' => 'custom-control-input']) !!}
                                {!! Form::label('isVertical', 'Berbentuk Vertikal? jika iya, silahkan centang.', ['class' => 'custom-control-label']) !!}
                            </div>
                        </div>
                        <div class="form-group col-lg-6 col-sm-12">
                            <div class="custom-control custom-checkbox">
                                {!! Form::checkbox('is_table', 1, false, ['id' => 'isTable', 'class' => 'custom-control-input']) !!}
                                {!! Form::label('isTable', 'Berbentuk Tabel? jika iya, silahkan centang.', ['class' => 'custom-control-label']) !!}
                            </div>
                        </div>
                    </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('css')
    @include('layouts.datatables_css')
@endpush

@push('js')
@include('layouts.datatables_js')
{!! $dataTable->scripts() !!}
<script type="text/javascript">
    $(document).ready(function () {
        function toggleCheckboxOption() {
            if ($('#type').val() == 1 || $('#type').val() == 2 || $('#type').val() == 3) {
                $('#qoValueContainer').removeClass('d-none');
                $('#qoIsVerticalContainer').removeClass('d-none');
            } else {
                $('#qoValueContainer').addClass('d-none');
                $('#qoIsVerticalContainer').addClass('d-none');
            }
        }

        function reFitSelect2() {
            $('.select2.select2-container.select2-container--default').css('width', '100%');
        }

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

            var t = $(this);

            if (t.attr('data-href')) {
                var r = isDTB(window.LaravelDataTables["dataTableBuilder"]) ? window.LaravelDataTables["dataTableBuilder"].rows(t.closest('tr').data('index')).data()[0] : null;
                var f = $('#mEditF1QO form');
                f.attr('action', t.attr('data-href'));
                f.find('input[name=id]').val(r.id);
                f.find('input[name=num]').val(r.number);
                f.find('input[name=score]').val(r.score);
                f.find('select[name=value]').val(r.value);
                f.find('textarea[name=option]').val(r.option);

                var isTable = r.is_table ? true : false;
                var isVertical = r.is_vertical ? true : false;
                f.find('input[name=is_table]').attr('checked', isTable).prop('checked', isTable);
                f.find('input[name=is_vertical]').attr('checked', isTable).prop('checked', isTable);

                $('#type').val(r.type).trigger('change');
                $('#question').val(r.question_id).trigger('change');

                var m = $('#mEditF1QO');
                    m.modal('show');
                    m.find('.modal-title').text('Edit Opsi Pertanyaan');
            } else {
                iziToast.warning({title: 'Galat!', message: 'Data indikator tidak dikenali!', position: 'topRight'});
            }
        });

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

            var f = $(this);
            var d = new FormData($(this).get(0));
            var bLoader = $(this).find('button[type=submit]');
                bLoader.button('loading');

            if ($('input#isVertical').is(':not(:checked)')) {
                d.append('is_vertical', 0);
            } else {
                d.set('is_vertical', 1);
            }

            if ($('input#isTable').is(':not(:checked)')) {
                d.append('is_table', 0);
            } else {
                d.set('is_table', 1);
            }
            
            $.ajax({
                url: f.attr('action'),
                type: 'post',
                data: d,
                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');
                        f.get(0).reset();
                        f.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;
        });
    });
</script>
@endpush