@extends('layouts.master')
@section('content')
<div class="row page-titles">
    <div class="col-md-5 align-self-center">
        <h4 class="text-themecolor">Rapor Content</h4>
    </div>

</div>
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="row align-items-center g-0">
                    <div class="form-group row">
                        <label for="" class="col-auto col-form-label mx-2" style="font-weight: bold;">Stage :</label>
                        <div class="col-auto">
                            <select name="" id="stage" class="form-control col-auto" >
                                <option value="preschool">Preschool</option>
                                <option value="elementary">Elementary</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="" class="col-auto mx-2 col-form-label" style="font-weight: bold;" >Semester : </label>
                        <div class="col-auto">
                            <select name="" id="semester" class="form-control" >
                                    <option value="1">First Term</option>
                                    <option value="2">Second Term</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row ">
                        <button type="button" class="btn btn-info  btn-sm  mx-4 col-auto" id="search-btn" onClick="searchData()"><i class="fa fa-search"></i></button>
                    </div>
                </div>
                <hr>
                <form id="templateForm" >
                    <div class="row justify-content-between align-items-center">
                        <div class="col-9" id="template-data">
                        
                        </div>
                        <div class="col-3 text-right">
                            <button type="button" class="btn btn-warning btn-rounded " id="edit-btn" onClick="DisableForm()"><i class="fa fa-pencil"></i> Edit Template</button>&nbsp;
                            <!-- <div class="btn-save"> -->
                            <button type="button" class="btn btn-success btn-rounded btn-save" id="submit"> Save</button>&nbsp;
                            <button type="button" class="btn btn-danger btn-rounded btn-save" onClick="DisableForm()"> Cancel</button>
                        </div>
                            
                            <!-- </div> -->

                    </div>
                    <div class="row justify-content-between align-items-center mt-4">
                        <div class="col-12" id="content-data">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script>
    var token = $("meta[name='csrf-token']").attr("content");
    var isDisabled = true;
    
    $(document).ready(function() {
        $('.btn-save').hide();
        let stage = $('#stage').val();
        // getContent(stage);
    })
    function initializeJsSwitch(){
        $('.js-switch').each(function() {
            new Switchery($(this)[0], $(this).data());
        });
    }
    function searchData() {
        let stage = $('#stage').val();
        let semester = $('#semester').val();

        $.ajax({
            dataType: 'json',
            processData: false,
            contentType: false,
            url: 'rapor-content' + '/' + stage +'/'+semester+ '/edit',
            type: 'GET',
            success: function([template,response]) {
                $('#content-data').empty()
                $('#template-data').empty()
                console.log(template)
                if(template.teacher_comment == 1){
                    $('#template-data').append('\
                        <div class="row form-group">\
                            <div class="col-2">\
                                <Label style="font-weight: bold;">Teacher Comment</Label>\
                            </div>\
                            <div class="col-10">\
                                <input type="hidden" name="id_template" value="' + template.id + '">\
                                <input type="checkbox" name="teacher_comment" class="js-switch switch-input teacher_comment" data-size="small" data-color="#28a745" data-secondary-color="#a9a9a9"  checked="checked" class="form-control">\
                            </div>\
                        </div>\
                    ')
                }else{
                    $('#template-data').append('\
                       <div class="row form-group">\
                            <div class="col-2">\
                                <Label style="font-weight: bold;">Teacher Comment</Label>\
                            </div>\
                            <div class="col-10">\
                                <input type="hidden" name="id_template" value="' + template.id + '">\
                                <input type="checkbox" name="teacher_comment" class="js-switch switch-input teacher_comment" data-size="small" data-color="#28a745" data-secondary-color="#a9a9a9" data-switchery="true"  class="form-control">\
                            </div>\
                        </div>\
                    ')
                }
                initializeJsSwitch()
                for (var i = 0; i < response.length; i++) {
                    let content = response[i].content ?? ''
                    $('#content-data').append('\
                        <div class="row form-group">\
                            <div class="col-2">\
                                <Label><b>' + response[i].title + '</b></Label>\
                            </div>\
                            <div class="col-10">\
                                <input type="hidden" name="content_ids[]" value="' + response[i].id + '">\
                                <textarea class="summernote" name="contents['+response[i].id+']">' + content + '</textarea>\
                            </div>\
                        </div>\
                    ');
                }
                initialize_summernote()


            },
            error: function(xhr) {}
        });
    }

    function initialize_summernote() {
        $('.summernote').each(function() {
            $(this).summernote({
                height: 200,
                airMode: false,
                popover: {
                    air: [],
                    image: [],
                    link: [],
                    table: []
                },
                toolbar: [
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['font', ['fontsize', 'color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['insert', ['link', 'picture', 'video']],
                    ['view', ['fullscreen', 'codeview']]
                ],
                callbacks: {
                    onImageUpload: function(files) {
                        let editor = $(this);
                        let data = new FormData();
                        data.append("image", files[0]);
                        data.append("_token", token);

                        $.ajax({
                            url: 'rapor-content/upload-image',
                            type: 'POST',
                            data: data,
                            contentType: false,
                            processData: false,
                            success: function(url) {
                                editor.summernote('insertImage', url);
                            },
                            error: function() {
                                alert('Upload gagal');
                            }
                        });
                    },
                    onInit: function() {
                        $(this).summernote('disable'); // bisa langsung disable saat inisialisasi
                    }
                }
            })
        })
       
        $('.note-btn').attr('title', '');
    }

    function editForm() {
        method = "edit";

        $('.btn-save').show();
        DisableForm();

    }

    function DisableForm() {
        if (isDisabled) {
            $('#stage').prop('disabled', true);
            $('#semester').prop('disabled', true);
            method = "edit";
            $('#edit-btn').hide();
            $('.btn-save').show();
            $('.summernote').each(function() {
                $(this).summernote({
                    height: 200
                }).summernote('enable');
            });

        } else {
            $('#stage').prop('disabled', false);
            $('#semester').prop('disabled', false);
            method = "";
            $('#edit-btn').show();
            $('.btn-save').hide();
            $('.summernote').each(function() {
                $(this).summernote({
                    height: 200
                }).summernote('disable');
            });
        }

        isDisabled = !isDisabled;
    }
    $('#submit').click(function(){
        // let formData = new FormData();
        // $('.summernote').each(function(i) {
        //     const content = $(this).summernote('code');
        //     formData.append(`contents[${i}]`, content);
        // });
        let formData = $('#templateForm').serialize();
        console.log(formData);
        $.ajax({
            url: 'rapor-content', // sesuaikan route kamu
            method: 'POST',
            data: formData,
            // contentType: false,
            // processData: false,
            headers: {
                'X-CSRF-TOKEN': token 
            },
            success: function(response) {
                // alert('Data berhasil disimpan!');
                DisableForm();
                $.toast({
                        heading: 'Enabled',
                        text: 'Data saved successfully ',
                        icon: 'success',
                        loader: true,        // Change it to false to disable loader
                        loaderBg: '#9EC600',  // To change the background
                        hideAfter: 5000,
                        position: 'top-right',
                    });
            },
            error: function(xhr) {
                alert('Gagal menyimpan data!');
                console.log(xhr.responseText);
            }
        });
    })
    function setSwitchReadonly(selector, readonly = true) {
    const checkbox = document.querySelector(selector);
    const switchery = checkbox.nextElementSibling; // .switchery

    if (readonly) {
        // Prevent user interaction
        checkbox.dataset.readonly = "true";
        switchery.classList.add('readonly');
    } else {
        // Allow user interaction
        delete checkbox.dataset.readonly;
        switchery.classList.remove('readonly');
    }
    }

</script>
@endsection