<!DOCTYPE html>
<html>

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<?php   include('include/common.php');?>  

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


 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.4/css/responsive.dataTables.min.css"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.js"></script>

<!-- https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js -->
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.4/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.colVis.min.js"></script>


<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.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;
                    }
                }


                function checkToggle(source){
                    if(source.checked==true){
                    // alert("clicked123");
                    // alert("add");
                        action="add";
                        // check status to 1
                    }
                    else{
                      // alert("remove");  
                    // alert(source.data('clickid'));
                      action="remove";
                      // check status to 0
                    }
                    // alert( $(source).attr('data-clickid'));
                    // alert( $(source).val());
                    var personid=$(source).attr('data-clickid');
                    var postData ={
                    'action':action,
                    'personid':personid
                    // 'currentlevel':currentlevel,
                    // 'level1id':split1[1],
                    // 'level2id':split1[2],
                    // 'level3id':split1[3],
                    // 'level4id':split1[4]
                    }
                     var GlobalVariables ={
                      'csrfToken': '123',
                      'baseUrl':'<?php echo base_url();?>',
                      'destUrl':'<?php echo base_url();?>/api/v1/brroomend/status',
                      'AJAX_SUCCESS' :'SUCCESS',
                      'AJAX_FAILURE' :'FAILURE'
                     };
                     var postUrl= GlobalVariables.baseUrl +'/api/v1/brroomend/status';

                     $.ajax({
                      method: "POST",
                      url: postUrl,
                      dataType: "json",
                     data: postData,
                     success : function(data){

                    // alert("posted");
                    // alert('formsubmit');
                    // alert(data);
                    
                    // alert(data['recordstatus']);
                    // alert(data['msg']);
                    if(data['recordstatus']=="SUCCESS"){
                        $('#feedback').remove();
                        $( '#editmsg' ).append('<p class="text-primary" id="feedback">'+data['msg']+'</p>');
                        // setTimeout(function() {
                        //     location.reload();
                        // }, 3000);
                        // location.reload();

                    }
                      if(data['recordstatus']=="FAILURE"){
                        $('#feedback').remove();
                        $( '#editmsg' ).append('<p class="text-danger"  id="feedback">'+data['msg']+'</p>');
                    //   $( '#modal-bodymsg' ).empty();
                    //   $( '#modal-bodymsg' ).append( '<h5 class="text-center" style="color: #a03d49;">客戶不能增加。</h5> <h5 class="text-center" style="color: #a03d49;">請稍後再嘗試。</h5>' );
                    //   $('#finishModal').modal('show');
                    // }
                      // if (data.AJAX_SUCCESS==GlobalVariables.AJAX_SUCCESS){
                      //     window.location.href=GlobalVariables.destUrl;
                      // } else {
                      //     $('.alert').text("登入錯誤");
                      //    $('.alert').removeClass('hidden');
                      }
                  }
                }); 
                   //end ajax module
                }//function checkToggle(source){

                //show delete modal
            function showdeletemodal() {
                checkboxes = document.getElementsByName('admincheck');
                var favorite = [];
                $count=0;
                $.each($("input[name='admincheck']:checked"), function(){
                    favorite.push($(this).val());
                    $count=$count+1;
                });
                // alert(1);
                // alert("My favourite sports are: " + favorite.join(", "));
                document.getElementById("deletenum").innerHTML = $count;
                $('#deleteModalCenter').modal({
                                    show: true,
                                }); 
            }//function showdeletemodal() {
            //end show delete modal   


            $( document ).ready(function() {
    
            //delete submit button
        $("#btndeleteSubmit").click(function(event) {
            // alert("1");
          var forcusitem="";
          var passCheck=true;
            //check delete have value
            // var checkboxvalue = $('.checkbox').val();   

            var checkboxvalue =  [];    
            // $("input.checkbox[type=checkbox]:checked").each(function(i){
            //     alert(i.value );
            // checkboxvalue.push( i.value );
            // }); 

            $('input.checkbox:checkbox:checked').each(function () {

                // alert($(this).val());
                checkboxvalue.push( $(this).val() );

            });
            var postData ={
                'inputdeletecheckboxvalue':checkboxvalue
            }
            var GlobalVariables ={
                  'csrfToken': '123',
                  'baseUrl':'<?php echo base_url();?>',
                  'destUrl':'<?php echo base_url();?>/api/v1/fileend/delete',
                  'AJAX_SUCCESS' :'SUCCESS',
                  'AJAX_FAILURE' :'FAILURE'
            };

            event.preventDefault();
            var postUrl= GlobalVariables.baseUrl +'/api/v1/brroomend/delete';
            //end　check delete have value
            // $('#loading').show();
            $.ajax({
                  method: "POST",
                  url: postUrl,
                  dataType: "json",
                 data: postData,
                 success : function(data){
                  // $('#loading').hide();
                // alert("posted");
                // alert('formsubmit');
                // alert(data);
                
                // alert(data['recordstatus']);
                // alert(data['msg']);
                if(data['recordstatus']=="SUCCESS"){

                    $('#feedback').remove();
                    $( '#deletemsg' ).append('<p class="text-primary" id="feedback">'+data['msg']+'</p>');
                    setTimeout(function() {
                        location.reload();
                    }, 3000);
                    // location.reload();

                }
                  if(data['recordstatus']=="FAILURE"){
                    $('#feedback').remove();
                    $( '#deletemsg' ).append('<p class="text-danger"  id="feedback">'+data['msg']+'</p>');
                //   $( '#modal-bodymsg' ).empty();
                //   $( '#modal-bodymsg' ).append( '<h5 class="text-center" style="color: #a03d49;">客戶不能增加。</h5> <h5 class="text-center" style="color: #a03d49;">請稍後再嘗試。</h5>' );
                //   $('#finishModal').modal('show');
                // }
                  // if (data.AJAX_SUCCESS==GlobalVariables.AJAX_SUCCESS){
                  //     window.location.href=GlobalVariables.destUrl;
                  // } else {
                  //     $('.alert').text("登入錯誤");
                  //    $('.alert').removeClass('hidden');
                  }
              }
            });  

        });  //$("#btndeleteSubmit").click(function(event) {      
        //end delete submit button  
        });//$( document ).ready(function() {
                </script>
</head>

<body>

    <!-- admin javascript -->
    
    


    <?php   include('include/header.php');?>
    <div class="wrapper" >
        
        <?php   include('include/sidebar.php');?>
        <!-- delete modal -->
            <script>
                
            </script>
            


            <div class="modal fade" id="deleteModalCenter" tabindex="-1" role="dialog" aria-labelledby="deleteModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered  " role="document" style="max-width: 600px;">
                <div class="modal-content px-3">
                <!-- <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div> -->
                <div class="modal-body ">
                     <h5 style="color:#7d4495" class="text-center py-2"><i class="fas fa-plus mr-2" style="color:#7d4495"></i>删除服務</h5>
                     <form>

                   
                    <div class="form-group row">
                        <label for="inputRePassword" class="col-sm-12 "><span style="color:#7d4495;" >確定删除</span><span id="deletenum" style="color:#7d4495;"></span><span style="color:#7d4495;" >個房間?</span></label>
                        
                        <span id="deletemsg" class="text-center"></span>
                    </div>
                    <!-- <div class="form-group row">
                        <div class="col-sm-12">
                        <p style="font-size: 12px;"><span style="color:#616161">*為必填項目<br>登入名稱為英文字或數字組成(不分大小寫)</span></p>
                        <span id="editmsg" class="text-center"></span>
                         </div>
                    </div> -->
                    <div class="form-group row">
                        <div class="col-sm-12 text-center">
                        <button type="button" class="btn  px-5  custombutton" id="btndeleteSubmit">確定</button>
                        </div>
                    </div>
                    <input type="hidden" class="form-control" id="inputadminid" placeholder="">
                    </form>
                </div>
                <!-- <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div> -->
                </div>
            </div>
            </div>
            <script type="text/javascript">
             


            </script>
            <!-- end delete modal --> 

        <!-- Page Content  -->
        <div id="content" style="background-color: #ffffff;">

            <div>
              <script src="../../../js/timepicki.js"></script>
              <script>
                  $(document).ready(function(){
                        $(".time_element").timepicki({show_meridian:false,
    step_size_minutes:15,start_time: ["07", "00"]});
                        alert( $(".time_element").val());
                  });

                    function sayHello() {
                          $(".time_element").val('09:00');
                          // document.querySelector(".mi_tx .timepicki-input").value=15;
                          alert(document.querySelector(".mi_tx .timepicki-input").value);
                          document.querySelector(".mi_tx .timepicki-input").value='30';
                          $(".time_element").timepicki({show_meridian:false,
    step_size_minutes:15,start_time: ["09", "00", "AM"]});
                          alert( $(".time_element").val());
                    }
              </script>
                <link rel="stylesheet" type="text/css" href="../../../css/timepicki.css">
                <input type="text" name="timepicker" class="time_element"/>

                <input type="button" onclick="sayHello()" value="Click" />
            </div>


            <div class="title">房間</div>


            <!-- add button -->
            <div style="" class="menubar2">
                    <a href="/at-cms/brroomadmin/add">
                        <i class="fas fa-plus" style=" display: inline-block;
  border-radius: 10px;
  box-shadow: 0px 0px 2px #888;
  color: #33aaae;
  padding: 2px 2px;"></i>

新增</a>
            </div>
            <!-- end add button -->
            <!-- add button -->

            <!-- <a href="/at-cms/roomadmin/add">新增</a> -->
            <!-- end add button -->

            <!-- test datatable -->
            <table id="book-table" class="display responsive nowrap table table-bordered table-striped table-hover ">
         
            <!-- <table id="book-table" class="display responsive nowrap"  width="100%"> -->
            <thead>
            <tr><td>房間名稱</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><?php echo $roomrow->description;?></td><td><?php echo $roomrow->remark;?>
                    </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/brroomadmin/edit/<?php echo $roomrow->id;?>">編輯</a></td><td><!-- <a href="/at-cms/roomadmin/status/<?php echo $roomrow->id;?>">啟用</a> -->
                       <input type="checkbox" <?php
                        if($roomrow->status=="1"){
                            echo "checked";
                        }
                      ?> data-toggle="toggle" id="checkstatus<?php echo $roomrow->id;?>"  name="checkstatus<?php echo $roomrow->id;?>" class="togglenewclass" data-clickid="<?php echo $roomrow->id;?>"  onchange="checkToggle(this)"> 
                    </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({
        dom: 'Bfrtip',
        buttons: [
            // 'colvis'
        ]
    });
});
</script>

            <!-- end test datatable -->

            <!-- delete button -->
             <button type="button" class="btn btn-light" id="deletebutton" onclick="showdeletemodal()" data-toggle="" data-target="">
            <!-- <i class="fas fa-trash-alt mr-2" style="color:#7d4495"></i>  -->  
            <span style="color:#616161">遞交</span></button>   

            <!-- end delete button -->


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