<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>

<!DOCTYPE html>
<html lang="en">

<head>

<?php   include('include/common.php');?>  
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.js"></script>



                <script language="JavaScript">
                function checkall(source) {
                   
                checkboxes = document.getElementsByName('admincheck');
                    for(var i=0, n=checkboxes.length;i<n;i++) {
                        checkboxes[i].checked = source.checked;
                    }
                }
                </script>

  <meta charset="utf-8">
  <title>Welcome to CodeIgniter</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/calendar.css">
  <style type="text/css">
    .page-container {
      background: #e0e0e07d;
    }

    /* Ad-hoc fix of schedule-calendar, slim-scroll does not work properly */
    .slimScrollDiv,
    #schedule-calendar {
      height: auto !important;
    }
  </style>
</head>

<body>

      <?php   include('include/header.php');?>
    <div class="wrapper" >
        
        <?php   include('include/sidebar.php');?>
        <!-- Page Content  -->
        <div id="content" style="background-color: #e5e5e5;">


  <div id="page-schedule-calendar" class="page-body">
    <div class="widget">
      <div class="widget-body" style="height: auto;" <?php if (isset($_data_action)) echo 'data-action="' . $_data_action . '"'; ?>>
        <ul class="table-toolbar table-toolbar-1 calendar-toolbar nobackground noborder">
          <li>
            <span>時間模式：</span>
            <select class="schedule-calendar-mode select2-mode no-search-bar" data-mode="display">
              <option value="d"> 日 </option>
              <option value="w" selected> 星期 </option>
              <option value="m" selected> 月 </option>
              <!-- <optgroup label="月">
                <option value="ms"> 月（學生）</option>
                <option value="mc"> 月（課堂）</option>
              </optgroup> -->
            </select>
          </li>
          <li>
            <span>顯示模式：</span>
            <select class="schedule-calendar-mode select2-mode no-search-bar" data-mode="display-resource">
              <option value="pic">美容師</option>
              <option value="room">房間</option>
              <option value="course">課堂</option>
              <option value="teacher">老師</option>
            </select>
          </li>
          <li>
            <span>顯示模式：</span>
            <select class="schedule-calendar-mode select2-mode no-search-bar" data-mode="filter">
              <option value="pic">美容師</option>
              <option value="room">房間</option>
              <option value="course">課堂</option>
              <option value="teacher">老師</option>
            </select>
          </li>
          <li>
            <div class="vertical-spinbox">
              <a class="btn-value-left"><i class="glyphicon glyphicon-triangle-left"></i></a>
              <div class="input-box">
                <span>日期：</span>
                <div class="input-group">
                  <input class="form-control date-picker" type="text" data-date-format="yyyy-mm-dd">
                  <a class="input-icon">
                    <i class="fa fa-calendar"></i>
                  </a>
                </div>
              </div>
              <a class="btn-value-right"><i class="glyphicon glyphicon-triangle-right"></i></a>
            </div>
          </li>
          
          <li>
            <span>搜尋：</span>
            <div class="input-group no-icon">
              <input class="form-control schedule-calendar-mode" type="text" data-mode="and-search">
            </div>
          </li>
          <li>
            <span>學生：</span>
            <div class="input-group no-icon">
              <input class="form-control schedule-calendar-mode" type="text" data-mode="student">
            </div>
          </li>
          <li>
            <span>星期日：</span>
            <input class="schedule-calendar-mode" type="checkbox" data-mode="sundays" />
          </li>
          <!-- <li>
        <span>排列顯示：</span>
        <select class="schedule-calendar-mode select2-mode no-search-bar" data-mode="indent">
            <option value="default">齊排</option>
        </select>
    </li> -->
        </ul>
        <div class="table-toolbar">
          <a href="#" class="toolbar-element btn btn-default btn-update btn-transparent schedule-calendar-refresh">
            <i class="fa fa-refresh"></i>更新
          </a>
          <a href="booking/add" class="toolbar-element btn btn-default btn-create btn-transparent">
            <i class="fa fa-plus"></i>創建預約
          </a>
          <a href="#" class="toolbar-element btn btn-default btn-print btn-transparent">
            <i class="fa fa-print"></i>列印
          </a>
        </div>
        <div id="schedule-calendar">
          <table class="schedule-calendar"></table>
        </div>
      </div>
    </div>
  </div>

  <script>
    <?php if (isset($_json)) : ?>
      const _json = <?php echo $_json; ?>;
    <?php endif; ?>
    <?php if (isset($_events)) : ?>
      const _events = <?php echo $_events; ?>;
    <?php endif; ?>
    <?php if (isset($_resources)) : ?>
      const _resources = <?php echo $_resources; ?>;
    <?php endif; ?>
  </script>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/moment@2.22.1/min/moment-with-locales.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>
  <script type='text/javascript' src="<?php echo base_url(); ?>js/vendors/bootstrap-datepicker.js"></script>
  <script type='text/javascript' src="<?php echo base_url(); ?>js/calendar.js"></script>

   <!-- end test datatable -->
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#sidebarCollapse').on('click', function () {
                $('#sidebar').toggleClass('active');
            });

            // password click
            bootstrapRevealPassword();

// Plugin to integrate in your javascript file
            function bootstrapRevealPassword() {
            $('[data-password]').closest('.form-group').addClass('position-relative').append('<span class="form-password-icon"><i class="material-icons">visibility_off</i></span>');

            $('.form-password-icon').on('click', function() {
                var clicks = $(this).data('clicks');
                if (clicks) {
                // odd clicks
                $(this).html('<span class="input-group-text "><i class="fas fa-eye-slash"></i></span>').prevAll(':input').attr('type', 'password');
                } else {
                // even clicks
                $(this).html('<span class="input-group-text "><i class="fas fa-eye"></i></span>').prevAll(':input').attr('type', 'text');
                }
                $(this).data("clicks", !clicks);
            });
            }

            // end password click

        });
    </script>
</body>

</html>