{% 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" >
                                        <div class="app-aside animate-medium" id="app-aside">

                                            <aside class="col">
                                                <div class="aside__wrapper aside__scroller">
                                                    <button id="aside__toggler" class="aside__toggler animate show">
                                                        <span class="text">{{ lbl_filter_title }}</span>
                                                    </button>
                                                    <section class="filter-main-title">
                                                        <article>
                                                            <img src="{{ assets }}media/partiperauto/listing/search.png" alt="">
                                                            <span>{{ lbl_listing_filter_title }}</span>
                                                        </article>
                                                    </section>
                                                    <section class="filter-sub-title">
                                                        <article>
                                                            <img src="{{ assets }}media/partiperauto/listing/tabs.png" alt="">
                                                            <span class="pull-right">{{ lbl_total_ads|raw }}</span>
                                                        </article>
                                                        <article>
                                                            <span class="clear-reg pull-right">{{ lbl_reset }}</span>
                                                        </article>
                                                    </section>
                                                </div>
                                            </aside>
                                            <aside class="col-12">

                                                    <div class="part-accordion">
                                                        <div class="part-accordion-tabs list_filter">
                                                            {% for category in part_categories %}
                                                                <div class="part-accordion-tab">
                                                                    <input type="radio" id="rd_{{ category.categories_parts_id }}" name="rd" checked>
                                                                    <label class="part-accordion-tab-label" for="rd_{{ category.categories_parts_id }}">
                                                                        <div>
                                                                            <img src="{{ assets }}media/icons/svg/part-categories/{{ category
                                                                            .image }}" alt="{{ category.title }}" />
                                                                            <span>{{ category.title }}</span>
                                                                        </div>
                                                                    </label>
                                                                    <div class="part-accordion-tab-content">
                                                                        <div class="row" >
                                                                            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                                                                <ul>
                                                                                    {% for part in category.parts %}
                                                                                        <li>
                                                                                            {% if part.total_parts > 0 %}
                                                                                                <a href="{{ part.url }}">
                                                                                                    {{ part.title }} ({{part.total_parts }})
                                                                                                </a>
                                                                                            {% else %}
                                                                                                {{ part.title }} ({{ part.total_parts }})
                                                                                            {% endif %}
                                                                                        </li>
                                                                                    {% endfor %}
                                                                                </ul>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            {% endfor %}
                                                        </div>
                                                    </div>

                                            </aside>
                                        </div>
                                        <div class="col">
                                            <section class="section--products">
                                                <div class="form-group 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>

                                                    <div class="col-12" style="margin-bottom: 15px;">
                                                        <div class="col-lg-4 col-xl-4 float-left">
                                                            <select class="form-control select_filter_box" name="makes" id="makes">
                                                                <option selected="selected" value="-1">{{ lbl_select }}</option>
                                                                {% for make in makes %}
                                                                    {% if make.title == make_tile %}
                                                                        <option value="{{ make.make_id }}" selected>{{
                                                                            make.title }}</option>
                                                                    {% else %}
                                                                        <option value="{{ make.make_id }}">{{ make.title }}</option>
                                                                    {% endif %}
                                                                {% endfor %}
                                                            </select>
                                                        </div>

                                                        <div class="col-lg-4 col-xl-4 float-left">
                                                            <select class="form-control select_filter_box"
                                                                    show_models_years="1" name="models" id="models">
                                                                <option>{{ model_name }}</option>
                                                            </select>
                                                        </div>

                                                        <div class="col-lg-4 col-xl-4 float-left">
                                                            <select class="form-control select_filter_box"
                                                                    name="categories_years" id="categories_years">
                                                                {% for i in year_from..year_to %}
                                                                    <option>{{ i }}</option>
                                                                {% endfor %}
                                                            </select>
                                                        </div>
                                                        <input type="hidden" name="part_title" id="part_title" value="{{
                                                        part_title }}" />

                                                        <div class="float-right mt-2">
                                                            <button class="btn btn-brand" id="btn_search" target_url="">Search</button>
                                                        </div>
                                                    </div>
                                                    {% if ads %}
                                                        <div class="col-12" id="ads_results">
                                                        {% for ad in ads %}
                                                            {% include 'front/part_card.twig' with {'assets': assets,
                                                                'part_title': ad.part_title,'part_code': ad.code,
                                                                'url':ad.url,'listing_image' : ad.listing_image,
                                                                'parts_numbers': ad.numbers,'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_title,'enquire':lbl_enquire,
                                                                'cc_title':ad.cc_title, 'show_phone':lbl_show_phone,
                                                                'price':ad.price,'price_with_vat':ad.price_with_vat}
                                                            %}

                                                        {% 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();
                            });

                            $(document).on('click', '#favorite', function (e) {

                                var part_code = $(this).atrr('part_code');

                                $.ajax({
                                    url: '{{ add_favorite }}',
                                    datatype: 'json',
                                    data: {
                                        part_code: part_code,
                                    },
                                    method: 'POST',
                                    success: function (json) {
                                        var result = $.parseJSON(json);

                                    } //end function
                                }); //end ajax
                            });
                        });

                        $(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 %}