<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">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link active" href="<?php echo base_url('users/viewclient/' . $id . '/profile') ?>" type="button" role="tab" aria-controls="profile" aria-selected="false"><i class="fa-solid fa-user"></i> Profile</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link " href="<?php echo base_url('users/viewclient/' . $id . '/calander') ?>" id="cal-tab" type="button" role="tab" aria-controls="cal" aria-selected="true"><i class="fa-solid fa-calendar-check"></i> Calendar</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" href="<?php echo base_url('users/viewclient/' . $id . '/documents') ?>" type="button" role="tab" aria-controls="documents" aria-selected="true"><i class="fa-solid fa-location"></i> Track</a>
        </li>
        <li class="nav-item" role="presentation">
            <a href="<?php echo base_url('users/viewclient/' . $id . '/preferred') ?>" class="nav-link" type="button" role="tab"><i class="fa-solid fa-list"></i> Preferred List</a>
        </li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            <div class="container-fluid">
                <?php
                // echo "<pre>";
                // print_r($client);
                // echo "</pre>";
                ?>
                <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="">Facility Name</label>
                                    <input type="text" required="true" class="form-control" name="facilityName" placeholder="Facility Name" value="<?= $client['facilityName']; ?>">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="">Representative Full Name</label>
                                    <input type="text" required="true" class="form-control" name="representativeName" placeholder="Representative Name" value="<?= $client['representativeName']; ?>">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="">Status</label>
                                    <select class="form-select" name="isActive" id="">
                                        <option <?php if ($client['isActive'] == 0) echo "selected"; ?> value="0">Inactive</option>
                                        <option value="1" <?php if ($client['isActive'] == 1) echo "selected"; ?>>Active</option>
                                    </select>
                                    <!-- <input type="text" required="true" class="form-control" name="php" placeholder="Per Hr Price" value="200"> -->
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="">Category</label>
                                    <select class="form-select" name="category">
                                        <option value="" disabled>Category</option>
                                        <option value="Hospitals" <?php if ($client['category'] == "Hospitals") echo "selected"; ?>>Hospitals</option>
                                        <option value="Nursing Homes" <?php if ($client['category'] == "Nursing Homes") echo "selected"; ?>>Nursing Homes</option>
                                        <option value="Retirement Homes" <?php if ($client['category'] == "Retirement Homes") echo "selected"; ?>>Retirement Homes</option>
                                    </select>
                                </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="phone" placeholder="phone number" value="<?= $client['phone']; ?>">
                                </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>
        </div>



    </div>



</section>
<!-- /.content -->

<div class="modal hide fade" id="preferredmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none; z-index:1051;">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body d-flex flex-column justify-content-center align-items-center">
                <h3> Add to Preferred Staff</h3>
                <label for="">Choose Staff</label>
                <select class="js-example-basic-multiple" name="staffs[]" multiple="multiple" style="width: 10rem;">
                    <option value="0">John Player</option>
                    <option value="1">Staff 1</option>
                    <option value="2">Staff 2</option>
                    <option value="3">Staff 3</option>
                </select>
                <button type="button" class="btn btn-md bg-custom-blue rounded-pill mt-4" data-dismiss="modal">Proceed</button>
            </div>
        </div>
    </div>
</div>



<div class="modal hide fade" id="sendtomodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none; z-index:1051;">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body d-flex flex-column justify-content-center align-items-center">
                <h3> Send To</h3>
                <div class="row">
                    <div class="col-12 my-1">
                        <select class="js-example-basic-multiple" name="sendto[]" multiple="multiple" style="width: 10rem;" aria-placeholder="send to">
                            <!-- <option value="">Staff</option> -->
                            <option value="">All of the names of Staff</option>
                            <option value="">Preferred List</option>
                            <option value="">General Pool</option>
                        </select>
                    </div>
                </div>
                <button type="button" class="btn btn-md bg-custom-blue rounded-pill mt-4" data-dismiss="modal">Proceed</button>
            </div>
        </div>
    </div>
</div>



<div class="modal" id="assignModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;z-index:1050;">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body d-flex flex-column justify-content-center align-items-center">
                <h3>Assignment</h3>
                <p class="text-secondary">Saturday, 23rd July, 2022</p>
                <div class="row">
                    <div class="col-6 my-1">
                        <select class="form-select" name="staff" placeholder="Staff">
                            <option value="">Staff</option>
                            <option value="">Staff 1</option>
                            <option value="">Staff 2</option>
                            <option value="">Staff 3</option>
                        </select>
                    </div>
                    <div class="col-6 my-1">
                        <select class="form-select" name="service" placeholder="Service">
                            <option value="">Service</option>
                            <option value="">Service 1</option>
                            <option value="">Service 2</option>
                            <option value="">Service 3</option>
                        </select>
                    </div>
                    <div class="col-12 my-1">
                        <select class="form-select" name="address" id="selectaddress">
                            <option value="">Facility Address</option>
                            <option value="newAddress">New Address</option>
                        </select>
                    </div>
                    <div class="col-12 my-1" id="addressdiv" style="display: none;">
                        <input type="text" class="form-control" name="newAddress" placeholder="New Address">
                    </div>

                    <div class="col-6 my-1">
                        <button class="btn btn-sm rounded-pill bg-primary" data-toggle="modal" data-target="#sendtomodal">Send to Staff</button>
                    </div>
                </div>
                <button type="button" class="btn btn-md bg-custom-blue rounded-pill mt-4">Submit Now</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(function() {
        $(".fc-day-top").click(function() {
            $("#assignModal").modal("show");
        });
        // $("#addevent").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 src=<?= base_url('assets/calendar/') . "js/jquery-3.3.1.min.js" ?>></script> -->
<script src=<?= base_url('assets/calendar/') . "js/popper.min.js" ?>></script>
<script src=<?= base_url('assets/calendar/') . "js/bootstrap.min.js" ?>></script>

<script src=<?= base_url('assets/calendar/') . 'fullcalendar/packages/core/main.js' ?>></script>
<script src=<?= base_url('assets/calendar/') . 'fullcalendar/packages/interaction/main.js' ?>></script>
<script src=<?= base_url('assets/calendar/') . 'fullcalendar/packages/daygrid/main.js' ?>></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ['interaction', 'dayGrid'],
            defaultDate: '2020-02-12',
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: [{
                    title: 'All Day Event',
                    start: '2020-02-01'
                },
                {
                    title: 'Long Event',
                    start: '2020-02-07',
                    end: '2020-02-10'
                },
                {
                    groupId: 999,
                    title: 'Repeating Event',
                    start: '2020-02-09T16:00:00'
                },
                {
                    groupId: 999,
                    title: 'Repeating Event',
                    start: '2020-02-16T16:00:00'
                },
                {
                    title: 'Conference',
                    start: '2020-02-11',
                    end: '2020-02-13'
                },
                {
                    title: 'Meeting',
                    start: '2020-02-12T10:30:00',
                    end: '2020-02-12T12:30:00'
                },
                {
                    title: 'Lunch',
                    start: '2020-02-12T12:00:00'
                },
                {
                    title: 'Meeting',
                    start: '2020-02-12T14:30:00'
                },
                {
                    title: 'Happy Hour',
                    start: '2020-02-12T17:30:00'
                },
                {
                    title: 'Dinner',
                    start: '2020-02-12T20:00:00'
                },
                {
                    title: 'Birthday Party',
                    start: '2020-02-13T07:00:00'
                },
                {
                    title: 'Click for Google',
                    url: 'http://google.com/',
                    start: '2020-02-28'
                }
            ]
        });

        calendar.render();
    });
</script>

<script src=<?= base_url('assets/calendar/') . "js/main.js" ?>></script>

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