{% 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 role="main">
                        <div class="card-section" >
                            <div class="container">
                                <div class="card-block bg-white mb30">
                                    <div class="row" >
                                        <!-- begin:: filter -->
                                        {% include 'front/filter.html.twig' with {'assets': assets,'merchants' :
                                            merchants,'criteria_list' : criteria_list,'cities' : cities,'years' : years,
                                            'models' : models,'makes' : makes,'isminisite' : isminisite } %}
                                        <!-- end:: filter -->
                                        <div class="col">
                                            <section class="section--products">
                                                <div class="row">
                                                    <div class="col-12 col-xl-12 col-lg-12 col-md-12 col-sm-12">
                                                        <h1 class="listing-main-title">{{ lbl_ad_listing_title }}</h1>
                                                    </div>

                                                    {% if ads %}
                                                        <div class="col-12" id="ads_results">
                                                        {% for ad in ads %}
                                                            {% include 'front/ad_card.twig' with {'assets': assets,'url':ad.url,'listing_image' : ad.listing_image,'count_images': ad.count_images,'model_year': ad.model_year,'make_title': ad.make_title,'model_name':ad.model_name,'merchant_url' :ad.merchant_url,'company':ad.company,'fuel_title': ad.fuel_title,'ad_days':ad.ad_days,'city': ad.city,'enquire': lbl_enquire,'show_phone':lbl_show_phone  } %}

                                                        {% endfor %}
                                                        </div>
                                                        <div class="col-12 col-xl-12 col-lg-12 col-md-12 col-sm-12">
                                                            <section class="listing-pagination">
                                                                <article>
                                                                    <ul class="pagination pull-right">
                                                                        {% if pageno <= 1 %}
                                                                    <li class="page-item disabled="disabled">
                                                                        <a class="page-link" href="#" tabindex="-1"><span aria-hidden="true">&laquo;</span><span class="sr-only">{{ lbl_previous }}</span></a>

                                                                    {% else %}
                                                                        <li class="page-item">
                                                                            <a class="page-link" href="{{
                                                                            pagination_url }}&page={{ pageno - 1 }}" tabindex="-1">
                                                                                <span aria-hidden="true">&laquo;</span>
                                                                                <span class="sr-only">{{ lbl_previous }}</span>
                                                                            </a>
                                                                            {% endif %}

                                                                        </li>
                                                                        {% for i in 1..total_pages %}
                                                                            {% if pageno == i %}
                                                                                <li class="page-item active">
                                                                            {% else %}
                                                                                <li class="page-item">
                                                                            {% endif %}
                                                                            <a class="page-link" href="{{ pagination_url }}&page={{ i }}">
                                                                                {{ i }}
                                                                            </a>
                                                                            </li>
                                                                        {% endfor %}
                                                                        <li class="page-item">
                                                                            {% if pageno >= total_pages %}
                                                                                <a class="page-link" disabled="disabled">
                                                                                    <span aria-hidden="true">&raquo;</span>
                                                                                    <span class="sr-only">{{ lbl_next }}</span>
                                                                                </a>
                                                                            {% else %}
                                                                                <a class="page-link" href="{{ pagination_url }}&page={{ pageno + 1 }}"><span aria-hidden="true">&raquo;</span><span class="sr-only">{{ lbl_next }}</span></a>
                                                                            {% endif %}
                                                                        </li>
                                                                    </ul>
                                                                </article>
                                                            </section>
                                                        </div>
                                                    {% else %}
                                                        {{ lbl_no_results }}
                                                    {% endif %}
                                                </div>
                                            </section>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </main>

                    <!-- end body -->
                    {{ render(controller('App\\Controller\\Common\\Scripts::index')) }}

                        <script type="text/javascript">

                        jQuery(document).ready(function() {

                            $('#models').attr('disabled', false);
                            $('#years').attr('disabled', false);

                            $(document).on('click', 'input[type="checkbox"]', function (e) {
                                getResults();
                            });
                        });

                        $(function() {
                            var Accordion = function(el, multiple) {
                                this.el = el || {};
                                this.multiple = multiple || false;

                                var links = this.el.find('.link');

                                links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
                            }

                            Accordion.prototype.dropdown = function(e) {
                                var $el = e.data.el;
                                $this = $(this),
                                    $next = $this.next();

                                $next.slideToggle();
                                $this.parent().toggleClass('open');

                                if (!e.data.multiple) {
                                    $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
                                };
                            }

                            var accordion = new Accordion($('#accordion'), false);

                            $(document).on("click","#aside__toggler",function(e) {
                                e.preventDefault();
                                $("#app-aside").toggleClass("open");
                                console.log(e.type);
                            });
                        });

                        function adCard(url,image,count_image,model_year,make,model,murl,company,days,fuel,city) {

                            var html = '';
                            var assets = '{{ assets }}';

                            html += '<div class="app-product-details col col-12"><article class="listing"><div class="row"><div class="col-12 col-xl-3 col-lg-3 col-md-6 col-sm-6"><a href="' + url + '" class="container-image"><img class="listing-hero-img" src="' + image + '" alt="" style="width:100%;"><div class="ribbon pull-right"><i class="fa fa-camera"></i><span>' + count_image + '</span></div></a></div><div class="col-12 col-xl-4 col-lg-4 col-md-6 col-sm-6"><div class="row"><div class="col-12 col-top mobile"><a href="' + url + '"><span class="year">' + model_year + ' </span>&nbsp;&nbsp<span class="model">' + make + ' ' + model + '</span></a></div><div class="col-12 col-bottom"><a href="' + murl + '"><span>' + company + ' Car parts </span></a></div></div></div><div class="col-12 col-xl-3 col-lg-3 col-md-6 col-sm-6"><div class="row mobile-pad-top"><div class="col-7 col-grey-bg"><div><i class="fa fa-external-link-alt"></i><span class="pull-right">' + fuel + '</span></div></div><div class="col-5"><div class="row"><div class="col-12 col-top"><span class="age">' + days + '</span></div><div class="col-12 col-bottom"><span class="age-state" >' + city + '<i class="fa fa-check"></i></span></div></div></div></div></div><div class="col-12 col-xl-2 col-lg-2 col-md-6 col-sm-6"><div class="row"><div class="col-12 col-top-btn"><button class="btn btn-primary btn-large btn-block"><i class="fa fa-question-circle"></i><span>{{ lbl_enquire }}</span></button></div><div class="col-12 col-bottom-btn"><button class="btn btn-primary btn-large btn-block"><i class="fa fa-phone-square"></i><span>{{ lbl_show_phone }}</span></button></div></div></div></div></article></div>';

                            return html;
                        }

                        function getResults() {

                            var criterialist = [];

                            $("input[type='checkbox']").filter(':checked').map(function() {
                                criterialist.push($(this).val());
                            });

                            $.ajax({
                                url: '{{ search_ads_url }}',
                                datatype: 'json',
                                data: {
                                    makes: $("#makes option:selected").val(),
                                    model_name: $("#models option:selected").val(),
                                    years: $("#years option:selected").val(),
                                    city: $("#city option:selected").val(),
                                    merchant: $("#merchant option:selected").val(),
                                    criteria: JSON.stringify(criterialist),
                                    json: 1,
                                },
                                method: 'POST',
                                success: function (json) {
                                    console.log(json);
                                    var result = $.parseJSON(json);
                                    var rows = '';
                                    if (result.length > 0) {
                                        for (i = 0; i < result.length; i++) {
                                            rows += adCard(result[i]['url'],result[i]['image'],result[i]['count_image'],result[i]['model_year'], result[i]['make_title'],result[i]['model_name'], result[i]['merchant_url'], result[i]['company'],result[i]['ad_days'],result[i]['fuel_title'],result[i]['city']);
                                        }
                                    }else {
                                        rows += '{{ lbl_no_results }}';
                                    }

                                    $('#ads_results').html('');
                                    $('#ads_results').html(rows);
                                } //end function
                            }); //end ajax
                        }
                    </script>
                    <!-- begin:: Footer -->
                    {{ render(controller('App\\Controller\\Common\\Footer::index')) }}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}