<?php /*----include header file----*/
require_once APPPATH."/views/common/header.php"; 
//debug($profile);
?>

<div class="main main-raised mainProfile">
  <div class="profile-content">
        <div class="row">
            <div class="profile">
                <div class="avatar">
                    <?php
                        if( empty($profile->user_image) )
                        {
                            echo'<img src="http://54.218.78.31:50/dev//img/dashboardImage.png" alt="Circle Image" class="img-circle img-responsive img-raised">';
                        }
                        else
                        {
                            echo'<img src="http://54.218.78.31:50/dev/'.$profile->user_image.'" alt="Circle Image" class="img-circle img-responsive img-raised">';   
                        }
                    ?>
                </div>
                <div class="name">
                    <h3 class="title"><?= ucfirst($profile->fullname); ?></h3>
                </div>
            </div>
        </div>
    </div>
    
    <div class="profileInfo">
    	<h5><b>Personal Information </b></h5>
        <div class="profileInfo1 card">
            <div class="profileLeft">
                <span><b>Name:</b><br> <?= ucfirst($profile->loginname); ?></span><br>
                <span><b>Email:</b><br> <?= $profile->emailaddress; ?></span><br>
                <span><b>Contact:</b><br> <?= $profile->number; ?></span><br>
                <input type="hidden" name="refID" id="refID" value="<?= $profile->ref; ?>">
               <!--  <span>D.O.B: 14-02-1991</span><br>
                <span>Gender: Male</span> -->
            </div>
            <div class="profileRight">
                <span><b>Device IMEI:</b><br> <?= $profile->imei_no; ?></span><br>
                <span><b>Device Type:</b><br> <?= $profile->device_type; ?></span><br>
                <span><b>Timezone:</b><br> GMT London</span>
            
            </div>
        </div>
    </div>
 
    
    <div class="profileInfo">
        <h5><b>Escalation Detail</b><a href="javascript:void(0)" onclick="return get_current_location()" id=""><i class="fa fa-map-marker" aria-hidden="true"></i>
</a> </h5>
        <div class="profileInfo1 card">
            <table class="table table-striped table-hover" width="100%">
                <thead class="text-danger">
                    <th>
                        Name
                    </th>
                    <th>
                        Mobile
                    </th>
                </thead>
                <tbody>
                <tr>
                    <td>
                        <?php if( !empty($escalation->name1) ){ echo ucfirst($escalation->name1); }else { echo 'Name 1'; } ?>
                    </td>
                     <td>
                        <?= (!empty($escalation->phone_number1))? $escalation->phone_number1: '000000'; ?>
                    </td>
                </tr>
                <tr>
                    <td>
                        <?= (!empty($escalation->name2))? ucfirst($escalation->name2): 'Name 2' ; ?>
                    </td>
                     <td>
                        <?= (!empty($escalation->phone_number2))? $escalation->phone_number2: '000000'; ?>
                    </td>
                </tr>
                <tr>
                    <td>
                        <?= (!empty($escalation->name3))? ucfirst($escalation->name3): 'Name 3' ; ?>
                    </td>
                     <td>
                        <?= (!empty($escalation->phone_number3))? $escalation->phone_number3: '000000'; ?>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    
    <div class="row">
        <div class="boxMap row">
            <!-- <iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d13721.960560861044!2d76.79711345000001!3d30.704618449999998!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1500552114918" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> -->
            <div id='myMap' style='width: 100%; height: 100vh;'></div>

        </div>
    </div>
    
        <div class="row">
            <div class="col-sm-12">
                <table id="example" class="table table-striped table-bordered dataTable no-footer">
                   <thead>
                       <th>Date TIme</th>
                       <th>Latitude</th>
                       <th>Longitude</th>
                       <th>Message Type</th>
                       <th>Status</th>
                       <th>Postition Date Time</th>
                       <th>Position Type</th>
                   </thead>
                   <tbody>
                        <?php
                            if( !empty($event_log) )
                            {
                                for( $m=0; $m<count($event_log); $m++ )
                                { 
                                ?>
                                <tr>
                                <td><?= $event_log[$m]['create_date']; ?></td>
                                <td><?= $event_log[$m]['lat']; ?></td>
                                <td><?= $event_log[$m]['long']; ?></td>
                                <td><?= $event_log[$m]['messageType']; ?></td>
                                <td><?= $event_log[$m]['status']; ?></td>
                                <td><?= $event_log[$m]['posdatatime']; ?></td>
                                <td><?= $event_log[$m]['postype']; ?></td>
                                </tr>
                                <?php
                                }
                            }
                        ?>
                   </tbody>
               </table>
           </div>
        </div>
   
   </div>


   </div>

<?php require_once APPPATH."/views/common/footer.php"; ?>

<script type='text/javascript'>
    var map;
    function loadMapScenario() {
        map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
            credentials: 'AhHCXycAMz-AzY85Zic6VYU_KjpzSwlRUEwehfbLIz6vPEHmXEb_8UYn1mxPb5qJ',
            mapTypeId: Microsoft.Maps.MapTypeId.road,
            zoom: 12
        });
        $.ajax({
            type: 'post',
            dataType: "json",
            url: '<?= base_url() ?>index.php/lwd/get_map_location/'+$('#refID').val(),
            //data: { lwd_id: <?= $profile->ref; ?> },
            success: function(result)
            {
                console.log(result);
                var pins = result;
                var i = 0;
                $.each(pins, function (index, pin) {
                    console.log(index);
                    var pinLocation = new Microsoft.Maps.Location(pin.lat, pin.long)
                    var NewPin = new Microsoft.Maps.Pushpin( pinLocation, {icon: 'https://www.bingmapsportal.com/Content/images/poi_custom.png', text: ''+i+'' });
                    map.entities.push(NewPin);
                    i++;
                });
            }
        });

            /*var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), { icon: 'https://www.bingmapsportal.com/Content/images/poi_custom.png',
            anchor: new Microsoft.Maps.Point(30.711935, -76.7262006), text: 'A' });
            map.entities.push(pushpin);*/

    }

    function get_current_location()
    {
        map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
            credentials: 'AhHCXycAMz-AzY85Zic6VYU_KjpzSwlRUEwehfbLIz6vPEHmXEb_8UYn1mxPb5qJ',
            mapTypeId: Microsoft.Maps.MapTypeId.road,
            zoom: 12
        });
        $.ajax({
        url: base_url+'/lwd/get_current_location',
        type: 'get',
        dataType: "json",
        data: { lwd_id : $('#refID').val() },
        success: function(result)
        {
            console.log(result);
            var pins = result;
            var i = 0;
           // $.each(pins, function (index, pin) {
                var pinLocation = new Microsoft.Maps.Location(result.lat, result.long)
                var NewPin = new Microsoft.Maps.Pushpin( pinLocation, {icon: 'https://www.bingmapsportal.com/Content/images/poi_custom.png', text: 'A' });
                map.entities.push(NewPin);
                //i++;
            //});
        }
    });
    }  
</script>
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario' async defer></script>