{% 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="edit_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="customize_parts_graph">
                                                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                                 xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
                                                                 y="0px" width="40px" height="40px"
                                                                 viewBox="0 0 593.65 593.65"
                                                                 class="kt-svg-icon kt-svg-icon--xl"
                                                                 xml:space="preserve">
	<g>
        <path d="M566.104,323.594h-21.531c-5.826,0-12.619-5.272-14.834-11.515c-2.053-5.786-4.465-11.545-7.16-17.121
			c-2.871-5.93-1.814-14.418,2.305-18.537l15.326-15.328c10.738-10.737,10.738-28.21,0-38.948l-24.877-24.877
			c-5.203-5.202-12.117-8.066-19.475-8.066c-7.355,0-14.271,2.864-19.473,8.066l-15.328,15.328
			c-2.461,2.46-6.559,3.929-10.957,3.929c-2.754,0-5.375-0.563-7.574-1.628c-5.578-2.699-11.346-5.113-17.145-7.176
			c-6.24-2.215-11.512-9.008-11.512-14.832v-21.533c0-15.184-12.354-27.54-27.541-27.54h-35.189
			c-15.188,0-27.541,12.356-27.541,27.54v21.533c0,5.826-5.271,12.62-11.512,14.832c-5.791,2.057-11.557,4.465-17.129,7.158
			c-2.163,1.046-4.847,1.622-7.558,1.622c-4.416,0-8.525-1.472-10.992-3.938l-15.303-15.297c-5.202-5.202-12.118-8.066-19.477-8.066
			c-7.356,0-14.272,2.864-19.474,8.063l-24.902,24.887c-5.205,5.199-8.069,12.114-8.072,19.471c0,7.356,2.864,14.272,8.066,19.474
			l15.328,15.328c4.122,4.122,5.181,12.616,2.311,18.55c-2.69,5.566-5.098,11.322-7.151,17.111
			c-2.215,6.239-9.005,11.512-14.832,11.512h-21.53c-15.187,0-27.54,12.356-27.54,27.54v35.19c0,15.184,12.353,27.54,27.54,27.54
			h21.53c5.827,0,12.62,5.269,14.835,11.509c2.05,5.773,4.458,11.532,7.157,17.111c2.868,5.93,1.806,14.425-2.319,18.55
			l-15.328,15.327c-10.737,10.737-10.737,28.21,0,38.947l24.912,24.915c5.202,5.202,12.118,8.066,19.474,8.066
			c7.356,0,14.272-2.864,19.474-8.066l15.328-15.327c2.466-2.467,6.573-3.938,10.985-3.938c2.751,0,5.364,0.56,7.558,1.622
			c5.576,2.695,11.333,5.104,17.115,7.157c6.238,2.215,11.512,9.008,11.512,14.835v21.533c0,15.184,12.354,27.539,27.539,27.539
			h35.191c15.186,0,27.539-12.355,27.539-27.539v-21.533c0-5.827,5.273-12.62,11.512-14.832c5.793-2.057,11.559-4.465,17.131-7.157
			c2.162-1.047,4.846-1.622,7.557-1.622c4.416,0,8.523,1.472,10.99,3.938l15.326,15.327c5.203,5.202,12.115,8.066,19.471,8.066
			c7.359,0,14.275-2.867,19.477-8.072l24.889-24.902c10.73-10.74,10.73-28.213-0.004-38.951l-15.314-15.321
			c-4.119-4.118-5.176-12.613-2.309-18.547c2.693-5.569,5.098-11.331,7.154-17.12c2.213-6.239,9.004-11.509,14.83-11.509h21.529
			c15.188,0,27.541-12.356,27.541-27.54v-35.19C593.643,335.948,581.287,323.594,566.104,323.594z M449.441,368.729
			c0,44.502-36.207,80.708-80.709,80.708c-44.5,0-80.707-36.206-80.707-80.708c0-44.501,36.207-80.707,80.707-80.707
			C413.234,288.022,449.441,324.225,449.441,368.729z" fill="#000000"/>
        <path d="M201.868,146.904c0.521-1.466,2.262-2.702,3.082-2.702h10.784c10.123,0,18.36-8.234,18.36-18.36v-17.595
			c0-10.125-8.237-18.36-18.36-18.36h-10.781c-0.82,0-2.561-1.236-3.081-2.702c-1.083-3.051-2.353-6.089-3.776-9.024
			c-0.664-1.374-0.312-3.446,0.263-4.021l7.666-7.665c7.157-7.161,7.157-18.807,0-25.964l-12.439-12.439
			c-3.467-3.467-8.079-5.376-12.983-5.376c-4.905,0-9.517,1.913-12.984,5.379l-7.662,7.663c-0.239,0.239-1.059,0.621-2.237,0.621
			c-0.67,0-1.319-0.128-1.784-0.355c-2.94-1.423-5.976-2.693-9.024-3.773c-1.469-0.52-2.705-2.265-2.705-3.082V18.366
			c0-10.126-8.237-18.36-18.36-18.36h-17.595c-10.123,0-18.36,8.234-18.36,18.36v10.783c0,0.82-1.236,2.558-2.702,3.079
			c-3.063,1.086-6.102,2.359-9.03,3.776c-0.462,0.223-1.114,0.352-1.784,0.352c-1.178,0-1.995-0.379-2.233-0.618l-7.666-7.663
			c-3.467-3.467-8.078-5.376-12.983-5.376s-9.514,1.909-12.98,5.376L28.073,40.514c-7.157,7.161-7.157,18.81,0,25.967l7.662,7.662
			c0.575,0.575,0.93,2.647,0.266,4.018c-1.423,2.938-2.693,5.976-3.776,9.027c-0.52,1.466-2.265,2.705-3.082,2.705H18.36
			C8.238,89.893,0,98.127,0,108.253v17.595c0,10.123,8.235,18.36,18.357,18.36h10.784c0.82,0,2.561,1.236,3.082,2.702
			c1.083,3.054,2.353,6.089,3.776,9.024c0.664,1.374,0.312,3.445-0.263,4.021l-7.666,7.666c-3.467,3.467-5.376,8.079-5.376,12.983
			c0,4.905,1.909,9.514,5.379,12.984l12.439,12.436c3.467,3.467,8.078,5.376,12.983,5.376s9.514-1.909,12.98-5.376l7.666-7.665
			c0.238-0.239,1.059-0.621,2.237-0.621c0.67,0,1.319,0.128,1.784,0.354c2.941,1.423,5.977,2.693,9.024,3.773
			c1.469,0.52,2.705,2.264,2.705,3.081v10.784c0,10.125,8.238,18.36,18.36,18.36h17.595c10.123,0,18.36-8.234,18.36-18.36v-10.781
			c0-0.82,1.236-2.558,2.702-3.078c3.051-1.083,6.086-2.353,9.024-3.776c0.465-0.227,1.117-0.355,1.787-0.355
			c1.178,0,1.995,0.382,2.237,0.621l7.666,7.665c3.467,3.467,8.078,5.376,12.983,5.376s9.514-1.909,12.98-5.376l12.439-12.438
			c7.157-7.161,7.157-18.807,0-25.964l-7.662-7.662c-0.576-0.575-0.931-2.65-0.267-4.021
			C199.519,152.987,200.788,149.952,201.868,146.904z M152.811,117.044c0,19.719-16.043,35.765-35.762,35.765
			c-19.722,0-35.765-16.043-35.765-35.765s16.043-35.765,35.765-35.765C136.767,81.279,152.811,97.323,152.811,117.044z"
              fill="#000000"/>
    </g>
</svg>
                                                        </div>
                                                        <div class="kt-wizard-v1__nav-label" id="customize_parts_lbl">
                                                            {{ lbl_customize_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">
                                                            <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_lbl">
                                                            {{ lbl_review_submit_step_title }}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!--end: Form Wizard Nav -->
                                    </div>
                                    <div class="kt-grid__item kt-grid__item--fluid kt-wizard-v1__wrapper">

                                        <!--begin: Form Wizard Form-->
                                        <div class="kt-form" id="adform_div" style="width:90%;">

                                            <form class="kt-form" action="{{ edit_ad_url }}" method="post" id="adform">
                                                <!--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 make_list %}
                                                                                        {% if make.make_id == makeid %}
                                                                                            <option value="{{ make.make_id }}"
                                                                                                    selected>{{ make.title }}</option>
                                                                                        {% else %}
                                                                                            <option value="{{ make.make_id }}">{{ make.title }}</option>
                                                                                        {% endif %}
                                                                                    {% 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>
                                                                                    {% for model in models_list %}
                                                                                        {% if model.model_name == modelname %}
                                                                                            <option value="{{ modelname }}"
                                                                                                    selected>{{ model.model_name }}</option>

                                                                                        {% endif %}
                                                                                    {% endfor %}
                                                                                </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>
                                                                                    {% for years in years_list %}
                                                                                        {% if years == modelyear %}
                                                                                            <option value="{{ years }}"
                                                                                                    selected>{{ modelyear }}</option>

                                                                                        {% endif %}
                                                                                    {% endfor %}
                                                                                </select>
                                                                                <input type="hidden" name="model_year"
                                                                                       value="{{ modelyear }}"/>
                                                                            </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>
                                                                                    {% for fuel in fuel_list %}
                                                                                        {% if fuel.fuel_type_id == fuelid %}
                                                                                            <option value="{{ fuel.fuel_type_id }}"
                                                                                                    selected>{{ fuel.title }}</option>

                                                                                        {% endif %}
                                                                                    {% endfor %}
                                                                                </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>
                                                                                    {% for cc in cc_list %}
                                                                                        {% if cc.cc_id == ccid %}
                                                                                            <option value="{{ cc.cc_id }}"
                                                                                                    selected>{{ cc.title }}</option>

                                                                                        {% endif %}
                                                                                    {% endfor %}
                                                                                </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>
                                                                                    {% for bodytype in bodytype_list %}

                                                                                        {% if bodytype.body_type_id == bodytypeid %}
                                                                                            <option value="{{ bodytype.body_type_id }}"
                                                                                                    selected>{{ bodytype.title }}</option>
                                                                                        {% endif %}

                                                                                    {% endfor %}
                                                                                </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="kt-radio-inline"
                                                                                 id="model_images">
                                                                                <div class="col-sm-12 float-left"><a
                                                                                            data-caption="{{ description }}"
                                                                                            data-fancybox
                                                                                            href="{{ image_src }}"><img
                                                                                                src="{{ image_src }}"
                                                                                                class="model_image"/></a>
                                                                                </div>
                                                                                {% if description %}
                                                                                    <div class="col-sm-12 float-left">{{ lbl_model }}
                                                                                        : {{ description }}</div>
                                                                                {% endif %}
                                                                                {% if power %}
                                                                                    <div class="col-sm-12 float-left">{{ lbl_power }}
                                                                                        : {{ power }}ps
                                                                                    </div>
                                                                                {% endif %}
                                                                                {% if engine %}
                                                                                    <div class="col-sm-12 float-left"> {{ lbl_engine }}
                                                                                        : {{ engine }}</div>
                                                                                    <span></span>
                                                                                {% endif %}
                                                                                {% if year_from and year_to %}
                                                                                    <div class="col-sm-12 float-left">{{ lbl_model_year }}
                                                                                        : {{ year_from }}
                                                                                        - {{ year_to }}</div>
                                                                                {% endif %}
                                                                                {% if edition_model %}
                                                                                    <div class="col-sm-12 float-left">{{ lbl_edition_model }}
                                                                                        : {{ edition_model }} </div>
                                                                                {% endif %}
                                                                            </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 %}
                                                                                                {% if criteria.criteria_id in ad_criteria %}
                                                                                                    <option value="{{ criteria.criteria_id }}"
                                                                                                            selected>{{ criteria.title }}</option>
                                                                                                {% else %}
                                                                                                    <option value="{{ criteria.criteria_id }}">{{ criteria.title }}</option>
                                                                                                {% endif %}
                                                                                            {% 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="{{ klm }}">
                                                                                    <label class="col-sm-12 kt-checkbox">
                                                                                        <div class="input-group">
                                                                                            <label class="kt-checkbox kt-checkbox--single kt-checkbox--success criteria_checkbox_label">
                                                                                                {% if klm_status == 1 %}
                                                                                                    <input type="checkbox"
                                                                                                           name="klm_status"
                                                                                                           class="unchecked_part_label">
                                                                                                {% else %}
                                                                                                    <input type="checkbox"
                                                                                                           name="klm_status"
                                                                                                           class="checked_part_label"
                                                                                                           checked>
                                                                                                {% endif %}
                                                                                                <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="{{ vin }}">
                                                                                    <label class="col-sm-12 kt-checkbox">
                                                                                        <div class="input-group">
                                                                                            <label class="kt-checkbox kt-checkbox--single kt-checkbox--success criteria_checkbox_label">
                                                                                                {% if vin_status == 1 %}
                                                                                                    <input type="checkbox"
                                                                                                           name="vin_status"
                                                                                                           class="unchecked_part_label">
                                                                                                {% else %}
                                                                                                    <input type="checkbox"
                                                                                                           name="vin_status"
                                                                                                           class="checked_part_label"
                                                                                                           checked>
                                                                                                {% endif %}
                                                                                                <span></span>{{ lbl_not_show_to_visitor }}
                                                                                            </label>
                                                                                        </div>
                                                                                    </label>
                                                                                </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="{{ plate }}">
                                                                                        <label class="kt-checkbox kt-checkbox--single kt-checkbox--success criteria_checkbox_label">
                                                                                            {% if vin_status == 1 %}
                                                                                                <input type="checkbox"
                                                                                                       name="plate_status"
                                                                                                       class="unchecked_part_label">
                                                                                            {% else %}
                                                                                                <input type="checkbox"
                                                                                                       name="plate_status"
                                                                                                       class="checked_part_label"
                                                                                                       checked>
                                                                                            {% endif %}
                                                                                            <span></span>{{ lbl_not_show_to_visitor }}
                                                                                        </label>
                                                                                    </div>
                                                                                </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="{{ adprice }}">
                                                                                </div>{{ lbl_only_for_merchant }}
                                                                            </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">
                                                                                    </div>
                                                                                </div>
                                                                            {% endif %}
                                                                            <input type="hidden" name="adid"
                                                                                   value="{{ ad_id }}"/>
                                                                            <input type="hidden" name="model_id"
                                                                                   value="{{ model_id }}"
                                                                                   id="model_id"/>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-sm-12 form-group">
                                                                    <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 files">
                                                                        <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;"/>
                                                                        </label>
                                                                        <br/>
                                                                        <ul class="fileList"></ul>
                                                                    </div>

                                                                    {% if ad_images %}
                                                                        <div class="kt-heading kt-heading--md">{{ lbl_images }}</div>
                                                                        {% for image in ad_images %}
                                                                            <div style="float:left;">
                                                                                <img src="{{ image.src }}"
                                                                                     style="width:120px;height:auto;"/>
                                                                            </div>
                                                                        {% endfor %}
                                                                        </div>
                                                                    {% endif %}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-12 form-group">
                                                                <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">{{ comments }}</textarea>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end: Form Wizard Step 1-->
                                        </form>
                                    </div>
                                    <!--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>

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

                                    <!--begin: Form Wizard Step 3-->
                                    <div class="kt-wizard-v1__content" id="step_3" 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" id="customize_parts"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

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

                                    <!--begin: Form Wizard Step 4-->
                                    <div class="kt-wizard-v1__content" id="step_4" 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 4-->

                                    <!--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 -->
                                </div>

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

                function select(el) {
                    img = el;
                }

                var img;
                var input;

                //get percentage per category of completion
                function getCompletion(parts_category_id) {

                    $.ajax({
                        url: '{{ get_percentage_completion }}',
                        datatype: 'json',
                        data: {
                            parts_category_id: parts_category_id,
                            ad_id: '{{ ad_id }}',
                        },
                        method: 'POST',
                        success: function (json) {
                            var result = $.parseJSON(json);
                            var html = '';
                            if (result) {
                            }

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

                jQuery(document).ready(function () {

                    //init global variables
                    var step = 1;
                    var modelid = '';
                    var catid = 0;
                    var fpa = '{{ fpa }}';
                    var categories_in_progress = [];
                    var assets = '{{ assets }}';

                    changeStepColor(step);

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

                        e.preventDefault();

                        var partid = $(this).attr('partid');

                        var deletedId = $(this).attr('data-id');

                        var images = [];

                        $(this).parent('div').parent('div').parent('div').remove();

                        for (var i = 0; i < $("input[customname=part_images][partid='" + partid + "']")[0].files.length; ++i) {

                            if (deletedId != i) {

                                images.push($("input[customname=part_images][partid='" + partid + "']")[0].files[i].name);
                            }
                        }

                        $("input[customname=part_images][partid='" + partid + "']").val(null);

                        $("input[customname=part_images][partid='" + partid + "']").val(images);

                    });

                    //select and preview image
                    $(document).on('change', '[customname="part_images"]', function (e) {

                        if (allowImages($(this)[0])) {

                            var partid = $(this).attr('partid');

                            var countFiles = $(this)[0].files.length;
                            input = $(this)[0];

                            var imgPath = input.value;
                            img = imgPath;

                            var image_holder = $("#image_holder[partid='" + partid + "']");

                            image_holder.empty();

                            for (var m = 0; m < countFiles; m++) {

                                var reader = new FileReader();

                                reader.onload = function (e) {

                                    $(image_holder).append('<div class="col-md-12">' +
                                        '<div class="col-md-4 float-left pl-0"><div><img src="' + e.target.result + '" class="image_preview" onclick="select($(this))"><div class="remove_icon_image"><img data-id="' + m + '" id="remove_image"  partid="' + partid + '" src="' + assets + 'media/icons/png/remove.png" /></div></div></div></div>');
                                };

                                image_holder.show();

                                reader.readAsDataURL($(this)[0].files[m]);
                            }
                        }
                    });

                    //on click edit section button show parts section
                    $(document).on('click', '#editsection', function (e) {

                        catid = $(this).attr('catid');

                        //show section
                        $("form[catid='" + catid + "']").show(500);
                        $(this).parent().find('.progress').remove();

                        //show buttons
                        $(this).css('display', 'none');
                        $("#savecontinue[catid='" + catid + "']").css('display', 'block');
                    });

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

                        catid = $(this).attr('catid');
                        //      $("form[catid='" + catid + "']").submit();
                        //      return false;

                        categories_in_progress.push(catid);

                        //add close window/tab check
                        window.addEventListener('beforeunload', function (e) {
                            e.preventDefault();
                            e.returnValue = '';
                        });

                        //disable navigation
                        $('#btn_prev').prop('disabled', true);
                        $('#btn_next').prop('disabled', true);

                        $(this).css('display', 'none');
                        $("#editsection[catid='" + catid + "']").css('display', 'block');
                        $("#editsection[catid='" + catid + "']").prop('disabled', true);

                        var form = $("form[catid='" + catid + "']")[0];

                        //create formdata

                        var fdata = new FormData(form);

                        //add adid into formdata
                        fdata.append('adid', '{{ ad_id }}');

                        //hide form
                        $("form[catid='" + catid + "']").hide(500);

                        //add and show loading bar
                        $(this).before('<div class="progress float-left"><div class="progress-bar"></div></div>');

                        //save form
                        e.preventDefault();

                        $.ajax({
                            xhr: function () {
                                var xhr = new window.XMLHttpRequest();
                                xhr.upload.addEventListener("progress", function (evt) {
                                    if (evt.lengthComputable) {
                                        var percentComplete = ((evt.loaded / evt.total) * 100);

                                        //      $(".progress-bar").width(percentComplete.toFixed(2) + '%');
                                        //      $(".progress-bar").html(percentComplete.toFixed(2) + '%');

                                        if (percentComplete < 100) {

                                            $("#loading_status_" + catid).html('<img src="{{ assets }}images/loading.gif" style="width:15px;height:auto;"/>Saving data ' + percentComplete.toFixed(2) + '% Please wait...');
                                        }
                                    }
                                }, false);
                                return xhr;
                            },
                            type: 'POST',
                            url: '{{ edit_ad_parts_url }}',
                            data: fdata,
                            contentType: false,
                            cache: false,
                            processData: false,
                            enctype: 'multipart/form-data',
                            beforeSend: function () {
                                $(".progress-bar").width('0%');
                            },
                            error: function () {
                                $("#loading_status_" + catid).html('Process failed');
                                $("#editsection[catid='" + catid + "']").prop('disabled', false);

                                setTimeout(function () {
                                    $("#loading_status_" + catid).fadeOut(500);
                                }, 10000);
                            },
                            success: function (resp) {

                                if (resp['code']) {

                                    if (resp['code'] == '100') {
                                        $("#loading_status_" + catid).html('Process failed because invalid filetype');
                                    } else if (resp['code'] == '200') {
                                        $("#loading_status_" + catid).html('Process failed because invalid filenumber');
                                    }

                                    $("#editsection[catid='" + catid + "']").prop('disabled', false);
                                } else {
                                    //remove close window/tab check
                                    window.removeEventListener('beforeunload', function (e) {
                                        e.returnValue = true;
                                    });

                                    $("#loading_status_" + catid).html('Process completed');

                                    form.reset();

                                    $("#editsection[catid='" + catid + "']").prop('disabled', false);

                                    //create percentage bar of ad

                                    getCompletion(catid);

                                    //enable navigation
                                    $('#btn_prev').prop('disabled', false);
                                    $('#btn_next').prop('disabled', false);

//                                            setTimeout(function() {
//                                                $("#loading_status_" + catid).fadeOut(500);
//                                            }, 10000);
                                }
                            }
                        });
                    });

                    //add extra part number
                    $(document).on('click', '#plus_part_number', function (e) {

                        var partid = $(this).attr('partid');

                        $(this).after('<div style="margin-top:3px;"><input type="text" maxlength="17" name="part_number[' + partid + '][]" partid="' + partid + '" customname="part_number" class="form-control" style="float:left;width:90%;"/><i class="fa fa-minus" style="float:left;padding-left: 10px;margin-top: 10px;cursor: pointer;" id="minus_part_number"></i></div>');
                    });

                    //remove extra part number
                    $(document).on('click', '#minus_part_number', function (e) {
                        $(this).parent().remove();
                    });

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

                        if (step == 1) {

                            $('#adform').css({'width': '90%'});
                            $('#btn_submit').hide();
                            $('#btn_prev').hide();
                            $('#btn_next').show();
                        }

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

                        step += 1;

                        if (step == 2) {

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

                            $('#btn_prev').show();
                            $('#btn_submit').hide();
                            $('#btn_next').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());
                                }
                            });

                            var ad_parts = {};
                            ad_parts = '{{ ad_parts }}';
                            var temp = ad_parts.replace(/\&quot;/g, '"');
                            var final = JSON.parse(temp);

                            $.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']  + ')" ><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++) {

                                                for (b = 0; b < final.length; b++) {

                                                    var checked = '';
                                                    var label_class = 'unchecked_part_label';

                                                    if (result[i]['parts'][a]['part_id'] == final[b]['parts_id']) {

                                                        checked = 'checked';
                                                        label_class = 'checked_part_label';

                                                        break;
                                                    }
                                                }

                                                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" ' + checked + ' value="' + result[i]['parts'][a]['part_id'] + '" id="parts_selections" chkid="' + result[i]['parts'][a]['part_id'] + '" data-category-id="' + result[i]['categories_parts_id'] + '" data-category-title="' + result[i]['part_category_title'] + '"><span></span></label><label class="' + label_class + '" 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) {

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

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

                            changeStepColor(step);

                            var i = 0;
                            var html = '';

                            //save parts into database

                            //get parts with prices
                            var parts = [];

                            $("input[id='parts_selections']").filter(':checked').map(function () {
                                parts.push({
                                    'partid': $(this).attr('chkid'),
                                    //     'price' : $("input[txtpriceid='" + $(this).attr('chkid') + "']").val(),
                                });
                            });

                            //save to database with ajax

                            $.ajax({
                                url: '{{ add_parts_list }}',
                                datatype: 'json',
                                data: {
                                    parts: JSON.stringify(parts),
                                    adid: '{{ ad_id }}',
                                },
                                method: 'POST',
                                complete: function () {
                                    $('#step_' + step).show();
                                },
                                success: function (json) {
                                    var result = $.parseJSON(json);

                                    var html = '';
                                    if (result) {

                                        var adid = '{{ ad_id }}';

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

                                            //get parts list from database
                                            for (i = 0; i < result['parts'].length; i++) {

                                                if (result['parts'][i]['parts'].length > 0) {

                                                    var percentage = result['parts'][i]['percentage'];

                                                    if (parseFloat(percentage) >= 0 && parseFloat(percentage) <= 30) {
                                                        var color_desc = '<div style="width:100px;height:20px;background-color:#ff0000"></div>';
                                                    } else if (parseFloat(percentage) > 30 && parseFloat(percentage) <= 60) {
                                                        var color_desc = '<div style="width:100px;height:20px;background-color:#f16124"></div>';
                                                    } else if (parseFloat(percentage) > 60 && parseFloat(percentage) < 100) {
                                                        var color_desc = '<div style="width:100px;height:20px;background-color:#ffcc00"></div>';
                                                    } else {
                                                        var color_desc = '<div style="width:100px;height:20px;"><i class="fa fa-check-circle" style="color: darkgreen"></i></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/' + result['parts'][i]['image'] + '" />' + result['parts'][i]['part_category_title'] + '<div style="padding-left:30px;padding-right:15px;">' + percentage.toFixed(2) + '%</div>' + color_desc + '</div></div><div id="collapseOne' + i + '" class="collapse" aria-labelledby="headingOne' + i + '" data-parent="#accordion' + i + '"><div class="card-body">';

                                                    html += '<form catid="' + result['parts'][i]['categories_parts_id'] + '" enctype="multipart/form-data" method="post" action="{{ edit_ad_parts_url }}">';
                                                    html += '<table class="table table-bordered" data-title="' + result['parts'][i]['part_category_title'] + '">';
                                                    html += '<tr><thead><th>{{ lbl_name }}</th>';
                                                    html += '<th>{{ lbl_part_number }}</th>';
                                                    // html += '<th>{# lbl_price_without_vat #}</th>';
                                                    html += '<th>{{ lbl_price_with_vat }}</th>';
                                                    html += '<th>{{ lbl_images }}</th>';
                                                    html += '<th>{{ lbl_comments }}</th>';
                                                    html += '<th>{{ lbl_part_location }}</th>';
                                                    html += '<th>{{ lbl_actions }}</th></thead></tr>';

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

                                                        var curid = result['parts'][i]['parts'][a]['part_id'];
                                                        //    var part_price = result['parts'][i]['parts'][a]['price'];
                                                        //    var part_price_with_vat = (part_price * (1 + (fpa / 100))).toFixed(2);

                                                        html += '<tr><td><input type="hidden" customname="parts" name="parts[]" value="' + curid + '"/><label>' + result['parts'][i]['parts'][a]['title'] + '</label></td>';
                                                        html += '<td><div><input type="text" maxlength="17" name="part_number[' + curid + '][]" partid="' + curid + '" customname="part_number" class="form-control" style="float:left;width:70%;margin-bottom:3px"/><i class="fa fa-plus" style="float:left;padding-left: 10px;margin-top: 10px;cursor: pointer;" id="plus_part_number" partid="' + curid + '"></i></div></td>';
                                                        html += '<td><input type="text" customname="part_prices" name="part_prices[' + curid + ']" id="part_prices_without_vat" partid="' + curid + '"  tablepriceid="' + curid + '"  class="form-control" value="" onkeypress="return allowNumbersOnly(event)" placeholder="{{ lbl_price_without_vat }}"><div class="col-sm-12 tablepricewithvat" tablepricewithvatid="' + curid + '"></div></td>';
                                                        //  html += '<td><input type="text" id="part_prices_with_vat" partid="' + curid + '" tablepricewithvatid="' + curid + '" class="form-control" value="" onkeypress="return allowNumbersOnly(event)" placeholder="{# lbl_price_with_vat #}"></td>';
                                                        html += '<td><label class="btn btn-brand"><i class="fa fa-image"></i><input type="file" customname="part_images" multiple="multiple" accept="image/*" name="part_images[' + curid + '][]" partid="' + curid + '" style="display: none;"/>(' + result['parts'][i]['parts'][a]['total_images'] + ')</label><div id="image_holder" partid="' + curid + '"></div></td>';
                                                        html += '<td><textarea customname="part_comments" name="part_comments[' + curid + ']" partid="' + curid + '" class="form-control" /></textarea></td>';
                                                        html += '<td><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" name="parts_statuses[]"><span></span></label><label class="unchecked_part_label">{{ lbl_in_storage }}</label></div></label></div></td>';
                                                        html += '<td><img class="action_img" src="' + assets + 'media/icons/svg/search-icon.svg" title="{{ lbl_preview }}" alt="{{ lbl_preview }}"/><img class="action_img" src="' + assets + 'media/icons/svg/trash.svg" title="{{ lbl_delete }}" alt="{{ lbl_delete }}"/></td></tr>';
                                                    }

                                                    html += '</tbody></table><input type="hidden" name="adid" value="' + adid + '"/></form><div class="col-xs-12" id="loading_status_' + result['parts'][i]['categories_parts_id'] + '"></div><div class="col-xs-12"><button class="btn btn-brand float-right" id="editsection" catid="' + result['parts'][i]['categories_parts_id'] + '" style="display:none;">{{ lbl_edit }}</button><button class="btn btn-brand float-right" id="savecontinue" catid="' + result['parts'][i]['categories_parts_id'] + '">{{ lbl_save_continue }}</button></div></div></div></div></div>';

                                                }
                                            }

                                            $('#customize_parts').html('');
                                            $('#customize_parts').html(html);
                                        }
                                    }
                                } //end function
                            }); //end ajax

                            $("html, body").animate({scrollTop: 0}, "slow");
                        }

                        if (step == 4) {

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

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

                            changeStepColor(step);

                            $('#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>';

                            $("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>-</td></tr>';
                                }

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

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

                            html = '';

                            //ajax to database and get all parts data

                            $.ajax({
                                url: '{{ get_ad_parts_list }}',
                                datatype: 'json',
                                data: {
                                    adid: '{{ ad_id }}',
                                },
                                method: 'POST',
                                complete: function () {
                                    categories_in_progress = [];
                                },
                                success: function (json) {
                                    var result = $.parseJSON(json);
                                    var html = '';

                                    var total_parts_price = 0;

                                    if (result) {

                                        for (i = 0; i < result.length; i++) {

                                            if (result[i]['parts'] != undefined && result[i]['parts'].length > 0) {

                                                html += '<table class="table table-bordered stripe">';
                                                html += '<thead><tr class="review_category_title"><th colspan="6"><img class="image_category" src="' + assets + 'media/icons/svg/part-categories/' + result[i]['image'] + '" /><span>' + result[i]['part_category_title'] + '</span></th></tr>';

                                                html += '<tr><th>{{ lbl_name }}</th>';
                                                html += '<th>{{ lbl_part_number }}</th>';
                                                html += '<th>{{ lbl_price_without_vat }}</th>';
                                                // html += '<th>{{ lbl_price_with_vat }}</th>';
                                                html += '<th>{{ lbl_images }}</th>';
                                                html += '<th>{{ lbl_comments }}</th></thead></tr>';

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

                                                    html += '<tr>';
                                                    html += '<td>' + result[i]['parts'][a]['title'] + '</td>';

                                                    html += '<td>';

                                                    if (result[i]['parts'][a]['part_numbers'] != undefined && result[i]['parts'][a]['part_numbers'].length > 0) {

                                                        var numbers = '';

                                                        for (b = 0; b < result[i]['parts'][a]['part_numbers'].length; b++) {
                                                            numbers += '<div style="color:#fff;background-color:#ccc;padding:3px;margin-right:3px;border-radius:10px;float:left;margin-bottom:3px;">' + result[i]['parts'][a]['part_numbers'][b]['part_number'] + '</div>';
                                                        }

                                                        html += numbers.slice(0, -1);
                                                    }

                                                    html += '</td>';
                                                    html += '<td>' + result[i]['parts'][a]['price'] + '</td>';

                                                    //  var final_price = result[i]['parts'][a]['price'] * (1 + fpa / 100);
                                                    //   total_parts_price += final_price
                                                    //   html += '<td>' + final_price.toFixed(2) + '</td>';

                                                    html += '<td>';

                                                    if (result[i]['parts'][a]['images'] != undefined && result[i]['parts'][a]['images'].length > 0) {
                                                        var images = '<div class="col-md-12">';

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

                                                            images += '<div class="col-md-4 float-left pl-0"><img src="' + result[i]['parts'][a]['images'][c]['src'] + '" class="image_preview" /></div>';
                                                        }

                                                        images += '</div>';

                                                        html += images;
                                                    }

                                                    html += '</td>';

                                                    if (result[i]['parts'][a]['comments'] == null) {
                                                        html += '<td></td>';
                                                    } else {
                                                        html += '<td>' + result[i]['parts'][a]['comments'] + '</td>';
                                                    }

                                                    html += '</tr>';
                                                }

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

                                        html += '<table class="table table-bordered table-striped">';
                                        html += '<th scope="col">{{ lbl_purchase_price }}</th>';
                                        html += '<th scope="col">{{ lbl_sale_price }}</th>';
                                        html += '<th scope="col">{{ lbl_possible_profit }}</th>';

                                        var total = parseFloat(total_parts_price) - parseFloat($('#adprice').val());

                                        if (total > 0) {
                                            var total_color = 'darkgreen';
                                        } else {
                                            var total_color = 'red';
                                        }

                                        html += '<tr><td>' + $('#adprice').val() + '</td><td>' + total_parts_price.toFixed(2) + '</td><td colspan="4"><span style="color:' + total_color + '">' + total.toFixed(2) + '</span></td></tr>';
                                        html += '</table>';
                                    }

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

                                } //end function
                            }); //end ajax

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

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

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

                        step = step - 1;

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

                        if (step == 1) {

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

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

                            changeStepColor(step);

                            return false;

                        } else if (step == 2) {

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

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

                            changeStepColor(step);

                        } else if (step == 3) {

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

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

                            changeStepColor(step);

                        } else if (step == 4) {

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

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

                            changeStepColor(step);
                        }
                    });
                });

            </script>

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

