@extends('layout.basic.main')
@section('title', 'サロン予約（一覧）')
@push('js')
    <script src="/js/tailwindcss.js"></script>
    <script src="/js/form_answer/vuedraggable.min.js"></script>
    <script>
        var contract_type = '{{ $contract_type }}';
        var plan_type = '{{ $plan_type }}';
        var flag_contract_new = '{{ $flag_contract_new }}';
    </script>
    <script src="/js/calendar_salon/ajax-error.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/calendar_salon/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_salon/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;
        }

        .aselect .selector {
            background: #F8F8F8;
            position: relative;
            z-index: 1;
            border-radius: 3px;
            height: 42px;
        }

        .aselect .arrow {
            position: absolute;
            right: 10px;
            top: 40%;
            width: 0;
            height: 0;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-top: 10px solid #888;
            transform: rotateZ(0deg) translateY(0px);
            transition-duration: 0.3s;
            transition-timing-function: cubic-bezier(.59, 1.39, .37, 1.01);
            cursor: pointer;
            z-index: 999;
        }

        .aselect .label {
            display: block;
            padding: 12px;
            font-size: 16px;
            color: #222222;
            font-weight: 300;
            text-align: left;
        }

        .aselect ul {
            width: 180px;
            height: 100px;
            list-style-type: none;
            padding: 10px;
            margin: 0;
            font-size: 16px;
            position: absolute;
            z-index: 1;
            top: 40px;
            box-shadow: 0 3px 3px #00000029;
            background-color: #FFFFFF;
            border-radius: 3px;
        }

        .aselect li {
            padding: 0 12px;
            color: #222222;
            font-size: 16px;
            font-weight: normal;
            margin-bottom: 8px;
            cursor: pointer;
        }

        .aselect .current {
            background: #eaeaea;
        }

        .aselect .hidden {
            visibility: hidden;
        }

        .aselect .visible {
            visibility: visible;
        }

        .aselect {
            width: 180px;
            height: 42px;
            border-radius: 3px;
            margin-right: 15px;
        }

        .caret-down {
            background-image: url(/images/caret-down.svg);
            background-position: right 0.5rem center;
            background-repeat: no-repeat;
            background-size: 1.5em 1.5em;
        }
    </style>
@endpush

@section('content')
    <div class="calendar" id="calendar-salon-booking" v-cloak>
        @include('basic.calendar_salon.layouts.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>
                <select class="w-[180px] h-[40px] bg-[#F8F8F8] pl-[14px] border-none caret-down mr-[16px]"
                        v-model="filterStaffType"
                        @change="filterTypeStaff">
                    <option v-for="item in listStaffType" :value="item.value">@{{ item.name }}</option>
                </select>
                <span class="text-[16px] leading-[21px] text-[#666666] font-light">
                    登録カレンダー数：@{{ totalCalendar }}@{{ max_number_calendar ? ' / ' : '' }}@{{ max_number_calendar }}
                </span>
            </div>
            <button class="flex items-center justify-center w-[125px] h-[42px] rounded-[4px] border-solid border border-[#DDDDDD] hover:opacity-70"
                    data-toggle="modal" data-target="#sortModal"
                    :class="calendarSalonList.length > 0 ? 'hover:opacity-70' : 'opacity-60'"
                    :disabled="calendarSalonList.length > 0 ? false : 'disabled'"
            >
                <img class="mr-[6px] w-[20px]" src="/images/move.svg">
                <span class="text-[14px] leading-[19px] text-[#2B2F36] font-semibold">並び替え</span>
            </button>
        </div>
        <div class="info-create h-[55px] w-full relative px-[15px] mb-[20px]" v-if="enableTooltipCalendar">
            <div class="flex items-center justify-between !bg-[#FFFFFF] h-[48px] w-[550px] border-solid border border-[#5799DB] rounded-[4px]">
                <span class="text-[16px] leading-[21px] ml-[16px] text-[#5799DB] font-semibold">新規作成をクリックして、サロン・面談予約を作成しましょう。</span>
                <div class="flex justify-center items-center h-[28px] w-[48px] border-solid border-l border-[#5799DB] cursor-pointer"
                     @click="disableTooltip"
                >
                    <i class="fal fa-times text-[25px] text-[#5799DB]"></i>
                </div>
            </div>
        </div>
        <div class="px-[15px] mb-[30px]">
            <div v-if="calendarSalonList.length == 0" class="grid grid-cols-3 xl:gap-5 md:gap-3">
                <div class="w-full h-[300px] px-[24px] pb-[16px] pt-[11px] border-solid border border-[#DDDDDD] bg-[#FFFFFF] rounded-[4px]">
                    <div class="management-name flex items-center justify-between w-full h-[35px] bg-[#F5F6F7] rounded-[4px] px-[5px] mb-[7px]">
                        <div class="flex w-full">
                            <img src="/images/calendar_today.svg" class="w-[20px] mr-[7px]">
                            <div class="w-full flex justify-center">
                                <span class="text-[16px] !font-semibold text-[#2B2F36]">登録なし</span>
                            </div>
                        </div>
                    </div>
                    <a href="javascript:void(0)" class="hover:text-[#FFFFFF]">
                        <button @click="checkCanCreateCalendar" style="box-shadow: 0px 2px 0px #00000029;" class="w-full h-[48px] bg-[#5799DB] rounded-[4px] text-[16px] !font-semibold text-[#FFFFFF]
                    mb-[9px] hover:opacity-70">
                            <i class="fal fa-plus mr-[8px]"></i>サロン・面談予約を新規作成
                        </button>
                    </a>
                    <span class="text-[#222222]">予約ページURL</span>
                    <div class="flex items-center">
                        <input class="link-text bg-[#F5F6F7] my-[12px] 2xl:w-[88%] lg:w-[87%] h-[32px] px-[16px] rounded-[4px] mr-[7px] border border-solid border-[#DDDDDD] text-[16px] leading-[21px] font-light text-[#2B2F36]"
                               value="-" disabled
                        >
                        <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">
                        </div>
                    </div>
                    <span class="text-[#222222]">予約履歴ページURL</span>
                    <div class="flex items-center">
                        <input class="link-text bg-[#F5F6F7] my-[12px] 2xl:w-[88%] lg:w-[87%] h-[32px] px-[16px] rounded-[4px] mr-[7px] border border-solid border-[#DDDDDD] text-[16px] leading-[21px] font-light text-[#2B2F36]"
                               value="-" disabled
                        >
                        <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">
                        </div>
                    </div>
                </div>
            </div>
            <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 newCalendarSalonList" :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 v-if="calendar.calendar_staff_type == CALENDAR_ONE_STAFF_TYPE"
                             class="flex items-center justify-center w-[70px] h-[30px] bg-[#F8F8F8] rounded-[15px] text-center"
                             :class="calendar.enable_use_calendar ? '' : 'border border-solid border-[#DDDDDD]'"
                        >
                            <i class="fas fa-user text-[#222222] w-[14px] mr-[6px]"></i><span
                                    class="text-[14px] text-[#222222] font-light">個人</span>
                        </div>
                        <div class="flex items-center justify-center w-[100px] h-[30px] bg-[#F8F8F8] rounded-[15px] text-center"
                             v-if="calendar.calendar_staff_type == CALENDAR_MANY_STAFF_TYPE"
                             :class="calendar.enable_use_calendar ? '' : 'border border-solid border-[#DDDDDD]'"
                        >
                            <i class="fas fa-users text-[#222222] w-[14px] mr-[6px]"></i>
                            <span class="text-[14px] text-[#222222] font-light leading-normal">スタッフ</span>
                        </div>
                        <div class="flex mr-[10px]">
                            <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="cursor-pointer cl-toggle-switch flex items-center justify-center">
                                    <label class="cl-switch cursor-pointer">
                                        <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]"
                                 v-if="calendar.google_calendar_id"
                            >
                                <a :href="'https://docs.google.com/spreadsheets/d/' + calendar.google_calendar_id" target="_blank">
                                    <img src="/images/google-spreadsheets.svg" class="w-[20px]">
                                </a>
                            </div>
                        </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.manager_name }}</span>
                        </div>
                    </div>
                    <template v-if="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="rounded-[5px] border border-solid border-[#DDDDDD] mb-[13px] mt-[14px] h-[150px] w-[100%]">
                        </div>
                    </template>
                    <template v-else>
                        <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>
                    </template>
                    <a :href="'/basic/calendar-salon/' + calendar.id" class="hover:text-[#FFFFFF]">
                        <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]">
                            予約管理ページを開く
                        </button>
                    </a>
                    <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_salon_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_salon_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>

        @include('basic.calendar_salon.modal.modal_edit_calendar_salon_manager_name')
        @include('basic.calendar_salon.modal.modal_sort_calendar_salon')
    </div>
@endsection