@extends('layouts.master')
@section('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style type="text/css">
        .select2-selection__choice__display{
            padding-left: 20px !important;
        }
        .fa-plus,.fa-trash{
            font-size: 15px !important;
        }
        .iti {
            display: block !important;
        }
        .preview_image {
            max-height: 200px;
            max-width: 200px;
        }
        .img_150 {
            max-height: 150px;
            max-width: 150px;
        }
    </style>
@endsection
@section('content')
    @include('components.breadcum')
    <div class="row">
        <div class="col-12">
        </div>
        <div class="card">
            <div class="card-body">
                <form class="kt-form kt-form--label-right" id="frmDomain" name="frmDomain"
                    action="{{route('admin.level-articles.store')}}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3 row" id="selct_user">
                        <label for="example-text-input" class="col-md-2 col-form-label"><span class="text-danger">*</span>Select Level</label>
                        <div class="col-md-10">
                            <select class="form-select" name="levels_id" id="levels_id">
                                <option value="">--SELECT LEVEL--</option>
                                @foreach($levels as $users_new)
                                <option value="{{$users_new->id}}">{{$users_new->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row" id="selct_user">
                        <label for="example-text-input" class="col-md-2 col-form-label"><span class="text-danger">*</span>Select Phase</label>
                        <div class="col-md-10">
                            <select class="form-select" name="level_phases_id" id="level_phases_id">
                            </select>
                        </div>
                    </div>
                    <hr>
                    <h5>Article Details: </h5>
                    <div class="mb-3 row">
                        <label for="image" class="col-md-2 col-form-label">Preview</label>
                        <div class="col-lg-4 col-md-9 col-sm-12" id="preview_image">
                            <img src="{{get_asset(get_constants('default.no_image_available'))}}" class="preview_image img150" alt="">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="example-text-input" class="col-md-2 col-form-label"><span class="text-danger">*</span>Image</label>
                        <div class="col-md-10">
                            <input type="file" id="thumb_nail" class="form-control" accept="image/*">
                            <input type="hidden" name="thumb_image" id="thumb_image" value="">
                        </div>
                    </div>
                    <ul class="nav nav-tabs nav-tabs-custom" role="tablist" id="tabs">
                        @foreach(getAllLanguage() as $key => $value)
                        <li class="nav-item">
                            <a class="nav-link @if($key == 0) active @endif" data-bs-toggle="tab" href="#lang_{{$value->code}}" role="tab" aria-selected="true">
                                {{$value->name}}
                            </a>
                        </li>
                        @endforeach
                    </ul>
                    <div class="tab-content p-3">
                        @foreach(getAllLanguage() as $key=>$value)
                        <div class="tab-pane article @if($key==0) active @endif" id="lang_{{$value->code}}" role="tabpanel">
                            <div class="mb-3 row">
                                <label for="example-text-input" class="col-md-2 col-form-label"><span class="text-danger">*</span>Title</label>
                                <div class="col-md-10">
                                    <input type="text" name="title_{{$value->code}}" id="title_{{$value->code}}" class="form-control" value="" maxlength="50">
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="example-text-input" class="col-md-2 col-form-label"><span class="text-danger">*</span>Description</label>
                                <div class="col-md-10">
                                    <textarea class="form-control" name="description_{{$value->code}}" id="description_{{$value->code}}"></textarea>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <!-- <div class="mb-3 row">
                        <label for="example-text-input" class="col-md-2 col-form-label"><span class="text-danger">*</span>Type</label>
                        <div class="col-md-10">
                            <select class="form-control" name="type" id="type">
                                <option value="free">Free</option>
                                <option value="paid">Paid</option>
                            </select>
                        </div>
                    </div> -->
                    <hr>
                    <h5>Quiz Details: </h5>
                    <ul class="nav nav-tabs nav-tabs-custom" role="tablist" id="tabs">
                        @foreach(getAllLanguage() as $key => $value)
                        <li class="nav-item">
                            <a class="nav-link @if($key == 0) active @endif" data-bs-toggle="tab" href="#{{$value->code}}" role="tab" aria-selected="true">
                                {{$value->name}}
                            </a>
                        </li>
                        @endforeach
                    </ul>
                    <div class="tab-content p-3">
                        @foreach(getAllLanguage() as $key=>$value)
                        <div class="tab-pane question @if($key==0) active @endif" id="{{$value->code}}" role="tabpanel">
                            <div class="mb-3 row">
                                <label for="example-text-input" class="col-md-2 col-form-label"><span class="text-danger">*</span>Quiz Name</label>
                                <div class="col-md-10">
                                    <input type="text" name="name[{{$value->code}}]" id="name[{{$value->code}}]" class="form-control" value="{{($data->name) ?? ''}}">
                                </div>
                            </div>
                            <div class="dynamicTable_{{$value->code}}">
                                <table class="table table-bordered" id="choice_dynamic_table">  
                                    <tr>
                                        <th>Question</th>
                                        <th>Action</th>
                                    </tr>
                                    <tr>  
                                        <td>
                                            <input type="text" name="attribute[0][{{$value->code}}][name]" data-index="0" class="form-control index_input" />
                                        </td>    
                                        <td><button type="button" name="add_choice" class="btn btn-success bto add_attribute" style=" background-color: #4F473B;border-color: #4f473B;">Add more</button></td>  
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <label for="example-text-input" class="col-form-label">You can add your options below</label>
                                            <table class="table table-bordered choice_op_dynamic_table_{{$value->code}}_0" id="">  
                                                <tr>
                                                    <th>Options</th>
                                                    <th>Right Answer</th>
                                                    <th>Action</th>
                                                </tr>
                                                <tr>  
                                                    <td><input type="text" name="attribute[0][{{$value->code}}][options][0]" class="form-control attribute_value" /></td>  
                                                    <td><input type="radio" class="check_radio" name="attribute[0][{{$value->code}}][is_right][0][]" id="{{$value->code}}_00" data-value="0" data-index="0" value="0"  checked /></td>
                                                    <td><button type="button" name="choice_option_add" id="choice_option_add" data-index="0" class="btn btn-success bto choice_option_add" style="background-color: #4F473B;border-color: #4f473B;">Add More option</button></td>  
                                                </tr>
                                            </table> 
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <div class="kt-portlet__foot">
                        <div class=" ">
                            <div class="row">
                                <div class="wd-sl-modalbtn">
                                    <button  type="submit" class="btn btn-primary waves-effect waves-light" id="save_changes">Submit</button>
                                    <a href="{{route('admin.level-articles.index')}}" id="close"><button type="button" class="btn btn-outline-secondary waves-effect">Cancel</button></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('script')
@include('admin.articles.cropping')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.6.2/tinymce.min.js"></script>
<script type="text/javascript">
    $(function () {
        var useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
        tinymce.init({
            selector: 'textarea',
            plugins: 'print preview paste importcss searchreplace autolink directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons',
            imagetools_cors_hosts: ['picsum.photos'],
            menubar: 'file edit view insert format tools table help',
            toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview print | insertfile image media template link anchor codesample | ltr rtl',
            toolbar_sticky: true,
            image_advtab: true,
            link_list: [
                { title: 'My page 1', value: 'https://www.tiny.cloud' },
                { title: 'My page 2', value: 'http://www.moxiecode.com' }
            ],
            image_list: [
                { title: 'My page 1', value: 'https://www.tiny.cloud' },
                { title: 'My page 2', value: 'http://www.moxiecode.com' }
            ],
            image_class_list: [
                { title: 'None', value: '' },
                { title: 'Some class', value: 'class-name' }
            ],
            importcss_append: true,
            file_picker_callback: function (callback, value, meta) {
                var input = document.createElement('input');
                input.setAttribute('type', 'file');
                input.setAttribute('accept', 'image/*');
                input.onchange = function () {
                  var file = this.files[0];
                  var reader = new FileReader();
                  reader.onload = function () {
                    var id = 'blobid' + (new Date()).getTime();
                    var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
                    var base64 = reader.result.split(',')[1];
                    var blobInfo = blobCache.create(id, file, base64);
                    blobCache.add(blobInfo);
                    callback(blobInfo.blobUri(), { title: file.name });
                  };
                  reader.readAsDataURL(file);
                };
                input.click();
            },
            templates: [
                { title: 'New Table', description: 'creates a new table', content: '<div class="mceTmpl"><table width="98%%"  border="0" cellspacing="0" cellpadding="0"><tr><th scope="col"> </th><th scope="col"> </th></tr><tr><td> </td><td> </td></tr></table></div>' },
                { title: 'Starting my story', description: 'A cure for writers block', content: 'Once upon a time...' },
                { title: 'New list with dates', description: 'New List with dates', content: '<div class="mceTmpl"><span class="cdate">cdate</span><br /><span class="mdate">mdate</span><h2>My List</h2><ul><li></li><li></li></ul></div>' }
            ],
            template_cdate_format: '[Date Created (CDATE): %m/%d/%Y : %H:%M:%S]',
            template_mdate_format: '[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S]',
            height: 300,
            image_caption: true,
            quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
            noneditable_noneditable_class: 'mceNonEditable',
            toolbar_mode: 'sliding',
            contextmenu: 'link image imagetools table',
            skin: useDarkMode ? 'oxide-dark' : 'oxide',
            content_css: useDarkMode ? 'dark' : 'default',
            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
        });
    });
</script>
<script>
    $("#frmDomain").validate({
        ignore: [],
        rules: {
            levels_id: {required: true},
            level_phases_id: {required: true},
            thumb_image: {required: true},
            @foreach(getAllLanguage() as $key=>$value)
                title_{{$value->code}}: {required: true},
                description_{{$value->code}}: {required: true},
                "name[{{$value->code}}]": {required: true},
                "attribute[0][{{$value->code}}][name]": {required: true},
                "attribute[0][{{$value->code}}][options][0]": {required: true},
                "attribute[0][{{$value->code}}][is_right][0][]": {required: true},
            @endforeach
        },
        messages: {
            levels_id: {required: 'Please select level'},
            level_phases_id: {required: 'Please select phase'},
            thumb_image: {required: "Please upload image"},
            @foreach(getAllLanguage() as $key=>$value)
                title_{{$value->code}}: {required: 'Please enter title'},
                description_{{$value->code}}: {required: 'Please enter description'},
                'name[{{$value->code}}]': {required: 'Please enter question title'},
                "attribute[0][{{$value->code}}][name]": {required: 'Please enter name'},
                "attribute[0][{{$value->code}}][options][0]": {required: 'Please enter option value'},
                "attribute[0][{{$value->code}}][is_right][0][]": {required: 'Please select right answer'},
            @endforeach
        },
        invalidHandler: function (event, validator) {
            $('.collapse').addClass('show');
            $('#tabs a[href="#' + jQuery(validator.errorList[0].element).closest(".article").attr('id') + '"]').tab('show');
            $('#tabs a[href="#' + jQuery(validator.errorList[0].element).closest(".question").attr('id') + '"]').tab('show');
        },
        errorElement: 'span',
        errorPlacement: function(error, element) {
            if (element.attr('id') == "content") {
                error.addClass('invalid-feedback');
                error.insertAfter(element.closest('.form-group'));
            } else {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            }

            if (element.attr("type") == "radio" || element.attr("id") == "description_en" || element.attr("id") == "description_es") {
                error.insertAfter($(element).parent().children().last());
            } else {
                error.insertAfter($(element));
            }
        },
        submitHandler: function(form) {
            addOverlay();
            form.submit();
        }
    });

    var max_fields_limit_c = 10; //set limit for maximum input fields
    var j = 0;
    var max_fields_limit = 10; //set limit for maximum input fields
    var i = 0;
    var max_fields_limit_o = 10; //set limit for maximum input fields
    var o = 0;
    $(document).on('click','.choice_option_add', function(e){
        e.preventDefault();
            var cu_index = $(this).attr("data-index");
            var current_length = $(".choice_op_dynamic_table_en_"+cu_index).find("tr").length;
            if(current_length == 0){
                ++o;
            }
            else{
                o = o + current_length;
            }
            var $text_input = $(this).parents('table').find('.index_input').val();
            var $type = "text";
            $(".choice_op_dynamic_table_en_"+cu_index).append('<tr class="attribute_op_en_'+o+'"><td ><input type="'+$type+'" name="attribute['+cu_index+'][en][options]['+o+']" class="form-control attribute_value" /></td> <td><input type="radio" name="attribute['+cu_index+'][en][is_right]['+cu_index+'][]" value="'+o+'" class="check_radio" id="en_'+o+cu_index+'" data-value='+o+' data-index='+cu_index+'></td>   <td><button type="button" class="btn btn-danger remove-op" data-index='+o+'>Remove</button></td> </tr>');
            $(".choice_op_dynamic_table_es_"+cu_index).append('<tr class="attribute_op_es_'+o+'"><td ><input type="'+$type+'" name="attribute['+cu_index+'][es][options]['+o+']" class="form-control attribute_value" /></td><td><input type="radio" name="attribute['+cu_index+'][es][is_right]['+cu_index+'][]" value="'+o+'" class="check_radio" id="es_'+o+cu_index+'" data-value='+o+' data-index='+cu_index+' ></td>   <td><button type="button" class="btn btn-danger remove-op" data-index='+o+'>Remove</button></td> </tr>');

            $("input[name='attribute["+cu_index+"][en][options]["+o+"]']").rules( "add", {
                required: true,
                messages: {
                    required: "Please enter value.",
                }
            });
    });
    $(".add_attribute").click(function(e){
        e.preventDefault();
        
        var current_length = $(".dynamicTable_en").find("table").length;
        if(current_length == 0){
            ++j;
        }
        else{
            j = j + current_length;
        }
        
        //if(j < max_fields_limit_c){ //check conditions
          //  ++j;
            $(".dynamicTable_en").append('<table class="table table-bordered choice_option_dynamic_table_en_'+j+'"><tr><th>Question</th><th>Action</th></tr><tr><td><input type="text" name="attribute['+j+'][en][name]" data-index='+j+' class="form-control index_input" /></td><td><button type="button" class="btn btn-danger remove-choice" data-index="'+j+'">Remove</button></td></tr><tr><td colspan="2"><label for="example-text-input" class="col-form-label">You can add your options below</label><table class="table table-bordered choice_op_dynamic_table_en_'+j+'">  <tr><th>Options</th><th>Right Answer</th><th>Action</th></tr><tr>  <td><input type="text" name="attribute['+j+'][en][options][0]" class="form-control attribute_value" /></td><td><input type="radio" class="check_radio" name="attribute['+j+'][en][is_right]['+j+'][]" value="0" checked id="en_'+j+j+'" data-value='+j+' data-index='+j+' ></td>  <td><button type="button" name="choice_option_add" class="btn btn-success bto choice_option_add" style="background-color: #4F473B;border-color: #4f473B;" data-index="'+j+'">Add More option</button></td>  </tr></table> </td></tr></tr></table>');
            $(".dynamicTable_es").append('<table class="table table-bordered choice_option_dynamic_table_es_'+j+'"><tr><th>Question</th><th>Action</th></tr><tr><td><input type="text" name="attribute['+j+'][es][name]" data-index='+j+' class="form-control index_input" /></td><td><button type="button" class="btn btn-danger remove-choice" data-index="'+j+'">Remove</button></td></tr><tr><td colspan="2"><label for="example-text-input" class="col-form-label">You can add your options below</label><table class="table table-bordered choice_op_dynamic_table_es_'+j+'">  <tr><th>Options</th><th>Right Answer</th><th>Action</th></tr><tr>  <td><input type="text" name="attribute['+j+'][es][options][0]" class="form-control attribute_value" /></td><td><input type="radio" class="check_radio" name="attribute['+j+'][es][is_right]['+j+'][]" value="0" checked id="es_'+j+j+'"  data-value='+j+'data-index='+j+' ></td>  <td><button type="button" name="choice_option_add" class="btn btn-success bto choice_option_add" style="background-color: #4F473B;border-color: #4f473B;" data-index="'+j+'">Add More option</button></td>  </tr></table> </td></tr></tr></table>');
        //}
        $("input[name='attribute["+j+"][en][name]']").rules( "add", {
            required: true,
            messages: {
                required: "Please enter value.",
            }
        });
        $("input[name='attribute["+j+"][en][options][0]']").rules( "add", {
            required: true,
            messages: {
                required: "Please enter value.",
            }
        });
        $("input[name='attribute["+j+"][en][is_right]["+j+"][]']").rules( "add", {
            required: true,
            messages: {
                required: "Please select right answer.",
            }
        });
        $("input[name='attribute["+j+"][es][name]']").rules( "add", {
            required: true,
            messages: {
                required: "Please enter value.",
            }
        });
        $("input[name='attribute["+j+"][es][options][0]']").rules( "add", {
            required: true,
            messages: {
                required: "Please enter value.",
            }
        });
        $("input[name='attribute["+j+"][es][is_right]["+j+"][]']").rules( "add", {
            required: true,
            messages: {
                required: "Please select right answer.",
            }
        });
    });
    $(document).on('change', '.index_input', function(e){  
        var current_input_index = $(this).attr('data-index');
        var current_val = $(this).val();
        $(".choice_op_dynamic_table_en_"+current_input_index).find(".attribute_value").each(function() {
            $(this).attr("type",'text');
            $(this).val("");
        });
        $(".choice_op_dynamic_table_es_"+current_input_index).find(".attribute_value").each(function() {
            $(this).attr("type",'text');
            $(this).val("");
        });
    });

    $(document).on('click', '.remove-op', function(e){  
        var current_index_op = $(this).attr("data-index");
        var  current_op_en_id = $(".attribute_op_en_"+current_index_op).find(".remove-op").attr("data-unique-id");
        var  current_op_es_id = $(".attribute_op_es_"+current_index_op).find(".remove-op").attr("data-unique-id");
        console.log(current_index_op);
        $(".attribute_op_es_"+current_index_op).remove(); o--;
        $(".attribute_op_en_"+current_index_op).remove(); o--;
    });
    $(document).on('click', '.remove-choice', function(e){  
        e.preventDefault();
        var current_index_op = $(this).attr("data-index");
        var  current_unique_id = $(this).attr("data-unique-id");
        $(".choice_option_dynamic_table_en_"+current_index_op).remove(); j--;
        $(".choice_option_dynamic_table_es_"+current_index_op).remove(); j--;
        $("input[name='attribute["+current_index_op+"][en][name]']").rules("remove");
        $("input[name='attribute["+current_index_op+"][en][options][0]']").rules("remove");
        $("input[name='attribute["+current_index_op+"][en][is_right]["+current_index_op+"][]']").rules("remove");
        $("input[name='attribute["+current_index_op+"][es][name]']").rules("remove");
        $("input[name='attribute["+current_index_op+"][es][options][0]']").rules("remove");
        $("input[name='attribute["+current_index_op+"][es][is_right]["+current_index_op+"][]']").rules("remove");
       // $(this).parent().parent().parent().remove(); j--;
    });
    $(document).on('click', '.check_radio', function(e){  
        var ciop = $(this).attr("data-index");
        var cvalue = $(this).attr("data-value");
        $('#es_'+cvalue+ciop).prop('checked', true);
        $('#en_'+cvalue+ciop).prop('checked', true);
    });
    $(document).ready(function () {
        $('#levels_id').on('change', function () {
            var idState = this.value;
            $("#level_phases_id").html('');
            $.ajax({
                url: "{{ route('admin.level-articles.get_phases') }}",
                type: "POST",
                data: {
                    state_id: idState,
                    _token: '{{csrf_token()}}'
                },
                success: function (res) {
                    console.log(res);
                    $('#level_phases_id').html('<option value="">--Select Phase--</option>');
                    $.each(res, function (key, value) {
                        $("#level_phases_id").append('<option value="' + value
                            .id + '">' + value.name + '</option>');
                    });
                }
            });
        });
    });
</script>
@endsection