@extends('layout.basic.main')
@push('js')
    <script src="/js/tailwindcss.js"></script>
    <script src="/js/form_answer/vuedraggable.min.js"></script>
    <script src="/js/calendar_management/ajax-error.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/calendar_management/index.js?v={{config('sns-line.version')}}"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

@endpush
@push('css')
    <link rel="stylesheet" href="/css/calendar/index.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">

    <style>
        body {
            line-height: 1.42857143 !important;
            font-size: 14px;
        }

        .leading-normal {
            line-height: normal !important;
        }
    </style>
@endpush
@section('title', 'レッスン予約（一覧）')
@section('content')
    <div class="calendar" id="calendar" v-cloak>
        @include('basic.calendar_management.header')
        <div class="flex items-center justify-between px-[15px] mb-[20px] relative">
            <div class="flex items-center">
                <div class="create-button">
                    <button class="flex items-center justify-center w-[125px] h-[42px] bg-[#5799DB] rounded-[4px] mr-[16px] hover:opacity-70"
                            @click="checkCanCreateCalendar"
                    >
                        <img class="mr-[6px]" src="/images/feather_plus.svg">
                        <span class="text-[14px] leading-[19px] font-semibold text-[#FFFFFF]">新規作成</span>
                    </button>
                </div>
                <span class="text-[16px] leading-[21px] text-[#666666] font-light">
                    登録カレンダー数：@{{ calendarList.length }} / {{ $numberCalendar }}
                </span>
            </div>
            <button class="flex items-center justify-center w-[125px] h-[42px] rounded-[4px] border-solid border border-[#DDDDDD] text-[14px] text-[#2B2F36] font-semibold"
                    style="line-height: normal"
                    :class="calendarList.length > 0 ? 'hover:opacity-70' : 'opacity-60'"
                    :disabled="calendarList.length > 0 ? false : 'disabled'"
                    data-toggle="modal" data-target="#sortModal"
            >
                <i class="far fa-arrows-alt text-[#2B2F36] text-[14px] mr-[6px]"></i>
                並び替え
            </button>
        </div>
        <div class="info-create h-[55px] w-full relative px-[15px] mb-[20px]" v-if="enableTooltipCalendar && is_finished_loading">
            <div class="flex items-center justify-between !bg-[#FFFFFF] h-[48px] w-[710px] border-solid border border-[#08BF5A] rounded-[4px]">
                <span class="text-[16px] leading-[21px] ml-[16px] text-[#08BF5A] font-semibold">新規作成をクリックして、はじめのレッスン予約を作成しましょう。</span>
                <div class="flex justify-center items-center h-[28px] w-[48px] border-solid border-l border-[#08BF5A] cursor-pointer"
                     @click="disableTooltip"
                >
                    <i class="fal fa-times text-[25px] text-[#08BF5A]"></i>
                </div>
            </div>
        </div>
        <div class="px-[15px] mb-[30px]" v-show="is_finished_loading">
            <span class="text-[16px] leading-[21px] text-[#222222] font-semibold" v-if="calendarList.length == 0">まだ登録されたカレンダー予約がありません。</span>
            <div class="grid grid-cols-3 2xl:grid-cols-4 xl:gap-5 2xl:gap-4 md:gap-3" v-else>
                <div class="w-full h-[470px] px-[24px] pb-[16px] pt-[11px] border-solid border border-[#DDDDDD] rounded-[4px]"
                     v-for="calendar in calendarList" :key="calendar.id"
                     :class="calendar.enable_use_calendar ? 'bg-[#FFFFFF]' : 'bg-[#F8F8F8]'"
                >
                    <div class="flex items-center justify-between h-[30px] w-full mb-[5px]">
                        <div class="flex items-center justify-center grid grid-cols-3 gap-1">
                            <span class="text-[14px] leading-normal"
                                  :class="calendar.enable_use_calendar ? 'text-[#08BF5A] font-semibold' : 'text-[#888888]'">有効</span>
                            <div class="cl-toggle-switch flex items-center justify-center">
                                <label class="cl-switch">
                                    <input type="checkbox" v-model="calendar.enable_use_calendar"
                                           @change="enableUseCalendar(calendar.id)">
                                    <span></span>
                                </label>
                            </div>
                            <span class="text-[14px] leading-normal"
                                  :class="calendar.enable_use_calendar ? 'text-[#888888]' : 'font-semibold'">無効</span>
                        </div>
                        <div class="flex items-center justify-center w-[32px] h-[30px] bg-[#FFFFFF] border-solid border border-[#DDDDDD] rounded-[4px] cursor-pointer"
                             v-if="calendar.using_google"
                             @click="redirectGoogle('https://docs.google.com/spreadsheets/d/' + calendar.google_sheet_id)"
                        >
                            <img src="/images/google-spreadsheets.svg" class="w-[20px]">
                        </div>
                    </div>
                    <div class="management-name flex items-center justify-between w-full h-[35px] rounded-[4px] px-[5px] mb-[7px] cursor-pointer"
                         :class="calendar.enable_use_calendar ? 'bg-[#F5F6F7]' : 'bg-[#E3E3E4]'"
                         @click="openEditCalendarModal(calendar.id)"
                    >
                        <div class="flex">
                            <img src="/images/calendar_today.svg" class="w-[20px] mr-[7px]">
                            <span class="text-[16px] font-semibold text-[#2B2F36]">@{{ calendar.calendar_name }}</span>
                        </div>
                    </div>
                    <div v-show="calendar.image_calendar_top">
                        <div class="h-[150px] rounded-[5px] mt-[14px] mb-[13px] bg-[#F8F8F8] border border-solid border-[#DDDDDD] flex items-center justify-center">
                            <img :src="'{{ env('URL_SERVER_MEDIA') }}' + calendar.image_calendar_top"
                                 :id="'image-calendar-' + calendar.id"
{{--                                 :class="{'w-full': getAspectRatio(calendar.id)}"--}}
                                 class="rounded-[5px] border border-solid border-[#DDDDDD] mb-[13px] mt-[14px] h-[150px]">
                        </div>
                    </div>
                    <div v-show="!calendar.image_calendar_top">
                        <div class="h-[150px] rounded-[5px] mt-[14px] mb-[13px] bg-[#F8F8F8] border border-solid border-[#DDDDDD] flex items-center justify-center">
                            <img src="/images/picture.png" width="46px" height="40px">
                        </div>
                    </div>
                    <button class="w-full h-[48px] bg-[#08BF5A] rounded-[4px] text-[16px] font-semibold text-[#FFFFFF] mb-[9px] hover:opacity-70 shadow-[0px_2px_0px_#00000029]"
                            @click="redirectUrl(calendar.id)"
                    >
                        予約管理ページを開く
                    </button>
                    <span :class="calendar.enable_use_calendar ? 'text-[#222222]' : 'text-[#666666]'">予約ページURL</span>
                    <div class="flex items-center">
                        <input class="link-text my-[12px] 2xl:w-[88%] lg:w-[87%] h-[32px] bg-[#FFFFFF] px-[16px] rounded-[4px] mr-[7px] border border-solid border-[#DDDDDD] text-[16px] leading-[21px] font-light text-[#2B2F36]"
                               :id="'text-current' + calendar.id"
                               :value="'https://liff.line.me/{{ $liffId }}?calendar_id=' + calendar.id + '&ts={{ \Illuminate\Support\Carbon::now()->timestamp }}'"
                        >
                        <div class="flex items-center justify-center w-[32px] h-[32px] rounded-[4px] border border-solid border-[#DDDDDD] bg-[#FFFFFF]">
                            <img src="/images/content_copy.svg" class="w-[14px] cursor-pointer hover:opacity-70"
                                 @click="copyTextToClipboard('current', calendar.id)"
                            >
                        </div>
                    </div>
                    <span :class="calendar.enable_use_calendar ? 'text-[#222222]' : 'text-[#666666]'">予約履歴ページURL</span>
                    <div class="flex items-center">
                        <input class="link-text my-[12px] 2xl:w-[88%] lg:w-[87%] h-[32px] bg-[#FFFFFF] px-[16px] rounded-[4px] mr-[7px] border border-solid border-[#DDDDDD] text-[16px] leading-[21px] font-light text-[#2B2F36]"
                               :id="'text-history' + calendar.id"
                               :value="'https://liff.line.me/{{ $liffId }}?calendar_id=' + calendar.id + '&tab=history&ts={{ \Illuminate\Support\Carbon::now()->timestamp }}'"
                        >
                        <div class="flex items-center justify-center w-[32px] h-[32px] rounded-[4px] border border-solid border-[#DDDDDD] bg-[#FFFFFF]">
                            <img src="/images/content_copy.svg" class="w-[14px] cursor-pointer hover:opacity-70"
                                 @click="copyTextToClipboard('history', calendar.id)"
                            >
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="fixed top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%] w-[100%] z-[1] wrap-modal"
             id="edit-management-name"
             v-if="showEditCalendarModal">
            <div class="modal-dialog w-[700px] mt-0" role="document">
                <div class="modal-content rounded-[10px] px-[50px]">
                    <div class="modal-header text-center relative !bg-[#FFFFFF] border-0">
                        <h3 class="modal-title text-[20px] leading-[27px] font-semibold text-[#222222]">
                            カレンダー管理名 変更
                        </h3>
                        <button type="button"
                                class="flex justify-center items-center w-[38px] h-[38px] rounded-[5px] close ic-close text-[27px] absolute right-[-34px] top-[16px] opacity-100 z-10 hover:bg-[#96ADB2] hover:!text-white"
                                @click="showEditCalendarModal = false"
                        >
                            <i class="far fa-times text-[32px]"></i>
                        </button>
                    </div>
                    <div class="modal-body px-0">
                        <div class="flex items-center justify-between">
                            <span class="text-[16px] leading-[21px] font-light">エルメ上での管理名（入力内容はお客様に表示されません）</span>
                            <span class="text-[14px] leading-[19px] text-[#888888] font-light">
                                @{{ currentCalendar.calendar_name.length }}/10
                            </span>
                        </div>
                        <input class="form-control mt-[8px] !h-[40px] !px-[10px] rounded-[3px]" type="text"
                               v-model="currentCalendar.calendar_name">
                    </div>
                    <div class="modal-footer border-0 block text-center grid grid-rows-2 items-center justify-center">
                        <button type="button" @click="saveEditCalendar(currentCalendar.id)"
                                class="w-[150px] h-[40px] text-[16px] border-solid border border-[#08BF5A] text-[#08BF5A] hover:opacity-70 rounded-[3px]">
                            保存
                        </button>
                        <a class="text-[#888888] text-[16px] font-light underline cursor-pointer"
                           @click="showEditCalendarModal = false"
                        >
                            戻る
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade !pr-0" id="sortModal" role="dialog">
            <div class="modal-dialog top-1/2 left-1/2 !m-0" style="transform: translate(-50%, -50%);">
                <div class="modal-content">
                    <div id="" class="modal-header relative">
                        <button type="button" data-dismiss="modal"
                                class="flex justify-center items-center w-[38px] h-[38px] rounded-[5px] close ic-close text-[27px] absolute right-[15px] top-[9px] opacity-100 z-10 hover:bg-[#96ADB2] hover:!text-white"
                                @click="resetData"
                        >
                            <i class="far fa-times text-[32px]"></i>
                        </button>
                        <h2 class="text-center font-semibold text-[16px]">並べ替え</h2>
                    </div>
                    <div id="sorter_modal_body " class="modal-body modal-body-main scroll-modal min-h-[300px]">
                        <draggable class="mb-[19px] mt-[14px]" v-model="calendarListSort" @start="drag=true"
                                   @end="drag=false" @change="sortPosition">
                            <template v-for="(item, index) in calendarListSort">
                                <div class="row mt-item-fol cursor-pointer" :data-id="item.id">
                                    <div class="col-sm-10 col-sm-offset-1">
                                        <div id="item_change_place" class="item_sort_place">
                                            <div class="items_names">
                                                <i class="fa fa-bars item_icon"></i>@{{item.calendar_name}}
                                            </div>
                                            <div class="btn-group"
                                                 style="padding: unset; margin: auto; margin-right: 0;">
                                                <i class="far fa-ellipsis-h ic-menu"
                                                   style="font-size: 20px; position: relative;"></i>
                                                <ul class="dropdown-menu action-broadcast"
                                                    style=" min-width: 140px; left: -140px; top: -37px; text-align: center;">
                                                    <li class="focus-pointer-item" @click="sort(index, 'up')">
                                                        <button class="focus_sort_item"
                                                                :disabled="index == 0">
                                                            <i class="fa fa-sort-numeric-up"
                                                               style="padding-right: 15px;"></i>一番上に移動
                                                        </button>
                                                    </li>
                                                    <li class="focus-pointer-item" @click="sort(index, 'down')">
                                                        <button class="focus_sort_item"
                                                                :disabled="index == ( calendarListSort.length - 1 )">
                                                            <i class="fa fa-sort-numeric-down"
                                                               style="padding-right: 15px;"></i>一番下に移動
                                                        </button>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </draggable>
                    </div>
                    <div class="modal-footer">
                        <div class="text-center">
                            <button type="button"
                                    class="w-[140px] h-[48px] bg-[#08BF5A] rounded-[4px] text-[16px] font-semibold text-[#FFFFFF] hover:opacity-70"
                                    @click="saveSort">変更を保存
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection