{% extends 'base.html.twig' %}

{% block body %}

    <!-- begin:: Page -->

    <!-- begin:: Header Mobile -->
    {% include 'common/header_mobile.html.twig' %}

    <!-- end:: Header Mobile -->
    <div class="kt-grid kt-grid--hor kt-grid--root">
        <div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--ver kt-page">
            <div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor kt-wrapper" id="kt_wrapper">

                <!-- begin:: Header -->
                {{ render(controller('App\\Controller\\Common\\Top::index')) }}

                <!-- end:: Header -->
                <div class="kt-body kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor kt-grid--stretch" id="kt_body">
                    <div class="kt-content kt-content--fit-top  kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor" id="kt_content">
                        <header class="page-header-top">
                            <div class="container">
                                <div class="row">
                                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                        <div class="page-caption">
                                            <!--h1 class="page-title">Listing</h1-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </header>
                        <main>
                            <div class="app-map">
                                <section class="over-top">
                                    <div class="container">
                                        <div class="row">
                                            <div class="col-12">
                                                <section class="header-title">
                                                    <article><h1>Dismantlers</h1></article>
                                                    <article>
                                                        <ul class="list-bread">
                                                            <li><i class="fa fa-home "></i></li>
                                                            <li>
                                                                <span> <i class="fa fa-dot-circle small "></i> Lorem Ipsum</span>
                                                            </li>
                                                            <li>
                                                                <span> <i class="fa fa-dot-circle small "></i> admin</span>
                                                            </li>
                                                        </ul>
                                                    </article>
                                                </section>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="card main-card">
                                                    <section>
                                                        <article class="card-header">All Our Dismantlers</article>
                                                        <article class="card-body">
                                                            <aside class="sub-title">
                                                                <article>
                                                                    <aside>
                                                                        <img  src="{{ assets }}media/icons/logo-map.png" />
                                                                    </aside>
                                                                    <aside>
                                                                        <p>
                                                                            Find Used car parts from Ireland's FindaPart Network of car dismantlers and breakers
                                                                        </p>
                                                                    </aside>
                                                                </article>
                                                            </aside>
                                                            <aside class="filer-sections pad-top-bottom-25">
                                                                <form class="form-group row">
                                                                    <div class="col-xl-2 col-lg-2 col-md-12 col-sm-12 col-12">
                                                                        <article class="list">
                                                                            <aside>
                                                                                <img  src="{{ assets }}media/icons/dot-in-list.png" />

                                                                            </aside>
                                                                            <aside>
                                                                                <span>Dismantlers ({{ total_merchants }})</span>
                                                                            </aside>
                                                                        </article>
                                                                    </div>
                                                                    <div class="col-xl-2 col-lg-2 col-md-12 col-sm-12 col-12">
                                                                        <article class="list">
                                                                            <aside>
                                                                                <img src="{{ assets }}media/icons/dot-in-list.png">
                                                                            </aside>
                                                                            <aside>
                                                                                <span> Salvage Dealers (9)</span>
                                                                            </aside>
                                                                        </article>
                                                                    </div>
                                                                    <div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12">
                                                                        <article class="form-inline">
                                                                            <aside class="form-group">
                                                                                <select class="form-control select_filter_box">
                                                                                    <option value="0" selected>Select a Dismantler</option>
                                                                                    {% for merchant in merchants %}
                                                                                        <option value="{{ merchant.merchant_id }}">{{ merchant
                                                                                            .company }}</option>
                                                                                    {% endfor %}
                                                                                </select>
                                                                            </aside>
                                                                        </article>
                                                                    </div>
                                                                    <div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-12">
                                                                        <article class="list">
                                                                            <aside>
                                                                                <span>or select a County</span>
                                                                            </aside>
                                                                            <aside>
                                                                                <article class="form-inline w-auto">
                                                                                    <aside class="form-group">
                                                                                        <select class="form-control select_filter_box">
                                                                                            <option value="0" selected>All Ireland</option>
                                                                                            {% for c in countries %}
                                                                                                <option value="{{ c
                                                                                                .countryid}}">{{c.name }}</option>
                                                                                            {% endfor %}
                                                                                        </select>
                                                                                    </aside>
                                                                                </article>
                                                                            </aside>
                                                                        </article>
                                                                    </div>
                                                                </form>
                                                            </aside>
                                                            <aside class="map" id="mapCanvas">
                                                                Maps here
                                                                <!--div style="height: inherit;"
                                                                     leaflet
                                                                     [leafletOptions]="options">
                                                                </div-->
                                                            </aside>
                                                            <aside class="content-list">
                                                                <div class="row">
                                                                    <div class="col-12">
                                                                        <h4>All Our Dismantlers below</h4>
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    {% for merchant in merchants %}
                                                                    <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
                                                                        <section class="card">
                                                                            <article class="row">
                                                                                <aside class="col-6">
                                                                                    <img src="{{ assets }}media/icons/cars-listed.png " />

                                                                                </aside>
                                                                                <aside class="col-6">
                                                                                    <article>
                                                                                        <aside>
                                                                                            <button class="btn btn-block btn-primary show-phones">
                                                                                                <i class="fa fa-phone"></i> Show phone
                                                                                            </button>
                                                                                        </aside>
                                                                                        <aside style="margin-top: 20px">
                                                                                            <button class="btn btn-block btn-primary show-phones">
                                                                                                <i class="fa fa-mobile"></i>Show mobile
                                                                                            </button>
                                                                                        </aside>
                                                                                    </article>
                                                                                </aside>
                                                                            </article>
                                                                            <article class="text" style="margin-top: 20px">
                                                                                <aside>{{ merchant.company }}</aside>
                                                                                <aside>{{ merchant.address }}</aside>
                                                                                <aside> {{ merchant.city_title }}</aside>
                                                                                <aside>{{ merchant.website }}</aside>
                                                                            </article>
                                                                            <article style="margin-top: 20px">
                                                                                <aside>
                                                                                    <button class="btn btn-block btn-primary view-profile">
                                                                                        View Profile
                                                                                    </button>
                                                                                </aside>
                                                                            </article>
                                                                        </section>
                                                                    </div>
                                                                    {% endfor %}
                                                                </div>
                                                            </aside>
                                                        </article>
                                                    </section>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </main>
                        <script src="https://maps.googleapis.com/maps/api/js?key={{ google_api_key }}"></script>
                        <script>
                            function initMap() {
                                var map;
                                var bounds = new google.maps.LatLngBounds();
                                var mapOptions = {
                                    mapTypeId: 'roadmap'
                                };

                                // Display a map on the web page
                                map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
                                map.setTilt(50);

                                // Multiple markers location, latitude, and longitude
                                var markers = [
                                    {% for m in merchants %}
                                        {% for s in m.stores %}
                                            ['{{ m.company }}', '{{ s.address_lat }}', '{{ s.address_long }}'],
                                        {% endfor %}
                                    {% endfor %}
                            ];

                            // Info window content
                            var infoWindowContent = [
                                {% for m in merchants %}
                                    ['<div class="info_content">' + '<h4>{{ m.company }}</Η4>' + '</div>'],
                                {% endfor %}
                            ];

                            // Add multiple markers to map
                            var infoWindow = new google.maps.InfoWindow(), marker, i;

                            // Place each marker on the map
                            for( i = 0; i < markers.length; i++ ) {
                            var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
                            bounds.extend(position);
                            marker = new google.maps.Marker({
                            position: position,
                            map: map,
                            title: markers[i][0]
                            });

                                // Add info window to marker
                            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                            return function() {
                                infoWindow.setContent(infoWindowContent[i][0]);
                                infoWindow.open(map, marker);
                            }
                            })(marker, i));

                        // Center the map to fit all markers on the screen
                        map.fitBounds(bounds);
                    }

                    // Set zoom level
                    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
                        this.setZoom(14);
                        google.maps.event.removeListener(boundsListener);
                    });

                }

                // Load initialize function
                google.maps.event.addDomListener(window, 'load', initMap);
            </script>
                        <!-- begin:: Footer -->
                        {{ render(controller('App\\Controller\\Common\\Footer::index')) }}
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}