@extends('layouts.index')
@section('title')
    Form Templates
@endsection
@section('css')
    <link href="{{ asset('back') }}/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.min.css" integrity="sha512-EZSUkJWTjzDlspOoPSpUFR0o0Xy7jdzW//6qhUkoZ9c4StFkVsp9fbbd0O06p9ELS3H486m4wmrCELjza4JEog==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        .dropify-message p{
            text-align: center;
        }
    </style>
@endsection
@section('content')
    <div class="page-titles">
        <div class="row">
            <div class="col-lg-8 col-md-6 col-12 align-self-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 d-flex align-items-center">
                        <li class="breadcrumb-item">
                            <a href="{{url('/')}}" class="link"><i class="ri-home-3-line fs-5"></i></a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{url('forms')}}" class="link">Forms</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            Templates
                        </li>
                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Templates</h1>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <!-- ============================================================= -->
    <!-- Container fluid  -->
    <!-- ============================================================= -->
    <div class="container-fluid">
        <!-- ============================================================= -->
        <!-- Start Page Content -->
        <!-- ============================================================= -->
        <div class="row">
            <!-- Column -->
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <div class="card-title">
                            Detail
                        </div>
                        <div class="form-group mb-3">
                            <label for="">Template Name</label>
                            <h5>{{$detail->nama ?: '-'}}</h5>
                        </div>
                        <div class="form-group mb-3">
                            <label for="">Template File</label>
                            <br>
                            <a href="{{$detail->template ? url(Storage::url($detail->template)) : '#'}}" class="btn btn-sm btn-primary" download=""><i class="fa fa-download"></i> Download</a>
                            <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#previewModal" class="btn btn-sm btn-outline-primary"><i class="fa fa-eye"></i> Preview</a>
                        </div>
                    </div>
                </div>
                <div class="d-grid gap-2 d-md-block">
                    <a href="#" class="btn btn-sm btn-outline-info btn-rounded" data-bs-toggle="modal" data-bs-target="#updateModal"><i class="fa fa-edit"></i> Edit</a>
                    <a href="javascript:void(0)" onclick="destroy()" class="btn btn-sm btn-outline-danger btn-rounded"><i class="fa fa-trash"></i> Delete</a>
                  </div>
            </div>
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body">
                        <div class="card-title">
                            Form Builder
                        </div>
                        <form id="form-builder" method="POST">
                            <div id="fb-editor"></div>
                            <textarea rows="20" class="form-control" name="json_form" id="data" style="display: none"></textarea>
                            <button type="submit" id="submitFormBuilder" class="btn btn-sm btn-outline-primary" style="display: none"><i class="fa fa-save"></i> Submit</button>
                        </form>
                    </div>
                </div>
            </div>
            <!-- Column -->
        </div>
        
        <!-- Modal Body -->
        <!-- if you want to close by clicking outside the modal, delete the last endpoint:data-bs-backdrop and data-bs-keyboard -->
        <div class="modal fade" id="previewModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" role="dialog" aria-labelledby="modalTitleId" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalTitleId">Detail Template</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <iframe src="https://docs.google.com/viewer?url={{url(Storage::url($detail->template))}}&embedded=true" width="100%"
                                height="700"
                                style="border: none;"></iframe>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header d-flex align-items-center">
                        <h5 class="modal-title" id="updateModalLabel">
                            <i class="ti-marker-alt me-2"></i> Edit Template
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="ubah" enctype="multipart/form-data">
                            <div class="form-group mb-3">
                                <label for="">Name <sup class="text-danger" title="Required">*</sup></label>
                                <input type="text" class="form-control" name="nama" id="nama" value="{{$detail->nama}}" placeholder="Enter template name">
                                <small class="text-danger" id="nama_validation"></small>
                            </div>
                            <div class="form-group mb-3">
                                <label for="">Template File <sup class="text-danger" title="Required">*</sup></label>
                                <input type="file" class="dropify" name="template" data-allowed-file-extensions="doc docx" data-default-file="{{url(Storage::url($detail->template))}}" id="template">
                                <small class="text-danger" id="template_validation"></small>
                            </div>
                            <div class="form-group mb-3">
                                <label for="">Requested By Lock <sup class="text-danger">*</sup></label>
                                <select name="is_requested_by_lock" class="form-select" id="">
                                    <option value="1" {{$detail->is_requested_by_lock == 1 ? 'selected' : null }}>Yes</option>
                                    <option value="0" {{$detail->is_requested_by_lock == 0 ? 'selected' : null }}>No</option>
                                </select>
                                <small class="text-danger" id="is_requested_by_lock_validation"></small>
                            </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button"
                            class="
                        btn btn-light-danger
                        text-danger
                        font-weight-medium
                        rounded-pill
                        px-4
                    "
                            data-bs-dismiss="modal">
                            Close
                        </button>
                        <button type="submit" class="btn btn-primary rounded-pill px-4">
                            Save
                        </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        
        
        <!-- Optional: Place to the bottom of scripts -->
        <script>
            const myModal = new bootstrap.Modal(document.getElementById('modalId'), options)
        </script>
        <!-- ============================================================= -->
        <!-- End PAge Content -->
        <!-- ============================================================= -->
    </div>
@endsection
@section('js')
    <!--This page plugins -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js" integrity="sha512-8QFTrG0oeOiyWo/VM9Y8kgxdlCryqhIxVeRpWSezdRRAvarxVtwLnGroJgnVW9/XBRduxO/z1GblzPrMQoeuew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://formbuilder.online/assets/js/form-builder.min.js"></script>
    <script>

        const global_id = "{{$detail->id}}";
        const csrf_token = "{{csrf_token()}}";

        function hideValidation() {
            const validation = document.querySelectorAll(`[id$="_validation"]`)
            for(var i = 0; i < validation.length; i++){
                
                validation[i].style.display = "none";
            }
        }

        jQuery(function($) {
            var fbEditor = document.getElementById('fb-editor'),
            options = {
                defaultFields: {!!$fields!!},
                persistDefaultFields: true,
                onSave: function(evt, formData) {
                    $('#data').val(formData);
                    $('#submitFormBuilder').show();
                },
                onOpenFieldEdit: function(editPanel) {
                    // alert('a field edit panel was opened');

                    $('#submitFormBuilder').hide();
                },
                onAddField: function(fieldId) {
                    $('#submitFormBuilder').hide();
                },
                // onAddOption: (optionTemplate, optionIndex) => {

                // 	$('#submitFormBuilder').hide();
                // },
                onCloseFieldEdit: function(editPanel) {
                    // alert('a field edit panel was closed')

                    $('#submitFormBuilder').hide();
                },
                onClearAll: function(formData) {
                    // alert('all fields removed');

                    $('#submitFormBuilder').hide();
                },
                disabledAttrs: [
                    'access',
                    'required',
                    'inline',
                    'multiple',
                    'other'
                ],
                disableFields: ['autocomplete'],
                typeUserAttrs: {
                    text: {
                        autofill: {
                            label: 'autofill',
                            options: {
                                'nonaktif': 'Nonaktif',
                                'aktif': 'Aktif'
                            }
                        },
                        reference_value: {
                            label: 'Reference Field Value',
                            value: '',
                            placeholder: 'Input field name from this form'
                        },
                        re_table: {
                            label: 'Table',
                            options: {!!$tables!!}
                        },
                        re_value: {
                            label: 'Value',
                            options: {
                                '': 'Select'
                            }
                        },
                        re_event: {
                            label: 'Event',
                            options: {
                                '': 'Select',
                                'onchange': 'onChange',
                                'onclick': 'onClick',
                                'onkeyup': 'onKeyUp'
                            }
                        }
                    },
                    select: {
                        lookup: {
                            label: 'Lookup',
                            options: {
                                'costumize': 'Costumize',
                                'database': 'Database',
                            }
                        },
                        table: {
                            label: 'Table',
                            options: {!!$tables!!}
                        },
                        t_label: {
                            label: 'Label',
                            options: {
                                '': 'Select'
                            }
                        },
                        t_value: {
                            label: 'Value',
                            options: {
                                '': 'Select'
                            }
                        }
                    },
                    'checkbox-group': {
                        lookup: {
                            label: 'Lookup',
                            options: {
                                '': 'Select',
                                'costumize': 'Costumize',
                                'database': 'Database',
                            }
                        },
                        table: {
                            label: 'Table',
                            options: {!!$tables!!}
                        },
                        t_label: {
                            label: 'Label',
                            options: {
                                '': 'Select'
                            }
                        },
                        t_value: {
                            label: 'Value',
                            options: {
                                '': 'Select'
                            }
                        }
                    },
                    header: {
                        name: {
                            label: 'Name',
                            value: 'tes'
                        }
                    },
                    'radio-group': {
                        lookup: {
                            label: 'Lookup',
                            options: {
                                '': 'Select',
                                'costumize': 'Costumize',
                                'database': 'Database',
                            }
                        },
                        table: {
                            label: 'Table',
                            options: {!!$tables!!}
                        },
                        t_label: {
                            label: 'Label',
                            options: {
                                '': 'Select'
                            }
                        },
                        t_value: {
                            label: 'Value',
                            options: {
                                '': 'Select'
                            }
                        }
                    },
                },
                typeUserEvents: {
                text: {
                    onadd: function(fld) {
                        var $tableField = $(".fld-re_table", fld);
                        var $tableWrap = $tableField.parents(".re_table-wrap:eq(0)");
                        var $t_valueField = $(".fld-re_value", fld);
                        var $t_valueWrap = $t_valueField.parents(".re_value-wrap:eq(0)");
                        var $t_eventField = $(".fld-re_event", fld);
                        var $t_eventWrap = $t_eventField.parents(".re_event-wrap:eq(0)");
                        var $reference_valueField = $(".fld-reference_value", fld);
                        var $reference_valueWrap = $reference_valueField.parents(".reference_value-wrap:eq(0)");
                        var tbl = $(".fld-re_table", fld).find(":selected").val();
                        var name = $(".fld-name", fld).val();
                        var autofill = $(".fld-autofill", fld).val();

                        if (tbl !== '') {
                            $.post("{{route('forms.templates.column')}}", {
                                '_token': csrf_token,
                                'tabel': tbl
                            }, function(obj) {
                                $(".fld-re_value", fld).html(obj);
                                $.post("{{route('forms.templates.selected')}}", {
                                    '_token': "{{csrf_token()}}",
                                    'name' : name
                                },
                                function(obj) {
                                    $(".fld-re_value", fld).val(obj.t_value);
                                });
                            });
                        }

                        if (autofill == 'nonaktif') {
                            $tableField.prop("disabled", true);
                            $tableWrap.hide();
                            $t_eventField.prop("disabled", true);
                            $t_eventWrap.hide();
                            $t_valueField.prop("disabled", true);
                            $t_valueWrap.hide();
                            $reference_valueField.prop("disabled", true);
                            $reference_valueWrap.hide();
                        } else {
                            $tableField.prop("disabled", false);
                            $tableWrap.show();
                            $t_eventField.prop("disabled", false);
                            $t_eventWrap.show();
                            $t_valueField.prop("disabled", false);
                            $t_valueWrap.show();
                            $reference_valueField.prop("disabled", false);
                            $reference_valueWrap.show();
                        }

                        fld.querySelector(".fld-autofill").onchange = function(e) {
                            var toggle = e.target.value === "aktif";
                            $tableField.prop("disabled", !toggle);
                            $tableWrap.toggle(toggle);
                            $t_valueField.prop("disabled", !toggle);
                            $t_valueWrap.toggle(toggle);
                            $t_eventField.prop("disabled", !toggle);
                            $t_eventWrap.toggle(toggle);
                            $reference_valueField.prop("disabled", !toggle);
                            $reference_valueWrap.toggle(toggle);
                        };

                        fld.querySelector(".fld-re_table").onchange = function(e) {
                            var tabel = e.target.value;
                            $.post("{{route('forms.templates.column')}}", {
                                '_token' : "{{csrf_token()}}",
                                'tabel' : tabel
                            }, function(obj) {
                                $(".fld-re_value", fld).html(obj);
                            });
                        };
                    }
                },
                select: {
                    onadd: function(fld) {
                        var $tableField = $(".fld-table", fld);
                        var $tableWrap = $tableField.parents(".table-wrap:eq(0)");
                        var $t_valueField = $(".fld-t_value", fld);
                        var $t_valueWrap = $t_valueField.parents(".t_value-wrap:eq(0)");
                        var $t_labelField = $(".fld-t_label", fld);
                        var $t_labelWrap = $t_labelField.parents(".t_label-wrap:eq(0)");
                        var $optionsField = $(".sortable-options", fld);
                        var $optionsWrap = $optionsField.parents(".field-options:eq(0)");
                        var tbl = $(".fld-table", fld).find(":selected").val();
                        var name = $(".fld-name", fld).val();
                        var lookup = $(".fld-lookup", fld).val();
                        if (tbl !== '') {
                            $.post("{{route('forms.templates.column')}}", {
                                '_token': csrf_token,
                                'tabel': tbl
                            }, function(obj) {
                                $(".fld-t_value", fld).html(obj);
                                $(".fld-t_label", fld).html(obj);
                                $.post("{{route('forms.templates.selected')}}", {
                                    '_token': "{{csrf_token()}}",
                                    'name' : name
                                },
                                function(obj) {
                                    $(".fld-t_label", fld).val(obj.t_label);
                                    $(".fld-t_value", fld).val(obj.t_value);
                                });
                            });
                        }
                        if (lookup == 'database') {
                            $optionsField.prop("disabled", true);
                            $optionsWrap.hide();
                        } else if (lookup == 'costumize') {
                            $tableField.prop("disabled", true);
                            $tableWrap.hide();
                            $t_labelField.prop("disabled", true);
                            $t_labelWrap.hide();
                            $t_valueField.prop("disabled", true);
                            $t_valueWrap.hide();
                        } else {
                            $optionsField.prop("disabled", true);
                            $optionsWrap.hide();
                            $tableField.prop("disabled", true);
                            $tableWrap.hide();
                            $t_labelField.prop("disabled", true);
                            $t_labelWrap.hide();
                            $t_valueField.prop("disabled", true);
                            $t_valueWrap.hide();
                        }
                        fld.querySelector(".fld-lookup").onchange = function(e) {
                            var toggle = e.target.value === "database";
                            $tableField.prop("disabled", !toggle);
                            $tableWrap.toggle(toggle);
                            $t_labelField.prop("disabled", !toggle);
                            $t_labelWrap.toggle(toggle);
                            $t_valueField.prop("disabled", !toggle);
                            $t_valueWrap.toggle(toggle);
                            var toggle = e.target.value === "costumize";
                            $optionsField.prop("disabled", !toggle);
                            $optionsWrap.toggle(toggle);
                        };
                        fld.querySelector(".fld-table").onchange = function(e) {
                            var tabel = e.target.value;
                            $.post("{{route('forms.templates.column')}}", {
                                '_token' : "{{csrf_token()}}",
                                'tabel' : tabel
                            }, function(obj) {
                                $(".fld-t_value", fld).html(obj);
                                $(".fld-t_label", fld).html(obj);
                                // $t_labelField.target.value == obj;
                                // console.log(options.typeUserAttrs.select.t_label.options);
                                // options.typeUserAttrs.select.t_label.options=JSON.parse(obj);
                                // console.log(options.typeUserAttrs.select.t_label.options);
                            });
                        };
                    }
                },
                'radio-group': {
                    onadd: function(fld) {
                        var $tableField = $(".fld-table", fld);
                        var $tableWrap = $tableField.parents(".table-wrap:eq(0)");
                        var $t_valueField = $(".fld-t_value", fld);
                        var $t_valueWrap = $t_valueField.parents(".t_value-wrap:eq(0)");
                        var $t_labelField = $(".fld-t_label", fld);
                        var $t_labelWrap = $t_labelField.parents(".t_label-wrap:eq(0)");
                        var $optionsField = $(".sortable-options", fld);
                        var $optionsWrap = $optionsField.parents(".field-options:eq(0)");
                        var tbl = $(".fld-table", fld).find(":selected").val();
                        var name = $(".fld-name", fld).val();
                        var lookup = $(".fld-lookup", fld).val();
                        if (tbl !== '') {
                            $.post("{{route('forms.templates.column')}}", {
                                '_token': csrf_token,
                                'tabel': tbl
                            }, function(obj) {
                                $(".fld-t_value", fld).html(obj);
                                $(".fld-t_label", fld).html(obj);
                                $.post("{{route('forms.templates.selected')}}", {
                                    '_token': "{{csrf_token()}}",
                                    'name' : name
                                },
                                function(obj) {
                                    $(".fld-t_label", fld).val(obj.t_label);
                                    $(".fld-t_value", fld).val(obj.t_value);
                                });
                            });
                        }
                        if (lookup == 'database') {
                            $optionsField.prop("disabled", true);
                            $optionsWrap.hide();
                        } else if (lookup == 'costumize') {
                            $tableField.prop("disabled", true);
                            $tableWrap.hide();
                            $t_labelField.prop("disabled", true);
                            $t_labelWrap.hide();
                            $t_valueField.prop("disabled", true);
                            $t_valueWrap.hide();
                        } else {
                            $optionsField.prop("disabled", true);
                            $optionsWrap.hide();
                            $tableField.prop("disabled", true);
                            $tableWrap.hide();
                            $t_labelField.prop("disabled", true);
                            $t_labelWrap.hide();
                            $t_valueField.prop("disabled", true);
                            $t_valueWrap.hide();
                        }
                        fld.querySelector(".fld-lookup").onchange = function(e) {
                            var toggle = e.target.value === "database";
                            $tableField.prop("disabled", !toggle);
                            $tableWrap.toggle(toggle);
                            $t_labelField.prop("disabled", !toggle);
                            $t_labelWrap.toggle(toggle);
                            $t_valueField.prop("disabled", !toggle);
                            $t_valueWrap.toggle(toggle);
                            var toggle = e.target.value === "costumize";
                            $optionsField.prop("disabled", !toggle);
                            $optionsWrap.toggle(toggle);
                        };
                        fld.querySelector(".fld-table").onchange = function(e) {
                            var tabel = e.target.value;
                            $.post("{{route('forms.templates.column')}}", {
                                '_token' : "{{csrf_token()}}",
                                'tabel' : tabel
                            }, function(obj) {
                                $(".fld-t_value", fld).html(obj);
                                $(".fld-t_label", fld).html(obj);
                                // $t_labelField.target.value == obj;
                                // console.log(options.typeUserAttrs.select.t_label.options);
                                // options.typeUserAttrs.select.t_label.options=JSON.parse(obj);
                                // console.log(options.typeUserAttrs.select.t_label.options);
                            });
                        };
                    }
                },
                'checkbox-group': {
                    onadd: function(fld) {
                        var $tableField = $(".fld-table", fld);
                        var $tableWrap = $tableField.parents(".table-wrap:eq(0)");
                        var $t_valueField = $(".fld-t_value", fld);
                        var $t_valueWrap = $t_valueField.parents(".t_value-wrap:eq(0)");
                        var $t_labelField = $(".fld-t_label", fld);
                        var $t_labelWrap = $t_labelField.parents(".t_label-wrap:eq(0)");
                        var $optionsField = $(".sortable-options", fld);
                        var $optionsWrap = $optionsField.parents(".field-options:eq(0)");
                        var tbl = $(".fld-table", fld).find(":selected").val();
                        var name = $(".fld-name", fld).val();
                        var lookup = $(".fld-lookup", fld).val();
                        if (tbl !== '') {
                            $.post("{{route('forms.templates.column')}}", {
                                '_token': csrf_token,
                                'tabel': tbl
                            }, function(obj) {
                                $(".fld-t_value", fld).html(obj);
                                $(".fld-t_label", fld).html(obj);
                                $.post("{{route('forms.templates.selected')}}", {
                                    '_token': "{{csrf_token()}}",
                                    'name' : name
                                },
                                function(obj) {
                                    $(".fld-t_label", fld).val(obj.t_label);
                                    $(".fld-t_value", fld).val(obj.t_value);
                                });
                            });
                        }
                        if (lookup == 'database') {
                            $optionsField.prop("disabled", true);
                            $optionsWrap.hide();
                        } else if (lookup == 'costumize') {
                            $tableField.prop("disabled", true);
                            $tableWrap.hide();
                            $t_labelField.prop("disabled", true);
                            $t_labelWrap.hide();
                            $t_valueField.prop("disabled", true);
                            $t_valueWrap.hide();
                        } else {
                            $optionsField.prop("disabled", true);
                            $optionsWrap.hide();
                            $tableField.prop("disabled", true);
                            $tableWrap.hide();
                            $t_labelField.prop("disabled", true);
                            $t_labelWrap.hide();
                            $t_valueField.prop("disabled", true);
                            $t_valueWrap.hide();
                        }
                        fld.querySelector(".fld-lookup").onchange = function(e) {
                            var toggle = e.target.value === "database";
                            $tableField.prop("disabled", !toggle);
                            $tableWrap.toggle(toggle);
                            $t_labelField.prop("disabled", !toggle);
                            $t_labelWrap.toggle(toggle);
                            $t_valueField.prop("disabled", !toggle);
                            $t_valueWrap.toggle(toggle);
                            var toggle = e.target.value === "costumize";
                            $optionsField.prop("disabled", !toggle);
                            $optionsWrap.toggle(toggle);
                        };
                        fld.querySelector(".fld-table").onchange = function(e) {
                            var tabel = e.target.value;
                            $.post("{{route('forms.templates.column')}}", {
                                '_token' : "{{csrf_token()}}",
                                'tabel' : tabel
                            }, function(obj) {
                                $(".fld-t_value", fld).html(obj);
                                $(".fld-t_label", fld).html(obj);
                                // $t_labelField.target.value == obj;
                                // console.log(options.typeUserAttrs.select.t_label.options);
                                // options.typeUserAttrs.select.t_label.options=JSON.parse(obj);
                                // console.log(options.typeUserAttrs.select.t_label.options);
                            });
                        };
                    }
                }
            }
            };

            var formData = '';

            var formBuilder = $(fbEditor).formBuilder(options);
            formBuilder.promise.then(formBuilder => {
                setInterval(function() {
                    // let dform = formBuilder.actions.getData('json', true);
                }, 1000);
            });

            function push() {
                $(".select-field .field-options").css("display", "none");
                $.post("https://e-office.sumedangkab.go.id/ref_surat/get_db", function(data) {
                    $(".select-field .form-elements").append(data);
                });
            }

            function sinkronForm() {
                var id = $('#sinkron_formulir').val();
                if (id !== '') {
                    $("#sinkron_formulir").attr("disabled", "disabled");
                    $.post("https://e-office.sumedangkab.go.id/ref_surat/json_output/" + id, {}, function(obj) {
                        formBuilder.actions.setData(obj);
                        $("#sinkron_formulir").removeAttr("disabled", "disabled");
                    });
                } else {
                    formBuilder.actions.setData('');
                }
            }

            function getExist() {
                var data = $('#data').val();
                var id = $('#exist').val();
                $("#exist").attr("disabled", "disabled");
                $.post("https://e-office.sumedangkab.go.id/ref_surat/json_input/" + id, {
                    data: data
                }, function(obj) {
                    formBuilder.actions.setData(obj);
                    $("#exist").removeAttr("disabled", "disabled");
                    $('#exist').val('');
                    // alert(obj);
                });
            }

            $(document).ready(function() {
                formBuilder.promise.then(formBuilder => {

                    $('#submitFormBuilder').hide();
                    
                });
            });
        });

        //Aksi Edit
        const ubah = document.getElementById('ubah');

        ubah.addEventListener('submit', async (e) => {
            e.preventDefault();

            const nama = ubah.nama.value;
            const is_requested_by_lock = ubah.is_requested_by_lock.value;
            let template = $('#template')[0].files;
            const _token = "{{ csrf_token() }}";

            let formData = new FormData();
            formData.append("id", global_id);
            formData.append("nama", nama);
            formData.append("is_requested_by_lock", is_requested_by_lock);

            if (template[0] !== undefined) {
                formData.append("template", template[0]);
            }

            try {
                let response = await fetch("{{ route('forms.templates.update') }}", {
                    method: "POST",
                    body: formData,
                    headers: {
                        "X-CSRF-TOKEN": _token
                    }
                });
                var datasend = await response.json();

                if (datasend.status == 'success') {
                    
                    hideValidation()
                    $('#updateModal').modal('hide');
                    Swal.fire('Template success updated !', '', 'success')

                    setInterval(() => {
                        location.reload()
                    }, 1000);
                }else if (datasend.status == 'error'){
                    if (datasend.data) {
                        var error = Object.entries(datasend.data)
                        hideValidation()
                        error.forEach((key,value) => {
                            $('#'+key[0]+'_validation').show()
                            $('#'+key[0]+'_validation').html(key[1])
                        });
                    }
                }

            } catch (err) {
                console.log(err);
            }

            return false;
        });

        function destroy() {
            Swal.fire({
                icon: 'info',
                title: 'Are you sure to delete this template?',
                showCancelButton: true,
                confirmButtonColor: '#fc4b6c',
                confirmButtonText: 'Delete',
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('forms.templates.delete') }}",
                        method: "POST",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            "id": global_id
                        },

                        success: function(result) {
                            Swal.fire('Template Deleted', '', 'success')
                            setInterval(() => {
                                location.href = "{{url('forms/templates')}}"
                            }, 1000);
                        }
                    });
                }
            })
        }

        const formBuilder = document.getElementById('form-builder');

        formBuilder.addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const id = global_id;
            const json_form = formBuilder.json_form.value;
            const _token = "{{csrf_token()}}"

            let formData = new FormData();
            formData.append('id', id);
            formData.append('json_form', json_form);

            try {
                let response = await fetch("{{ route('forms.templates.form-builder-store') }}", {
                    method: "POST",
                    body: formData,
                    headers: {
                        "X-CSRF-TOKEN": _token
                    }
                });
                var datasend = await response.json();

                if (datasend.status == 'success') {
                    Swal.fire('Template success updated !', '', 'success')

                    setInterval(() => {
                        location.reload()
                    }, 1000);
                }else if (datasend.status == 'error'){
                    Swal.fire('Template fail updated !', '', 'fail')
                }

            } catch (err) {
                console.log(err);
            }
        })


        $('.dropify').dropify();
    </script>
@endsection