{% include 'common/header.html.twig' with {'assets': assets } %}
<!-- begin::Body -->
<body style="background-image: url({{ assets }}media/demos/demo4/bg-image-parti-header.jpg); background-position: center top; background-size: 100% 338px;" class="kt-page--loading-enabled kt-page--loading kt-quick-panel--right kt-demo-panel--right kt-offcanvas-panel--right kt-header--fixed kt-header--minimize-menu kt-header-mobile--fixed kt-subheader--enabled kt-subheader--transparent kt-page--loading">

<!-- 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">

                    <!-- begin:: Subheader -->
                    {% include 'common/subheader.html.twig' %}

                    <!-- end:: Subheader -->

                    <!-- begin:: Content -->
                    <div class="kt-container kt-grid__item kt-grid__item--fluid" id="ad_listing">

                        <div class="kt-portlet kt-portlet--mobile">
                            <div class="kt-portlet__head kt-portlet__head--lg">
                                <div class="kt-portlet__head-label">
                                    <h3 class="kt-portlet__head-title">
                                        {{ lbl_title }}
                                        <small>{{ lbl_subtitle }}</small>
                                    </h3>
                                </div>
                                <div class="kt-portlet__head-toolbar">
                                    <div class="kt-portlet__head-wrapper">
                                        <div class="kt-portlet__head-actions">
                                            <div class="dropdown dropdown-inline">
                                                <button type="button" class="btn btn-default btn-icon-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="la la-download"></i> Export
                                                </button>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <ul class="kt-nav">
                                                        <li class="kt-nav__section kt-nav__section--first">
                                                            <span class="kt-nav__section-text">Choose an option</span>
                                                        </li>
                                                        <li class="kt-nav__item">
                                                            <a href="#" class="kt-nav__link">
                                                                <i class="kt-nav__link-icon la la-print"></i>
                                                                <span class="kt-nav__link-text">Print</span>
                                                            </a>
                                                        </li>
                                                        <li class="kt-nav__item">
                                                            <a href="#" class="kt-nav__link">
                                                                <i class="kt-nav__link-icon la la-copy"></i>
                                                                <span class="kt-nav__link-text">Copy</span>
                                                            </a>
                                                        </li>
                                                        <li class="kt-nav__item">
                                                            <a href="#" class="kt-nav__link">
                                                                <i class="kt-nav__link-icon la la-file-excel-o"></i>
                                                                <span class="kt-nav__link-text">Excel</span>
                                                            </a>
                                                        </li>
                                                        <li class="kt-nav__item">
                                                            <a href="#" class="kt-nav__link">
                                                                <i class="kt-nav__link-icon la la-file-text-o"></i>
                                                                <span class="kt-nav__link-text">CSV</span>
                                                            </a>
                                                        </li>
                                                        <li class="kt-nav__item">
                                                            <a href="#" class="kt-nav__link">
                                                                <i class="kt-nav__link-icon la la-file-pdf-o"></i>
                                                                <span class="kt-nav__link-text">PDF</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="kt-portlet__body">
                                <!--begin: Search Form -->
                                <div class="kt-form kt-form--label-right kt-margin-t-20 kt-margin-b-10">
                                    <div class="row align-items-center">
                                        <div class="col-xl-12 order-2 order-xl-1">
                                            <div class="row align-items-left mb-2">
                                                <div class="col-md-3 kt-margin-b-20-tablet-and-mobile">
                                                    <select class="form-control select_filter_box" name="makes"
                                                            id="makes" onlymerchant="1">
                                                        <option value="-1">{{ lbl_select_make_title }}</option>
                                                        {% for make in makes %}
                                                            <option value="{{ make.make_id }}">{{ make.title }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>

                                                <div class="col-md-3 kt-margin-b-20-tablet-and-mobile">
                                                    <select class="form-control select_filter_box" name="models"
                                                            id="models" onlymerchant="1" listing="1">
                                                        <option value="-1">{{ lbl_select_model_title }}</option>
                                                    </select>
                                                </div>

                                                <div class="col-md-3 kt-margin-b-20-tablet-and-mobile">
                                                    <select class="form-control select_filter_box" name="years"
                                                            id="years" onlymerchant="1">
                                                        <option value="-1">{{ lbl_select_year_title }}</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="accordion accordion-light  accordion-toggle-arrow" id="accordion_2"><div class="card"><div class="card-header" id="headingOne_2"><div class="card-title collapsed" data-toggle="collapse" data-target="#collapseOne_2" aria-expanded="false" aria-controls="collapseOne_2">Advanced Search</div></div><div id="collapseOne_2" class="collapse" aria-labelledby="headingOne_2" data-parent="#accordion_2"><div class="card-body">
                                            <div class="row align-items-left mb-2">
                                                <div class="col-md-3 kt-margin-b-20-tablet-and-mobile">
                                                    <select class="form-control select_filter_box"
                                                            name="categories_parts_id" id="categories_parts_id" onlymerchant="1">
                                                        <option value="-1">{{ lbl_select_part_category_title }}</option>
                                                        {% for category in part_categories %}
                                                            <option value="{{ category.categories_parts_id }}">{{ category.title }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                                <div class="col-md-3 kt-margin-b-20-tablet-and-mobile">
                                                    <select class="form-control select_filter_box" name="parts"
                                                            id="parts" onlymerchant="1">
                                                        <option value="-1">{{ lbl_select_part_title }}</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="row align-items-left mb-2">
                                                <div class="col-md-3 kt-margin-b-20-tablet-and-mobile">
                                                    <div class="kt-form__group kt-form__group--inline">
                                                        <div class="kt-form__control">
                                                            <select class="form-control bootstrap-select select_filter_box" name="ad_status" id="ad_status">
                                                                <option value="-1">{{ lbl_select_status_title }}</option>
                                                                <option value="0">{{ lbl_unpublish }}</option>
                                                                <option value="1">{{ lbl_publish }}</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-3 kt-margin-b-20-tablet-and-mobile">
                                                    <div class="kt-form__group kt-form__group--inline">
                                                        <div class="kt-form__control">
                                                            <select class="form-control bootstrap-select select_filter_box" name="ad_location" id="ad_location">
                                                                <option value="-1">{{ lbl_ad_status }}</option>
                                                                {% for status in ads_statuses %}
                                                                    <option value="{{ status.ads_status_id }}">{{ status.title }}</option>
                                                                {% endfor %}
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row align-items-left mb-2">
                                                <div class="col-md-3 kt-margin-b-20-tablet-and-mobile input-group date">
                                                    <input type="text" data-date-format="dd/mm/yyyy" class="form-control" readonly="" value="" id="kt_datepicker_2" name="date_from">
                                                    <div class="input-group-append">
                                            <span class="input-group-text">
                                                <i class="la la-calendar"></i>
                                            </span>
                                                    </div>
                                                </div>
                                                <div class="col-md-3 kt-margin-b-20-tablet-and-mobile input-group date">
                                                    <input type="text" data-date-format="dd/mm/yyyy" class="form-control" readonly="" value="" id="kt_datepicker_2" name="date_to">
                                                    <div class="input-group-append">
                                            <span class="input-group-text">
                                                <i class="la la-calendar"></i>
                                            </span>
                                                    </div>
                                                </div>
                                                <div class="col-md-3 kt-margin-b-20-tablet-and-mobile">
                                                    <input type="text" name="free_text_filter" placeholder="" id="free_text_filter" />
                                                </div>
                                            </div>
                                        </div></div></div></div>
                                         </div>
                                    </div>
                                    <div class="row pull-right mt-5 mr-4">
                                        {% for status in ads_statuses %}
                                            <div class="col-xs-4 float-left main_ad_status_div">
                                                <div class="float-left ad_status_title">{{ status.title }}</div>
                                                <div class="ad_status_colorbar {{ status.class }}"></div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                    <div class="row pull-left mt-5 mr-4">
                                        <div class="col-md-3 kt-margin-b-20-tablet-and-mobile">
                                            <button class="btn btn-brand" name="search" id="btn_search">{{ lbl_search }}</button>
                                        </div>
                                    </div>
                                </div>

                                <!--end: Search Form -->
                            </div>
                            <div class="kt-portlet__body kt-portlet__body--fit">

                                <!--begin: Datatable -->
                                <div class="kt-datatable kt-datatable--default kt-datatable--brand kt-datatable--loaded">

                                    <table class="table table-bordered table-hover text-center" id="html_table">
                                        <thead>
                                        <tr>
                                            <th>#</th>
                                            <th><span>{{ lbl_ad_code }}</span></th>
                                            <th ><span>{{ lbl_ads_date }}</span></th>
                                            <th><span>{{ lbl_make }}</span></th>
                                            <th><span>{{ lbl_model }}</span></th>
                                            <th><span>Klm</span></th>
                                            <th><span>Vin</span></th>
                                            <th><span>{{ lbl_category_year}}</span></th>
                                            <th><span>{{ lbl_cc }} - {{ lbl_engine }}</span></th>
                                            <th><span>{{ lbl_parts_number }}</span></th>
                                            <th><span>{{ lbl_actions }}</span></th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% for ad in ads %}
                                            <tr>
                                                <td><div class="{{ ad.class}}" style="margin:0 auto;"></div></td>
                                                <td><span><a href="{{ ad.url }}" class="ad_code">{{ ad.code }}</a></span></td>
                                                <td><span>{{ ad.ad_date }}</span></td>
                                                <td>
                                                    <span class="float-left">
                                                        <img src="{{assets}}brands/{{ ad.logo }}"/>
                                                    </span>
                                                    <span>
                                                        {{ ad.title }}
                                                    </span>
                                                </td>
                                                <td><span>{{ ad.model_name }}</span></td>
                                                <td><span>{{ ad.klm }}</span></td>
                                                <td><span>{{ ad.vin }}</span></td>
                                                <td><span>{{ad.year_from_category }} - {{ ad.year_to_category }}</span></td>
                                                <td><span>{{ad.cc_title }} - {{ ad.engine }}</span></td>
                                                <td><span>{{ ad.count_parts }}</span></td>
                                                <td><span>
                                                    <a href="{{ ad.car_destroy_url }}"><img class="action_img" src="{{ assets }}media/icons/svg/destroying-car.svg"/></a>
                                                    <img class="action_img" id="customize_parts" src="{{ assets }}media/icons/svg/customize-parts.svg"/>
                                                    {% if  ad.status  == 1 %}
                                                        <img class="action_img" id="turn_visibility_off" ad_id="{{ ad.ads_id }}" src="{{ assets }}media/icons/svg/turn-visibility-off-button.svg"/>
                                                    {% else %}
                                                        <img class="action_img" id="turn_visibility_on" ad_id="{{ ad.ads_id }}" src="{{ assets }}media/icons/svg/visibility.svg"/>
                                                    {% endif %}
                                                        <img class="action_img" id="delete_ad" src="{{ assets }}media/icons/svg/trash.svg"/>
                                                    {% if  ad.vin_check_status  == 1 %}
                                                        <img class="action_img" id="vin_status" src="{{ assets }}media/icons/svg/g_green.svg"/>
                                                    {% else %}
                                                        <img class="action_img" id="vin_status" src="{{ assets }}media/icons/svg/v_red.svg"/>
                                                    {% endif %}
                                                    </span>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>                                        
                                    </table>

                                    <div class="kt-datatable__pager kt-datatable--paging-loaded">
                                        <ul class="kt-datatable__pager-nav">
                                            <li><a title="First"
                                                   class="kt-datatable__pager-link kt-datatable__pager-link--first kt-datatable__pager-link--disabled"
                                                   data-page="1" disabled="disabled">
                                                    <i class="flaticon2-fast-back"></i>
                                                </a>
                                            </li>
                                            <li><a title="Previous"
                                                   class="kt-datatable__pager-link kt-datatable__pager-link--prev kt-datatable__pager-link--disabled"
                                                   data-page="1" disabled="disabled"><i class="flaticon2-back"></i>
                                                </a>
                                            </li>
                                            <li style=""></li>

                                            {% for i in 0..total_pages %}
                                                {% if i == 1 %}
                                                    <li>
                                                    <a class="kt-datatable__pager-link kt-datatable__pager-link-number kt-datatable__pager-link--active"
                                                       data-page="1" title="1">1</a>
                                                    </li>
                                                {% elseif i > 1 %}
                                                    <li><a class="kt-datatable__pager-link kt-datatable__pager-link-number" data-page="{{ i }}" title="{{ i }}">{{ i }}</a></li>
                                                {% endif %}
                                            {% endfor %}
                                            <li style=""></li>
                                            <li>
                                                <a title="Next"
                                                   class="kt-datatable__pager-link kt-datatable__pager-link--next kt-datatable__pager-link--disabled"
                                                   data-page="1" disabled="disabled">
                                                    <i class="flaticon2-next"></i>
                                                </a>
                                            </li>
                                            <li><a title="Last"
                                                   class="kt-datatable__pager-link kt-datatable__pager-link--last kt-datatable__pager-link--disabled" data-page="1" disabled="disabled"> <i class="flaticon2-fast-next"></i></a>
                                            </li>
                                        </ul>
                                        <div class="kt-datatable__pager-info">
                                            <div class="dropdown bootstrap-select kt-datatable__pager-size"
                                                 style="width: 60px;">
                                                <select class="selectpicker kt-datatable__pager-size" title="10" data-width="60px" data-container="body" data-selected="-1" tabindex="-98">
                                                    <option value="10">10</option>
                                                    <option value="20">20</option>
                                                    <option value="30">30</option>
                                                    <option value="50">50</option>
                                                    <option value="100">100</option>
                                                </select>
                                                <div class="dropdown-menu ">
                                                    <div class="inner show" role="listbox" id="bs-select-1"
                                                         tabindex="-1">
                                                        <ul class="dropdown-menu inner show"
                                                            role="presentation"></ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <span class="kt-datatable__pager-detail">{{ lbl_show }} {{ total_ads }} {{ lbl_from }} {{ current_view_ads }}</span>
                                        </div>
                                    </div>
                                </div>
                                <!--end: Datatable -->
                            </div>
                        </div>
                    </div>

                    <!-- end:: Content -->

                    <!-- begin:: Footer -->

                    <!--begin::Page Scripts(used by this page) -->
                    <script src="{{ assets }}js/pages/crud/forms/widgets/bootstrap-datepicker.js" type="text/javascript"></script>

                    <!--end::Page Scripts -->

                    {{ render(controller('App\\Controller\\Common\\Scripts::index')) }}

                    <script type="text/javascript">

                        function createRow(ad_id,color,url,code,ad_date,title,model_name,model_year,count_parts,
                                           car_destroy_url,status,vin_check,year_from_category,year_to_category,
                                           engine,cc_title,klm,vin,ad_class) {

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

                            html += '<tr>';
                            html +='<td><div class="' + ad_class +'" style="margin:0 auto;"></div></td>'
                            html += '<td><span><a href="' + url + '" class="ad_code">' + code + '</a></span></td>';
                            html += '<td><span>' + ad_date + '</span></td>';
                            html += '<td><span>' + title + '</span></td>';
                            html += '<td><span>' + model_name + '</span></td>';
                         //   html += '<td><span>' + model_year + '</span></td>';
                            html += '<td><span>' + klm + '</span></td>';
                            html += '<td><span>' + vin + '</span></td>';
                            html += '<td><span>' + year_from_category + ' -'
                                + year_to_category + '</span></td>';
                            html += '<td><span>' + cc_title + ' - ' + engine
                                + '</span></td>';
                            html += '<td><span>' + count_parts + '</span></td>';
                            html += '<td>';
                            html += '<span>';
                            html += '<a href="' + car_destroy_url + '"><img class="action_img" src="' + assets  + 'media/icons/svg/destroying-car.svg"/></a><a href="' + car_destroy_url + '"></a>';
                            html += '<img class="action_img" id="customize_parts" src="{{ assets }}media/icons/svg/customize-parts.svg"/>';
                            if (status  == 1) {
                                html += '<img class="action_img" id="setvisibility" adid="' + ad_id + '" visibility="0" src="' + assets  + 'media/icons/svg/turn-visibility-off-button.svg"/>';
                            }else {
                                html += '<img class="action_img" id="setvisibility" adid="' + ad_id + '" visibility="1" src="' + assets  + 'media/icons/svg/visibility.svg"/>';

                            }
                            html += '<img class="action_img" id="delete_ad" adid="' + ad_id + '" visibility="3" src="' + assets  + 'media/icons/svg/trash.svg"/>';

                            if (vin_check  == 1) {
                                html += '<img class="action_img" id="vin_status"  src="{{ assets }}media/icons/svg/v_green.svg"/>';
                            }else {
                                html += '<img class="action_img" id="vin_status"  src="{{ assets }}media/icons/svg/v_red.svg"/>';
                            }
                            html += '</span></td></tr>';

                            return html;
                        }

                        function getResults() {

                            $.ajax({
                                url: '{{ search_ads_url }}',
                                datatype: 'json',
                                data: {
                                    make_id: $("#makes option:selected").val(),
                                    model_id: $("#models option:selected").val(),
                                    years: $("#years option:selected").val(),
                                    categories_parts_id: $("#categories_parts_id option:selected").val(),
                                    part_id: $("#parts option:selected").val(),
                                    status: $("#ad_status option:selected").val(),
                                    location: $("#ad_location option:selected").val(),
                                    date_from: $("input[name='date_from']").val(),
                                    date_to: $("input[name='date_to']").val(),
                                    free_text_filter: $("#free_text_filter").val(),
                                },
                                method: 'POST',
                                success: function (json) {
                                    var result = $.parseJSON(json);
                                    var rows = '';
                                    if (result.length > 0) {
                                        for (i = 0; i < result.length; i++) {
                                            rows += createRow(result[i]['ads_id'],result[i]['color'],
                                                result[i]['url'], result[i]['code'],result[i]['ad_date'],
                                                result[i]['title'], result[i]['model_name'],result[i]['model_year'],
                                                result[i]['count_parts'],result[i]['car_destroy_url'],
                                                result[i]['status'],result[i]['vin_check_status'],
                                                result[i]['year_from_category'],result[i]['year_to_category'],
                                                result[i]['engine'],result[i]['cc_title'],result[i]['klm'],
                                                result[i]['vin'],result[i]['class']);
                                        }
                                    }else {
                                        rows += '<tr class="kt-datatable__row">';
                                        rows += '<td class="kt-datatable__cell datatable_td no_results" colspan="7">{{ lbl_no_results }}</td></tr>';
                                    }

                                    $('#html_table tbody').html('');
                                    $('#html_table tbody').html(rows);
                                } //end function
                            }); //end ajax
                        }

                        function setVisibility(adid,visibility) {

                            $.ajax({
                                url: '{{ set_ad_visibility }}',
                                datatype: 'json',
                                data: {
                                    adid: adid,
                                    visibility: visibility,
                                },
                                method: 'POST',
                                success: function (json) {
                                    var result = $.parseJSON(json);
                                    var html = '';

                                    if (result['success'] == true) {

                                        if (visibility == 0) {
                                            $("#setvisibility[ad_id='" + adid + "']").attr('visibility',1);
                                            $("#setvisibility[ad_id='" + adid + "']").attr('src','{{ assets }}media/icons/svg/visibility.svg');
                                        }else {
                                            $("#setvisibility[ad_id='" + adid + "']").attr('visibility',0);
                                            $("#setvisibility[ad_id='" + adid + "']").attr('src','{{ assets }}media/icons/svg/turn-visibility-off-button.svg');
                                        }
                                    }
                                } //end function
                            }); //end ajax
                        }

                        jQuery(document).ready(function() {

                            $(document).on('click', '#btn_search', function (e) {
                                getResults();
                            });

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

                                var adid = $(this).attr('adid');
                                var visibility = $(this).attr('visibility');

                                setVisibility(adid,visibility)
                            });//end change

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

                                var adid = $(this).attr('adid');
                                var visibility = $(this).attr('visibility');

                                setVisibility(adid,visibility)
                            });//end change
                        });
                    </script>

                    {{ render(controller('App\\Controller\\Common\\Footer::index')) }}


