@extends('layout.basic.main')
@section('title','リッチメニュー（編集）')
@push('css')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" href="{{asset('css/form_answer/common-v3.css')}}?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/_assets/commons/css/breadcrumbs.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="/_assets/commons/css/calendar_control.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="/_assets/commons/css/radio.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="/_assets/commons/css/lme_custom.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="/_assets/modules/rich_menu/css/create.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="/_assets/modules/rich_menu/css/create_27.css?v={{config("sns-line.version")}}" type="text/css">
@endpush
@section('content')
    <div class="container-fluid pc-body">
        <div  id="rich-menu-create-page" v-cloak>
            {{--Page Title--}}
            <div class="flex-space-between page-title-section" style="margin: 20px 0">
                <div class="col-md-6" style="padding-left: 0">
                    <nav class="breadcrumb breadcrumb01">
                        <ul>
                            <li><a href="/basic/rich-menu">TOP</a></li>
                            <li>リッチメニュー 編集</li>
                        </ul>
                    </nav>
                    <div class="page-title">
                        リッチメニュー 編集
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="flex-space-between">
                        <div class="form-input" style="width: 100%">
                            <div class="flex-space-between label-title">
                                <label>管理名</label>
                                <div class="count">@{{ page_header.rich_menu_name.length }} / 50</div>
                            </div>
                            <div class="input-box">
                                <input type="text" v-model="page_header.rich_menu_name" @change="saveQuickRichMenu()" maxlength="50">
                            </div>
                        </div>
                        <div class="form-input" style="width: 100%">
                            <div class="flex-space-between label-title">
                                <label>フォルダ</label>
                            </div>
                            <div class="dropDown dropDown02 select-folder-r" style="margin: 4px 6px">
                                <div class="selected-dropDown">@{{ getNameFolderSelected() }}</div>
                                <span class="select-arrow"></span>
                                <ul class="dropdown">
                                    <li v-for="(item,index) in page_header.folder_data" @click="setIdFolderSelected(item.id)"
                                        :key="item.id"
                                        :data-value="item.name"
                                        :data-id="item.id">
                                        @{{ item.name }}
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="wrapper wrapper-rich-menu-setting">
                {{--Left Step--}}
                <div class="left-step">
                    <div class="step-row group"
                         :style="isStepAvailable(index+1) ? 'cursor: pointer' : null"
                         @click="isStepAvailable(index+1) ? clickStep(index+1) : null"
                         v-for="(step, index) in getStepSetting()"
                         :class="getClassCssStep(step.number)"
                         :key="index">
                        <div class="step-number">
                            @{{ step.number }}
                        </div>
                        <div class="step-title">
                            @{{ step.title }}
                        </div>
                        <div class="step-title icon-edit">
                            @include('icons.edit')
                        </div>

                        <div class="i-tooltip"
                             style="left: 50%; top: -30px; transform: translateX(-50%); font-size: 14px;"
                             v-show="isStepAvailable(index+1)">
                            この項目を編集
                        </div>
                    </div>
                </div>

                {{--Step setting--}}
                <template v-if="step_active == 1">
                    @include('basic.rich_menu.v2.components.create.setting_step_1')
                </template>
                <template v-if="step_active == 2">
                    @include('basic.rich_menu.v2.components.create.setting_step_2')
                </template>
                <template v-if="step_active == 3">
                    @include('basic.rich_menu.v2.components.create.setting_step_3')
                </template>
                <template v-if="step_active == 4">
                    @include('basic.rich_menu.v2.components.create.setting_step_4')
                </template>
            </div>

            @include('basic.rich_menu.v2.modal.create.confirm_change_image')
            @include('basic.rich_menu.v2.modal.create.confirm_change_layout')
            @include('basic.rich_menu.v2.modal.create.alert_image_size')
            @include('basic.rich_menu.v2.modal.create.choose_rich_menu')
            @include('basic.rich_menu.v2.modal.create.edit_layout_custom')
            @include('basic.rich_menu.v2.modal.create.guide_setting_richmenu')
            @include('basic.rich_menu.v2.modal.create.copy_action')
            @include('basic.rich_menu.v2.modals.confirm_upgrade_filter')
            @include('basic.rich_menu.v2.modals.confirm_upgrade_switch')
            @include('basic.rich_menu.v2.modals.confirm_upgrade_switch_filter')
        </div>
    </div>

    @include('layout.modal_setting.modal_select_action')
    @include('layout.modal_filter_v2')
@endsection

@push('js')
    <script>
        var basic_home_new = [];
        var params = [];
        var rich_menu_detail = @json($richmenu);
        var isFreePlan = {{ $flagNewFreePlan }};
        var isTopPage = {{ $isTopPage ? 1 : 0 }};
        // [#38867 / C-02] true = hướng dẫn đang trong 180 ngày bị ẩn ⇒ lưu xong redirect ngay,
        // không tự mở modal. Nút 「表示方法を確認」 vẫn luôn mở được (QA-spec-005).
        var isGuideHidden = {{ (isset($isGuideHidden) && $isGuideHidden) ? 'true' : 'false' }};
    </script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
    <script src="/_assets/commons/js/datetime.js?v={{config("sns-line.version")}}"></script>
    <script src="/_assets/commons/js/canvas_rectangle.js?v={{config("sns-line.version")}}"></script>
    <script src="/_assets/commons/js/lme.js?v={{config("sns-line.version")}}"></script>
    <script src="/_assets/modules/rich_menu/js/create.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/friendlist/modal_filter_v2.js?v={{ config('sns-line.version') }}"></script>

    <script>
        document.addEventListener('click', (event) => {
            const confirmBoxes = document.querySelectorAll('.confirm-remove');

            if (event.target.closest('.btnDelete, .iconDelete')) {
                const item = event.target.closest('.item');
                if (!item) return;
                const confirmBox = item.querySelector('.confirm-remove');
                confirmBoxes.forEach(box => box.style.display = 'none');
                confirmBox.style.display = (confirmBox.style.display === 'block') ? 'none' : 'block';
                return;
            }

            confirmBoxes.forEach(box => {
                if (box.style.display === 'block' && !box.contains(event.target)) {
                    box.style.display = 'none';
                }
            });
        });
    </script>
@endpush