templates/Front/vignette.html.twig line 25

Open in your IDE?
  1. {% extends '@templates/Front/Shop/layout.html.twig' %}
  3. {% block head %}
  4.     <head>
  5.         {% block title %} <title>{{ 'app.ui.calculator_vignette_price'|trans }} | Roviniete.ro</title> {% endblock %}
  7.         {% block metatags %}
  8.             <meta name="description" content="{% if vignetteDescriptionForSeo|length > 0 %}{{ vignetteDescriptionForSeo.content }}{% endif %}"/>
  9.         {% endblock %}
  10.         <meta charset="utf-8">
  11.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  12.         <meta http-equiv="Content-Language" content="ro">
  13.         <meta name="google-site-verification" content="BEtIqk-choaMawpOxG98NtbWKAZK5MuTxV_2-pSHGFQ">
  14.         <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  15.         <meta name="keywords" content="{% if vignetteKeywordsForSeo|length > 0 %}{{ vignetteKeywordsForSeo.content }}{% endif %}"/>
  17.         {% block stylesheets %}
  18.             <link rel="stylesheet" href="{{ asset('/assets/shop/css/homepage.css') }}">
  19.             <link rel="stylesheet" href="{{ asset('/assets/shop/css/bootstrap.min.css') }}">
  20.             {{ encore_entry_link_tags('bootstrap-fix', null, 'bootstrapTheme') }}
  21.             <link rel="stylesheet" href="{{ asset('/assets/shop/css/vignette_shop.v1.css') }}">
  22.             <link rel="stylesheet" href="{{ asset('/assets/shop/css/bs-stepper.css') }}">
  23.         {% endblock %}
  25.         {{ sonata_block_render_event('sylius.shop.layout.head') }}
  26.         {% block javascripts %}
  27.             <script src="{{ asset('assets/shop/js/sentry-bundle.min.js') }}"></script>
  28.             <script>
  29.                  if (typeof Sentry !== 'undefined') {
  30.                     Sentry.init({
  31.                         dsn: "{{ sentry_dsn }}",
  32.                         integrations: [new Sentry.Integrations.TryCatch({
  33.                             eventTarget: false,
  34.                         })]
  35.                     });
  36.                 }
  37.                 MESSAGE_INVALID_REGISTRATION_PLATE = '{{ 'app.ui.invalid_registration_plate'|trans }}';
  38.                 MESSAGE_INVALID_VIN = '{{ 'app.ui.invalid_vin'|trans }}'
  39.                 let roadAssistanceValidFrom = null;
  40.             </script>
  41.             <script src="{{ asset('assets/shop/js/jquery.min.js') }}"></script>
  42.             <script src="{{ asset('/assets/shop/js/bs-stepper.js') }}"></script>
  43.             <script src="{{ asset('assets/shop/js/jquery-ui.min.js') }}"></script>
  44.             <script src="{{ asset('assets/shop/js/popper.min.js') }}"></script>
  45.             <script src="{{ asset('assets/shop/js/bootstrap.min.js') }}"></script>
  46.             <script src="{{ asset('assets/shop/js/moment.min.js') }}"></script>
  47.             <script src="{{ asset('assets/shop/js/jquery.validate.min.js') }}"></script>
  48.             {{ encore_entry_script_tags('vignette') }}
  49.             <script src="{{ asset('assets/shop/js/leftmenu.js') }}"></script>
  50.             <script src="{{ asset('/bundles/fosjsrouting/js/router.js') }}"></script>
  51.             <script src="{{ asset('/assets/shop/js/_bootstrap_select.min.js') }}"></script>
  52.             <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
  53.             <script>
  54.                 dataLayer = [];
  55.             </script>
  56.             <!-- Google Tag Manager -->
  57.             <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  58.                         new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  59.                     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  60.                     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  61.                 })(window,document,'script','dataLayer','{{ gtm_code }}');</script>
  62.             <!-- End Google Tag Manager -->
  63.         {% endblock %}
  64.     </head>
  65. {% endblock %}
  67. {% block header %}
  68.     <!-- Google Tag Manager (noscript) -->
  69.     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ gtm_code }}"
  70.                       height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  71.     <!-- End Google Tag Manager (noscript) -->
  72.     {% include '@templates/AdminCustom/Layout/loading.html.twig' with {showLoading: true} %}
  73.     <div class="custom-container">
  74.         <div style="max-width: 100%">
  75.             <div class="bg-white">
  76.                 <header>
  77.                     {% include '@templates/Front/Shop/v2/_header.html.twig' %}
  79.                     {{ sonata_block_render_event('sylius.shop.layout.after_header') }}
  80.                 </header>
  81.             </div>
  82.         </div>
  83.     </div>
  84. {% endblock %}
  86. {% block content %}
  87.     <div id="loadingDiv" class="loading d-none">
  88.         <div class="card w-50">
  89.             <div class="card-body bg-loading-card">
  90.                 <img src="{{ asset('assets/shop/images/spinner.gif') }}"
  91.                      style="width: 50px; pointer-events: none"/>
  92.                 <h5>Se verifica datele</h5>
  93.             </div>
  94.         </div>
  95.     </div>
  96.     <div class="d-inline-flex mx-3">
  97.         <a href="{{ path('sylius_shop_homepage') }}" class="section text-primary" style="font-size: 0.8em;">{{ 'sylius.ui.home'|trans }}</a>
  98.         <div class="divider"> /</div>
  99.         <small class="section active">{{ 'app.ui.vignettes'|trans }}</small>
  100.     </div>
  101.     {% if lastProductStatus.vignetteStatus %}
  102.         <h2 class="mx-3">{{ 'app.ui.calculator_vignette_price'|trans}}</h2>
  103.         {% set smsPrice = sms_price_ron.calculateSmsPrice %}
  104.         <script type="text/javascript">
  105.             var one_day = '{{ 'app.ui.1_day'|trans|lower }}';
  106.             var seven_days = '{{ 'app.ui.7_days'|trans|lower }}';
  107.             var ten_days = '{{ 'app.ui.10_days'|trans|lower }}';
  108.             var thirty_days = '{{ 'app.ui.30_days'|trans|lower }}';
  109.             var sixty_days = '{{ 'app.ui.60_days'|trans|lower }}';
  110.             var ninety_days = '{{ 'app.ui.90_days'|trans|lower }}';
  111.             var twelve_months = '{{ 'app.ui.12_months'|trans|lower }}';
  112.             var locale = '{{ app.request.getLocale() }}';
  113.         </script>
  114.         {% set oldValues = app.request.request %}
  116.         <div id="specialErrors" class="alert alert-warning alert-dismissible fade show d-none" role="alert">
  117.             <div class="header text-center">
  118.                 <h2>{{ 'sylius.ui.warning'|trans }}</h2>
  119.             </div>
  120.             <p>
  121.             <h5 class="text-center text-primary vignette-already-bought d-none">
  122.                 {{ 'app.ui.vignette_available_for_choosen_date'|trans }}
  123.             </h5>
  124.             <h5 class="special-error">
  125.             </h5>
  126.             <a class="text-center">
  127.             </a>
  128.             </p>
  129.             <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  130.                 <span aria-hidden="true">&times;</span>
  131.             </button>
  132.         </div>
  133.         <div id="categoryError" class="alert alert-warning fade show d-none" role="alert">
  134.             <div class="header text-center">
  135.                 <h2>{{ 'app.ui.error'|trans }}</h2>
  136.             </div>
  137.             <p>
  138.             <h5 class="text-center text-primary">
  139.                 {{ 'app.ui.vignette_category_error'|trans }}
  140.             </h5>
  141.             <h5 class="special-error">
  142.             </h5>
  143.             <a class="text-center">
  144.             </a>
  145.             </p>
  146.         </div>
  147.         <div id="divNoSpecialCharacters" class="alert alert-warning d-none" role="alert">
  148.             {{ 'app.ui.no_special_characters_allowed'|trans }}
  149.         </div>
  150.         <div style="margin-bottom: 100px;">
  151.             <div id="stepperForm" class="bs-stepper linear">
  152.                 <div class="row" style="padding: 0 20px 20px;">
  153.                     <div class="col-12 col-sm-12 col-md-12 col-lg-10 col-xl-10">
  154.                         <div id="vignetteStep1Summary" class="card d-none my-3" onclick="stepper.previous()">
  155.                             <div class="card-body d-flex justify-content-between align-items-center">
  156.                                 <div class="d-inline-flex justify-content-center align-items-center">
  157.                                     <img src="{{ asset('assets/shop/images/icons/ic_check_small_dark.png') }}" style="width: 30px"/>
  158.                                     <h3>
  159.                                         <a class="font-weight-bolder text-primary">{{ 'app.ui.vignette_details'|trans }}:</a>
  160.                                         <a class="font-weight-bolder text-dark">{{ 'app.ui.category'|trans }} - </a>
  161.                                         <a id="categoryTitleText">-</a>;
  162.                                         <a class="font-weight-bolder text-dark">{{ 'app.ui.valid_from'|trans }} - </a>
  163.                                         <a id="availabilityTitleText">-</a>
  164.                                     </h3>
  165.                                 </div>
  166.                                 <div id="editVignetteStep1">
  167.                                     <img src="{{ asset('assets/shop/images/icons/ic_edit_grey.png') }}" style="width: 30px"/>
  168.                                 </div>
  169.                             </div>
  170.                         </div>
  171.                     </div>
  172.                 </div>
  173.                 <div class="bs-stepper-header d-none" role="tablist">
  174.                     <div id="divStepVignetteDetails" class="step active" data-target="#vignetteDetails" onclick="stepper.previous()" style="pointer-events: none">
  175.                         <button type="button" class="step-trigger" role="tab" id="stepVignetteDetails" aria-controls="vignetteDetails" aria-selected="true">
  176.                             <span class="bs-stepper-circle"><a>1</a></span>
  177.                             <small style="font-size: 0.8em; letter-spacing: 1px;" class="bs-stepper-label text-primary font-weight-bolder">{{'app.ui.vignette_details'|trans|upper}}</small>
  178.                         </button>
  179.                     </div>
  180.                     <div class="bs-stepper-line"></div>
  181.                     <div id="divStepVehicleDetails" class="step" data-target="#vehicleDetails" onclick="stepper.next()" style="pointer-events: none">
  182.                         <button type="button" class="step-trigger" role="tab" id="stepVehicleDetails" aria-controls="vehicleDetails" aria-selected="false" disabled>
  183.                             <span class="inactive-step bs-stepper-circle"><a>2</a></span>
  184.                             <small style="font-size: 0.8em; letter-spacing: 1px;" class="bs-stepper-label text-black-50 font-weight-bolder">{{'app.ui.car_data'|trans|upper}} </small>
  185.                         </button>
  186.                     </div>
  187.                     <div class="bs-stepper-line"></div>
  188.                 </div>
  189.                 <div class="bs-stepper-content">
  190.                     <form id="vignetteForm" method="POST">
  191.                         <input type="hidden" name="ignoreAlreadyActive" id="ignoreAlreadyActive" value="false">
  192.                         <input type="hidden" name="ignoreWrongCategory" id="ignoreWrongCategory" value="false">
  193.                         <input type="hidden" name="productStatusExtraOptions" id="productStatusExtraOptions" value="{{ lastProductStatus.extraOptionsStatus }}">
  194.                         <div id="vignetteDetails" role="tabpanel" class="bs-stepper-pane fade active dstepper-block" aria-labelledby="stepperFormTrigger1">
  195.                             <div class="row my-3">
  196.                                 <div class="col-12 col-sm-12 col-md-12 col-lg-10 col-xl-10">
  197.                                     <div class="card vignette-card shadow">
  198.                                         <div class="card-body">
  199.                                             <div class="row">
  200.                                                 <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
  201.                                                     <h3 id="selectedCategoryText" class="mb-2 font-weight-bolder">{{'app.ui.select_car_type'|trans}}</h3>
  202.                                                     {% for category in vignetteCategories %}
  203.                                                         {% if loop.index % 2 != 0 %}
  204.                                                             <div class="d-flex justify-content-center my-2">
  205.                                                         {% endif %}
  206.                                                         <label type="button" for="{{ category.code|first|lower }}" class="btn btn-vignette-unselected w-100 mx-3 webkit-none" data-value="front">
  207.                                                             <input type="radio" name="category" data-error-message="{{'app.errors.no_category_selected'|trans }}" id="{{ category.code|first|lower }}" value="{{ category.id }}" data-category="
  208.                                                             {% if category.id == category_rovignette_a_id%}
  209.                                                                 {{ 'app.ui.category_rovignette_a_name'|trans }}
  210.                                                             {% elseif category.id == category_rovignette_b_id %}
  211.                                                                 {{ 'app.ui.category_rovignette_b_name'|trans }}
  212.                                                             {% elseif category.id == category_rovignette_c_id %}
  213.                                                                 {{ 'app.ui.category_rovignette_c_name'|trans|raw }}
  214.                                                             {% elseif category.id == category_rovignette_d_id %}
  215.                                                                 {{ 'app.ui.category_rovignette_d_name'|trans }}
  216.                                                             {% elseif category.id == category_rovignette_e_id %}
  217.                                                                 {{ 'app.ui.category_rovignette_e_name'|trans|raw }}
  218.                                                             {% elseif category.id == category_rovignette_f_id %}
  219.                                                                 {{ 'app.ui.category_rovignette_f_name'|trans|raw }}
  220.                                                             {% elseif category.id == category_rovignette_g_id %}
  221.                                                                 {{ 'app.ui.category_rovignette_g_name'|trans }}
  222.                                                             {% elseif category.id == category_rovignette_h_id %}
  223.                                                                 {{ 'app.ui.category_rovignette_h_name'|trans }}
  224.                                                             {% endif %}
  225.                                                                " {% if vehicle is not null and vehicle.roVignetteCategory is not null and vehicle.roVignetteCategory.id is defined  and vehicle.roVignetteCategory.id == category.id %} checked
  226.                                                                 {% elseif oldValues.get('category') == category.id %} checked {% endif %} hidden>
  227.                                                             <img src="{{ (asset('assets/shop/images/icons/ic_rovinieta_categ_' ~ category.code|first|lower) ~ '.png')}}" style="width: 46px"/> <br/>
  228.                                                             <a class="text-dark" id="vehicleType-{{category.code|first|lower}}">
  229.                                                                 {% if category.id == category_rovignette_a_id%}
  230.                                                                     {{ 'app.ui.category_rovignette_a_short_code'|trans }}
  231.                                                                 {% elseif category.id == category_rovignette_b_id %}
  232.                                                                     {{ 'app.ui.category_rovignette_b_short_code'|trans }}
  233.                                                                 {% elseif category.id == category_rovignette_c_id %}
  234.                                                                     {{ 'app.ui.category_rovignette_c_short_code'|trans|raw }}
  235.                                                                 {% elseif category.id == category_rovignette_d_id %}
  236.                                                                     {{ 'app.ui.category_rovignette_d_short_code'|trans }}
  237.                                                                 {% elseif category.id == category_rovignette_e_id %}
  238.                                                                     {{ 'app.ui.category_rovignette_e_short_code'|trans|raw }}
  239.                                                                 {% elseif category.id == category_rovignette_f_id %}
  240.                                                                     {{ 'app.ui.category_rovignette_f_short_code'|trans|raw }}
  241.                                                                 {% elseif category.id == category_rovignette_g_id %}
  242.                                                                     {{ 'app.ui.category_rovignette_g_short_code'|trans }}
  243.                                                                 {% elseif category.id == category_rovignette_h_id %}
  244.                                                                     {{ 'app.ui.category_rovignette_h_short_code'|trans }}
  245.                                                                 {% endif %}
  246.                                                             </a>
  247.                                                         </label>
  248.                                                         {% if loop.index % 2 == 0 %}
  249.                                                             </div>
  250.                                                         {% endif %}
  251.                                                     {% endfor %}
  252.                                                 </div>
  253.                                                 <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 text-center">
  254.                                                     <h3 class="font-weight-bolder mb-2">{{ 'app.ui.select_start_date'|trans}}</h3>
  255.                                                     <div class="d-flex justify-content-center align-items-center">
  256.                                                         <input type="hidden" id="validFrom" name="validFrom" {% if oldValues.get('validFrom') %} data-value="{{ oldValues.get('validFrom')}}"
  257.                                                             {% elseif oldValidFrom is not null %} data-value="{{ oldValidFrom|date("m/d/Y") }}"
  258.                                                             {% endif %}>
  259.                                                         <div data-error-message = '{{'app.errors.no_date_selected'|trans }}' id="datepicker"></div>
  260.                                                     </div>
  261.                                                     <div class="d-flex justify-content-center mt-3">
  262.                                                         <div class="d-flex">
  263.                                                             <div class="current-date-circle" style="width: 18px; height: 18px"></div>
  264.                                                             <div>
  265.                                                                 <a class="ml-2 text-dark">{{'app.ui.current_date'|trans}}:</a> <br/>
  266.                                                                 <h5 class="ml-2 text-dark">{{ "now"|date("d/m/Y") }}</h5>
  267.                                                             </div>
  268.                                                         </div>
  269.                                                         <div id="divStartDatePicker">
  270.                                                             <div class="d-flex ml-4">
  271.                                                                 <div class="picked-date-circle" style="width: 18px; height: 18px"></div>
  272.                                                                 <div>
  273.                                                                     <a class="ml-2 text-dark">{{'app.ui.start_date'|trans}}:</a> <br/>
  274.                                                                     <h5 class="ml-2 text-muted" id="startDatePicker">DD/MM/YYYY</h5>
  275.                                                                 </div>
  276.                                                             </div>
  277.                                                         </div>
  278.                                                     </div>
  279.                                                 </div>
  280.                                                 <div id="divPaymentNotAvailable" class="alert alert-warning d-none mt-2" role="alert">
  281.                                                     {{ 'app.ui.info_payment_not_available'|trans|raw }}
  282.                                                 </div>
  283.                                             </div>
  284.                                         </div>
  285.                                     </div>
  286.                                 </div>
  287.                                 <div class="col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2 d-flex align-items-center justify-content-center my-4">
  288.                                     <div class="btn-wrapper">
  289.                                         <div class="first-step error-messages">
  291.                                         </div>
  292.                                         <button id="btnSubmitStep1" type="button" class="btn btn-primary-inactive w-100" style="height: 40px" disabled>
  293.                                             <a>{{'app.ui.next_step'|trans}}</a>
  294.                                         </button>
  295.                                     </div>
  296.                                 </div>
  297.                             </div>
  298.                         </div>
  299.                         <div id="vehicleDetails" role="tabpanel" class="bs-stepper-pane fade dstepper-none" aria-labelledby="stepperFormTrigger2">
  300.                             <div class="row my-3">
  301.                                 <div class="col-12 col-sm-12 col-md-12 col-lg-10 col-xl-10">
  302.                                     <div class="card vignette-card shadow">
  303.                                         <div class="card-body">
  304.                                             <div class="row">
  305.                                                 <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 availability-wrapper" data-error-message="{{'app.errors.no_availability_selected'|trans }}">
  306.                                                     <h3 class="mb-3 font-weight-bolder">{{'app.ui.choose_validity'|trans}}</h3>
  308.                                                     <div class="d-flex justify-content-between">
  309.                                                         <label type="button" id="lblAv1Day" for="av_1" class="btn btn-vignette-unselected w-100 mt-2 webkit-none" style="display: none" data-value="{{ 'app.ui.1_day'|trans }}" data-title="front">
  310.                                                             <div class="mx-2 my-2">
  311.                                                                 <input type="radio" name="availability" id="av_1" value="1" {% if oldValues.get('availability') == 1 %} checked {% endif %} hidden>
  312.                                                                 <h2 id="txtAv1Day" class="text-primary txtAvailability">{{ 'app.ui.1_day'|trans }}</h2>
  313.                                                                 <a id="txtAv1DayPrice" class="txtAvailabilityPrice text-dark">17.60 LEI</a>
  314.                                                             </div>
  315.                                                         </label>
  316.                                                     </div>
  317.                                                     <div class="d-flex justify-content-between mt-3 mb-3">
  318.                                                         <label type="button" id="lblAv7Day" for="av_7" class="btn btn-vignette-unselected w-100 mr-4 webkit-none" style="display: none" data-value="{{ 'app.ui.7_days'|trans }}" data-title="front">
  319.                                                             <div class="mx-2 my-2">
  320.                                                                 <input type="radio" name="availability" id="av_7" value="2" {% if oldValues.get('availability') == 2 %} checked {% endif %} hidden required>
  321.                                                                 <h2 id="txtAv7Days" class="text-primary txtAvailability">{{ 'app.ui.7_days'|trans }}</h2>
  322.                                                                 <a id="txtAv7DaysPrice" class="txtAvailabilityPrice text-dark">17.60 LEI</a>
  323.                                                             </div>
  324.                                                         </label>
  325.                                                         <label type="button" id="lblAv10Day" for="av_10" class="btn btn-vignette-unselected w-100 mr-4 webkit-none" style="display: none" data-value="{{ 'app.ui.10_days'|trans }}" data-title="front">
  326.                                                             <div class="mx-2 my-2">
  327.                                                                 <input type="radio" name="availability" id="av_10" value="6" {% if oldValues.get('availability') == 6 %} checked {% endif %} hidden required>
  328.                                                                 <h2 id="txtAv10Days" class="text-primary txtAvailability">{{ 'app.ui.10_days'|trans }}</h2>
  329.                                                                 <a id="txtAv10DaysPrice" class="txtAvailabilityPrice text-dark">17.60 LEI</a>
  330.                                                             </div>
  331.                                                         </label>
  332.                                                         <label type="button" for="av_30" class="btn btn-vignette-unselected w-100 webkit-none" data-value="{{ 'app.ui.30_days'|trans }}" data-title="front">
  333.                                                             <div class="mx-2 my-2">
  334.                                                                 <input type="radio" name="availability" id="av_30" value="3" {% if oldValues.get('availability') == 3 %} checked {% endif %} hidden>
  335.                                                                 <h2 id="txtAv30Days" class="text-primary txtAvailability">{{ 'app.ui.30_days'|trans }}</h2>
  336.                                                                 <a id="txtAv30DaysPrice" class="txtAvailabilityPrice text-dark">33.60 LEI</a>
  337.                                                             </div>
  338.                                                         </label>
  339.                                                     </div>
  340.                                                     <div class="d-flex justify-content-between">
  341.                                                         <label type="button" id="lblAv90Day" for="av_90" class="btn btn-vignette-unselected w-100 mr-4 webkit-none" style="display: none" data-value="{{ 'app.ui.90_days'|trans }}" data-title="front">
  342.                                                             <div class="mx-2 my-2">
  343.                                                                 <input type="radio" name="availability" id="av_90" value="4" {% if oldValues.get('availability') == 4 %} checked {% endif %} hidden>
  344.                                                                 <h2 id="txtAv90Days" class="text-primary txtAvailability">{{ 'app.ui.90_days'|trans }}</h2>
  345.                                                                 <a id="txtAv90DaysPrice" class="txtAvailabilityPrice text-dark">117.60 LEI</a>
  346.                                                             </div>
  347.                                                         </label>
  348.                                                         <label type="button" id="lblAv60Day" for="av_60" class="btn btn-vignette-unselected w-100 mr-4 webkit-none" style="display: none" data-value="{{ 'app.ui.60_days'|trans }}" data-title="front">
  349.                                                             <div class="mx-2 my-2">
  350.                                                                 <input type="radio" name="availability" id="av_60" value="7" {% if oldValues.get('availability') == 7 %} checked {% endif %} hidden>
  351.                                                                 <h2 id="txtAv60Days" class="text-primary txtAvailability">{{ 'app.ui.60_days'|trans }}</h2>
  352.                                                                 <a id="txtAv60DaysPrice" class="txtAvailabilityPrice text-dark">117.60 LEI</a>
  353.                                                             </div>
  354.                                                         </label>
  355.                                                         <label type="button" for="av_12" class="btn btn-vignette-unselected w-100 webkit-none" data-value="{{ 'app.ui.12_months'|trans }}" data-title="front">
  356.                                                             <div class="mx-2 my-2">
  357.                                                                 <input type="radio" name="availability" id="av_12" value="5" {% if oldValues.get('availability') == 5 %} checked {% endif %} hidden>
  358.                                                                 <h2 id="txtAv1Year" class="text-primary txtAvailability">{{ 'app.ui.12_months'|trans }}</h2>
  359.                                                                 <a id="txtAv1YearPrice" class="txtAvailabilityPrice text-dark">333.60 LEI</a>
  360.                                                             </div>
  361.                                                         </label>
  362.                                                     </div>
  363.                                                 </div>
  364.                                                 <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6" style="padding-left: 50px; padding-right: 50px">
  365.                                                     <h3 class="mb-3 font-weight-bolder">{{'app.ui.select_car_data'|trans}}</h3>
  366.                                                     <div class="row mt-3 d-flex align-items-end">
  367.                                                         <div class="col-5 col-sm-5 col-md-6 col-lg-5 col-xl-5">
  368.                                                             <label for="carCountry" class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'app.ui.country_code'|trans}}</label>
  369.                                                             <select id="carCountry" name="carCountry" class="form-control input-custom input-custom-grey" required>
  370.                                                                 <option value="">{{ 'app.ui.country'|trans}}</option>
  371.                                                                 {% for country in countries|sort((a, b) => a.name > b.name) %}
  372.                                                                     <option id="{{ country.code }}" value="{{ country.code }}" {% if oldValues.get('carCountry') == country.code %} selected {% endif %}>{{ country.name }}</option>
  373.                                                                 {% endfor %}
  374.                                                             </select>
  375.                                                         </div>
  376.                                                         <div class="col-7 col-sm-7 col-md-6 col-lg-7 col-xl-7">
  377.                                                             <label for="registrationPlate" class="text-dark lbl-custom lbl-custom-grey d-none">{{'app.ui.registration_plate'|trans}}</label>
  378.                                                             <input id="registrationPlate" data-warning-message="{{ 'app.warning.characters_not_allowed'|trans }}" data-error-message="{{'app.errors.no_plate'|trans }}" name="registrationPlate"
  379.                                                                    maxlength="10" type="text" class="form-control input-custom input-custom-grey
  380.                                                             " placeholder="{{'app.ui.registration_plate'|trans}}" oninvalid="this.setCustomValidity('{{ 'app.ui.please_fill_this_field'|trans }}')"
  381.                                                                    oninput="setCustomValidity('')"
  382.                                                                     {% if vehicle is not null and vehicle.registrationPlate is not null and vehicle.registrationPlate is defined %}
  383.                                                                         value="{{ vehicle.registrationPlate }}"
  384.                                                                     {% elseif oldValues.get('registrationPlate') %}
  385.                                                                         value="{{ oldValues.get('registrationPlate') }}"
  386.                                                                     {% endif %} required>
  387.                                                             <div data-error-message = '{{ 'app.ui.invalid_registration_plate'|trans }}' id="registrationPlateError"></div>
  388.                                                         </div>
  390.                                                     </div>
  391.                                                     <div class="row mt-2">
  392.                                                         <div class="col-12">
  393.                                                             <div id="vinBlock" class="d-none">
  394.                                                                 <label for="vin" class="text-dark lbl-custom lbl-custom-grey d-none" style="width: 98.5% !important;">{{'app.ui.vin'|trans}} ({{ 'app.ui.chassis_number'|trans }})</label>
  395.                                                                 <input id="vin" name="vin" type="text" style="width: 98.5% !important;"
  396.                                                                        class="form-control input-custom input-custom-grey" placeholder="{{'app.ui.vin'|trans}} ({{ 'app.ui.chassis_number'|trans }})">
  397.                                                             </div>
  398.                                                         </div>
  399.                                                     </div>
  400.                                                     {% if app.request.locale == 'ro' and lastProductStatus.vignetteSmsStatus %}
  401.                                                         <div class="row mt-2">
  402.                                                             <div class="col-12">
  403.                                                                 <div id="divAlertSms" class="vignette-alert-container px-2 py-3">
  404.                                                                     <div class="d-flex justify-content-between align-items-center-center">
  405.                                                                         <div class="custom-control custom-checkbox">
  406.                                                                             <input type="checkbox" name="vignetteAlert" id="vignetteAlert" class="custom-control-input" data-price="{{ smsPrice }}">
  407.                                                                             <label for="vignetteAlert" class="custom-control-label">
  408.                                                                                 <h4 class="text-dark" style="letter-spacing: 0.01em;">{{'app.ui.sms_alert'|trans}}</h4>
  409.                                                                             </label>
  410.                                                                         </div>
  411.                                                                         <div>
  412.                                                                             <h4>{{ smsPrice }} Lei ({{ sms_price_eur }} Eur)</h4>
  413.                                                                         </div>
  414.                                                                     </div>
  415.                                                                     <div>
  416.                                                                         <a>{{'app.ui.alert_description'|trans}}</a>
  417.                                                                     </div>
  418.                                                                 </div>
  419.                                                             </div>
  420.                                                         </div>
  421.                                                     {% endif %}
  422.                                                     <div id="app">
  423.                                                         {% if lastProductStatus.roadAssistanceStatus and lastProductStatus.vignetteRoadAssistanceStatus %}
  424.                                                             <road-assistance
  425.                                                                     :price="{{ road_assistance_service.retrieveDefaultPrice }}"
  426.                                                                     :terms-and-conditions-route="'{{ path('bitbag_sylius_cms_plugin_shop_page_show', {'slug' : 'terms-and-conditions-road-assistance'}) }}'"
  427.                                                                     v-bind:is-mobile="false"></road-assistance>
  428.                                                         {% endif %}
  429.                                                     </div>
  430.                                                         <div class="row mt-2">
  431.                                                             <div class="col-12">
  432.                                                                 <div id="divCnairAlert" class="vignette-alert-container px-2 py-3 bg-white d-none">
  433.                                                                     <div class="d-flex justify-content-between align-items-center-center">
  434.                                                                         <div class="custom-control custom-checkbox">
  435.                                                                             <input type="checkbox" name="email_allowed" id="email_allowed" class="custom-control-input">
  436.                                                                             <label for="email_allowed" class="custom-control-label">
  437.                                                                                 <h5 class="text-dark" style="letter-spacing: 0.01em;">{{'app.ui.cnair_alert'|trans}}</h5>
  438.                                                                             </label>
  439.                                                                         </div>
  440.                                                                     </div>
  441.                                                                     <div id="divEmail" class="d-none">
  442.                                                                         <input id="email" name="email" type="text" class="form-control input-custom input-custom-grey required" >
  443.                                                                     </div>
  444.                                                                 </div>
  445.                                                             </div>
  446.                                                         </div>
  447.                                                 </div>
  448.                                             </div>
  449.                                         </div>
  450.                                     </div>
  451.                                 </div>
  452.                                 <div class="col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2 d-flex align-items-center justify-content-center my-4">
  453.                                     <div>
  454.                                         <div class="second-step error-messages">
  456.                                         </div>
  457.                                         <div class="btn-wrapper">
  458.                                             <button id="btnSubmitVignette" type="submit" class="btn btn-primary-inactive btn-submit w-100" style="height: 40px"><a>{{'app.ui.buy_now'|trans}}</a></button>
  459.                                         </div>
  460.                                     </div>
  461.                                 </div>
  462.                             </div>
  463.                         </div>
  464.                     </form>
  465.                 </div>
  467.                 <div class="bs-stepper-content">
  468.                     <div class="row my-3">
  469.                         {% if accordionBlocksAboutVignette|length > 0 %}
  470.                             {% for key, block in accordionBlocksAboutVignette %}
  471.                                 <div class="col-12 col-sm-6 col-md-6 col-lg-3 col-xl-3 my-3">
  472.                                     <button class="accordion" type="button" data-toggle="collapse" data-target="#collapse{{ key }}" aria-expanded="false" aria-controls="collapse{{ key }}">{{ block.name }}</button>
  473.                                     <div class="collapse" id="collapse{{ key }}">
  474.                                         <div class="card card-body border">{{ block.content|raw }}</div>
  475.                                     </div>
  476.                                 </div>
  477.                             {% endfor %}
  478.                         {% endif %}
  479.                     </div>
  480.                 </div>
  481.             </div>
  482.         </div>
  484.         <script>
  485.             $(document).ready(function () {
  486.                 let locale = getLocale();
  487.                 function getLocale() {
  488.                     let url = Routing.generate('app_shop_get_locale');
  489.                     $.ajax({
  490.                         url: url,
  491.                         type: 'GET',
  492.                         async: false,
  493.                         dataType: 'json',
  495.                         success: function (locale) {
  496.                             if (locale == 'ro_RO' || locale == 'ro') {
  497.                                 $('[name="carCountry"] option').filter(function() {
  498.                                     return ($(this).val() == 'RO');
  499.                                 }).prop('selected', true).change();
  500.                             }
  501.                         },
  502.                         error: function (data) {
  504.                         }
  505.                     });
  506.                 }
  507.             })
  508.             var stepper = new Stepper($('.bs-stepper')[0]);
  509.         </script>
  510.         <script>
  511.             const route = "{{ path('sylius_shop_homepage')|escape('js') }}";
  512.             const roadAssistanceTranslations = '{{ roadAssistanceTranslations|json_encode|raw }}';
  514.         </script>
  515.         {{ encore_entry_script_tags('vue') }}
  516.         <style>
  517.             .text-primary {
  518.                 color: #E95A31;
  519.             }
  521.             .webkit-none {
  522.                 -webkit-appearance: none !important;
  523.             }
  525.             .ui-state-highlight, .ui-widget-content .ui-state-highlight {
  526.                 background: none !important;
  527.                 color: #454545 !important;
  528.                 border: none !important;
  529.             }
  530.             .modal-backdrop {
  531.                 opacity: 50% !important;
  532.             }
  533.             .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
  534.                 background-color: #e95a31 !important;
  535.             }
  537.             .b-calendar-grid-body {
  538.                 margin-left: .5rem!important;
  539.                 margin-right: .5rem!important;
  540.             }
  542.             .b-calendar-grid-weekdays {
  543.                 border: none !important;
  544.             }
  546.             .loading {
  547.                 display: flex;
  548.                 flex-direction: column;
  549.                 justify-content: center;
  550.                 align-items: center;
  551.                 text-align: center;
  552.                 min-height: 100vh;
  553.                 z-index: 999;
  554.                 position: fixed;
  555.                 background-color: rgba(0,0,0,0.7);
  556.                 opacity: 100%;
  557.                 width: 100%;
  558.                 height: 100%;
  559.             }
  560.         </style>
  561.     {% else %}
  562.         <div class="card text-center my-3">
  563.             <div class="card-header">
  564.                 <h2>{{ 'app.ui.disabled_temporary'|trans }}</h2>
  565.             </div>
  566.             <div class="card-body">
  567.                 <a href="{{ path('sylius_shop_homepage') }}">{{ 'sylius.ui.back_to_store'|trans }}</a>
  568.             </div>
  569.         </div>
  570.     {% endif %}
  571. {% endblock %}