<!DOCTYPE html>
<html>

<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>



                <title>Jquery Fullcalandar Integration with PHP and Mysql</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/4.0.0-beta.2/resource-common/main.js"></script>
  

  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/4.0.0-beta.2/resource-daygrid/main.js"></script>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/4.0.0-beta.2/resource-timegrid/main.js"></script>

  <script>


   
  $(document).ready(function() {
   var calendar = $('#calendar').fullCalendar({
    editable:true,
    header:{
     left:'prev,next today',
     center:'title',
     right:'month,agendaWeek,agendaDay'
    },
    // events: 'load.php',
    events: <?php
        echo $events;

    ?>
    ,
    selectable:true,
    selectHelper:true,
    select: function(start, end, allDay)
    {
     var title = prompt("Enter Event Title");
     if(title)
     {
      var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
      var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
      $.ajax({
       url:"insert.php",
       type:"POST",
       data:{title:title, start:start, end:end},
       success:function()
       {
        calendar.fullCalendar('refetchEvents');
        alert("Added Successfully");
       }
      })
     }
    },
    editable:true,
    eventResize:function(event)
    {
     var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
     var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
     var title = event.title;
     var id = event.id;
     $.ajax({
      url:"update.php",
      type:"POST",
      data:{title:title, start:start, end:end, id:id},
      success:function(){
       calendar.fullCalendar('refetchEvents');
       alert('Event Update');
      }
     })
    },

    eventDrop:function(event)
    {
     var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
     var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
     var title = event.title;
     var id = event.id;
     $.ajax({
      url:"update.php",
      type:"POST",
      data:{title:title, start:start, end:end, id:id},
      success:function()
      {
       calendar.fullCalendar('refetchEvents');
       alert("Event Updated");
      }
     });
    },

    eventClick:function(event)
    {
     if(confirm("Are you sure you want to remove it?"))
     {
      var id = event.id;
      $.ajax({
       url:"delete.php",
       type:"POST",
       data:{id:id},
       success:function()
       {
        calendar.fullCalendar('refetchEvents');
        alert("Event Removed");
       }
      })
     }
    },

   });
  });
   
  </script>


</head>

<body>

    <!-- admin javascript -->
    
    


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

            <!-- new calendar -->
            <div class="container">
               <div id="calendar"></div>
              </div>
              <div id="example"></div>
  <script>
    $( "#example" ).fullCalendar({
        // 參數設定[註1]
        header: { // 頂部排版
            left: "prev,next today", // 左邊放置上一頁、下一頁和今天
            center: "title", // 中間放置標題
            right: "month,basicWeek,basicDay" // 右邊放置月、周、天
        },
        defaultDate: "2018-02-12", // 起始日期
        weekends: false, // 顯示星期六跟星期日
        editable: true,  // 啟動拖曳調整日期
        events: [ // 事件
            // { // 事件
            //     title: "約會",
            //     start: "2018-02-01"
            // },
            // { // 事件(包含開始時間)
            //     title: "中餐",
            //     start: "2018-02-12T12:00:00"
            // },
            // { // 事件(包含跨日開始時間、結束時間)
            //     title: "音樂節",
            //     start: "2018-02-07",
            //     end: "2018-02-10"
            // },
            // { // 事件(包含開始時間、結束時間)
            //     title: "會議",
            //     start: "2018-02-12T10:30:00",
            //     end: "2018-02-12T12:30:00"
            // },
            // { // 事件(設定連結)
            //     title: "Click for Google",
            //     url: "http://google.com/",
            //     start: "2018-02-28"
            // }
            <?php echo $events;
            ?>
        ]
    });
  </script>
            <!-- end new calendar -->


            <!-- add button -->

            <a href="/at-cms/roomadmin/add">新增</a>
            <!-- end add button -->
              <!-- test -->
      <?php
        echo "test";
        // $starttime= DateTime::createFromFormat("Y-m-d G:i", $bookingrow->startdate." ".$bookingrow->starttime);
          // $date = new DateTime("20");
          $date = DateTime::createFromFormat('Y-m-d H:i', '2009-02-15 15:16');
// echo "Format: " . $date->format('Y-m-d H:i') ; 
// "-2209078800"
// echo $date->format("U");
// false
echo $date->getTimestamp();
        echo "";
      ?>
    <!-- end test -->
            <!-- test datatable -->
            <table id="book-table" class="table table-bordered table-striped table-hover ">
         
            <!-- <table id="book-table" class="display responsive nowrap"  width="100%"> -->
            <thead>
            <tr><td>房間名稱1</td><td>容額</td><td>詳情</td><td>備註</td><td>創建日期</td><td>更新日期</td><td>編輯</td><td>啟用</td><td>删除 <input type="checkbox" class="" id="admincheck" name="admincheck" value="" onclick="checkall(this)">
                          </td></tr>

            </thead>
            <tbody>
            <?php  foreach ($rooms as $roomrow) {
            ?>
                    <tr><td><?php echo $roomrow->name;?></td><td><?php echo $roomrow->capacity;?></td><td></td><td>
                    </td><td><?php echo date("Y-m-d H:i:s", $roomrow->create_time);?></td><td><?php echo date("Y-m-d H:i:s", $roomrow->update_time);?></td><td><a href="/at-cms/roomadmin/edit/<?php echo $roomrow->id;?>">編輯</a></td><td><a href="/at-cms/roomadmin/status/<?php echo $roomrow->id;?>">啟用</a></td><td>删除
                            <input type="checkbox" class="checkbox" id="admincheck" name="admincheck" value="<?php echo  $roomrow->id; ?>">    
                            </td></tr>



            <?php 
                   }//foreach ($employee as $row) {
            ?>


                        
            </tbody>
            </table>

            <script type="text/javascript">
$(document).ready(function() {
    $('#book-table').DataTable();
});
</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>