@extends('layouts/page')
@section('page-styles')
@endsection
@section('content')
    <style>
        body::-webkit-scrollbar {
            display: none;
        }
    </style>
    <div class="scroll-none container-xxl flex-grow-1 container-p-y bg-grey">
        <form action="{{ url('survey/_add/' . $id) }}" method="POST" enctype="multipart/form-data">
            <div class="card">
                <div class="bg-primary p-3 rounded-top"></div>
                <div class="row my-4 mx-3">
                    <div class="col-12">
                        <div class="form-floating">
                            <input type="text" class="form-control" id="name" name="name"
                                placeholder="Kepuasan Masyarakat Terhadap Fasilitas Digital Di Depok"
                                value="{{ $survey->name }}" />
                            <label for="floatingInput">Nama Survey</label>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="form-floating mt-3">
                            <input type="text" class="form-control" id="type" name="type"
                                placeholder="Teknologi Informasi" value="{{ $survey->type }}" />
                            <label for="floatingInput">Tipe Survey</label>
                        </div>
                    </div>
                    <div class="col-12">
                        <label for="jangka-waktu" class="form-label">Jangka Waktu</label>
                        <input type="text" class="form-control" placeholder="MM/DD/YYYY - MM/DD/YYYY" id="jangka-waktu"
                            value="{{ date('m/d/Y', strtotime($survey->tanggal_mulai)) }} - {{ date('m/d/Y', strtotime($survey->tanggal_selesai)) }}"
                            name="jangka_waktu" />
                    </div>
                    <div class="col-12">
                        <label for="rilis" class="form-label">Status Rilis</label>
                        <select class="form-select" id="rilis" name="rilis">
                            <option value="pending" {{ $survey->rilis == 'pending' ? 'selected' : '' }}>Pending</option>
                            <option value="publish" {{ $survey->rilis == 'publish' ? 'selected' : '' }}>Publish</option>
                        </select>
                    </div>
                </div>
                <div class="row mx-3 mb-4">
                    <div class="col-7"></div>
                </div>
            </div>
            <div class="mt-3">
                <div class="row">
                    <div class="col">
                        <div class="rounded position-fixed bottom-50 end-0 me-2" style="z-index: 9999;">
                            <div class="row mb-2">
                                <button data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-info"
                                    title="Tambah Halaman" id="btn-add-page" type="button"
                                    class="btn btn-sm btn-info waves-effect "><i class="ti ti-plus"></i>
                                </button>
                            </div>
                            <div class="row mb-2">
                                <button data-bs-toggle="tooltip" data-bs-placement="top"
                                    data-bs-custom-class="tooltip-danger" title="Reset Survey" type="button"
                                    id="reset-question" class="btn btn-sm btn-danger waves-effect"><i
                                        class="ti ti-trash"></i></button>
                            </div>
                            <div class="row mb-2">
                                <button data-bs-toggle="tooltip" data-bs-placement="top"
                                    data-bs-custom-class="tooltip-success" title="Simpan Survey" type="button"
                                    id="save-survey" class="btn btn-sm btn-success waves-effect"><i
                                        class="ti ti-device-floppy"></i></button>
                                <button type="submit" class="d-none" id="form-submit"></button>
                            </div>
                        </div>
                        @csrf
                        @if (!empty($question_survey))
                            <div class="repeater">
                                <div data-repeater-list="parent" id="sortable-page">
                                    @foreach ($question_survey as $key => $question)
                                        <div data-repeater-item class="repeater-item-parent list-page">
                                            <div class="bg-primary col-3 p-1 rounded-top">
                                                <p class="text-white p-2 mx-3 mb-0">Halaman <span
                                                        class="per-page">{{ $key + 1 }}</span>
                                                    dari
                                                    <span
                                                        class="total-page">{{ count(json_decode(json_encode($question_survey), true)) }}</span>
                                                </p>
                                            </div>
                                            <div class="card p-3 mb-4">
                                                <div class="row mb-4">
                                                    <div class="col-lg-11">
                                                        <div class="form-floating">
                                                            <input type="hidden" name="sort"
                                                                value="{{ $key + 1 }}">
                                                            <input type="hidden" name="page_id"
                                                                value="{{ $question->page_id }}">
                                                            <input type="text" class="form-control" id="page"
                                                                name="page" placeholder="Judul Halaman"
                                                                value="{{ $question->page_name }}">
                                                            <label for="">Judul Halaman</label>
                                                        </div>
                                                        {{-- <select name="page" id="page" class="form-select select-page">
                                                <option value="">Pilih Halaman</option>
                                            </select> --}}
                                                    </div>
                                                    <div class="col-lg-1 d-flex justify-contentt-end">
                                                        <button type="button" class="btn btn-sm btn-outline-danger"
                                                            data-repeater-delete type="button" value="Delete"><i
                                                                class="ti ti-trash ti-sm"></i></button>
                                                    </div>
                                                </div>
                                                <div class="row inner-repeater">
                                                    <div class="col-12 add-page-btn-sticky sticky-top">
                                                        <div class="row d-flex justify-content-end">
                                                            <div class="col-3 d-flex justify-content-end">
                                                                <button type="button"
                                                                    class="btn btn-sm btn-primary waves-effect add-page-btn"
                                                                    data-repeater-create type="button"
                                                                    value="Add Column"><i
                                                                        class="ti-xs ti ti-plus me-1"></i>Pertanyaan
                                                                    Halaman {{ $key + 1 }}</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div data-repeater-list="child" class="col">
                                                        @foreach ($question->question as $child_key => $row_question)
                                                            <div data-repeater-item class="repeater-item-child">
                                                                <div class="row my-2 per-question">
                                                                    <div class="col-11 div-question">
                                                                        <div class="form-floating">
                                                                            <input type="hidden"
                                                                                name="question_setting_id"
                                                                                value="{{ $row_question->id }}">
                                                                            <input type="hidden" name="question_id"
                                                                                value="{{ $row_question->question_id }}">
                                                                            <input type="text" class="form-control"
                                                                                id="question" name="question"
                                                                                placeholder="Pertanyaan"
                                                                                value="{{ $row_question->text_question }}">
                                                                            <label for="question">Pertanyaan</label>
                                                                        </div>
                                                                        <input type="hidden" name="type_question"
                                                                            id="type_question"
                                                                            value="{{ $row_question->type_id }}">
                                                                    </div>
                                                                    <div class="col-1 d-flex justify-content-end">
                                                                        <button type="button"
                                                                            class="btn btn-sm btn-outline-danger"
                                                                            data-repeater-delete type="button"
                                                                            value="Delete"><i
                                                                                class="ti ti-trash ti-sm"></i></button>
                                                                    </div>
                                                                </div>
                                                                <div class="row my-3">
                                                                    <div class="col-12">

                                                                        Pilih Tipe Pertanyaan
                                                                    </div>
                                                                </div>
                                                                <div class="row my-1">
                                                                    <div class="col">
                                                                        <button type="button" onclick="freeText(this)"
                                                                            class="btn btn-free-text type-question {{ $row_question->type_id == 1 ? 'btn-primary' : 'btn-light' }}">Free
                                                                            Text</button>
                                                                        <button type="button" onclick="yesNo(this)"
                                                                            class="btn btn-yes-no type-question {{ $row_question->type_id == 2 ? 'btn-primary' : 'btn-light' }}">Opsi</button>
                                                                        <button type="button" onclick="rating(this)"
                                                                            class="btn btn-rating type-question {{ $row_question->type_id == 3 ? 'btn-primary' : 'btn-light' }}">Rating</button>
                                                                        {{-- <button onclick="percentage(this)" class="btn type-question btn-light">Precentage</button>
                                                            <button onclick="custom(this)" class="btn type-question btn-light">Custom</button> --}}
                                                                    </div>
                                                                </div>
                                                                @include('page/survey/typequestion')
                                                                <div class="my-3">
                                                                    <hr>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach

                                </div>
                                <input class="d-none" id="hidden-btn-add-page" data-repeater-create type="button"
                                    value="Add Row" />
                            </div>
                        @else
                            <div class="repeater">
                                <div data-repeater-list="parent" id="sortable-page">
                                    <div data-repeater-item class="repeater-item-parent list-page">
                                        <div class="bg-primary col-3 p-1 rounded-top">
                                            <p class="text-white p-2 mx-3 mb-0">Halaman <span class="per-page">1</span>
                                                dari
                                                <span class="total-page">1</span>
                                            </p>
                                        </div>
                                        <div class="card p-3 mb-4">
                                            <div class="row mb-4">
                                                <div class="col-lg-11">
                                                    <div class="form-floating">
                                                        <input type="hidden" name="sort">
                                                        <input type="hidden" name="page_id">
                                                        <input type="text" class="form-control" id="page"
                                                            name="page" placeholder="Judul Halaman">
                                                        <label for="page">Judul Halaman</label>
                                                    </div>
                                                    {{-- <select name="page" id="page" class="form-select select-page">
                                                <option value="">Pilih Halaman</option>
                                            </select> --}}
                                                </div>
                                                <div class="col-lg-1 d-flex justify-contentt-end">
                                                    <button type="button" class="btn btn-sm btn-outline-danger"
                                                        data-repeater-delete type="button" value="Delete"><i
                                                            class="ti ti-trash ti-sm"></i></button>
                                                </div>
                                            </div>
                                            <div class="row inner-repeater">
                                                <div class="col-12 add-page-btn-sticky sticky-top">
                                                    <div class="row d-flex justify-content-end">
                                                        <div class="col-3 d-flex justify-content-end">
                                                            <button type="button"
                                                                class="btn btn-sm btn-primary waves-effect add-page-btn"
                                                                data-repeater-create type="button" value="Add Column"><i
                                                                    class="ti-xs ti ti-plus me-1"></i></button>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div data-repeater-list="child" class="col">
                                                    <div data-repeater-item class="repeater-item-child">
                                                        <div class="row my-2 per-question">
                                                            <div class="col-11">
                                                                <div class="form-floating">
                                                                    <input type="hidden" name="question_id">
                                                                    <input type="hidden" name="question_setting_id">
                                                                    <input type="text" class="form-control"
                                                                        id="question" name="question"
                                                                        placeholder="Pertanyaan">
                                                                    <label>Pertanyaan</label>
                                                                </div>
                                                                <input type="hidden" name="type_question"
                                                                    id="type_question">
                                                            </div>
                                                            <div class="col-1 d-flex justify-content-end">
                                                                <button type="button"
                                                                    class="btn btn-sm btn-outline-danger"
                                                                    data-repeater-delete type="button" value="Delete"><i
                                                                        class="ti ti-trash ti-sm"></i></button>
                                                            </div>
                                                        </div>
                                                        <div class="row my-3">
                                                            <div class="col-12">

                                                                Pilih Tipe Pertanyaan
                                                            </div>
                                                        </div>
                                                        <div class="row my-1">
                                                            <div class="col">
                                                                <button type="button" onclick="freeText(this)"
                                                                    class="btn btn-free-text type-question btn-light">Free
                                                                    Text</button>
                                                                <button type="button" onclick="yesNo(this)"
                                                                    class="btn btn-yes-no type-question btn-light">Opsi</button>
                                                                <button type="button" onclick="rating(this)"
                                                                    class="btn btn-rating type-question btn-light">Rating</button>
                                                                {{-- <button onclick="percentage(this)" class="btn type-question btn-light">Precentage</button>
                                                            <button onclick="custom(this)" class="btn type-question btn-light">Custom</button> --}}
                                                            </div>
                                                        </div>
                                                        @include('page/survey/typequestion')
                                                        <div class="my-3">
                                                            <hr>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <input class="d-none" id="hidden-btn-add-page" data-repeater-create type="button"
                                    value="Add Row" />
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="modal fade" id="modalHalaman" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Pengaturan Nama Halaman</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-floating">
                        <input type="text" class="form-control" id="name_page" name="name_page"
                            placeholder="Disnaker Kota Depok" />
                        <label for="name_page">Nama Halaman</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="save-name-page"
                        data-bs-dismiss="modal">Simpan</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('page-scripts')
    <script>
        function delete_page(type, id) {
            if (id.length != 0) {
                $.ajax({
                    url: "{{ url('survey/delete_type') }}",
                    method: "POST",
                    data: {
                        "type": type,
                        "id": id
                    },
                    async: true,
                    beforeSend: function() {
                        $(".spinnerloader").show()
                    },
                    success: function(data) {
                        $(".spinnerloader").hide()
                    },
                    error: function(xhr, status, errorThrown) {
                        console.log(xhr.responseJSON.message)
                    }
                });
            }
        }

        function resetKeyNames() {
            $('.repeater').each(function() {
                $('.repeater').find('.repeater-item-parent').each(function(index) {
                    let parent = $(this).find('input, select, textarea').each(function() {
                        let currentName = $(this).attr('name');
                        if (typeof currentName !== 'undefined') {
                            let newName = currentName.replace(/\parent[[0-9]+\]/g, 'parent[' +
                                index +
                                ']');
                            $(this).attr('name', newName);
                        }
                    });
                    let child = $(this).find('.inner-repeater .repeater-item-child').each(function(
                        index_child) {
                        if (index_child == 0) {
                            $(this).find(".div-question").removeClass("col-11")
                            $(this).find(".div-question").addClass("col-12")
                        }
                        $(this).find('input, select, textarea').each(function() {
                            let currentName = $(this).attr('name');
                            if (typeof currentName !== 'undefined') {
                                let newName = currentName.replace(/\[child][[0-9]+\]/g,
                                    '[child][' + index_child + ']');
                                $(this).attr('name', newName);
                            }
                        });
                        let grandchild = $(this).find(
                            '.grand-inner-repeater .repeater-item-grand-inner').each(function(
                            index_grand_child) {
                            if (index_grand_child == 0) {
                                $(this).find(".per-sub-question").removeClass("col-11")
                                $(this).find(".per-sub-question").addClass("col-12")
                            }
                            $(this).find('input, select, textarea').each(function() {
                                let currentName = $(this).attr('name');
                                if (typeof currentName !== 'undefined') {
                                    let newName = currentName.replace(
                                        /\[grandchild][[0-9]+\]/g,
                                        '[grandchild][' + index_grand_child +
                                        ']');
                                    $(this).attr('name', newName);
                                }
                            });
                        });
                    });
                });
            });
        }

        function resetOrder() {
            $(".repeater").find(".list-page[data-repeater-item]").each(function(i, obj) {
                $(this).find("input[name*='sort']").val(`${i + 1}`)
                $(obj).find(".per-page").html(i + 1)
                $(obj).find(".total-page").html($(".repeater").find(
                    ".list-page[data-repeater-item]").length)
                $(this).find(".add-page-btn").html(
                    `<i class="ti-xs ti ti-plus me-1"></i> Pertanyaan Halaman ${i+1}`)
                $(this).find(".repeater-item-child").each(function(x, obj) {
                    $(this).find(".add-opsi-btn").html(
                        `<i class="ti-xs ti ti-plus me-1"></i> Opsi Halaman ${i+1} Pertanyaan ${x+1}`)

                })

                if ($('.add-page-btn-sticky').length) {
                    $('.add-page-btn-sticky').each(function() {
                        $(this).sticky({
                            topSpacing: $('.layout-navbar').height() + 40,
                            zIndex: 100
                        })
                    });
                }
                if ($('.add-opsi-btn-sticky').length) {
                    $('.add-opsi-btn-sticky').each(function() {
                        $(this).sticky({
                            topSpacing: $('.layout-navbar').height() + 85,
                            zIndex: 117
                        })
                    });
                }
            })
        }

        function typeQuestion(t) {
            $(t).parent().parent().parent().find(".switch-required").removeClass("d-none")
            $(t).parent().find(".type-question").map(function(i) {
                $(this).addClass("btn-light")
                $(this).removeClass("btn-primary")
            })
            $(t).removeClass("btn-light")
            $(t).addClass("btn-primary")
        }

        function freeText(t) {
            typeQuestion(t)
            $(t).parent().parent().parent().find('input[name*="type_question"]').val("1")
            $(t).parent().parent().parent().find(".percentage-div").addClass("d-none")
            $(t).parent().parent().parent().find(".custom-div").addClass("d-none")
            $(t).parent().parent().parent().find(".rating-div").addClass("d-none")
            $(t).parent().parent().parent().find(".yes-no-div").addClass("d-none")
            $(t).parent().parent().parent().find(".free-text-div").removeClass("d-none")
        }

        function yesNo(t) {
            typeQuestion(t)
            $(t).parent().parent().parent().find('input[name*="type_question"]').val("2")
            $(t).parent().parent().parent().find(".custom-div").addClass("d-none")
            $(t).parent().parent().parent().find(".percentage-div").addClass("d-none")
            $(t).parent().parent().parent().find(".rating-div").addClass("d-none")
            $(t).parent().parent().parent().find(".free-text-div").addClass("d-none")
            $(t).parent().parent().parent().find(".yes-no-div").removeClass("d-none")
        }

        function rating(t) {
            typeQuestion(t)
            $(t).parent().parent().parent().find('input[name*="type_question"]').val("3")
            $(t).parent().parent().parent().find(".custom-div").addClass("d-none")
            $(t).parent().parent().parent().find(".percentage-div").addClass("d-none")
            $(t).parent().parent().parent().find(".free-text-div").addClass("d-none")
            $(t).parent().parent().parent().find(".yes-no-div").addClass("d-none")
            $(t).parent().parent().parent().find(".rating-div").removeClass("d-none")
        }

        function percentage(t) {
            typeQuestion(t)
            $(t).parent().parent().parent().find('input[name*="type_question"]').val("persentase")
            $(t).parent().parent().parent().find(".custom-div").addClass("d-none")
            $(t).parent().parent().parent().find(".rating-div").addClass("d-none")
            $(t).parent().parent().parent().find(".free-text-div").addClass("d-none")
            $(t).parent().parent().parent().find(".yes-no-div").addClass("d-none")
            $(t).parent().parent().parent().find(".percentage-div").removeClass("d-none")
        }

        function custom(t) {
            typeQuestion(t)
            $(t).parent().parent().parent().find(".percentage-div").addClass("d-none")
            $(t).parent().parent().parent().find(".rating-div").addClass("d-none")
            $(t).parent().parent().parent().find(".free-text-div").addClass("d-none")
            $(t).parent().parent().parent().find(".yes-no-div").addClass("d-none")
            $(t).parent().parent().parent().find(".custom-div").removeClass("d-none")
        }

        function initValueAndProp(t) {
            $(t).find("#required").prop("checked", true)
            $(t).find('input[name*="label_yes"]').val('YES')
            $(t).find('input[name*="indikator_yes"]').val('100')
            $(t).find('input[name*="label_no"]').val('NO')
            $(t).find('input[name*="indikator_no"]').val('0')
            $(t).find('input[name*="label_persentase"]').val('10')
            $(t).find('input[name*="indikator_persentase"]').val('10')
        }

        $('.repeater').repeater({
            @if (empty($question_survey))
                initEmpty: true,
            @endif
            repeaters: [{
                isFirstItemUndeletable: true,
                selector: '.inner-repeater',
                repeaters: [{
                    isFirstItemUndeletable: true,
                    selector: '.grand-inner-repeater',
                    show: function() {
                        resetOrder()
                        initValueAndProp(this)
                        $(this).slideDown();
                        resetKeyNames()
                    },
                    hide: function(deleteElement) {
                        if ($(this).find('.per-sub-question').length > 0) {
                            Swal.fire({
                                title: "Apakah Kamu Yakin?",
                                icon: "warning",
                                showClass: {
                                    popup: 'animate__animated animate__bounceIn'
                                },
                                customClass: {
                                    confirmButton: 'btn btn-primary m-2',
                                    cancelButton: 'btn btn-danger'
                                },
                                buttonsStyling: false,
                                showCancelButton: true,
                                confirmButtonText: 'Ya',
                                cancelButtonText: 'Tidak',

                            }).then((result) => {
                                if (result.isConfirmed) {
                                    $(this).slideUp(deleteElement);
                                    delete_page("answer", $(this).find(
                                        "input[name*='question_setting_answer_id']"
                                    ).val())
                                }
                            });
                        }
                        resetKeyNames()
                    }
                }],
                show: function() {
                    $(this).find(".free-text-div").addClass("d-none")
                    $(this).find(".yes-no-div").addClass("d-none")
                    $(this).find(".rating-div").addClass("d-none")
                    $(this).find(".btn-free-text").removeClass("btn-primary")
                    $(this).find(".btn-yes-no").removeClass("btn-primary")
                    $(this).find(".btn-rating").removeClass("btn-primary")
                    $(this).find(".btn-free-text").addClass("btn-light")
                    $(this).find(".btn-yes-no").addClass("btn-light")
                    $(this).find(".btn-rating").addClass("btn-light")
                    $(this).find(".switch-required").addClass("d-none")
                    // namePage(this)
                    $(this).find('.full-star-ratings').rateYo({
                        rating: 4
                    });
                    resetOrder()
                    initValueAndProp(this)
                    $(this).slideDown();
                    resetKeyNames()
                },
                hide: function(deleteElement) {
                    if ($(this).find('.per-question').length > 0) {
                        Swal.fire({
                            title: "Apakah Kamu Yakin?",
                            icon: "warning",
                            showClass: {
                                popup: 'animate__animated animate__bounceIn'
                            },
                            customClass: {
                                confirmButton: 'btn btn-primary m-2',
                                cancelButton: 'btn btn-danger'
                            },
                            buttonsStyling: false,
                            showCancelButton: true,
                            confirmButtonText: 'Ya',
                            cancelButtonText: 'Tidak',

                        }).then((result) => {
                            if (result.isConfirmed) {
                                $(this).slideUp(deleteElement);
                                delete_page("question", $(this).find(
                                    "input[name*='question_id']").val())
                            }
                        });
                    }
                    resetKeyNames()
                }
            }],

            show: function() {
                $(this).find(".repeater-item-child").each(function(key) {
                    if (key == 0) {
                        $(this).find(".free-text-div").addClass("d-none")
                        $(this).find(".yes-no-div").addClass("d-none")
                        $(this).find(".rating-div").addClass("d-none")
                        $(this).find(".btn-free-text").removeClass("btn-primary")
                        $(this).find(".btn-yes-no").removeClass("btn-primary")
                        $(this).find(".btn-rating").removeClass("btn-primary")
                        $(this).find(".btn-free-text").addClass("btn-light")
                        $(this).find(".btn-yes-no").addClass("btn-light")
                        $(this).find(".btn-rating").addClass("btn-light")
                        $(this).find(".switch-required").addClass("d-none")
                    } else {
                        $(this).remove()
                    }
                })
                resetOrder()
                $(this).find('.full-star-ratings').rateYo({
                    rating: 4
                });
                initValueAndProp(this)
                $(this).slideDown();
                resetKeyNames()
            },

            hide: function(deleteElement) {
                if ($(this).find('.per-page').length > 0) {
                    Swal.fire({
                        title: "Apakah Kamu Yakin?",
                        icon: "warning",
                        showClass: {
                            popup: 'animate__animated animate__bounceIn'
                        },
                        customClass: {
                            confirmButton: 'btn btn-primary m-2',
                            cancelButton: 'btn btn-danger'
                        },
                        buttonsStyling: false,
                        showCancelButton: true,
                        confirmButtonText: 'Ya',
                        cancelButtonText: 'Tidak',

                    }).then((result) => {
                        if (result.isConfirmed) {
                            $(this).slideUp(deleteElement);
                            delete_page("page", $(this).find("input[name*='page_id']").val())
                            setTimeout(function() {
                                $(".repeater").find(".list-page[data-repeater-item]").each(
                                    function(i,
                                        obj) {
                                        $(obj).find(".per-page").html(i + 1)
                                        $(obj).find(".total-page").html($(".repeater").find(
                                                ".list-page[data-repeater-item]")
                                            .length)
                                    });
                                resetKeyNames()
                            }, 500);
                        }
                    });
                }
                resetKeyNames()
            }
        });

        $('.full-star-ratings').rateYo({
            rating: 4
        });

        if ($('.add-page-btn-sticky').length) {
            $('.add-page-btn-sticky').each(function() {
                $(this).addClass("pe-0")
                $(this).sticky({
                    topSpacing: $('.layout-navbar').height() + 40,
                    zIndex: 100
                })
            });
        }

        if ($('.add-opsi-btn-sticky').length) {
            $('.add-opsi-btn-sticky').each(function() {
                $(this).sticky({
                    topSpacing: $('.layout-navbar').height() + 75,
                    zIndex: 110
                })
            });
        }

        $(document).ready(function() {
            $("#reset-question").click(function() {
                Swal.fire({
                    title: "Apakah Kamu Yakin?",
                    text: "Semua Pertanyaan Yang Sudah Kamu Isi Akan Hilang!",
                    icon: "warning",
                    showClass: {
                        popup: 'animate__animated animate__bounceIn'
                    },
                    customClass: {
                        confirmButton: 'btn btn-primary m-2',
                        cancelButton: 'btn btn-danger'
                    },
                    buttonsStyling: false,
                    showCancelButton: true,
                    confirmButtonText: 'Ya',
                    cancelButtonText: 'Tidak',

                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire({
                            title: "Berhasil",
                            text: "Pertanyaan Berhasil Di Reset",
                            icon: "success",
                            showClass: {
                                popup: 'animate__animated animate__bounceIn'
                            },
                            customClass: {
                                confirmButton: 'btn btn-primary m-2',
                            },
                            buttonsStyling: false,
                            showCancelButton: false,
                            showConfirmButton: false,
                        });
                        window.location.href = "{{ url('survey/reset/' . $id) }}"
                    }
                });
            })

            @if (!empty($question_survey))
                resetKeyNames()
            @endif
            // namePage()
            $("#sortable-page").sortable({
                stop: function() {
                    resetOrder()
                    resetKeyNames()
                }
            })
            $("#btn-add-page").click(function() {
                $("#hidden-btn-add-page").trigger("click")
            })
            $("#save-survey").click(function() {
                resetKeyNames()
                setTimeout(function() {
                    $("#form-submit").trigger("click")
                }, 500);
            })
        })
    </script>
    @include('page/survey/survey_main_js')
@endsection