<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;
    }
    #map{
        position: initial !IMPORTANT;
    }
</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>


<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 "  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 active" 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="documents"  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">
                    <div id="map"  style="position: initial !important;overflow: hidden;"></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[]" 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 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBSW22XgtNdyjJGUq3QeXAjwBT6tFP51tk&libraries=places&callback=initMap" async defer></script>
<script type="text/javascript">
   var users = <?php echo json_encode($tati); ?>;
   console.log(users);


   function initMap() {
      // const map = new google.maps.Map(document.getElementById("map"), {
      //   center: { lat: -34.397, lng: 150.644 },
      //   zoom: 8,
      // });
      var locations = users;
      /* var locations = [
  ['<b>Name 1</b><br>Address Line 1<br>Bismarck, ND 58501<br>Phone: 701-555-1234<br><a href="#" >Link<a> of some sort.', 46.8133, -100.7790, 4],
  ['<b>Name 2</b><br>Address Line 1<br>Fargo, ND 58103<br>Phone: 701-555-4321<br><a href="#" target="_blank">Link<a> of some sort.', 46.8772, -96.7894, 5]
];*/

      var map = new google.maps.Map(document.getElementById('map'), {
         zoom: 7,
         /* Zoom level of your map */
         center: new google.maps.LatLng(33.67253360017613, 72.99672263429596),
         /* coordinates for the center of your map */
         mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      var infowindow = new google.maps.InfoWindow();

      var marker, i;

      for (i = 0; i < locations.length; i++) {
         marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
           // icon: 'https://cdn-icons-png.flaticon.com/32/75/75689.png'
         });

         google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
               infowindow.setContent(locations[i][0]);
               infowindow.open(map, marker);
            }
         })(marker, i));
      }
   }
   window.initMap = initMap;
</script>

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

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