{% 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="container ">
                            <div class="row">
                                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                    <div class="card-block-detail">
                                        <div class="col-12">
                                            <h1>{{ year }} {{ model_name }} {{ fuel_title }}</h1>
                                        </div>
                                        <div class="col-12">
                                            <h2>
                                                <i class="fa fa-home"></i>
                                                <span>&nbsp; &bull; &nbsp;
                                                    Breakers for parts
                                                    &nbsp; &bull; &nbsp;
                                                    {{ year }} {{ model_name }} {{ fuel_title }}
                                                </span>
                                            </h2>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-section"  >
                                <div class="container ">
                                    <div class="card-block bg-white mb30">
                                        <div class="row">
                                            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                                <section>
                                                    <article class="listing-detail-mail-title">
                                                        <img src="{{ assets }}brands/{{ make_logo }}" alt="{{ make_title }}" title="{{ make_title }}">
                                                        <span>{{ year }} {{ model_name }} {{ fuel_title }}</span>
                                                    </article>
                                                    <article style="margin-top:20px;">
                                                        {{ lbl_ad_description|raw }}
                                                    </article>
                                                </section>
                                            </div>
                                            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                                <div class="row">
                                                    <div class="col-12 col-xl-8 col-lg-8 col-md-8 col-sm-12">
                                                        <section>
                                                            <article class="listing-detail-img">
                                                                <img src="{{ image_model }}" alt="" style="width:100%;">
                                                                <div class="ribbon">
                                                                    <div class="row">
                                                                        <div class="col-8">
                                                                            <article class="ribbon-bg-red">
                                                                                {{ lbl_contact_detail }}
                                                                            </article>
                                                                        </div>
                                                                        <div class="col-4 text-center">
                                                                            <a href="">{{ lbl_get_multiple_offers }}</a>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row">
                                                                        <div class="col-8">
                                                                            <article class="ribbon-bg-white plus100">
                                                                                <div class="col-xl-4 col-lg-5 col-md-12 col-sm-12 col-12">
                                                                                    <div class="row">
                                                                                        <div class="col-2">
                                                                                            <i class="fa fa-map-pin color-red"></i>
                                                                                        </div>
                                                                                        <div class="col-10 address">
                                                                                            <div>{{ address }}</div>
                                                                                            <div>{{ city }}</div>

                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </article>
                                                                        </div>
                                                                        <div class="col-4">
                                                                            <button class="btn btn-primary btn-large btn-block">
                                                                                {{ lbl_submit_request }}
                                                                            </button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </article>
                                                            <article>

                                                            </article>
                                                        </section>
                                                    </div>
                                                    <div class="col-12 col-xl-4 col-lg-4 col-md-8 col-sm-12">
                                                        <section>
                                                            <article class="">
                                                                <table class="table">
                                                                    <thead class="thead-light">
                                                                    <tr>
                                                                        <th colspan="3">{{ lbl_car_description }}</th>
                                                                    </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                    {% if criteria_list is not empty%}
                                                                        {% for c in criteria_list %}
                                                                            {% if c.criteria is not empty %}
                                                                                <tr>
                                                                                    <td>
                                                                                        <img src="{{ assets }}media/icons/svg/{{ c.image }}" alt="{{ c.title }}" title="{{ c.title }}" class="image_category"/>
                                                                                    </td>
                                                                                    <td>{{ c.title }}</td>
                                                                                    <td>{{ c.criteria[0].title }}</td>
                                                                                </tr>
                                                                            {% endif %}
                                                                        {% endfor %}
                                                                    {% endif %}
                                                                    </tbody>
                                                                </table>
                                                            </article>
                                                        </section>
                                                    </div>
                                                </div>
                                                <div class="modal-send-request" style="display:none;">
                                                    <div class="modal-dialog">
                                                        <div class="modal-content">
                                                            <div class="modal-body">
                                                                <form >
                                                                    <div class="form-group row">
                                                                        <label for="input-vehicle" class="col-sm-2 col-form-label">{{ lbl_vehicle }}</label>
                                                                        <div class="col-sm-10">
                                                                            <span id="input-vehicle" class="form-control">{{ year }} {{ model_name }} {{ fuel_title }}</span>
                                                                        </div>
                                                                    </div>
                                                                    <div class="form-group row">
                                                                        <label for="input-name" class="col-sm-2 col-form-label">{{ lbl_name }}</label>
                                                                        <div class="col-sm-10">
                                                                            <input type="text" class="form-control" id="input-name" placeholder="Name">
                                                                        </div>
                                                                    </div>
                                                                    <div class="form-group row">
                                                                        <label for="input-country" class="col-sm-2 col-form-label">{{ lbl_country }}</label>
                                                                        <div class="col-sm-10">
                                                                            <input type="text" class="form-control" id="input-country" placeholder="Choose your country">
                                                                        </div>
                                                                    </div>
                                                                    <div class="form-group row">
                                                                        <label for="input-telephone" class="col-sm-2 col-form-label">{{ lbl_phone }}</label>
                                                                        <div class="col-sm-10">
                                                                            <input type="text" class="form-control" id="input-telephone" placeholder="Telephone">
                                                                        </div>
                                                                    </div>
                                                                    <div class="form-group row">
                                                                        <label for="input-email" class="col-sm-2 col-form-label">{{ lbl_email }}</label>
                                                                        <div class="col-sm-10">
                                                                            <input type="email" class="form-control" id="input-email" placeholder="Email">
                                                                        </div>
                                                                    </div>
                                                                    <div class="form-group row">
                                                                        <label for="input-message" class=" col-12 col-sm-12 col-form-label">{{ lbl_question_comment }}</label>
                                                                        <div class="col-12 col-sm-12">
                                                        <textarea class="form-control" id="input-message"
                                                                  placeholder="your question or comment"
                                                        ></textarea>
                                                                        </div>
                                                                    </div>
                                                                    <div class="form-group row">
                                                                        <div class="col-sm-12 col-12">
                                                                            <button type="submit" class="btn btn-primary btn-large btn-block">{{ lbl_send }}</button>
                                                                        </div>
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                                                <form  class="quick-search-form input-search">
                                                    <div class="form-group row">
                                                        <label for="input-search" class="col-sm-3 col-form-label"{{ lbl_find_your_parts }}</label>
                                                        <div class="col-sm-9">
                                                            <div class="input-group">
                                                                <input type="text" id="input-search" class="form-control" placeholder="{{ lbl_search }}">
                                                                <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <span class="svg-icon svg-icon-lg">
                                                        <!--begin::Svg Icon | path:/metronic/theme/html/demo4/dist/assets/media/svg/icons/General/Search.svg-->
                                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                                <rect x="0" y="0" width="24" height="24"></rect>
                                                                <path d="M14.2928932,16.7071068 C13.9023689,16.3165825 13.9023689,15.6834175 14.2928932,15.2928932 C14.6834175,14.9023689 15.3165825,14.9023689 15.7071068,15.2928932 L19.7071068,19.2928932 C20.0976311,19.6834175 20.0976311,20.3165825 19.7071068,20.7071068 C19.3165825,21.0976311 18.6834175,21.0976311 18.2928932,20.7071068 L14.2928932,16.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"></path>
                                                                <path d="M11,16 C13.7614237,16 16,13.7614237 16,11 C16,8.23857625 13.7614237,6 11,6 C8.23857625,6 6,8.23857625 6,11 C6,13.7614237 8.23857625,16 11,16 Z M11,18 C7.13400675,18 4,14.8659932 4,11 C4,7.13400675 7.13400675,4 11,4 C14.8659932,4 18,7.13400675 18,11 C18,14.8659932 14.8659932,18 11,18 Z" fill="#000000" fill-rule="nonzero"></path>
                                                            </g>
                                                        </svg>
                                                    </span>
                                                </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
                                                <ul class="search-status-list float-right">
                                                    <li style="color:#f6840a">Storage</li>
                                                    <li style="color:#bdbdbd">Destroyed</li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-xl-10 col-lg-10 col-md-12 col-sm-12 col-12">
                                                <table class="table table-bordered table-striped">

                                                    {% for part in parts %}

                                                    {% set cell = 0 %}

                                                    {% if part.parts %}
                                                        <tr>
                                                            <th colspan="4">
                                                                <img src="{{ assets }}media/icons/svg/{{ part.image }}" alt="{{ part.part_category_title }}" title="{{ part.part_category_title }}" class="image_category"/>
                                                                <span>{{ part.part_category_title }}</span>
                                                            </th>
                                                        </tr>
                                                        <tbody>
                                                        <tr>

                                                        {% for p in part.parts %}

                                                            {% if cell <= 2 %}

                                                                {% if p.title  %}
                                                                    <td><div class="kt-checkbox-inline"><label
                                                                                    class="kt-checkbox"><div
                                                                                        class="input-group"><div
                                                                                            class="input-group-prepend"><span class="input-group-text"><label class="kt-checkbox kt-checkbox--single kt-checkbox--success"><input type="checkbox" ><span ></span></label></span><a href="{{ p.url }}"><span class="input-group-text {{ p.class_ad_view }}" id="ad_parts" data-part="{{ p.part_id }}">{{ p.title }}
                                                                                             {% if p.images is not empty %}
                                                                                                 <img src="{{ assets }}media/icons/png/camera.png" style="max-width:20px;height: auto;margin-left:10px;margin-top:1px;" />

                                                                                             {% endif %}
                                                                                            </span></a></div></div></label>
                                                                        </div>
                                                                    </td>
                                                                {% else %}
                                                                    <td></td>
                                                                {% endif %}
                                                            {% set cell = cell + 1 %}

                                                            {% else %}
                                                                </tr><tr>
                                                                {% set cell = 0 %}
                                                             {% endif %}
                                                        {% endfor %}
                                                    </tbody>
                                                    {% endif  %}

                                                    {% endfor %}
                                                </table>
                                            </div>
                                            <div class="col-xl-2 col-lg-2 col-md-12 col-sm-12 col-12">
                                                <button type="submit" class="btn btn-primary btn-large btn-block">
                                                    {{ lbl_send_request_selected_parts|raw }}
                                                    <span id="count_parts">(4)</span>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </main>

                    <!-- end body -->
                    <script type="text/javascript">

                        jQuery(document).ready(function() {

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

                            });
                        });
                    </script>
                    <!-- begin:: Footer -->
                    {{ render(controller('App\\Controller\\Common\\Footer::index')) }}
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}