 
<?php $__env->startSection('content'); ?>
<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">Properties</h1>
    </div>
</div>


<div id="map"></div>
<br/>

<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <?php if(session('status')): ?>
            <div class="alert alert-success">
                <?php echo e(session('status')); ?>

            </div>
            <?php endif; ?>

            <?php if(count($errors) > 0): ?>
            <div class="alert alert-danger">
                <strong>Whoops!</strong> There were some problems with your input.<br><br>
                <ul>
                    <?php foreach($errors->all() as $error): ?>
                    <li><?php echo e($error); ?></li>
                    <?php endforeach; ?>
                </ul>
            </div>
            <?php endif; ?>
            <div class="panel-heading">
                Properties 	<a href="<?php echo e(url('uadmin/properties/add')); ?>"> <i class="fa fa-plus fa-fw" style="float: right;" title="Add Property"></i></a>
            </div>
            <!-- /.panel-heading -->
            <div class="panel-body">
                <div class="dataTable_wrapper">
                    <table class="table table-striped table-bordered table-hover display nowrap" width="100%" id="dataTables-example2">
                        <thead>
                            <tr>
                                <th data-priority="1">Name</th>
                                <th>Type</th>
                                <th>Location</th>
                                <th>Last Inspection</th>
                                <th>Assigned Employees</th>
                                <th data-priority="2">Tickets</th>
                                <th data-priority="2">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php $count = 0; ?>
                            <?php foreach($properties as $property): ?>  
                            <?php if($property->status==1): ?>
                            <?php $count++; ?>
                            <?php if($count % 2 == 1): ?>
                            <tr class="odd">
                            <?php else: ?>
                            <tr class="even">
                                <?php endif; ?>
                                <td>
                                    <a href='<?php echo e(url('uadmin/properties/view/'.$property->id)); ?>'><?php echo e($property->name); ?>

                                    </a>
                                </td>
                                <td><?php echo e($property->type); ?></td>
                                <td>
                                    <?php if($property->address): ?>
                                    <a target='_blank' href='https://www.google.com/maps/place/<?php echo e($property->address); ?>,+<?php echo e($property->city); ?>,+<?php echo e($property->state); ?>+<?php echo e($property->zip); ?>'>
                                        <p><?php echo e($property->address); ?> | <?php echo e($property->city.', '.$property->state.' '.$property->zip); ?></p>
                                    </a>
                                    <?php else: ?>
                                    <a target='_blank' href='https://www.google.com/maps/place/<?php echo e($property->coordinates); ?>'>
                                        <p><?php echo e($property->coordinates); ?></p>
                                    </a>
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <?php if($property->last_inspection): ?>
                                    <?php echo e($property->last_inspection); ?>

                                    <?php else: ?>
                                    --
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <?php if($property->users): ?>
                                    <?php echo e($property->users); ?>

                                    <?php else: ?>
                                    --
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <?php if(count($property->active_tickets) > 0): ?>
                                        <a href='<?php echo e(url('uadmin/properties/tickets/view/'.$property->active_tickets[0]->id)); ?>'>
                                            <?php echo e(count($property->active_tickets).' Active'); ?>

                                        </a>
                                    <?php else: ?>
                                    --
                                    <?php endif; ?>
                                </td>
                                <td style="text-align: center;">
                                    <a href='<?php echo e(url('uadmin/properties/view/'.$property->id)); ?>'>
                                        <i class="fa fa-edit fa-fw" style="text-align: left;"></i>
                                    </a>
                                </td>
                            </tr>
                            <?php endif; ?>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('extras'); ?>
	<!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/t/bs/pdfmake-0.1.18,dt-1.10.11,b-1.1.2,b-flash-1.1.2,b-html5-1.1.2,b-print-1.1.2/datatables.min.css"/>
    
    <!-- DataTables Responsiveness CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css"/>

    <style>
    	a:hover{
    		text-decoration: none;
    	}
    	.odd .subBack {
    		background-color: #f0fcff;
    	}
    	.even .subBack {
    		background-color: #ecf7fa;
    	}
    	.floatLeft
    	{
    		float: left;
    	}

        .dtr-data{
            display: block;
        }

    </style>

    <style>
    /* Always set the map height explicitly to define the size of the div
    * element that contains the map. */
    #map {
        height: 500px;
        width: 100%;
    }

    @media (min-width: 650px)
    {
        .map-window {
            max-width: 500px;
        }
    }

    @media (max-width: 650px)
    {
        .map-window {
            max-width: 250px;
        }
    }
    </style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('bottom'); ?>

    <!-- DataTables JavaScript -->
	<script type="text/javascript" src="https://cdn.datatables.net/t/bs/pdfmake-0.1.18,dt-1.10.11,b-1.1.2,b-flash-1.1.2,b-html5-1.1.2,b-print-1.1.2/datatables.min.js"></script>
     
    <!-- DataTables Responsiveness JavaScript -->
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>

    <!-- Page-Level Demo Scripts - Tables - Use for reference -->
    <script>
    $(document).ready(function() {
    var table1 =    $('#dataTables-example2').dataTable( {
					"pageLength": 50,
					"order": [ 3, 'desc' ],
					"stateSave" : false,
					"scrollX" : window.innerWidth < 800 ? true : false,
                    "responsive": true
        } );  
    });
    
    if ( typeof $.fn.dataTable == "function" && typeof $.fn.dataTableExt.fnVersionCheck == "function" && $.fn.dataTableExt.fnVersionCheck('1.9.2')/*older versions should work too*/ )
    {
        $.fn.dataTableExt.oApi.clearSearch = function ( oSettings )
        {
     
            var table = this;
             
            //no image file needed, css embedding must be supported by browser
            var clearSearch = $('<i class="fa fa-times-circle-o fa-fw" style="vertical-align:text-bottom;cursor:pointer;color: gray;"></i>');
            $(clearSearch).click( function ()
                    {
                          table.fnFilter('');
                    });
            $(oSettings.nTableWrapper).find('div.dataTables_filter').append(clearSearch);
            $(oSettings.nTableWrapper).find('div.dataTables_filter label').css('margin-right', '-16px');//16px the image width
            $(oSettings.nTableWrapper).find('div.dataTables_filter input').css('padding-right', '16px');
        }
     
        //auto-execute, no code needs to be added
        $.fn.dataTable.models.oSettings['aoInitComplete'].push( {
            "fn": $.fn.dataTableExt.oApi.clearSearch,
            "sName": 'whatever'
        } );
    }
    </script>


    <script>
    var properties = Object.values(<?php echo json_encode($properties); ?>);
    var geocoder;
    var map;
    var icons;
    var infowindow;

    function initMap() {
        geocoder = new google.maps.Geocoder();

        var latlng = new google.maps.LatLng(39.3210, -111.5);
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 6,
            center: latlng
        });

        infowindow = new google.maps.InfoWindow({
                content: "Hello"
        });

        icons = {
            Building: {
                url: 'https://png.icons8.com/color/50/000000/building.png',
                scaledSize: new google.maps.Size(32, 32),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(16, 32)
            },
            Tower: {
                url: "https://png.icons8.com/color/50/000000/radio-tower.png",
                scaledSize: new google.maps.Size(36, 36),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(18, 36)
            },
            Cabinet: {
                url: "https://png.icons8.com/color/50/000000/wardrobe.png",
                scaledSize: new google.maps.Size(32, 32),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(16, 32)
            },
            Colocation: {
                url: "https://png.icons8.com/color/50/000000/server.png",
                scaledSize: new google.maps.Size(36, 36),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(18, 36)
            },
            MobileGenerator: {
                url: "https://png.icons8.com/color/50/000000/engine.png",
                scaledSize: new google.maps.Size(36, 36),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(18, 36)
            },
        };

        setMarkers();
    }

    function setMarkers() {
        for (var i = 0; i < properties.length; i++) {
            var property = properties[i];
            
            if(property.lat && property.lng){
                var location = {lat: property.lat, lng: property.lng}

                property.notifications='No notifications.';

                if(property.address&&property.city&&property.state){
                    property.full_address = property.address+' '+property.city+', '+property.state+' '+property.zip;
                }else{
                    property.full_address = property.lat+', '+property.lng
                }

                createMarker(property, location);
            }
        }
    }

    function createMarker(property, location) {
        var marker = new google.maps.Marker({
            map: map,
            icon: icons[property.type],
            position: location
        });

        var contentString = 
        '<div id="content" class="map-window">'+
            '<div id="siteNotice">'+'</div>'+
            '<h2 id="firstHeading">'+property.name+
            '   <div style="font-size:24px; display: inline;">('+property.type+')</div>'+
            '</h2>'+
            '<div id="bodyContent">'+
                '<h5 style="margin-top:20px;">Description</h5>'+
                '<p>'+property.description+'</p>'+
                '<h5 style="margin-top:20px;">Location</h5>'+
                '<a target="_blank" href="https://www.google.com/maps/place/'+property.full_address+'">'+
                '<p>'+property.full_address+'</p></a>'+
            '</div>'+
            '<a href="/uadmin/properties/view/'+property.id+'" style="font-size: 20px; float: left;font-weight:normal;margin-top:7px;margin-bottom:5px;">Go to Property</a>'+
        '</div>';

        marker.addListener('click', function() {
            infowindow.setContent(contentString);
            infowindow.open(map, marker);
        });
    }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVTavZdPavcRSoLr_yuRAQZTh40Y1yy-Q&callback=initMap">
    </script>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('residential.templates.uadmin', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>