<!doctype html>
<html class="no-js">
<head>

  <include file="Common/head" />
  <style type="text/css">
    a.am-text-secondary:visited{color:#3bb4f2;}
    a.am-text-danger:visited{color:#dd514c;}
    .am-btn-default {background-color: #fff;}
    th {text-align:center;}
    tr td{text-align:center;}
    select{padding: 4px;border: 1px solid #ccc;}
    .am-popup-bd {background:#fff;}
    .am-popup-bd img {max-width: 100%}
    .am-u-sm-2 {border-top: 1px solid #ddd;margin-top: 10px;}
    .am-u-sm-10 {border-left: 1px solid #ddd;margin-top: 10px;}
    .am-table>tbody>tr>td.user-info {padding: 1px;text-align: left;}
    .am-table>tbody>tr>td.user-info img{height: 42px}
    myred{color:#dd514c;}
    mygreen {color:#1aad19;}
    mygery {color:#999;}
    .wxgreen {color:#1aad19;}
    .search-div.am-input-group .am-form-field{width:120px;float: right;}
    .search-div select {float: right;}
    .ttt-switch {margin: 0 auto;}
    .am-form select{
      font-size: 1.2rem;
      border-color: #e6e6e6;
      width: unset;
      padding: .5em 2em .5em 1em;
      margin: 0 auto;
    }
    .am-table>tbody>tr>td.td-img {
      padding: 1px;
      text-align: left;
      padding-left: 10px;
    }
    .am-table>tbody>tr>td.td-img img {
      height: 56px;width: 56px;
    }
    .am-table>tbody>tr>td.td-img a {
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 13vw;
      cursor: pointer;
    }
    .am-table>thead>tr>th {
      border-bottom: 0;
    }
    .am-table>tbody>tr:first-child>td {
      border-top: 0;
    }
    .am-table>thead.am-thead-hide>tr>th {
      padding: 0;
    }
    p {
      margin: 0;
    }
    .am-table>tbody>tr>td {
      vertical-align: middle;
      font-size: 1.4rem;
      line-height: 1.6rem;
      color: #444;
      background-color: #fdfdfd;
    }
    .format-price>p {
      display: table;
      width: 100%;
      text-align: right;
    }
    .format-price>p>span {
      display: table-cell;
      width: 50%;
      text-align: right;
    }
    .am-filter>.am-input-group:not(:first-child) {
      padding-top: 1.25rem;
    }
    .am-input-group-label.toumin {
      background-color: rgba(0,0,0,0);
      border: 0;
    }
    input[type=datetime-local].am-form-field {
      height: 33px;
    }
    .am-btn {
      font-size: 1.4rem;
    }
  </style>
  <style type="text/css">
    .shade_div {
      width:100%;
      height:100%;
      background-color:#000;
      filter:alpha(opacity=50);
      -moz-opacity:0.5;
      opacity:0.5;
      position:absolute;
      left:0px;
      top:0px;
      display:none;
      z-index:1000;
    }
    .float_div {
      width:200px;
      height:400px;
      position:absolute;
      background-color: #FFF;
      top:200px;
      left:50%;
      margin-left:-140px;
      display:none;
      z-index:1500;
    }
  </style>
</head>
<body>
<include file="Common/header" />

<div class="am-cf admin">

  <include file="Common/sidebar" nav="$nav" navv="$nav"/>

  <div class="content-page" style="background: white;">

    <div class="content" style="background: white;">
      <div class="admin-content-body">
        <div class="am-cf am-padding">
          <!-- Start right Content here -->
          <div class="content">


          </div>
          <!-- Start content -->
          <div class="content">
            <div class="am-cf am-padding">
              <strong class="am-text-primary am-text-lg">Order Management</strong> /
              <small>Reservation</small>
            </div>
            <ul class="am-nav am-nav-pills" style="margin: 0 1.5rem;">
              <li class="sts" data-sts=""><a href="javascript:;">All Reserve</a></li>
              <li class="sts" data-sts="1"><a href="javascript:;">New Booking</a><?php if($count)echo'<span class="am-badge am-badge-danger am-round">'.$count2.'</span>'?></li>
              <li class="sts" data-sts="2"><a href="javascript:;">Confirmed</a></li>
              <li class="sts" data-sts="3"><a href="javascript:;">Completed</a></li>
            </ul>
            <script type="text/javascript">
                $(function(){
                    var sts = "{$_GET['sts']}";
                    $('.sts[data-sts="'+sts+'"]').addClass('am-active');
                    $('.sts').on('click',function(){
                        location.href = "{:U('Order/appointment_order')}?sts="+$(this).data('sts');
                    });
                });
            </script>

            <hr style="margin-top:0px;">

            <form action="{:U('Order/order_list')}" class="am-panel am-panel-default" style="margin:1.5rem;" id="form1">
              <input type="hidden" name="op">
              <div class="am-panel-bd am-filter">
                <div class="am-input-group am-input-group-sm" style="max-width: 820px;">
                  <span class="am-input-group-label">Name</span>
                  <input type="text" name="name" value="{$_GET['name']}" class="am-form-field">
                  <span class="am-input-group-label toumin"></span>
                  <span class="am-input-group-label">Phone</span>
                  <input type="text" name="mobile" value="{$_GET['mobile']}" class="am-form-field">
                </div>
                <div class="am-input-group am-input-group-sm" style="max-width: 400px;">
                  <span class="am-input-group-label">Reserve Time</span>
                  <input type="datetime-local" name="ctstar" value="{$_GET['ctstar']}" class="am-form-field">
                  <span class="am-input-group-label">To</span>
                  <input type="datetime-local" name="ctend" value="{$_GET['ctend']}" class="am-form-field">
                </div>
                <div class="am-input-group am-input-group-sm">
                  <button class="am-btn am-btn-primary submit" type="button">Search</button>&nbsp;
                  <a class="am-btn am-btn-secondary" href="{:U('order_list')}">Clear</a>&nbsp;
                </div>
              </div>
              <script type="text/javascript">
                  $(function(){
                      $('.submit').on('click',function(){
                          $('input[name=op]').val('');
                          $('#form1').submit();
                      });
                      $('.export').on('click',function(){
                          $('input[name=op]').val('export');
                          $('#form1').submit();
                      });
                      $("input[name=ctstar]").on('click',function(){
                          if($(this).val() == ''){
                              $(this).val("{:date('Y-m-d\\T00:00')}");
                          }
                      });
                      $("input[name=ctend]").on('click',function(){
                          if($(this).val() == ''){
                              $(this).val("{:date('Y-m-d\\T00:00',strtotime("+1 day"))}");
                          }
                      });
                  });
              </script>
            </form>

            <div class="am-g">
              <div class="am-u-sm-12">
                <div class="am-scrollable-horizontal">
                  <table class="am-table am-text-nowrap am-table-radius">
                    <thead>
                    <tr style="background-color: #f9f9f9;">
                      <th>Name</th>
                      <th>Reserved Date</th>
                      <th>Reservation Session</th>
                      <!-- <th>定金</th> -->
                      <th>Table</th>
                      <th>Num PAX</th>
                      <th>Phone</th>
                      <th>Status</th>
                      <th>Created Time</th>
                      <th>Remark</th>
                      <th>Action</th>
                    </tr>
                    </thead>
                    <tbody>
                    <if condition="!$list">
                    	<tr><td colspan="9">No Data</td></tr>
                  	</if>
                  	<volist name="list" id="vo">
                        <tr>
                            <td>{$vo.name} <?php if ($vo['status'] == 3) : ?>Consumption amount{$vo.p_money}<?php endif;?></td>
                            <td>{$vo.time}</td>
                            <td>{$vo.time_interval}</td>
                            <!-- <td>
                              <?php if ($vo['app_status'] == 2) : ?>
                                未支付定金
                              <?php elseif ($vo['app_status'] == 1) : ?>
                                已支付定金￥{$vo.money}
                              <?php endif;?>
                            </td> -->
                            <td>{$vo.table}</td>
                            <td>{$vo.nums}</td>
                            <td>{$vo.mobile}</td>
                            <td>
                                <?php if ($vo['status'] == 1) : ?>
                                   New Booking
                                <?php elseif ($vo['status'] == 2) : ?>
                                    Confirmed
                                <?php elseif ($vo['status'] == 3) : ?>
                                    Complete
                               <?php endif;?>
                            </td>
                            <td>{$vo.create_time|date="Y-m-d H:i:s", ###}</td>
                            <th>{$vo.remark}
                              <button
                                  type="button"
                                  class="am-btn am-btn-success doc-prompt-toggle1" data-id="{$vo.id}">
                                  Add Remark
                                </button>
                            </th>
                            <td>
                                <div class="am-dropdown" data-am-dropdown>
                                    <button class="am-btn am-btn-default am-btn-xs am-dropdown-toggle" data-am-dropdown-toggle>
                                        <span class="am-icon-cog"></span>
                                        <span class="am-icon-caret-down"></span>
                                    </button>
                                    <ul class="am-dropdown-content">
                                        <li>
                                            <?php if ($vo['status'] == 1) : ?>
                                              <a href="javascript:;"
                                              type="button" data-id="{$vo.id}" class="sure_o">
                                              Confirm Order
                                              </a>
                                            <?php elseif ($vo['status'] == 2) : ?>
                                              <a  href="javascript:;"
                                              type="button"
                                              class="doc-prompt-toggle" data-id="{$vo.id}">
                                              Confirm Dine in
                                              </a>
                                            <?php endif;?>
                                        </li>
                                        <li>
                                            <a href="{:U('delete',array('id' => $vo['id']))}">Delete</a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    </volist>
                    </tbody>
                  </table>
                  <br>
                  <br>
                  <br>
                  <br>
                  <br>
                  <br>
                  <br>
                  <br>
                </div>
                <div class="am-cf">
                  <div class="am-fr">
                    {$page}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- content end -->

      </div>

      <div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt" data-id>
        <div class="am-modal-dialog">
          <div class="am-modal-hd">Completion Confirmation</div>
          <div class="am-modal-bd">
            <input type="text" class="am-modal-prompt-input" placeholder="Please Insert Customer Spending Amount" name="p_money" required="required">
          </div>
          <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>Cancel</span>
            <span class="am-modal-btn" data-am-modal-confirm>Submit</span>
          </div>
        </div>
      </div>

      <div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt1" data-id>
        <div class="am-modal-dialog">
          <div class="am-modal-hd">Insert Remark Info</div>
          <div class="am-modal-bd">
            <input type="text" class="am-modal-prompt-input" placeholder="Please Insert Remark Info" name="remark" required="required">
          </div>
          <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>Cancel</span>
            <span class="am-modal-btn" data-am-modal-confirm>Submit</span>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
<include file="Common/footer" />
</body>

<script type="text/javascript">
  $(function() {
    $('.doc-prompt-toggle').on('click', function() {
      var id = $(this).attr('data-id');
      $('#my-prompt').attr('data-id', id);
      $('#my-prompt').modal({
        relatedTarget: this,
        onConfirm: function(e) {
          var id = $('#my-prompt').attr('data-id');
          var data = {p_money: e.data, id: id};
            // 发送请求
            $.post('{:U(\"sure_complete\")}',data,function(res){
              if (res.status == 1) {
                alert(res.msg);
                location.reload();
              } else {
                alert(res.msg)
              }
            });
        },
        onCancel: function(e) {
          alert('Confirm later!');
        }
      });
    });

    // 订单备注
    $('.doc-prompt-toggle1').on('click', function() {
      var id = $(this).attr('data-id');
      $('#my-prompt1').attr('data-id', id);
      $('#my-prompt1').modal({
        relatedTarget: this,
        onConfirm: function(e) {
          var id = $('#my-prompt1').attr('data-id');
          var data = {remark: e.data, id: id};
            // 发送请求
            $.post("{:U('commit_remark')}",data,function(res){
              if (res.status == 1) {
                alert(res.msg);
                location.reload();
              } else {
                alert(res.msg)
              }
            });
        },
        onCancel: function(e) {
          alert('Remember to Insert Your Remark');
        }
      });
    });

    // 订单确认
    $('.sure_o').click(function(){
      var data = {id: $(this).attr('data-id')};
      $.post("{:U('sure_o')}",data,function(res){
        if (res.status == 1) {
         alert(res.msg);
         location.reload();
        } else {
          alert(res.msg)
        }
      });
    });
  });
</script>

</html>