@extends('component-base.layout')

@section('title')
    F - モーダル
@endsection

@push('css')
    <link rel="stylesheet" href="/css/component-base/input/input.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/input/select.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/modal/modal.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/button/button.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/_assets/commons/css/components/checkbox.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/layout-demo/layout-f.css?v={{config("sns-line.version")}}">
@endpush

@section('contents')
    <div id="vue-element" v-cloak>
        <div class="layout" style="width: 100%;height: 100%;min-height: calc(100vh - 118px);">
            <div class="layout-part" style="width: 100%;height: calc(100vh - 118px);padding: 16px">
                <div class="lme-flex lme-flex-col" style="gap: 10px">
                    <lme-button-flat style="width: 150px" @click="open_modal_1 = true">Modal 1</lme-button-flat>
                    <lme-button-flat style="width: 150px" @click="open_modal_2 = true">Modal 2</lme-button-flat>
                    <lme-button-flat style="width: 150px" @click="open_modal_3 = true">Modal 3</lme-button-flat>
                </div>
            </div>
        </div>

        <lme-modal v-model="open_modal_1"
                   title="新規作成"
                   :width="520">
            <div class="lme-flex lme-flex-col" style="gap: 10px;font-size: 14px;font-weight: 400;color: #1F1F1F;line-height: 22px">
                <p>入力内容は後から変更可能です。</p>

                <div class="lme-flex lme-flex-col" style="padding: 10px 10px;gap: 20px">
                    <div class="lme-flex lme-flex-col" style="gap: 5px">
                        <div class="lme-flex lme-items-center" style="font-size: 12px;font-weight: 400;gap: 10px">
                            <span style="color: #1F1F1F">管理名</span>
                            <span style="color: #FF4D4F">非表示</span>
                        </div>

                        <lme-input v-model="username"
                                   type="text"
                                   placeholder="プレースホルダー"
                                   :max-count="50"
                                   width="400px"
                                   size="lg">
                        </lme-input>
                    </div>

                    <div class="lme-flex lme-flex-col" style="gap: 5px">
                        <div class="lme-flex lme-items-center" style="font-size: 12px;font-weight: 400;gap: 10px">
                            <span style="color: #1F1F1F">保存先のフォルダを選択</span>
                        </div>

                        <lme-select
                                direction="vertical"
                                v-model="categories.selected"
                                :options="categories"
                                width="440px"
                                height="40px"
                                @change="onChange"
                                placeholder="プレースホルダー"
                                category>
                        </lme-select>

                        <div class="lme-flex lme-items-center" style="gap: 5px">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M10.875 7.5H8.5V5.125C8.5 5.05625 8.44375 5 8.375 5H7.625C7.55625 5 7.5 5.05625 7.5 5.125V7.5H5.125C5.05625 7.5 5 7.55625 5 7.625V8.375C5 8.44375 5.05625 8.5 5.125 8.5H7.5V10.875C7.5 10.9437 7.55625 11 7.625 11H8.375C8.44375 11 8.5 10.9437 8.5 10.875V8.5H10.875C10.9437 8.5 11 8.44375 11 8.375V7.625C11 7.55625 10.9437 7.5 10.875 7.5Z" fill="#1677FF"/>
                                <path d="M8.0002 15.0004C4.14028 15.0004 1 11.8601 1 8.0002C1 4.14028 4.14028 1 8.0002 1C11.8601 1 15.0004 4.14028 15.0004 8.0002C15.0004 11.8601 11.8601 15.0004 8.0002 15.0004ZM8.0002 2.1871C4.79485 2.1871 2.1871 4.79485 2.1871 8.0002C2.1871 11.2051 4.79485 13.8124 8.0002 13.8124C11.2051 13.8124 13.8124 11.2051 13.8124 8.0002C13.8124 4.79485 11.2051 2.1871 8.0002 2.1871Z" fill="#1677FF"/>
                            </svg>
                            <span style="font-size: 12px;font-weight: 400;color: #1677FF;line-height: 22px">フォルダを新規作成</span>
                        </div>
                    </div>
                </div>

                <div class="lme-flex lme-justify-end" style="gap: 5px">
                    <lme-button-flat size="lg" @click="open_modal_1 = false" style="width: 112px;padding-inline: 0 !important;">キャンセル</lme-button-flat>
                    <lme-button-default size="lg" @click="open_modal_1 = false" style="width: 104px;padding-inline: 0 !important;">新規作成</lme-button-default>
                </div>
            </div>
        </lme-modal>

        <lme-modal v-model="open_modal_2"
                   :header="false"
                   :width="560">
            <div class="lme-flex lme-flex-col" style="font-size: 14px;font-weight: 400;color: #1F1F1F;gap: 20px;padding-inline: 8px">
                <div class="lme-flex lme-items-center lme-justify-between">
                    <div class="lme-flex lme-items-center lme-justify-between" style="gap: 10px">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12.0003 22.5006C6.21042 22.5006 1.5 17.7902 1.5 12.0003C1.5 6.21042 6.21042 1.5 12.0003 1.5C17.7902 1.5 22.5006 6.21042 22.5006 12.0003C22.5006 17.7902 17.7902 22.5006 12.0003 22.5006ZM12.0003 3.28065C7.19228 3.28065 3.28065 7.19228 3.28065 12.0003C3.28065 16.8076 7.19228 20.7186 12.0003 20.7186C16.8076 20.7186 20.7186 16.8076 20.7186 12.0003C20.7186 7.19228 16.8076 3.28065 12.0003 3.28065Z" fill="#1F1F1F"/>
                            <path d="M11.9995 17.2503C11.3795 17.2503 10.875 16.7452 10.875 16.1244C10.875 15.5043 11.3795 14.9999 11.9995 14.9999C12.6204 14.9999 13.1255 15.5043 13.1255 16.1244C13.1255 16.7452 12.6204 17.2503 11.9995 17.2503ZM12.5625 13.5H11.438C11.3345 13.5 11.2503 13.4158 11.2503 13.3124V6.93765C11.2503 6.83418 11.3345 6.75 11.438 6.75H12.5625C12.666 6.75 12.7501 6.83418 12.7501 6.93765V13.3124C12.7501 13.4141 12.6642 13.5 12.5625 13.5Z" fill="#1F1F1F"/>
                        </svg>
                        <span style="font-size: 16px;font-weight: 700;color: #1F1F1F">変更した内容は保存されていません</span>
                    </div>
                    <div>
                        <button class="lme-modal-close" @click="open_modal_2 = false">✕</button>
                    </div>
                </div>

                <div style="line-height: 22px">
                    <span style="font-size: 14px;font-weight: 400;color: #1F1F1F">保存されていない内容は破棄されます。保存せずにページを移動してもよろしいですか？</span>
                </div>

                <div class="lme-flex lme-items-center lme-justify-between">
                    <div class="lme-flex lme-items-center" style="gap: 5px">
                        <label class="ct202602-custom-checkbox">
                            <input type="checkbox">
                            <span class="ct202602-checkbox-box"></span>
                            <span style="font-size: 14px;font-weight: 400;color: #1F1F1F;line-height: 22px">次から表示しない</span>
                        </label>
                    </div>
                    <div class="lme-flex lme-justify-end" style="gap: 5px">
                        <lme-button-flat @click="open_modal_2 = false" style="width: 130px;padding-inline: 0 !important;">編集画面に戻る</lme-button-flat>
                        <lme-button-default @click="open_modal_2 = false" style="width: 168px;padding-inline: 0 !important;">移動する(変更を破棄)</lme-button-default>
                    </div>
                </div>
            </div>
        </lme-modal>

        <lme-modal v-model="open_modal_3"
                   :header="false"
                   :width="480">
            <div class="lme-flex lme-flex-col" style="font-size: 14px;font-weight: 400;color: #1F1F1F;gap: 20px;padding-inline: 8px">
                <div class="lme-flex lme-items-center lme-justify-between">
                    <div class="lme-flex lme-items-center lme-justify-between" style="gap: 10px">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12.0003 22.4997C6.21041 22.4997 1.5 17.7897 1.5 12.0003C1.5 6.21041 6.21041 1.5 12.0003 1.5C17.7897 1.5 22.4997 6.21041 22.4997 12.0003C22.4997 17.7897 17.7897 22.4997 12.0003 22.4997ZM12.0003 15C11.38 15 10.8753 15.5047 10.8753 16.125C10.8753 16.7453 11.38 17.25 12.0003 17.25C12.6206 17.25 13.1253 16.7453 13.1253 16.125C13.1253 15.5047 12.6206 15 12.0003 15ZM11.4378 6.7497C11.3341 6.7497 11.2497 6.83408 11.2497 6.9378V13.3125C11.2497 13.4157 11.3341 13.4997 11.4378 13.4997H12.5628C12.666 13.4997 12.75 13.4157 12.75 13.3125V6.9378C12.75 6.83408 12.666 6.7497 12.5628 6.7497H11.4378Z" fill="black"/>
                        </svg>
                        <span style="font-size: 16px;font-weight: 700;color: #1F1F1F">データを「削除したデータ」に移動します</span>
                    </div>
                    <div>
                        <button class="lme-modal-close" @click="open_modal_3 = false">✕</button>
                    </div>
                </div>

                <div style="line-height: 22px">
                    <span style="font-size: 14px;font-weight: 400;color: #1F1F1F">削除したデータは「削除したデータ」に移動し、90日後に完全に削除されます。よろしいですか？</span>
                </div>

                <div class="lme-flex lme-items-center lme-justify-between">
                    <div class="lme-flex lme-items-center" style="gap: 5px">
                        <label class="ct202602-custom-checkbox">
                            <input type="checkbox">
                            <span class="ct202602-checkbox-box"></span>
                            <span style="font-size: 14px;font-weight: 400;color: #1F1F1F;line-height: 22px">次から表示しない</span>
                        </label>
                    </div>
                    <div class="lme-flex lme-justify-end" style="gap: 5px">
                        <lme-button-flat @click="open_modal_3 = false" style="width: 102px;padding-inline: 0 !important;">キャンセル</lme-button-flat>
                        <lme-button-risk @click="open_modal_3 = false" style="width: 88px;padding-inline: 0 !important;">削除する</lme-button-risk>
                    </div>
                </div>
            </div>
        </lme-modal>
    </div>
@endsection

@push('js')
    <script src="/js/component-base/input/lme-input.js"></script>
    <script src="/js/component-base/input/lme-select.js"></script>
    <script src="/js/component-base/modal/lme.modal.js"></script>
    <script src="/js/component-base/button/lme-button.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/button/lme-button-default.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/button/lme-button-flat.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/button/lme-button-risk.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/layout-demo/layout-f.js?v={{config("sns-line.version")}}"></script>
@endpush