@section('script')
    <script>


        $(function(){
            window.loadTable = function (dataSet){
                if(!dataSet){
                    return
                }
                if( !$('#riddle_table').data('loaded') ) {
                    let t = $('#riddle_table').DataTable({
                        data: dataSet,
                        pageLength: 25,
                        lengthMenu: [[10, 25, 50, 100, 200, 500, -1], [10, 25, 50, 100, 200, 500, "All"]],
                        dom:
                            "<'justify-content-center justify-content-sm-between row p-3'<''l><'col text-right'f><'#import_export.text-right'B>>" +
                            "<'row'<'col-sm-12 overflow-auto'tr>>" +
                            "<'row p-2'<'col-sm-5'i> <'col-sm-7'p>>",
                        buttons: [{
                            extend: 'csv',
                            text: '<i class="fas fa-file-export"></i> Export CSV',
                            className: 'btn btn-sm btn-default'
                        }],
                        columns: [
                            {data: 'id', title: 'No.'},
                            {data: 'id', title: 'Qid'},
                            {data: 'question_title', title: 'Question'},
                            {data: 'options[, ].choice_description', title: 'Option', render: function ( data, type, row ) {
                                    // console.log(row);
                                    qns = '';
                                    $.each(row.options, function(i, option){
                                        // console.log(`${option['choice_description']}`);
                                        qns += `<span class="badge-${row.answer_idx === i?'success':'warning'} badge mr-1">${option['choice_description'].toString()}</span>`;
                                    });
                                    return qns
                                }},
                            {data: 'id', title:'', render: function ( data, type, row ) {
                                    return `<a data-id="${data}" data-row='${JSON.stringify(row)}' class="edit-qns-btn btn btn-sm btn-primary"><i class="fas fa-edit mx-2"></i></a>
                                            <a data-id="${data}" data-row='${JSON.stringify(row)}' class="del-qns-btn btn btn-sm btn-danger"><i class="fas fa-trash-alt mx-2"></i></a>`;
                                }}
                            // {data: '', name: 'Edit'},
                        ],
                        columnDefs: [{
                            targets: [0,2],
                            searchable: true,
                            orderable: true,
                        },{
                            targets: [2],
                            class: 'text-left'
                        }],
                        autoWidth: false
                    });

                    t.on( 'order.dt search.dt', function () {
                        let i = 1;

                        t.cells(null, 0, {search:'applied', order:'applied'}).every( function (cell) {
                            this.data(i++);
                        } );
                    } ).draw();

                    $('#riddle_table').data('loaded',true)
                } else{
                    $('#riddle_table').DataTable().clear().rows.add(dataSet).draw();
                }

                // var idx = table.column( 1 ).index( 'visible' );
            };

            function validateTr($this){
                const $parent = $($this).parents('tr');
                $parent.removeAttr('class');
                if($parent.find('.chance').val() < 1){
                    $parent.addClass('table-secondary');
                } else {
                    const status={'win':'table-success','lose':'table-danger',}
                    $parent.addClass(status[$parent.find('.status').val()]??'' );
                }
            }
            $('.status').change(function(){validateTr(this)}).change();
            $('.chance').keyup(function(){validateTr(this)}).keyup();

            $('#win_points_randomize').on('change' ,function(){
                if ( $('#win_points_randomize').prop('checked') ) {
                    $('#win_points_max').parents('.form-group').removeClass('d-none');
                    $('#win_points_min').parents('.form-group').removeClass('d-none');
                    $('#win_points').parents('.form-group').addClass('d-none');
                } else {
                    $('#win_points_max').parents('.form-group').addClass('d-none');
                    $('#win_points_min').parents('.form-group').addClass('d-none');
                    $('#win_points').parents('.form-group').removeClass('d-none');
                }
            }).change();


            $(document).on('click','#create-qns-btn', function(){
                $('#modal_qns').modal('show');
                $('.qid').text('Creation');
            })

            $('#modal_qns').find('.btn-confirm').off('click').on('click',function(){
                const qid =  $('#modal_qns').data('qns') ? $('#modal_qns').data('qns').id :null;
                runAJAX({
                    "url": AJAX_URL + "settings/main_game/riddle/" + (qid? 'edit/'+qid :'create'),
                    "method": "POST",
                    "timeout": 0,
                    "data": JSON.stringify(getQnsValues()),
                    "headers": {
                        "Content-Type": "application/json",
                    }
                },  qid ? 'edit '+qid : 'create');
            });

            $(document).on('click','.edit-qns-btn', function(){
                var modal = $('#modal_qns').modal('show');
                const qid = $(this).attr('data-id');
                $('.qid').text('QID+'+ qid);
                row = JSON.parse($(this).attr('data-row'))
                appendQnsValues( row );

                if (!row.is_new) {
                    modal.find('[name=new_opt_checked], .input-qns-del-btn, .input-qns-add-btn').addClass('disabled').prop('disabled', true);
                }
            })

            $(document).on('click','.del-qns-btn', function(){
                $('#modal_qns_delete').modal('show');
                const qid = $(this).attr('data-id');
                $('.qid').text('QID:'+qid);
                row = JSON.parse($(this).attr('data-row'))
                $('.del_qns_title').html('<b>'+row.question_title+'</b>');
                opt_txt = '';
                $.each(row.options, function(i,option){
                    opt_txt += `<span class="badge-${row.answer_idx === i?'success':'warning'} badge mr-1">${option['choice_description']}</span>`;
                })
                $('.del_qns_opts').html(opt_txt);

                $('#modal_qns_delete').find('.btn-confirm').off('click').on('click',function(){
                    runAJAX({
                        "url": AJAX_URL + "settings/main_game/riddle/delete/" +qid,
                        "method": "POST",
                        "timeout": 0,
                        "headers": {
                            "Content-Type": "application/json",
                        }
                    }, 'delete');
                });
            });
            // clear content
            $('#modal_qns').on('hidden.bs.modal', function(){
                var modal = $('#modal_qns').data('qns',null);
                modal.find('textarea, input').val('');
                modal.find('input[type=radio]').prop('checked',false).prop('disabled', false);
                modal.find('input[type=radio]:first').prop('checked',true);
                $('.qid').text('');
                modal.find('.input-qns-add-btn').removeClass('disabled').prop('disabled',false);
                var el = null;
                while ((el = $('.input-qns:last').find('.input-qns-del-btn')) && el.length) {
                    el.prop('disabled', false).trigger('click');
                }
            });

            $(document).on('click','.input-qns-del-btn', function(){
                $(this).parents('.input-qns').remove();
                if( $('.input-qns').length < 5){
                    $('.input-qns-add-btn').removeClass('disabled').prop('disabled',false);
                }
            })

            $(document).on('click','.input-qns-add-btn',function(){
                var target = $(this);
                var idx = $('.input-qns').length;

                $delbtn = $(`<div class="input-group-append">
                    <a href="#" class="btn btn-danger input-qns-del-btn"><i class="fas fa-times"></i></a>
                </div>`)

                let fresh_opt = $($('.input-qns:first')).clone()
                fresh_opt.find('[name=new_opt_checked]').prop('checked',false);
                fresh_opt.find('[name=new_opt]').val('');
                console.log(fresh_opt)
                if(idx>=2){
                    fresh_opt.append($delbtn);
                }
                $('.input-qns-wrapper').append(fresh_opt);
                if(idx+1 >= 5){
                    target.addClass('disabled').prop('disabled',true);
                } else if (target.prop('disabled')) {
                    target.removeClass('disabled').prop('disabled', false);
                }
            })

            function getQnsValues (){
                let request = {
                    question_title: $('[name=new_qns]').val(),
                    answer_idx: -1,
                    options: {},
                }
                $.each($('[name=new_opt_checked]'), function(k,v){
                    if($(this).prop('checked')){
                        request.answer_idx = k;
                        return true;
                    }
                });
                $.each($('[name=new_opt]'), function(k,v){
                    const opt = $(this);
                    request.options[k] = {choice_description:opt.val(),id:opt.data('id')};
                });
                return request;
            }

            function appendQnsValues(request){
                $('#modal_qns').data('qns',request);
                $('[name=new_qns]').val(request.question_title);
                const btn_add = $('.input-qns-add-btn');
                while ($('.input-qns').length < request.options.length) {
                    btn_add.click();
                }
                const el_opts = $('[name=new_opt]');
                for(let i=0; i < request.options.length; i++){
                    let opt = request.options[i];
                    $( el_opts[i] ).val(opt.choice_description).data('id', opt.id);
                    if (request.answer_idx === i){
                        $( $('[name=new_opt_checked]')[i] ).prop('checked', true);
                    }
                }
            }

            function runAJAX(settings,action){
                $.ajax(settings).done(function (response) {
                    var main_game = response.main_game;
                    if(main_game && main_game.settings){
                        loadTable(main_game.settings);
                        makeToast('bg-success', 'Riddle '+action+' was successful');
                    } else{
                        makeToast('bg-danger', 'Something went wrong during riddle '+action);
                    }
                }).fail(function(){
                    makeToast('bg-danger', 'Something went wrong during riddle '+action);
                }).always(function(){
                    $('.modal').modal('hide');
                });
            }
        })

    </script>
@endsection


<form class="form-horizontal" method="POST"
      {{--      action="{{ route('admin.settings.edit.business_account') }}"--}}
      autocomplete="off" enctype="multipart/form-data">
    @csrf

    @php $form = config('admin.settings.riddle')@endphp
    <div class="h6 mb-3">Main Game: <span class="text-bold main_game_type">Daily Riddle</span></div>
    @component('admin.components.card', ['header'=> 'Gameplay Logic','help'=>'main_game_riddle' ] )
        <div class="row">
        <div class="col-sm-4">
            @component('admin.components.card', ['header'=> 'Correct Answer', 'class'=>'bg-success shadow-none'] )

                @php $id = 'win_title'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                    <input name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text"
                        class="form-control"/>
                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                @endcomponent


                @php $id = 'win_subtitle'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                    <input name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text"
                        class="form-control"/>
                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                @endcomponent

                @php $id = 'win_points_max'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field_50', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                    <input name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text"
                           class="form-control"/>
                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                @endcomponent


                @php $id = 'win_points_min'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field_50', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                    <input name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text"
                           class="form-control"/>
                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                @endcomponent

                @php $id = 'win_points'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field', ['class'=>'col-12 d-none','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                    <input name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text"
                           class="form-control"/>
                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                @endcomponent

                @php $id = 'win_points_randomize'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field_100', ['label'=>'', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                    <div class="custom-control custom-checkbox">
                        <input class="custom-control-input" type="checkbox" id="{{$id}}" name="{{$id}}">
                        <label for="{{$id}}" class="custom-control-label">{{ $form[$id]['label']}}</label>
                    </div>
                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                @endcomponent

            @endcomponent
        </div>
        <div class="col-sm-4">
            @component('admin.components.card', ['header'=> 'Incorrect Answer', 'class'=>'bg-danger shadow-none'] )

                @php $id = 'lose_points'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                    <input name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text"
                           class="form-control"/>
                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                @endcomponent

            @endcomponent
        </div>

        <div class="col-sm-4">

            @php $id = 'qns_per_day'; $hasError = $errors->has($id) @endphp
            @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                <input name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text"
                       class="form-control"/>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent

            @php $id = 'randomize_qns'; $hasError = $errors->has($id) @endphp
            @component('admin.components.form_field_100', ['label'=>'', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                <div class="custom-control custom-checkbox">
                    <input class="custom-control-input" type="checkbox" id="{{$id}}" name="{{$id}}">
                    <label for="{{$id}}" class="custom-control-label">{{ $form[$id]['label']}}</label>
                </div>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent
        </div>
    </div>
    @endcomponent


    @component('admin.components.card', ['header'=> 'Question Bank', 'table'=>true] )
        @slot('header')
            <span>Question Bank</span>
            <a href="#" id="create-qns-btn" class="btn btn-sm btn-default ml-3">
                <i class="fas fa-plus mr-1"></i> New Qns
            </a>
        @endslot
        <table id="riddle_table" class="table  table-hover dataTable"></table>
    @endcomponent

</form>

@component('components.utility.template_popup', ['id' => 'modal_qns', 'custom_dialog_class' => 'modal-md'])
    @slot('slot_header')
        <label class="modal-title">Question <span class="qid"></span></label>
    @endslot

    @slot('slot')
        <div class="row">

            @php $id = 'new_qns'; $hasError = $errors->has($id) @endphp
            @component('admin.components.form_field', ['class'=>'text-left col-md-12','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                <textarea name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" class="form-control" ></textarea>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent

            <div class="col-md-12 qns_options text-left">

                @php $id = 'options'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field', ['class'=>' text-left','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])


                        @php $id = 'new_opt'; $hasError = $errors->has($id) @endphp
                        @component('admin.components.form_field', ['class'=>'input-qns-wrapper text-left','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])

                        @php $i = 0 @endphp
                        @for($i = 0; $i < 2; $i++)
                            <div class="input-group mb-1 input-qns">
                                <div class="input-group-prepend">
                                <span class="input-group-text">
                                    <input name="{{$id.'_checked'}}" type="radio" {{$i===0?'checked':''}}>
                                </span>
                                </div>
                                <input name="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" class="form-control" />

                            </div>
{{--                            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent--}}

                        @endfor
                        @endcomponent
                @endcomponent


                <a href="#" class="btn d-block btn-default text-center input-qns-add-btn">
                    <i class="fas fa-plus mr-1"></i>New Option
                </a>

            </div>
        </div>
    @endslot

    @slot('slot_footer')
{{--        <form action="" method="POST" class="w-100">--}}
{{--            @csrf--}}
{{--            {!! @method_field('delete') !!}--}}
    <div class="w-100">
            <button type="button" class="btn btn-default float-left" data-dismiss="modal">{{ __('heading.btn_close') }}</button>
            <button type="button" class="btn btn-primary btn-confirm float-right">{{ __('heading.btn_confirm') }}</button>
{{--        </form>--}}
    </div>
    @endslot
@endcomponent


@component('components.utility.template_popup', ['id' => 'modal_qns_delete', 'custom_dialog_class' => 'modal-sm'])
    @slot('slot_header')
        <label class="modal-title">Deleting Question <span class="qid"></span></label>
    @endslot

    @slot('slot')
        <div>Are you sure to delete this question?</div>
        <div class="bg-light border text-left p-3 mt-3">
            <div class="del_qns_title"></div>
            <div class="del_qns_opts"></div>
        </div>
    @endslot

    @slot('slot_footer')
        {{--        <form action="" method="POST" class="w-100">--}}
        {{--            @csrf--}}
        {{--            {!! @method_field('delete') !!}--}}
        <div class="w-100">

            <button type="button" class="btn btn-default float-left" data-dismiss="modal">{{ __('heading.btn_close') }}</button>
            <button type="button" class="btn btn-danger btn-confirm float-right">{{ __('heading.btn_confirm') }}</button>

        </div> {{--        </form>--}}
    @endslot
@endcomponent