<div id="CustomerForm" class="modal modal-message modal-danger fade" style="display: none;" aria-hidden="true">
    <div class="modal-dialog" style="left: 0%!important;  width: 90%!important; height: 95%">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">
                    <div class="col-lg-11 col-md-11 col-sm-11">Add Customer</div>
                    <div class="col-lg-1 col-md-1 col-sm-1 close" data-dismiss="modal" aria-label="Close" style="cursor: default"><i class="fa fa-close" aria-hidden="true"></i></div>
                </div>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="<?php echo site_url('gkpos/report/save_customer') ?>" method="post" id="gkposCustomerForm">
                    <?php if (!empty($customerInfo[0])): ?>
                        <input type="hidden" name="id" value="<?php echo $customerInfo[0]->phone ?>" id="CustomerID">
                    <?php endif; ?>
                    <table class="table table-bordered">
                        <tr>
                            <td colspan="5"><span class="text-uppercase">Identity</span></td>
                        </tr>
                        <tr>
                            <td class="text-left" colspan="2">Name: <input type="text" class="form-control" name="name" value="<?php !empty($customerInfo[0]) ? print $customerInfo[0]->name : '' ?>" autocomplete="off"></td>
                            <td class="text-left" colspan="1">Contact no: <input type="text" class="form-control" name="phone" value="<?php !empty($customerInfo[0]) ? print $customerInfo[0]->phone : '' ?>" autocomplete="off"></td>
                            <td class="text-left" colspan="1">Email: <input type="text" class="form-control" name="email" value="<?php !empty($customerInfo[0]) ? print $customerInfo[0]->email : '' ?>" autocomplete="off"></td>
                            <td class="text-left" colspan="1">Password: <input type="text" class="form-control" name="password" autocomplete="off"></td>
                        </tr>
                        <tr>
                            <td colspan="5">
                                <span class="text-uppercase">
                                    Location Details
                                </span>
                                <div class="input-group" style="width: 100%">
                                    <span class="input-group-addon"><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></span>
                                    <input id="autocompleteGPlace" placeholder="Enter your address to complete location details" onFocus="geolocate()" type="text" class="form-control" autocomplete="off"/>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-left">Postal Code: <input type="text" class="form-control" name="postcode" id="postal_code" value="<?php !empty($customerInfo[0]) ? print $customerInfo[0]->postcode : '' ?>" autocomplete="off"></td>
                            <td class="text-left">Street: <input type="text" class="form-control field" name="street" id="route" value="<?php !empty($customerInfo[0]) ? print $customerInfo[0]->street : '' ?>" autocomplete="off"></td>
                            <td class="text-left">City: <input type="text" class="form-control field" name="city" id="locality" value="<?php !empty($customerInfo[0]) ? print $customerInfo[0]->city : '' ?>" autocomplete="off"></td>
                            <td class="text-left">state: <input type="text" class="form-control field" name="state" id="administrative_area_level_1" value="<?php !empty($customerInfo[0]) ? print $customerInfo[0]->state : '' ?>" autocomplete="off"></td>
                            <td class="text-left">Country: <input type="text" class="form-control" name="country" id="country" value="<?php !empty($customerInfo[0]) ? print $customerInfo[0]->country : '' ?>" autocomplete="off"></td>
                        </tr>
                        <tr>
                            <td colspan="5"><span class="text-uppercase">House Info (optional)</span></td>
                        </tr>
                        <tr>
                            <td class="text-left" colspan="1">House: <input type="text" class="form-control field" name="house" id="street_number" value="<?php !empty($customerInfo[0]) ? print $customerInfo[0]->house : '' ?>" autocomplete="off"></td>
                            <td class="text-left" colspan="2">Floor/Apartment: <input type="text" class="form-control" name="floor_or_apt" value="<?php !empty($customerInfo[0]) ? print $customerInfo[0]->floor_or_apt : '' ?>" autocomplete="off"></td>
                            <td class="text-left" colspan="2">Building: <input type="text" class="form-control" name="building" value="<?php !empty($customerInfo[0]) ? print $customerInfo[0]->building : '' ?>" autocomplete="off"></td>
                        </tr>
                        <tr><td colspan="5"> <input class="form-submit-button mainsystembg2 waiting-bg img-responsive delivery-info-submit-btn" type="submit" name="submit_form" value="<?php echo $this->lang->line('gkpos_finished') ?>" onclick="saveCustomerInfo('gkposCustomerForm')"></td></tr>
                    </table>
                </form>
                <?php if ($this->config->item('is_touch') == 'enable'): ?>
                    <div class="main-keyboardbg">
                        <div id="virtualKeyboard"></div>
                    </div>
                <?php endif ?>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
<?php if ($this->config->item('is_touch') == 'enable') { ?>
            keyboard('virtualKeyboard');
<?php } ?>
    });
</script>
<script type="text/javascript">
    jQuery(document).ready(function () {
        addjqueryValidatorFunction();
        $('[data-toggle="tooltip-delivery-phone"]').tooltip();
        $.getScript('https://maps.googleapis.com/maps/api/js?key=<?php echo GOOGLE_API_KEY; ?>&libraries=places&callback=initAutocomplete', function (data, textStatus) {
            if (textStatus) {
                console.log(textStatus);
            }
        });
    });

</script>
<script>
    var placeSearch, autocomplete;
    var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
        postal_code: 'short_name'
    };
    function initAutocomplete() {
        autocomplete = new google.maps.places.Autocomplete((document.getElementById('autocompleteGPlace')), {types: ['geocode']});
        autocomplete.addListener('place_changed', fillInAddress);
    }
    function fillInAddress() {
        var place = autocomplete.getPlace();
        for (var component in componentForm) {
            document.getElementById(component).value = '';
            document.getElementById(component).disabled = false;
        }
        for (var i = 0; i < place.address_components.length; i++) {
            var addressType = place.address_components[i].types[0];
            if (componentForm[addressType]) {
                var val = place.address_components[i][componentForm[addressType]];
                document.getElementById(addressType).value = val;
            }
        }
    }
    function geolocate() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                var geolocation = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
                var circle = new google.maps.Circle({
                    center: geolocation,
                    radius: position.coords.accuracy
                });
                autocomplete.setBounds(circle.getBounds());
            });
        }

    }
    function saveCustomerInfo(formId) {
        
        $('#' + formId).validate({
            submitHandler: function () {
                var myform = document.getElementById(formId);
                var formdata = new FormData(myform);
                $.ajax({
                    url: $('#' + formId).attr('action'),
                    data: formdata,
                    cache: false,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    dataType: 'json',
                    success: function (response) {
                        if (response.success) {
                            if ($('#CustomerID').length > 0) {
                                $('.modal').modal('hide');
                                $('body').removeClass('modal-open');
                            }
                            $('#' + formId).find('input[type=text]').val('');
                            ALERT_TITLE="Success!";
                            alert(response.message);
                        } else {
                            set_feedback(response.message);
                        }
                    }
                });
            },
            errorClass: "has-error",
            wrapper: "li",
            highlight: function (e) {
                $(e).closest('td').addClass('has-error');
            },
            unhighlight: function (e) {
                $(e).closest('td').removeClass('has-error');
            },
            rules: {
                name: {
                    lettersonly: true,
                    required: true
                },
                phone: {
                    phone: true,
                    required: true
                },
                street: "required",
                postcode: {
                    required: true
                }
            },
            messages: {
                name: "<?php echo $this->lang->line('gkpos_valid_name_required') ?>",
                phone: "<?php echo $this->lang->line('gkpos_valid_phone_required') ?>",
                street: "<?php echo $this->lang->line('gkpos_customer_street_required') ?>",
                postcode: "<?php echo $this->lang->line('gkpos_customer_postcode_required') ?>",
            }
        });
    }
</script>
<style>
    .pac-container {
        z-index: 10000 !important;
    }
    .has-error{
        color: #FF0000;
    }
    #virtualKeyboard .button{
        width: 7.3%!important;
    }
</style>