@extends('layout.basic.main')
@section('title', 'イベント予約（参加者リスト）')
@push('css')
    <link rel="stylesheet" href="/css/booking/booking-all-slot.css?v={{ config('sns-line.version') }}">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css"
        integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">

    <style>
        body {
            color: #51595C;
            font-weight: bold;
        }

        select option {
            color: #51595C;
            font-weight: initial !important;
        }
        select {
            color: #7D9195 !important;
            text-align: center;
            padding-right: 27px !important;
            padding-bottom: 8px !important;
            font-weight: initial !important;
        }

        #tblDataAllSlot td,
        #tblDataAllSlot span,
        #tblDataAllSlot div,
        #tblDataAllSlot option {
            font-weight: initial !important;
        }

        a {
            cursor: pointer;
        }

        h2 {
            font-weight: bold;
        }

        select {
            appearance: auto !important;
        }

        .table>thead>tr>th {
            border-bottom: none;
        }

        #home thead th {
            background-color: #BDD2D6 !important;
            font-weight: bold;
            color: #51595C;
            font-size: 12px !important;
        }

        #menu1 thead th {
            background-color: #BDD2D6 !important;
            font-weight: bold;
            color: #51595C;
            font-size: 12px !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;
        }

        form#form-search input[type=text] {
            padding: 10px;
            padding-bottom: 13px;
            font-size: 13px;
            border: 1px solid #CECECE;
            float: left;
            width: 196px;
            height: 40px;
            margin-right: 0px;
            border-right: none;
            border-radius: 4px 0 0 4px;
            color: #51595C;
            outline: none;
            font-weight: initial;
        }

        form#form-search .btn-search {
            float: left;
            width: 11%;
            padding: 3px 7px 5px 0px;
            background: #ffffff;
            font-size: 19px;
            border: 1px solid #CECECE;
            border-left: none;
            cursor: pointer;
            border-left: none;
            height: 40px;
            border-radius: 0 4px 4px 0;
            color:#B0C2C6;
            outline: none;
        }

        #keyword::placeholder {
            color: #7D9195;
            text-align: center;
        }

        #form-search select {
            width: 155px;
            color: #7D9195 !important;
            height: 40px;
        }

        .btn {
            font-weight: bold;
            outline: none;
        }

        .u-title {
            text-align: center;
            background-color: #7D9195;
            color: white;
            padding: 9px;
            border-radius: 5px;
            margin-bottom: 14px;
            margin-right: 15px;
            font-weight: bold;
        }

        .u-content {
            background-color: #F2F2F2;
            color: #51595C;
            padding: 9px;
            border-radius: 5px;
            margin-bottom: 14px;
            height: 39px;
        }

        .title-form {
            border-left: 7px solid #08BF5A;
            font-weight: bold;
            font-size: 18px;
            padding: 5px 10px;
            /* margin: 21px 0; */
            margin-top: 33px;
            margin-bottom: 20px;
        }

        .b-title-info {
            text-align: center;
            background-color: #F6F6F6;
            color: #51595C;
            padding: 9px;
            border-radius: 5px;
            margin-bottom: 14px;
            font-weight: bold;
        }

        .b-content_info {
            border: 1px solid #B0C2C6;
            color: #51595C;
            padding: 8px;
            border-radius: 5px;
            margin-bottom: 14px;
        }

        .f-title-info {
            text-align: left;
            background-color: #ffffff;
            color: #51595C;
            padding: 9px;
            border-radius: 5px;
            margin-bottom: 14px;
            font-weight: bold;
        }

        .f-content_info {
            border: 1px solid #B0C2C6;
            background-color: #F4F6F7;
            color: #51595C;
            padding: 8px;
            border-radius: 5px;
            margin-bottom: 14px;
            height: 38px;
        }

        #adminBookingModal select {
            appearance: auto;
            height: 37px;
            border-color: #B0C2C6;
        }

        #adminBookingModal .select2-container--default .select2-selection--single {
            height: 37px;
            border-color: #B0C2C6;
        }

        #adminBookingModal .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 37px;
        }

        #adminBookingModal .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 33px;
        }

        #adminBookingModal input[type='text'],
        #adminBookingModal input[type='number'] {
            height: 37px;
            border-color: #B0C2C6;
        }

        .change-status-modal input[type='text'],
        .change-status-modal input[type='number'],
        .change-status-modal select,
        .change-status-modal input[type='time'] {
            height: 37px;
            border-color: #B0C2C6;
        }

        .hidden {
            display: none;
        }

        .pl-0 {
            padding-left: 0;
        }

        /*.fade {*/
        /*    transform: unset !important;*/
        /*    animation: unset !important;*/
        /*}*/
        .fade.in {
            transform: unset !important;
            animation: unset !important;
        }

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

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

        .date_table {
            background-color: #F6F6F6;
            position: relative;
            color: #51595C;
            display: flex;
            align-items: center;
            font-weight: bold;
            border-radius: 4px;
            font-size: 18px;
        }


        .date_table_done div,
        .time_table_done span,
        .date_table div,
        .time_table span {
            font-weight: bold;
        }

        .btn:hover {
            opacity: 0.7;
        }

        td {
            color: #51595C;
        }

        .table>tbody>tr>td {
            border: none;
            border-bottom: 1px solid #F2F2F2;
        }

        .fa-times {
            padding: 2px 6px;
        }

        .fa-times:hover {
            background-color: #96ADB2;
            color: #FFFFFF !important;
            border-radius: 4px;
            padding: 2px 6px;
        }

        .text-required {
            color: #F44336;
            float: right;
            font-weight: bold;
        }

        .btn-cus-a:active {
            box-shadow: 1px -3px 3px rgb(128 128 128 / 73%) !important
        }

        /*.btn:active, .btn:active:focus{*/
        /*    box-shadow: 1px -3px 3px rgb(128 128 128 / 73%) !important;*/
        /*    outline: none;*/
        /*}*/
        .btn:focus {
            outline: none;
        }


        .createTime .datetimepicker {
            padding-left: 30px;
        }

        .createTime .fa-calendar {
            position: absolute;
            top: 11px;
            left: 7px;
        }

        .b-select {
            position: relative;
        }

        .b-select i {
            position: absolute;
            right: 9px;
            top: 10px;
            color: rgba(137, 143, 144, 1);
            font-size: 22px;
        }

        tr:hover td {
            /*background-color: #F4FBF2;*/
            /*cursor: pointer;*/
        }

        li.active {
            background-color: unset !important;
        }

        .nav-tabs>li {
            margin-bottom: 0 !important;
        }

        .ui_search_line_user {
            position: absolute;
            left: 15px;
            top: 37px;
            right: 15px;
            height: fit-content;
            display: none;
            background-color: #d7d7d7;
            z-index: 1;
            overflow-y: scroll;
            max-height: 200px;
        }

        .ui_search_item {
            padding: 5px 10px;
            cursor: pointer;
        }

        .ui_search_item:hover {
            background-color: #e9e9e9;
        }

        #booking_all_slot #tblDataAllSlot .w-col-2{
            width: 285px;
        }
        #booking_all_slot .filter-month {
            background: url(/images/ic-calendar_new.png) left 9px center no-repeat;
            appearance: none;
            -webkit-appearance: none; /* Support for Google Chrome và Safari. */
            -moz-appearance: none; /* Support for firefox. */
            -ms-appearance: none; /* Support for Internet Explorer. */
            -o-appearance: none; /* Support for Opera. */
            position: relative;
        }
        #booking_all_slot .filter-month:hover{
            background-color: #F8F8F8;
        }
        input[type="month"]::-webkit-inner-spin-button,
        input[type="month"]::-webkit-calendar-picker-indicator {
            /*display: none;*/
            /*visibility: hidden;*/
            /*min-width: 0;*/
            /*max-width: 0;*/
            /*padding: 0;*/
            /*border: 0;*/
            background: none;
            width: 100%;
            position: absolute;
            /*-webkit-appearance: none;*/
        }
        .bg_deny{
            background-color: #FFFFFF;
        }
        .bg_cancel_new{
            background-color: #FFFFFF;
        }
        .bg_request{
            background-color: #FFFAEA;
        }
    </style>
@endpush
@section('content')
    <article class="" id="booking_all_slot" v-cloak>
        <section class="taglist tmp" >
            <div class="row">
                <div class="col-sm-12">
                    <h2 class="title" style="font-size: 20px; margin-top: 10px">参加者リスト</h2>
{{--                    <h2 class="title">{{ $eventDetail->title }}参加者リスト</h2>--}}
                </div>
            </div>
            <input id="event_id" value="{{ $eventDetail->id }}" name="event_id" type="hidden">
            <div class="row" style="margin-top: 20px">
                <div class="col-md-9" style="display: flex;
                                    align-items: baseline;
                                    justify-content: space-between;">
                    <div class="tab_right_top">
                        <i class="fas fa-chevron-left" style="margin-left: 0;" v-on:click="preMonth()"></i>
                        <input type="month" v-model="filter_month" class="form-control text-center filter-month"
                               v-on:change="filterMonth"
                               style="width: 200px; border: 1px solid #E8E8E8; height: 40px">
                        <i class="fas fa-chevron-right" v-on:click="nextMonth()"></i>

                        <div class="tab_data_right_top">
                            <div v-bind:class="(type_display == 0) ? 'activeTab' : ''" v-on:click="openTabContent(0)">日別</div>
                            <div v-bind:class="(type_display == 1) ? 'activeTab' : ''" v-on:click="openTabContent(1)">一覧</div>
                        </div>
                        <div>
                            <a type="button" class="btn btn-sns-line btn-sns-line-primary"
                               href="/basic/booking-event-day/add-booking/{{ $eventDetail->id }}"
                                    style="color: #5799DB !important; background-color: #E0EFFF;    padding: 8px 14px; font-size: 14px"
                            >手動登録</a>
                        </div>
                    </div>
                    <div class="tab_right_top">
                        <select class="my_class form-control "   v-on:change="searchByTypeEventStart()"
                                v-model="active_tab" style="appearance: none !important;height: 40px; width: 150px">
                            <option value="1">未開催のみ</option>
                            <option value="2">開催済のみ</option>
                            <option value="0">全て</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-9">
                    <div style="background-color:#E8E8E8 ; height: 4px; width: 100%; margin-top: 14px "></div>
                </div>

            </div>
            <div class="row" style="margin-top: 10px">
                <div class="col-md-9" v-if="type_display == 1" >
                    <div
                         class="form-group form-inline">
                        <div class="pull-left">

                        </div>
                        <div class="pull-right" style="margin-right: 0 !important; display: flex; align-items: center; margin-top: 15px">
                            <div class=" search">
                                <form style="display: flex" id="form-search">
                                    <div style="display: flex">

                                        <input type="text" name="keyword" id="keyword" v-model="keyword"
                                               placeholder="LINE名・システム表示名">
                                        <button type="button" class="btn-search " v-on:click="searchLineUser()" id="search_name"><i
                                                    class="fa fa-search"></i></button>
                                    </div>

                                    <div style="margin-right: 15px; margin-left: 15px">
                                        <select class="form-control my_class" name="booking_status"
                                                v-on:change="searchByStatus()"
                                                id="booking_status" v-model="booking_status"
                                                style="appearance: none !important; width: 138px">
                                            <option value="0" >全て表示 </option>
                                            <option value="1" >参加予定</option>
                                            <option value="3" >リクエスト</option>
                                            <option value="4">キャンセル
                                            </option>
                                        </select>

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

                            <select class="form-control my_class" name="order_date"
                                    v-model="order_date"
                                    v-on:change="searchByOrderDate()"
                                    style="appearance: none !important;width: 145px;height: 40px;color: #7D9195; margin-right: 15px">
                                <option value="1" >開催日 昇順</option>
                                <option value="2" >開催日 降順</option>

                            </select>
                            <button v-if="items.length == 0" type="button" class="btn btn-sns-line btn-sns-line-dark"
                                    disabled
                                    style=" padding: 8px 14px; font-weight: initial ">CSV <img
                                        src="/images/ic-download_be.png" style="width: 17px;margin-bottom: 3px; "></button>
                            <button v-if="items.length > 0"  type="button" class="btn btn-sns-line btn-sns-line-dark"
                                    v-on:click="exportCsv(1)"
                                    style="  padding: 8px 14px;font-weight: initial ">CSV <img
                                        src="/images/ic-download_be.png" style="width: 17px;margin-bottom: 3px; "></button>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div id="tblDataAllSlot">
                        <div v-if="items.length > 0" v-for="(booking,index) in items"
                             v-bind:style="index == 0 ? 'position: relative;' : ''"
                        >

                            <div class="tt_date " v-if="booking.is_display_date_start"  v-bind:style="index == 0 ? 'position: absolute;top: -45px;' : 'margin-bottom: 15px;margin-top: 15px;'">
                                @{{ displayDateParent(booking.date_start_from) }}
                            </div>
                            <div >
                                <div class="tt_time" v-if="booking.is_display_time">
                                    <div class="time_range">
                                        <div style=" min-width: 169px;"> @{{ displayTime(booking.time_start) }} - @{{ displayTime(booking.time_end) }}</div>
                                        <span v-if="booking.plan_slot_id"> <span style="font-size: 12px">コース名 </span> @{{ booking.plan_name }} </span>
                                    </div>
                                    <span v-if="booking.plan_slot_id">参加予定 @{{ booking.countJoin }} / 定員 @{{ booking.limit_plan }}</span>
                                    <span v-if="!booking.plan_slot_id">参加予定 @{{ booking.countJoin }}  / 定員 @{{ booking.countNumberPeople > 0 ? booking.countNumberPeople : '-'}}</span>
                                </div>
                                <div class="row_content"
                                        v-bind:class="booking.status == 2 ? 'bg_deny' : (( booking.status == 4 ) ? 'bg_cancel_new'
                                     : (( booking.status == 3 ||booking.status == 6 || booking.status == 7 )?'bg_request' : '')) "
                                >
                                    <div style="display: flex ;    align-items: center;width: calc(100% - 255px);">
                                        <div class="w-col-1" style="width: 152px">
                                            <span v-if="booking.status == 1 || booking.status == 5">参加予定 </span>
                                            <span v-if="booking.status == 2" style="color: #F44336">参加否認</span>
                                            <span v-if="booking.status == 3" style="color: #FE9C00">  リクエスト</span>
                                            <span v-if="booking.status == 4" style="color: #F44336">  キャンセル</span>
                                            <span v-if="booking.status == 6" style="color: #FE9C00">  リクエスト</span>
                                            <span v-if="booking.status == 7" style="color: #FE9C00">  リクエスト</span>
                                            {{--                                        <span style="font-size: 13px; color: #08BF5A;word-break: keep-all;" v-if="booking.booking_from == 1">手動登録</span>--}}
                                        </div>
                                        <div class="w-col-2" style="width: 220px">
                                            <a class="link_my_page"
                                               :href="'/basic/friendlist/my_page/'+ booking.line_user_id"
                                               target="_blank"
                                            >
                                                <img :src="booking?.avatar_url ?? '/images/blank_avatar.png'"
                                                     onerror="this.onerror=null;this.src='/images/blank_avatar.png'"
                                                     style="width: 34px;border-radius: 50%;" alt="">
                                            </a>
                                            <span  style="margin-left: 10px"> @{{ booking.line_name ? booking.line_name : '-' }}</span>
                                        </div>
                                        <div class="w-col-3" style="width: calc(100% - 220px - 152px)">
                                            @{{ booking.view_name ? booking.view_name : '-' }}
                                        </div>
                                    </div>
                                    <div style="display: flex; width: 255px">
                                        <div class="w-col-4" style="text-align: center;">
                                            <div style="display: flex">
                                                <div style="width: 53%"
                                                     class="font-weight-bold text-right">
                                                    <span>@{{ booking.quantity }}</span>
                                                </div>
                                                <div style="width: 47%"
                                                     class="text-left">
                                                    名参加
                                                </div>
                                            </div>
                                        </div>
                                        {{--                                    <div class="w-col-5">--}}
                                        {{--                                        @{{ booking.plan && booking.plan.name ? booking.plan.name : '-' }}--}}
                                        {{--                                    </div>--}}
                                        <div class="w-col-6">
                                            <a v-if="booking.status == 6 || booking.status == 7  ||  booking.status == 3" style="color: #FE9C00; font-weight: bold; text-decoration: underline; cursor: pointer;margin-right: 13px;"
                                               v-on:click="openDetailBooking( booking.id)">予約詳細</a>
                                            <a  v-else style="color: #7D9195; font-weight: bold; text-decoration: underline; cursor: pointer;margin-right: 13px;"   v-on:click="openDetailBooking( booking.id)">予約詳細</a>
                                        </div>

                                    </div>

                                </div>
                            </div>
                        </div>
                        <!-- Pagination -->

                    </div>

                </div>
                <div class="col-md-9" v-if="type_display == 0">
                    <div class="status_line_top">
                        <div class="stt_doing">
                            <div class="line"></div>
                            <div class="text">参加予定人数</div>
                        </div>
                        <div class="stt_approve">
                            <div class="line"></div>
                            <div class="text">リクエスト数</div>
                        </div>
                        <div class="stt_cancel">
                            <div class="line"></div>
                            <div class="text">キャンセル人数</div>
                        </div>

                    </div>
                    <div class="">
                        <table class="table-bordered tbl__month b_h_tbl_booking-month">
                            <thead>
                            <tr>
                                <th v-for="(day, index) in sort_day_calendar" class="c_h_th-tbl ui_text-weight">
                                    <span :style="{ color: day.id == 6 ? '#5799DB' : (day.id == 7 ? '#e63857' : 'black') }">@{{ day.text }}</span>
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="c__staff-item" v-for="(week, index) in calendar.default_calendar.count_week_of_month">
                                <td v-for="(holi, index_holi) in calendar.default_calendar.count_before_day"
                                    v-if="week == 1"></td>
                                <td v-for="(day, index2) in calendar.default_calendar.day"
                                    v-if="isDisplayDay(index,day.id)"
                                    :class="isOffDayStore(setDateInListDayOfMonth((7*index) + day.id))"
                                    @click="clickDayOfMonthListMonth(setDateInListDayOfMonth((7*index) + day.id))">
                                    <div class="b_h_event_of_day"
                                         :data-date="setDateInListDayOfMonth((7*index) + day.id)"
                                         :class="calendar.default_calendar.date == setDateInListDayOfMonth((7*index) + day.id) ? 'active__day__of__month' : ''">
                                        <p class="day__number__in_month" v-html="(7*index) + day.id - calendar.default_calendar.count_before_day"></p>
                                        <div v-for="(item, indx) in items" v-if="item.date == ((calendar.default_calendar.date.substring(8,0) + convertNumberToStringMultiple((7*index) + day.id))) ">
                                           <div style="text-align: left">
                                               <div class="stt_doing" style="display: flex;align-items: center;">
                                                   <div class="line_tbl_doing" ></div>
                                                   <div class="text">@{{ item.total_doing }}人</div>
                                               </div>
                                               <div class="stt_approve" style="display: flex;align-items: center; margin-top: 5px; margin-bottom: 5px">
                                                   <div class="line_tbl_doing"></div>
                                                   <div class="text">@{{ item.total_request }}人</div>
                                               </div>
                                               <div class="stt_cancel" style="display: flex;align-items: center;">
                                                   <div class="line_tbl_doing"></div>
                                                   <div class="text">@{{ item.total_cancel }}人</div>
                                               </div>
                                           </div>
                                        </div>
                                    </div>
                                </td>
                                <td v-for="(day, index2) in calendar.default_calendar.day"
                                    v-if="!isDisplayDay(index,day.id) && index == calendar.default_calendar.count_week_of_month - 1"></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <div id="tblDataAllSlot">
                        <div style="display: flex;  align-items: center; justify-content: space-between;"
                             >
                            <div class="tt_date ">
                                @{{ displayDateParent(selectDaySlot) }}
                            </div>
                            <div class="form-group form-inline">
                                <div class="pull-left">

                                </div>
                                <div class="pull-right" style="margin-right: 0 !important; display: flex; align-items: center; margin-top: 15px">
                                    <div class=" search">
                                        <form style="display: flex" id="form-search">
                                            <div style="display: flex">

                                                <input type="text" name="keyword" id="keyword" v-model="keyword"
                                                       placeholder="LINE名・システム表示名">
                                                <button type="button" class="btn-search " v-on:click="searchLineUser()" id="search_name"><i
                                                            class="fa fa-search"></i></button>
                                            </div>

                                            <div style="margin-right: 15px; margin-left: 15px">
                                                <select class="form-control my_class" name="booking_status"
                                                        v-on:change="searchByStatus()"
                                                        id="booking_status" v-model="booking_status"
                                                        style="appearance: none !important; width: 138px">
                                                    <option value="0" >全て表示 </option>
                                                    <option value="1" >参加予定</option>
                                                    <option value="3" >リクエスト</option>
                                                    <option value="4">キャンセル
                                                    </option>
                                                </select>

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

                                    <button v-if="itemBookingOfDay.length == 0" type="button" class="btn btn-sns-line btn-sns-line-dark"
                                            disabled
                                            style=" height: 40px ;font-weight: initial">CSV <img
                                                src="/images/ic-download_be.png" style="width: 17px;margin-bottom: 3px; "></button>
                                    <button v-if="itemBookingOfDay.length > 0"  type="button" class="btn btn-sns-line btn-sns-line-dark"
                                            v-on:click="exportCsv(0)"
                                            style=" height: 40px ;font-weight: initial">CSV <img
                                                src="/images/ic-download_be.png" style="width: 17px;margin-bottom: 3px; "></button>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                        </div>

                        <div v-if="itemBookingOfDay.length > 0" v-for="(booking,index) in itemBookingOfDay">
                            <div >
                                <div class="tt_time" v-if="booking.is_display_time">
                                    <div class="time_range">
                                        <div style=" min-width: 169px;">@{{ displayTime(booking.time_start) }} - @{{ displayTime(booking.time_end) }}</div>
                                        <span v-if="booking.plan_slot_id"> <span style="font-size: 12px">コース名 </span> @{{ booking.plan_name }} </span>
                                    </div>
                                    <span v-if="booking.plan_slot_id">参加予定 @{{ booking.countJoin }} / 定員 @{{ booking.limit_plan }}</span>
                                    <span v-if="!booking.plan_slot_id">参加予定 @{{ booking.countJoin }} / 定員 @{{ booking.countNumberPeople > 0 ? booking.countNumberPeople : '-' }}</span>
                                </div>
                                <div
                                     class="row_content"
                                     v-bind:class="booking.status == 2 ? 'bg_deny' : (( booking.status == 4 ) ? 'bg_cancel_new'
                                     : (( booking.status == 3 ||booking.status == 6 || booking.status == 7 )?'bg_request' : '')) "
                                >
                                    <div style="display: flex;    align-items: center;    width: calc(100% - 255px);">
                                        <div class="w-col-1" style="width: 152px">
                                            <span v-if="booking.status == 1 || booking.status == 5">参加予定 </span>
                                            <span v-if="booking.status == 2" style="color: #F44336">参加否認</span>
                                            <span v-if="booking.status == 3" style="color: #FE9C00">  リクエスト</span>
                                            <span v-if="booking.status == 4" style="color: #F44336">  キャンセル</span>
                                            <span v-if="booking.status == 6" style="color: #FE9C00">  リクエスト</span>
                                            <span v-if="booking.status == 7" style="color: #FE9C00">  リクエスト</span>
                                            {{--                                        <span style="font-size: 13px; color: #08BF5A;word-break: keep-all;" v-if="booking.booking_from == 1">手動登録</span>--}}
                                        </div>
                                        <div class="w-col-2" style="width: 220px">
                                            <a class="link_my_page"
                                               :href="'/basic/friendlist/my_page/'+ booking.line_user_id"
                                               target="_blank"
                                            >
                                                <img :src="booking?.avatar_url ?? '/images/blank_avatar.png'"
                                                     onerror="this.onerror=null;this.src='/images/blank_avatar.png'"
                                                     style="width: 34px;border-radius: 50%;" alt="">
                                            </a>
                                            <span style="margin-left: 10px"> @{{ booking.line_name ? booking.line_name : '-' }}</span>
                                        </div>
                                        <div class="w-col-3" style="width: calc(100% - 220px - 152px)">
                                            @{{ booking.view_name ? booking.view_name : '-' }}
                                        </div>
                                    </div>

                                    <div style="display: flex ;width: 255px">
                                        <div class="w-col-4" style="text-align: center;">
                                            <div style="display: flex">
                                                <div style="width: 53%"
                                                     class="font-weight-bold text-right">
                                                    <span>@{{ booking.quantity }}</span>
                                                </div>
                                                <div style="width: 47%"
                                                     class="text-left">
                                                    名参加
                                                </div>
                                            </div>
                                        </div>
                                        <div class="w-col-6">
                                            <a v-if="booking.status == 6 || booking.status == 7 ||  booking.status == 3" style="color: #FE9C00; font-weight: bold; text-decoration: underline; cursor: pointer;margin-right: 13px;"
                                               v-on:click="openDetailBooking( booking.id)"
                                            >予約詳細</a>
                                            <a v-else style="color: #7D9195; font-weight: bold; text-decoration: underline; cursor: pointer;margin-right: 13px;"
                                               v-on:click="openDetailBooking( booking.id)">予約詳細</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
            <div class="row">
                <div class="col-md-9" style="margin-top: 15px">
                    <div style="display: flex;    align-items: center;    justify-content: space-between;">
                        <a href="/basic/booking-event-day/list-event" class="btn btn-sns-line btn-sns-line-dark btn-sns-line-lg"
                           type="button" style="width: 140px;box-shadow: 0px 2px 0px #00000080;">戻る</a>
                        <!-- Pagination -->
                        <nav  class="text-center booking_paginate">
                            {{--                            <span>全@{{pagination.total}}件中　@{{pagination.from}}～@{{pagination.to}}件を表示中</span>--}}
                            <span>表示件数</span>
                            <select class="my_class stl_per_page" v-model="per_page" v-on:change="changePerPage(per_page)"
                                    style="">
                                <option value="100">100</option>
                                <option value="200">200</option>
                                <option value="500">500</option>
                            </select>
                            <ul class="pagination"  style="margin-bottom: 10px;    margin-top: 0;" v-if="pagination.total > pagination.per_page">
                                <li v-if="pagination.current_page > 1" class="btn_prev">
                                    <a href="#" aria-label="Previous"
                                       style="    padding: 4px 9px;"
                                       @click.prevent="changePage(pagination.current_page - 1)">
                                        <span aria-hidden="true" style="color:#08BF5A"><i class="fas fa-arrow-left"></i></span>
                                    </a>
                                </li>
                                <li v-for="page in pagesNumber" v-bind:class="[ page == isActived ? 'active' : '']">
                                    <a href="#" @click.prevent="changePage(page)" style="border: unset">@{{ page }}</a>
                                </li>
                                <li v-if="pagination.current_page < pagination.last_page" class="btn_next">
                                    <a href="#" aria-label="Next" style="    padding: 4px 9px;" @click.prevent="changePage(pagination.current_page + 1)">
                                        <span aria-hidden="true" style="color:#08BF5A"><i class="fas fa-arrow-right"></i></span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>

            </div>


        </section>

    </article>
@endsection
@push('js')
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script>
        var token = "{!! csrf_token() !!}";
        var bSlotDoing = null;
        var idEvent = null;
        const search_line_user = '{{ route('ajax.calendar.search_line_user') }}';
        const bot_id = '{{ getBotId() }}';
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.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://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment-with-locales.min.js"></script>
    <script type="application/javascript"
            src="/js/booking_event_day/booking_all_slot.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>

    <script>
        $(function() {

            $('.link_my_page').on('click', function(e) {
                e.stopPropagation();
            });
            $.datepicker.setDefaults($.datepicker.regional["ja"]);
            // $('.filter-month').datepicker({
            //     dateFormat         : 'yy-mm',
            //     todayHighlight : true,
            //     autoclose      : true,
            //     // theme:'dark',
            // });
            $('.datetimepicker').datepicker({
                dateFormat: "yy-mm-dd",
                theme: 'dark',
                minDate: new Date(),
                onClose: function(selectedDate, event) {
                    // appSettingEvent.itemSlot.date_start_from = selectedDate;
                    var bookingId = $(event).closest('.createTime').find('.bookingId').val();
                    $('#created_at' + bookingId).val(selectedDate);
                }
            });
        });
    </script>
@endpush