@extends('layout.basic.main')
@push('css')
    <link rel="stylesheet" href="/css/booking/style.css?v={{config("sns-line.version")}}">

    <style>

        a:hover {
            color: red !important;
        }

        .dis-flex {
            display: flex;
        }

        .mt-20 {
            margin-top: 20px;
        }

        .box-tag {
            display: grid;
        }
        .box-tag > * {
            margin-top: 5px;
        }
        .label{
            line-height: 2 !important;
        }
        #booking-list_event table >tbody >tr >td{
            text-align: left;
        }
        .tr-parent >td{
            background: #e7f8ff !important;
        }
        .txt-bold{
            font-weight: 700;
        }
        .change-status-modal .kanban {
            border-left: solid 5px mediumaquamarine;
            font-weight: bold;
            padding: 0.3em 0.3em 0.3em 1rem;
            margin-bottom: 16px;
        }
        .change-status-modal .pan-panel {
            display: inline-block;
            border: 0.8px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 0 0.1em rgb(0 0 0 / 12%), 0 0.1em 0.1em rgb(0 0 0 / 20%);
            cursor: pointer;
            padding: 8px;
        }
        .change-status-modal .pan-panel.selected.do-action {
            background: tomato;
        }
        .change-status-modal .pan-panel + .pan-panel {
            margin-left: 8px;
        }

        .change-status-modal .pan-panel.selected {
            color: white;
        }
        .change-status-modal .pan-panel.disabled {
            cursor: not-allowed;
            opacity: 0.6;
        }
    </style>
@endpush
@section('content')
    <article class="">
        <div id="loading_overlay" class="loading-overlay text-center" style="display: none">
            <i class="glyphicon glyphicon-refresh spin"></i>
        </div>
        <section class="taglist tmp" id="booking-list_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="active">
                            nga test slotの予約枠一覧
                        </li>
                    </ol>
                </div>
            </div>
            <div class="mt-20">
            <div  class="form-group form-inline">
                <div  class="pull-right search">
                    <button type="button"  class="btn btn-primary btn-sm" data-toggle="modal" data-target="#bookingNew">
                        新規予約
                    </button>
                    <input type="text" placeholder="予約者名検索" class="form-control" autocomplete="off"/>
                    <select  class="form-control">
                        <option  disabled="disabled">
                            絞り込み
                        </option>
                        <option  value="all">
                            すべて
                        </option>
                        <option  value="approved">
                            予約済みのみ
                        </option>
                        <option  value="canceled">
                            キャンセル済みのみ
                        </option>
                        <option  value="pending">
                            承認待ちのみ
                        </option>
                        <option  value="denied">
                            否認のみ
                        </option>
                    </select> 
                    <select  class="form-control">
                        <option  value="2">
                            予約日時の新しい順
                        </option>
                        <option  value="1">
                            予約日時の古い順
                        </option>
                    </select>
                </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 class="tr-parent">
                    <td >
                        <input  type="checkbox"></td>
                    <td  colspan="2" style="font-weight: bold;">
                        開催：2021/04/14 (水) 12:00 〜 15:00、〆切：2021/04/15 12:00
                        <label  class="label label-info">プランあり</label></td>
                    <td >
                        <div  >
                            <button  type="button" class="btn btn-warning btn-sm">
                                一括ステータス変更
                            </button>
                        </div>
                    </td>
                    <td  colspan="3"></td>
                </tr> <!---->
                <tr  class="text-left">
                    <td ><input  type="checkbox"
                                                  class="memberchecks table-row-selector" value="61744"></td>
                    <td ><span  
                                                 class="label label-lg label-success">予約済み</span>
                        <div ><span  class="label label-default">管理画面予約</span>
                        </div>
                    </td>
                    <td  class="has_emoji"><!----> <span >
                      お名前:  cho A nga dăt<br >
                      連絡先: vungacntt@gmail.com
                    </span>
                    </td>
                    <td >
                        <div >
                            <button  type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modalUpdateStatusBooking">
                                ステータス変更
                            </button>
                        </div>
                    </td>
                    <td >1</td>
                    <td >
                        <small >
                            <div >予約プラン:<span >plan1 </span></div>
                            <div >予約経路: 管理者予約</div>
                            <div >友だちが予約した日時: 2021年4月14日 13時45分</div>
                            <div >
                                友だちからのコメント: nhận xet dat cho
                            </div>
                        </small>
                    </td>
                    <td ><!----></td>
                </tr>
                </tbody>
                <tbody  >
                <tr class="tr-parent">
                    <td ><input  type="checkbox"></td>
                    <td  colspan="2" style="font-weight: bold;">
                        開催：2021/04/15 (木) 12:00 〜 14:00、〆切：2021/04/14 12:01
                        <label  class="label label-info">プランあり</label></td>
                    <td >
                        <div  style="display: none;">
                            <button  type="button" class="btn btn-warning btn-sm">
                                一括ステータス変更
                            </button>
                        </div>
                    </td>
                    <td  colspan="3"></td>
                </tr> <!---->
                <tr  class="">
                    <td ><input  type="checkbox"
                                                  class="memberchecks table-row-selector" value="72086"></td>
                    <td ><span  
                                                 class="label label-lg label-warning">キャンセル済み</span>
                        <div ><span  class="label label-default">管理画面予約</span>
                        </div>
                    </td>
                    <td  class="has_emoji"><img 
                                                                  src=""
                                                                  width="50px;"> <span ><a
                                     href="/line/detail/42096405">Quyên Đỗ</a>
          (予約時のお名前:  nga test 5/5)
        </span></td>
                    <td >
                        <div >
                            <button  type="button" class="btn btn-primary btn-sm">
                                ステータス変更
                            </button>
                        </div>
                    </td>
                    <td >1</td>
                    <td >
                        <small >
                            <div >予約プラン:<span > plan chung</span></div>
                            <div >予約経路: 管理者予約</div>
                            <div >友だちが予約した日時: 2021年5月5日 13時54分</div>
                            <div >
                                友だちからのコメント: note
                            </div>
                        </small>
                    </td>
                    <td ><!----></td>
                </tr>
                <tr  class="">
                    <td ><input  type="checkbox"
                                                  class="memberchecks table-row-selector" value="61212"></td>
                    <td ><span  
                                                 class="label label-lg label-warning">キャンセル済み</span>
                        <div ><span  class="label label-default">管理画面予約</span>
                        </div>
                    </td>
                    <td  class="has_emoji"><img 
                                                                  src=""
                                                                  width="50px;"> <span ><a
                                     href="/line/detail/42096405">Quyên Đỗ</a>
          (予約時のお名前:  dat cho cho quyen)
        </span></td>
                    <td >
                        <div >
                            <button  type="button" class="btn btn-primary btn-sm">
                                ステータス変更
                            </button>
                        </div>
                    </td>
                    <td >1</td>
                    <td >
                        <small >
                            <div >予約プラン:<span > plan chung </span></div>
                            <div >予約経路: 管理者予約</div>
                            <div >友だちが予約した日時: 2021年4月13日 17時24分</div>
                        </small>
                    </td>
                    <td ><!----></td>
                </tr>
                </tbody>
                <tbody  >
                <tr  class="tr-parent">
                    <td ><input  type="checkbox"></td>
                    <td  colspan="2" style="font-weight: bold;">
                        開催：2021/05/21 (金) 12:00 〜 14:00、〆切：2021/05/20 12:00
                        <label  class="label label-info">プランあり</label></td>
                    <td >
                        <div  style="display: none;">
                            <button  type="button" class="btn btn-warning btn-sm">
                                一括ステータス変更
                            </button>
                        </div>
                    </td>
                    <td  colspan="3"></td>
                </tr> <!---->
                <tr  class="">
                    <td ><input  type="checkbox"
                                                  class="memberchecks table-row-selector" value="72087"></td>
                    <td ><span  
                                                 class="label label-lg label-success">予約済み</span>
                        <div ><span  class="label label-default">管理画面予約</span>
                        </div>
                    </td>
                    <td  class="has_emoji"><img 
                                                                  src=""
                                                                  width="50px;"> <span ><a
                                     href="/line/detail/42096405">Quyên Đỗ</a>
          (予約時のお名前:  ngatesst 5/5 slot3)
        </span></td>
                    <td >
                        <div >
                            <button  type="button" class="btn btn-primary btn-sm">
                                ステータス変更
                            </button>
                        </div>
                    </td>
                    <td >1</td>
                    <td >
                        <small >
                            <div >予約プラン: <span >dsfsdf </span></div>
                            <div >予約経路: 管理者予約</div>
                            <div >友だちが予約した日時: 2021年5月5日 13時55分</div>
                            <div >
                                友だちからのコメント: ádasd
                            </div>
                        </small>
                    </td>
                    <td >
                    </td>
                </tr>
                </tbody>
            </table>
            </div>

            <div class="modal fade" id="bookingNew" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
                 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>イベント名: nga test slot</h5>
                            <div>
                                <div class="form-group">
                                    <label class="control-label txt-bold mt-2">日程を選択</label>
                                    <div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
                                            <label class="form-check-label" for="exampleRadios1">
                                                2021/04/14 (水) 12:00 〜 15:00  <span class="label label-info" style="margin-left: 8px;">プランあり</span>
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
                                            <label class="form-check-label" for="exampleRadios1">
                                                2021/04/14 (水) 12:00 〜 15:00  <span class="label label-info" style="margin-left: 8px;">プランあり</span>
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
                                            <label class="form-check-label" for="exampleRadios1">
                                                2021/04/14 (水) 12:00 〜 15:00  <span class="label label-info" style="margin-left: 8px;">プランあり</span>
                                            </label>
                                        </div>

                                    </div>
                                </div>
                                <div class="detail_booking">
                                    <div class="form-group">
                                        <label class="control-label mt-2">予約種別
                                            <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>
                                        <select id="inputState" class="form-control">
                                            <option selected>Choose...</option>
                                            <option>...</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">
                                            コメント
                                            <small><span class="label label-default">任意</span></small>
                                        </label>
                                        <div>
                                            <textarea rows="4" cols="50" class="form-control" placeholder="コメントを入力"></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>
                                        <select id="inputState" class="form-control">
                                            <option value="0">
                                                プランを選択してください
                                            </option>
                                            <option value="11073">
                                                dsfsdf(\0)
                                            </option>
                                        </select>
                                    </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;">
                                            枚

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


                            </div>
                        </div>

                        <div class="modal-footer" style="text-align: left;">
                            <button class="btn btn-success" type="button">
                                登録
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="modalUpdateStatusBooking" tabindex="-1" role="dialog"
                 aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content change-status-modal">
                        <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">
{{--                            update all thi k co phan nay--}}
                            <div class="has_emoji" style="margin-bottom: 8px;">
                                <img
                                        src=""
                                        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="/line/detail/42096405">Quyên Đỗ</a>
                                    (予約時のお名前:  nga test 5/5)
                                </span>
                                <div style="padding: 0.2em 0px;"></div>
                                <span data-v-66e55cc2="" class="label label-lg label-warning">キャンセル済み</span> <br> <br>
                            </div>

                            <div>
                                <h5 class="kanban">
                                    変更後のステータス
                                </h5>
                                <span class="pan-panel approved">承認する</span>
                                <span class="pan-panel denied">否認する</span>
                                <span class="pan-panel pending">保留にする</span>
                                <span class="pan-panel canceled disabled">予約キャンセル</span>
                                <br> <br>
                                <h5 class="kanban">
                                    アクション実行
                                </h5>
                                <span class="pan-panel do-action">実行する</span>
                                <span class="pan-panel do-action selected">実行しない</span>
                                <small class="form-help">
                                    アクションが未設定な場合、選択の有無にかかわらず実行されません。
                                </small>
                            </div>
                            <br> <br>
                        </div>
                        <div class="modal-footer"><span class="btn btn-success">変更</span></div>
                    </div>
                </div>
            </div>
            <div class="modal-overlay" style="display: none;"></div>
        </section>
    </article>
@endsection
@push('js')
    <script>
        var token = "{!! csrf_token() !!}";
    </script>

@endpush