<script>
    $(() => {
        $(".btn-save").on('click', function(e) {
            e.preventDefault();

            $("#formMenu").parsley().validate();

            if ($("#formMenu").parsley().isValid()) {
                $("#formMenu").trigger('submit');
            }
        });

        $("#dropdown-tampilan").hide();

        var getTipe = document.getElementById("tipe");

        if(getTipe == '1' || getTipe == '2'){
            $("#dropdown-tampilan").show();
        }

        $('#tipe').on('change', function(e){
            var tipe = e.target.value;

            if(tipe == '1' || tipe == '2'){
                $("#dropdown-tampilan").show();
            }else{

            }
        });

        // MENU TYPE
        $("body").on('change', '#tipe', function () {
            resetField("both");
            if(this.value == 0) {
                resetField("both");
            } else {
                $.ajax({
                    url: `{{ route('menu.getMenuShow') }}`,
                    method: "POST",
                    dataType: 'json',
                    data: { value: this.value},
                    success: function(data) {
                        if(data.url) {
                            resetField("show");
                            $('#url').val(data.value);
                        } else if(data.option) {
                            $(".field-show").slideDown();
                            $(".select-show").html(data.value);
                        } else {
                            $("#url").prop("readonly", false);
                        }
                    }
                });
            }
        });

        $("body").on('change', '.select-show', function () {
            $.ajax({
                url: `{{ route('menu.geMenutBy') }}`,
                method: "POST",
                dataType: 'json',
                data: { value: this.value, type: $('#tipe').val()},
                success: function(data) {
                    if(data.url) {
                        $(".select-article").hide();
                        $("#url").prop("readonly", true).val('');
                        $('#url').val(data.value);
                    } else {
                        $("#url").prop("readonly", true).val('');
                        $(".select-article").attr('data-url', data.link).attr('data-title', data.lang).show();
                    }
                }
            });
        });

    });

    function resetField(field)
    {
        if(field === "show") {
            $(".field-show").hide();
            $('.select-show').prop('selectedIndex', 0);
            $(".select-article").hide();
            $("#url").prop("readonly", true).val('');
        } else if(field === 'link') {
            $(".select-article").hide();
            $("#url").prop("readonly", true).val('');
        } else {
            $(".field-show").hide();
            $('.select-show').prop('selectedIndex', 0);
            $(".field-by").hide();
            $('.select-by').prop('selectedIndex', 0);
            $(".select-article").hide();
            $("#url").prop("readonly", true).val('');
        }
    }
</script>
<x-modal-layout class="modal-dialog-centered modal-xl">
    <x-forms.form method="POST" action="{{ $method }}" id="formMenu" onsubmit="btnLoading('{!! __('messages.saving_state') !!}')" autocomplete="off" enctype="multipart/form-data" data-parsley-validate="">
        @csrf
        <x-forms.form-help :mode="$updateMode" />
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col">
                        <div class="mb-3">
                            <x-forms.label for="label" :value="__('lang.label')" /><span class="asterisk">*</span>
                            <input id="label" type="text" class="form-control" name="label" value="{{ ($Menu == TRUE)? $Menu->label : old('username') }}" placeholder="@lang('lang.place_data', ['data' => __('lang.label')])" required/>
                        </div>
                        <div class="mb-3">
                            <x-forms.label for="target" :value="__('lang.target')" /><span class="asterisk">*</span>
                            <select class="form-control" name="target" id="target" required>
                                <option selected>{{ __('messages.select_data', ['data' => __('lang.target'),]) }}</option>
                                <option value="_self" @if ($Menu == TRUE) {{ '_self' == $Menu->target ? 'selected' : '' }} @endif>_self | Ditampilkan di jendela yang sama</option>
                                <option value="_blank" @if ($Menu == TRUE) {{ '_blank' == $Menu->target ? 'selected' : '' }} @endif>_blank | Ditampilkan di jendela yang baru</option>
                                <option value="_top" @if ($Menu == TRUE) {{ '_top' == $Menu->target ? 'selected' : '' }} @endif>_top | Ditampilkan di jendela yang baru secara penuh</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <x-forms.label for="tipe" :value="__('lang.tipe')" /><span class="asterisk">*</span>
                            <select class="form-control" name="tipe" id="tipe" required>
                                @if ($MenuType)
                                    <option value="" selected>{{ __('messages.select_data', ['data' => __('lang.tipe'),]) }}</option>
                                    @foreach ($MenuType as $item)
                                        <option value="{{ $item->id }}"
                                            @if ($Menu == TRUE)
                                            {{ $item->id == $Menu->menu_type_id ? 'selected' : '' }}
                                            @endif
                                        >{{ capitalString($item->name) }}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="mb-3 field-show" style="display: none;">
                            <x-forms.label for="tampilan" :value="__('lang.tampilan')" />
                            <select class="form-control select-show" id="show"></select>
                        </div>
                        <div class="mb-3">
                            <x-forms.label for="tautan" :value="__('lang.tautan')" /><span class="asterisk">*</span>
                            <div class="input-group field-link">
                                <input type="text" name="tautan" id="url" class="form-control" value="{{ ($Menu == TRUE)? $Menu->url : old('tautan') }}" placeholder="@lang('lang.place_data', ['data' => __('lang.tautan')])" readonly>
                                <button class="btn btn-info select-article btn-select call-second-modal" style="display: none;"
                                    data-url=""
                                    data-title=""
                                    data-target-modal="#second-modal">
                                    <i class="far fa-folder-open me-2"></i>@lang('lang.select_data', ['data' => __('lang.tautan')])</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </x-forms.form>
    <x-slot name="footer">
        <button class="btn btn-primary btn-loading btn-save">{{ __('lang.save') }}</button>
    </x-slot>
</x-modal-layout>
