@extends('admin.master')
@section('content')
<section id="dashboard-content">
    <div id="relInstalacoes" class="col-xs-12 section-content">
        <h1>Instalações</h1>

        <div class="row">
            <div id="rli-content" class="col-xs-12">
                <div id="rli-mapa">
                    <div class="rli-mapa-content_wrapper box-content">
                        <div class="row">
                            <div id="rli-mapa-list" class="col-md-4">

                                <div id="rli-mapa-search">
                                    <span id="rli-mapa-search-wrapper">
                                        <input type="text" id="edtBuscarMapa" name="edtBuscarMapa">
                                        <span>
                                            <button id="btnBuscaMapa"><i class="fa fa-search"></i></button>
                                            <button id="btnLimparBuscaMapa"><i class="fa fa-times"></i></button>
                                        </span>
                                    </span>
                                </div>

                                <div id="rli-mapa-item-wrapper">
                                    @foreach($clientes as $dealership)
                                        @if($dealership->latitude && $dealership->longitude)
                                            <div class="rli-mapa-item" data-lat="{{ $dealership->latitude }}" data-lng="{{ $dealership->longitude }}" data-zoom="16">
                                                <div class="rli-mapa-item-info">
                                                    <b>{{$dealership->dealership}}</b>
                                                    <p>{{$dealership->email}}</p>
                                                    <p> {{ $dealership->city }}/{{ $dealership->state }} </p>
                                                    <p>{{$dealership->type['name']}}</p>
                                                </div>
                                                <div class="rli-mapa-item-image">
                                                    <img class="lazy" data-original="{{ url('uploads/avatar/'. $dealership->photo ) }}">
                                                </div>
                                                <div class="clearfix"></div>
                                            </div>
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                            <div id="rli-mapa-canvas" class="col-md-8">
                                <div id="map-canvas"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="rel-instalacoes" class="box-col-3">
                    <div class="rel-instalacoes-content_wrapper box-content">
                        <div class="row">
                            <div class="col-xs-12 rel-instalacoes-content_title box-title">
                                <h2 class="content-title title-preto">Resumo de Instalações</h2>
                            </div>
                            <div class="clearfix"></div>
                            <hr class="separator">
                            <div class="col-xs-12 rel-instalacoes-content_body">
                                <div class="row">
                                    @foreach($instalacoes as $estado => $cidades)

                                        <div class="col-xs-12 rel-instalacoes-item">
                                            <div class="row">
                                                <div class="col-xs-2 col-sm-1 col-md-3 col-lg-2 rel-instalacoes-item-label">
                                                    <div class="rel-instalacoes-item-label_icon"><span><strong>{{$estado}}</strong></span></div>
                                                </div>
                                                <div class="col-xs-10 col-ms-11 col-md-9 col-lg-10 rel-instalacoes-item-info">
                                                    <div class="rel-instalacoes-item-cidade">
                                                        <b>{{$cidades['total']}} Instalações</b>
                                                    </div>
                                                    @foreach($cidades['dados'] as $cidade)
                                                        <div>{{$cidade->city}} {{$cidade->total}}</div>
                                                    @endforeach

                                                </div>
                                            </div>
                                        </div>



                                    @endforeach

                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>



            </div>
        </div>


    </div>
</section>
@stop
@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB3cSys4VdsGTQG2TRqCNVx0ksDLU5Ck8Y"></script>
    <script src="{{asset('js/markerclusterer.js')}}"></script>
    <script type="text/javascript">

        try {
            jQuery(document).on('click', '.rli-mapa-item', function() {
                var lat = jQuery(this).data('lat');
                var lng = jQuery(this).data('lng');
                var zoom = jQuery(this).data('zoom');
                map.setZoom(zoom);
                map.setCenter({lat:lat, lng:lng});
                //map.panTo({lat:lat, lng:lng});
            });
        } catch(err) {
            console.log(err);
        };

        $(function() {
            $("img.lazy").lazyload({
                effect: "fadeIn",
                container: $("#rli-mapa-item-wrapper")
            });
        });


        $("#btnBuscaMapa").click(function() {
            var txt = $('#edtBuscarMapa').val();
            console.log(txt);

            $('.rli-mapa-item').each(function(){
                if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1){
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });

        });

        $("#btnLimparBuscaMapa").click(function() {
            $('#edtBuscarMapa').val('');
            $('.rli-mapa-item').each(function(){
                $(this).show();
            });


        });


        var map;

        var markerData = [];

        @foreach($clientes as $dealership)
            @if($dealership->latitude && $dealership->longitude)
                markerData.push({lat: {{$dealership->latitude}} , lng: {{$dealership->longitude}}, zoom: 16, name: '{{$dealership->dealership}}' });
            @endif
        @endforeach

        function initialize() {
            map = new google.maps.Map(document.getElementById('map-canvas'), {
                zoom: 10,
                center: {lat: -27.5936154, lng: -48.5463458}
            });
            var markers = [];
            markerData.forEach(function(data) {
                var newmarker = new google.maps.Marker({
                    map: map,
                    position: {lat:data.lat, lng:data.lng},
                    title: data.name
                });
                markers.push(newmarker);
            });




            var options = {
                imagePath: '/js/images/m'
            };

            var markerCluster = new MarkerClusterer(map, markers, options);
        }



        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
@stop