@extends('layout.basic.main')
@section('title', 'カレンダー予約（詳細）')
@push('css')
    <link rel="stylesheet" href="/css/friendlist/style.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/booking_manager/style.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/booking_manager/tab-style.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/booking_manager/index.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/booking_manager/calendar.css?v={{config("sns-line.version")}}">

{{--    calendar--}}
{{--    <link href="/plugins/fullcalendar/main.min.css?v={{config("sns-line.version")}}" rel="stylesheet">--}}
{{--    <script src="/plugins/fullcalendar/main.min.js?v={{config("sns-line.version")}}"></script>--}}
{{--    <link href="/plugins/multiple-select-date/jquery-ui.multidatespicker.js?v={{config("sns-line.version")}}" rel="stylesheet">--}}
    <link href="/plugins/fullcalendar-scheduler/main.css?v={{config("sns-line.version")}}" rel="stylesheet">
    <script src="/plugins/fullcalendar-scheduler/main.js?v={{config("sns-line.version")}}"></script>
    <style type="text/css">
        .date-input-label::-webkit-calendar-picker-indicator{
            color: rgba(0, 0, 0, 0);
            opacity: 1;
            display: block;
            background: url("data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M160 400C160 408.8 152.8 416 144 416C135.2 416 128 408.8 128 400V192C128 183.2 135.2 176 144 176C152.8 176 160 183.2 160 192V400zM240 400C240 408.8 232.8 416 224 416C215.2 416 208 408.8 208 400V192C208 183.2 215.2 176 224 176C232.8 176 240 183.2 240 192V400zM320 400C320 408.8 312.8 416 304 416C295.2 416 288 408.8 288 400V192C288 183.2 295.2 176 304 176C312.8 176 320 183.2 320 192V400zM317.5 24.94L354.2 80H424C437.3 80 448 90.75 448 104C448 117.3 437.3 128 424 128H416V432C416 476.2 380.2 512 336 512H112C67.82 512 32 476.2 32 432V128H24C10.75 128 0 117.3 0 104C0 90.75 10.75 80 24 80H93.82L130.5 24.94C140.9 9.357 158.4 0 177.1 0H270.9C289.6 0 307.1 9.358 317.5 24.94H317.5zM151.5 80H296.5L277.5 51.56C276 49.34 273.5 48 270.9 48H177.1C174.5 48 171.1 49.34 170.5 51.56L151.5 80zM80 432C80 449.7 94.33 464 112 464H336C353.7 464 368 449.7 368 432V128H80V432z"/></svg>") no-repeat;
            width: 20px;
            height: 20px;
            border-width: thin;
        }
        .date-input-label{
            width: 90% !important;
            background: rgb(125, 144, 148);
            color: white;
            text-align: center;
            margin-top: 0px;
            height: 38px;border-color: #7e8f93;
            /*margin-right: 10px;*/
            position: relative
        }
        .title-date:hover input{
            background-color: white;
            color: black;
        }
        .title-date:hover .fill-pen{
            fill: rgb(125, 144, 148) !important;
        }
        .remove-item-date:hover {
            background-color: rgb(125, 144, 148) ;
        }
        .remove-item-date:hover {
            background-color: rgb(125, 144, 148) ;
        }
        .fade1.in{
            transform: initial !important;
            -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
            -moz-animation:fadeIn ease-in 1;
            animation:fadeIn ease-in 0.3s !important;

            -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
            -moz-animation-fill-mode:forwards;
            animation-fill-mode:forwards;

            -webkit-animation-duration:1s;
            -moz-animation-duration:1s;
            animation-duration:0.5s !important;
        }

        .fade {
            transform: unset !important;
            animation: unset !important;
        }
        .fade.in {
            transform: unset !important;
            animation: unset !important;
        }
        .modal-content {
            -webkit-animation-name: unset !important;
            -webkit-animation-duration: 0.6s;
            animation-name: unset !important; ;
            animation-duration: unset !important;
        }

        .modal.fade .modal-dialog {
            -webkit-transition: unset !important;
            -o-transition: -unset !important;
            transition: unset !important;
            -webkit-transform: unset !important;
            -ms-transform: unset !important;
            -o-transform: unset !important;
            transform: unset !important;
        }

        #ui-datepicker-div {
            z-index: 1042 !important;
        }

        #modal_booking_detail .info_item {
            padding: 6px 12px;
        }

        #overLoadingCalendar {
            display: none;
            position: absolute;
            margin: 0 auto;
            left: 0;
            right: 0;
            background: white;
            text-align: center;
            top: 0;
            bottom: 0;
            z-index: 100;
            opacity: 0.7;
            padding-top: 20%;
        }

        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        /*---*/
        .spinner > div {
            width: 18px;
            height: 18px;
            background-color: #605f5f;

            border-radius: 100%;
            display: inline-block;
            -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
            animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        }

        .spinner .bounce1 {
            -webkit-animation-delay: -0.32s;
            animation-delay: -0.32s;
        }

        .spinner .bounce2 {
            -webkit-animation-delay: -0.16s;
            animation-delay: -0.16s;
        }

        @-webkit-keyframes sk-bouncedelay {
            0%, 80%, 100% {
                -webkit-transform: scale(0)
            }
            40% {
                -webkit-transform: scale(1.0)
            }
        }

        @keyframes sk-bouncedelay {
            0%, 80%, 100% {
                -webkit-transform: scale(0);
                transform: scale(0);
            }
            40% {
                -webkit-transform: scale(1.0);
                transform: scale(1.0);
            }
        }
    </style>
@endpush

@section('content')
    <div id="manager__booking-setting">
        <div class="n__tab n__tab-parent">
            <div class="n__tab__item ui_text-weight">
                <div class="tab__zz"></div>
                <button class="tablinks reception h__tablinks"
                        onclick="openTabParent(event, 'h__tab1')" id="default_open_setting">
                    <span>予約管理</span>
                </button>
                <div class="tab__zz"></div>
                <button class="tablinks course h__tablinks"
                        onclick="openTabParent(event, 'h__tab2')">
                    <span>受付時間</span>
                </button>
                <div class="tab__zz"></div>
                <button class="tablinks online h__tablinks" id="open_tab_from_redirect_slot"
                        onclick="openTabParent(event, 'h__tab3')">
                    <span>予約項目</span>
                </button>
                <div class="tab__zz"></div>
                <button class="tablinks action h__tablinks" id="open_tab_from_uri_redirect"
                        onclick="openTabParent(event, 'h__tab4')">
                    <span>設定</span>
                </button>
                <div class="tab__zz"></div>
            </div>
            <div>
                <a class="btn btn-success ui_btn_back" href="{{ route('booking.manager') }}">
                    <span style="font-weight: bold">カレンダー一覧に戻る</span>
{{--                    <span class="ui-btn-back">--}}
{{--                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">--}}
{{--                            <path d="M568.9 143.5l-150.9-138.2C404.8-6.773 384 3.039 384 21.84V96C241.2 97.63 128 126.1 128 260.6c0 54.3 35.2 108.1 74.08 136.2c12.14 8.781 29.42-2.238 24.94-16.46C186.7 252.2 256 224 384 223.1v74.2c0 18.82 20.84 28.59 34.02 16.51l150.9-138.2C578.4 167.8 578.4 152.2 568.9 143.5zM416 384c-17.67 0-32 14.33-32 32v31.1l-320-.0013V128h32c17.67 0 32-14.32 32-32S113.7 64 96 64H64C28.65 64 0 92.65 0 128v319.1c0 35.34 28.65 64 64 64l320-.0013c35.35 0 64-28.66 64-64V416C448 398.3 433.7 384 416 384z"/>--}}
{{--                        </svg>--}}
{{--                    </span>--}}
                </a>
            </div>
        </div>

        <div class="h__tabcontent" id="h__tab1">
            @include('basic.booking_manager.booking_top')
        </div>
        <div class="h__tabcontent" id="h__tab2">
            @include('basic.booking_manager.setting.staff_calendar')
        </div>
        <div class="h__tabcontent" id="h__tab3">
            <div class="n__tab n__tab-child">
                <div class="n__tab__item ui_text-weight">
                    <button class="tablinks c_h_course h__child__tablinks3"
                            onclick="openTabChild(event, 'c_h_course',3)" id="default_open_childt3">
                        <span>コース</span>
                    </button>
                    <div class="tab__ii"></div>
                    <button class="tablinks c_h_staff h__child__tablinks3" id="open_tab_from_redirect_slot_staff"
                            onclick="openTabChild(event, 'c_h_staff',3)">
                        <span>予約枠</span>
                    </button>
                </div>
            </div>
            <div id="c_h_course" class="tabcontent h__child__tabcontent3">
                @include('basic.booking_manager.setting.course')
                @include('basic.booking_manager.modal.modal_course_info_course')
            </div>

            <div id="c_h_staff" class="tabcontent h__child__tabcontent3">
                @include('basic.booking_manager.setting.staff')
                @include('basic.booking_manager.modal.modal_course_info_frame')
            </div>

        </div>

        <div class="h__tabcontent" id="h__tab4">
            <div class="n__tab n__tab-child">
                <div class="n__tab__item ui_text-weight">
                    <button class="tablinks reception h__child__tablinks4"
                            onclick="openTabChild(event, 'reception',4)" id="default_open_childt4">
                        <span>営業時間</span>
                    </button>
                    <div class="tab__ii"></div>
                    <button class="tablinks course h__child__tablinks4"
                            onclick="openTabChild(event, 'course',4)">
                        <span>予約設定</span>
                    </button>
                    <div class="tab__ii"></div>
                    <button class="tablinks online h__child__tablinks4"
                            onclick="openTabChild(event, 'online',4)">
                        <span>変更・キャンセル</span>
                    </button>
                    <div class="tab__ii"></div>
                    <button class="tablinks action h__child__tablinks4"
                            onclick="openTabChild(event, 'action',4)">
                        <span>リマインド</span>
                    </button>
                    <div class="tab__ii"></div>
                    <button class="tablinks c_h_gcalendar h__child__tablinks4"
                            id="open_tab_from_uri_redirect_child"
                            onclick="openTabChild(event, 'c_h_gcalendar',4)">
                        <span>Googleカレンダー連携</span>
                    </button>
                </div>
            </div>
            <div id="reception" class="tabcontent h__child__tabcontent4">
                @include('basic.booking_manager.setting.time')
            </div>

            <div id="course" class="tabcontent h__child__tabcontent4">
                @include('basic.booking_manager.setting.online')
                @include('basic.booking_manager.modal.modal_setting_info_admin')
            </div>

            <div id="online" class="tabcontent h__child__tabcontent4">
                @include('basic.booking_manager.setting.request_user')
            </div>

            <div id="action" class="tabcontent h__child__tabcontent4">
                @include('basic.booking_manager.setting.action')
                @include('basic.booking_manager.modal.modal_filter_course_staff_remind')
            </div>

            <div id="c_h_gcalendar" class="tabcontent h__child__tabcontent4">
                @include('basic.booking_manager.setting.gcalendar')
            </div>
        </div>
        <div id="overLoadingCalendar" class="spinner">
            <div class="bounce1"></div>
            <div class="bounce2"></div>
            <div class="bounce3"></div>
        </div>
    </div>
{{--    @include('basic.booking_manager.modal.modal_setting_action')--}}
    @include('layout.modal_setting.modal_select_action')
    @include('layout.modal_filter_v2')
@endsection
@push('js')
    <script src="https://apis.google.com/js/api.js"></script>
    <script src="/plugins/moment/moment-locales.min.js"></script>
    <script>
        var domainMedia = '