@extends('layouts.front')

@section('page-class', 'works-page')

@section('content')
        <div class="content-area">
            <div id="list-view" class="subpage">
                <div class="row">
                    <div class="col-md-12">
                        <div class="projects row grid">
                            @include('components.project-item', 
                            ['title' => 'Korrodi', 'subTitle' => 'Residencial',
                            'image' => 'images/works/new/image-1-t.jpg',
                            'category' => 'residencial',
                            'video' => asset('video/korodi_video.mp4'),
                            'url' => url('korrodi')])
                            
                            @include('components.project-item', 
                            ['title' => 'Milagres', 'subTitle' => 'Residencial',
                            'image' => 'images/works/new/image-2-t.jpg',
                            'category' => 'residencial',
                            'url' => url('milagres')])
                            
                            @include('components.project-item', 
                            ['title' => 'Pizzaria Rossini', 'subTitle' => 'Architectural',
                            'image' => 'images/works/new/image-4-t.jpg',
                            'category' => 'architectural',
                            'url' => url('rossini')])

                            @include('components.project-item', 
                            ['title' => 'Clínica Morgado', 'subTitle' => 'Buildings',
                            'image' => 'images/works/new/image-3-t.jpg',
                            'category' => 'bulding',
                            'url' => url('clinica_morgado')])

                            @include('components.project-item', 
                            ['title' => 'Arrabal', 'subTitle' => 'Residencial',
                            'image' => 'images/works/new/image-5-t.jpg',
                            'category' => 'residencial',
                            'url' => url('arrabal')
                            ])
                            @include('components.project-item', 
                            ['title' => 'Vale Verde', 'subTitle' => 'Residencial',
                            'image' => 'images/works/new/image-1-t.jpg',
                            'category' => 'residencial',
                            'url' => url('vale_verde')])

                            @include('components.project-item', 
                            ['title' => 'Ondas', 'subTitle' => 'Residencial',
                            'image' => 'images/works/new/image-2-t.jpg',
                            'category' => 'residencial',
                            'url' => url('ondas')])

                            @include('components.project-item', 
                            ['title' => 'Residencial  Project', 'subTitle' => 'Buildings',
                            'image' => 'images/works/new/image-3-t.jpg',
                            'category' => 'bulding'])
                            @include('components.project-item', 
                            ['title' => 'Korrodi', 'subTitle' => 'Residencial',
                            'image' => 'images/works/new/image-1-t.jpg',
                            'category' => 'residencial'])
                            @include('components.project-item', 
                            ['title' => 'Korrodi', 'subTitle' => 'Residencial',
                            'image' => 'images/works/new/image-2-t.jpg',
                            'category' => 'residencial'])
                            @include('components.project-item', 
                            ['title' => 'Residencial  Project', 'subTitle' => 'Buildings',
                            'image' => 'images/works/new/image-3-t.jpg',
                            'category' => 'bulding'])
                            @include('components.project-item', 
                            ['title' => 'Pizzaria Rossini', 'subTitle' => 'Architectural',
                            'image' => 'images/works/new/image-4-t.jpg',
                            'category' => 'architectural'])
                            
                        </div>
                    </div>
                </div>
            </div>
        <div id="map-view" class="subpage">
            <div class="row">
                <div class="col-md-12">
                    <div id="map"></div>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <ul class="social-links">
                <li>
                    <img src="{{ asset('icons/linkedin.svg') }}" alt="">
                </li>
                <li>
                    <img src="{{ asset('icons/facebook.svg') }}" alt="">
                </li>
                <li>
                    <img src="{{ asset('icons/twitter.svg') }}" alt="">
                </li>
                <li>
                    <img src="{{ asset('icons/instagram.svg') }}" alt="">
                </li>
            </ul>
            <p class="copyright">
                GvMAA | © 2018. Todos os direitos reservados 
            </p>
        </div>
    </div>
    @endsection


    @section('scripts')
    <script src="{{ asset('js/isotope.min.js') }}"></script>
    <script>
        $( document ).ready(function() {
            var $grid = $('.grid').isotope({
                gutterWidth: 10,
                itemSelector: '.grid-item',
            });
            $('.all-filter').on('click', function() {
                $('.fm').removeClass('active')
                $(this).addClass('active')
                $grid.isotope({ filter: '*' });
            });
            $('.residencial-filter').on('click', function() {
                $('.fm').removeClass('active')
                $(this).addClass('active')

                $grid.isotope({ filter: '.residencial' });
            });
            $('.building-filter').on('click', function() {
                $('.fm').removeClass('active')
                $(this).addClass('active')

                $grid.isotope({ filter: '.bulding' });
            });
            $('.architectural-filter').on('click', function() {
                $('.fm').removeClass('active')
                $(this).addClass('active')

                $grid.isotope({ filter: '.architectural' });
            });
        });
    </script>
    <script>
        var map; 
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: 39.7544257, lng: -8.7975916},
                zoom: 6,
                styles: [
                {
                    "featureType": "administrative",
                    "elementType": "all",
                    "stylers": [
                    {
                        "saturation": "-100"
                    }
                    ]
                },
                {
                    "featureType": "administrative.province",
                    "elementType": "all",
                    "stylers": [
                    {
                        "visibility": "off"
                    }
                    ]
                },
                {
                    "featureType": "landscape",
                    "elementType": "all",
                    "stylers": [
                    {
                        "saturation": -100
                    },
                    {
                        "lightness": 65
                    },
                    {
                        "visibility": "on"
                    }
                    ]
                },
                {
                    "featureType": "poi",
                    "elementType": "all",
                    "stylers": [
                    {
                        "saturation": -100
                    },
                    {
                        "lightness": "50"
                    },
                    {
                        "visibility": "simplified"
                    }
                    ]
                },
                {
                    "featureType": "road",
                    "elementType": "all",
                    "stylers": [
                    {
                        "saturation": "-100"
                    }
                    ]
                },
                {
                    "featureType": "road.highway",
                    "elementType": "all",
                    "stylers": [
                    {
                        "visibility": "simplified"
                    }
                    ]
                },
                {
                    "featureType": "road.arterial",
                    "elementType": "all",
                    "stylers": [
                    {
                        "lightness": "30"
                    }
                    ]
                },
                {
                    "featureType": "road.local",
                    "elementType": "all",
                    "stylers": [
                    {
                        "lightness": "40"
                    }
                    ]
                },
                {
                    "featureType": "transit",
                    "elementType": "all",
                    "stylers": [
                    {
                        "saturation": -100
                    },
                    {
                        "visibility": "simplified"
                    }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "geometry",
                    "stylers": [
                    {
                        "hue": "#ffff00"
                    },
                    {
                        "lightness": -25
                    },
                    {
                        "saturation": -97
                    }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "labels",
                    "stylers": [
                    {
                        "lightness": -25
                    },
                    {
                        "saturation": -100
                    }
                    ]
                }
                ]
            });

            var contentString = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h1 id="firstHeading" class="firstHeading">Korrodi</h1>'+
                '<div id="bodyContent">'+
                '<img src="{{ asset('images/projects/korrodi/image-1.jpg') }}" style="width: 260px" />'+
                '<p style="margin-top: 20px"><b>Korrodi</b>, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut leo nec neque pharetra pretium ut et sem. Etiam lacinia elit congue, dapibus neque sit amet, congue orci.</p>'+
                '<p><a href="{{ url('/korrodi') }}">'+
                'Ver projeto</a> '+
                '</p>'+
                '</div>'+
            '</div>';

            var infowindow = new google.maps.InfoWindow({
            content: contentString
            });


            var marker = new google.maps.Marker({
                position: {lat: 39.8073804, lng: -8.7777309},
                map: map,
                icon: '{{ asset("images/maps-marker.png") }}',
                title: 'Milagres'
            });
            marker.addListener('click', function() {
                infowindow.open(map, marker);
            });
            var marker1 = new google.maps.Marker({
                position: {lat: 39.736095, lng: -8.8009827},
                map: map,
                icon: '{{ asset("images/maps-marker.png") }}',
                title: 'Rossini'
            });
            marker1.addListener('click', function() {
                infowindow.open(map, marker1);
            });
            var marker2 = new google.maps.Marker({
                position: {lat: 39.7424345, lng: -8.8120687},
                map: map,
                icon: '{{ asset("images/maps-marker.png") }}',
                title: 'Cliníca Morgado'
            });
            marker2.addListener('click', function() {
                infowindow.open(map, marker2);
            });
            var marker3 = new google.maps.Marker({
                position: {lat: 39.7483381, lng: -8.8077579},
                map: map,
                icon: '{{ asset("images/maps-marker.png") }}',
                title: 'Korrodi'
            });
            marker3.addListener('click', function() {
                infowindow.open(map, marker3);
            });
            var marker4 = new google.maps.Marker({
                position: {lat: 39.6988195, lng: 8.7494994},
                map: map,
                icon: '{{ asset("images/maps-marker.png") }}',
                title: 'Arrabal'
            });
            marker4.addListener('click', function() {
                infowindow.open(map, marker4);
            });
            var marker5 = new google.maps.Marker({
                position: {lat: 40.0412429, lng: -8.8523129},
                map: map,
                icon: '{{ asset("images/maps-marker.png") }}',
                title: 'Ondas'
            });
            marker5.addListener('click', function() {
                infowindow.open(map, marker5);
            });
            var marker6 = new google.maps.Marker({
                position: {lat: 39.5176014, lng: -8.8376967},
                map: map,
                icon: '{{ asset("images/maps-marker.png") }}',
                title: 'Vale Verde'
            });
            marker6.addListener('click', function() {
                infowindow.open(map, marker6);
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDZ-talNoxc9PvjPU2z6Nn77FlXPa6xef4&callback=initMap"
    async defer></script>
    @endsection