{% 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="listing_parts_page">

                        <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">
                                        Parts
                                        <small>A list of all parts in the platform
                                        </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="accordion accordion-light accordion-toggle-arrow"
                                                 id="accordion_1"><div class="card"><div class="card-header"
                                                                                         id="headingOne_1"><div
                                                                class="card-title collapsed" data-toggle="collapse"
                                                                data-target="#collapseOne_1" aria-expanded="false"
                                                                aria-controls="collapseOne_1">Make -
                                                            Model</div></div><div id="collapseOne_1" class="collapse"
                                                                                 aria-labelledby="headingOne_1" data-parent="#accordion_1"><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="makes"
                                                            id="makes" onlymerchant="1">
                                                        <option selected="selected" 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">
                                                        <option>{{ lbl_select_model_title }}</option>
                                                    </select>
                                                </div>
                                            </div>
                                                        </div></div></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">Price
                                                            Range</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">
                                                    <input type="text" name="price_from" placeholder="{{ lbl_price_from_title }}" id="price_from" onkeypress="allowNumbersOnly(event)"/>
                                                </div>
                                                <div class="col-md-3 kt-margin-b-20-tablet-and-mobile">
                                                    <input type="text" name="price_to" placeholder="{{ lbl_price_to_title }}" id="price_to" onkeypress="allowNumbersOnly(event)"/>
                                                </div>
                                            </div>
                                                        </div></div></div></div>
                                            <div class="accordion accordion-light accordion-toggle-arrow"
                                                 id="accordion_3"><div class="card"><div class="card-header"
                                                                                         id="headingOne_3"><div
                                                                class="card-title collapsed" data-toggle="collapse"
                                                                data-target="#collapseOne_3" aria-expanded="false"
                                                                aria-controls="collapseOne_3">Parts
                                                            Filter</div></div><div id="collapseOne_3" class="collapse"
                                                                                  aria-labelledby="headingOne_3" data-parent="#accordion_3"><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">
                                                        <option selected="selected" 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">
                                                    <div class="kt-form__group kt-form__group--inline">
                                                        <div class="kt-form__control">
                                                            <select class="form-control bootstrap-select select_filter_box" name="part_status" id="part_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="part_location" id="part_location">
                                                                <option value="-1">{{ lbl_part_location }}</option>
                                                                {% for status in parts_statuses %}
                                                                    <option value="{{ status.parts_status_id }}">{{ status.title }}</option>
                                                                {% endfor %}
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                                        </div></div></div></div>
                                            <div class="accordion accordion-light accordion-toggle-arrow"
                                                 id="accordion_4"><div class="card"><div class="card-header"
                                                                                         id="headingOne_4"><div
                                                                class="card-title collapsed" data-toggle="collapse"
                                                                data-target="#collapseOne_4" aria-expanded="false"
                                                                aria-controls="collapseOne_4">Free Text</div></div><div
                                                            id="collapseOne_4" class="collapse" aria-labelledby="headingOne_4" data-parent="#accordion_4"><div class="card-body">
                                            <div class="row align-items-left mb-2">
                                                <div class="col-md-3 kt-margin-b-20-tablet-and-mobile">
                                                    <input type="text" name="free_text_filter" placeholder="{{ lbl_freetext_title }}" id="free_text_filter" />
                                                </div>
                                            </div>
                                                        </div></div></div></div>
                                            <div class="row align-items-left mb-2">
                                                <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>
                                    </div>
                                    <div class="row pull-right mt-5 mr-4">
                                        {% for status in parts_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>

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

                                <!--begin: Datatable -->
                                <span class="kt-datatable kt-datatable--default kt-datatable--brand
                                kt-datatable--loaded" id="parts_listing">
                                    <table class="table table-bordered table-hover text-center" id="html_table">
                                        <thead>
                                            <tr>
                                                <th><span>#</span></th>
                                                <th><span>Image</span></th>
                                                <th><span>System Code</span></th>
                                                <th><span>{{ lbl_part_title }}</span></th>
                                                <th><span>{{ lbl_make }} - {{ lbl_model }} - {{ lbl_model_year}}</span></th>
                                                <th><span>CC - Fuel type - Engine</span></th>
                                                <th><span>Year</span></th>
                                                <th><span>{{ lbl_part_code }}</span></th>
                                                <th><span>{{ lbl_ad_code }}</span></th>
                                                <th><span>Price</span></th>
                                                <th><span>Views</span></th>
                                                <th><span>{{ lbl_actions }}</span></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        {% set a = 0 %}
                                        {% for part in list_parts.parts %}
                                            <tr>
                                                <td>
                                                    {% if part.status_img %}
                                                    <img src="{{ assets }}media/icons/png/{{ part.status_img }}"
                                                         style="max-width:20px;height:auto;">
                                                {% else %}
                                                    <div class="{{ part.class }}" style="margin:0 auto;"></div>
                                                {% endif %}
                                                </td>
                                                <td>
                                                 {% if part.images is not empty %}
                                                     <a class="camera_tooltip" href="">
                                                     <img class="camera_parts_listing" src="{{ assets
                                                     }}media/icons/png/camera.png" />
                                                    <span><img src="{{ part.main_image_url }}"></span>
                                                     </a>
                                                 {% endif %}

                                                </td>
                                                <td><span><a href="{{ part.url }}" class="ad_code">{{ part.code }}</a></span></td>
                                                <td><span>{{ part.part_title }}</span></td>
                                                <td><span>{{ part.make_title}} - {{ part.model_name }} - {{ part.model_year }}</span></td>
                                                <td ><span>{{ part.cc_title}} - {{ part.fuel_title }} - {{ part.engine }}</span></td>
                                                <td><span>{{ part.year_from_category }} - {{ part.year_to_category }}</span></td>
                                                <td><span>
                                                        {% set pnumber = '' %}

                                                        {% for number in  part.part_numbers %}
                                                            {% set pnumber = pnumber ~ number.part_number ~ ', ' %}
                                                        {% endfor %}

                                                        {{ pnumber|trim(', ', 'right') }}
                                                    </span></td>
                                                <td><span><a href="{{ part.ad_url }}" />{{ part.ad_code }}</a></span></td>
                                                <td><span>{{ part.price }}</td>
                                                <td><span>{{ part.views }}</td>
                                                <td><span>
                                                        {% if  part.status  == 1 %}
                                                            <img class="action_img" id="turn_visibility_off" status="0" code="{{ part.code }}" src="{{ assets }}media/icons/svg/turn-visibility-off-button.svg"/>
                                                        {% else %}
                                                            <img class="action_img" id="turn_visibility_on" status="1" code="{{ part.code }}" src="{{ assets }}media/icons/svg/visibility.svg"/>
                                                        {% endif %}

                                                        <img class="action_img" id="delete_part" status="3" code="{{ part.code }}"  src="{{ assets }}media/icons/svg/trash.svg"/>
                                                        <img class="action_img" id="sold_part" status="4" code="{{ part.code }}" src="{{ assets }}media/icons/svg/coins.svg"/>
                                                    </span></td>
                                            </tr>
                                            {% set a = a + 1 %}
                                        {% 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_parts }} {{ lbl_from }} {{ current_view_ads }}</span>
                                        </div>
                                    </div>
                                </div>
                                <!--end: Datatable -->
                            </div>
                        </div>
                    </div>

                    <!-- end:: Content -->

                    <!-- begin:: Footer -->

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

                    <!--begin::Page Scripts(used by this page) -->
                    <script src="{{ assets }}js/pages/crud/metronic-datatable/base/html-table.js" type="text/javascript"></script>
                    <!--end::Page Scripts -->

                    <script type="text/javascript">


                        function createRow(part_id,ad_code,code,make_title,model_name, year_from_category,status_img,model_year,price,views,cc,fuel,engine,status_class,ad_url,part_url,part_title) {

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

                            html += '<tr>';
                            html += '<td>';
                            if (status_img != null) {
                                var img_url = assets + 'media/icons/png/' + status_img;
                                html +='<img src=" "' + img_url +'" style="max-width:20px;height:auto;">';
                            }else {
                                html +='<div class="' + status_class + '" style="margin:0 auto;"></div>';
                            }
                            html += '</td>';
                            html += '<td><span><a href="' + part_url + '" class="ad_code">' + code + '</a></span></td>';
                            html += '<td><span>' + part_title + '</span></td>';
                            html += '<td><span>' + make_title + ' - ' + model_name +'</span></td>';
                            html += '<td><span>' + cc + ' - ' + fuel + ' - ' + engine + '</span></td>';
                            html += '<td><span>' + year_from_category + '</span></td>';
                            html += '<td><span>' + model_year + '</span></td>';
                            html += '<td><span><a href="' + ad_url + '" class="ad_code">' + ad_code + '</a></span></td>';
                            html += '<td><span>' + price + '</span></td>';
                            html += '<td><span>' + views + '</span></td>';
                            html += '<td>';
                            html += '<span>';
                            html += '<img class="action_img" code="' + code + '" id="setvisibility" src="{{ assets }}media/icons/svg/customize-parts.svg"/>';
                            if (status  == 1) {
                                html += '<img class="action_img" code="' + code + '" id="setvisibility" status="0" src="' + assets  + 'media/icons/svg/turn-visibility-off-button.svg"/>';
                            }else {
                                html += '<img class="action_img" code="' + code + '" id="turn_visibility_on" status="1" src="' + assets  + 'media/icons/svg/visibility.svg"/>';
                            }
                            html += '<img class="action_img" id="delete_part" status="3" code="' + code + '" src="' + assets  + 'media/icons/svg/trash.svg"/>';
                            html += '<img class="action_img" id="sold_part" status="4" code="' + code + '" src="' + assets  + 'media/icons/svg/coins.svg"/>';

                            html += '</span></td></tr>';

                            return html;
                        }

                        function getResults() {

                            $.ajax({
                                url: '{{ getPartsByFilter }}',
                                datatype: 'json',
                                data: {
                                    make_id: $("#makes option:selected").val(),
                                    model_id: $("#models option:selected").val(),
                                    price_from: $("#price_from").val(),
                                    price_to: $("#price_to").val(),
                                    categories_parts_id: $("#categories_parts_id option:selected").val(),
                                    part_status: $("#part_status option:selected").val(),
                                    part_location: $("#part_location option:selected").val(),
                                    free_text_filter: $("#free_text_filter").val(),
                                },
                                method: 'POST',
                                success: function (json) {
                                    var result = $.parseJSON(json);
                                    var rows = '';

                                    if (result['parts'].length > 0) {
                                        for (i = 0; i < result['parts'].length; i++) {
                                            rows += createRow(result['parts'][i]['parts_id'],
                                                result['parts'][i]['ad_code'],result['parts'][i]['code'],result['parts'][i]['make_title'],result['parts'][i]['model_name'],result['parts'][i]['year_from_category'], result['parts'][i]['status_img'],result['parts'][i]['model_year'],result['parts'][i]['price'],result['parts'][i]['views'],result['parts'][i]['cc_title'],result['parts'][i]['fuel_title'],result['parts'][i]['engine'],result['parts'][i]['class'],result['parts'][i]['ad_url'],result['parts'][i]['url'],result['parts'][i]['part_title']);

                                        }
                                    }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 setPartStatus(code,status) {

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

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

                                        if (visibility == 0) {
                                            $("#setvisibility[partid='" + partid + "']").attr('status',1);
                                            $("#setvisibility[partid='" + partid + "']").attr('src','{{ assets }}media/icons/svg/visibility.svg');
                                        }else {
                                            $("#setvisibility[partid='" + partid + "']").attr('status',0);
                                            $("#setvisibility[partid='" + partid + "']").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 code = $(this).attr('code');
                                var status = $(this).attr('status');

                                setPartStatus(code,status)
                            });//end change

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

                                var code = $(this).attr('code');
                                var status = $(this).attr('status');

                                setPartStatus(code,status)
                            });//end change

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

                                var code = $(this).attr('code');
                                var status = $(this).attr('status');

                                setPartStatus(code,status)
                            });//end change

                        });
                    </script>

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


