{% extends 'base.html.twig' %}

{% block body %}

    <!-- begin:: Page -->

    <!-- begin:: Header Mobile -->
    {% include 'common/header_mobile.html.twig' %}

    <!-- end:: Header Mobile -->

    <!-- begin:: Sidebar Contact Form -->
    <div class="sidebar-contact">
        <div class="toggle"></div>
        <h2>INQUIRE ABOUT THE PART</h2>
        <div class="scroll">
            <form name="request_form">
                <input type="text" name="" placeholder="Name">
                <input type="email" name="" placeholder="Email">
                <input type="rel" name="" placeholder="Phone Number">
                <textarea placeholder="Message here.."></textarea>
                <button class="btn btn-primary btn-large btn-block">
                    SUBMIT A FREE REQUEST
                </button>
            </form>
        </div>
    </div>
    <!-- end: Sidebar Contact Form -->
    <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-fluid home-header">
                                <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 class="home part" 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>{{ make }} {{ model }} {{ part_name }}</h1>
                                            </div>
                                            <div class="col-12">
                                                <h2>
                                                    <i class="fa fa-home color-grey"></i>
                                                    <span class="color-grey">&nbsp; &bull; &nbsp;
                                    Breakers for parts {{ make }} {{ model }} {{ part_name }}
                                </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 part-title">
                                                    <div class="row">
                                                        <div class="col-xl-8 col-lg-8 col-md-12 col-sm-12 col-12">
                                                            <section>
                                                                <article class="part-detail-mail-title font-weight-600">
                                                                    <img src="{{ assets }}brands/{{ make_logo }}"
                                                                         alt="{{ make }} " title="{{ make }} "/>
                                                                    <span>{{ make }} {{ model }} {{ part_name }}</span>
                                                                </article>
                                                            </section>
                                                        </div>
                                                        <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
                                                            <section>
                                                                <article class="text-right">
                                                                    <span class="color-grey">Item code in system:</span>
                                                                    <span class="color-red font-weight-600">{{ part_code }}</span>
                                                                </article>
                                                            </section>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                                    <div class="row">
                                                        <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                                                            <!--Carousel Wrapper-->
                                                            <section id="carousel-thumb"
                                                                     class="carousel slide carousel-fade carousel-thumbnails part-carousel"
                                                                     data-ride="carousel">
                                                                <!--Slides-->
                                                                <article>
                                                                    <div class="carousel-inner" role="listbox">
                                                                        {% if part_images %}
                                                                            {% set count = 0 %}
                                                                            {% for image in part_images %}
                                                                                {% if count == 0 %}
                                                                                    <div class="carousel-item active">
                                                                                        <img class="d-block w-100"
                                                                                             src="{{ image.src }}"
                                                                                             alt="First slide">
                                                                                    </div>
                                                                                {% else %}
                                                                                    <div class="carousel-item">
                                                                                        <img class="d-block w-100"
                                                                                             src="{{ image.src }}"
                                                                                             alt="Second slide">
                                                                                    </div>
                                                                                {% endif %}
                                                                                {% set count = count + 1 %}
                                                                            {% endfor %}
                                                                        {% endif %}
                                                                    </div>
                                                                    <!--/.Slides-->
                                                                    <!--Controls-->
                                                                    <a class="carousel-control-prev"
                                                                       href="#carousel-thumb" role="button"
                                                                       data-slide="prev">
                                                                        <span class="carousel-control-prev-icon"
                                                                              aria-hidden="true"></span>
                                                                        <span class="sr-only">Previous</span>
                                                                    </a>
                                                                    <a class="carousel-control-next"
                                                                       href="#carousel-thumb" role="button"
                                                                       data-slide="next">
                                                                        <span class="carousel-control-next-icon"
                                                                              aria-hidden="true"></span>
                                                                        <span class="sr-only">Next</span>
                                                                    </a>
                                                                </article>
                                                                <article class="part-carousel-indicators">
                                                                    <!--/.Controls-->
                                                                    <ul class="carousel-indicators">
                                                                        <li data-target="#carousel-thumb"
                                                                            data-slide-to="0" class="active">
                                                                            <img class="d-block w-100"
                                                                                 src="{{ asset('part/slider/2.png') }}"
                                                                                 class="img-fluid">
                                                                        </li>
                                                                        <li data-target="#carousel-thumb"
                                                                            data-slide-to="1">
                                                                            <img class="d-block w-100"
                                                                                 src="{{ asset('part/slider/2.png') }}"
                                                                                 class="img-fluid">
                                                                        </li>
                                                                        <li data-target="#carousel-thumb"
                                                                            data-slide-to="2">
                                                                            <img class="d-block w-100"
                                                                                 src="{{ asset('part/slider/2.png') }}"
                                                                                 class="img-fluid">
                                                                        </li>
                                                                    </ul>
                                                                </article>
                                                            </section>
                                                            <section class="part-related">
                                                                <article class="text-bold">
                                                                    Other parts of this car
                                                                </article>
                                                                <article>
                                                                    <ul class="row">
                                                                        <li><a class="color-black"> <img
                                                                                        src="{{ asset('part/related/1.png') }}"
                                                                                        alt=""></a></li>
                                                                        <li><a class="color-black"> <img
                                                                                        src="{{ asset('part/related/1.png') }}"
                                                                                        alt=""></a></li>
                                                                        <li><a class="color-black"> <img
                                                                                        src="{{ asset('part/related/1.png') }}"
                                                                                        alt=""></a></li>
                                                                        <li><a class="color-black"> <img
                                                                                        src="{{ asset('part/related/1.png') }}"
                                                                                        alt=""></a></li>
                                                                        <li class="more-related-part">
                                                                            <div>
                                                                                +56 <br>
                                                                                parts
                                                                            </div>
                                                                        </li>
                                                                    </ul>
                                                                </article>
                                                            </section>
                                                        </div>
                                                        <div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12">
                                                            <section class="part-price">
                                                                <article>
                                                                    <span class="fav-price-amount color-red">{{
                                                                        part_price|number_format(2, ',
', '.') }} €</span><br />
                                                                    {% if price_with_vat > 0 %}
                                                                    <span class="fav-price-amount-vat color-grey
                                                                    text-bold">{{ price_with_vat|number_format(2, ',
', '.') }} € (incl. VAT)</span>
                                                                    {% endif %}
                                                                </article>
                                                                <article>
                                                                    <table class="table ">
                                                                        <thead class="thead-light">
                                                                        <tr>
                                                                            <th colspan="4">Part Detail</th>
                                                                        </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                        {% if part_numbers %}
                                                                            <tr>
                                                                                <td colspan="1">Reference Codition</td>
                                                                                <td colspan="3"
                                                                                    class="text-bold">{{ model }}:
                                                                                    {% set pnumber = '' %}

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

                                                                                    {{ pnumber|trim(', ', 'right') }}
                                                                                </td>
                                                                            </tr>
                                                                        {% endif %}
                                                                        <tr>
                                                                            <td colspan="1">Codition</td>
                                                                            <td colspan="3">{{ part_condition }}</td>
                                                                        </tr>
                                                                        {% if comments %}
                                                                            <tr>
                                                                                <td colspan="1">Comment</td>
                                                                                <td colspan="3"><p> {{ comments }} </p>
                                                                                </td>
                                                                            </tr>
                                                                        {% endif %}
                                                                        </tbody>
                                                                    </table>
                                                                </article>
                                                            </section>
                                                        </div>
                                                        <div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12">
                                                            <section class="part-price">
                                                                <article>
                                                                    <table class="table">
                                                                        <thead class="thead-light">
                                                                        <tr>
                                                                            <th colspan="4">Car Description</th>
                                                                        </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                        <tr>
                                                                            <td colspan="1">Manufacturer</td>
                                                                            <td colspan="3">{{ make }}</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td colspan="1">Model</td>
                                                                            <td colspan="3">{{ model }}</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td colspan="1">Year</td>
                                                                            <td colspan="3">{{ year_range }}</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td colspan="1">Model Year</td>
                                                                            <td colspan="3">{{ model_year }}</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td colspan="1">Body type</td>
                                                                            <td colspan="3">{{ bodytype_title }}</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td colspan="1">Fuel type</td>
                                                                            <td colspan="3">{{ fuel_title }}</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td colspan="1">Engine power,KW</td>
                                                                            <td colspan="3">{{ power }}</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td colspan="1">Engine
                                                                                capacity,cm<sup>3</sup></td>
                                                                            <td colspan="3">{{ cc_title }}</td>
                                                                        </tr>
                                                                        {% if criteria is not empty%}
                                                                            {% for c in criteria %}
                                                                                {% if c.criteria is not empty %}
                                                                                    <tr>
                                                                                        <td>{{ c.title }}</td>
                                                                                        <td>{{ c.criteria[0].title }}</td>
                                                                                    </tr>
                                                                                {% endif %}
                                                                            {% endfor %}
                                                                        {% endif %}
                                                                    </table>
                                                                </article>
                                                            </section>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                                                            <section class="part-related contact-detail">
                                                                <article
                                                                        class="bg-red">{{ lbl_contact_detail }}</article>
                                                                <article>{{ company }}</article>
                                                                <article>
                                                                    <div class="row">
                                                                        <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>
                                                                        <div class="col-xl-6 col-lg-5 col-md-12 col-sm-12 col-12">
                                                                            <div class="row">
                                                                                <div class="col-1">
                                                                                    <i class="fa fa-clock color-red"></i>
                                                                                </div>
                                                                                <div class="col-9">
                                                                                    <table class="table">
                                                                                        <tbody>
                                                                                        {% for s in schedule %}
                                                                                            {% if s.time_morning_from!= '-1' and s.time_morning_to != '-1' %}
                                                                                                {% if s.is_current_day == 0 %}
                                                                                                <tr>
                                                                                                {% else %}
                                                                                                    <tr style="font-weight: 600;">
                                                                                                {% endif %}
                                                                                                    <td colspan="1">{{ s.description}}:</td>
                                                                                                    <td colspan="3"> {{ s.time_morning_from}} -
                                                                                                        {{ s.time_morning_to }}
                                                                                                        <br />
                                                                                                        {% if s.time_evening_from != '' %}
                                                                                                            {{ s.time_evening_from}} -
                                                                                                            {{ s.time_evening_to }}
                                                                                                        {% endif %}
                                                                                                    </td>
                                                                                                </tr>
                                                                                            {% endif %}
                                                                                        {% endfor %}
                                                                                        </tbody>
                                                                                    </table>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-xl-2 col-lg-3 col-md-12
                                                                        col-sm-12 col-12">
                                                                            <section>
                                                                                <article class="no-bg">
                                                                                    <button class="btn btn-primary btn-large">{{ lbl_show_phone }}
                                                                                        <i class="fa fa-phone-square"></i>
                                                                                    </button>
                                                                                    <h5 class="merchant_phone"
                                                                                        id="merchant_phone"><a
                                                                                                href="tel:{{ phone}}">{{ phone }}</a></h5>
                                                                                </article>
                                                                                <article class="part-view-all">
                                                                                    <a href="{{ all_merchant_cars_url }}"
                                                                                       class="color-red font-weight-600 text-center"> {{ lbl_view_all_cars }}</a>
                                                                                </article>
                                                                            </section>
                                                                        </div>
                                                                    </div>
                                                                </article>
                                                            </section>
                                                        </div>
                                                        <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                                                            <section class="part-related">
                                                                <article class="text-bold">
                                                                    {{ lbl_car_photos }}
                                                                </article>
                                                                <article>
                                                                    <ul class="row">
                                                                        <li><a class="color-black"> <img
                                                                                        src="{{ asset('part/related/1.png') }}"
                                                                                        alt=""></a></li>
                                                                        <li><a class="color-black"> <img
                                                                                        src="{{ asset('part/related/1.png') }}"
                                                                                        alt=""></a></li>
                                                                        <li><a class="color-black"> <img
                                                                                        src="{{ asset('part/related/1.png') }}"
                                                                                        alt=""></a></li>
                                                                        <li><a class="color-black"> <img
                                                                                        src="{{ asset('part/related/1.png') }}"
                                                                                        alt=""></a></li>
                                                                        <li class="more-related-part">
                                                                            <div>
                                                                                {{ lbl_all_photos|raw }}
                                                                            </div>
                                                                        </li>
                                                                    </ul>
                                                                </article>
                                                            </section>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                                            <section class="part-description">
                                                                <article>
                                                                    <h2 class="title">{{ lbl_seller_information_title }}</h2>
                                                                    {{ lbl_seller_information|raw }}
                                                                </article>
                                                                <article>
                                                                    <h2 class="title">{{ lbl_more_information_title }}</h2>
                                                                    {{ lbl_more_information|raw }}
                                                                </article>
                                                            </section>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        </main>

                        <!-- end body -->
                    <script>
                        $(document).ready(function(){
                            $('.toggle').click(function(){
                                $('.sidebar-contact').toggleClass('active')
                                $('.toggle').toggleClass('active')
                            })

                            $('.no-bg button').click(function(){
                                $(this).fadeOut(500).promise().done(function() {
                                        $('#merchant_phone').fadeIn(500);
                                        $('#merchant_phone').css('margin-left','-35px');
                                    }
                                );
                            })

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

{% endblock %}