@extends('layout.basic.main')
@section('title', 'イベント予約（参加者確認）')
@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/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;
        }

         .box_normal td,
         .box_normal span,
         .box_normal div,
         .box_normal  option {
            font-weight: initial !important;
        }

        a {
            cursor: pointer;
        }

        h2 {
            font-weight: bold;
        }

        select {
            appearance: auto !important;
            font-weight: initial !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;
            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;
        }

        form#form-search .btn-search {
            float: left;
            width: 11%;
            padding: 0px 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;
        }


        .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;
        }

        #bookingSlotDay .tt_date{
            color: #535657;
            font-size: 18px;
            background-color: #F2F2F2;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 9px;
        }
        #bookingSlotDay .titleTbl{
            display: flex;
            align-items: baseline;
            /*justify-content: space-between;*/
            border-bottom: 2px solid #F4F6F7;
            margin-bottom: 10px;
        }
        #bookingSlotDay #tblDataAllSlot .w-col-2{
            width: 285px;
        }
        .bg_deny{
            background-color: #FFFFFF;
        }
        .bg_cancel_new{
            background-color: #FFFFFF;
        }
        .bg_request{
            background-color: #FFFAEA;
        }
    </style>
@endpush
@section('content')
    <article class="" id="bookingSlotDay" v-cloak>
        <section class="taglist tmp">
            <div class="row box_normal">
                <div class="col-sm-9">
                    <div style="display: flex;
                            align-items: center;
                            justify-content: space-between;">
                        <h2 class="title" style="font-size: 20px; font-weight: initial"> @{{ displayDateParent(bSlot.date_start_from) }}</h2>
                        <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 v-if="isDoing">
                                        <button type="button" class="btn btn-sns-line btn-sns-line-primary"
                                                v-on:click="addBookingSlotOrPlan()"
{{--                                           href="/basic/booking_event_day/add-booking/{{ $eventDetail->id }}"--}}
                                           style="color: #5799DB !important; background-color: #E0EFFF; font-size: 14px;   padding: 9px 14px; margin-right: 10px"
                                        >手動登録</button>
                                    </div>
                                    <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: 10px; margin-left: 8px" v-if="isDoing">
                                        <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="2">参加否認</option>--}}
{{--                                            <option value="3">承認待ち</option>--}}
                                            <option value="4">キャンセル
                                            </option>
                                        </select>

                                    </div>
                                    <div style="margin-right: 10px; margin-left: 8px" v-if="!isDoing">
                                        <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="4">キャンセル
                                            </option>
                                        </select>
                                    </div>
                                </form>
                            </div>

                            <button v-if="items.length == 0" type="button" class="btn btn-sns-line btn-sns-line-dark"
                                    disabled
                                    style=" padding: 7px 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: 7px 14px;font-weight: initial ">CSV <img
                                        src="/images/ic-download_be.png" style="width: 17px;margin-bottom: 3px;"></button>
                        </div>
                    </div>

                </div>
            </div>

            <div class="row box_normal" style="margin-top: 10px">
                <div class="col-md-9">

                    <div id="tblDataAllSlot">
                        <div class="tt_date "
                             v-bind:style="!isDoing ? 'background-color: #8F9293;color:#FFFFFF !important;':'background-color: #F2F2F2;'"
                                {{--                                     v-if="booking.is_display_date_start"--}}
                        >
                            {{--                                <i class="fas fa-calendar"></i>--}}
                            <div style="display: flex;font-size: 16px;">
                                @{{ displayTime(bSlot.time_start) }} - @{{ displayTime(bSlot.time_end) }}
                                <div v-if="planId">
                                    <span style="font-size: 13px;margin-left: 46px;margin-right: 11px;">コース名 </span> <span>@{{ plan.name }}</span>
                                </div>
                            </div>

                            <div style="font-size: 13px; text-align: right" v-if="isDoing">
{{--                                <span>予約締切</span><br>--}}
{{--                                <span> @{{ displayDateParent(bSlot.date_deadline) }}  @{{ displayTime(bSlot.time_deadline) }}</span>--}}

                            </div>
                            <div style="font-size: 13px" v-else>
                                <span>開催済み</span>
                            </div>

                        </div>
                        <div v-if="items.length > 0" v-for="(booking,index) in items">
                            <div >
                                <div class="row_content"
                                     v-bind:class="booking.status == 2 ? 'bg_deny' :
                                     (( (booking.status == 4 && isDoing ) || (!isDoing && ( booking.status == 3 ||booking.status == 6 || booking.status == 7))) ? 'bg_cancel_new'
                                     : ((isDoing &&( 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" v-if="isDoing">
                                            <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-1" style="width: 152px" v-if="!isDoing">
                                            <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: #F44336" > キャンセル</span>
                                            <span v-if="booking.status == 4" style="color: #F44336">  キャンセル</span>
                                            <span v-if="booking.status == 6" style="color: #F44336"> キャンセル </span>
                                            <span v-if="booking.status == 7" style="color: #F44336"> キャンセル </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>
{{--                                            <a class="link_my_page"--}}
{{--                                               :href="'/basic/friendlist/my_page/'+ booking.line_user_id"--}}
{{--                                               target="_blank"--}}
{{--                                               style="font-weight: bold; text-decoration: underline; margin-left: 10px">--}}
{{--                                                @{{ booking.line_name ? booking.line_name : '-' }}--}}
{{--                                            </a>--}}
                                        </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 style="color: #7D9195; font-weight: bold; text-decoration: underline; cursor: pointer;margin-right: 13px;"
                                               v-on:click="openDetailBooking( booking.id)"
{{--                                               :href="'/basic/booking_event_day/detail-booking/' + booking.id"--}}
                                               v-bind:style="(isDoing &&(booking.status == 6 || booking.status == 7 || booking.status == 3)) ? 'color: #FE9C00' : ''">予約詳細</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Pagination -->

                    </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/event/'+ bSlot.event_detail_id +'/slots'"
                           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 style="font-weight: bold">表示件数</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 slot_id = null;
        var bSlot = null;
        var planId = 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_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"]);
            $('.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