@extends('layout.basic.main')
@section('title', 'カレンダー予約（一覧）')

@push('css')
    {{--    <link rel="stylesheet" href="/css/plugins/fullcalendar/main.css?v={{config("sns-line.version")}}">--}}
    {{--    <link rel="stylesheet" href="/css/plugins/fullcalendar/fullcalendar.css?v={{config("sns-line.version")}}">--}}
    {{--    <link rel="stylesheet" href="/css/plugins/fullcalendar/fullcalendar.print.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/tab-style.css?v={{config("sns-line.version")}}">
    <style>
        .pagination{
            display: flex;
            justify-content: center;
        }
        .v_h_calendar-list-h2{
            background: #F8F8F8 0% 0% no-repeat padding-box;
            border-radius: 5px;
            padding: 13px;
            max-width: 880px;
        }
        .link_a{
            text-decoration: underline;
            cursor: pointer;
            color: #5799DB;
        }
        .btn-pm-new{
            background: #08BF5A 0% 0% no-repeat padding-box !important;
            border-radius: 5px;
            color: #FFFFFF !important;
            font-size: 14px;
            font-weight: 600;
            display: flex;
            align-items: center;
            height: 35px;
            width: 150px;
        }
        .btn-pm-new i{
            margin-right: 5px;
        }
        .btn-progress{
            background: #FFFFFF 0% 0% no-repeat padding-box;
            border: 1px solid #DDDDDD;
            border-radius: 4px;
            height: 35px;
            width: 190px;
            color: #222222 !important;
            font-size: 14px;
            font-weight: 400;
            display: flex;
            align-items: baseline;
            margin:  0 auto;
            justify-content: center;
            padding: 6px 12px !important;
        }
        .btn-progress img{
            width: 14px;
            height: 14px;
            margin-right: 7px;
        }
        .btn-a-edit,  .btn-a-edit:hover{
            color: #888888;
            font-size: 14px;
            font-weight: 300;
            text-decoration: underline;
        }
        .box-picture-all{
            display: flex;
            align-items: center;
            padding: 43px 58px;
            justify-content: space-evenly;
            padding-bottom: 0;

        }
        .pic_item{
            width: 300px;
            background: #FFFFFF 0% 0% no-repeat padding-box;
            box-shadow: 0px 2px 4px #00000029;
            border-radius: 10px;
        }
        .pic_item .note{
            color: #222222;
            font-size: 12px;
            font-weight: 300;
            margin-top: 11px;
            margin-bottom: 11px;
        }
        .pic_item .box-button{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .item-btn-rus{
            background: #FFFFFF 0% 0% no-repeat padding-box;
            border: 1px solid #DDDDDD;
            border-radius: 24px;
            height: 30px;
            font-size: 14px;
            font-weight: 600;
            text-align: center;
            padding-top: 3px;
            color: #222222;
        }
        .box_pic_bottom{
            background: #F8F8F8 0% 0% no-repeat padding-box;
            border-radius: 0px 0px 10px 10px;
            text-align: center;
            padding-top: 10px;
            padding-bottom: 10px;
            margin-top: 22px;
        }
        .box_pic_bottom a{
            color: #5799DB;
            font-weight: 600;
            font-size: 16px;
            text-decoration: underline;
        }
        .box_pic_bottom .txt{
            font-size: 12px;
            font-weight: 300;
            color: #222222;
            margin-right: 10px;
            margin-bottom: 4px;
        }
        .txt-red-md{
            color: #F44336;
            font-weight: 300;
            font-size: 14px;
            margin-bottom: 25px;
            margin-top: 16px;
            text-align: center;

            line-height: 19px;
        }
        .btn-save-setting-show-md{
            background: #FFFFFF 0% 0% no-repeat padding-box;
            border: 1px solid #08BF5A;
            border-radius: 3px;
            color: #08BF5A !important;
            font-size: 16px;
            font-weight: 300;
            width: 200px;
            height: 40px;
        }
        .box-list-option{
            background: #F8F8F8 0% 0% no-repeat padding-box;
            border-radius: 5px;
            padding: 22px 38px ;
            margin-left: 110px;
            margin-right: 110px;
            margin-bottom: 29px;
            margin-top: 10px;

        }
        .option-salon{
            min-width: 208px;
        }
        .radio-custom {
            opacity: 0;
            position: absolute;
        }

        .radio-custom, .radio-custom-label {
            display: inline-block;
            vertical-align: middle;
            /*margin: 5px;*/
            cursor: pointer;
            color: #888888;
            font-size: 14px;
            font-weight: 300;
        }

        .radio-custom-label {
            position: relative;
        }

        .radio-custom + .radio-custom-label:before {
            content: '';
            background: #fff;
            border: 1px solid #ddd;
            display: inline-block;
            vertical-align: middle;
            width: 16px;
            height: 16px;
            padding: 2px;
            margin-right: 10px;
            text-align: center;
        }

        .radio-custom + .radio-custom-label:before {
            border-radius: 50%;
            margin-bottom: 5px;
        }

        .radio-custom:checked + .radio-custom-label:before {
            background: #08BF5A;
            box-shadow: inset 0px 0px 0px 2px #fff;
            border: 1px solid #08BF5A;
        }


        .radio-custom:checked + .radio-custom-label {
            /*outline: 1px solid #ddd; !* focus style *!*/
            color: #08BF5A;
            font-weight: 600;
        }
        .tt-option{
            color: #222222;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 6px;
        }
        .txt-no-data{
            color: #888888;
            font-size: 14px;
            font-weight: 300;
        }
        .v_h_btn-copy img{
            height: 15px;
            width: 16px;
        }
        .btn-progress div{
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .content-notify{
            margin-top:9px;
            color: #222222;
            font-size: 14px;
            font-weight: 300;
            line-height: 19px
        }
        .txt-redirect-w{
            font-size: 14px;
            font-weight: 300;
            color: #222222;
            text-align: center;
            margin-bottom: 20px;
            line-height: 19px

        }
        .txt-top-notify{
            color: #F44336;
            font-weight: 600;
            font-size: 16px;
        }
        .input-cus{
            border-radius: 5px;
            margin-right: 5px;
            border: 1px solid #DDDDDD !important;
            background: #FFFFFF;
            color: #222222
        }

        .v_h_calendar-list-h2 p {
            line-height: 26px;
            color: #222222;
        }
    </style>
@endpush

@section('content')
    <div class="v_h_calendar-list">
        <div class="v_h_calendar-list-h1 ui_text-weight">
            <span style="font-weight: 600; font-size: 20px; color: #222222">カレンダー予約</span>
        </div>
        <div class="v_h_calendar-list-h2">
            <div class="txt-top-notify" style=""><i class="fas fa-exclamation-triangle"></i> カレンダー予約は2025年3月末に廃止します。</div>
            <p style="margin-top: 14px; font-weight: 600; font-size: 14px; color: #F44336">現在、カレンダー予約の新規作成はできません。</p>
            <p style="font-weight: 600; font-size: 14px;"><a style="color: #5799DB; text-decoration: underline; font-weight: 600;" target="_blank" href="/basic/calendar-salon">サロン・面談予約</a>がカレンダー予約の後継となりますのでカレンダー予約のご利用をご希望の方はそちらをご利用下さい。</p>
            <p style="font-size: 14px;">また、現在ご利用中のカレンダー予約のURL・QRコードを｢レッスン予約｣、｢サロン・面談予約｣に転送することができます。</p>
            <p style="font-size: 14px;">※コース・予約枠などの登録情報や友だちの予約情報は｢レッスン予約｣、｢サロン・面談予約｣には引き継がれません。</p>
        </div>
    </div>
{{--    <div>--}}
{{--        <div class="bmt-2 ui_text-weight">--}}
{{--            <div class="v_h_grbtn">--}}
{{--                @if($check_bot == 1)--}}
{{--                <a href="{{ route('booking_calendar.add') }}" class="btn btn-primary v_h_btn-add">新規作成 ({{$total_calendar.'/'.$max_calendar}})</a>--}}
{{--                @else--}}
{{--                <a href="#" onclick="showMessageCheckBot('{{$msg_plan}}', '{{ $flag_contract_new }}')" class="btn btn-primary v_h_btn-add">新規作成 ({{$total_calendar.'/'.$max_calendar}})</a>--}}
{{--                @endif--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}
<div id="booking-calendar-home" v-cloak>
    <table class="table table-hover table-calendar-index" >
        <thead>
        <tr class="ui_text-weight">
            {{--                <th><input type="checkbox" @click="checkAll" v-model="check_all"></th>--}}
            {{--                <th>作成日</th>--}}
            <th class="text-left">管理ページ</th>
            <th style="text-align: left">管理名</th>
            <th class="text-center">転送設定</th>
            <th class="text-left">予約ページ</th>
            <th class="text-left">予約履歴ページ</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
            <tr v-if="calendar_list.length > 0" v-for="(calendar,index) in calendar_list">
                <td class="w-10 ui_text-weight">
                    <a class="btn btn-sns-line v_h_mbtn btn-pm-new" :href="'/basic/manager-booking/setting/'+ calendar.id"
                       style=""> <img src="/images/address-book-light.png" style="height: 14px; margin-right: 5px"> <div style="font-size: 14px;    line-height: 1px;font-weight: 600">予約管理ページ</div></a>
                </td>
                <td class="w-10" style="text-align: left">
                    <span style="color:#222222;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;font-size: 14px; font-weight: 300">
                        @{{ calendar.manager_name ?? '' }}
                    </span>
                </td>
                <td>
                    <button class="btn btn-sns-line-outline-default btn-sns-line btn-progress"
                            v-if="calendar.type_setting_redirect == 0" style="color: #5799DB !important;"
                            v-on:click="showSettingRedirect(calendar)">
                        <img src="/images/progress_active.png"><div>未設定</div>
                    </button>
                    <button class="btn btn-sns-line-outline-default btn-sns-line btn-progress"
                            v-if="calendar.type_setting_redirect == 1" style="color: #5799DB !important;"
                            v-on:click="showSettingRedirect(calendar)">
                        <img src="/images/progress_active.png"><div>設定する</div>
                    </button>
                    <button class="btn btn-sns-line-outline-default btn-sns-line btn-progress"
                            v-if="calendar.type_setting_redirect == 2"
                            v-on:click="showSettingRedirect(calendar)">
                        <img src="/images/progress_no.png"><div>@{{ calendar.salon_name }}</div>
                    </button>
                    <button class="btn btn-sns-line-outline-default btn-sns-line btn-progress"
                            v-if="calendar.type_setting_redirect == 3"
                            v-on:click="showSettingRedirect(calendar)">
                        <img src="/images/progress_no.png"><div>@{{ calendar.lesson_name }}</div>
                    </button>
                </td>
                <td class="" style="width: 25%">
                    <div class="c__url">
                        <input type="text" style=""
                               class="w-100 input-cus"
                               :data-cID="calendar.id" disabled
                               :value="calendar.url_booking">
                        <button type="button"
                                @click="copyUrl(calendar.id)"
                                class="btn btn-dark v_h_btn-copy">
                            <img src="/images/ic-copy.png">
                        </button>
                    </div>
                </td>
                <td class="" style="width: 25%">
                    <div class="c__url">
                        <input type="text"
                               class="w-100 input-cus" :data-historyID="calendar.id" disabled
                               :value="calendar.url_history_booking">
                        <button type="button"
                                @click="copyUrl(calendar.id, 'history')"
                                class="btn btn-dark v_h_btn-copy">
                            <img src="/images/ic-copy.png">
                        </button>
                    </div>
                </td>
                <td class="w-10">
                    <div class="h_ui_index">
                        <div class="">
                            <a class="btn-a-edit" :href="'/basic/manager-booking/add-booking-calendar?edit='+calendar.id">情報編集</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr v-if="calendar_list.length == 0">
                <td colspan="6">データがありません。</td>
            </tr>
        </tbody>
    </table>
    <div class="modal fade" id="modalSettingShowModalWarning"
         tabindex="-1" role="dialog"
         data-backdrop="static"
         data-keyboard="false"
         aria-labelledby="chatSettingStatus">
        <div class="modal-dialog modal-lg" role="document" style="    top: 50%;    transform: translateY(-50%);">
            <div class="modal-content" style="max-height: 92vh;overflow: auto;">
                <div class="modal-header" style="border: none">
                    <button type="button" class="close" data-dismiss="modal" v-on:click="closeNoSave" aria-hidden="true" style="opacity: 1;font-size: 27px">
                        <span class="line-icon line-icon-close">
                            <i class="far fa-times" style="color:#222222; background-color: unset"></i>
                        </span>
                    </button>
                    <h2 class="text-center" style="font-weight: 600 !important; font-size: 20px; color: #222222"> カレンダー予約は2025年3月末に廃止します</h2>

                </div>
                <div class="modal-body" style="padding-top: 0">
                    <div class="text-center" style="font-size: 16px;line-height: 21px; color: #222222">
                        現在ご利用中のカレンダー予約の予約ページ（URL・QRコード）を <br>
                        <span style="color:#08BF5A; font-weight: 600 ">｢レッスン予約｣、｢サロン・面談予約｣に自動転送する</span>仕様を追加しました。
                    </div>
                    <div class="box-picture-all">
                        <div class="pic_item">
                            <img src="/images/pic_salon_redirect.png" alt="">
                            <div class="text-center note">以下の様なビジネスに対応しています</div>
                            <div class="box-button">
                                <div class="item-btn-rus" style="width: 100px; margin-right: 5px">美容室</div>
                                <div class="item-btn-rus" style="width: 130px">マッサージ</div>

                            </div>
                            <div class="box-button" style="margin-top: 5px">
                                <div class="item-btn-rus" style="width: 100px;margin-right: 5px">対面営業</div>
                                <div class="item-btn-rus" style="width: 130px">オンライン商談</div>
                            </div>
                            <div class="box_pic_bottom">
                                <div class="txt">営業時間中ならいつでも予約を受付</div>
                                <a class="" target="_blank" href="/basic/calendar-salon">サロン・面談予約</a>
                            </div>
                        </div>
                        <div class="pic_item">
                            <img src="/images/pic_lesson_redirect.png" alt="">
                            <div class="text-center note">以下の様なビジネスに対応しています</div>
                            <div class="box-button">
                                <div class="item-btn-rus" style="width: 100px; margin-right: 5px">学習塾</div>
                                <div class="item-btn-rus" style="width: 150px">ヨガ・ピラティス</div>

                            </div>
                            <div class="box-button" style="margin-top: 5px">
                                <div class="item-btn-rus" style="width: 100px;margin-right: 5px">料理教室</div>
                                <div class="item-btn-rus" style="width: 150px">パソコン教室</div>
                            </div>
                            <div class="box_pic_bottom">
                                <div class="txt">決まった時間枠だけ予約を受付</div>
                                <a class="" target="_blank" href="/basic/calendar-management">レッスン予約</a>
                            </div>
                        </div>
                    </div>
                    <div style="margin: 27px auto 0; width: 500px; height: 60px; background-color: #EDF4FB; display: flex; border-radius: 5px; align-items: center;">
                        <i class="fas fa-info-circle" style="margin: 0 10px 0 13px; width: 20px; height: 20px; color: #5799DB"></i>
                        <div style="font-size: 14px; color: #222222">
                            <p><a style="font-weight: 600; color: #5799DB; text-decoration: underline;" target="_blank" href="/basic/calendar-salon">サロン・面談予約</a>がカレンダー予約の後継となります。</p>
                            <p>カレンダー予約のと同様の機能をご希望の方はそちらをご利用下さい。</p>
                        </div>
                    </div>
                    <div class="txt-red-md">
                        ※コース・予約枠などの登録情報や友だちの予約情報は <br>
                        ｢レッスン予約｣、｢サロン・面談予約｣には引き継がれません。
                    </div>
                </div>
                <div class="text-center" style="margin-bottom: 30px">
                    <button type="button" v-on:click="saveSettingShowModalWarning"
                            class="btn btn-sns-line btn-sns-line-success btn-save-setting-show-md">確認しました</button> <br>

                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="showSettingRedirectModal"
         tabindex="-1" role="dialog"
         data-backdrop="static"
         data-keyboard="false"
         aria-labelledby="chatSettingStatus">
        <div class="modal-dialog modal-lg" role="document" style="    top: 47%;    transform: translateY(-50%);">
            <div class="modal-content" style="max-height: 94vh;overflow: auto;max-width: 800px">
                <div class="modal-header" style="border: none;    padding-bottom: 5px;">
                    <button type="button" class="close" data-dismiss="modal" v-on:click="closeNoSave" aria-hidden="true" style="opacity: 1;font-size: 27px">
                        <span class="line-icon line-icon-close">
                            <i class="far fa-times" style="color:#222222; background-color: unset"></i>
                        </span>
                    </button>
                    <h2 class="text-center" style="font-weight: 600 !important; font-size: 20px; color: #222222"> カレンダー予約の転送先を選択してください</h2>

                </div>
                <div class="modal-body" style="padding-top: 0">
                    <div class="text-center" style="font-size: 14px;font-weight: 300; color: #222222; line-height: 19px">
                        カレンダー予約｢@{{ calendar.manager_name }}｣の <br>URL・QRコードを転送する予約システムを選択してください。 <br>
                        ※ 2025年4月以降の変更はできません。
                    </div>
                    <div style="text-align: center; font-size: 14px;font-weight: 300; color: #F44336; margin-top: 33px">どれか1つを選択してください。</div>
                    <div class="box-list-option">
                        <div class="d-flex" style="justify-content: space-between">
                            <div class="option-salon">
                                <div class="tt-option">サロン・面談予約</div>
                                <div v-if="salon_list.length > 0" v-for="(item,index) in salon_list">
                                    <input type="radio" class="radio-custom" v-on:change="checkOptionRedirect('salon')" :value="item.id" :id="'id_salon_'+index" v-model="id_salon">
                                    <label  :for="'id_salon_'+index"
                                           class="radio-custom-label">@{{ item.manager_name }}</label>
                                </div>
                                <div class="txt-no-data" v-if="salon_list.length == 0">
                                    予約システムの登録がありません
                                </div>


                            </div>
                            <div class="option-salon">
                                <div  class="tt-option">レッスン予約</div>
                                <div v-if="lesson_list.length > 0" v-for="(item,index) in lesson_list">
                                    <input type="radio" class="radio-custom" v-on:change="checkOptionRedirect('lesson')"  :value="item.id" :id="'id_lesson_'+index" v-model="id_lesson">
                                    <label  :for="'id_lesson_'+index"
                                            class="radio-custom-label">@{{ item.calendar_name }}</label>
                                </div>
                                <div class="txt-no-data" v-if="lesson_list.length == 0">
                                    予約システムの登録がありません
                                </div>

                            </div>
                        </div>
                        <div  class="tt-option" style="margin-top: 30px">その他</div>
                        <div >
                            <input type="radio" class="radio-custom" v-on:change="checkOptionRedirect('no_redirect')"  value="1" id="no_redirect" v-model="no_redirect">
                            <label for="no_redirect"
                                   class="radio-custom-label">引き継ぎをやめる</label>
                        </div>

                    </div>

                    <div class="txt-redirect-w" style="">
                        ※コース・予約枠などの登録情報や友だちの予約情報は <br>｢レッスン予約｣、｢サロン・面談予約｣には引き継がれません。
                    </div>



                </div>
                <div class="text-center" style="margin-bottom: 30px">
                    <button type="button" v-on:click="saveSettingRedirect" style="width: 300px !important;"
                            class="btn btn-sns-line btn-sns-line-success btn-save-setting-show-md">設定する（すぐに反映されます）</button> <br>

                </div>
            </div>
        </div>
    </div>
</div>
 {{--    {{ $calendar_list->links() }}--}}
    <div class="h_alert info" id="ms__copy">
        <span class="closebtn">&times;</span>
        <span>コピーしました</span>
    </div>
@endsection

@push('js')
    <script>
        const ajax_booking_calendar_remove = "{{ route('ajax.booking_calendar.remove') }}";
        const time_click_modal_notify = "{{ $time_click_modal_notify }}";
    </script>
    <script src="/js/booking_manager/japanese-holidays.min.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/booking_manager/message.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/booking_manager/function.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/booking_manager/index.js?v={{config('sns-line.version')}}"></script>
@endpush