<style>
    #map {height: 300px;}
</style>

<section class="container" style="padding-bottom: 2rem;">
	<div class="card no-shadow">
        <div class="card-body">
            <h2>Edit Travelling Claim</h2>
            <hr>
            <form method="post" action="<?php echo base_url('hr/overtime/addOvertimeDetail') ?>">
                <div class="row">
                    <div class="col">
                        <div class="row form-group">
                            <div class="col-lg-2">
                                <label for="date">Travelling Date <span class="text-danger">*</span></label>
                            </div>
                            <div class="col">
                               <input type="text" class="form-control datepicker" name="date" id="date" autocomplete="off">
                            </div> 
                        </div>
                        <div class="row form-group">
                            <div class="col-lg-2">
                                <label for="client">Client <span class="text-danger">*</span></label>
                            </div>
                            <div class="col">
                                <select class="form-control select" name="client" id="client">
                                    <option value="-1">Select Client/ Location</option>
                                    <?php foreach ($clients as $key => $row ): ?>
                                        <option value="<?php echo $row->customer_id;?>"><?php echo $row->name;?></option>
                                    <?php endforeach ?>                                 
                                </select>
                            </div> 
                        </div>
                        <div class="row form-group">
                            <div class="col-lg-2">
                                <label for="task">Task <span class="text-danger">*</span></label>
                            </div>
                            <div class="col">
                                <textarea class="form-control" name="task" id="task" cols="30" rows="3" placeholder="Enter Task Description"></textarea>
                            </div> 
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-lg-2">Destination <span class="text-danger">*</span></label>
                    <div class="col-lg-9">
                        <input class="form-control" type="search" id="pac-input" type="text" placeholder="Search venue" aria-label="Search">
                        <!-- google map -->
                        <div id="map"></div>
                        <div id="infowindow-content">
                          <img src="" width="16" height="16" id="place-icon">
                          <span id="place-name"  class="title"></span><br>
                          <span id="place-address"></span>
                        </div>
                        <!-- google map -->
                    </div>
                </div>
                <div class="form-group row">
                    <label for="zone" class="col-lg-2">Zone</label>
                    <div class="col-lg-9">
                        <select class="form-control" name="zone" id="zone">
                            <option value="-1">Choose Zone</option>
                            <option value="0">Within office territory</option>
                            <option value="1">Within office zone</option>
                            <option value="2">West/east Malaysia</option>
                            <option value="3">Over sea</option>
                        </select>
                    </div>
                </div>
                <span class="text-danger font-italic"><small>[NOTES : ] * require</small></span>
            </form>
            <div class="card-body">
                <h5>Staff Movement</h5>
                <table class="table-bordered" style="width: 100%">
                    <thead>
                        <th class="text-center">#</th>
                        <th class="text-center">Date</th>
                        <th class="text-center">Movement Type</th>
                        <th class="text-center">Time Out</th>
                        <th class="text-center">Time In</th>
                        <th class="text-center">Client</th>
                        <th class="text-center">Location</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="text-center">1</td>
                            <td class="text-center">17-7-2018</td>
                            <td class="text-center"><a href="#">Field work</a></td>
                            <td class="text-center">2:00 PM </td>
                            <td class="text-center">5:00 PM </td>
                            <td class="text-center">Holiday Berhad</td>
                            <td class="text-center">Salihin Consulting Group Sdn. Bhd.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer bg-white">
            <div class="btn-group float-right">
                <button type="button" class="btn btn-info">Cancel</button>
                <button type="button" class="btn btn-light text-primary"><i class="fas fa-save text-info" style="color: blue"></i> Save</button>
            </div>
        </div>
    </div>
</section>

<section class="container" style="padding-bottom: 2rem;">
    <div class="card bg-light-transparent">  
        <div class="row text-right mt-3 mr-1">
            <div class="col">
                <button class="btn btn-info" data-toggle="modal" data-target="#modal_add_item"> <i class="fas fa-plus"></i> Add Item</button>
            </div>
        </div>  
        <div class="card-body">
            <div class="card no-shadow">
                <div class="card-body">
                    <table class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th rowspan="2" class="text-center">Item</th>
                                <th rowspan="2" class="text-center">Description</th>
                                <th colspan="2" class="text-center">Units of Measurement </th>
                                <th rowspan="2" class="text-center">Amount</th>
                                <th rowspan="2" class="text-center">Action</th>
                            </tr>
                            <tr>
                                <th class="text-center">Measurement</th>
                                <th class="border-right text-center">Unit</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>  
    </div>
</section>

<!-- modal add item -->

<div class="modal fade" id="modal_add_item" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Add Item</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="post" action="<?php echo base_url('hr/overtime/addOvertimeDetail') ?>">
                <div class="modal-body">
                    <div class="row form-group">
                        <div class="col-lg-3">
                            <label for="item">Item</label>
                        </div>
                        <div class="col">
                            <select class="form-control select" name="item" id="item">
                                <option value="-1">Select Item</option>
                                <?php if(!empty($item)) foreach($item as $key => $row): ?>
                                <option value="<?php echo $row['ID'] ?>"><?php echo $row['description'] ?></option>  
                                <?php endforeach ?>       
                            </select>
                        </div>
                    </div>  
                    <div class="row form-group">
                        <div class="col-lg-3">
                            <label for="description">Description</label>
                        </div>
                        <div class="col">
                            <textarea class="form-control" name="description" id="description" cols="30" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-lg-3">
                            <label for="measurement">Measurement</label>
                        </div>
                        <div class="col">
                            <input type="number" class="form-control" name="measurement" id="measurement">
                        </div>
                        <div class="col-lg-1">
                            <label for="unit">Unit</label>
                        </div>
                        <div class="col">
                            <input type="text" class="form-control" name="unit" id="unit">
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-lg-3">
                            <label for="amount">Amount (RM)</label>
                        </div>
                        <div class="col-lg-4">
                            <input type="number" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                   <div class="btn-group float-right">
                        <button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-light text-primary"><i class="fas fa-save text-info" style="color: blue"></i> Save</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- modal add item -->

<script>
    $(document).ready(function(){
    
    });

    function roomPackage(){
        if ($('#managernabove').is(':checked')) {
            $('#manager').removeClass('d-none');
        }else if($('#supervior&asst').is(':checked')){
            $('#manager').removeClass('d-none');
        }
    }
</script>

<?php
$this->load->view('hr/staff-movement/scripts/google_map.php');
?>
