@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-9">
                        <div class="projects row grid">
                            @include('components.project-item', 
                            ['title' => 'Korrodi', 'subTitle' => 'Residencial',
                            'image' => 'images/works/new/image-1.jpg',
                            'category' => 'residencial',
                            'url' => url('korrodi')])
                            
                            @include('components.project-item', 
                            ['title' => 'Milagres', 'subTitle' => 'Residencial',
                            'image' => 'images/works/new/image-2.jpg',
                            'category' => 'residencial',
                            'url' => url('milagres')])
                            
                            @include('components.project-item', 
                            ['title' => 'Pizzaria Rossini', 'subTitle' => 'Architectural',
                            'image' => 'images/works/new/image-4.jpg',
                            'category' => 'architectural',
                            'url' => url('rossini')])

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

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

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

                            @include('components.project-item', 
                            ['title' => 'Residencial  Project', 'subTitle' => 'Buildings',
                            'image' => 'images/works/new/image-3.jpg',
                            'category' => 'bulding'])
                            @include('components.project-item', 
                            ['title' => 'Korrodi', 'subTitle' => 'Residencial',
                            'image' => 'images/works/new/image-1.jpg',
                            'category' => 'residencial'])
                            @include('components.project-item', 
                            ['title' => 'Korrodi', 'subTitle' => 'Residencial',
                            'image' => 'images/works/new/image-2.jpg',
                            'category' => 'residencial'])
                            @include('components.project-item', 
                            ['title' => 'Residencial  Project', 'subTitle' => 'Buildings',
                            'image' => 'images/works/new/image-3.jpg',
                            'category' => 'bulding'])
                            @include('components.project-item', 
                            ['title' => 'Pizzaria Rossini', 'subTitle' => 'Architectural',
                            'image' => 'images/works/new/image-4.jpg',
                            'category' => 'architectural'])
                            
                        </div>
                    </div>
                    <div class="col-md-3 side">
                        <div class="filters">
                            <a class="active all-filter">ALL</a>
                            <a class="residencial-filter">RESIDENTIAL</a>
                            <a class="architectural-filter">ARCHITECTURAL</a>
                            <a class="building-filter">BUILDINGS</a>
                        </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>
        <ul class="submenu__links">
            <li class="submenu__link active">
                <a href="#mapa" class="submenu__link" data-target="list-view">LISTA</a>
            </li>
            <li class="submenu__link">
                <a href="#lista" class="submenu__link" data-target="map-view">MAPA</a>
            </li>
        </ul>
        <div class="footer-rights">
            <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>
        $(() => {
            var $grid = $('.grid').isotope({
                // options...
                gutterWidth: 10,
                itemSelector: '.grid-item',
            });
            $('.all-filter').on('click', () => {
                $grid.isotope({ filter: '*' });
            });
            $('.residencial-filter').on('click', () => {
                $grid.isotope({ filter: '.residencial' });
            });
            $('.building-filter').on('click', () => {
                $grid.isotope({ filter: '.bulding' });
            });
            $('.architectural-filter').on('click', () => {
                $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 marker = new google.maps.Marker({
                position: {lat: 39.8073804, lng: -8.7777309},
                map: map,
                title: 'Milagres'
            });
            var marker1 = new google.maps.Marker({
                position: {lat: 39.736095, lng: -8.8009827},
                map: map,
                title: 'Rossini'
            });
            var marker2 = new google.maps.Marker({
                position: {lat: 39.7424345, lng: -8.8120687},
                map: map,
                title: 'Cliníca Morgado'
            });
            var marker3 = new google.maps.Marker({
                position: {lat: 39.7483381, lng: -8.8077579},
                map: map,
                title: 'Korrodi'
            });
            var marker4 = new google.maps.Marker({
                position: {lat: 39.6988195, lng: 8.7494994},
                map: map,
                title: 'Arrabal'
            });
            var marker5 = new google.maps.Marker({
                position: {lat: 40.0412429, lng: -8.8523129},
                map: map,
                title: 'Ondas'
            });
            var marker6 = new google.maps.Marker({
                position: {lat: 39.5176014, lng: -8.8376967},
                map: map,
                title: 'Vale Verde'
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDZ-talNoxc9PvjPU2z6Nn77FlXPa6xef4&callback=initMap"
    async defer></script>
    @endsection