<style>
    .map-container-9,
    .map-container-10,
    .map-container-11 {
        overflow: hidden;
        padding-bottom: 56.25%;
        position: relative;
        height: 0;
    }

    .map-container-9 iframe,
    .map-container-10 iframe,
    .map-container-11 iframe {
        left: 0;
        top: 0;
        height: 80%;
        width: 80%;
        margin-left: 10%;
        position: absolute;
    }
</style>


<!-- Required meta tags -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500&display=swap" rel="stylesheet">
<link rel="stylesheet" href=<?= base_url('assets/') . "calendar/fonts/icomoon/style.css" ?>>
<link href=<?= base_url('assets/') . 'calendar/fullcalendar/packages/core/main.css' ?> rel='stylesheet' />
<link href=<?= base_url('assets/') . 'calendar/fullcalendar/packages/daygrid/main.css' ?> rel='stylesheet' />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=<?= base_url('assets/') . "calendar/css/bootstrap.min.css" ?>>
<!-- Style -->
<link rel="stylesheet" href=<?= base_url('assets/') . "calendar/css/style.css" ?>>


<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<div id="map" class="hidden"></div>
<script>
    // This example requires the Places library. Include the libraries=places
    // parameter when you first load the API. For example:
    // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            center: {
                lat: 51.2715146,
                lng: -0.3953564
            },
            zoom: 11
        });
        var card = document.getElementById('pac-card');
        var input1 = document.getElementById('pac-input-1');
        var types = document.getElementById('type-selector');
        var strictBounds = document.getElementById('strict-bounds-selector');

        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);

        var autocomplete1 = new google.maps.places.Autocomplete(input1);

        autocomplete1.bindTo('bounds', map);

        autocomplete1.setFields(
            ['address_components', 'geometry', 'icon', 'name']);

        var infowindow = new google.maps.InfoWindow();
        var infowindowContent = document.getElementById('infowindow-content');
        infowindow.setContent(infowindowContent);
        var marker = new google.maps.Marker({
            map: map,
            anchorPoint: new google.maps.Point(0, -29)
        });

        autocomplete1.addListener('place_changed', function() {
            infowindow.close();
            marker.setVisible(false);
            var place = autocomplete1.getPlace();


            if (!place.geometry) {
                // User entered the name of a Place that was not suggested and
                // pressed the Enter key, or the Place Details request failed.
                window.alert("No details available for input: '" + place.name + "'");
                return;
            }

            // If the place has a geometry, then present it on a map.
            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(17); // Why 17? Because it looks good.
            }
            marker.setPosition(place.geometry.location);
            marker.setVisible(true);

            var address = '';
            console.log(place.address_components)
            if (place.address_components) {
                var latitude = place.geometry.location.lat();
                var longitude = place.geometry.location.lng();
                console.log("addresslat:" + latitude);
                console.log("addresslng:" + longitude);
                document.getElementById("addresslat").value = latitude;
                document.getElementById("addresslng").value = longitude;

                //infodetail
                //    $("#lat").val(latitude);
                //   $("#lng").val(longitude);


                address = [
                    (place.address_components[0] && place.address_components[0].short_name || ''),
                    (place.address_components[1] && place.address_components[1].short_name || ''),
                    (place.address_components[2] && place.address_components[2].short_name || '')
                ].join(' ');
            }
            // document.getElementById("infodetail").value = place.name;
            infowindowContent.children['place-icon'].src = place.icon;
            infowindowContent.children['place-name'].textContent = place.name;
            infowindowContent.children['place-address'].textContent = address;
            infowindow.open(map, marker);
        });


        // Sets a listener on a radio button to change the filter type on Places
        // Autocomplete2.
        function setupClickListener(id, types) {
            var radioButton = document.getElementById(id);
            radioButton.addEventListener('click', function() {
                autocomplete1.setTypes(types);
            });
        }

        setupClickListener('changetype-all', []);
        setupClickListener('changetype-address', ['address']);
        setupClickListener('changetype-establishment', ['establishment']);
        setupClickListener('changetype-geocode', ['geocode']);

        document.getElementById('use-strict-bounds')
            .addEventListener('click', function() {
                console.log('Checkbox clicked! New state=' + this.checked);
                autocomplete2.setOptions({
                    strictBounds: this.checked
                });
            });
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC16Tbzkes6aBNrdQBsIACs-UwyHrG07k4&libraries=places&callback=initMap" async defer></script>



<section class="content">
    <div class="container-fluid">
        <form method="post" enctype="multipart/form-data" id="customer_add" class="card" action="<?php echo base_url() . "users/updatecustomerdata/" . $id; ?>">
            <div class="card-body d-flex flex-column justify-content-center align-items-center">

                <div class="row">
                    <div class="d-flex flex-row justify-content-center align-items-center mb-3">
                        <?php if (!isset($client['image'])) { ?>
                            <img id="uploadphoto" src="<?= base_url('assets/Slicing/userImage.png') ?>" alt="">
                        <?php } else { ?>
                            <img id="uploadphoto" src="<?= $client['image']; ?>" style="height:200px;width:200px;" alt="">
                        <?php } ?>
                        <input type="file" id="image" name="image" style="display: none;" />
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label for="">First Name</label>
                            <input type="text" required="true" class="form-control" name="firstName" placeholder="First Name" value="<?= $client['firstName']; ?>">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label for="">Last Name</label>
                            <input type="text" required="true" class="form-control" name="lastName" placeholder="Last Name" value="<?= $client['lastName']; ?>">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label for="">Address</label>
                            <input type="text" id="pac-input-1" required="true" class="form-control" name="address" placeholder="Address" value="<?= $client['address']; ?>">
                            <input type="hidden" name="lat" id="addresslat" value="<?= $client['lat']; ?>">
                            <input type="hidden" name="lng" id="addresslng" value="<?= $client['lng']; ?>">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label for="">Phone Number</label>
                            <input type="text" required="true" class="form-control" name="phoneNumber" placeholder="phone number" value="<?= $client['phoneNumber']; ?>">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label for="">Email</label>
                            <input type="text" required="true" class="form-control" name="email" placeholder="email" value="<?= $client['email']; ?>">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label for="">Password</label>
                            <input type="text" required="true" class="form-control" name="password" placeholder="password" value="<?= $client['password']; ?>">
                        </div>
                    </div>

                </div>

                <button type="submit" class="btn btn-md selfalign-center rounded-pill bg-custom-blue text-white px-5"> Save</button>
            </div>
        </form>
    </div>
</section>


<script>
    $(function() {
        $(".fc-day-top").click(function() {
            $("#assignModal").modal("show");
        });

        $('#selectaddress').on('change', function() {
            if ($(this).val() == "newAddress") {
                $('#addressdiv').show();
            } else {
                $('#addressdiv').hide();
            }
        });

        $('.js-example-basic-multiple').select2();
    });
</script>



<script>
    $("#uploadphoto").click(function() {
        $("input[id='image']").click();
    });
</script>