<?php $status = array('Pending', 'Confirmed', 'Cancelled', 'Wating For Online Payment') ?>
<?php $status_color = array('color:#FF9900;', 'color:#219921;', 'color:#D52229;', 'color:#FF9900;') ?>
<div class="buttons" style="margin: 10px 0px;">
    <div onclick="getPage('<?php echo site_url('gkpos/manage_delivery') ?>', 'online order')" class="col-lg-3 col-md-3 col-sm-3 col-xs-12 btn btn-danger gradient" style="font-size: 90%;" >Unassigned Jobs</div>
    <div onclick="getPage('<?php echo site_url('gkpos/manage_delivery/assigned') ?>', 'online order')" class="col-lg-3 col-md-3 col-sm-3 col-xs-12 btn  btn-success gradient" style="font-size: 90%;">Assigned Jobs</div>
    <div onclick="getPage('<?php echo site_url('gkpos/driver_account/') ?>', 'online order')" class="col-lg-3 col-md-3 col-sm-3 col-xs-12 btn btn-info gradient" style="font-size: 90%;" >Drivers' Account</div>
    <div onclick="getPage('<?php echo site_url('gkpos/add_driver') ?>', 'online order')" class="col-lg-3 col-md-3 col-sm-3 col-xs-12 btn  btn-primary gradient" style="font-size: 90%;" >Add New Driver</div>
</div>
<div class="modal-content-order-detail">
    <div class="clearfix"></div>
    <div class="modal-body">
        <form class="form-horizontal" action="<?php echo site_url('gkpos/save_driver') ?>" method="post" id="gkposDriverForm">
            <?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 table-bg-color" style="background: #00AEEF">
                <tr>
                    <td colspan="2"><span class="text-uppercase">Identity</span></td>
                    <td colspan="3"><span class="text-uppercase btn btn-info btn-sm btn-block gradient" onclick="getPage('<?php echo site_url('gkpos/list_driver') ?>', 'online order')">Driver List</span></td>
                </tr>
                <tr>
                    <td class="text-left" colspan="2">Name: <input type="text" class="form-control" name="name" autocomplete="off"></td>
                    <td class="text-left" colspan="2">Contact no: <input type="text" class="form-control" name="phone" autocomplete="off"></td>
                    <td class="text-left" colspan="1">Email: <input type="text" class="form-control" name="email" autocomplete="off"></td>
                </tr>
                <tr>
                    <td class="text-left" colspan="2">D.O.B: <input type="text" class="form-control user_date" name="dob" id="street_number" autocomplete="off"></td>
                    <td class="text-left" colspan="2">N.Ins: <input type="text" class="form-control" name="insurance" autocomplete="off"></td>
                    <td class="text-left" colspan="1">Join Date: <input type="text" class="form-control user_join_date" name="join_date" 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">Post Code: <input type="text" class="form-control" name="postcode" id="postal_code" autocomplete="off"></td>
                    <td class="text-left">Street: <input type="text" class="form-control field" name="street" id="route" autocomplete="off"></td>
                    <td class="text-left">City: <input type="text" class="form-control field" name="city" id="locality" autocomplete="off"></td>
                    <td class="text-left">state: <input type="text" class="form-control field" name="state" id="administrative_area_level_1" autocomplete="off"></td>
                    <td class="text-left">Country: <input type="text" class="form-control" name="country" id="country" 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="saveDriverInfo('gkposDriverForm')"></td></tr>
            </table>
        </form>

    </div>
</div>
<script type="text/javascript">
    jQuery(document).ready(function () {
        $(".user_date").datepicker({
            dateFormat: "dd/mm/yy",
            changeMonth: true,
            changeYear: true,
            minDate: "01/01/1970",
            maxDate: "31/12/2004"
        });
        $(".user_join_date").datepicker({
            dateFormat: "dd/mm/yy",
            changeMonth: true,
            changeYear: true,
        });
        $('[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 saveDriverInfo(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) {
                            getPage('<?php echo site_url('gkpos/list_driver') ?>', 'online order');
                        } else {
                            alert(response.message);
                        }
                    },
                });
            },
            errorClass: "has-error",
            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}
            },
            messages: {
                name: "Driver name, Please",
                phone: "Driver phone/mobile required",
            }
        });
    }
</script>
<style>
    .pac-container {
        z-index: 10000 !important;
    }
    .has-error{
        color: #FF0000;
    }
    #virtualKeyboard .button{
        width: 7.3%!important;
    }
</style>