@extends('layout.basic.main')

@push('css')
    <link rel="stylesheet" href="/css/booking/booking-detail.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">


@endpush
@section('content')
    <article class="" id="booking_detail">
        <section class="taglist tmp" >
            <div class="row">
                <div class="col-sm-12">
                    <h2 class="title">予約詳細</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8">
                    <div class="box_top">
                        <div class="text-center avt_left">
                            <img :src="(bookingDetail.avatar_url && bookingDetail.avatar_url != null) ? bookingDetail.avatar_url : '/images/blank_avatar.png'"
                                 onerror="this.onerror=null;this.src='/images/blank_avatar.png'"
                                 style="border: 1px solid #F4F6F7;border-radius: 50%;width: 50px">
                            <div class="info">
                                @{{ bookingDetail.line_name }}@{{bookingDetail.view_name ? (' / ' + bookingDetail.view_name) : ''}}
                            </div>
                        </div>
                        <a
                                :href="'/basic/chat-v3?friend_id=' + bookingDetail.line_user_id">
                            <button
                                    style="    padding: 7px 11px;box-shadow: 0px 2px 0px #00000080;"
                                    class="btn btn-sns-line btn-sns-line-success"
                                    type="button">
                                <i class="fas fa-comments-alt" style=" margin-right: 8px;"></i>チャット</button>
                        </a>

                    </div>
                    <div class="info_booking">
                        <div  style="display: flex;    align-items: center;    justify-content: space-between;    margin-bottom: 15px;">
                            <div class="title_db">
                                <div class="bd_title"></div>
                                <div class="txt_title">予約情報</div>
                            </div>
                            <div>
                                <span v-if="bookingDetail.booking_from == 1" style="color:#08BF5A ">手動登録</span>
                                <span v-if="bookingDetail.booking_from == 0">予約した日</span>
                                <span>
                                    @{{ formatDateDetail(bookingDetail.created_at) }}
                                </span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="b-title-info">
                                    参加日時
                                </div>
                            </div>
                            <div class="col-md-9" style="">
                                <select class="form-control slot"
                                        name="slot" v-model="bookingDetail.slot_id"
                                        v-on:change="changeSlot(bookingDetail.slot_id)">
                                    <option v-for="( slot,index) in slotList"
                                            :value="slot.id">
                                        <span>@{{ format1Date(slot.date_start_from, slot.time_start, slot.time_end) }}</span>
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="row" v-show="plansList.length > 0">
                            <div class="col-md-3">
                                <div class=" b-title-info">
                                    利用プラン
                                </div>
                            </div>
                            <div class="col-md-9 " style="">
                                <div class="">
                                    <select class="form-control slot"
                                            v-model="bookingDetail.plan_slot_id">
                                        <option
                                                v-for="( plan,index) in plansList"
                                                :value="plan.id">
                                            @{{ plan.name }}
                                        </option>
                                    </select>

                                </div>
                            </div>
                            {{--                                                                    <span class="amount"></span> --}}
                        </div>
                        <div class="row">
                            <div class="col-md-3 ">
                                <div class=" b-title-info">
                                    参加人数
                                </div>
                            </div>
                            <div class="col-md-9 " style="">
                                <input type="number"
                                       style="" class="form-control "
                                       v-model="bookingDetail.quantity">
                            </div>
                        </div>

                    </div>

                    <div class="info_booking">
                        <div class="title_db" style="  margin-bottom: 15px;">
                            <div class="bd_title"></div>
                            <div class="txt_title">予約時入力事項</div>
                        </div>
                        <div>
                            <div class="row"
                                 v-for="(info,index) in form_info ">
                                <div class="col-md-12">
                                    <div class="f-title-info">
                                        @{{ info.title }}
                                        <span v-if="info.is_require == 1"
                                              class="text-required">必須</span>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="c_h_mdbt-multi"
                                         v-if="info.type === 1">
                                          <textarea class="form-control info_item w-90" rows="4" cols="50" v-model="info.value">
                                          </textarea>
                                    </div>
                                    <div class="c_h_mdbt-multi"
                                         v-else-if="info.type == 2">
                                        <select class="form-control w-90 info_item"
                                                v-model="info.value">
                                            <option
                                                    v-for="info_select in info.valueOption"
                                                    :value="info_select.value">
                                                @{{ info_select.value }}</option>
                                        </select>
                                    </div>
                                    <div class="c_h_mdbt-multi" v-else>
                                        <input type="text"
                                               class="form-control info_item"
                                               v-model="info.value">
                                    </div>
                                    <small class="text-danger"
                                           :id="'err_msg_stt' + index"></small>
                                </div>


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

                    <div class="info_booking change-status-modal">
                        <div class="title_db" style="  margin-bottom: 15px;">
                            <div class="bd_title"></div>
                            <div class="txt_title" v-if="bookingDetail.status == 3">予約リクエスト</div>
                            <div class="txt_title" v-else >予約ステータス変更</div>
                        </div>
                        <input type="hidden" :value="bookingDetail.status"
                               id="status_old">
                        <div v-if="bookingDetail.status == 3">
                            <div>
                                 <span
                                         class="status-booking pan-panel status approved"
                                         id="changeStatusApprove"
                                         v-bind:class="bookingDetail.status == 1 ? 'active' : ''"
                                         v-on:click="changeStatusModal(1)"
                                 >承認</span>
                                    <span
                                          class="status-booking pan-panel status approved"
                                          type="button" id="changeSttDenied"
                                          v-bind:class=" bookingDetail.status == 2 ? 'active' : ''"
                                          v-on:click="changeStatusModal(2)"
                                    >否認</span>


                            </div>
                        </div>
                        <div v-else>
                            <div>
                                    <span v-if="bSlot.approval_system == 1"
                                            class="status-booking pan-panel status approved"
                                            v-bind:class="(bookingDetail.status == 1 || bookingDetail.status == 5) ? 'active' : ''"
                                            v-on:click="bookingDetail.status != 5 ? changeStatus(1) : changeStatus(5)"
                                    >参加予定</span>
{{--                                     tham gia--}}

                                    <span v-if="bSlot.approval_system == 1"
                                            class="status-booking pan-panel status denied "
                                          v-bind:class="bookingDetail.status == 2 ? 'active' : ''"
                                          v-on:click="changeStatus(2)">参加否認</span>
{{--                                     từ chối tham gia--}}

                                    <span v-if="bSlot.approval_system == 0"
                                            class="status-booking pan-panel status booking"
                                          v-bind:class="(bookingDetail.status == 1 || bookingDetail.status == 5) ? 'active' : ''"
                                          v-on:click="changeStatus(5)">予約を承認</span>

                                <span
                                        class="status-booking pan-panel status canceled "
                                        v-bind:class="bookingDetail.status == 4 ? 'active' : ''"
                                        v-on:click="changeStatus(4)">キャンセル</span>
{{--                                hủy--}}
                            </div>
                        </div>
                        <div style="display: flex; align-items: center;     margin-top: 15px;">
                            <div  style="display: flex; margin-right: 30px">
                                <input type="radio"
                                       style="width: 19px;height: 17px;"
                                       id="check1"
                                       value="0"
                                       class="radio_action_type"
                                       v-model="bookingDetail.action_before_booking"
                                >
                                <label for="check1"
                                       style="font-size: 16px; ">アクションを実行する</label>
                            </div>
                            <div style="display: flex">
                                <input type="radio"
                                       style="width: 19px;height: 17px; "
                                       id="check2"
                                       value="1"
                                       class="radio_action_type"
                                       v-model="bookingDetail.action_before_booking"
                                >
                                <label for="check2"
                                       style="font-size: 16px; ">アクションを実行しない</label>
                            </div>
                        </div>


                    </div>

                    <div class=" mb-3">
                        <button
                                class="btn btn-sns-line btn-sns-line-success btn-sns-line-lg"
                                v-on:click="changeStatusModal()"
                                style=" width: 200px; margin-top: 20px;box-shadow: 0px 2px 0px #00000080;">保存</button> <br>
                        <a :href="'/basic/booking-event-day/booking-all-slot/'+ bookingDetail.event_detail_id"
                                class="btn btn-sns-line btn-sns-line-dark btn-sns-line-lg"
                                style=" width: 120px; margin-top: 20px;box-shadow: 0px 2px 0px #00000080;">戻る</a>
                    </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 bookingId = null;
        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_detail.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