<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;
    }

    .pac-container {
        z-index: 333333333333;
    }
</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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.6.2/flatly/bootstrap.min.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>


<section class="content">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link" 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 active" 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" id="profile" style="display:none;" role="tabpanel" aria-labelledby="profile-tab">
            <div class="container-fluid">
                <form method="post" id="customer_add" class="card" action="<?php echo base_url() . "users"; ?>">
                    <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">
                                <img id="uploadphoto" src="<?= base_url('assets/Slicing/userImage.png') ?>" alt="">
                                <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">
                                </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">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="">Status</label>
                                    <select class="form-select" name="status" id="">
                                        <option value="0">Inactive</option>
                                        <option value="1" 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="1">Hospitals</option>
                                        <option value="2">Nursing Homes</option>
                                        <option value="3">Retirement Homes</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="">Address</label>
                                    <input type="text" required="true" class="form-control" name="address" placeholder="Address" value="Block 21, Street J2, Capital City, UK">
                                </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 class="tab-pane fade" id="documents" style="display:none;" role="tabpanel" aria-labelledby="documents-tab">
            <div class="container-fluid">
                <div class="h-100">
                    <div class="d-flex flex-row justify-content-center align-items-center my-3">
                        <div class="form-floating">
                            <input type="text" class="form-control" id="floatingInputValue" placeholder="Location" value="70 Blue Bonnet Drive ,Brampton">
                            <label for="floatingInputValue">Caregiver Home</label>
                        </div>
                        <div class="form-floating my-3 mx-2">
                            <input type="text" class="form-control" id="floatingInputValue" placeholder="Location" value="7281, Darvel Ave, Missisauga">
                            <label for="floatingInputValue">Client Home</label>
                        </div>
                    </div>
                    <div id="map-container-google-16" class="z-depth-1-half map-container-9" style="height: 400px">
                        <iframe src="https://maps.google.com/maps?q=40.7127837,-74.0059413&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" style="border:0" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade show active" id="cal" role="tabpanel" aria-labelledby="cal-tab">
            <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>

            <div class="container-fluid">
                <!-- <div class="d-flex flex-row justify-content-end">
                    <i class="fa-solid fa-circle-plus text-custom-blue fa-3x mt-2" id="addevent" style="cursor: pointer;"></i>
                </div> -->
                <div id="calendar"></div>
                <!-- </div> -->
            </div>
        </div>

        <div class="tab-pane fade" style="display:none;" id="preferred" role="tabpanel" aria-labelledby="preferred-tab">
            <div class="container-fluid">
                <div class="d-flex flex-row justify-content-end">
                    <ol class="float-right">
                        <button type="button" class="btn btn-sm bg-custom-blue text-white text-uppercase rounded-pill mt-1 p-2" data-toggle="modal" data-target="#preferredmodal">Add Staff</button>
                    </ol>
                </div>
                <div class="card">
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table id="custtbl" class="table card-table table-vcenter text-nowrap">
                                <thead>
                                    <tr>
                                        <th>Staff Name</th>
                                        <th>Email</th>
                                        <th>Phone</th>
                                        <th>Documents</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td> John Player</td>
                                        <td> teststaff@gmail.com</td>
                                        <td> 03322554411</td>
                                        <td> sampledoc.pdf <img src="<?= base_url('assets/Slicing/Icon-feather-download.png') ?>" alt=""></td>
                                        <!-- <td><a href="<?= base_url('staff/viewstaff') ?>"><i class="fa-solid fa-eye"></i></a></td> -->
                                    </tr>
                                    <?php
                                    if (!empty($customerlist)) {
                                        $count = 1;
                                        foreach ($customerlist["user"] as $id => $customerlists) {
                                    ?>
                                            <tr>
                                                <td> <?php echo output($count);
                                                        $count++; ?></td>
                                                <td> <?php echo output($customerlists['firstName']); ?></td>
                                                <td> <?php echo output($customerlists['phoneNumber']); ?></td>
                                                <td><?php echo output($customerlists['email']); ?></td>
                                                <td><?php echo output($customerlists['homeAddress']); ?></td>
                                                <td> <span class="badge <?php echo ($customerlists['isActive'] == '1') ? 'badge-success' : 'badge-danger'; ?> "><?php echo ($customerlists['isActive'] == '1') ? 'Active' : 'Inactive'; ?></span> </td>
                                            </tr>

                                    <?php }
                                    } ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </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[]" id="modalsendto" style="width: 10rem;" aria-placeholder="send to">
                            <option value=""></option>
                            <option value="All of the names of Staff">All of the names of Staff</option>
                            <option value="Preferred List">Preferred List</option>
                            <option value="General Pool">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">
            <form action="<?= base_url('users/addAssignment/' . $id) ?>" method="post">
                <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="staffId" placeholder="Staff">
                                <option value="">Staff</option>
                                <?php
                                foreach ($staffs as $staffId => $staffData) {
                                ?>
                                    <option value="<?= $staffId; ?>"><?= $staffData['firstName'] . " " . $staffData['lastName'] ?></option>
                                <?php
                                }
                                ?>
                            </select>
                        </div>
                        <div class="col-6 my-1">
                            <select class="form-select" name="serviceId" placeholder="Service">
                                <option value="">Service</option>
                                <?php
                                foreach ($services as $serviceId => $serviceData) {
                                ?>
                                    <option value="<?= $serviceId; ?>"><?= $serviceData['name'] ?></option>
                                <?php
                                }
                                ?>
                            </select>
                        </div>
                        <input type="hidden" name="sendto[]" id="hiddensendto">
                        <input type="hidden" name="issueDate" id="hiddendate">
                        <div class="col-12 my-1">
                            <select class="form-select" name="facilityAddress" id="selectaddress">
                                <option value="" disabled>Facility Address</option>
                                <option value="<?= $client['address'] ?>"><?= $client['facilityName'] ?></option>
                                <option value="newAddress">New Address</option>
                            </select>
                        </div>
                        <div class="col-6 my-1" id="starttimez">
                            <input type="text" class="form-control " id="start_time" name="starttime" placeholder="Start Time">
                        </div>
                        <div class="col-6 my-1" id="endtimez">
                            <input type="text" class="form-control " id="end_time" name="endtime" placeholder="End time">
                        </div>
                        <div class="col-12 my-1" id="addressdiv" style="display: none;">
                            <input type="text" id="pac-input-1" class="form-control" name="newAddress" placeholder="New Address">
                            <input type="hidden" name="lat" id="addresslat" value="<?= $client['lat']; ?>">
                            <input type="hidden" name="lng" id="addresslng" value="<?= $client['lng']; ?>">
                        </div>

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

<div class="modal" id="viewModal" 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">
            <button id="viewclose" type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <div class="modal-body d-flex flex-column justify-content-center align-items-center">
                <h3 id="viewAssignTitle"></h3>
                <p class="text-secondary"><span id="viewissuedate"></span></p>
                <div class="row">
                    <div class="row my-1" id="viewstaffs">
                    </div>
                    <div class="col-6 my-1">
                        <input type="text" class="form-control " id="viewstartTime" placeholder="Start Time">
                    </div>
                    <div class="col-6 my-1">
                        <input type="text" class="form-control " id="viewendTime" placeholder="End time">
                    </div>
                    <div class="col-12 my-1">
                        <input type="text" id="viewaddress" class="form-control" placeholder="Address">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function() {
        $(".fc-day-top").click(function() {
            $("#assignModal").modal("show");
        });
        $("#viewclose").click(function() {
            $("#viewModal").hide();
        });
        $("#modalsendto").on('change', function() {
            $("#hiddensendto").val(this.value);
        });

        // $("#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 src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.4/dayjs.min.js" integrity="sha512-Ot7ArUEhJDU0cwoBNNnWe487kjL5wAOsIYig8llY/l0P2TUFwgsAHVmrZMHsT8NGo+HwkjTJsNErS6QqIkBxDw==" crossorigin="anonymous" referrerpolicy="no-referrer" defer="defer"></script>

<script src="https://www.jqueryscript.net/demo/easy-time-picker-bootstrap/js/timepicker-bs4.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {

        $('#start_time, #end_time, #appt_time, #meet_time, #odd_time').timepicker({

        });

        var calendarEl = document.getElementById('calendar');
        var today = new Date();
        var dd = String(today.getDate()).padStart(2, '0');
        var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
        var yyyy = today.getFullYear();

        today = yyyy + '-' + mm + '-' + dd;
        calendarEvents = <?= json_encode($events); ?>;
        console.log(calendarEvents);

        // calendarEvents.forEach(element => {
        //     console.log(element);
        // });
        eventss = [];
        $.each(calendarEvents, function(key, value) {
            console.log(key);
            eventss.push({
                id: key,

                title: value.title,
                // url: 'http://google.com/',
                start: value.startTime
            });
        });
        console.log("myevents", eventss);

        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ['interaction', 'dayGrid'],
            defaultDate: today,
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: eventss,

            eventRender: function(info) {
                console.log(info);
                info.el.querySelector('.fc-title').innerHTML = "<b class='viewassignment' data-id='" + info.event.id + "'>" + info.event.title + "</b><br><span class='btn-del' data-id='" + info.event.id + "'><i class='fa fa-trash' aria-hidden='true'></i> </span>";

            }
        });

        calendar.render();

        $('body').on('click', '.btn-del', function() {
            //alert($(this).data('id'));
            //$(this).closest('.tb-row').remove();
            //var calendarEl = document.getElementById('calendar');
            // $('#calendar').fullCalendar('removeEvents', $(this).data('id'));
            var txt = $(this).data('id');
            $.post("<?php echo base_url() . 'users/deleteevent' ?>", {
                suggest: txt
            }, function(result) {

                var event = calendar.getEventById($(this).data('id'));
                event.remove();
            });

        });

        $('body').on('click', '.viewassignment', function() {
            var assignId = $(this).data('id');

            var today = new Date();
            calendarEvents = <?= json_encode($events); ?>;
            $.each(calendarEvents, function(key, value) {
                if (key == assignId) {
                    console.log(value);
                    $("#viewstartTime").val(value.starttime);
                    $("#viewendTime").val(value.endtime);
                    $("#viewAssignTitle").html(value.title);
                    $("#viewissuedate").html(value.issueDate);
                    if (value.facilityAddress == "newAddress") {
                        $("#viewaddress").val(value.newAddress);
                    } else {
                        $("#viewaddress").val(value.facilityAddress);
                    }
                    var staffhtml = "";
                    console.log(value.staffName);
                    $.each(value.staffId, function(staffid, data) {
                        staffhtml = staffhtml + '<div class="col-12">' + value.staffName[staffid] + ' : ' + data + ' </div>';
                    });
                    $("#viewstaffs").html(staffhtml);
                }
            });
            $("#viewModal").show();
        });
    });
</script>

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

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

    //btn-del


    function fetchDate(eventdate) {
        $("#hiddendate").val(eventdate);
        $(".text-secondary").text(eventdate);
    }
</script>