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

        td,
        span,
        div,
        option {
            font-weight: bold;
        }

        a {
            cursor: pointer;
        }

        h2 {
            font-weight: bold;
        }

        select {
            appearance: auto !important;
        }


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


        .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 #E8E8E8;
            color: #51595C;
            padding: 8px;
            border-radius: 5px;
            margin-bottom: 14px;
        }

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

        .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: #E8E8E8;
        }

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

        #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: #E8E8E8;
        }

        .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: #E8E8E8;
        }

        .hidden {
            display: none;
        }


        .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: left;
            font-weight: bold;
            margin-top: 8px;
        }

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

        .box_border {
            border: 3px solid #F4F6F7;
            border-radius: 5px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .title-form {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .title-form .line_tt {
            background-color: #08BF5A;
            width: 12px;
            height: 37px;
            margin-right: 13px;
            border-radius: 4px;
        }

        .title-form .text {
            font-size: 16px;
        }
        .input_search_line_user::placeholder{
            color: #E8E8E8;
            text-align: center;
        }

        .radio_action_type:checked,
        .radio_action_type:not(:checked) {
            position: absolute;
            left: -9999px;
        }

        .radio_action_type:checked + label {
            position: relative;
            padding-left: 28px;
            cursor: pointer;
            line-height: 19px;
            display: inline-block;
            color: #51595C;
        }
        .radio_action_type:not(:checked) + label {
            position: relative;
            padding-left: 36px;
            cursor: pointer;
            line-height: 31px;
            display: inline-block;
            color: #51595C;
        }
        .radio_action_type:checked + label:before,
        .radio_action_type:not(:checked) + label:before {
            content: "";
            position: absolute;
            left: 0;
            top: 2px;
            width: 27px;
            height: 27px;
            border: 1px solid #96ADB2;
            border-radius: 100%;
            background: #fff;
        }
        .radio_action_type:checked + label:after,
        .radio_action_type:not(:checked) + label:after {
            content: "";
            width: 15px;
            height: 15px;
            background: #96ADB2;
            position: absolute;
            top: 8px;
            left: 6px;
            border-radius: 100%;
            -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
        }
        .radio_action_type:not(:checked) + label:after {
            opacity: 0;
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        .radio_action_type:checked + label:after {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1);
        }
        .radio_action_type:checked + label {
            position: relative;
            padding-left: 36px;
            cursor: pointer;
            line-height: 31px;
            display: inline-block;
            color: #51595C;
        }
        .text-danger{
            color: #F44336;
        }
    </style>
@endpush
@section('content')
    <article class="" id="addBooking"  v-cloak>
        <section class="taglist tmp">
            <div class="row">
                <div class="col-sm-12" style="margin-top: 15px">
                    <h2 class="title" style="font-size:20px">予約手動登録<span style="font-size: 14px; margin-left: 20px">※手動登録の場合は「定員」「予約期限」「予約回数設定」に関係なく予約が登録されます</span>
                    </h2>
                </div>
            </div>
            <input id="event_id" value="{{ $eventDetail->id }}" name="event_id" type="hidden">
            <div class="row" style="margin-top: 20px" id="adminBookingModal">
                <div class="col-md-9">
                    <div class="box_border">
                        <div class="title-form" style="margin-top: 0">
                            <div class="line_tt"></div>
                            <div class="text">日程・コース</div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="b-title-info">
                                    イベント名
                                </div>
                            </div>
                            <div class="col-md-9" style="">
                                <div class="b-content_info" style="background-color: #F4F6F7; padding: 7px">
                                    {{ $eventDetail->title }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <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" name="slot" v-model="add_slot_id"
                                            data-vv-as="参加日時" v-validate="{required:true}"
                                            v-on:change="changeSlotAdd(add_slot_id)">
                                        <option value="">-</option>
                                        <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>
                                    <p class=" text-danger" v-show="errors.has('slot')">@{{ errors.first('slot') }}</p>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="is_required_input_email" id="is_required_input_email"
                               value="{{ $eventDetail->is_required_input_email }}"/>
                        <input type="hidden" name="is_required_input_phone" id="is_required_input_phone"
                               value="{{ $eventDetail->is_required_input_phone }}"/>
                        <div class="body-booking " v-show="isShowAdBooking">

                            <div class="row plan" v-if="plansList.length >0 ">
                                <div class="col-md-3">
                                    <div class="b-title-info">
                                        コース
                                    </div>
                                </div>
                                <div class="col-md-9" style="">
                                    <select class="form-control slot" id="plan_slot_id" name="plan_slot_id"
                                            data-vv-as="コース" v-validate="{required:true}"
                                            v-on:change="changePlanSlot(booking)" v-model="booking.plan_slot_id">
                                        <option value="">コースを選択してください</option>
                                        <option v-for="( plan,index) in plansList" :value="plan.id">
                                            @{{ plan.name }}
                                        </option>
                                    </select>
                                    <p class=" text-danger" v-show="errors.has('plan_slot_id')">@{{ errors.first('plan_slot_id') }}</p>
                                </div>
{{--                                <small class="text-danger" id="err_msg_plan"></small>--}}

                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="b-title-info">
                                        友だち名
                                    </div>
                                </div>
                                <div class="col-md-9" style="" id="boxSelectLineUser">
                                    <div style="position: relative" @click="clickSearchLineUser">
                                        <input type="text" class="form-control input_search_line_user"
                                               placeholder="友だち名検索"
                                               v-model="add_line_name" @keyup="keyupSearchLineUser($event)">
                                        <input type="hidden" v-model="add_line_id" name="add_line_id"
                                               data-vv-as="友だち名" v-validate="{required:true}">
                                        <div v-show="add_line_name" @click="removeLineUserSearch"
                                             style="position: absolute; right: 10px; top: 5px;">x
                                        </div>
                                    </div>
                                    <div class="ui_search_line_user"  @scroll="scrollLoadMoreLineUser($event)"
                                         v-cloak>
                                        <div class="ui_search_item" v-for="user in search_list_line_user"
                                             @click="chooseLineUser(user.id, user.name)">
                                            <img v-if="user.avatar_url" :src="user.avatar_url" alt=""
                                                 width="30" style="border-radius: 50%"
                                                 onerror="this.onerror=null;this.src='/images/blank_avatar.png'">
                                            <img v-else width="30" style="border-radius: 50%"
                                                 src="https://www.pngfind.com/pngs/m/610-6104451_image-placeholder-png-user-profile-placeholder-image-png.png">
                                            LINE登録名: @{{ user.name }} / システム表示名: @{{ user.view_name }}
                                        </div>
                                    </div>
                                    <p class="text-danger" v-show="errors.has('add_line_id')">@{{ errors.first('add_line_id') }}</p>
                                </div>

                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="b-title-info">
                                        参加人数
                                    </div>
                                </div>
                                <div class="col-md-9" style="">
                                    <input name="quantity" type="number" class="form-control"
                                           v-model="quantity"
                                           data-vv-as="参加人数" v-validate="{required:true, min_value:1}"
                                            style="max-width: 78px; display: inline-block;">
                                    人
                                    <span class="amount"></span>
                                    <p class="text-danger" v-show="errors.has('quantity')">@{{ errors.first('quantity') }}</p>
                                </div>

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

                    <div class="box_border" v-show="isShowAdBooking">
                        <div class="body-booking">
                            <div class="title-form" style="margin-top: 0">
                                <div class="line_tt"></div>
                                <div class="text">予約時入力事項</div>
                            </div>

                            <div class="row" v-for="(info,index) in form_info ">
                                <div class="col-md-4">
                                    <span v-if="info.is_require == 1" class="text-required">
                                        <i class="fas fa-star-of-life"></i>
                                    </span>
                                    <div class="f-title-info">
                                        @{{ info.title }}
                                    </div>

                                </div>
                                <div class="col-md-8" style="">
                                    <div class="c_h_mdbt-multi" style="margin-bottom: 15px" v-if="info.type === 0">
                                            <textarea class="form-control info_item w-90" rows="4" cols="50" style="border: 1px solid #E8E8E8"
                                                      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' + index"></small>

                                </div>
                            </div>


                        </div>
                    </div>
                    <div class="box_border" v-show="isShowAdBooking">
                        <div class="body-booking">
                            <div class="title-form" style="margin-top: 0">
                                <div class="line_tt"></div>
                                <div class="text">予約受付時アクション</div>
                            </div>
                            <div class="row">
                                <div class="col-md-9">
                                     <span style="display: inline-block">
                                       <input type="radio" class="radio_action_type" value="0"
                                              id="action_before_booking_1" checked
                                              name="action_before_booking" >
                                        <label for="action_before_booking_1" class="font-weight-bold" style="margin-right: 20px">アクションを実行する</label>
                                     </span>
                                    <span style="display: inline-block">
                                       <input type="radio" class="radio_action_type" value="1"
                                              id="action_before_booking_2"
                                              name="action_before_booking" >
                                        <label for="action_before_booking_2" class="font-weight-bold">アクションを実行しない</label>
                                     </span>

                                </div>
                            </div>

                        </div>

                    </div>
                    <div style="background: #F8F8F8;border-radius: 5px; padding: 20px; color: #F44336">
                        有料コースの場合は、決済済みとして予約が登録されます。<br>
                        友だちから参加費を徴収する場合は、銀行振込などでご対応ください。
                    </div>

                    <div class="row">
                        <div class="col-md-9">
                            <button class="btn btn-sns-line btn-sns-line-success btn-sns-line-lg" type="button" id="btnSaveBooking"
                                    v-on:click="saveAdBooking" style=" width: 200px;box-shadow: 0px 2px 0px #00000080; margin-top: 20px">
                                保存
                            </button><br>
                            <a href="/basic/booking-event-day/booking-all-slot/{{$idEvent}}"
                               class="btn btn-sns-line-lg btn-sns-line btn-sns-line-dark"
                               style="box-shadow: 0px 2px 0px #00000080;width: 100px ;margin-top: 20px">戻る</a>
                        </div>
                    </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 idEvent = null;
        var planList = null;
        const search_line_user = '{{ route('ajax.calendar.search_line_user') }}';
        const bot_id = '{{ getBotId() }}';
        var slotId = '{{ $slotId ? $slotId : $slotId }}';
        var planId = '{{ $planId ? $planId : '' }}';
    </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/add_booking.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