@section('myJS')
    <!-- <script src="{{url('/')}}/js/admin/admin.js"></script> -->
    <script src="{{url('/')}}/js/admin/output.js"></script>
    <script src="https://cdn.tiny.cloud/1/uhol9w0cvgh8wa575ima40jko4bkyipyi2w958htzr8kbjii/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

@endsection

@for($i = 1; $i <= $maxLevels; $i++)
    <div class="row" style="margin: 0px;">
        <div class="col-md-3 text-center">
            @if($i == $maxLevels)
                <h4>Collection</h4>
            @else
                <h4>Category{{$i}}</h4>
            @endif
        </div>
        <div class="col-md-9">
            <form class="OutputLayoutForm" method="post">
                @if(in_array($i,array_keys($schemaArray)))
                    @php $OutputSchemaContent = $schemaArray[$i]; @endphp
                @else
                    @php $OutputSchemaContent = ''; @endphp
                @endif
                <textarea name="OutputSchemaContent" class="tinymce">{{$OutputSchemaContent}}</textarea>
                <br>
                <input type="hidden" name="CatalogID" value="{{$catalogID}}">
                <input type="hidden" name="LayoutID" value="{{$layoutID}}">
                <input type="hidden" name="catalogLevel" value="{{$i}}">
                <button type="submit" class="btn btn-default set-btn editOutput" onclick="return false;" style="">Save</button> 
            </form>
        </div>
    </div>
    <br>
    <br>
@endfor
<script>
    tinymce.init({
        selector: 'textarea.tinymce',
        height: 300,
        plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table paste imagetools wordcount textcolor'
        ],
        toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image forecolor backcolor',
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
        table_header_type: 'cells'
    });



    $(".editOutput").click(function(e){
        console.log('hello');
        console.log($(this).parent().serialize());

        tinyMCE.triggerSave();
        
        $.ajax({
            type: "POST",
            url: base_url + 'updateOutputSchema',
            data: $(this).parent().serialize(),
            success: function(response){
                // console.log(response);
                $('#layoutListTable').html(response);
            }
        });
     });
</script>