<?php /*----include header file----*/
require_once APPPATH."/views/common/header.php"; ?>

<!--<div class="row">
    <div class="col-lg-12">
        <div class="profile">
                <div class="avatar">
                    <img src="../assets/img/christian.jpg" alt="Circle Image" class="img-circle img-responsive img-raised">
                </div>
                <div class="name">
                    <h3 class="title">Charlie P.</h3>
                </div>
         </div>
    </div>
</div>
-->

<div class="main main-raised mainProfile">
  <div class="profile-content">
        <div class="row">
            <div class="profile">
                <div class="avatar">
                    <img src="http://54.218.78.31:50//img/christian.jpg" alt="Circle Image" class="img-circle img-responsive img-raised">
                </div>
                <div class="name">
                    <h3 class="title">Charlie P.</h3>
                </div>
            </div>
        </div>
    </div>
    
    <div class="profileInfo">
    	<h5>Personal Information</h4>
        <div class="profileInfo1 card">
            <div class="profileLeft">
                <span>Name: Charlie</span><br>
                <span>Email: Charlie</span><br>
                <span>Contact: +44-444444-4444</span><br>
                <span>D.O.B: 14-02-1991</span><br>
                <span>Gender: Male</span>
            </div>
            <div class="profileRight">
                <span>Device Name: Dell CA</span><br>
                <span>Device IMEI: 81754757889</span><br>
                <span>Device ID: 9989</span><br>
                <span>Timezone: GMT London</span>
            
            </div>
        </div>
    </div>
 
    
    <div class="profileInfo">
        <h5>Other Information</h4>
        <div class="profileInfo1 card">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae fermentum lectus, a dignissim elit. Nam enim lorem, pretium ac felis non, semper accumsan sem. Etiam placerat maximus venenatis. Phasellus condimentum lectus id pharetra porttitor. Aenean suscipit ornare aliquam. 
        </div>
    </div>
    
    <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: 155vh; height: 100vh;'></div>
    
    </div>
    
    <div class="row tableLWD">
            <table class="table table-striped table-bordered" cellpadding="1" cellspacing="1">
                <thead>
                    <tr>
                        <th>Number</th>
                        <th>Cost Center</th>
                        <th>Contract Area</th>
                        <th>Office</th>
                        <th>No. of LWD's</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>12442</td>
                        <td>IIVO Ltd.</td>
                        <td>Manchester</td>
                        <td>Lorem Ipsum Dolor</td>
                        <td>40</td>
                        <td>Active</td>
                        <td><a href="#">Edit</a> <a href="#">View</a></td>
                    </tr>
                    <tr>
                        <td>12443</td>
                        <td>Vodafone</td>
                        <td>London</td>
                        <td>Lorem Ipsum Dolor</td>
                        <td>0</td>
                        <td>Active</td>
                        <td><a href="#">Edit</a> <a href="#">View</a></td>
                    </tr>
                    <tr>
                        <td>12443</td>
                        <td>Vodafone</td>
                        <td>London</td>
                        <td>Lorem Ipsum Dolor</td>
                        <td>0</td>
                        <td>Active</td>
                        <td><a href="#">Edit</a> <a href="#">View</a></td>
                    </tr>
                    <tr>
                        <td>12443</td>
                        <td>Vodafone</td>
                        <td>London</td>
                        <td>Lorem Ipsum Dolor</td>
                        <td>0</td>
                        <td>Active</td>
                        <td><a href="#">Edit</a> <a href="#">View</a></td>
                    </tr>
                    <tr>
                        <td>12443</td>
                        <td>Vodafone</td>
                        <td>London</td>
                        <td>Lorem Ipsum Dolor</td>
                        <td>0</td>
                        <td>Active</td>
                        <td><a href="#">Edit</a> <a href="#">View</a></td>
                    </tr>
                    <tr>
                        <td>12443</td>
                        <td>Vodafone</td>
                        <td>London</td>
                        <td>Lorem Ipsum Dolor</td>
                        <td>0</td>
                        <td>Active</td>
                        <td><a href="#">Edit</a> <a href="#">View</a></td>
                    </tr>
                    <tr>
                        <td>12443</td>
                        <td>Vodafone</td>
                        <td>London</td>
                        <td>Lorem Ipsum Dolor</td>
                        <td>0</td>
                        <td>Active</td>
                        <td><a href="#">Edit</a> <a href="#">View</a></td>
                    </tr>
                     <tr>
                        <td>12443</td>
                        <td>Vodafone</td>
                        <td>London</td>
                        <td>Lorem Ipsum Dolor</td>
                        <td>0</td>
                        <td>Active</td>
                        <td><a href="#">Edit</a> <a href="#">View</a></td>
                    </tr>
                     <tr>
                        <td>12443</td>
                        <td>Vodafone</td>
                        <td>London</td>
                        <td>Lorem Ipsum Dolor</td>
                        <td>0</td>
                        <td>Active</td>
                        <td><a href="#">Edit</a> <a href="#">View</a></td>
                    </tr>
                     <tr>
                        <td>12443</td>

                        <td>Vodafone</td>
                        <td>London</td>
                        <td>Lorem Ipsum Dolor</td>
                        <td>0</td>
                        <td>Active</td>
                        <td><a href="#">Edit</a> <a href="#">View</a></td>
                    </tr>
                     <tr>
                        <td>12443</td>
                        <td>Vodafone</td>
                        <td>London</td>
                        <td>Lorem Ipsum Dolor</td>
                        <td>0</td>
                        <td>Active</td>
                        <td><a href="#">Edit</a> <a href="#">View</a></td>
                    </tr>
                     <tr>
                        <td>12443</td>
                        <td>Vodafone</td>
                        <td>London</td>
                        <td>Lorem Ipsum Dolor</td>
                        <td>0</td>
                        <td>Active</td>
                        <td><a href="#">Edit</a> <a href="#">View</a></td>
                    </tr>
                    
                </tbody>
            </table>
            
        </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',
            data: { lwd_id: <?= '006392'; ?> },
            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: 'A' });
                    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);*/

    }       
</script>
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario' async defer></script>