@extends('layout.basic.main')
@push('css')
    {{--    <link rel="stylesheet" href="/css/broadcast/style.css?v={{config("sns-line.version")}}">--}}
    <link rel="stylesheet" href="/css/friendlist/style.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/booking/style.css?v={{config("sns-line.version")}}">

    <style>

        /*a:hover {*/
        /*    color: red !important;*/
        /*}*/
        body{
            color: #51595C;
        }
        a{
            cursor: pointer;
        }
        .dis-flex {
            display: flex;
        }

        .ml-2 {
            margin-left: 20px;
        }

        .box-tag {
            display: grid;
        }

        .box-tag > * {
            margin-top: 5px;
        }

        .control-label {
            margin-bottom: 5px !important;
        }

        .tagdetail_left, .tem_choice{
            width: 100%;
        }

        .tem_choice ul li.active{
            background: #ccc !important;
        }

        #item_vuelist_tag_3 .tem_choice ul li a.category_active{
            background-color: #ccc;
        }

        #item_vuelist_tag_3 .tem_choice ul > li {
            padding: 0;
        }

        #item_vuelist_tag_3 .tem_choice ul > li > a{
            padding: 10px;
        }

        #item_vuelist_tag_3 .tem_choice .choice_detail ul > li{
            padding: 10px;
        }

        .text-left {
            text-align: left !important;
        }
        table th{
            background-color: #08BF5A !important;
            font-weight: bold;
            border: none!important;
        }
        .btn{
            font-weight: bold;
        }
        td {
            /*text-align: center !important;*/
            border: none;
            border-bottom: 1px solid #eee;
            vertical-align: middle;
            padding: 5px 10px !important;
        }
        #tab-content-table .active {
            background-color: white !important;
        }

        .nav-content-event li.active a {
            background-color: #7D9195 !important;
            color: white !important;
            border: none;
            /*border-color: #707070;*/
            /*border-top: 1px solid #707070;*/
        }

        .nav-content-event li.active a:hover, .nav-content-event li.active a:focus {
            background-color: #7D9195 !important;
            color: white;
            /*border-color: #707070;*/
            /*border-top: 1px solid #707070;*/
            border: none;
        }

        .nav-content-event li {
            width: 140px;
            text-align: center;
        }

        .nav-content-event > li {
            background-color: white;
            color: #51595C;
            border: none;
            /*border-bottom: 1px solid #707070;*/
        }

        .nav-content-event > li:hover {
            background-color: white;
            color: #51595C;
            border: none;
            /*border-bottom: 1px solid #707070;*/
        }

        .nav-content-event > li a {
            color: #51595C;
            border: none;
            font-weight: bold;
            padding-top: 9px;
        }
        #tab-content-table {
            border-top: 2px solid #7D9195;
        }

        .top_td td{
            vertical-align: baseline !important;
        }
        .top_td .p-mb-5{
            margin-bottom: 5px;
        }
        .btn:hover{
            opacity: 0.7;
        }
        /*.btn-cus-a:active{*/
        /*    box-shadow: 1px -3px 3px rgb(128 128 128 / 73%) !important;*/
        /*    outline: none;*/
        /*}*/
        /*.btn:active{*/
        /*    box-shadow: 1px -3px 3px rgb(128 128 128 / 73%) !important;*/
        /*    outline: none;*/
        /*}*/
        .btn:focus{
            outline: none;
        }
        td, span, div{
            color: #51595C;
            font-weight: bold;
        }
        .nav-tabs>li{
            margin-bottom: 0 !important;
        }
        .btn-sns-line:disabled{
            background-color: rgb(176, 194, 198);
            color: white;
            cursor: no-drop;
            opacity: 1;
        }
    </style>
@endpush
@section('content')
    <article class="">
        <section class="taglist tmp" id="list-slot-event" v-cloak>
{{--            <div class="row">--}}
{{--                <div class="col-sm-12">--}}
{{--                    <ol class="breadcrumb" style="margin-bottom: 0px;">--}}
{{--                        <li><a href="{!! route('list_event.booking_event') !!}">イベント一覧</a></li>--}}
{{--                        <li>{{$event_title}}の予約枠一覧</li>--}}
{{--                    </ol>--}}
{{--                </div>--}}
{{--            </div>--}}
            <input id="event_id" value="{{$id_event}}" name="event_id" type="hidden">
            <h2 class="title">{{$event_title}}予約枠一覧</h2>
            <section>
                <ul class="nav nav-tabs nav-content-event" style="margin-top: 20px;border-bottom: none !important;">
                    <li :class="activeTab == 1 ? 'active' : ''" v-on:click="chooseTab(1)"><a data-toggle="tab" href="#home">開催予定</a></li>
                    <li  :class="activeTab == 2 ? 'active' : ''" v-on:click="chooseTab(2)"><a data-toggle="tab" href="#menu1">開催済み</a></li>
                </ul>
                <div class="tab-content" id="tab-content-table">
                    <div id="home" class="tab-pane in active  ">
                        <div  style="    margin-top: 16px;">
                            <div class="form-group form-inline dis-flex" style="    justify-content: flex-end;">
                                {{--                        <select--}}
                                {{--                                name="sort_time" class="form-control"--}}
                                {{--                                v-model="sort_time"--}}
                                {{--                                v-on:change="sortTimeStart"--}}
                                {{--                                style="min-width: 180px; margin-right: 20px">--}}
                                {{--                            <option value="asc">--}}
                                {{--                                日時が早い順--}}
                                {{--                            </option>--}}
                                {{--                            <option value="desc">--}}
                                {{--                                日時が遅い順--}}
                                {{--                            </option>--}}
                                {{--                        </select>--}}
                                <div>
                                    <button type="button" v-if="(selected == false)"
                                       class=" btn btn-sns-line btn-sns-line-danger" disabled
                                    > 一括削除
                                    </button>
                                    <button type="button" v-else  class="btn btn-sns-line btn-sns-line-danger"
                                       v-on:click="removeSlots"
                                            {{--                                    v-on:click="deleteItemsInfo()"--}}
                                            {{--                                    v-bind:class="(group_open == 0 && selected == false) || (group_open != 0 && selected == false)?'disabled':''"--}}
                                    > 一括削除
                                    </button>
                                </div>
                                {{--                        <a class="btn btn-danger" v-on:click="removeSlots" style="background: #F44336; width: 80px; border-color:#F44336 ">一括削除</a>--}}
                                {{--                        <div class="dropdown "  :hidden="selected == false">--}}
                                {{--                            <button id="batch-operation" type="button"--}}
                                {{--                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"--}}
                                {{--                                    class="btn btn-warning btn-sm dropdown-toggle">--}}
                                {{--                                一括操作--}}
                                {{--                                <span class="caret"></span></button>--}}
                                {{--                            <ul aria-labelledby="batch-operation"--}}
                                {{--                                class="dropdown-menu">--}}
                                {{--                                <li class="focus-pointer"><a v-on:click="removeSlots"--}}
                                {{--                                    >イベント枠の一括削除</a></li>--}}
                                {{--                            </ul>--}}
                                {{--                        </div>--}}
                            </div>
                            <table class="table">
                                <thead>
                                <tr>
                                    <th style="width: 50px"><input type="checkbox" name="" value="" v-model="selectAll" v-on:change="changeColorAll()"></th>
                                    <th class="text-left " style="width: 300px">
                                            日程
                                            <img src="/images/ic_sort_event.png" style="width: 10px; cursor: pointer" v-on:click="sortHeader('date_start_from')">
                                      </th>
                                    <th class="text-left" style="width: 220px" v-if="activeTab == 1">
                                        予約期限
{{--                                        <i class="fa fa-sort ml-3" v-on:click="sortHeader('date_deadline')"></i>--}}
                                        <img src="/images/ic_sort_event.png" style="width: 10px; cursor: pointer" v-on:click="sortHeader('date_deadline')">
                                    </th>
                                    <th class="text-left " style="min-width:104px;">
                                        予約人数/定員
                                    </th>
                                    <th style="width: 100px" v-if="activeTab == 1">
                                        承認待ち
                                    </th>
                                    <th style="width: 120px">
                                        参加者リスト
                                    </th>
                                    {{--                            <th>--}}
                                    {{--                                操作--}}
                                    {{--                            </th>--}}
                                </tr>
                                </thead>
                                <tbody><!---->
                                <tr v-for="(item,index) in items"  :class="item.plans.length >1 ? 'top_td' : ''" >
                                    <td :class="'check_all check_slot_'+item.id">
                                        <input type="checkbox" :id="'checkbox_slot_'+item.id" name="check_item[]" :value="item.id" v-model="selected" v-on:change="changeColor(item.id)">
                                    </td>
                                    <td :class="'text-left check_all check_slot_'+item.id">
                                        <div class="dis-flex align-items-baseline">
                                            <div>
                                                <span>@{{setLabelHeld(item)}} </span>
                                                {{--                                        <span> 開催日時：@{{setLabelHeld(item)}} </span>--}}
                                                {{--                                        <span> 締切日時：@{{setLabelTimeDeadline(item)}}  </span> <br>--}}
                                                {{--                                        <span> 開催場所：@{{ item.address }} </span></div>--}}
                                                {{--                                    <div class="ml-2 box-tag">--}}
                                                {{--                                        <span class="status-warning tag" v-if="item.approval_system == 1">承認制</span>--}}
                                                {{--                                        <span class="status-info tag" v-if="item.plans && item.plans.length >0">プランあり</span>--}}
                                            </div>
                                        </div>
                                    </td>
                                    <td :class="'text-left check_all check_slot_'+item.id" v-if="activeTab == 1" >
                                        <div class="dis-flex align-items-baseline">
                                            <span>@{{setLabelTimeDeadline(item)}}  </span>
                                        </div>
                                    </td>
                                    <td :class="'text-left check_all check_slot_'+item.id">
                                        <div  v-if="item.plans && item.plans.length >0">
                                            <div v-for="(plan, index) in item.plans" style="display: flex" >
                                                <div v-bind:style=" activeTab == 1 ? 'width: 70%;' : 'width: 40%;'" style="float: left" class="p-mb-5">
                                                    <span>@{{ plan.name }}</span>
                                                </div>
                                                <div  v-bind:style=" activeTab == 1 ? 'width: 30%;' : 'width: 60%;'" style="float: left">
                                                    <span> @{{ plan.numBookingApproveplan }}/@{{plan.limit}} </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div v-else>
                                            <span style=" margin-left: 20px;"> @{{ item.numBookingApprove }}/@{{item.number_people != null ? item.number_people : '-'}} </span>
                                        </div>
                                    </td>
                                    <td :class="'check_all check_slot_'+item.id" v-if="activeTab == 1">
                                        <div v-if="item.approval_system == 0"> -</div>
                                        <div v-else> @{{ item.numBookingNoApprove }}</div>
                                    </td>
                                    <td :class="'check_all check_slot_'+item.id" class="text-center">

                                            <a :href="'/basic/booking_event/event/booking-slot/' + item.event_detail_id + '/slots/' + item.id"
{{--                                                style="background-color: #96ADB2; border-color: #96ADB2; width: 80px; color: #ffffff; margin-bottom: unset;"--}}
                                            >
                                                <button type="button" class="btn btn-sns-line btn-sns-line-secondary btn-sns-line-sm " style=" width: 80px;">確認</button>
                                            </a>
                                    </td>
                                    {{--                            <td :class="'check_all check_slot_'+item.id">--}}
                                    {{--                                <div class="btn-group" style="min-width: 76px;">--}}
                                    {{--                                    <a class="btn btn-sm btn-warning"--}}
                                    {{--                                       v-on:click="modalEditSlot(item, index)"--}}
                                    {{--                                       data-toggle="modal"--}}
                                    {{--                                       data-target="#editSlot">編集</a>--}}
                                    {{--                                    <button type="button" data-toggle="dropdown"--}}
                                    {{--                                            style="height: 30px"--}}
                                    {{--                                            aria-haspopup="true" aria-expanded="false"--}}
                                    {{--                                            class="btn btn-sm btn-warning dropdown-toggle"><span--}}
                                    {{--                                                class="caret"></span>--}}
                                    {{--                                    </button>--}}
                                    {{--                                    <ul class="dropdown-menu" style="min-width: 50px;">--}}
                                    {{--                                        <li class="focus-pointer">--}}
                                    {{--                                            <a v-on:click="modalEditSlot(item, index)"--}}
                                    {{--                                               data-toggle="modal"--}}
                                    {{--                                               data-target="#editSlot">--}}
                                    {{--                                                編集--}}
                                    {{--                                            </a></li>--}}
                                    {{--                                        <li class="focus-pointer"><a v-on:click="removeSlot(item.id)">--}}
                                    {{--                                                予約枠を削除--}}
                                    {{--                                            </a></li>--}}
                                    {{--                                        <li class="focus-pointer">--}}
                                    {{--                                            <a v-on:click="modalBooking(item)"--}}
                                    {{--                                               data-toggle="modal"--}}
                                    {{--                                               data-target="#bookingNew">--}}
                                    {{--                                                管理者予約--}}
                                    {{--                                            </a>--}}
                                    {{--                                        </li>--}}
                                    {{--                                    </ul>--}}
                                    {{--                                </div>--}}
                                    {{--                            </td>--}}
                                </tr>
                                <tr v-show="items.length == 0">
                                    <td colspan="6" v-if="activeTab == 1"> データがありません。</td>
                                            <td colspan="4" v-else> データがありません。</td>
                                </tr>
                                </tbody>
                            </table>
                        </div> <!---->
                    </div>

                </div>

            </section>
            <div class="modal-overlay" style="display: none;"></div>
            <div class="modal fade" id="bookingNew" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" data-dismiss="modal" aria-label="Close" class="close"
                                    v-on:click="closeModalBooking"><span
                                        aria-hidden="true">×</span></button>
                            <h4 class="modal-title">
                                友だち予約登録
                            </h4></div>
                        <form class="form-horizontal" method="post" role="form" id="frmAddBookingSlot"
                              enctype="multipart/form-data" action="{{route('booking.save')}}">
                            <div class="modal-body">
                                <p class="alert alert-warning" style="display: inline-block;">
                                    管理者からの予約は「定員」、「〆切期限」、「予約回数制限」を無視して予約を実行します
                                </p>
                                <h5>イベント: {{$event_title}}</h5>
                                <h5>予約枠: @{{setLabelHeld(slot)}}
                                    <span v-if="slot.plans && slot.plans.length >0" class="status-info tag">プランあり</span>
                                    <span v-if="limit_booking">（残り @{{limit_booking}} 枠）</span>
                                </h5>
                                <div class="detail_booking">
                                    <div class="">
                                        <label class="control-label mt-2">予約種別
                                            <small><span class="label label-danger">必須</span></small>
                                        </label>
                                        <div>
                                            <label>
                                                <input type="radio" value="0" name="type_booking"
                                                       v-model="type_booking">友だち予約
                                            </label>
                                            <label>
                                                <input type="radio" value="1" name="type_booking"
                                                       v-model="type_booking">管理者予約
                                            </label>
                                        </div>
                                    </div>
                                    <div class="">
                                        <label class="control-label">
                                            予約者名
                                            <small><span class="label label-danger">必須</span></small>
                                        </label>
                                        <div>
                                            <input type="text" placeholder="予約者名を入力" class="form-control"
                                                   name="name" v-model="name" @keyup="hideMessageError('name')"
                                                   style="display: inline-block;">
                                            <p class="text-danger" id="err_name"></p>

                                        </div>
                                    </div>
                                    <div class="" v-if="type_booking == 1">
                                        <label class="control-label">
                                            メールアドレス
                                            <small><span class="label label-danger">必須</span></small>
                                        </label>
                                        <div>
                                            <input type="text" placeholder="メールアドレスを入力" class="form-control"
                                                   name="email" v-model="email" @keyup="hideMessageError('email')"
                                                   style="display: inline-block;">
                                            <p class="text-danger" id="err_email"></p>

                                        </div>
                                    </div>

                                    <div class="" v-if="type_booking == 0">
                                        <label class="control-label">
                                            予約する友だち
                                            <small><span class="label label-danger">必須</span></small>
                                        </label>
                                        <input list="friends" class="form-control" id="line_user_id" name="line_user_id"
                                               v-model="line_user_id" v-on:change="chooseFriend($event)">
                                        <datalist id="friends">
                                            <option v-for="(fr,index) in friendList" :value="fr.name"
                                                    :data-value="fr.id">

                                        </datalist>
                                        <p class="text-danger" id="err_line_user_id"></p>
                                    </div>

                                    <div class="" v-if="type_booking == 0">
                                        <label class="control-label">
                                            メールアドレス
                                            <small><span class="label {{ $event->is_required_input_email == 1 ? 'label-danger' : 'label-default' }}">
                                                    {{ $event->is_required_input_email == 1 ? '必須' : '任意' }}
                                                </span></small>
                                        </label>
                                        <input type="email" placeholder="example@xyz.com" @keyup="hideMessageError('email_user')" class="form-control" id="email_user" name="email_user" v-model="email_user">
                                        <p class="text-danger" id="err_email_user"></p>
                                    </div>

                                    <div class="" v-if="type_booking == 0">
                                        <label class="control-label">
                                            電話番号
                                            <small><span class="label {{ $event->is_required_input_phone == 1 ? 'label-danger' : 'label-default' }}">
                                                    {{ $event->is_required_input_phone == 1 ? '必須' : '任意' }}
                                                </span></small>
                                        </label>
                                        <input type="number" placeholder="08012345678" @keyup="hideMessageError('phone_user')" class="form-control" id="phone_user" name="phone_user" v-model="phone_user">
                                        <p class="text-danger" id="err_phone_user"></p>
                                    </div>

                                    <div class="">
                                        <label class="control-label">
                                            コメント
                                            <small><span class="label label-default">任意</span></small>
                                        </label>
                                        <div>
                                                <textarea rows="4" cols="50" class="form-control" name="remarks"
                                                          v-model="remarks" placeholder="コメントを入力"></textarea>
                                            <p class="text-danger" id="err_remarks"></p>
                                        </div>
                                    </div>
                                    <div class="">
                                        <label class="control-label">
                                            予約後アクション
                                            <small><span class="label label-danger">必須</span></small>
                                        </label>
                                        <div>
                                            <label>
                                                <input type="radio" value="1" name="action_before_booking"
                                                       v-model="action_before_booking">実行しない
                                            </label>
                                            <label>
                                                <input type="radio" value="0" name="action_before_booking"
                                                       v-model="action_before_booking">実行する
                                            </label>
                                        </div>
                                    </div>
                                    <input type="hidden" v-if="slot.plans && slot.plans.length >0"
                                           :value="slot.plans.length" name="count_plan">
                                    <div class="" v-if="slot.plans && slot.plans.length >0">
                                        <label class="control-label">
                                            プラン
                                            <small><span class="label label-danger">必須</span></small>
                                        </label>
                                        <select class="form-control" name="plan_slot_id" v-model="plan_slot_id"
                                                v-on:change="choosePlan($event)">
                                            <option value="">プランを選択してください</option>
                                            <option v-for="(plan,index) in slot.plans" :value="plan.id">
                                                @{{plan.name}}
                                            </option>
                                        </select>
                                        <p class="text-danger" id="err_plan_slot_id"></p>
                                    </div>
                                    <div class="">
                                        <label class="control-label">
                                            予約枚数
                                            <small><span class="label label-danger">必須</span></small>
                                        </label>
                                        <div>
                                            <input name="quantity"
                                                   type="number" class="form-control"
                                                   v-model="quantity"
                                                   onkeypress="return event.charCode >= 48;"
                                                   style="max-width: 78px; display: inline-block;">
                                            枚 <span v-if="limit_booking">（残り @{{limit_booking}}枚）</span>
                                            <p class="text-danger" id="err_quantity"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer" style="text-align: left;">
                                <input type="hidden" name="event_id" value="{{ $event->id }}"/>
                                <button class="btn btn-success" type="button" v-on:click="submitSaveBooking">
                                    登録
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>


            <div class="modal fade" id="editSlot" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document" style="max-height: 88vh; overflow: auto; box-shadow: 0 0 10px #ccc;">
                    <div class="modal-content" style="padding-bottom: 15px; border: none; border-radius: unset">
                        <div class="modal-header">
                            <button type="button" data-dismiss="modal" aria-label="Close" class="close" v-on:click="closeModalBooking"><span
                                        aria-hidden="true">×</span></button>
                            <h4 class="modal-title">
                                予約枠の編集
                            </h4>
                            <hr>
                            <h5>イベント: {{$event_title}}</h5>
                        </div>
                        <form class="form-horizontal" method="post" role="form" id="addSlotBookingEvent" style="width: 95%; margin: auto"
                              enctype="multipart/form-data" action="{{route('save.add_slot_booking')}}">
                            <div id="slots-box">
                                <div class="group">
                                    <input type="hidden" class="form-control " :name="'slot['+key+'][id]'" v-model="slot.id">
                                        <div :data-id="key">
                                            <div class="form-group">
                                                <label for="inputEmail3" class="col-sm-3 control-label">イベントタイプ <span
                                                            class="tag_required">必須</span></label>
                                                <div class="col-sm-9">
                                                    <div>
                                                        <label class="radio-inline">
                                                            <input type="radio" :name="'slot['+key+'][type_event]'"
                                                                   v-on:change="changeTime($event)"
                                                                   value="0" v-model="slot.type_event"> 単日イベント
                                                        </label>
                                                        <label class="radio-inline">
                                                            <input type="radio" :name="'slot['+key+'][type_event]'"
                                                                   v-on:change="changeTime($event)"
                                                                   value="1" v-model="slot.type_event"> 期間イベント
                                                        </label>

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">開催日程 <span class="tag_required">必須</span>
                                                </label>
                                                <div class="col-sm-9">
                                                    <div style="display: flex">
                                                        <input :name="'slot[date_start_from]'"
                                                               type="date" v-model="slot.date_start_from"
                                                               dateformat="d M y"
                                                               v-on:change="changeDateStart($event)"
                                                               class=" form-control w-20">

                                                        <span v-show="slot.type_event == 1">  〜 </span>
                                                        <input v-show="slot.type_event == 1"
                                                               :name="'slot[date_start_to]'"
                                                               type="date"
                                                               v-on:change="changeDateStart($event)"
                                                               v-model="slot.date_start_to"
                                                               class=" form-control w-20 ">
                                                    </div>

                                                    <p class="text-danger" :id="'err_slot_date_start_from'"></p>
                                                    <p class="text-danger" :id="'err_slot_date_start_to' "></p>
                                                </div>
                                            </div>

                                            <div class="form-group" v-show="slot.type_event == 0">
                                                <label class="col-sm-3 control-label">開催時間 <span class="tag_required">必須</span>
                                                </label>
                                                <div class="col-sm-9">
                                                    <div class="box-time">
                                                        <input type="time" class="form-control w-20"
                                                               :name="'slot[time_start]'"
                                                               v-on:change="changeTime($event)"
                                                               v-model="slot.time_start"><span>  〜  </span>

                                                        <input type="time" v-show="slot.is_hide_time_end == 0"
                                                               class="form-control w-20"
                                                               v-on:change="changeTime($event)"
                                                               :name="'slot[time_end]'"
                                                               v-model="slot.time_end">

                                                        <label class="checkbox-inline">
                                                            <input type="checkbox" value="1"
                                                                   v-on:change="changeTime($event)"
                                                                   :name="'slot[is_hide_time_end]'"
                                                                   v-model="slot.is_hide_time_end"> 終了時間を設定しない
                                                        </label>
                                                    </div>
                                                    <p class="text-danger" :id="'err_slot_time_start'"></p>
                                                    <p v-show="slot.is_hide_time_end == 0" class="text-danger"
                                                       :id="'err_slot_time_end'"></p>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label for="inputEmail3" class="col-sm-3 control-label">〆切日時 <span
                                                            class="tag_required">必須</span> </label>
                                                <div class="col-sm-9">
                                                    <div class="box-date">
                                                        <div class="m-width">
                                                            <span>日付</span>
                                                            <input type="date" class="form-control "
                                                                   :name="'slot[date_deadline]'"
                                                                   v-on:change="changeTime($event)"
                                                                   v-model="slot.date_deadline">

                                                        </div>
                                                        <div class="m-width">
                                                            <span>時間</span>
                                                            <input type="time" class="form-control "
                                                                   :name="'slot[time_deadline]'"
                                                                   v-on:change="changeTime($event)"
                                                                   v-model="slot.time_deadline">
                                                        </div>
                                                    </div>
                                                    <p class="text-danger" :id="'err_slot_date_deadline'"></p>
                                                    <p class="text-danger" :id="'err_slot_time_deadline'"></p>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">場所</label>
                                                <div class="col-sm-9">
                                                    <input type="text" class="form-control"
                                                           :name="'slot[address]'"
                                                           v-model="slot.address">
                                                    <p class="text-danger" :id="'err_slot_address'"></p>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">会場URL</label>
                                                <div class="col-sm-9">
                                                    <input type="text" class="form-control"
                                                           :name="'slot[' +key+ '][url_address]'"
                                                           v-model="slot.url_address" placeholder="https://example.com">
                                                    <p class="text-danger" :id="'err_slot_url_address'"></p>
                                                </div>
                                            </div>
                                            {{--v-if="slot.plans.length <= 0"--}}
                                            <div class="form-group" v-if="slot.plans && slot.plans.length <=0">
                                                <label class="col-sm-3 control-label">定員を設定 <span class="tag_required">必須</span>
                                                </label>
                                                <div class="col-sm-9 ">
                                                    <div class="box-number">
                                                        <input type="number" class="form-control w-10"
                                                               onkeypress="return event.charCode >= 48;"
                                                               :name="'slot[number_people]'"
                                                               v-model="slot.number_people"> 名
                                                    </div>
                                                    <p class="text-danger" :id="'err_slot_number_people'"></p>
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="box-panel">
                                                <div id="collapsePlan" data-toggle="collapse" :data-target="'#advanced_setting_'+key">
                                                    <a>
                                                        <i class="glyphicon glyphicon-chevron-down"></i> 詳細設定
                                                    </a>
                                                </div>
                                                <div>
                                                    <a class="btn btn-xs btn-default"
                                                       v-on:click="clearAdvancedSetting(key)">詳細設定をクリア</a>
                                                </div>

                                            </div>
                                            <div :id="'advanced_setting_'+key" class="collapse">
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label">承認制度有無 <span
                                                                class="tag_required">必須</span></label>
                                                    <div class="col-sm-9">
                                                        <div>
                                                            <div class="btn-group btn-toggle">
                                                                <input type="hidden" v-model="slot.approval_system"
                                                                       :name="'slot[approval_system]'">
                                                                <button class="btn "
                                                                        v-bind:class="{ 'btn-success': slot.approval_system == 1,
                                                            'btn-default': slot.approval_system ==0}"
                                                                        type="button" v-on:click="setActive(1)">承認制
                                                                </button>
                                                                <button class="btn"
                                                                        v-bind:class="{ 'btn-success': slot.approval_system == 0, 'btn-default': slot.approval_system ==1 }"
                                                                        type="button" v-on:click="setActive(0)">
                                                                    承認なし
                                                                </button>
                                                            </div>

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

                                                <div class="form-group">
                                                    <div class="col-sm-3 control-label " style="font-weight: bold">プラン設定
                                                        <button class="btn btn-sm btn-secondary" type="button"
                                                                v-on:click="addPlans(key)">追加
                                                        </button>
                                                    </div>
                                                    <div class="col-sm-9">
                                                        <div class="panel panel-default" v-for="(item,idx) in slot.plans">

                                                            <div class="panel-body">
                                                                <div class="box-plan-panel">
                                                                    <input type="hidden"
                                                                           :name="'slot[plans]['+idx+'][action_booking_success_id]'"
                                                                           v-model="item.action_booking_success_id">
                                                                    <input type="hidden"
                                                                           :name="'slot[plans]['+idx+'][action_at_time_cancel_id]'"
                                                                           v-model="item.action_at_time_cancel_id">
                                                                    <input type="hidden"
                                                                           :name="'slot[plans]['+idx+'][action_booking_change_id]'"
                                                                           v-model="item.action_booking_change_id">
                                                                    <input type="hidden"
                                                                           :name="'slot[plans]['+idx+'][action_booking_approve_id]'"
                                                                           v-model="item.action_booking_approve_id">
                                                                    <input type="hidden"
                                                                           :name="'slot[plans]['+idx+'][action_booking_denial_id]'"
                                                                           v-model="item.action_booking_denial_id">
                                                                    <input type="hidden"
                                                                           :name="'slot[plans]['+idx+'][id]'"
                                                                           class="form-control " v-model="item.id">
                                                                    <div>
                                                                        <input type="text" class="form-control "
                                                                               :name="'slot[plans]['+idx+'][name]'"
                                                                               {{--                                                                   name="name[idx][]"--}}
                                                                               v-model="item.name"
                                                                               v-on:change="inputChange(idx,key)">
                                                                        <p class="text-danger"
                                                                           :id="'err_slot_plans_'+idx+'_name'"></p>
                                                                    </div>

                                                                    <label class=" control-label">定員</label>
                                                                    <input type="number" min="0" class="form-control w-10"
                                                                           onkeypress="return event.charCode >= 48;"
                                                                           :name="'slot[plans]['+idx+'][limit]'"
                                                                           v-model="item.limit">
                                                                    <span>名</span>
                                                                    <input type="number" min="0" class="form-control w-10"
                                                                           onkeypress="return event.charCode >= 48;"
                                                                           :name="'slot[plans]['+idx+'][price]'"
                                                                           v-model="item.price">
                                                                    <span>円 </span>
                                                                    <button class="btn btn-xs btn-default"
                                                                            type="button"
                                                                            v-on:click="hideAction(idx,item.id)"><i
                                                                                class="glyphicon glyphicon-chevron-down"></i>アクション設定</button>
                                                                    <div class="cus-remove" @click="removePlan(idx)">
                                                                        <i class="glyphicon glyphicon-remove"
                                                                           style="color: red"></i>
                                                                    </div>
                                                                </div>
                                                                <hr v-if="item.open">
                                                                <table class="table table-striped" v-if="item.open"
                                                                       style="width: 100%;">
                                                                    <tbody>
                                                                    <tr>
                                                                        <td scope="row" style="width: 50%">
                                                                            <button class="btn btn-sm btn-warning btn-block"
                                                                                    type="button"
                                                                                    data-toggle="modal"
                                                                                    data-target="#settingActionModal"
                                                                                    v-on:click="openSettingAction(1,idx,item.action_booking_success_id)">
                                                                                <i class="glyphicon glyphicon-flash"></i> 予約成功時

                                                                            </button>
                                                                        </td>
                                                                        <td>
                                                                            <button class="btn btn-default btn-xs btn-block"
                                                                                    type="button"
                                                                                    v-on:click="removeAction(1,idx)"
                                                                                    v-if="item.action_booking_success_id && item.action_booking_success_id != 'delete'">設定解除</button>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td scope="row">
                                                                            <button class="btn btn-sm btn-warning btn-block"
                                                                                    type="button"
                                                                                    data-toggle="modal"
                                                                                    data-target="#settingActionModal"
                                                                                    v-on:click="openSettingAction(2,idx,item.action_at_time_cancel_id)">
                                                                                <i class="glyphicon glyphicon-flash"></i> キャンセル時
                                                                            </button>
                                                                        </td>
                                                                        <td>
                                                                            <button class="btn btn-default btn-xs btn-block"
                                                                                    type="button"
                                                                                    v-on:click="removeAction(2,idx)"
                                                                                    v-if="item.action_at_time_cancel_id && item.action_at_time_cancel_id != 'delete'">
                                                                                設定解除
                                                                            </button>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td scope="row">
                                                                            <button class="btn btn-sm btn-warning btn-block"
                                                                                    type="button"
                                                                                    data-toggle="modal"
                                                                                    data-target="#settingActionModal"
                                                                                    v-on:click="openSettingAction(3,idx,item.action_booking_change_id)">
                                                                                <i class="glyphicon glyphicon-flash"></i> 予約変更時
                                                                            </button>
                                                                        </td>
                                                                        <td>
                                                                            <button class="btn btn-default btn-xs btn-block"
                                                                                    type="button"
                                                                                    v-on:click="removeAction(3,idx)"
                                                                                    v-if="item.action_booking_change_id && item.action_booking_change_id != 'delete'">
                                                                                設定解除
                                                                            </button>
                                                                        </td>
                                                                    </tr>
                                                                    <tr v-if="slot.approval_system == 1">
                                                                        <td scope="row">
                                                                            <button class="btn btn-sm btn-warning btn-block"
                                                                                    type="button"
                                                                                    data-toggle="modal"
                                                                                    data-target="#settingActionModal"
                                                                                    v-on:click="openSettingAction(4,idx,item.action_booking_approve_id)">
                                                                                <i class="glyphicon glyphicon-flash"></i> 予約承認時

                                                                            </button>
                                                                        </td>
                                                                        <td>
                                                                            <button class="btn btn-default btn-xs btn-block"
                                                                                    type="button"
                                                                                    v-on:click="removeAction(4,idx)"
                                                                                    v-if="item.action_booking_approve_id && item.action_booking_approve_id != 'delete'">
                                                                                設定解除
                                                                            </button>
                                                                        </td>
                                                                    </tr>
                                                                    <tr v-if="slot.approval_system == 1">
                                                                        <td scope="row">
                                                                            <button class="btn btn-sm btn-warning btn-block"
                                                                                    type="button"
                                                                                    data-toggle="modal"
                                                                                    data-target="#settingActionModal"
                                                                                    v-on:click="openSettingAction(5,idx,item.action_booking_denial_id)">
                                                                                <i class="glyphicon glyphicon-flash"></i> 予約否認時

                                                                            </button>
                                                                        </td>
                                                                        <td>
                                                                            <button class="btn btn-default btn-xs btn-block"
                                                                                    type="button"
                                                                                    v-on:click="removeAction(5,idx)"
                                                                                    v-if="item.action_booking_denial_id && item.action_booking_denial_id != 'delete'">
                                                                                設定解除
                                                                            </button>
                                                                        </td>
                                                                    </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label">予約枠アクション設定 </label>
                                                    <input type="hidden" class="form-control w-30"
                                                           :name="'slot[action_booking_success_id]'"
                                                           v-model="slot.action_booking_success_id">
                                                    <input type="hidden" class="form-control w-30"
                                                           :name="'slot[action_at_time_cancel_id]'"
                                                           v-model="slot.action_at_time_cancel_id">
                                                    <input type="hidden" class="form-control w-30"
                                                           :name="'slot[action_booking_change_id]'"
                                                           v-model="slot.action_booking_change_id">
                                                    <input type="hidden" class="form-control w-30"
                                                           :name="'slot[action_booking_approve_id]'"
                                                           v-model="slot.action_booking_approve_id">
                                                    <input type="hidden" class="form-control w-30"
                                                           :name="'slot[action_booking_denial_id]'"
                                                           v-model="slot.action_booking_denial_id">

                                                    <div class="col-sm-9">
                                                        <table class="table table-striped" style="max-width: 75%; border-right: 1px solid #ccc">
                                                            <tbody>
                                                            <tr>
                                                                <td scope="row">
                                                                    <button class="btn btn-sm btn-warning btn-block"
                                                                            type="button"
                                                                            data-toggle="modal"
                                                                            data-target="#settingActionModal"
                                                                            v-on:click="openSettingAction(1, null, slot.action_booking_success_id)">
                                                                        <i class="glyphicon glyphicon-flash"></i> 予約成功時
                                                                    </button>
                                                                </td>
                                                                <td>
                                                                    <button class="btn btn-default btn-xs btn-block"
                                                                            v-if="slot.action_booking_success_id && slot.action_booking_success_id != 'delete'"
                                                                            v-on:click="removeAction(1, null)"
                                                                            type="button">
                                                                        設定解除
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td scope="row">
                                                                    <button class="btn btn-sm btn-warning btn-block"
                                                                            type="button" data-toggle="modal"
                                                                            data-target="#settingActionModal"
                                                                            v-on:click="openSettingAction(2,null,slot.action_at_time_cancel_id)">
                                                                        <i class="glyphicon glyphicon-flash"></i> キャンセル時
                                                                    </button>
                                                                </td>
                                                                <td>
                                                                    <button class="btn btn-default btn-xs btn-block"
                                                                            v-if="slot.action_at_time_cancel_id && slot.action_at_time_cancel_id != 'delete'"
                                                                            v-on:click="removeAction(2, null)" type="button">
                                                                        設定解除
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td scope="row">
                                                                    <button class="btn btn-sm btn-warning btn-block"
                                                                            type="button" data-toggle="modal"
                                                                            data-target="#settingActionModal"
                                                                            v-on:click="openSettingAction(3,null,slot.action_booking_change_id)">
                                                                        <i class="glyphicon glyphicon-flash"></i> 予約変更時
                                                                    </button>
                                                                </td>
                                                                <td>
                                                                    <button class="btn btn-default btn-xs btn-block"
                                                                            v-if="slot.action_booking_change_id && slot.action_booking_change_id != 'delete'"
                                                                            v-on:click="removeAction(3, null)" type="button">
                                                                        設定解除
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                            <tr v-if="slot.approval_system == 1">
                                                                <td scope="row">
                                                                    <button class="btn btn-sm btn-warning btn-block"
                                                                            type="button" data-toggle="modal"
                                                                            data-target="#settingActionModal"
                                                                            v-on:click="openSettingAction(4,null,slot.action_booking_approve_id)">
                                                                        <i class="glyphicon glyphicon-flash"></i> 予約承認時

                                                                    </button>
                                                                </td>
                                                                <td>
                                                                    <button class="btn btn-default btn-xs btn-block"
                                                                            v-if="slot.action_booking_approve_id && slot.action_booking_approve_id != 'delete'"
                                                                            v-on:click="removeAction(4, null)"
                                                                            type="button">
                                                                        設定解除
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                            <tr v-if="slot.approval_system == 1">
                                                                <td scope="row">
                                                                    <button class="btn btn-sm btn-warning btn-block"
                                                                            type="button" data-toggle="modal"
                                                                            data-target="#settingActionModal"
                                                                            v-on:click="openSettingAction(5,null,slot.action_booking_denial_id)">
                                                                        <i class="glyphicon glyphicon-flash"></i> 予約否認時

                                                                    </button>
                                                                </td>
                                                                <td>
                                                                    <button class="btn btn-default btn-xs btn-block"
                                                                            v-if="slot.action_booking_denial_id && slot.action_booking_denial_id != 'delete'"
                                                                            v-on:click="removeAction(5, null)" type="button">
                                                                        設定解除
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>

                                                <div class="form-group" v-show="slot.plans && slot.plans.length >0">
                                                    <label for="inputEmail3" class="col-sm-3 control-label">発動アクションを選択 </label>
                                                    <div class="col-sm-9">
                                                        <div>
                                                            <label class="radio-inline">
                                                                <input type="radio" :name="'slot[active_action]'"
                                                                       value="0" v-model="slot.active_action"> 予約枠のアクションを発動
                                                            </label>
                                                            <label class="radio-inline">
                                                                <input type="radio" :name="'slot[active_action]'"
                                                                       value="1" v-model="slot.active_action"> プランのアクションを発動
                                                            </label>

                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label">予約リマインダ <span v-if="!slot.remind_id" class="tag tag-second">未設定</span>
                                                    </label>
                                                    <div class="col-sm-9">
                                                        <select class="form-control" style="width: 50%; margin-bottom: 10px"
                                                                :name="'slot[remind_id]'"
                                                                v-model="slot.remind_id">
                                                            <option v-for="(ev, index) in events" :value="ev.event_time_id">
                                                                @{{ ev.event_name + ' ' + formatDate(ev.event_date) + ' ' + ev.event_start_time }}
                                                            </option>
                                                        </select>
                                                        <div class="alert alert-warning" style="display: inline-block">
                                                            <span>※ リマインダを設定した場合、その時点で開催日程・開催時間の変更不可になります。</span> <br>
                                                            <span>※ リマインダ解除後、再び開催日程・開催時間の設定が可能となります。</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label">友だちが予約できる回数</label>
                                                    <div class="col-sm-9">
                                                        <select class="form-control" style="width: 40%;"
                                                                :name="'slot[times_booking]'"
                                                                v-model="slot.times_booking">
                                                            <option value="1">
                                                                何度でも予約可能
                                                            </option>
                                                            <option value="2">
                                                                1度のみ予約可能
                                                            </option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label">備考</label>
                                                    <div class="col-sm-9">
                                            <textarea class="form-control" rows="3" :name="'slot[remarks]'"
                                                      v-model="slot.remarks"> </textarea>
                                                        <p class="text-danger" :id="'err_slot_remarks'"></p>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label">キャンセル・予約変更設定</label>
                                                    <div class="col-sm-9">
                                                        <label class="checkbox-inline">
                                                            <input type="checkbox"
                                                                   :name="'slot[allow_change_from_friend]'"
                                                                   value="1" v-model="slot.allow_change_from_friend">
                                                            友だちからの予約キャンセル・変更を許可する
                                                        </label> <br>
                                                        <label class="checkbox-inline" v-if="slot.allow_change_from_friend == 1">
                                                            <input type="checkbox" value="1"
                                                                   :name="'slot[setting_deadline]'"
                                                                   v-model="slot.setting_deadline"> 期限を設定する</label>
                                                        <div class="form-group mt-2" v-if="slot.setting_deadline == 1 && slot.allow_change_from_friend == 1">
                                                            <label class="col-sm-3 control-label" style="text-align: left">
                                                                キャンセル・変更可能期限: </label>
                                                            <div class="col-sm-9">
                                                                <div class="box-date">
                                                                    <div class="m-width">
                                                                        <span>日付</span>
                                                                        <input type="date" class="form-control datepicker"
                                                                               :name="'slot[date_deadline_change_cancel]'"
                                                                               v-model="slot.date_deadline_change_cancel">
                                                                    </div>
                                                                    <div class="m-width">
                                                                        <span>時間</span>
                                                                        <input type="time" class="form-control timepicker"
                                                                               :name="'slot[time_deadline_change_cancel]'"
                                                                               v-model="slot.time_deadline_change_cancel">
                                                                    </div>
                                                                </div>
                                                                <p class="text-danger"
                                                                   :id="'err_slot_date_deadline_change_cancel'"></p>
                                                                <p class="text-danger"
                                                                   :id="'err_slot_time_deadline_change_cancel'"></p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                </div>
                            </div>
                            <hr>
                            <div class="text-left">
                                <button type="button" class="btn btn-success" v-on:click="submitUpdateSlot">
                                    <span> 保存 </span>
                                </button>

                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </article>
    @include('layout.modal_setting.modal_edit_slot_setting_action')
@endsection
@push('js')
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAU9JfuYb5j2Xtr_v5__89wY5flXr0ai5I&libraries=places&callback=initMap&language={{App::getLocale()}}"
            async defer>
    </script>
    <script src="/js/vue-paginate.js"></script>
    <script src="/js/form_answer/vee-validate.rc7.min.js"></script>
    <script src="/js/msg_template/custom_rule.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/msg_template/vee-validate_ja.min.js"></script>
    <script src="/chat_files/bootstrap-timepicker.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="/plugins/moment/moment-locales.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment-with-locales.min.js"></script>

    <script>
        var token = "{!! csrf_token() !!}";
    </script>
    <script type="application/javascript" src="/js/booking/list_slot_event.js?v={{config("sns-line.version")}}"></script>

@endpush