@extends('layout.basic.main')
@section('title', 'イベント予約（開催時刻一覧）')

@push('css')
    <link rel="stylesheet" href="/css/booking/setting_slot.css?v={{config('sns-line.version')}}">
    <style>
        a, span, div, .btn{
            font-weight: bold;
        }
        .row-setting-slot {
            width: 70%;
            min-width: 1040px;
        }

        #settingActionUrlModal #close_modal_action {
            line-height: 40px !important;
        }

        #settingActionUrlModal .ic-close {
            line-height: 15px !important;
            top: 5px !important;
        }

        .ic-cal-ip {
            position: absolute;
            left: 8px;
            top: 5px;
            color: rgba(190, 190, 190, 1);
            cursor: pointer;
        }

        .c_h_tooltip {
            position: relative;
            display: inline-flex;
            margin-left: 12px;
        }

        .c_h_tooltip .c_h_tooltip-text {
            visibility: hidden;
            width: 200px;
            color: #000;
            text-align: left;
            border-radius: 6px;
            padding: 8px;
            position: absolute;
            z-index: 1;
            bottom: 140%;
            opacity: 0;
            transition: opacity 0.3s;
            border: 1px solid #d1d1d1;
            transform: translate(-48%);
            font-size: 12px;
            background-color: white;
        }

        .c_h_tooltip:hover .c_h_tooltip-text {
            visibility: visible;
            opacity: 1;
            box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
        }

        .c_h_option-c {
            display: flex;
            flex-direction: row;
            margin: auto 0;
            align-items: center;
        }

        .c_h_tooltip .c_h_tooltip-text::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: 0;
            border-width: 5px;
            border-style: solid;
            border-color: #fff transparent transparent transparent;
        }

        .c_h_tooltip-text * {
            line-height: 25px;
        }

        .box_menu_p{
            display: flex;
        }
        .item_menu_p{
            font-size: 18px;
            padding: 8px 0px;
            cursor: pointer;
        }
        .item_menu_p label{
            cursor: pointer;
            color: #7D9195;
        }
        .item_menu_p.active label{
            color:#08BF5A ;
        }
        .item_menu_p.active .line{
            height: 4px;
            border-radius: 5px;
            background-color: #08BF5A;
            width: 100%
        }
        .btn_danger_cus{
            color: #F44336 !important;
            background-color: #FFDAD8
        }
        .btn_primary_cus{
            color: #5799DB !important;
            background-color: #D5E9FC
        }
        .btn_success_cus{
            color: #08BF5A !important;
            background-color: #CBF4DD
        }
        .input-border{
            border: 1.5px solid #E8E8E8 !important;
            height: 37px !important;
        }
        .icon-calendar{
            position: absolute;
            top: 1px;
            width: 36px;
            display: inline-block;
            left: 1px;
            background: unset;
            border: 0;
            padding: 8px 12px 9px;
        }

        .datetimepicker, .datetimepicker_end, .datetimepicker_allow_cancel, .datetimepicker_deadline{
            padding-left: 36px !important;
        }
        .txt_sp{
            font-size: 13px;
        }
        .item_row{
            border: 1.5px solid #F0F0F0;
            border-radius: 5px;
            /*padding: 15px;*/
            margin-top: 16px;
        }
        .item_time {
            background: #F2F2F2 ;
            border-radius: 5px;
            padding: 9px 15px;
            margin-right: 5px;
            /*margin-bottom: 5px;*/
            font-size: 13px;
        }
        .box_plan_icon{
            display: flex;
        }
        .box_plan_icon >*{
            margin-left: 10px;
        }
        .box_plan {
            display: flex;
            background: #F8F8F8;
            align-items: center;
            justify-content: space-between;
            padding: 7px 15px 11px 14px;
            font-size: 13px;
            width: inherit;
            border-radius: 5px;
        }
        .box_time_left .line-icon{
            border: 1px solid #E0E0E0;
            border-radius: 5px;
            width: 36px;
            line-height: 35px;
            height: 35px;
            background-color: #FFFFFF ;
        }
        .box_time_left .line-icon:hover{
            background-color: #96ADB2 !important;
        }
        .box_plan_icon .line-icon{
            border: 1px solid #E0E0E0;
            border-radius: 5px;
            width: 36px;
            line-height: 35px;
            height: 35px;
            /*background-color: #FFFFFF ;*/
        }
        .box_plan_icon .line-icon i, .box_time_left .line-icon i{
           font-size: 17px;
            color: #7D9195;
         }
        .item_row .box_time_left{
            background: #7D9195;
            color: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 5px 12px;
            /*border-radius: 5px;*/

        }
        .item_row .box_content_plan{
            padding: 15px;
        }
        .item_plan{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            margin-bottom: 10px;
        }
        .box_plan label{
            word-break: break-all;
        }
        .item_row .txt_sp{
            /*color: #8F9293;*/
            margin-right: 13px;
            min-width: 40px;
        }
        .button_add_del{
            display: flex;
            justify-content: space-between;
        }
        .box_content_bd{
            border: 2px solid #E8E8E8;
            border-radius: 5px;
            margin-top: 20px;
            padding: 15px
        }
        .title_border{
            display: flex;
            align-items: center;
        }
        .title_border .border{
            width: 11px;
            height: 35px;
            background: #08BF5A;
            border-radius: 3px;
            margin-right: 11px;
        }
        .title_border .text{
            font-size: 16px;
        }
        .notify {
            position: absolute;
            font-weight: bold;
            width: 600px;
            padding: 10px;
            top: -45px;
            box-shadow: 0px 3px 6px #00000029;
            border-radius: 5px;
            font-size: 13px !important;
            opacity: 0;
            background-color: white;
            left: 5px;
            transition: opacity 0.3s ease;
            visibility: hidden;
        }

        .fa-question-circle:hover  + .w-notify .notify {
            opacity: 1;
            visibility: visible;
        }
        .w-notify {
            padding-bottom: 30px;
            top: -71px;
            position: absolute;
            opacity: 0;
            visibility: hidden;
        }
        .fa-question-circle:hover {
            cursor: pointer;
        }

        .show-notify {
            position: relative;
            z-index: 1000;
        }
        .item-row{
            display: flex;
            align-items: center;
            margin-top: 25px;
        }
        .col_tt{
            width: 215px;
        }
        .col_content{
            display: flex;
            align-items: center;
        }
        .w-notify {
            padding-bottom: 30px;
            top: -71px;
            position: absolute;
            opacity: 0;
            visibility: hidden;
        }

        .fa-question-circle:hover + .w-notify {
            opacity: 1;
            visibility: visible;
        }

        .w-notify:hover {
            opacity: 1;
            visibility: visible;
        }

        .col_tt .text{
            color: #8F9293;
            font-size: 16px;
        }
        .box_gray{
            margin-top: 15px;
            background: #F8F8F8;
            border-radius: 5px;
            padding: 15px;
            font-size: 13px;
        }
        .box_gray .btn_tt{
            background: #7D9195;
            border-radius: 3px;
            padding: 9px 20px 5px 20px;
            width: 249px;
            text-align: center;
            font-size: 13px;
            margin-bottom: 5px;
            color: #FFFFFF;
        }
        .list-action-item{
            max-height: 140px;
            overflow: hidden;
        }

        .list-action-item .item-action{
            text-align: left;
            background-color: #F2F2F2;
            padding: 8px 10px;
            border-radius: 5px;
            margin-top: 8px;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: bold;
        }
        .col_content_action{
            width: 40%;
        }
        .box_request_cancel .item-row .col_tt{
            width: 266px;
        }
        .col_content_action .btn-add-action-plan{
            width: 90px;
        }
        .scroll-modal{
            max-height: 67vh;
            overflow: auto;
        }

        .radio_form_setting label {
            /*display: flex;*/
            cursor: pointer;
            font-weight: 500;
            position: relative;
            overflow: hidden;
        }
        .radio_form_setting label input {
            position: absolute;
            left: -9999px;
        }
        .radio_form_setting label input:checked + span {
            background-color: #F4FBF2;
            border: 1.5px solid #44CB80;
        }

        .radio_form_setting label input:checked + span:before {
            display: flex;
            flex-shrink: 0;
            content: "";
            background-color: #00a65a;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            margin-right: 11px;
            transition: 0.25s ease;
            border: 1px solid #96ADB2;
            /*border: 2px solid #08BF5A;*/
            box-shadow: inset 0 0 0 4px #F4FBF2;
        }
        .radio_form_setting label input:checked + span:after {
            width: 3px;
            height: 3px;
            border-radius: 50%;
            margin-right: 0.375em;
            background: red;
        }
        .radio_form_setting label span {
            display: flex;
            align-items: center;
            padding: 9px 12px;
            border: 1.5px solid #7D9195;
            border-radius: 5px;
            width: 100%;
            font-size: 12px;
        }
        .radio_form_setting label span:hover {
            background: #F4FBF2 ;
            border: 1.5px solid #44CB80;
        }
        .radio_form_setting label span:before {
            display: flex;
            flex-shrink: 0;
            content: "";
            width: 22px;
            height: 22px;
            border-radius: 50%;
            margin-right: 11px;
            background: #FFFFFF;
            border: 1px solid #96ADB2;
        }
        .bootstrap-timepicker-widget table td input{
            width: 35px ;
        }
    </style>
@endpush
@section('content')
    <br/>
    <div class="" id="add_slot_date" v-cloak>
        <div class="row d-flex align-item-center">
            <div class="col-md-9" style="    display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px">
                <div style="display: flex; align-items: center">
                    開催日
                    <div style="  position: relative;  border: 1.5px solid #E8E8E8; margin-left: 15px;   border-radius: 4px;">
                        <label style="position: absolute; left: 39px; top: 9px;opacity: 2;">
                            @{{formatDate(dateSetting.date_start)}}</label>
                        <label class="input-group-addon icon-calendar" for="date_start"
                               style="position: absolute;position: absolute;    top: 1px;">
                            <i class="fal fa-calendar" style="color: #7D9195; font-size: 18px"></i>
                        </label>
                        <input type="text" class="form-control datetimepicker datetimepicker_deadline input-border " name="date_start"
                               id="date_start" style=" opacity: 0.1; width:197px;color: white; margin-right: 15px" v-model="dateSetting.date_start" >
                    </div>
                </div>
                <input type="hidden" value="{{$date_id}}" id="date_id">
            </div>

        </div>

        <div class="boxTimeCourse" >
            <div class="row">
                <div class="col-md-9" >
                    <div style="display: flex; align-items: center; justify-content: space-between;    font-size: 14px;">
                        <div style="display: flex; align-items: center">
                            <button class="btn btn-sns-line btn-sns-line-primary btn_primary_cus"
                                   v-on:click="addSlotOfDate(dateSetting.id)" style=" font-size: 14px;">
                                開催時刻追加
                            </button>
                            <i class="fas fa-user-circle" style="color: #7D9195; margin-left: 15px;font-size: 18px; "></i><span class="txt_sp" style=" margin-left: 5px">定員数</span>
                            <i class="fas fa-yen-sign" style="color: #7D9195;margin-left: 10px; font-size: 18px;"></i><span  class="txt_sp"  style=" margin-left: 5px">コース料金</span>
                        </div>

                    </div>

                </div>
            </div>
            <div class="row">
                <div class="col-md-9" >
                    <div class="item_row" v-if="slots.length > 0" v-for="(slot, indexSlot) in slots">
                        {{--                    nếu có plan--}}
                        <div class="box_time_left">
                           <div> <i class="far fa-clock"></i> @{{ setValueTime(slot.time_start) }} - @{{slot.time_end ? setValueTime(slot.time_end): '指定なし' }}</div>
                            <div>
                                <i class="fas fa-user-circle" style=" margin-left: 15px;font-size: 18px; "></i><span class="txt_sp" style=" margin-left: 5px">@{{ slot.number_people }}</span>
{{--                                <i class="fas fa-yen-sign" style="margin-left: 10px; font-size: 18px;"></i><span  class="txt_sp"  style=" margin-left: 5px">-</span>--}}
                                <span class="line-icon" v-on:click="editSlot(slot)"><i class="fas fa-pen"></i></span>
                                <span class="line-icon" v-on:click="copySlot(slot.id)"><i class="fal fa-copy icon-plan"></i></span>
                                <span class="line-icon" v-on:click="removeSlot(slot.id, indexSlot)"><i class="fal fa-trash-alt icon-plan"></i></span>
                            </div>
                        </div>
                        <div class="box_content_plan">
                            <div class="item_plan" v-if="slot.plans.length > 0" v-for="(plan,index) in slot.plans">
                                <div class="box_plan">
                                    <label>@{{ plan.name }}</label>
                                    <div style="display: flex">
                                        <i class="fas fa-user-circle" style="color: #7D9195; margin-left: 15px;font-size: 18px; "></i><span class="txt_sp" style=" margin-left: 5px">@{{ plan.using_max_slot == 0 ? plan.limit : '' }}</span>
                                        <i class="fas fa-yen-sign" style="color: #7D9195;margin-left: 10px; font-size: 18px;"></i><span  class="txt_sp"  style=" margin-left: 5px">@{{ formatPrice(plan.price) }}</span>
                                    </div>
                                </div>
                                <div class="box_plan_icon">
                                    <span class="line-icon" v-on:click="editPlan(plan.id)"><i class="fas fa-pen"></i></span>
                                    <span class="line-icon" @click="onUpdateDefault(indexSlot, index, 'up')"><i class="far fa-chevron-circle-up"></i></span>
                                    <span class="line-icon" @click="onUpdateDefault(indexSlot, index, 'down')"><i class="far fa-chevron-circle-down"></i></span>
                                    <span class="line-icon"  @click="copyPlan(plan)" ><i class="fal fa-copy icon-plan"></i></span>
                                    <span class="line-icon" @click="removePlan(plan.id,indexSlot,index)" ><i class="fal fa-trash-alt icon-plan"></i></span>
                                </div>
                            </div>

                            <div class="button_add_del">
                                <button class="btn btn-sns-line btn-sns-line-primary btn_primary_cus"
                                        v-on:click="addPlan(slot.id)" style=" font-size: 14px;">コース追加</button>
{{--                                <button class="btn btn-sns-line btn-sns-line-danger btn_danger_cus" style=" font-size: 14px;">削除</button>--}}
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="row">
                <div class="col-md-9" >
                    <div style="    display: flex;
                                    align-items: baseline;
                                    justify-content: space-between;">
                        <button type="button" class="btn btn-sns-line btn-sns-line-lg btn-sns-line-success"
                             v-on:click="saveAllSlotPlan"   style="box-shadow: 0px 2px 0px #00000080;width: 200px ;margin-top: 20px; ">保存</button>
                        <button type="button" v-on:click="deleteDateSlot(dateSetting.id)" class="btn btn-sns-line btn-sns-line-danger btn_danger_cus"
                                style=" font-size: 14px;">開催日を削除</button>
                    </div>

                    <br>
                    <button type="button" class="btn btn-sns-line btn-sns-line-lg btn-sns-line-dark"
                            v-on:click="back()"
                            style="box-shadow: 0px 2px 0px #00000080;width: 150px">戻る</button>

                </div>
            </div>
        </div>


        <div class="modal fade" id="copyAndAddSlotModal" role="dialog" aria-hidden="true">
            <div class="modal-dialog " role="document">
                <div class="modal-content">
                    <div class="modal-header" style="border: none">
                        <button type="button" class="close" data-dismiss="modal"
                                aria-hidden="true" style="opacity: 1;font-size: 27px"
                        >
                            <span class="line-icon line-icon-close"><i class="fas fa-times" style="color: #7D9195"></i></span>
                        </button>

                    </div>
                    <div class="modal-body scroll-modal">
                        <div style="padding: 0 15px">
                            <div style="color: #8F9293; margin-bottom: 10px">
                                コピーする時刻を選択
                            </div>
                            <div class="radio_form_setting">
                                <label style=" ">
                                    <input type="radio"  checked name="setting_shortcut" id="setting_shortcut"  value="1"/>
                                    <span class="font-weight-bold">6:00 - 7:00</span>
                                </label>
                                <label>
                                    <input type="radio" name="setting_shortcut" id="setting_shortcut1"  value="0"/>
                                    <span class="font-weight-bold">10:00 - 11:00</span>
                                </label>
                                <label>
                                    <input type="radio" name="setting_shortcut" id="setting_shortcut1"  value="0"/>
                                    <span class="font-weight-bold">13:00 - 14:00</span>
                                </label>

                            </div>
                            <div  style="color: #8F9293; margin-top: 15px; margin-bottom: 5px">追加する時刻</div>
                            <div class="d-flex " >
                                <div style="width: 140px; margin-right: 20px" >
                                    <input type="time" class="form-control input-border" @blur="hideMessageError('time_end')" name="time_end">
                                </div>
                                <div style="width: 140px" >
                                    <input type="time" class="form-control input-border" @blur="hideMessageError('time_end')" name="time_end">
                                </div>
                                <p class="text-error-line" id="err_time_start"></p>
                                <p class="text-error-line" id="err_time_end"></p>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer " style="border: none">
                        <div class="text-center">
                            <button type="button" class="btn btn-sns-line btn-sns-line-success btn-sns-line-lg"
                                    >コピー実行</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

@endsection
@push('js')
    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
    <script>
        var date_id = null;
    </script>
    <script src="/js/form_answer/vuedraggable.min.js"></script>
    <script src="/js/form_answer/vee-validate.rc7.min.js"></script>
    <script src="/js/form_answer/vee-validate_ja.min.js"></script>
    <script src="/chat_files/bootstrap-timepicker.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment-with-locales.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.40/moment-timezone-with-data.min.js"></script>
    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
    <script src="/js/booking_event_day/add_slot_date.js?v={{config('sns-line.version')}}"></script>

    <script>
        $(document).ready(function () {
            $('.datetimepicker_deadline').datepicker({
                dateFormat: "yy-mm-dd",
                theme: 'dark',
                language: 'ja',
                minDate: new Date(),
                onClose: function (selectedDate, event) {
                    $('#err_date_deadline').text('');
                }
            });
        });
    </script>


@endpush