@extends('layout.default')

@section('content')
    <div class="col-md-6">
        <x-card>
            <x-slot name="title">
                <h3 class="card-title">{{ __('Kelola Template Folder') }}</h3>
            </x-slot>

            <x-slot name="toolbar">
                @can('template-folder.create')
                    <button onclick="create()" type="button" class="btn btn-primary font-weight-bolder">
                        <i class="fas fa-plus icon-sm"></i> {{ __('New Data') }}</button>
                @endcan
            </x-slot>

            <div class="dd" id="template_folder_tree">
            </div>

            <x-slot name="footerLeft">
                <button id="btn_save_changes" onclick="updateStructure()" type="button"
                    class="btn btn-primary font-weight-bolder"
                    disabled="disabled">{{ __('Simpan Perubahan Struktur') }}</button>
            </x-slot>
        </x-card>
    </div>


    <form id="form" method="POST" action="javascript:;">
        <div class="modal fade" id="addFolderModal" data-backdrop="static" tabindex="-1" role="dialog"
            aria-labelledby="staticBackdrop" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addFolderModalLabel">Tambah Folder</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <i aria-hidden="true" class="ki ki-close"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        @csrf
                        <input type="hidden" id="_action" name="_action">
                        <input type="hidden" id="id" name="id">

                        <x-inputs.form-group for="name" label="{{ __('Nama') }}" required="true">
                            <x-inputs.text id="name" name="name" type="text" value="" />
                        </x-inputs.form-group>

                    </div>
                    <div class="modal-footer">
                        <button type="button" id="btn_submit" class="btn btn-primary font-weight-bold">Simpan</button>
                        <button type="button" class="btn btn-light-primary font-weight-bold"
                            data-dismiss="modal">Batal</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection

@push('page_style')
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nestable2/1.6.0/jquery.nestable.min.css">

    <style type="text/css">
        .dd-hover>.dd-handle {
            background: #2ea8e5 !important;
        }

        .dd3-content {
            display: block;
            /* height: 30px; */
            margin: 5px 0;
            padding: 5px 10px 5px 40px;
            color: #333;
            text-decoration: none;
            font-weight: bold;
            border: 1px solid #ccc;
            background: #fafafa;
            background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
            background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
            background: linear-gradient(top, #fafafa 0%, #eee 100%);
            -webkit-border-radius: 3px;
            border-radius: 3px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
        }

        .dd3-content:hover {
            color: #2ea8e5;
            background: #fff;
        }

        .dd-dragel>.dd3-item>.dd3-content {
            margin: 0;
        }

        .dd3-item>button {
            margin-left: 30px;
        }

        .dd3-handle {
            position: absolute;
            margin: 0;
            left: 0;
            top: 0;
            cursor: pointer;
            width: 30px;
            text-indent: 30px;
            white-space: nowrap;
            overflow: hidden;
            border: 1px solid #aaa;
            background: #ddd;
            background: -webkit-linear-gradient(top, #ddd 0%, #bbb 100%);
            background: -moz-linear-gradient(top, #ddd 0%, #bbb 100%);
            background: linear-gradient(top, #ddd 0%, #bbb 100%);
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .dd3-handle:before {
            content: '≡';
            display: block;
            position: absolute;
            left: 0;
            top: 3px;
            width: 100%;
            text-align: center;
            text-indent: 0;
            color: #fff;
            font-size: 25px;
            font-weight: normal;
        }

        .dd3-handle:hover {
            background: #ddd;
        }

    </style>
@endpush

@push('page_script')
    <script src="//cdnjs.cloudflare.com/ajax/libs/nestable2/1.6.0/jquery.nestable.min.js"></script>

    {!! JsValidator::formRequest('App\Http\Requests\TemplateFolder\SaveTemplateFolderRequest', '#form') !!}

    <script>
        var templateFolders = @json($templateFolders);
        var changed = false;

        $(document).ready(function() {
            createNestable();

            $('#form').on('submit', function(e) {
                e.preventDefault();
                $('#btn_submit').click();
            })

            $('#btn_submit').on('click', function(e) {
                const action = $('#_action').val();
                if (action === 'create') {
                    return store();
                }

                if (action === 'edit') {
                    return update();
                }
            });
        });

        function refresh() {
            MyApp.ajaxGet("{{ route('template_folder.data') }}", null, function(response) {
                window.templateFolders = response;
                createNestable();
            });
        }

        function create() {
            $('#form')[0].reset();
            $('#_action').val('create');

            $('#addFolderModal').modal('show');
        }

        function store() {
            if (!$('#form').validate().form()) {
                return false;
            }

            const url = "{{ route('template_folder.store') }}";
            const data = $('#form').serialize();
            MyApp.ajaxPost(url, data, function(response) {
                MyApp.alert("{{ __('Save') }}", "{{ __('Data saved successfully') }}", "success", () => {
                    refresh();
                    $('#addFolderModal').modal('hide');
                });
            });
        }

        function edit(id, name) {
            $('#form')[0].reset();
            $('#_action').val('edit');
            $('#id').val(id);
            $('#name').val(name);

            $('#addFolderModal').modal('show');
        }

        function update() {
            if (!$('#form').validate().form()) {
                return false;
            }

            const id = $('#id').val();
            const url = `{{ route('template_folder.index') }}/${id}`;
            const data = $('#form').serialize();
            MyApp.ajaxPut(url, data, function(response) {
                MyApp.alert("{{ __('Save') }}", "{{ __('Data updated successfully') }}", "success", () => {
                    refresh();
                    $('#addFolderModal').modal('hide');
                });
            });
        }

        function destroy(id) {
            const sendRequest = () => {
                const url = `{{ route('template_folder.index') }}/${id}`;
                MyApp.ajaxDelete(url, null, function(response) {
                    MyApp.alert("{{ __('Save') }}", "{{ __('Data deleted successfully') }}", "success",
                        () =>
                        refresh());
                });
            };

            return MyApp.confirm("{{ __('Confirm') }}", "{{ __('Are you sure to delete this data?') }}", "warning",
                sendRequest);
        }

        function createNestable() {
            var html = '<ol class="dd-list">'

            templateFolders.forEach(el => {
                html += buildItem(el);
            });

            html += '</ol>';

            $('#template_folder_tree').html(html);
            $('#template_folder_tree').nestable('destroy');
            $('#template_folder_tree').nestable({
                maxDepth: 3,
                group: 1,
            }).on('change', function() {
                changed = true;
                $("#btn_save_changes").prop('disabled', false);
            });

            changed = false;
            $("#btn_save_changes").prop('disabled', true);
        }

        function buildItem(item) {
            var html = `
                <li class="dd-item dd3-item" data-id="${item.id}" data-name="${item.name}">
                            <div class="dd-handle dd3-handle">X</div>
                            <div class="dd3-content">
                                ${item.name}
                                <div class="float-right">
                                    <a href="#" onclick="edit('${item.id}', '${item.name}')" class="btn btn-link-primary font-weight-bold mr-2">
                                        <span class="fas fa-edit"></span>
                                    </a>
                                    <a href="#" onclick="destroy(${item.id})" class="btn btn-link-danger font-weight-bold">
                                        <span class="fas fa-trash"></span>
                                    </a>
                                </div>
                            </div>
            `;

            if (item.children.length > 0) {

                html += "<ol class='dd-list'>";
                $.each(item.children, function(index, sub) {
                    html += buildItem(sub);
                });
                html += "</ol>";

            }

            html += "</li>";

            return html;
        }

        function updateStructure() {
            if (!changed) {
                return false;
            }

            const structure = $("#template_folder_tree").nestable('serialize');
            MyApp.ajaxPost("{{ route('template_folder.update_structure') }}", {
                structure
            }, () => refresh());
        }
    </script>
@endpush