@extends('layout.basic.main')
@push('css')
    {{--    <link rel="stylesheet" href="/css/broadcast/style.css?v={{config("sns-line.version")}}">--}}
    {{--    <link rel="stylesheet" href="/css/friendlist/style.css?v={{config("sns-line.version")}}">--}}
    <link rel="stylesheet" href="/css/booking/booking-all-slot.css?v={{config("sns-line.version")}}">
    <style>
        body{
            color: #51595C;
        }
        thead th{
            background-color: #08BF5A !important;
            font-weight: bold;
        }
    </style>
@endpush
@section('content')
    <article class="">
        <section class="taglist tmp" id="list-slot-event">
{{--            <div class="row">--}}
{{--                <div class="col-sm-12">--}}
{{--                    <ol class="breadcrumb" style="margin-bottom: 0px;">--}}
{{--                        <li><a href="{!! route('list_event.booking_event') !!}">イベント一覧</a></li>--}}
{{--                        <li class="">--}}
{{--                            <a href="/basic/booking_event/event/{{$eventDetail->id}}/slots">--}}
{{--                                {{$eventDetail->title}}の予約枠一覧--}}
{{--                            </a>--}}
{{--                        </li>--}}
{{--                        <li class="">--}}
{{--                            <span id="date_title_slot"></span>--}}
{{--                        </li>--}}
{{--                    </ol>--}}
{{--                </div>--}}
{{--            </div>--}}
            <input id="event_id" value="{{$eventDetail->id}}" name="event_id" type="hidden">
            <input id="slot_id" value="{{$bSlot->id}}" name="slot_id" type="hidden">
            <input id="bSlot" value="{{$bSlot}}" name="bSlot" type="hidden">
            <br>
            <div class="form-group form-inline">
                <div class="pull-right search">
                    <a class="btn btn-primary btn-sm" data-toggle="modal" data-target="#adminBookingModal">新規予約</a>
                    <form action="{{ route('bookingSlot', ['eventId' => $eventDetail->id, 'slotId' => $bSlot->id]) }}"
                          method="get" style="float: right; margin-left: 10px;" id="form-search">
                        <label>
                            <input type="text" placeholder="予約者名検索" class="form-control" name="booking_name"
                                   id="booking_name" value="{{ $bookingName }}">
                        </label>
                        <label>
                            <select class="form-control" name="booking_status" id="booking_status">
                                <option disabled="disabled">絞り込み</option>
                                <option value="0" {{ $bookingStatus == 0 ? 'selected' : '' }}>すべて</option>
                                <option value="1" {{ $bookingStatus == 1 ? 'selected' : '' }}>予約済みのみ</option>
                                <option value="4" {{ $bookingStatus == 4 ? 'selected' : '' }}>キャンセル済みのみ</option>
                                <option value="3" {{ $bookingStatus == 3 ? 'selected' : '' }}>承認待ちのみ</option>
                                <option value="2" {{ $bookingStatus == 2 ? 'selected' : '' }}>否認のみ</option>
                            </select>
                        </label>
                        <label>
                            <select class="form-control" name="order_date" id="order_date">
                                <option value="2" {{ $orderDate == 2 ? 'selected' : '' }}>予約日時の新しい順</option>
                                <option value="1" {{ $orderDate == 1 ? 'selected' : '' }}>予約日時の古い順</option>
                            </select>
                        </label>
                    </form>
                </div>
                <div class="clearfix"></div>
            </div>

            <table class="table table-striped">
                <thead>
                <tr style="background: rgb(238, 238, 238);">
                    <th></th>
                    <th>予約状況</th>
                    <th>名前</th>
                    <th>予約操作</th>
                    <th style="min-width: 60px">予約枠</th>
                    <th>詳細</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr style="background: #F4FBF2">
                    <td class="" style="background: #F4FBF2">
                        <input type="checkbox" class="slotCheck{{ $bSlot->id }}" value="{{ $bSlot->id }}"
                               onclick="checkSlot({{ $bSlot->id }})">
                    </td>
                    <td colspan="2" style=" font-weight: bold; text-align: left;background: #F4FBF2">
                        開催日時：<span id="date_one_slot"></span> <br>
                        締切日時：<span id="deadline_one_slot"></span>
                        @if($bSlot->plans->count() > 0)
                            <label class="label label-info">プランあり</label>
                        @endif
                    </td>
                    <td style="background: #F4FBF2">
                        <div id="change_status_all{{$bSlot->id}}" hidden>
                            <button type="button" class="btn btn-warning btn-sm" data-toggle="modal"
                                    style="background-color:#08BF5A; border-color: #08BF5A"
                                    data-target="#changeStatusAll{{ $bSlot->id }}" onclick="removeCssStatusAll()">
                                全体予約変更
                            </button>
                        </div>
                    </td>
                    <td colspan="3" style="background: #F4FBF2"></td>
                </tr>
                @if(($bSlot->bookings->count() > 0))
                    @foreach($bSlot->bookings as $booking)
                        <tr class="">
                            <td class="check_all check_user_{{ $booking->id }}">
                                <input type="checkbox" id="checkbox_user_{{ $booking->id }}"
                                       class="memberCheck{{ $bSlot->id }} table-row-selector" value="{{ $booking->id }}"
                                       onchange="changeColor({{$booking->id}}, {{$bSlot->id}})">
                            </td>
                            <td class="check_all check_user_{{ $booking->id }}">
                                @if($booking->status == 1 || $booking->status == 5)
                                    <span class="label label-lg" style="background: #FFFFFF; border: 1px solid gray;color: black; line-height: 2">参加予定</span>
                                @endif
                                @if($booking->status== 2)
                                    <span class="label label-lg" style="background: #FFFFFF;border: 1px solid gray; color: black; line-height: 2">否認</span>
                                @endif
                                @if($booking->status == 3)
                                    <span class="label label-lg" style="background: #FFFFFF; border: 1px solid gray;color: black; line-height: 2">承認待ち</span>
                                @endif
                                @if($booking->status == 4)
                                    <span class="label label-lg" style="background: #FFFFFF; border: 1px solid gray;color: black; line-height: 2">キャンセル済み</span>
                                @endif
                                @if($booking->booking_from == 1)
                                    <br>
                                    <span class="label label-lg" style="background: #FFFFFF; border: 1px solid gray;color: black; line-height: 2">管理画面予約</span>
                                @endif
                                {{--                                <div style="margin-top: 10px"><span class="label label-default">管理画面予約</span></div>--}}
                            </td>
                            <td class="has_emoji check_all check_user_{{ $booking->id }}">
                                <img src="{{( !empty($booking->lineUser->avatar_url) && !is_null($booking->lineUser->avatar_url)) ? $booking->lineUser->avatar_url:'/images/blank_avatar.png'}}"
                                     onerror="this.onerror=null;this.src='/images/blank_avatar.png'"
                                     width="50px;">
                                <span><a href="{{ route('friendlistMypage', ['line_id' => $booking->line_user_id]) }}"
                                         target="_blank">{{ !empty($booking->lineUser->name) ? $booking->lineUser->name : '' }}</a>(予約者名:  {{ !empty($booking->name) ? $booking->name : '' }})</span>
                            </td>
                            <td class="check_all check_user_{{ $booking->id }}">
                                <div>
                                    <button type="button" class="btn btn-primary btn-sm"
                                            style="background-color: #5799DB; border-color: #5799DB" data-toggle="modal"
                                            data-target="#changeStatus{{ $booking->id }}"
                                            onclick="removeCssStatus({{ $booking->id }})">予約変更
                                    </button>
                                </div>
                            </td>
                            <td class="check_all check_user_{{ $booking->id }}">{{ $booking->quantity }}</td>
                            <td class="check_all check_user_{{ $booking->id }}">
                                <small>
                                    <small>
                                        <div>{{ $booking->plan ? ('予約プラン: ' . $booking->plan->name) : '' }}</div>
{{--                                        <div> {{ $booking->booking_from == 1 ? '管理者予約' : '予約ウェブページ' }}</div>--}}
                                        <div>
                                            予約した日時: {{ \Illuminate\Support\Carbon::createFromTimestamp(strtotime($booking->created_at))->format('Y年m月d日 H時i分') }}
                                        </div>
                                        @if($bSlot->approval_system == 0)
                                            @if(!empty($booking->email))
                                                <div>メールアドレス: {{ $booking->email }}</div>
                                            @endif
                                            @if(!empty($booking->phone))
                                                <div>電話番号: {{ $booking->phone }}</div>
                                            @endif
                                        @endif
                                        <div>{{ $booking->remarks ? ('連絡事項: ' . $booking->remarks) : '' }}</div>
                                    </small>
                                </small>
                            </td>
                            <td class="check_all check_user_{{ $booking->id }}"></td>
                        </tr>
                        <div class="modal-mask change-status-modal modal fade" id="changeStatus{{ $booking->id }}"
                             role="dialog" aria-hidden="true">
                            <div class="modal-wrapper">
                                <div class="modal-container" style="max-width: 500px; max-height: 550px;">
                                    <div id="draft-modal-header" class="modal-header">
                                        <button type="button" data-dismiss="modal" aria-label="Close" class="close">
                                            <span aria-hidden="true">×</span></button>
                                        <h4 class="modal-title">
                                            友だちの予約変更
                                        </h4>
                                    </div>
                                    <div class="modal-body">
                                        <input type="hidden" value="{{ $booking->status }}" id="status{{$booking->id}}">
                                        <input type="hidden" value="{{ $booking->status }}"
                                               id="status_old{{$booking->id}}">
                                        <input type="hidden" value="1"
                                               id="action{{$booking->id}}">
                                        <input type="hidden" value="{{ $booking->id }}" id="user-booking">
                                        <div class="has_emoji" style="margin-bottom: 8px;">
                                            <img src="{{ (!empty($booking->lineUser->avatar_url) && !is_null($booking->lineUser->avatar_url))?$booking->lineUser->avatar_url:'/images/blank_avatar.png' }}"
                                                 onerror="this.onerror=null;this.src='/images/blank_avatar.png'"
                                                 width="50px;"
                                                 style="box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 0.2em, rgba(0, 0, 0, 0.2) 0px 0.2em 0.2em;">
                                            <span><a href="{{ route('friendlistMypage', ['line_id' => $booking->line_user_id]) }}"
                                                     target="_blank">{{ !empty($booking->lineUser->name) ? $booking->lineUser->name : '' }}</a>(予約者名:  {{ !empty($booking->name) ? $booking->name : '' }})</span>
                                            <div style="padding: 0.2em 0px;">

                                            </div>
{{--                                            @if($booking->status == 1 || $booking->status == 5)--}}
{{--                                                <span class="label label-lg" style="background: #5cb85c">予約済み</span>--}}
{{--                                            @endif--}}
{{--                                            @if($booking->status== 2)--}}
{{--                                                <span class="label label-lg" style="background: #c9302c">否認</span>--}}
{{--                                            @endif--}}
{{--                                            @if($booking->status == 3)--}}
{{--                                                <span class="label label-lg" style="background: #31b0d5">承認待ち</span>--}}
{{--                                            @endif--}}
{{--                                            @if($booking->status == 4)--}}
{{--                                                <span class="label label-lg" style="background: #f0ad4e">キャンセル済み</span>--}}
{{--                                            @endif--}}
{{--                                            <br> <br>--}}
                                        </div>
                                        <div>
                                            <h5 class="kanban">予約状況の変更</h5>
                                            @if($bSlot->approval_system == 1)
                                                <span class="pan-panel status approved {{ $booking->status == 1 ? 'disabled' : '' }}"
                                                      id="approved_{{$booking->id}}"
                                                      onclick="changeStatus(1,{{$booking->id}}, this)">承認する</span>
                                                <span class="pan-panel status denied {{ $booking->status == 2 ? 'disabled' : '' }}"
                                                      id="denied_{{$booking->id}}"
                                                      onclick="changeStatus(2, {{$booking->id}}, this)">否認する</span>
                                                <span class="pan-panel status pending {{ $booking->status == 3 ? 'disabled' : '' }}"
                                                      id="pending_{{$booking->id}}"
                                                      onclick="changeStatus(3, {{$booking->id}}, this)">保留にする</span>
                                            @endif
                                            @if($bSlot->approval_system == 0)
                                                <span class="pan-panel status booking {{ $booking->status == 5 ? 'disabled' : '' }}"
                                                      id="booking_{{$booking->id}}"
                                                      onclick="changeStatus(5, {{$booking->id}}, this)">予約を承認</span>
                                            @endif
                                            <span class="pan-panel status canceled {{ $booking->status == 4 ? 'disabled' : '' }}"
                                                  id="canceled_{{$booking->id}}"
                                                  onclick="changeStatus(4, {{$booking->id}}, this)">予約キャンセル</span>
                                            <br>
                                            <br> <h5 class="kanban">アクション実行</h5>
                                            <span class="pan-panel do-action execute "
                                                  onclick="changeAction(0)">実行する</span>
                                            <span class="pan-panel do-action not-execute selected"
                                                  onclick="changeAction(1)">実行しない</span>
{{--                                            <small class="form-help">アクションが未設定な場合、選択の有無にかかわらず実行されません。</small>--}}
                                        </div>

                                    </div>
                                    <div class="text-center">
                                        <span class="btn btn-success" id="changeStatus" style="background-color: #08BF5A ; border-color: #08BF5A;width: 80px;
    border-radius: 50px;">変更</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @endif
                <div class="modal-mask change-status-modal modal fade" id="changeStatusAll{{ $bSlot->id }}"
                     role="dialog" aria-hidden="true">
                    <div class="modal-wrapper">
                        <div class="modal-container" style="max-width: 500px; max-height: 550px;">
                            <div id="draft-modal-header" class="modal-header">
                                <button type="button" data-dismiss="modal" aria-label="Close" class="close">
                                    <span aria-hidden="true">×</span></button>
                                <h4 class="modal-title">
                                    友だちの予約ステータスを変更
                                </h4>
                            </div>
                            <div class="modal-body">
                                <input type="hidden" value="" id="status_all">
                                <input type="hidden" value="1" id="action_all">
                                <input type="hidden" value="" id="slot_change_all">
                                <input type="hidden" value="0" id="flag_change_all">
                                <div>
                                    <h5 class="kanban">変更後のステータス</h5>
                                    @if($bSlot->approval_system == 1)
                                        <span class="pan-panel status-all approved" id="approved_{{$bSlot->id}}"
                                              onclick="changeStatusAll(1,{{$bSlot->id}}, this)">承認する</span>
                                        <span class="pan-panel status-all denied " id="denied_{{$bSlot->id}}"
                                              onclick="changeStatusAll(2, {{$bSlot->id}}, this)">否認する</span>
                                        <span class="pan-panel status-all pending " id="pending_{{$bSlot->id}}"
                                              onclick="changeStatusAll(3, {{$bSlot->id}}, this)">保留にする</span>
                                    @endif
                                    @if($bSlot->approval_system == 0)
                                        <span class="pan-panel status-all booking" id="booking_{{$bSlot->id}}"
                                              onclick="changeStatusAll(5, {{$bSlot->id}}, this)">予約済みにする</span>
                                    @endif
                                    <span class="pan-panel status-all canceled " id="canceled_{{$bSlot->id}}"
                                          onclick="changeStatusAll(4, {{$bSlot->id}}, this)">予約キャンセル</span>
                                    <br>
                                    <br> <h5 class="kanban">アクション実行</h5>
                                    <span class="pan-panel do-action execute-all"
                                          onclick="changeActionAll(0)">実行する</span>
                                    <span class="pan-panel do-action not-execute-all selected"
                                          onclick="changeActionAll(1)">実行しない</span>
                                    <small class="form-help">アクションが未設定な場合、選択の有無にかかわらず実行されません。</small>
                                </div>
                                <br> <br>
                            </div>
                            <div class="modal-footer">
                                <span class="btn btn-success" id="changeStatusAll">変更</span>
                            </div>
                        </div>
                    </div>
                </div>
                </tbody>
            </table>

        </section>
        <div class="modal-mask modal fade" id="adminBookingModal" role="dialog" aria-hidden="true">
            <div class="modal-wrapper">
                <div class="modal-container">
                    <div class="modal-header">
                        <button type="button" data-dismiss="modal" aria-label="Close"
                                class="close"><span aria-hidden="true">×</span></button>
                        <h4 class="modal-title">
                            予約登録
                        </h4>
                    </div>
                    <div class="modal-body booking-body">
                        <p class="alert alert-warning" style="display: inline-block;">
                            管理者からの予約は「定員」、「〆切期限」、「予約回数制限」を無視して予約を実行します
                        </p>
                        <h5>イベント名: {{ $eventDetail->title }}</h5>
                        <div>
                            <div class="form-group">
                                <label class="control-label">日程を選択</label>
                                <div>
                                    <label for="slot-{{ $bSlot->id }}" class="slot-li selected-slot">
                                        <input id="slot-{{ $bSlot->id }}" type="radio" class="slot"
                                               value="{{ $bSlot->id }}" name="slot" checked>
                                        開催：<span id="date_slot_popup"></span>
                                        @if(count($bSlot->plans) == 0)<span style="font-weight: normal;">（残り {{ $bSlot->number_people - $bSlot->use_people }} 枠）</span>
                                        @else <span class="label label-info"
                                                    style="margin-left: 8px;">プランあり</span> @endif
                                    </label>
                                </div>
                            </div>
                            <div class="body-booking">
                                <div class="form-group">
                                    <label class="control-label">
                                        予約種別
                                        <small><span class="label label-danger">必須</span></small>
                                    </label>
                                    <div>
                                        <label><input type="radio" value="0" name="type_booking" checked>友だち予約</label>
                                        <label><input type="radio" value="1" name="type_booking">管理者予約</label>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label">予約者名
                                        <small><span class="label label-danger">必須</span></small>
                                    </label>
                                    <div>
                                        <input type="text" placeholder="予約者名を入力" class="form-control" name="name"
                                               style="display: inline-block;">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label">予約する友だち
                                        <small><span class="label label-danger">必須</span></small>
                                    </label>
                                    <div>
                                        <select name="line_user" class="line_user_name form-control">
                                            @foreach($listFriend as $friend)
                                                <option value="{{ $friend->line_user_id }}">{{ $friend->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

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

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

                                <div class="form-group">
                                    <label class="control-label">コメント
                                        <small><span class="label label-default">任意</span></small>
                                        <span class="pull-right has-tooltip" data-original-title="null">
                                            <i class="glyphicon glyphicon-info-sign text-primary"></i></span>
                                    </label>
                                    <div>
                                        <textarea placeholder="コメントを入力" name="remarks" id="remarks"
                                                  class="form-control"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label">予約後アクション
                                        <small><span class="label label-danger">必須</span></small></label>
                                    <div>
                                        <label><input type="radio" value="1" checked
                                                      name="action_before_booking">実行しない</label>
                                        <label><input type="radio" value="0"
                                                      name="action_before_booking">実行する</label>
                                    </div>
                                </div>
                                @if($bSlot->plans->count() > 0)
                                    <div class="form-group plan">
                                        <label class="control-label">プラン
                                            <small><span class="label label-danger">必須</span></small>
                                        </label>
                                        <div class="select-plan">
                                            <select name="plan_slot_id" id="plan_slot_id" class="form-control">
                                                <option value="0">プランを選択してください</option>
                                                @foreach($bSlot->plans as $plan)
                                                    <option value="{{ $plan->id }}">{{ $plan->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                @endif
                                <div class="form-group">
                                    <label class="control-label">予約枚数
                                        <small><span class="label label-danger">必須</span></small>
                                    </label>
                                    <div>
                                        <input name="quantity" type="number" class="form-control" value="1"
                                               min="1" style="max-width: 78px; display: inline-block;">
                                        枚
                                        <span class="amount">{{ ($bSlot->plans->count() == 0) ? '（残り' . ($bSlot->number_people - $bSlot->use_people) . '枚）' : '' }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer" style="text-align: left;">
                        <input type="hidden" id="is_required_input_email" value="{{ $eventDetail->is_required_input_email }}"/>
                        <input type="hidden" id="is_required_input_phone" value="{{ $eventDetail->is_required_input_phone }}"/>
                        <button class="btn btn-success" type="button" id="btnSaveBooking">
                            登録
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </article>
@endsection
@push('js')
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></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/booking_slot.js?v={{config("sns-line.version")}}"></script>

@endpush