<style>
    #map {height: 300px;}
    .search-wrapper{
        border-radius: 5px;
        border: .5px solid #dedede;
      }

      .cursor-pointer{
        padding-left: 0px;
        cursor: pointer;
      }

      ul{
        list-style:none;
        padding-left: 10px;
        padding-right: 10px;
        /*box-shadow: 0px 3px rgba(0,0,0,0.3);*/
      }

      li{
        display: block;
        padding: 10px;
        /*border-bottom: 1px solid #dedede;*/
      }

      li:hover{
        transition: all 0.5s ease;
        background-color: #ccc;
        opacity: .65;
      }
</style>



<section class="container" style="padding-bottom: 2rem;">
	<div class="card no-shadow">
        <form method="post" id="travelling_form">
            <div class="card-body">
                <h2><?php echo $Operation ?> Travelling Claim <small>(Submission <?php echo date('F Y',strtotime('01-'.$month.'-'.$year)) ?>)</small></h2>
                <hr>
                    <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 claimdate" name="date" id="date" autocomplete="off" onchange="formCheck()" onkeyup="formCheck()">
                                    <small><span class="text-danger" id="notice_date"></span></small>
                                </div> 
                            </div>

                            <div class="row">
                                <div class="col-lg-2">
                                    <label for="client">Client <span class="text-danger">*</span></label>
                                </div>
                                <div class="col-12 col-lg-10">
                                    <select class="form-control select" name="client" id="client" onchange="formCheck()">
                                        <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 ?>
                                            <option value="-2">Others</option>                                 
                                    </select>
                                    <small><span class="text-danger" id="notice_client"></span></small>

                                </div> 
                            </div>

                            <!-- new form -->
                            <div class="row form-group">
                                

                                <div class="col-lg-6">
                                    <h4>Departure</h4>
                                    <div class="row">
                                        
                                        <div class="col-lg-4">
                                            From <span class="text-danger">*</span>
                                        </div>
                                        <div class="col-lg-8">
                                            
                                            <div class="search-wrapper">
                                                
                                              <input type="text" id="search_departure_from" name="search_departure_from" onkeyup="findSuggestion()" onchange="formCheck()" class="form-control form-control-sm" width="100%;" autocomplete="off">
                                              <ul id="result_departure_from" style="margin-bottom:0px;"></ul>
                                            </div>
                                        </div>
                                    </div>
                                    <br>
                                    <div class="row">
                                        <div class="col-lg-4">
                                            To <span class="text-danger">*</span>
                                        </div>
                                        <div class="col">

                                            <div class="search-wrapper">
                                              <input type="text" id="search_departure_to" name="search_departure_to" onkeyup="findSuggestion2()" onchange="formCheck()" class="form-control form-control-sm" width="100%;" autocomplete="off">
                                              <ul id="result_departure_to" style="margin-bottom:0px;"></ul>
                                              
                                            </div>

                                        </div>
                                    </div>
                                    <br>
                                    <div class="row">
                                        <div class="col-lg-4">
                                            Distance : 
                                        </div>
                                        <div class="col">
                                            <div class="input-group mb-3">
                                              <input type="text" class="form-control form-control-sm" id="departure_distance" disabled>
                                              <input type="hidden" class="form-control form-control-sm" id="hidden_departure_distance" name="departure_distance">

                                              <!-- <div class="input-group-append">
                                                <span class="input-group-text">Kilometer</span>
                                              </div> -->
                                            </div>

                                        </div>
                                    </div>
                                    <br>
                                    <div class="row">
                                        <div class="col-lg-4">
                                            Travelling Type <span class="text-danger">*</span>
                                        </div>
                                        <div class="col">
                                            <select class="form-control" name="vehicle_departure">
                                                <?php foreach ($vehicles as $key => $vehicle): ?>
                                                    <option value="<?php echo $vehicle['id']; ?>"><?php echo $vehicle['type']; ?></option>
                                                <?php endforeach ?>
                                            </select>
                                        </div>
                                    </div>
                                </div>



                                <div class="col">   
                                    <h4>Return</h4>
                                    <div class="row">
                                        <div class="col-lg-4">
                                            From <span class="text-danger">*</span>
                                        </div>
                                        <div class="col">
                                            <div class="search-wrapper">
                                              <input type="text" id="search_return_from" name="search_return_from" onkeyup="findSuggestion3()" onchange="formCheck()" class="form-control form-control-sm" width="100%;" autocomplete="off">
                                              <ul id="result_return_from" style="margin-bottom:0px;"></ul>
                                            </div>

                                        </div>
                                    </div>
                                    <br>
                                    <div class="row">
                                        <div class="col-lg-4">
                                            To <span class="text-danger">*</span>
                                        </div>
                                        <div class="col">
                                            <div class="search-wrapper">
                                              <input type="text" id="search_return_to" name="search_return_to" onkeyup="findSuggestion4()" class="form-control form-control-sm" width="100%;" autocomplete="off">
                                              <ul id="result_return_to" style="margin-bottom:0px;"></ul>
                                            </div>

                                        </div>
                                    </div>
                                    <br>
                                    <div class="row">
                                        <div class="col-lg-4">
                                            Distance : 
                                        </div>
                                        <div class="col">
        
                                            <div class="input-group mb-3">
                                              <input type="text" class="form-control form-control-sm" id="return_distance" disabled>
                                              <input type="hidden" class="form-control form-control-sm" id="hidden_return_distance" name="return_distance" >

                                              <!-- <div class="input-group-append">
                                                <span class="input-group-text">Kilometer</span>
                                              </div> -->
                                            </div>

                                        </div>
                                    </div>
                                    <br>
                                    <div class="row">
                                        <div class="col-lg-4">
                                            Travelling type 
                                        </div>
                                        <div class="col">
                                            <select class="form-control" name="vehicle_return">
                                                <?php foreach ($vehicles as $key => $vehicle): ?>
                                                    <option value="<?php echo $vehicle['id']; ?>"><?php echo $vehicle['type']; ?></option>
                                                <?php endforeach ?>
                                            </select>
                                        </div>
                                    </div>
                                </div>


                            </div>
                            <!-- new form -->


                            <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" onchange="formCheck()" onkeyup="formCheck()"></textarea>
                                </div> 
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group row">
                        <label for="zone" class="col-lg-2">Zone <span class="text-danger">*</span></label>
                        <div class="col">
                            <select class="form-control" name="zone" id="zone" onchange="formCheck()">
                                <option value="-1">Choose Zone</option>
                                <?php foreach ($zones as $key => $row): ?>
                                    <option value="<?php echo $row['id']; ?>"><?php echo $row['zone']; ?></option>
                                <?php endforeach ?>
                            </select>
                        </div>                        

                    </div>

                    <div class="row">
                        <div class="col">
                            <small><span class="text-danger" id="notice_zone"></span></small>
                        </div>
                    </div>

                    <span class="text-danger font-italic"><small>[NOTES : ] * require</small></span>
                    <br>
                    <small><span class="text-danger font-italic" id="notice_items"></span></small>

                <div class="card-body">
                    <h5>Staff Movement</h5>
                    <div class="table-responsive">
                        <table class="table-bordered" 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 id="table-staff-movement-body">
                                <!-- <tr>
                                    <td class="text-center p-3">1</td>
                                    <td class="text-center p-3">17-7-2018</td>
                                    <td class="text-center p-3"><a href="#">Field work</a></td>
                                    <td class="text-center p-3">2:00 PM </td>
                                    <td class="text-center p-3">5:00 PM </td>
                                    <td class="text-center p-3">Holiday Berhad</td>
                                    <td class="text-center p-3">Salihin Consulting Group Sdn. Bhd.</td>
                                </tr> -->
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
            <div class="card-footer bg-white">
                <div class="btn-group float-right mb-3 ">
                    <button type="button" class="btn btn-info">Cancel</button>
                    <button type="submit" class="btn btn-light text-primary" id="saveBtn"><i class="fas fa-save text-info" style="color: blue"></i> Save</button>
                </div>
            </div>
        </form>
    </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">
                    <div class="row">
                        <div class="col">
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover" width="100%">
                                    <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>
            </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">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" id="additionalItemForm">
                <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" autocomplete="off"></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" autocomplete="off">
                        </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" autocomplete="off">
                        </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" name="amount" autocomplete="off">
                        </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="submit" 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 edit item -->

<div class="modal fade" id="modal_edit_item" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Item</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="post" id="editItemModal">
                <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="itemEdit">
                                <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="descriptionEdit" cols="30" rows="3" autocomplete="off"></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="measurementEdit" autocomplete="off">
                        </div>
                        <div class="col-lg-1">
                            <label for="unit">Unit</label>
                        </div>
                        <div class="col">
                            <input type="text" class="form-control" name="unit" id="unitEdit" autocomplete="off">
                        </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" name="amount" autocomplete="off">
                        </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="submit" 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>

<script>
    var claim_date; 
    var items = [];

    var claim_year = <?php echo $this->uri->segment(4); ?>; //2018
    var claim_month = <?php echo $this->uri->segment(5); ?>; //8
    var date = new Date();
    var full_start_date = date.setFullYear(claim_year,claim_month-1 , 1);
    var full_end_date = date.setFullYear(claim_year,claim_month,1);

    var start_claim = moment(full_start_date).subtract(2,'months').startOf('month').format('DD-MM-YYYY');
    var end_claim = moment(full_end_date).add(6,'days').format('DD-MM-YYYY');


    $(document).ready(function(){

        $( ".claimdate" ).datepicker({
            uiLibrary: 'bootstrap4',
            format: 'dd-mm-yyyy',
            autoclose: true,
            changeMonth: true, 
            changeYear: true,
            startDate :start_claim,
            endDate:end_claim
        });

        jQuery.support.cors = true; 
        $('#travelling_form').submit(function(event){
            event.preventDefault();
            is_pass     = formCheck();
            is_item     = itemCheck();

            if (is_pass && is_item) {
                
                //ajx req
                url     = '<?php echo base_url('hr/api/claim/createTravelClaim/'); ?>';
                type    = 'POST',
                data    = {
                    token       : '<?php echo $_SESSION['token']; ?>',
                    form        : JSON.stringify(formIdToInputObject('#travelling_form')),
                    items       : items,
                    year        : <?php echo ($this->uri->segment(4))?$this->uri->segment(4):''; ?>,
                    month       : <?php echo ($this->uri->segment(5))?$this->uri->segment(5):''; ?>,
                    user        : <?php echo ($this->uri->segment(6))?$this->uri->segment(6):''; ?>,
                    claim_id    : <?php echo ($this->uri->segment(7))?$this->uri->segment(7):''; ?>,
                };
                redirect = '<?php echo base_url('hr/claim/myClaimDetail').'/'.$this->uri->segment(4).'/'.$this->uri->segment(5).'/'.$this->uri->segment(6).'/'.$this->uri->segment(7).'/'; ?>';
                ajxRequest(url, type, data, redirect) ;
                //ajx req

            }else{
                iziToast.warning({
                    position:'bottomRight',
                    message: 'make sure all forms have been filled and upload your attachments'
                });
            }
        });

        $('#additionalItemForm').submit(function(event){
            event.preventDefault();
            var input = formIdToInputObject('#additionalItemForm');
            $("#additionalItemForm")[0].reset();
            console.log(input);
            items.push(input);
            populateItems();
        });

    });

    //form checking 
    // function attachmentCheck(){
    //     if(attachments.length > 0){
    //         $('#notice_attachment').empty();
    //         return true;
    //     }else{
    //         $('#notice_attachment').html('Please upload attachment');
    //         return false;
    //     }
    // }

    function itemCheck(){
        if (items.length > 0) {
            $('#notice_items').empty();
            return true;
        }else{
            $('#notice_items').html('Please add items to claims');
            return false;
        }
    }

    function reqStaffMovementData() {
        $('#table-staff-movement-body').empty();
        //create request to the database...
        // validating staffmovement information with information entered 
        // not necessarily all movement appears here can be claimed
    }

    function formCheck(){
        var is_filled = true;
        var input = formIdToInputObject('#travelling_form');
        
        // console.log(input);

        //checking if all input filled
        $.each(input, function(index,value){
            if(value.length <= 0){
                is_filled = false;
                // console.log('operation failure : input fields empty for input '+index);
            }
        });

        //validating date
        if(input.date.length > 0){
            if(moment(input.date,'DD-MM-YYYY',true).isValid() == false){
                is_filled = false;
                // console.log('operation failure : invalid date');
                $('#notice_date').html('Please enter a valid date format : day-month-year (<?php echo date('d-m-Y'); ?>) ');
            }else{
                $('#notice_date').empty();

                // date --operation to create staff movement table
                 if(claim_date){
                    if(moment(claim_date).isSame(input.date)){
                        //do nothing
                    }else{
                        reqStaffMovementData();
                    }
                }else{
                    claim_date = input.date;
                    reqStaffMovementData();
                }
                // date --operation to create staff movement table

            }
        }

        if(input.client == -1){
            $('#notice_client').html('Please select a client');
        }else{
            $('#notice_client').empty();
        }

        if(input.zone == -1){
            $('#notice_zone').html('Please select a zone');
        }else{
            $('#notice_zone').empty();
        }

        if(is_filled){
            $('#saveBtn').removeAttr('disabled');
        }else{
            $('#saveBtn').attr('disabled','disabled');
        }

        return is_filled;
    }


    function populateItems() {
        console.log('destroy a datatable and recreate it back');
        console.log(items);

        var table   = $('.table').DataTable();
            table.clear().draw();

        $.each(items,function(index,value){
            console.log(value);
            var rowCount = table.data().count();
            table.row.add({
                0   : ++rowCount,
                1   : value.description,
                2   : value.measurement,
                3   : value.unit,
                4   : value.amount,
                5   : '<div class="btn-group">\
                            <button class="btn btn-warning btn-sm text-white" onclick="editMeasurement()"><i class="fas fa-edit"></i></button>\
                            <button class="btn btn-danger btn-sm" onclick="deleteMeasurement()"><i class="fas fa-trash-alt"></i></button>\
                        </div>'
            }).draw();
        });

    }

    function deleteMeasurement() {
        toastConfirm('Are you sure you want to delete this items ?',function() {
            // body...
            console.log('delete..');
        });
    }

    function editMeasurement() {
        $('#modal_edit_item').modal('toggle');
        console.log('editing measurement');
    }
</script>
<script>
      var text = '';
      var search_input = 0;

      function findSuggestion(){
        $('#departure_distance').val('0 km');

        $('#result_departure_from').empty();
        search_input = 0;
        text = $('#search_departure_from').val();
        initService();
      }

      function findSuggestion2(){
        $('#departure_distance').val('0');
        $('#hidden_departure_distance').val('0');

        $('#result_departure_to').empty();
        search_input = 1;
        text = $('#search_departure_to').val();
        initService();
      }

      function findSuggestion3(){
        $('#return_distance').val('0');
        $('#hidden_return_distance').val('0');

        $('#result_return_from').empty();
        search_input = 2;
        text = $('#search_return_from').val();
        initService();
      }

      function findSuggestion4(){
        $('#return_distance').val('0 km');

        $('#result_return_to').empty();
        search_input = 3;
        text = $('#search_return_to').val();
        initService();
      }

      function fillSearch(elem) {
          var place = $(elem).data('value');
          var box = $(elem).data('input');
          if(box == 0){
            $('#search_departure_from').val(place);
            $('#result_departure_from').empty();
            getDepartureDistance();
          }

          if(box == 1){
            $('#search_departure_to').val(place);
            $('#result_departure_to').empty();
            getDepartureDistance();
          }

          if(box == 2){
            $('#search_return_from').val(place);
            $('#result_return_from').empty();
            getReturnDistance();
          }

          if (box == 3) {
            $('#search_return_to').val(place);
            $('#result_return_to').empty();
            getReturnDistance();
          }
      }

      function getDepartureDistance() {
        var from = $('#search_departure_from').val();
        var to   = $('#search_departure_to').val();

        if((from != '') && (to != '')){

            var service = new google.maps.DistanceMatrixService();
            service.getDistanceMatrix({
                origins:[from],
                destinations:[to],
                travelMode: 'DRIVING'
            },function callback(response,status){
                if(response.rows[0].elements[0].distance.text){
                    var distance = response.rows[0].elements[0].distance.text;
                }else{
                    var distance = 0;
                }
                $('#departure_distance').val(distance);
                $('#hidden_departure_distance').val(distance);
            });
        }    
      }

      function getReturnDistance() {
         var from = $('#search_return_from').val();
         var to   = $('#search_return_to').val();   

         if((from != '') && (to != '')){
            var service = new google.maps.DistanceMatrixService();
            service.getDistanceMatrix({
                origins:[from],
                destinations:[to],
                travelMode: 'DRIVING'
            },function callback(response,status){
               if(response.rows[0].elements[0].distance.text){
                    var distance = response.rows[0].elements[0].distance.text;
                }else{
                    var distance = 0;
                }
                $('#return_distance').val(distance);
                $('#hidden_return_distance').val(distance);
            });
        }
      }

      function initService(){

        var displaySuggestions = function(predictions, status) {

          if (status != google.maps.places.PlacesServiceStatus.OK) {
            return;
          }

          //departure from 
          if (search_input == 0) {
                predictions.forEach(function(prediction) {
                    $('#result_departure_from').append('<li class="cursor-pointer" \
                                                            data-value="'+prediction.description+'" \
                                                            data-input="'+search_input+'" \
                                                            onclick="fillSearch(this)" >\
                                                                <i class="fas fa-map-marker"></i> '+prediction.description+'\
                                                        </li>');
                  
                }); 
          };
          
          //departure to 
          if (search_input == 1) {
                predictions.forEach(function(prediction) {
                    $('#result_departure_to').append('  <li class="cursor-pointer" \
                                                            data-value="'+prediction.description+'" \
                                                            data-input="'+search_input+'" \
                                                            onclick="fillSearch(this)" > \
                                                                <i class="fas fa-map-marker"></i> '+prediction.description+'\
                                                        </li>');
                }); 
          };

          //return from 
          if (search_input == 2) {
                predictions.forEach(function(prediction) {
                    $('#result_return_from').append('   <li class="cursor-pointer" \
                                                            data-value="'+prediction.description+'" \
                                                            data-input="'+search_input+'" \
                                                            onclick="fillSearch(this)" >\
                                                                <i class="fas fa-map-marker"></i> '+prediction.description+'\
                                                        </li>');
                }); 
          };

          //return to 
          if (search_input == 3) {
                predictions.forEach(function(prediction) {
                    $('#result_return_to').append(' <li class="cursor-pointer" \
                                                        data-value="'+prediction.description+'" \
                                                        data-input="'+search_input+'" \
                                                        onclick="fillSearch(this)" > \
                                                            <i class="fas fa-map-marker"></i> '+prediction.description+'\
                                                    </li>');
                }); 
          };

        };

        var service = new google.maps.places.AutocompleteService();
        service.getQueryPredictions({ input: text}, displaySuggestions);
      }
</script>
<?php
    $this->load->view('hr/claim/scripts/google_map.php');
?>
