templates/Mobile/vignette.html.twig line 1

Open in your IDE?
  1. {% extends '@templates/Mobile/Shop/layout.html.twig' %}
  3. {% block head %}
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.         <meta http-equiv="Content-Language" content="ro">
  8.         <meta name="google-site-verification" content="BEtIqk-choaMawpOxG98NtbWKAZK5MuTxV_2-pSHGFQ">
  9.         {% block title %} <title>{{ 'app.ui.calculator_vignette_price'|trans }} | Roviniete.ro</title> {% endblock %}
  10.         {% block metatags %}
  11.             <meta name="description" content="{% if vignetteDescriptionForSeo|length > 0 %}{{ vignetteDescriptionForSeo.content }}{% endif %}">
  12.             <meta name="keywords" content="{% if vignetteKeywordsForSeo|length > 0 %}{{ vignetteKeywordsForSeo.content }}{% endif %}"/>
  13.         {% endblock %}
  14.         <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  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.             <link rel="stylesheet" href="{{ asset('/assets/shop/css/leftmenu.v1.css') }}">
  24.         {% endblock %}
  26.         {{ sonata_block_render_event('sylius.shop.layout.head') }}
  28.         {% block javascripts %}
  29.             <script src="{{ asset('assets/shop/js/sentry-bundle.min.js') }}"></script>
  30.             <script>
  31.                  if (typeof Sentry !== 'undefined') {
  32.                     Sentry.init({
  33.                         dsn: "{{ sentry_dsn }}",
  34.                         integrations: [new Sentry.Integrations.TryCatch({
  35.                             eventTarget: false,
  36.                         })]
  37.                     });
  38.                 }
  39.                 let roadAssistanceValidFrom = null;
  40.                 MESSAGE_INVALID_REGISTRATION_PLATE = '{{ 'app.ui.invalid_registration_plate'|trans }}';
  41.                 MESSAGE_INVALID_VIN = '{{ 'app.ui.invalid_vin'|trans }}'
  42.             </script>
  43.             <script src="{{ asset('assets/shop/js/jquery.min.js') }}"></script>
  44.             <script src="{{ asset('/assets/shop/js/bs-stepper.js') }}"></script>
  45.             <script src="{{ asset('assets/shop/js/jquery-ui.min.js') }}"></script>
  46.             <script src="{{ asset('assets/shop/js/popper.min.js') }}"></script>
  47.             <script src="{{ asset('assets/shop/js/bootstrap.min.js') }}"></script>
  48.             <script src="{{ asset('assets/shop/js/leftmenu.js') }}"></script>
  49.             <script src="{{ asset('/bundles/fosjsrouting/js/router.js') }}"></script>
  50.             <script src="{{ asset('assets/shop/js/moment.min.js') }}"></script>
  51.             <script src="{{ asset('assets/shop/js/jquery.validate.min.js') }}"></script>
  52.             {{ encore_entry_script_tags('vignette') }}
  53.             <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
  54.             <script>
  55.                 dataLayer = [];
  56.             </script>
  57.             <!-- Google Tag Manager -->
  58.             <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  59.                         new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  60.                     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  61.                     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  62.                 })(window,document,'script','dataLayer','{{ gtm_code }}');</script>
  63.             <!-- End Google Tag Manager -->
  64.         {% endblock %}
  65.     </head>
  66. {% endblock %}
  69. {% block content %}
  70.     <div id="loadingDiv" class="loading d-none">
  71.         <div class="card w-50">
  72.             <div class="card-body bg-loading-card">
  73.                 <img src="{{ asset('assets/shop/images/spinner.gif') }}"
  74.                      style="width: 50px; pointer-events: none"/>
  75.                 <h5>Se verifica datele</h5>
  76.             </div>
  77.         </div>
  78.     </div>
  79.     <div class="d-inline-flex mx-3">
  80.         <a href="{{ path('sylius_shop_homepage') }}" class="section text-primary" style="font-size: 0.8em;">{{ 'sylius.ui.home'|trans }}</a>
  81.         <div class="divider"> /</div>
  82.         <small class="section active">{{ 'app.ui.vignettes'|trans }}</small>
  83.     </div>
  84.     <div id="isMobileComponent" class="d-none"></div>
  85.     <!-- Google Tag Manager (noscript) -->
  86.     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ gtm_code }}"
  87.                       height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  88.     <!-- End Google Tag Manager (noscript) -->
  89.     {% if lastProductStatus.vignetteStatus %}
  90.         <h1 class="mt-4 mx-3">{{ 'app.ui.calculator_vignette_price'|trans}}</h1>
  91.         {% set smsPrice = sms_price_ron.calculateSmsPrice %}
  92.         {% set oldValues = app.request.request %}
  93.         <div id="specialErrors" class="alert alert-warning alert-dismissible fade show d-none" role="alert">
  94.             <div class="header text-center">
  95.                 <h2>{{ 'sylius.ui.warning'|trans }}</h2>
  96.             </div>
  97.             <p>
  98.             <h5 class="text-center text-primary vignette-already-bought d-none">
  99.                 {{ 'app.ui.vignette_available_for_choosen_date'|trans }}
  100.             </h5>
  101.             <h5 class="special-error">
  102.             </h5>
  103.             <a class="text-center">
  104.             </a>
  105.             </p>
  106.             <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  107.                 <span aria-hidden="true">&times;</span>
  108.             </button>
  109.         </div>
  110.         <div id="categoryError" class="alert alert-warning fade show d-none" role="alert">
  111.             <div class="header text-center">
  112.                 <h2>{{ 'app.ui.error'|trans }}</h2>
  113.             </div>
  114.             <p>
  115.             <h5 class="text-center text-primary">
  116.                 {{ 'app.ui.vignette_category_error'|trans }}
  117.             </h5>
  118.             <h5 class="special-error">
  119.             </h5>
  120.             <a class="text-center">
  121.             </a>
  122.             </p>
  123.         </div>
  124.         <div id="divNoSpecialCharacters" class="alert alert-warning d-none" role="alert">
  125.             {{ 'app.ui.no_special_characters_allowed'|trans }}
  126.         </div>
  127.         {% include '@templates/Mobile/Checkout/_modal_payment_not_available.html.twig' %}
  128.         {% include '@templates/AdminCustom/Layout/loading.html.twig' with {showLoading: true} %}
  129.         <div class="row mx-1 my-3">
  131.         </div>
  132.         <form id="vignetteForm" method="POST">
  133.             <input type="hidden" name="ignoreAlreadyActive" id="ignoreAlreadyActive" value="false">
  134.             <input type="hidden" name="ignoreWrongCategory" id="ignoreWrongCategory" value="false">
  135.             <input type="hidden" name="productStatusExtraOptions" id="productStatusExtraOptions" value="{{ lastProductStatus.extraOptionsStatus }}">
  136.             <div class="mb-5">
  137.                 <div class="main-container mx-2 mt-2">
  138.                     <div id="accordion">
  139.                         <div class="card mb-3 shadow-sm">
  140.                             <div id="headingOne" class="pb-2">
  141.                                 <h5 class="mb-0">
  142.                                     <button id="btnStep1" style="font-size: 0.8em;" class=" w-100 no-button text-dark font-weight-bolder ml-3" type="button" data-toggle="collapse" data-target="#step1Collapse" aria-expanded="true" aria-controls="step1Collapse" disabled>
  143.                                         <div class="row align-items-center mt-2 mr-2">
  144.                                             <div class="col-12 mt-1">
  145.                                                 <div class="d-flex justify-content-between align-items-center">
  146.                                                     <div>
  147.                                                         <img id="imgStep1" src="{{ asset('assets/shop/images/icons/ic_check_small_primary.png')}}" style="width: 18px; position: relative; top: -2px; margin-right: 10px;"/>
  148.                                                         <a id="txtStep1" class="text-primary">
  149.                                                             <span style="font-size: 1.5em; font-weight: 500;">{{'app.ui.step_one'|trans}}</span>
  150.                                                             <span id="step1CollapsedTxt" style="font-size: 1.3em; font-weight: 400; margin-left: 20px;">{{ 'app.ui.step_one_indication'|trans }}</span></a>
  151.                                                     </div>
  152.                                                     <div id="step1EditIcon"  class="d-none"  style="margin-left: auto; order: 2;"  >
  153.                                                         <img src="{{ asset('assets/shop/images/icons/ic_edit_grey.png')}}" style="width: 20px"/>
  154.                                                     </div>
  155.                                                 </div>
  156.                                                 <div class="text-left" style="margin-left: 27px">
  157.                                                     <a id="txtSelectionStep1"></a>
  158.                                                 </div>
  160.                                             </div>
  161.                                         </div>
  162.                                     </button>
  163.                                 </h5>
  164.                             </div>
  166.                             <div id="step1Collapse" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion" >
  167.                                 <div class="card-body">
  168.                                     <div class="mt-0">
  169.                                         {% for category in vignetteCategories%}
  170.                                             {% if loop.index % 2 != 0 %}
  171.                                                 <div class="d-flex justify-content-between">
  172.                                             {% endif %}
  173.                                             <label type="button" for="{{ category.code|first|lower }}" class="btn {% if oldValues.get('category') and  oldValues.get('category') == category.id %} btn-vignette-selected {% else %} btn-vignette-unselected {% endif %} w-100 mr-1 webkit-none" style="min-height: 50px">
  174.                                                 <div class="d-flex justify-content-between align-items-center">
  175.                                                     <input type="radio" name="category" id="{{ category.code|first|lower }}"  data-error-message="{{'app.errors.no_category_selected'|trans }}" value="{{ category.id }}"
  176.                                                            data-category="
  177.                                             {% if category.id == category_rovignette_a_id%}
  178.                                                 {{ 'app.ui.category_rovignette_a_name'|trans }}
  179.                                             {% elseif category.id == category_rovignette_b_id %}
  180.                                                 {{ 'app.ui.category_rovignette_b_name'|trans }}
  181.                                             {% elseif category.id == category_rovignette_c_id %}
  182.                                                 {{ 'app.ui.category_rovignette_c_name'|trans|raw }}
  183.                                             {% elseif category.id == category_rovignette_d_id %}
  184.                                                 {{ 'app.ui.category_rovignette_d_name'|trans }}
  185.                                             {% elseif category.id == category_rovignette_e_id %}
  186.                                                 {{ 'app.ui.category_rovignette_e_name'|trans|raw }}
  187.                                             {% elseif category.id == category_rovignette_f_id %}
  188.                                                 {{ 'app.ui.category_rovignette_f_name'|trans|raw }}
  189.                                             {% elseif category.id == category_rovignette_g_id %}
  190.                                                 {{ 'app.ui.category_rovignette_g_name'|trans }}
  191.                                             {% elseif category.id == category_rovignette_h_id %}
  192.                                                 {{ 'app.ui.category_rovignette_h_name'|trans }}
  193.                                             {% endif %}
  194.                                                "
  195.                                                     {% if vehicle is not null and vehicle.roVignetteCategory is not null and vehicle.roVignetteCategory.id is defined  and vehicle.roVignetteCategory.id == category.id %} checked
  196.                                                     {% elseif oldValues.get('category') == category.id %} checked {% endif %} hidden>
  198.                                                     <img {% if oldValues.get('category') and  oldValues.get('category') == category.id %} src="{{ (asset('assets/shop/images/icons/ic_rovinieta_categ_' ~ category.code|first|lower) ~ '_white' ~ '.png')}}" {% else %}src="{{ (asset('assets/shop/images/icons/ic_rovinieta_categ_' ~ category.code|first|lower) ~ '.png')}}"{% endif %} style="width: 46px;"/>
  199.                                                     <a id="vehicleType-{{category.code|first|lower}}" class="font-weight-bold {% if oldValues.get('category') and  oldValues.get('category') == category.id %} text-white{% endif %}" style="color: #343a40;" >
  200.                                                         {% if category.id == category_rovignette_a_id%}
  201.                                                             {{ 'app.ui.category_rovignette_a_short_code'|trans }}
  202.                                                         {% elseif category.id == category_rovignette_b_id %}
  203.                                                             {{ 'app.ui.category_rovignette_b_short_code'|trans }}
  204.                                                         {% elseif category.id == category_rovignette_c_id %}
  205.                                                             {{ 'app.ui.category_rovignette_c_short_code'|trans|raw }}
  206.                                                         {% elseif category.id == category_rovignette_d_id %}
  207.                                                             {{ 'app.ui.category_rovignette_d_short_code'|trans }}
  208.                                                         {% elseif category.id == category_rovignette_e_id %}
  209.                                                             {{ 'app.ui.category_rovignette_e_short_code'|trans|raw }}
  210.                                                         {% elseif category.id == category_rovignette_f_id %}
  211.                                                             {{ 'app.ui.category_rovignette_f_short_code'|trans|raw }}
  212.                                                         {% elseif category.id == category_rovignette_g_id %}
  213.                                                             {{ 'app.ui.category_rovignette_g_short_code'|trans }}
  214.                                                         {% elseif category.id == category_rovignette_h_id %}
  215.                                                             {{ 'app.ui.category_rovignette_h_short_code'|trans }}
  216.                                                         {% endif %}
  217.                                                     </a>
  218.                                                 </div>
  219.                                             </label>
  220.                                             {% if loop.index % 2 == 0 %}
  221.                                                 </div>
  222.                                             {% endif %}
  223.                                         {% endfor %}
  224.                                     </div>
  225.                                 </div>
  226.                             </div>
  227.                         </div>
  231.                         <div class="card mb-3 shadow-sm">
  232.                             <div id="headingTwo" class="pb-2">
  233.                                 <h5 class="mb-0">
  234.                                     <button disabled id="btnStep2" style="font-size: 0.8em;" class=" w-100 no-button text-dark font-weight-bolder ml-3" type="button" data-toggle="collapse" data-target="#step2Collapse" aria-expanded="false" aria-controls="step2Collapse">
  235.                                         <div class="row align-items-start mt-2 mr-2">
  236.                                             <div class="col-12 mt-1">
  237.                                                 <div class="d-flex justify-content-between align-items-center">
  238.                                                     <div>
  239.                                                         <img id="imgStep2" src="{{ asset('assets/shop/images/icons/ic_check_small_grey.png')}}" style="width: 18px; position: relative; top: -2px; margin-right: 10px;"/>
  240.                                                         <a id="txtStep2" class="text-secondary">
  241.                                                             <span  style="font-size: 1.5em; font-weight: 500;">{{'app.ui.step_two'|trans}}</span>
  242.                                                             <span id="step2CollapsedTxt" style="font-size: 1.3em; font-weight: 400; margin-left: 20px;">{{ 'app.ui.step_two_indication'|trans }}</span>
  243.                                                         </a>
  244.                                                     </div>
  245.                                                     <div id="step2EditIcon"  class="d-none"  style=" margin-left: auto; order: 2;"  >
  246.                                                         <img src="{{ asset('assets/shop/images/icons/ic_edit_grey.png')}}" style="width: 20px"/>
  247.                                                     </div>
  248.                                                 </div>
  249.                                                 <div class="text-left" style="margin-left: 27px">
  250.                                                     <a id="txtSelectionStep2"></a>
  251.                                                 </div>
  253.                                             </div>
  254.                                         </div>
  255.                                     </button>
  256.                                 </h5>
  257.                             </div>
  259.                             <div id="step2Collapse" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
  260.                                 <div class="card-body">
  261.                                     <div class="d-flex justify-content-center">
  262.                                         <input type="hidden" id="validFrom" name="validFrom"{% if oldValues.get('validFrom') %} value = {{oldValues.get('validFrom')   }}
  263.                                             {% elseif oldValidFrom is not null %} data-value="{{ oldValidFrom|date("m/d/Y") }}"
  264.                                             {% endif %}>
  265.                                         <div id="datepicker" data-error-message = '{{'app.errors.no_date_selected'|trans }}'></div>
  266.                                     </div>
  267.                                 </div>
  268.                             </div>
  269.                         </div>
  272.                         <div class="card mb-3 shadow-sm">
  273.                             <div id="headingThree" class="pb-2">
  274.                                 <h5 class="mb-0">
  275.                                     <button disabled id="btnStep3" style="font-size: 0.8em;" class=" w-100 no-button text-dark font-weight-bolder ml-3" type="button" data-toggle="collapse" data-target="#step3Collapse" aria-expanded="false" aria-controls="step3Collapse">
  276.                                         <div class="row align-items-start mt-2 mr-2">
  277.                                             <div class="col-12 mt-1">
  278.                                                 <div class="d-flex justify-content-between align-items-center">
  279.                                                     <div>
  280.                                                         <img id="imgStep3" src="{{ asset('assets/shop/images/icons/ic_check_small_grey.png')}}" style="width: 18px; position: relative; top: -2px; margin-right: 10px;"/>
  281.                                                         <a id="txtStep3" class="text-secondary">
  282.                                                             <span style="font-size: 1.5em; font-weight: 500;">{{'app.ui.step_three'|trans}}</span>
  283.                                                             <span id="step3CollapsedTxt" style="font-size: 1.3em; font-weight: 400; margin-left: 20px;">{{ 'app.ui.step_three_indication'|trans }}</span>
  284.                                                         </a>
  285.                                                     </div>
  286.                                                     <div id="step3EditIcon"  class="d-none"  style=" margin-left: auto; order: 2;"  >
  287.                                                         <img src="{{ asset('assets/shop/images/icons/ic_edit_grey.png')}}" style="width: 20px"/>
  288.                                                     </div>
  289.                                                 </div>
  290.                                                 <div class="text-left" style="margin-left: 27px">
  291.                                                     <a id="txtSelectionStep3" style="display: none"></a>
  292.                                                 </div>
  293.                                             </div>
  294.                                         </div>
  295.                                     </button>
  296.                                 </h5>
  297.                             </div>
  299.                             <div id="step3Collapse" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
  300.                                 <div class="card-body">
  301.                                     <div class="d-flex justify-content-between availability-wrapper" data-error-message="{{'app.errors.no_availability_selected'|trans }}">
  302.                                         <label type="button" id="lblAv1Day" for="av_1" class="btn btn-vignette-unselected w-100 webkit-none" style="display: none; min-height: 65px" data-value="{{ 'app.ui.1_day'|trans  }}">
  303.                                             <div class="mx-2 my-2">
  304.                                                 <input type="radio" name="availability"  id="av_1" value="1" hidden {% if oldValues.get('availability') == 1 %} checked {% endif %}>
  305.                                                 <h2 id="txtAv1Day" class="{% if oldValues.get('availability') == 1 %} text-white {% else %} text-primary {% endif %} txtAvailability">{{ 'app.ui.1_day'|trans }}</h2>
  306.                                                 <a id="txtAv1DayPrice" class=" {% if oldValues.get('availability') == 1 %} text-white {% endif %} txtAvailabilityPrice">17.60 LEI</a>
  307.                                             </div>
  308.                                         </label>
  309.                                     </div>
  310.                                     <div class="d-flex justify-content-between">
  311.                                         <label type="button" id="lblAv7Day" for="av_7" class="btn btn-vignette-unselected w-100 mr-2 webkit-none" data-value="{{ 'app.ui.7_days'|trans }}" style="display: none; min-height: 65px">
  312.                                             <div class="mx-2 my-2">
  313.                                                 <input type="radio" name="availability" id="av_7" value="2" hidden  {% if oldValues.get('availability') == 2 %} checked {% endif %}>
  314.                                                 <h2 id="txtAv7Days" class="{% if oldValues.get('availability') == 2 %} text-white {% else %} text-primary {% endif %} txtAvailability">{{ 'app.ui.7_days'|trans }}</h2>
  315.                                                 <a id="txtAv7DaysPrice" class="txtAvailabilityPrice {% if oldValues.get('availability') == 2 %} text-white {% endif %} ">17.60 LEI</a>
  316.                                             </div>
  317.                                         </label>
  318.                                         <label type="button" id="lblAv10Day" for="av_10" class="btn btn-vignette-unselected w-100 mr-2 webkit-none" data-value="{{ 'app.ui.10_days'|trans }}" style="display: none; min-height: 65px">
  319.                                             <div class="mx-2 my-2">
  320.                                                 <input type="radio" name="availability" id="av_10" value="6" hidden  {% if oldValues.get('availability') == 6 %} checked {% endif %}>
  321.                                                 <h2 id="txtAv10Days" class="{% if oldValues.get('availability') == 6 %} text-white {% else %} text-primary {% endif %} txtAvailability">{{ 'app.ui.10_days'|trans }}</h2>
  322.                                                 <a id="txtAv10DaysPrice" class="txtAvailabilityPrice {% if oldValues.get('availability') == 6 %} text-white {% endif %} ">17.60 LEI</a>
  323.                                             </div>
  324.                                         </label>
  325.                                         <label type="button" for="av_30" class="btn btn-vignette-unselected w-100 webkit-none" data-value="{{ 'app.ui.30_days'|trans }}" style="min-height: 65px">
  326.                                             <div class="mx-2 my-2">
  327.                                                 <input type="radio" name="availability" id="av_30" value="3" hidden {% if oldValues.get('availability') == 3 %} checked {% endif %}>
  328.                                                 <h2 id="txtAv30Days" class="{% if oldValues.get('availability') == 3 %} text-white {% else %} text-primary {% endif %}  txtAvailability">{{ 'app.ui.30_days'|trans }}</h2>
  329.                                                 <a id="txtAv30DaysPrice" class="txtAvailabilityPrice {% if oldValues.get('availability') == 3 %} text-white {% endif %} ">33.60 LEI</a>
  330.                                             </div>
  331.                                         </label>
  332.                                     </div>
  333.                                     <div class="d-flex justify-content-between">
  334.                                         <label type="button" id="lblAv90Day" for="av_90" class="btn btn-vignette-unselected w-100 mr-2 webkit-none" data-value="{{ 'app.ui.90_days'|trans }}" style="display: none; min-height: 65px">
  335.                                             <div class="mx-2 my-2">
  336.                                                 <input type="radio" name="availability" id="av_90" value="4" hidden {% if oldValues.get('availability') == 4 %} checked {% endif %}>
  337.                                                 <h2 id="txtAv90Days" class="{% if oldValues.get('availability') == 4 %} text-white {% else %} text-primary {% endif %}  txtAvailability">{{ 'app.ui.90_days'|trans }}</h2>
  338.                                                 <a id="txtAv90DaysPrice" class="txtAvailabilityPrice {% if oldValues.get('availability') == 4 %} text-white {% endif %} ">117.60 LEI</a>
  339.                                             </div>
  340.                                         </label>
  341.                                         <label type="button" id="lblAv60Day" for="av_60" class="btn btn-vignette-unselected w-100 mr-2 webkit-none" data-value="{{ 'app.ui.60_days'|trans }}" style="display: none; min-height: 65px">
  342.                                             <div class="mx-2 my-2">
  343.                                                 <input type="radio" name="availability" id="av_60" value="7" hidden {% if oldValues.get('availability') == 7 %} checked {% endif %}>
  344.                                                 <h2 id="txtAv60Days" class="{% if oldValues.get('availability') == 7 %} text-white {% else %} text-primary {% endif %}  txtAvailability">{{ 'app.ui.60_days'|trans }}</h2>
  345.                                                 <a id="txtAv60DaysPrice" class="txtAvailabilityPrice {% if oldValues.get('availability') == 7 %} text-white {% endif %} ">117.60 LEI</a>
  346.                                             </div>
  347.                                         </label>
  348.                                         <label type="button" for="av_12" class="btn btn-vignette-unselected w-100 webkit-none" data-value="{{ 'app.ui.12_months'|trans }}" style="min-height: 65px">
  349.                                             <div class="mx-2 my-2">
  350.                                                 <input type="radio" name="availability" id="av_12" value="5" hidden {% if oldValues.get('availability') == 5 %} checked {% endif %}>
  351.                                                 <h2 id="txtAv1Year" class="{% if oldValues.get('availability') == 5 %} text-white {% else %} text-primary {% endif %}  txtAvailability">{{ 'app.ui.12_months'|trans }}</h2>
  352.                                                 <a id="txtAv1YearPrice" class="txtAvailabilityPrice {% if oldValues.get('availability') == 5 %} text-white {% endif %} ">333.60 LEI</a>
  353.                                             </div>
  354.                                         </label>
  355.                                     </div>
  356.                                 </div>
  357.                             </div>
  358.                         </div>
  361.                         <div class="card mb-3 shadow-sm">
  362.                             <div id="headingFour" class="pb-2">
  363.                                 <h5 class="mb-0">
  364.                                     <button disabled id="btnStep4" style="font-size: 0.8em;" class=" w-100 no-button text-dark font-weight-bolder ml-3" type="button" data-toggle="collapse" data-target="#step4Collapse" aria-expanded="false" aria-controls="step4Collapse">
  365.                                         <div class="row align-items-start mt-2 mr-2">
  366.                                             <div class="col-12 mt-1">
  367.                                                 <div class="d-flex justify-content-between align-items-center">
  368.                                                     <div>
  369.                                                         <img id="imgStep4" src="{{ asset('assets/shop/images/icons/ic_check_small_grey.png')}}" style="width: 18px; position: relative; top: -2px; margin-right: 10px;"/>
  370.                                                         <a id="txtStep4" class="text-secondary">
  371.                                                             <span style="font-size: 1.5em; font-weight: 500;">{{'app.ui.step_four'|trans}}</span>
  372.                                                             <span style="font-size: 1.3em; font-weight: 400; margin-left: 20px;">{{ 'app.ui.step_four_indication'|trans }}</span>
  373.                                                         </a>
  374.                                                     </div>
  375.                                                     <div id="step4EditIcon"  class="d-none"  style=" margin-left: auto; order: 2;"  >
  376.                                                         <img src="{{ asset('assets/shop/images/icons/ic_edit_grey.png')}}" style="width: 20px"/>
  377.                                                     </div>
  378.                                                 </div>
  379.                                             </div>
  380.                                         </div>
  381.                                     </button>
  382.                                 </h5>
  383.                             </div>
  385.                             <div id="step4Collapse" class="collapse" aria-labelledby="headingFour" data-parent="#accordion">
  386.                                 <div class="card-body">
  387.                                     <div class=" d-flex align-items-center" >
  388.                                         <div class="mr-2">
  389.                                             <label for="carCountry" id="carCountryLabel" class="lbl-custom lbl-custom-grey d-none" style="width: 100% !important;">{{ 'app.ui.country_code'|trans}}</label>
  390.                                             <select id="carCountry" name="carCountry"
  391.                                                     data-style="btn-grey border-0 selectpicker-custom shadow-none prometo-font" data-live-search="true"
  392.                                                     title="{{ 'app.ui.country_code'|trans }}*" class="form-control input-custom input-custom-grey selectpicker"
  393.                                                     required>
  394.                                                 <option id="countryCodeOption" value="">{{'app.ui.country_code'|trans}}</option>
  395.                                                 {% for country in countries|sort((a, b) => a.name > b.name) %}
  396.                                                     <option id="{{ country.code }}" data-content="<span class='text-dark'>{{ country.name }} - {{ country.code }}</span>"
  397.                                                             value="{{ country.code }}" {% if oldValues.get('carCountry') and oldValues.get('carCountry')  == country.code %} selected {% endif %}
  398.                                                     >{{ country.name }} - {{ country.code }}</option>
  399.                                                 {% endfor %}
  400.                                             </select>
  401.                                         </div>
  402.                                         <div class="flex-grow-1">
  403.                                             <label for="registrationPlate" id="registrationPlateLabel" class="lbl-custom lbl-custom-grey d-none" style="width: 100% !important;">{{'app.ui.registration_plate'|trans}}</label>
  404.                                             <input id="registrationPlate" name="registrationPlate" data-warning-message="{{ 'app.warning.characters_not_allowed'|trans }}"
  405.                                                    data-error-message="{{'app.errors.no_plate'|trans }}" type="text" class="form-control input-custom input-custom-grey"
  406.                                                    placeholder="{{'app.ui.registration_plate'|trans}}" maxlength="10" required
  407.                                                    oninvalid="this.setCustomValidity('{{ 'app.ui.please_fill_this_field'|trans }}')"
  408.                                                    oninput="setCustomValidity('')"
  409.                                                     {% if vehicle is not null and vehicle.registrationPlate is not null and vehicle.registrationPlate is defined %}
  410.                                                         value="{{ vehicle.registrationPlate }}"
  411.                                                     {% elseif oldValues.get('registrationPlate') %}
  412.                                                         value="{{ oldValues.get('registrationPlate') }}"
  413.                                                     {% endif %} required>                                        </div>
  414.                                         <div id="registrationPlateCheckIcon" class="ml-2 invisible" >
  415.                                             <img src="{{ asset('assets/shop/images/icons/ic_validation_check.png')}}" style="width: 30px"/>
  416.                                         </div>
  417.                                     </div>
  419.                                     <div class="d-flex align-items-center my-2">
  420.                                         <div class="flex-grow-1">
  421.                                             <div id="vinBlock" class="d-none">
  422.                                                 <label for="vin" class="text-dark lbl-custom lbl-custom-grey d-none" style="width: 100% !important;">{{'app.ui.vin'|trans}} ({{ 'app.ui.chassis_number'|trans }})</label>
  423.                                                 <input id="vin" name="vin" type="text" style="width: 100% !important;"
  424.                                                        class="form-control input-custom input-custom-grey" placeholder="{{'app.ui.vin'|trans}} ({{ 'app.ui.chassis_number'|trans }})">
  425.                                             </div>
  426.                                         </div>
  427.                                         <div id="vinCheckIcon" class="ml-2 invisible" >
  428.                                             <img src="{{ asset('assets/shop/images/icons/ic_validation_check.png')}}" style="width: 30px"/>
  429.                                         </div>
  430.                                     </div>
  431.                                 </div>
  432.                             </div>
  433.                         </div>
  434.                     </div>
  435.                 </div>
  437.                 <div id="finalizeOrder">
  438.                     {% if app.request.locale == 'ro' and lastProductStatus.vignetteSmsStatus %}
  439.                         <div class="vignette-alert-container px-2 py-3">
  440.                             <div class="d-flex justify-content-between align-items-center-center">
  441.                                 <div class="custom-control custom-checkbox">
  442.                                     <input type="checkbox" name="vignetteAlert" id="vignetteAlert" class="custom-control-input" data-price="{{ smsPrice }}"
  443.                                             {% if oldValues.get('vignetteAlert') %} checked {% endif %}>
  444.                                     <label for="vignetteAlert" class="custom-control-label">
  445.                                         <h4 class="text-dark font-weight-bolder" style="letter-spacing: 0.01em;">{{'app.ui.sms_alert'|trans}}</h4>
  446.                                     </label>
  447.                                 </div>
  448.                                 <div>
  449.                                     <h4 class="font-weight-bolder"> {{ smsPrice }} Lei ({{ sms_price_eur }} Eur)</h4>
  450.                                 </div>
  451.                             </div>
  452.                             <div>
  453.                                 <a>{{'app.ui.alert_description'|trans}}</a>
  454.                             </div>
  455.                         </div>
  456.                     {% endif %}
  457.                     <div id="app" class="my-2">
  458.                         {% if lastProductStatus.roadAssistanceStatus and lastProductStatus.vignetteRoadAssistanceStatus %}
  459.                             <road-assistance :price="{{ road_assistance_service.retrieveDefaultPrice }}" :terms-and-conditions-route="'{{ path('bitbag_sylius_cms_plugin_shop_page_show', {'slug' : 'terms-and-conditions-road-assistance'}) }}'" v-bind:is-mobile="true"></road-assistance>
  460.                         {% endif %}
  461.                     </div>
  462.                         <div id="divCnairAlert" class="vignette-alert-container px-2 py-3 bg-white d-none">
  463.                             <div class="d-flex justify-content-between align-items-center-center">
  464.                                 <div class="custom-control custom-checkbox">
  465.                                     <input type="checkbox" name="email_allowed" id="email_allowed" class="custom-control-input">
  466.                                     <label for="email_allowed" class="custom-control-label">
  467.                                         <h5 class="text-dark" style="letter-spacing: 0.01em;">{{'app.ui.cnair_alert'|trans}}</h5>
  468.                                     </label>
  469.                                 </div>
  470.                             </div>
  471.                         </div>
  472.                     <div class="row my-3 btn-wrapper" style="height: 45px; margin: 5px;">
  473.                         <button id="btnSubmitVignette" name="btnSubmitVignette" type="submit" class="btn btn-submit btn-primary w-100 h-100">
  474.                             <a>{{'app.ui.next_step'|trans}}</a>
  475.                         </button>
  476.                     </div>
  477.                 </div>
  478.             </div>
  479.         </form>
  481.         <style>
  482.             .text-primary {
  483.                 color: #E95A31;
  484.             }
  486.             .selectpicker-custom {
  487.                 height: 50px !important;
  488.                 border-bottom: 1px solid #878C96 !important;
  489.             }
  491.             .input-custom {
  492.                 width: 100% !important;
  493.             }
  494.             .webkit-none {
  495.                 -webkit-appearance: none !important;
  496.             }
  498.             .ui-state-highlight, .ui-widget-content .ui-state-highlight {
  499.                 background: none !important;
  500.                 color: #454545 !important;
  501.                 border: none !important;
  502.             }
  504.             .modal-backdrop {
  505.                 opacity: 50% !important;
  506.             }
  507.             .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
  508.                 background-color: #e95a31 !important;
  509.             }
  511.             .b-calendar-grid-body {
  512.                 margin-left: .5rem!important;
  513.                 margin-right: .5rem!important;
  514.             }
  516.             .b-calendar-grid-weekdays {
  517.                 border: none !important;
  518.             }
  520.             .loading {
  521.                 display: flex;
  522.                 flex-direction: column;
  523.                 justify-content: center;
  524.                 align-items: center;
  525.                 text-align: center;
  526.                 min-height: 100vh;
  527.                 z-index: 999;
  528.                 position: fixed;
  529.                 background-color: rgba(0,0,0,0.7);
  530.                 opacity: 100%;
  531.                 width: 100%;
  532.                 height: 100%;
  533.             }
  534.         </style>
  535.     {% else %}
  536.         <div class="card text-center my-3">
  537.             <div class="card-header">
  538.                 <h2>{{ 'app.ui.disabled_temporary'|trans }}</h2>
  539.             </div>
  540.             <div class="card-body">
  541.                 <a href="{{ path('sylius_shop_homepage') }}">{{ 'sylius.ui.back_to_store'|trans }}</a>
  542.             </div>
  543.         </div>
  544.     {% endif %}
  545. {% endblock %}
  549. {% block footer %}
  550.     {% if lastProductStatus.vignetteStatus %}
  551.         <script>
  552.             const route = "{{ path('sylius_shop_homepage')|escape('js') }}";
  553.             const roadAssistanceTranslations = '{{ roadAssistanceTranslations|json_encode|raw }}';
  554.         </script>
  555.         {{ encore_entry_script_tags('vue') }}
  556.         {% set oldValues = app.request.request %}
  557.         <script type="text/javascript">
  558.             $(document).ready(function () {
  559.                 $(window).bind("load", function () {
  560.                     let locale = getLocale();
  561.                     function getLocale() {
  562.                         let url = Routing.generate('app_shop_get_locale');
  563.                         $.ajax({
  564.                             url: url,
  565.                             type: 'GET',
  566.                             async: false,
  567.                             dataType: 'json',
  569.                             success: function (locale) {
  570.                                 if (locale == 'ro_RO' || locale == 'ro') {
  571.                                     $('[name="carCountry"] option').filter(function() {
  572.                                         return ($(this).val() == 'RO');
  573.                                     }).prop('selected', true).change();
  574.                                     $('select[name=carCountry]').val('RO').change();
  575.                                     let selectPicker =  $('.selectpicker');
  576.                                     if (selectPicker.length > 0 && typeof selectPicker.selectpicker === 'function') {
  577.                                         selectPicker.selectpicker('refresh');
  578.                                     }
  579.                                     let btn = $('[data-id="' + 'carCountry' + '"]');
  580.                                     btn.addClass('selectpicker-custom-selected');
  581.                                     btn.removeClass('selectpicker-custom');
  582.                                 }
  583.                             },
  584.                             error: function (data) {
  586.                             }
  587.                         });
  588.                     }
  589.                 });
  590.             })
  591.             var one_day = '{{ 'app.ui.1_day'|trans|lower }}';
  592.             var seven_days = '{{ 'app.ui.7_days'|trans|lower }}';
  593.             var ten_days = '{{ 'app.ui.10_days'|trans|lower }}';
  594.             var thirty_days = '{{ 'app.ui.30_days'|trans|lower }}';
  595.             var sixty_days = '{{ 'app.ui.60_days'|trans|lower }}';
  596.             var ninety_days = '{{ 'app.ui.90_days'|trans|lower }}';
  597.             var twelve_months = '{{ 'app.ui.12_months'|trans|lower }}';
  598.             var locale = '{{ app.request.getLocale() }}';
  599.         </script>
  600.     {% endif %}
  602.     {% block cnair_partner %}
  603.         <div class="mx-5">
  604.             <div class="text-center align-items-center">
  605.                 <div class="ui circular label bg-white">
  606.                     <img src="{{ asset('assets/shop/images/icons/ic_trust_cnair_bw.png') }}" style="width: 20px"/>
  607.                 </div>
  608.                 <div class="ui circular label bg-white">
  609.                     <img src="{{ asset('assets/shop/images/icons/ic_trust_stema_bw.png') }}" style="width: 20px"/>
  610.                 </div>
  611.                 <br/>
  612.                 <small>{{ 'app.ui.cnair_authorized_long'|trans }}</small>
  613.             </div>
  614.         </div>
  615.     {% endblock %}
  617.     {% if accordionBlocksAboutVignette is defined and accordionBlocksAboutVignette|length > 0 %}
  618.         <div class="row my-3 align-items-center text-center">
  619.             {% for key, block in accordionBlocksAboutVignette %}
  620.                 <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-3">
  621.                     <button class="accordion" type="button" data-toggle="collapse" data-target="#collapse{{ key }}" aria-expanded="false" aria-controls="collapse{{ key }}">{{ block.name }}</button>
  622.                     <div class="collapse" id="collapse{{ key }}">
  623.                         <div class="card card-body border">{{ block.content|raw }}</div>
  624.                     </div>
  625.                 </div>
  626.             {% endfor %}
  627.         </div>
  628.     {% endif %}
  630.     {% if accordionBlocksAboutHuVignette is defined and accordionBlocksAboutHuVignette|length > 0 %}
  631.         <div class="row my-3 align-items-center text-center">
  632.             {% for key, block in accordionBlocksAboutHuVignette %}
  633.                 <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-3">
  634.                     <button class="accordion" type="button" data-toggle="collapse" data-target="#collapse{{ key }}" aria-expanded="false" aria-controls="collapse{{ key }}">{{ block.name }}</button>
  635.                     <div class="collapse" id="collapse{{ key }}">
  636.                         <div class="card card-body border">{{ block.content|raw }}</div>
  637.                     </div>
  638.                 </div>
  639.             {% endfor %}
  640.         </div>
  641.     {% endif %}
  643.     {% include '@templates/Front/Shop/v2/_footer.html.twig' %}
  645. {% endblock %}