@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>
        .modal-mask {
            position: fixed;
            z-index: 9998;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: table;
            transition: opacity 0.3s ease;
        }

        .modal-wrapper {
            display: table-cell;
            vertical-align: middle;
        }

        .modal-container {
            position: relative;
            overflow-y: auto;
            height: 88vh;
            max-width: 900px;
            margin: 0px auto;
            padding: 10px;
            background-color: #fff;
            border-radius: 2px;
            box-shadow: 0 2px 8px rgb(0 0 0);
            transition: all 0.3s ease;
            font-family: Helvetica, Arial, sans-serif;
        }

        .modal-header {
            padding: 15px;
            border-bottom: 1px solid #e5e5e5;
        }

        .modal-body {
            position: relative;
            padding: 15px;
        }

        .slot-li {
            padding: 8px 0 8px 0;
            display: inline-block;
        }

        .slot-li input[type="radio"] {
            display: inline-block;
            margin-right: 4px;
        }

        label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: 700;
        }
    </style>
@endpush
@section('content')
    <article class="">
        <section class="taglist tmp" id="list-slot-event" v-cloak>
            <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="" id="date_slot">
                            {{ $slotDetail->date_start_from }} (日) {{ $slotDetail->time_start }} {{ !empty($slotDetail->time_end) ? '〜 ' . $slotDetail->time_end : '' }}
                        </li>
                    </ol>
                </div>
            </div>
            <input id="event_id" value="{{$eventDetail->id}}" name="event_id" 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('allBooking', ['id' => $eventDetail->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">すべて</option>
                                <option value="1">予約済みのみ</option>
                                <option value="4">キャンセル済みのみ</option>
                                <option value="3">承認待ちのみ</option>
                                <option value="2">否認のみ</option>
                            </select>
                        </label>
                        <label>
                            <select class="form-control" name="order_date" id="order_date">
                                <option value="2">予約日時の新しい順</option>
                                <option value="1">予約日時の古い順</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>予約数</th>
                    <th>予約詳細</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr style="background: rgb(231, 248, 255) !important;">
                    <td><input type="checkbox"></td>
                    <td colspan="2" style="font-weight: bold; text-align: left">
                        開催：{{ $slotDetail->date_start_from }}
                        (日) {{ $slotDetail->time_start }} {{ !empty($slotDetail->time_end) ? '〜 ' . $slotDetail->time_end : '' }}
                        、〆切：{{ $slotDetail->date_deadline }}
                        {{ $slotDetail->time_deadline }}
                    </td>
                    <td>
                        <div style="display: none;">
                            <button type="button" class="btn btn-warning btn-sm">一括ステータス変更</button>
                        </div>
                    </td>
                    <td colspan="3"></td>
                </tr>
                @if(($bBooking->count() > 0))
                    @foreach($bBooking as $booking)
                        <tr class="">
                            <td><input type="checkbox" class="memberchecks table-row-selector" value="73301"></td>
                            <td>
                                <span class="label label-lg label-success">予約済み</span>
                                <div style="margin-top: 10px"><span class="label label-default">管理画面予約</span></div>
                            </td>
                            <td class="has_emoji">
                                <img src="{{(!is_null($booking->lineUser->bot_image))?$booking->lineUser->bot_image:'/images/8.png'}}"
                                     onerror="this.onerror=null;this.src='/images/8.png'"
                                     width="50px;">
                                <span><a href="{{ route('friendlistMypage', ['line_id' => $booking->line_user_id]) }}">{{ $booking->name }}</a>(予約時のお名前:  fsdsd)</span>
                            </td>
                            <td>
                                <div>
                                    <button type="button" class="btn btn-primary btn-sm">ステータス変更</button>
                                </div>
                            </td>
                            <td>{{ $booking->quantity }}</td>
                            <td>
                                <small>
                                    <small>
                                        <div>{{ $booking->plan ? ('予約プラン: ' . $booking->plan->name) : '' }}</div>
                                        <div>予約経路: {{ $booking->booking_from == 1 ? '管理者予約' : '予約ウェブページ' }}</div>
                                        @if(!empty($booking->email))
                                            <div>メールアドレス: {{ $booking->email }}</div>
                                        @endif
                                        @if(!empty($booking->phone))
                                            <div>電話番号: {{ $booking->phone }}</div>
                                        @endif
                                        <div>
                                            友だちが予約した日時: {{ \Illuminate\Support\Carbon::createFromTimestamp(strtotime($booking->created_at))->format('Y年m月d日 H時i分') }}</div>
                                        <div>{{ $booking->remarks ? ('友だちからのコメント: ' . $booking->remarks) : '' }}</div>
                                    </small>
                                </small>
                            </td>
                            <td></td>
                        </tr>
                    @endforeach
                @else
                    <tr>
                        <td colspan="6" style="text-align: center">この枠にはまだ予約がありません</td>
                    </tr>
                @endif
                </tbody>
            </table>

        </section>
        <div class="modal fade" id="adminBookingModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <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">
                        <p class="alert alert-warning" style="display: inline-block;">
                            管理者からの予約は「定員」、「〆切期限」、「予約回数制限」を無視して予約を実行します
                        </p>
                        <h5>イベント名: booking_even</h5>
                        <div>
                            <div class="form-group">
                                <label class="control-label">日程を選択</label>
                                <div>
                                    <label for="date-126815" class="slot-li selected-slot">
                                        <input id="date-126815" type="radio" class="radio" value="[object Object]">
                                        2021/05/16 (日) 〜 2021/05/17 (月)
                                        <span style="font-weight: normal;">（残り 90 枠）</span>
                                    </label>
                                </div>
                                <div>
                                    <label for="date-126816" class="slot-li">
                                        <input id="date-126816" type="radio" class="radio" value="[object Object]">
                                        2021/05/16 (日) 08:00 〜 10:00
                                        <span class="label label-info" style="margin-left: 8px;">プランあり</span>
                                    </label>
                                </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="2">友だち予約</label>
                                    <label><input type="radio" value="1">管理者予約</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"
                                           style="display: inline-block;">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label">予約する友だち
                                    <small><span class="label label-danger">必須</span></small>
                                </label>
                                <div dir="auto" class="v-select vs--single vs--searchable">
                                    <div class="vs__dropdown-toggle">
                                        <div class="vs__selected-options">
                                            <input aria-label="Search for option" role="combobox" type="search"
                                                   autocomplete="off" class="vs__search"></div>
                                        <div class="vs__actions">
                                            <button type="button" title="Clear selection" class="vs__clear"
                                                    style="display: none;">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
                                                    <path d="M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z"></path>
                                                </svg>
                                            </button>
                                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="10"
                                                 role="presentation" class="vs__open-indicator">
                                                <path d="M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z"></path>
                                            </svg>
                                            <div class="vs__spinner" style="display: none;">Loading...</div>
                                        </div>
                                    </div> <!----></div> <!----></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="コメントを入力"
                                               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="0">
                                        実行しない</label> <label><input
                                                type="radio" value="1">
                                        実行する</label></div>
                            </div> <!---->
                            <div class="form-group"><label
                                        class="control-label">
                                    予約枚数
                                    <small><span
                                                class="label label-danger">必須</span></small></label>
                                <div><input name="menu-count" type="number"
                                            class="form-control"
                                            style="max-width: 78px; display: inline-block;">
                                    枚
                                    <span>（残り 90枚）</span></div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer" style="text-align: left;">
                        <button class="btn btn-success">
                            登録
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </article>
@endsection
@push('js')
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAU9JfuYb5j2Xtr_v5__89wY5flXr0ai5I&libraries=places&callback=initMap&language={{App::getLocale()}}"
            async defer>
    </script>
    <script src="/js/vue-paginate.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://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment-with-locales.min.js"></script>

    <script>
        var token = "{!! csrf_token() !!}";
    </script>
    <script type="application/javascript" src="/js/booking/list_slot_event.js?v={{config("sns-line.version")}}"></script>
@endpush