<div class="container mb-5">  
    
    <section class="container" style="padding-bottom: 1rem;">
        <div class="card bg-light-transparent">
            <div class="card-body">
                <div class="row">
                    <div class=" col-8 card-body">
                        <div class="card no-shadow">
                            <div class="card-body">
                                <div class="form-group row">
                                    <label class="col-lg-4">Date</label>							
            				        <div class="col-lg-8" >
            					       <input type="text" name="Date" class="datepicker form-control" id="newdate" onchange="enableNewBtn();">
                                       <input type="hidden" name="groupid" class="form-control" placeholder="group id" id="groupid">	
            				        </div>
                                </div>  
                                <div class="form-group row">
                                    <label class="col-lg-4">Department</label>
                                    <div class="col-lg-8">
                                        <select class="form-control select" name="dept" id="newdept" onchange="enableNewBtn();">
                                            <option value="-1">select department</option>
                                            <?php foreach ($departments as $dept): ?>
                                            <option  value="<?php echo $dept['id']; ?>"><?php echo $dept['name'].' ('.$dept['branch_name'].') ';?></option>
                                            <?php endforeach ?>                                                       
                                        </select>
                                    </div>                                          
                                </div>
                                <div class="form-group row">
                                    <label class="col-lg-4">Client / Destination</label>		 				
            				        <div class="col-lg-8" >
            					        <select class="form-control select" name="client" id="client" onchange="clientChoose(this.value)" placeholder="Select Client">
                                            <option value="-1">Select Client</option>
                                            <?php foreach ($customers as $cust): ?>
                                                <option value="<?php echo $cust->customer_id;?>"><?php echo $cust->name;?></option>
                                            <?php endforeach ?>	
                                                <option value="others">Others</option>															
            					        </select>
            				        </div><br>
            				        
                                </div>
                                <div class="form-group row">
                                    <div class="col-lg-8 offset-lg-4">
                                       <input type="text" class="form-control d-none" id="newclient" placeholder="Insert Destination">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-lg-4">Type</label>							
            				        <div class="col-lg-8" >
            					        <select class="form-control select" name="type" id="type">
                                            <option value="-1">Select Type</option>
                                            <?php foreach ($movementTypes as $type): ?>
                                            <option value="<?php echo $type->id;?>"><?php echo $type->movementType;?></option>                        
                                            <?php endforeach ?>							
            					        </select>
            				        </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-lg-4">Description</label>
                                        <div class="col-lg-8">
            				                <textarea rows="4" class="form-control" id="desc"></textarea>
                                        </div>
                                </div>
                                <div class="row">     
                                    <div class="col d-print-none">
                                        <a href="#" data-toggle="modal" data-target="#new" class="btn btn-info btn-block disabled" id="btn-new-staff">
                                            <span class="fa fa-plus"></span> Add Staff
                                        </a> 
                                    </div>
                                    <div class="col d-print-none">
                                        <a href="#" class="btn btn-info btn-block disabled" id="btnSave">
                                            <span class="fa fa-save"></span> Save
                                        </a> 
                                        <a href="#" class="btn btn-info btn-block d-none disabled mt-0" id="btnEdit">
                                            <span class="fa fa-save"></span> Save changes
                                        </a> 
                                    </div>
                                    <div class="col d-print-none">
                                        <a href="<?php echo base_url('hr/movement/main_report')?>" target="_blank" class="btn btn-info btn-block disabled" id="btnPrint">
                                            <span class="fa fa-print"></span> Print
                                        </a>
                                    </div>
                                    <div class="col" id="copyMovement">
                                        <a href="#>" data-toggle="modal" data-target="#copy" class="btn btn-info btn-block disabled" id="btnCopy">
                                            <span class="fa fa-copy"></span> Copy Movement
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class=" col-4 card-body">
                        <div class="card no-shadow" style="height: 100%">
                            <div class="card-header text-center">
                                <b>Similar Movement</b>
                            </div>
                            <div class="card-body">
                                <div class="card-block mb-3">    
                                    <div class="card-body text-primary ">                    
                                        <p class="card-text">
                                            <ul id="similar-movement">

                                            </ul>
                                        </p>
                                    </div>
                                </div>     
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="container" style="padding-bottom: 1rem;">
        <div class="card bg-light-transparent">
            <div class="card-body">
                <div class="card no-shadow" >
                    <div class="card-body pt-3">
                        <div class="col d-print-none">
                            <a href="#" data-toggle="modal" data-target="#new" class="btn btn-info btn-block disabled" id="btn-new-staff">
                                <span class="fa fa-plus"></span> Add Staff
                            </a> 
                        </div>
                        <div class="col-12 table-responsive p-0 m-0 " style="margin-top:2rem ">
                            <table class="table table-bordered" width="100%">
        				        <thead>
        					       <th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="#: activate to sort column ascending" style="width: 0px;">
        						      #
        					       </th>
        					       <th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Company Code/ Cost Centre: activate to sort column ascending" style="width: 0px;">
        						      Date
        					       </th>
        					       <th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Company Name: activate to sort column ascending" style="width: 0px;">
        						      Name
        					       </th>
        					       <th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Salary/ Wage Month: activate to sort column ascending" style="width: 0px;">
        						      Time Out
        					       </th>
        					       <th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Employee Total Upload: activate to sort column ascending" style="width: 0px;">
        						      Time In
        					       </th>
        					       <th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Total Net Pay: activate to sort column ascending" style="width: 0px;">
        						      Remarks
        					       </th>
        					       <th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Action: activate to sort column ascending" style="width: 0px;">
        						      Action
        					       </th>						
        				        </thead>	
        				        <tbody id="tableBody">
                                    
        				        </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- edit modal -->
	<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  	     <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Edit Staff Movement</h5>
                        <a class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </a>
                </div>
                <div class="modal-body">                                
                    <div class="row">
                        <div class="col-3">
                            Name
                        </div>
                        <div class="col-1">
                            :
                        </div>
                        <div class="col-8" align="left">
                            <div class="form-group">
                                <input type="hidden" id="editTableId">
                                <input type="hidden" id="staffid">
                                <input class="form-control" type="text" placeholder="username" style="width: 100%" id="editName" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-3">
                            Date
                        </div>
                        <div class="col-1">
                            :
                        </div>
                        <div class="col-8" align="left">
                            <div class="form-group">
                                <input type="text" name="Date" class="form-control"  placeholder="2-4-2018" id="editDate" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-3">
                            Time Out
                        </div>
                        <div class="col-1">
                            :
                        </div>
                        <div class="col-8" align="left">
                            <div class="form-group">
                                <input placeholder="Select time" type="text" class="form-control timepicker" id="editTimeOut">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-3">
                            Time In
                        </div>
                        <div class="col-1">
                            :
                        </div>
                        <div class="col-8" align="left">
                            <div class="form-group">
                                <input placeholder="Select time" type="text" class="form-control timepicker" id="editTimeIn">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="saveEdit();">Save changes</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </div>
            </div> 
        </div>				
	</div>

    <!-- new modal -->
	<div class="modal fade" id="new" tabindex="-1" role="dialog" aria-labelledby="Add New" aria-hidden="true">
  		<div class="modal-dialog" role="document">
    		<div class="modal-content">
      			<div class="modal-header">
       				<h5 class="modal-title">Add New Staff</h5>
        			<a class="close" data-dismiss="modal" aria-label="Close">
          				<span aria-hidden="true">&times;</span>
        			</a>
      			</div>
      			<div class="modal-body">
                    <div class="row">
                        <div class="col-3">
                            Date
                        </div>
                        <div class="col-1">
                            :
                        </div>
                        <div class="col-8" align="left">
                            <div class="form-group">
                                <input type="text" name="Date" class="form-control" id="modal_new_date" readonly>
                            </div>
                        </div>
                    </div>
        			<div class="row">
                        <div class="col-3">
                            Department
                        </div>
                        <div class="col-1">
                            :
                        </div>
                        <div class="col-8" align="left">
                            <div class="form-group">
                                <input type="text" class="form-control" id="modal_new_department" readonly>
                                <!-- <select class="form-control" name="dept" readonly>
                                    <option value="-1"></option>
                                        <?php foreach ($departments as $dept): ?>
                                            <option  value="<?php echo $dept['id']; ?>"><?php echo $dept['name'].' ('.$dept['branch_name'].') ';?></option>
                                        <?php endforeach ?>                                                                
                                </select> -->
                            </div>
                        </div>
                    </div>
        			<div class="row">
        				<div class="col-3">
        					Name
        				</div>
        				<div class="col-1">
        					:
        				</div>
        				<div class="col-8" align="left">
        					<div class="form-group">
        						<select class="form-control select"  id="modal_new_user" style="width:100%;">
                                    <option value="-1">Select Staff</option>      
                                        <?php foreach ($users as $user): ?>
                                            <option value="<?php echo $user['id']?>" data-deptid="<?php echo $user['department_id']; ?>"><?php echo $user['name'];?></option>                                          
                                        <?php endforeach ?>                                         
                                </select>
        					</div>
        				</div>
        			</div>
        			<div class="row">
        				<div class="col-3">
        					Time Out
        				</div>
        				<div class="col-1">
        					:
        				</div>
        				<div class="col-8" align="left">
        					<div class="form-group">
                                <input placeholder="Select time" type="text" class="form-control timepicker" id="modal_new_timeout">
                            </div>
        				</div>
        			</div>
        			<div class="row">
        				<div class="col-3">
        					Time In
        				</div>
        				<div class="col-1">
        					:
        				</div>
        				<div class="col-8" align="left">
                            <div class="form-group">
                                <input placeholder="Select time" type="text"  class="form-control timepicker" id="modal_new_timein">
                            </div>
                        </div>
        			</div>
      			</div>
      			<div class="modal-footer">
      				<button type="button" class="btn btn-primary" id="btnAdd" onclick="addStaff();">Add</button>
        			<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
     			</div>
    		</div> 
 		</div>
	</div>

    <div class="modal fade" id="copy" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Copy this movement to another date</h5>
                    <a class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </a>
                </div>
                <div class="modal-body">                                
                    <div class="row">
                        <div class="col-3">
                            Date
                        </div>
                        <div class="col-1">
                            :
                        </div>
                        <div class="col-8" align="left">
                            <div class="form-group">
                                <input type="text" name="Date" class="datepicker form-control" placeholder="2-4-2018" id="copyDate">
                            </div>
                        </div>
                    </div>        
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="btnNewCopy">Save changes</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </div>
            </div> 
        </div>
    </div>
</div>
<?php 
    $uri = $this->uri->segment(3);
    
    if($uri == null || $uri == 'index'){
        $this->load->view('scripts/add.php');
    }else{
        $this->load->view('scripts/edit.php'); 
    }
?>