{% 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="add_ad_page">
                        <div class="kt-portlet">
                            <div class="kt-portlet__body kt-portlet__body--fit">
                                <div class="kt-grid  kt-wizard-v1 kt-wizard-v1--white" id="kt_projects_add" data-ktwizard-state="step-first">
                                    <div class="kt-grid__item">

                                        <!--begin: Form Wizard Nav -->
                                        <div class="kt-wizard-v1__nav">
                                            <div class="kt-wizard-v1__nav-items">

                                                <!--doc: Replace A tag with SPAN tag to disable the step link click -->
                                                <div class="kt-wizard-v1__nav-item" data-ktwizard-type="step" data-ktwizard-state="current">
                                                    <div class="kt-wizard-v1__nav-body">
                                                        <div class="kt-wizard-v1__nav-icon" id="basic_info_graph">
                                                            <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" class="kt-svg-icon kt-svg-icon--xl">
                                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                                    <rect x="0" y="0" width="24" height="24" />
                                                                    <path d="M4.875,20.75 C4.63541667,20.75 4.39583333,20.6541667 4.20416667,20.4625 L2.2875,18.5458333 C1.90416667,18.1625 1.90416667,17.5875 2.2875,17.2041667 C2.67083333,16.8208333 3.29375,16.8208333 3.62916667,17.2041667 L4.875,18.45 L8.0375,15.2875 C8.42083333,14.9041667 8.99583333,14.9041667 9.37916667,15.2875 C9.7625,15.6708333 9.7625,16.2458333 9.37916667,16.6291667 L5.54583333,20.4625 C5.35416667,20.6541667 5.11458333,20.75 4.875,20.75 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" />
                                                                    <path d="M2,11.8650466 L2,6 C2,4.34314575 3.34314575,3 5,3 L19,3 C20.6568542,3 22,4.34314575 22,6 L22,15 C22,15.0032706 21.9999948,15.0065399 21.9999843,15.009808 L22.0249378,15 L22.0249378,19.5857864 C22.0249378,20.1380712 21.5772226,20.5857864 21.0249378,20.5857864 C20.7597213,20.5857864 20.5053674,20.4804296 20.317831,20.2928932 L18.0249378,18 L12.9835977,18 C12.7263047,14.0909841 9.47412135,11 5.5,11 C4.23590829,11 3.04485894,11.3127315 2,11.8650466 Z M6,7 C5.44771525,7 5,7.44771525 5,8 C5,8.55228475 5.44771525,9 6,9 L15,9 C15.5522847,9 16,8.55228475 16,8 C16,7.44771525 15.5522847,7 15,7 L6,7 Z" fill="#000000" />
                                                                </g>
                                                            </svg> </div>
                                                        <div class="kt-wizard-v1__nav-label" id="basic_info_lbl">
                                                            {{ lbl_basic_info_step_title }}
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="kt-wizard-v1__nav-item" data-ktwizard-type="step">
                                                    <div class="kt-wizard-v1__nav-body">
                                                        <div class="kt-wizard-v1__nav-icon" id="available_parts_graph">
                                                            <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" class="kt-svg-icon kt-svg-icon--xl">
                                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                                    <rect x="0" y="0" width="24" height="24" />
                                                                    <path d="M11,20 L11,17 C11,16.4477153 11.4477153,16 12,16 C12.5522847,16 13,16.4477153 13,17 L13,20 L15.5,20 C15.7761424,20 16,20.2238576 16,20.5 C16,20.7761424 15.7761424,21 15.5,21 L8.5,21 C8.22385763,21 8,20.7761424 8,20.5 C8,20.2238576 8.22385763,20 8.5,20 L11,20 Z" fill="#000000" opacity="0.3" />
                                                                    <path d="M3,5 L21,5 C21.5522847,5 22,5.44771525 22,6 L22,16 C22,16.5522847 21.5522847,17 21,17 L3,17 C2.44771525,17 2,16.5522847 2,16 L2,6 C2,5.44771525 2.44771525,5 3,5 Z M4.5,8 C4.22385763,8 4,8.22385763 4,8.5 C4,8.77614237 4.22385763,9 4.5,9 L13.5,9 C13.7761424,9 14,8.77614237 14,8.5 C14,8.22385763 13.7761424,8 13.5,8 L4.5,8 Z M4.5,10 C4.22385763,10 4,10.2238576 4,10.5 C4,10.7761424 4.22385763,11 4.5,11 L7.5,11 C7.77614237,11 8,10.7761424 8,10.5 C8,10.2238576 7.77614237,10 7.5,10 L4.5,10 Z" fill="#000000" />
                                                                </g>
                                                            </svg> </div>
                                                        <div class="kt-wizard-v1__nav-label" id="available_parts_lbl">
                                                            {{ lbl_available_parts_step_title }}
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="kt-wizard-v1__nav-item" data-ktwizard-type="step">
                                                    <div class="kt-wizard-v1__nav-body">
                                                        <div class="kt-wizard-v1__nav-icon" id="review_submit_graph_new">
                                                            <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" class="kt-svg-icon kt-svg-icon--xl">
                                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                                    <rect x="0" y="0" width="24" height="24" />
                                                                    <path d="M13.2070325,4 C13.0721672,4.47683179 13,4.97998812 13,5.5 C13,8.53756612 15.4624339,11 18.5,11 C19.0200119,11 19.5231682,10.9278328 20,10.7929675 L20,17 C20,18.6568542 18.6568542,20 17,20 L7,20 C5.34314575,20 4,18.6568542 4,17 L4,7 C4,5.34314575 5.34314575,4 7,4 L13.2070325,4 Z" fill="#000000" />
                                                                    <circle fill="#000000" opacity="0.3" cx="18.5" cy="5.5" r="2.5" />
                                                                </g>
                                                            </svg> </div>
                                                        <div class="kt-wizard-v1__nav-label" id="review_submit_new">
                                                            {{ lbl_review_submit_step_title }}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!--end: Form Wizard Nav -->
                                    </div>
                                    <form class="kt-form" action="{{ add_ad_url }}" method="post" id="adform" enctype="multipart/form-data">
                                    <div class="kt-grid__item kt-grid__item--fluid kt-wizard-v1__wrapper">

                                        <!--begin: Form Wizard Form-->


                                            <!--begin: Form Wizard Step 1-->
                                            <div class="kt-wizard-v1__content" id="step_1" data-ktwizard-type="" data-ktwizard-state="">
                                                <div class="kt-section kt-section--first">
                                                    <div class="kt-wizard-v1__form">
                                                        <div class="row">
                                                            <div class="col-xl-12">
                                                                <div class="kt-section__body">
                                                                    <div class="kt-heading kt-heading--md">{{ lbl_select_car_title }}</div>
                                                                    <div class="form-group row">

                                                                        <div class="col-lg-4 col-xl-4">
                                                                            <label class="col-xl-12 col-lg-12 col-form-label">{{ lbl_select_make_title }}</label>
                                                                            <select class="form-control select_filter_box" name="makes" id="makes">
                                                                                <option selected="selected" value="-1">{{ lbl_select }}</option>
                                                                                {% for make in makes %}
                                                                                    <option value="{{ make.make_id }}">{{ make.title }}</option>
                                                                                {% endfor %}
                                                                            </select>
                                                                        </div>

                                                                        <div class="col-lg-4 col-xl-4">
                                                                            <label class="col-xl-12 col-lg-12 col-form-label">{{ lbl_select_model_title }}</label>
                                                                            <select class="form-control select_filter_box" name="models" id="models">
                                                                                <option>{{ lbl_select }}</option>
                                                                            </select>
                                                                        </div>

                                                                        <div class="col-lg-4 col-xl-4">
                                                                            <label class="col-xl-12 col-lg-12 col-form-label">{{ lbl_select_year_title }}</label>
                                                                            <select class="form-control select_filter_box" name="years" id="years">
                                                                                <option>{{ lbl_select }}</option>
                                                                            </select>
                                                                        </div>

                                                                    </div>
                                                                    <div class="form-group row">
                                                                        <div class="col-lg-4 col-xl-4">
                                                                            <label class="col-xl-12 col-lg-12 col-form-label">{{ lbl_select_fuel_title }}</label>
                                                                            <select class="form-control select_filter_box" name="fuel" id="fuel">
                                                                                <option selected="selected" value="-1">{{ lbl_select }}</option>
                                                                            </select>
                                                                        </div>
                                                                        <div class="col-lg-4 col-xl-4">
                                                                            <label class="col-xl-12 col-lg-12 col-form-label">{{ lbl_select_cc_title }}</label>
                                                                            <select class="form-control select_filter_box" name="cc" id="cc">
                                                                                <option selected="selected" value="-1">{{ lbl_select }}</option>
                                                                            </select>
                                                                        </div>
                                                                        <div class="col-lg-4 col-xl-4">
                                                                            <label class="col-xl-12 col-lg-12 col-form-label">{{ lbl_select_bodytype_title }}</label>
                                                                            <select class="form-control select_filter_box" name="bodytype" id="bodytype">
                                                                                <option selected="selected" value="-1">{{ lbl_select }}</option>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                    <div class="kt-separator kt-separator--space-md kt-separator--border-dashed"></div>
                                                                    <div class="kt-heading kt-heading--md">{{ lbl_your_model_title }}</div>
                                                                    <div class="form-group row">
                                                                        <div class="col-sm-12 kt-radio-inline" id="model_images"></div>


                                                                    </div>
                                                                    <div class="row alert alert-danger" role="alert" style="display:none;" id="error_model">{{ lbl_error_no_model_selection }}</div>
                                                                    <div class="kt-separator kt-separator--space-md kt-separator--border-dashed"></div>
                                                                    <div class="col-sm-6 float-left">
                                                                        {% for categories in criteria_list %}
                                                                            <div class="form-group row">
                                                                                <label class="col-xl-12 col-lg-12 col-form-label">{{ categories.title }}</label>
                                                                                <div class="col-xl-12 col-lg-12">
                                                                                    <select class="form-control select_filter_box" name="criteria[]" id="criteria" data-category-title="{{ categories.title }}">
                                                                                        <option value="-1">{{ lbl_select }}</option>
                                                                                        {% for criteria in categories.criteria %}
                                                                                            <option value="{{ criteria.criteria_id }}" >{{ criteria.title }}</option>
                                                                                        {% endfor %}
                                                                                    </select>
                                                                                </div>
                                                                            </div>
                                                                        {% endfor %}
                                                                    </div>
                                                                    <div class="col-sm-6 float-left">
                                                                        <div class="form-group row">
                                                                            <label class="col-xl-12 col-lg-12 col-form-label">{{ lbl_klm }}</label>
                                                                            <div class="col-xl-12 col-lg-12" id="klm_status">
                                                                                <input type="text" onkeypress="return allowNumbersOnly(event)" name="klm" id="klm" placeholder="{{ lbl_insert }}" value="">
                                                                                <label class="col-sm-12 kt-checkbox">
                                                                                    <div class="input-group">
                                                                                        <label class="kt-checkbox kt-checkbox--single kt-checkbox--success criteria_checkbox_label unchecked_part_label">
                                                                                            <input type="checkbox" name="klm_status"><span></span>{{ lbl_not_show_to_visitor }}
                                                                                        </label>
                                                                                    </div>
                                                                                </label>
                                                                            </div>
                                                                        </div>

                                                                        <div class="form-group row">
                                                                            <label class="col-xl-12 col-lg-12 col-form-label">{{ lbl_vin }}</label>
                                                                            <div class="col-xl-12 col-lg-12" id="vin_status">
                                                                                <input maxlength="17" onkeypress="return allowNumbersOnly(event)" type="text" name="vin" id="vin" placeholder="{{ lbl_insert }}" value="">
                                                                                <label class="col-sm-12 kt-checkbox">
                                                                                    <div class="input-group">
                                                                                        <label class="kt-checkbox kt-checkbox--single kt-checkbox--success criteria_checkbox_label unchecked_part_label">
                                                                                            <input type="checkbox" name="vin_status"><span></span>{{ lbl_not_show_to_visitor }}
                                                                                        </label>
                                                                                    </div>
                                                                                </label>
                                                                            </div>
                                                                        </div>
                                                                        <div class="form-group row">
                                                                            <label class="col-xl-12 col-lg-12
                                                                            col-form-label">{{ lbl_plate }}</label>
                                                                            <div class="col-xl-12 col-lg-12" id="plate">
                                                                                <input maxlength="17" type="text"
                                                                                       name="plate" id="plate"
                                                                                       placeholder="{{ lbl_insert }}"
                                                                                       value="">
                                                                                <label class="col-sm-12 kt-checkbox">
                                                                                    <div class="input-group">
                                                                                        <label class="kt-checkbox kt-checkbox--single kt-checkbox--success criteria_checkbox_label unchecked_part_label">
                                                                                            <input type="checkbox"
                                                                                                   name="plate_status"><span></span>{{ lbl_not_show_to_visitor }}
                                                                                        </label>
                                                                                    </div>
                                                                                </label>
                                                                            </div>
                                                                        </div>
                                                                        <div class="form-group row">
                                                                            <label class="col-xl-12 col-lg-12 col-form-label">{{ lbl_purchase_price }}</label>
                                                                            <div class="col-xl-12 col-lg-12">
                                                                                <input maxlength="17" onkeypress="return allowNumbersOnly(event)" type="text" name="adprice" id="adprice" placeholder="{{ lbl_insert }}" value="0.00"> {{ lbl_only_for_merchant }}
                                                                            </div>
                                                                        </div>
                                                                        {% if ad_type == 1 %}
                                                                            <div class="form-group row">
                                                                                <label class="col-xl-12 col-lg-12 col-form-label">{{ lbl_sale_price }}</label>
                                                                                <div class="col-xl-12 col-lg-12">
                                                                                    <input maxlength="17" onkeypress="return allowNumbersOnly(event)" type="text" name="sale_price" id="sale_price" placeholder="{{ lbl_insert }}" value="0.00">
                                                                                </div>
                                                                            </div>
                                                                        {% endif %}
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="form-group row">
                                                                <label class="col-form-label col-lg-3 col-sm-12">{{ lbl_images }}</label>
                                                                <div class="col-lg-6 col-md-9 col-sm-12">
                                                                    <label class="btn btn-brand" style="width:100px;">
                                                                        <i class="fa fa-image"></i>
                                                                        <input type="file" multiple="multiple" accept="image/*" name="ad_images[]" style="display: none;" onchange="GetFileName()"/>
                                                                    </label>
                                                                    <div id="fp"></div>
                                                                </div>
                                                            </div>
                                                            <div class="form-group row">
                                                                <label class="col-xl-12 col-lg-12 col-form-label">{{ lbl_comments }}</label>
                                                                <div class="col-xl-12 col-lg-12">
                                                                    <textarea name="comments" id="comments" class="col-xl-10 col-lg-10"></textarea>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--end: Form Wizard Step 1-->

                                            <!--begin: Form Wizard Step 2-->
                                            <div class="kt-wizard-v1__content" id="step_2" data-ktwizard-type="">
                                                <div class="kt-section kt-section--first">
                                                    <div class="kt-wizard-v1__form">
                                                        <div class="row">
                                                            <div class="col-xl-12">
                                                                <div class="kt-section__body"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        <input type="hidden" name="model_id" value="0" id="model_id"/>
                                            <!--end: Form Wizard Step 2-->
                                    </form>
                                            <!--begin: Form Wizard Step 3-->
                                            <div class="kt-wizard-v1__content" id="step_3" data-ktwizard-type="">

                                                <div class="col-sm-12">
                                                    <table class="table review_table">
                                                        <tr class="head_row">
                                                            <td colspan="2">{{ lbl_general_information }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td>{{ lbl_make }}</td>
                                                            <td><span id="make_review"></span></td>
                                                        </tr>
                                                        <tr>
                                                            <td>{{ lbl_model }}</td>
                                                            <td><span id="model_review"></span></td>
                                                        </tr>
                                                        <tr>
                                                            <td>{{ lbl_model_year }}</td>
                                                            <td><span id="year_review"></span></td>
                                                        </tr>
                                                        <tr>
                                                            <td>{{ lbl_fuel }}</td>
                                                            <td><span id="fuel_review"></span></td>
                                                        </tr>
                                                        <tr>
                                                            <td>{{ lbl_cc }}</td>
                                                            <td><span id="cc_review"></span></td>
                                                        </tr>
                                                        <tr>
                                                            <td>{{ lbl_bodytype }}</td>
                                                            <td><span id="bodytype_review"></span></td>
                                                        </tr>
                                                        <tr>
                                                            <td></td>
                                                            <td></td>
                                                        </tr>
                                                    </table>
                                                    <table class="table review_table" id="table_criteria"></table>
                                                </div>

                                                <div class="kt-heading kt-heading--md">{{ lbl_parts_title }}</div>

                                                <div class="kt-form__section kt-form__section--first">
                                                    <div class="kt-wizard-v3__review">
                                                        <div class="kt-wizard-v3__review-item">
                                                            <div class="kt-wizard-v3__review-content" id="parts_info">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!--end: Form Wizard Step 3-->

                                            <!--begin: Form Actions -->
                                            <div class="kt-form__actions">

                                                <div class="btn btn-brand btn-md btn-tall btn-wide kt-font-bold kt-font-transform-u" data-ktwizard-type="" id="btn_prev" style="display:none;">{{ lbl_previous }}</div>
                                                <button class="btn btn-brand btn-md btn-tall btn-wide kt-font-bold kt-font-transform-u" data-ktwizard-type="" id="btn_submit" style="display:none;">{{ lbl_review_submit_step_title}}</button>
                                                <div class="btn btn-brand btn-md btn-tall btn-wide kt-font-bold kt-font-transform-u" data-ktwizard-type="" id="btn_next" >{{ lbl_next_step }}</div>
                                            </div>
                                            <!--end: Form Actions -->
                                        <!--end: Form Wizard Form-->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- end:: Content -->

                    <!-- begin:: Footer -->

                    <!--begin::Page Scripts(used by this page) -->
                    <script src="{{ assets }}js/pages/custom/projects/add-project.js" type="text/javascript"></script>
                    <!--end::Page Scripts -->

                    <!--reusable ajax scripts -->
                        {{ render(controller('App\\Controller\\Common\\Scripts::index')) }}
                    <!--end reusable ajax scripts -->

<script type="text/javascript">

jQuery(document).ready(function() {

    //init global variables
    var step = 1;
    var modelid = 0;
    var fpa = '{{ fpa }}';
    var adtype = '{{ ad_type }}';
    var assets = '{{ assets }}';

    $('#adform').css({'width':'90%'});

    changeStepColor(step);

    if (adtype == 1) {
        $('#btn_submit').show();
        $('#btn_prev').hide();
        $('#btn_next').hide();
    }

    //click photo
    $(document).on('click', '#img_model', function (e) {
        modelid = $(this).attr('modelid');
        $('#model_id').val(modelid);
    });

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

        $('#error_model').hide(500);

        $('#step_' + step).hide();

        step  += 1;

        if (step == 1) { //show first screen with main data

            //check if model selected
            if ($('#model_id').val() == 0) {

                //show error alert
                $('#error_model').show(500);

                //init step
                step = 0;

                //scroll to top
                $('html,body').animate({ scrollTop: 0 }, 'slow');

                return false;
            }

            $('#btn_submit').hide();
            $('#btn_prev').hide();
            $('#btn_next').show();
        }

        if (step == 2) { //show second screen with parts data



            $('#btn_prev').show();
            $('#btn_submit').hide();

            changeStepColor(step);

            //run ajax and get parts based on criteria
            var criterialist = [];

            $("select[id='criteria']").each(function() {

                if ($(this).val() > 0) {
                    criterialist.push($(this).val());
                }
            });

            $.ajax({
                url: '{{ get_parts_list }}',
                datatype: 'json',
                data: {
                    criteria: JSON.stringify(criterialist),
                },
                method: 'POST',
                complete: function () {
                    $('#step_' + step).show();
                    $('#btn_next').show();
                },
                success: function (json) {
                    var result = $.parseJSON(json);
                    var html = '';
                    if (result) {
                        for (i = 0; i < result.length; i++) {

                            html +='<div class="accordion accordion-light accordion-toggle-arrow" id="accordion' + i
                                + '"><div class="card"><div class="card-header" id="headingOne5"><div ' +
                                'class="card-title collapsed" data-toggle="collapse" data-target="#collapseOne' + i +
                                '" aria-expanded="false" aria-controls="collapseOne' + i + '"><img ' +
                                'class="image_category" src="' + assets + 'media/icons/svg/part-categories/' +
                                result[i]['image'] + '" />' + result[i]['part_category_title'] + '</div></div><div ' +
                                'id="collapseOne' + i + '" class="collapse" aria-labelledby="headingOne' + i + '" ' +
                                'data-parent="#accordion' + i + '"><div class="card-body"><div style="width:100%;' +
                                'float:left;margin-bottom:15px;"><div class="form-check"><input ' +
                                'class="form-check-input" type="checkbox" value="" onchange="chkAllParts(' + result[i]['categories_parts_id']  + ')" data-category-id="' + result[i]['categories_parts_id'] + '"><label class="form-check-label" onclick="chkAllParts(' + result[i]['categories_parts_id']  + ')">{{ lbl_check_all }}</label></div></div></div>'

                            for (a = 0; a < result[i]['parts'].length; a++) {

                                html += '<div class="col-lg-4 col-xl-4 float-left"><div class="kt-checkbox-inline"><label class="kt-checkbox"><div class="input-group"><label class="kt-checkbox kt-checkbox--single kt-checkbox--success"><input type="checkbox" value="' + result[i]['parts'][a]['part_id'] + '" id="parts_selections" name="parts[]" chkid="' + result[i]['parts'][a]['part_id'] + '" data-category-id="' + result[i]['categories_parts_id'] + '" data-category-title="' + result[i]['part_category_title'] + '" data-category-image="' + result[i]['image'] + '"><span></span></label><label class="unchecked_part_label" partid="' + result[i]['parts'][a]['part_id'] + '">' + result[i]['parts'][a]['title'] + '</label></div></label></div></div>';
                            }

                            html += '</div></div></div></div>';
                        }
                    }

                    $('#step_2 .kt-section__body').html('');
                    $('#step_2 .kt-section__body').html(html);
                } //end function
            }); //end ajax
        }

        if (step == 3) { //show third screen with review data

            changeStepColor(step);

            $('#btn_prev').show();
            $('#btn_next').hide();
            $('#btn_submit').show();

            $('#make_review').html($('#makes option:selected').text());
            $('#model_review').html($('#models option:selected').text());
            $('#year_review').html($('#years option:selected').text());
            $('#fuel_review').html($('#fuel option:selected').text());
            $('#cc_review').html($('#cc option:selected').text());
            $('#bodytype_review').html($('#bodytype option:selected').text());

            var html = '';
            html += '<tr class="head_row"><td colspan="2">{{ lbl_options }}</td></tr>';

            //pairno ola ta combo apo ta critiria pou exoun timi
            $("select[id='criteria']").each(function() {

                if ($(this).val() > 0) {

                    html += '<tr><td>'+ $(this).attr('data-category-title') +'</td>';
                    html += '<td><span>'+ $('option:selected',this).text() +'</span></td></tr>';
                }else {
                    html += '<tr><td>'+ $(this).attr('data-category-title') +'</td>';
                    html += '<td><span>-</span></td></tr>';
                }

                $("#table_criteria").html('');
                $("#table_criteria").html(html);
            });

            $('#options_info').html(html);

            var catid = 0;

            html = '';

            //pairno ola ta combo apo ta check pou einai on
            $("input[id='parts_selections']").filter(':checked').map(function() {

                var chkid = $(this).attr('chkid');
                var curid = $(this).val();

                //make review table
                if (catid == $(this).attr('data-category-id')) {

                    html += '<tr><td>' + $("label[partid='" + curid + "']").text() + '</td></tr>';
                }else {
                    if (i > 0) {
                        html += '</tbody></table></div></div></div></div>';
                    }

                    html += '<div class="accordion accordion-light  accordion-toggle-arrow" id="accordion' + i + '"><div class="card"><div class="card-header" id="headingOne5"><div class="card-title collapsed" data-toggle="collapse" data-target="#collapseOne' + i + '" aria-expanded="false" aria-controls="collapseOne' + i + '"><img class="image_category" src="' + assets + 'media/icons/svg/part-categories/' + $(this).attr('data-category-image') + '" />' + $(this).attr('data-category-title') + '</div></div><div id="collapseOne' + i + '" class="collapse" aria-labelledby="headingOne' + i + '" data-parent="#accordion' + i + '"><div class="card-body">';

                    html += '<table class="table table-bordered table-striped" data-title="' + $(this).attr('data-category-title') + '">';
                    html += '<tr><thead><th>{{ lbl_name }}</th>';
                    html += '<tr><td>' + $("label[partid='" + curid + "']").text() + '</td></tr>';
                }

                i++;

                catid = $(this).attr('data-category-id');
            });

            $('#customize_parts').html('');
            $('#customize_parts').html(html);

            $('#parts_info').html(html);

            $('#step_3').show();
        }
    });

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


        $('#step_' + step).hide();

        step = step - 1;

        $('#step_' + step).show();

        if (step == 1) {

            $('#btn_submit').hide();
            $('#btn_prev').hide();
            $('#btn_next').show();

            changeStepColor(step);

            return false;

        }else if (step == 2) {

            $('#btn_prev').hide();
            $('#btn_next').show();
            $('#btn_submit').hide();

            changeStepColor(step);

        }else if (step == 3) {

            $('#btn_submit').hide();
            $('#btn_prev').show();
            $('#btn_next').show();

            changeStepColor(step);
        }

        $('#step_' + step).show();


    });


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

