templates/Mobile/HuVignette/hu-vignette.html.twig line 1

Open in your IDE?
  1. {% extends '@templates/Mobile/Shop/layout.html.twig' %}
  3. {% block head %}
  4.     <head>
  5.         {% block title %} <title>{{ 'app.hu_vignette.calculator_hu_vignette'|trans }} | roviniete.ro</title> {% endblock %}
  6.         {% block metatags %}
  7.             <meta name="description" content="{% if huVignetteDescriptionForSeo|length > 0 %}{{ huVignetteDescriptionForSeo.content }}{% endif %}"/>
  8.         {% endblock %}
  9.         <meta charset="utf-8">
  10.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  11.         <meta http-equiv="Content-Language" content="ro">
  12.         <meta name="google-site-verification" content="BEtIqk-choaMawpOxG98NtbWKAZK5MuTxV_2-pSHGFQ">
  13.         <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  14.         <meta name="keywords" content="{% if huVignetteKeywordsForSeo|length > 0 %}{{ huVignetteKeywordsForSeo.content }}{% endif %}">
  16.         {% block stylesheets %}
  17.             <link rel="stylesheet" href="/assets/shop/css/homepage.css">
  18.             <link rel="stylesheet" href="/assets/shop/css/bootstrap.min.css">
  19.             <link rel="stylesheet" href="/assets/shop/css/vignette_shop.v1.css">
  20.             <link rel="stylesheet" href="/assets/shop/css/bs-stepper.css">
  21.             <link rel="stylesheet" href="/assets/shop/css/leftmenu.v2.css">
  22.             <link rel="stylesheet" href="/assets/shop/css/bootstrap_select.css">
  23.             {{ encore_entry_link_tags('bootstrap-fix', null, 'bootstrapTheme') }}
  24.         {% endblock %}
  26.         {{ sonata_block_render_event('sylius.shop.layout.head') }}
  27.         {% block javascripts %}
  28.             <script src="{{ asset('assets/shop/js/sentry-bundle.min.js') }}"></script>
  29.             <script>
  30.                  if (typeof Sentry !== 'undefined') {
  31.                     Sentry.init({
  32.                         dsn: "{{ sentry_dsn }}",
  33.                         integrations: [new Sentry.Integrations.TryCatch({
  34.                             eventTarget: false,
  35.                         })]
  36.                     });
  37.                 }
  38.             </script>
  39.             <script src="{{ asset('assets/shop/js/jquery.min.js') }}"></script>
  40.             <script src="{{ asset('assets/shop/js/bs-stepper.js') }}"></script>
  41.             <script src="{{ asset('assets/shop/js/jquery-ui.min.js') }}"></script>
  42.             <script src="{{ asset('assets/shop/js/popper.min.js') }}"></script>
  43.             <script src="{{ asset('assets/shop/js/bootstrap.min.js') }}"></script>
  44.             <script src="{{ asset('/assets/shop/js/_bootstrap_select.min.js') }}"></script>
  45.             <script src="{{ asset('assets/shop/js/leftmenu.js') }}"></script>
  46.             {{ encore_entry_script_tags('hu-vignette') }}
  47.             <script src="{{ asset('/bundles/fosjsrouting/js/router.js') }}"></script>
  48.             <script>
  49.                 dataLayer = [];
  50.             </script>
  51.             <!-- Google Tag Manager -->
  52.             <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  53.                         new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  54.                     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  55.                     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  56.                 })(window,document,'script','dataLayer','{{ gtm_code }}');</script>
  57.             <!-- End Google Tag Manager -->
  58.             <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
  59.         {% endblock %}
  60.     </head>
  61. {% endblock %}
  64. {% block content %}
  65.     <!-- Google Tag Manager (noscript) -->
  66.     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ gtm_code }}"
  67.                       height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  68.     <!-- End Google Tag Manager (noscript) -->
  69.     {% if lastProductStatus.huVignetteStatus or isAdmin %}
  70.         <div id="loadingAvailabilitiesDiv" class="loading">
  71.             <div class="card w-50" style="background-color: #F1F2F3">
  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>{{ 'app.hu_vignette.retrieve_prices_for_category'|trans }}</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.hu_vignette.hu_vignette'|trans }}</small>
  83.         </div>
  84.         <h1 class="mt-4 mx-3">{{ 'app.hu_vignette.calculator_hu_vignette'|trans }}</h1>
  85.         {% set smsPrice = sms_price_ron.calculateSmsPrice %}
  86.         {% set oldValues = app.request.request %}
  87.         <div id="specialErrors" class="alert alert-warning alert-dismissible fade show d-none" role="alert">
  88.             <div class="header text-center">
  89.                 <h2>{{ 'app.ui.error'|trans }}</h2>
  90.             </div>
  91.             <p>
  92.             <h5 class="text-center text-primary vignette-already-bought d-none">
  93.                 {{ 'app.hu_vignette.hu_vignette_available_for_choosen_date'|trans }}
  94.             </h5>
  95.             <h5 class="special-error">
  96.             </h5>
  97.             <a class="text-center">
  98.             </a>
  99.             </p>
  100.             <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  101.                 <span aria-hidden="true">&times;</span>
  102.             </button>
  103.         </div>
  104.         <div id="categoryError" class="alert alert-warning fade show d-none" role="alert">
  105.             <div class="header text-center">
  106.                 <h2>{{ 'app.ui.error'|trans }}</h2>
  107.             </div>
  108.             <p>
  109.             <h5 class="text-center text-primary">
  110.                 {{ 'app.ui.vignette_category_error'|trans }}
  111.             </h5>
  112.             <h5 class="special-error">
  113.             </h5>
  114.             <a class="text-center">
  115.             </a>
  116.             </p>
  117.         </div>
  118.         <div id="divNoSpecialCharacters" class="alert alert-warning d-none" role="alert">
  119.             {{ 'app.ui.no_special_characters_allowed'|trans }}
  120.         </div>
  121.         {% include '@templates/Mobile/Checkout/_modal_payment_not_available.html.twig' %}
  122.         <div class="row mx-1 my-3">
  124.         </div>
  125.         <form id="huVignetteForm" data-is-mobile="1" method="POST">
  126.             <input type="hidden" value="1" name="isHuVignette" />
  127.             <input type="hidden" name="productStatusExtraOptions" id="productStatusExtraOptions" value="{{ lastProductStatus.extraOptionsStatus }}">
  128.             <div class="mb-5">
  129.                 <div class="main-container mx-2 mt-2">
  130.                     <div id="accordion">
  131.                         <div class="card mb-3 shadow-sm">
  132.                             <div id="headingOne" class="pb-2">
  133.                                 <h5 class="mb-0">
  134.                                     <div class="d-flex justify-content-between">
  135.                                         <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>
  136.                                             <div class="row align-items-center mt-2 mr-2">
  137.                                                 <div class="col-12 mt-1">
  138.                                                     <div class="d-flex justify-content-between align-items-left w-100">
  139.                                                         <div class="step-wrapper">
  140.                                                             <img id="imgStep1" class="float-left" src="{{ asset('assets/shop/images/icons/ic_check_small_primary.png')}}" style="width: 18px; position: relative; margin-right: 10px;display:inline-block;float:left"/>
  141.                                                             <a id="txtStep1" class="text-primary">
  142.                                                                 <span class="float-left" style="float:left;font-size: 1.5em; font-weight: 500;">{{'app.ui.step_one'|trans}}</span>
  143.                                                                 <span id="step1CollapsedTxt" style="font-size: 1.3em; font-weight: 400; margin-left: 20px;">{{ 'app.ui.step_one_indication'|trans }}</span>
  144.                                                             </a>
  145.                                                         </div>
  146.                                                         <div id="step1EditIcon"  class="d-none"  style="margin-left: auto; order: 2;">
  147.                                                             <img src="{{ asset('assets/shop/images/icons/ic_edit_grey.png')}}" style="width: 20px"/>
  148.                                                         </div>
  149.                                                     </div>
  150.                                                     <div class="text-left" style="margin-left: 27px">
  151.                                                         <a id="txtSelectionStep1"></a>
  152.                                                     </div>
  154.                                                 </div>
  155.                                             </div>
  156.                                         </button>
  157.                                         <div>
  158.                                             <img class="show-info-btn" data-for="category" src="{{ asset('assets/shop/images/icons/info.png') }}" style="width: 30px;height: 30px;"/>
  159.                                         </div>
  160.                                     </div>
  161.                                 </h5>
  162.                             </div>
  164.                             <div id="step1Collapse" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion" >
  165.                                 <div class="card-body">
  166.                                     <div class="mt-0">
  167.                                         {% for category in categories %}
  168.                                             {% if loop.index % 2 != 0 %}
  169.                                                 <div class="d-flex justify-content-between {% if loop.index == categories|length %} w-50 {% endif %}">
  170.                                             {% endif %}
  171.                                             <label type="button" for="{{ category.code|lower }}" class="btn btn-vignette-unselected w-100 mr-1 webkit-none" style="min-height: 60px !important;">
  172.                                                 <div class="d-flex justify-content-between align-items-center">
  173.                                                     <input type="radio" name="category" data-error-message="{{'app.errors.no_category_selected'|trans }}" id="{{ category.code|lower }}" value="{{ category.id }}"
  174.                                                            data-category="{% if category.wsId == category_hu_vignette_d1m_id %}
  175.                                                                         {{ 'app.hu_vignette.category_d1m_name'|trans }}
  176.                                                                     {% elseif category.wsId == category_hu_vignette_d1_id %}
  177.                                                                         {{ 'app.hu_vignette.category_d1_name'|trans }}
  178.                                                                     {% elseif category.wsId == category_hu_vignette_d2_id %}
  179.                                                                         {{ 'app.hu_vignette.category_d2_name'|trans|raw }}
  180.                                                                     {% elseif category.wsId == category_hu_vignette_b2_id %}
  181.                                                                         {{ 'app.hu_vignette.category_b2_name'|trans }}
  182.                                                                     {% elseif category.wsId == category_hu_vignette_u_id %}
  183.                                                                         {{ 'app.hu_vignette.category_u_name'|trans|raw }}
  184.                                                                     {% endif %}" hidden>
  186.                                                     <img src="{{ (asset('assets/shop/images/icons/hu_' ~ category.code|lower) ~ '_orange.png')}}" style="height: 46px"/>
  187.                                                     <a id="vehicleType-{{category.code|lower}}" class="font-weight-bold" style="color: #343a40;" >
  188.                                                         {% if category.wsId == category_hu_vignette_d1m_id %}
  189.                                                             {{ 'app.hu_vignette.category_d1m_short_code'|trans }}
  190.                                                         {% elseif category.wsId == category_hu_vignette_d1_id %}
  191.                                                             {{ 'app.hu_vignette.category_d1_short_code'|trans }}
  192.                                                         {% elseif category.wsId == category_hu_vignette_d2_id %}
  193.                                                             {{ 'app.hu_vignette.category_d2_short_code'|trans|raw }}
  194.                                                         {% elseif category.wsId == category_hu_vignette_b2_id %}
  195.                                                             {{ 'app.hu_vignette.category_b2_short_code'|trans }}
  196.                                                         {% elseif category.wsId == category_hu_vignette_u_id %}
  197.                                                             {{ 'app.hu_vignette.category_u_short_code'|trans|raw }}
  198.                                                         {% endif %}
  199.                                                     </a>
  200.                                                 </div>
  201.                                             </label>
  202.                                             {% if loop.index % 2 == 0 or loop.index == categories|length %}
  203.                                                 </div>
  204.                                             {% endif %}
  205.                                         {% endfor %}
  206.                                     </div>
  207.                                 </div>
  208.                             </div>
  209.                         </div>
  210.                         <div class="card mb-3 shadow-sm">
  211.                             <div id="headingTwo" class="pb-2">
  212.                                 <h5 class="mb-0">
  213.                                     <div class="d-flex justify-content-between">
  214.                                         <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">
  215.                                             <div class="row align-items-start mt-2 mr-2">
  216.                                                 <div class="col-12 mt-1">
  217.                                                     <div class="d-flex justify-content-between align-items-center w-100">
  218.                                                         <div>
  219.                                                             <img id="imgStep2" class="float-left" src="{{ asset('assets/shop/images/icons/ic_check_small_grey.png')}}" style="width: 18px; position: relative; margin-right: 10px;"/>
  220.                                                             <a id="txtStep2" class="text-secondary">
  221.                                                                 <span class='float-left' style="font-size: 1.5em; font-weight: 500;">{{'app.ui.step_two'|trans}}</span>
  222.                                                                 <span id="step2CollapsedTxt" style="font-size: 1.3em; font-weight: 400; margin-left: 20px;">{{ 'app.hu_vignette.availability_type'|trans }}</span>
  223.                                                             </a>
  224.                                                         </div>
  225.                                                         <div id="step2EditIcon"  class="d-none"  style=" margin-left: auto; order: 2;"  >
  226.                                                             <img src="{{ asset('assets/shop/images/icons/ic_edit_grey.png')}}" style="width: 20px"/>
  227.                                                         </div>
  228.                                                     </div>
  229.                                                     <div class="text-left" style="margin-left: 27px">
  230.                                                         <a id="txtSelectionStep2"></a>
  231.                                                     </div>
  233.                                                 </div>
  234.                                             </div>
  235.                                         </button>
  236.                                         <div>
  237.                                             <img class="show-info-btn" data-for="availability" src="{{ asset('assets/shop/images/icons/info.png') }}" style="width: 30px;height: 30px;"/>
  238.                                         </div>
  239.                                     </div>
  240.                                 </h5>
  241.                             </div>
  243.                             <div id="step2Collapse" class="collapse availability-wrapper" data-error-message="{{'app.errors.no_availability_selected'|trans }}" aria-labelledby="headingTwo" data-parent="#accordion">
  244.                                 <div class="card-body">
  245.                                     <div class="d-flex justify-content-between my-2">
  246.                                         <div data-toggle="tooltip" data-placement="top" class="w-100 mx-3 tooltip-prevent-availability" title="{{ 'app.hu_vignette.please_select_a_category_first'|trans }}">
  247.                                             <label type="button" id="lblAv1Day" for="av_1" class="btn btn-vignette-unselected w-100 webkit-none d-flex align-items-center justify-content-center" data-value="{{ 'app.hu_vignette.1_day'|trans }}" data-title="mobile" style="min-height: 145px !important;">
  248.                                                 <div class="mx-2 my-2">
  249.                                                     <input type="radio" name="availability" id="av_1" value="31" data-value="{{ 'app.hu_vignette.1_day'|trans }}" hidden disabled>
  250.                                                     <h2 id="txtAv1Day" class="text-primary txtAvailability">{{ 'app.hu_vignette.1_day'|trans }}</h2>
  251.                                                     <a id="txtAv1DayPrice" class="txtAvailabilityPrice text-dark"></a>
  252.                                                 </div>
  253.                                             </label>
  254.                                         </div>
  255.                                         <div data-toggle="tooltip" data-placement="top" class="w-100 mx-3 tooltip-prevent-availability" title="{{ 'app.hu_vignette.please_select_a_category_first'|trans }}">
  256.                                             <label type="button" id="lblAv10Days" for="av_10" class="btn btn-vignette-unselected w-100 webkit-none d-flex align-items-center justify-content-center" data-value="{{ 'app.hu_vignette.10_days'|trans }}" data-title="mobile" style="min-height: 145px !important;">
  257.                                                 <div class="mx-2 my-2">
  258.                                                     <input type="radio" name="availability" id="av_10" value="1" data-value="{{ 'app.hu_vignette.10_days'|trans }}" hidden disabled>
  259.                                                     <h2 id="txtAv10Days" class="text-primary txtAvailability">{{ 'app.hu_vignette.10_days'|trans }}</h2>
  260.                                                     <a id="txtAv10DaysPrice" class="txtAvailabilityPrice text-dark"></a>
  261.                                                 </div>
  262.                                             </label>
  263.                                         </div>
  264.                                 </div>
  265.                                     <div class="d-flex justify-content-between my-2">
  266.                                         <div data-toggle="tooltip" data-placement="top" class="w-100 mx-3 tooltip-prevent-availability" title="{{ 'app.hu_vignette.please_select_a_category_first'|trans }}">
  267.                                             <label type="button" id="lblAv30Days" for="av_30" class="btn btn-vignette-unselected w-100 webkit-none d-flex align-items-center justify-content-center" data-value="{{ 'app.ui.30_days'|trans }}" data-title="mobile" style="min-height: 145px !important;">
  268.                                                 <div class="mx-2 my-2">
  269.                                                     <input type="radio" name="availability" id="av_30" value="2" data-value="{{ 'app.hu_vignette.30_days'|trans }}" hidden disabled>
  270.                                                     <h2 id="txtAv30Days" class="text-primary txtAvailability">{{ 'app.ui.30_days'|trans }}</h2>
  271.                                                     <a id="txtAv30DaysPrice" class="txtAvailabilityPrice text-dark"></a>
  272.                                                 </div>
  273.                                             </label>
  274.                                         </div>
  275.                                         <div data-toggle="tooltip" data-placement="top" class="w-100 mx-3 tooltip-prevent-availability" title="{{ 'app.hu_vignette.please_select_a_category_first'|trans }}">
  276.                                             <label type="button" id="lblAv12Months" for="av_12" class="btn btn-vignette-unselected w-100 webkit-none d-flex align-items-center justify-content-center" data-value="{{ 'app.ui.12_months'|trans|raw }}" data-title="mobile" style="min-height: 145px !important;">
  277.                                                 <div class="mx-2 my-2">
  278.                                                     <input type="radio" name="availability" id="av_12" value="3" data-value="{{ 'app.hu_vignette.12_months'|trans|raw }}" hidden disabled>
  279.                                                     <h2 id="txtAv1Year" class="text-primary txtAvailability">{{ 'app.ui.12_months'|trans|raw }}</h2>
  280.                                                     <a id="txtAv1YearPrice" class="txtAvailabilityPrice text-dark"></a>
  281.                                                 </div>
  282.                                             </label>
  283.                                         </div>
  284.                                     </div>
  285.                                     <div class="d-flex justify-content-between my-2">
  286.                                         <div data-toggle="tooltip" data-placement="top" class="w-100 mx-3 tooltip-prevent-availability" title="{{ 'app.hu_vignette.please_select_a_category_first'|trans }}">
  287.                                             <label type="button" id="lblAv12County" for="av_12_county" class="btn btn-vignette-unselected w-100 webkit-none d-flex align-items-center justify-content-center" data-value="{{ 'app.hu_vignette.12_months_county'|trans|raw }}" data-title="mobile" style="min-height: 145px !important;">
  288.                                                 <div class="mx-2 my-2">
  289.                                                     <input type="radio" name="availability" id="av_12_county" value="4" data-value="{{ 'app.hu_vignette.12_months_county'|trans|raw }}" hidden disabled>
  290.                                                     <h2 id="txtAv12County" class="text-primary txtAvailability">{{ 'app.hu_vignette.12_months_county'|trans|raw }}</h2>
  291.                                                     <a id="txtAv12CountyPrice" class="txtAvailabilityPrice text-dark"></a>
  292.                                                 </div>
  293.                                             </label>
  294.                                         </div>
  295.                                     </div>
  296.                                     <div id="selectCountiesDiv" class="d-none">
  297.                                         <label for="counties">{{ 'app.hu_vignette.select_counties'|trans }}</label> <br/>
  298.                                         <select id="counties" class="selectpicker w-100" name="counties[]" data-style="btn-light h-35-px"
  299.                                                 multiple data-live-search="true" data-done-button="true" data-actions-box="true" data-live-search-style="startsWith"
  300.                                                 title="{{ 'app.hu_vignette.please_select_at_least_one'|trans }}">
  301.                                         </select>
  302.                                     </div>
  303.                                 <h6 class="text-center mt-3">{{ 'app.hu_vignette.price_without_tax'|trans }}</h6>
  304.                             </div>
  305.                         </div>
  306.                     </div>
  307.                         <div class="card mb-3 shadow-sm">
  308.                             <div id="headingThree" class="pb-2">
  309.                                 <h5 class="mb-0">
  310.                                     <div class="d-flex justify-content-between">
  311.                                         <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">
  312.                                             <div class="row align-items-start mt-2 mr-2">
  313.                                                 <div class="col-12 mt-1">
  314.                                                     <div class="d-flex justify-content-between align-items-center">
  315.                                                         <div>
  316.                                                             <img id="imgStep3" src="{{ asset('assets/shop/images/icons/ic_check_small_grey.png')}}" style="width: 18px;top:-2px; position: relative; margin-right: 10px;"/>
  317.                                                             <a id="txtStep3" class="text-secondary">
  318.                                                                 <span style="font-size: 1.5em; font-weight: 500;">{{'app.ui.step_three'|trans}}</span>
  319.                                                                 <span id="step3CollapsedTxt" style="font-size: 1.3em; font-weight: 400; margin-left: 20px;">{{ 'app.ui.select_start_date'|trans}}</span>
  320.                                                             </a>
  321.                                                         </div>
  322.                                                         <div id="step3EditIcon"  class="d-none"  style=" margin-left: auto; order: 2;"  >
  323.                                                             <img src="{{ asset('assets/shop/images/icons/ic_edit_grey.png')}}" style="width: 20px"/>
  324.                                                         </div>
  325.                                                     </div>
  326.                                                     <div class="text-left" style="margin-left: 27px">
  327.                                                         <a id="txtSelectionStep3" style="display: none"></a>
  328.                                                     </div>
  329.                                                 </div>
  330.                                             </div>
  331.                                         </button>
  332.                                         <div style="display: none">
  333.                                             <button data-toggle="tooltip" class="tooltip-button" data-placement="top" data-original-title="{{ 'app.hu_vignette.availability_description'|raw|trans }}">
  334.                                                 <img src="{{ asset('assets/shop/images/icons/info.png') }}" style="width: 30px"/>
  335.                                             </button>
  336.                                         </div>
  337.                                     </div>
  338.                                 </h5>
  339.                             </div>
  341.                             <div id="step3Collapse" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
  342.                                 <div class="card-body">
  343.                                     <div class="d-flex justify-content-center">
  344.                                         <input type="hidden" id="validFrom" name="validFrom">
  345.                                         <div id="datepicker" data-error-message = '{{'app.errors.no_date_selected'|trans }}'></div>
  346.                                     </div>
  347.                                 </div>
  348.                             </div>
  349.                         </div>
  352.                         <div class="card mb-3 shadow-sm">
  353.                             <div id="headingFour" class="pb-2">
  354.                                 <h5 class="mb-0">
  355.                                     <div class="d-flex justify-content-between">
  356.                                         <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">
  357.                                             <div class="row align-items-start mt-2 mr-2">
  358.                                                 <div class="col-12 mt-1">
  359.                                                     <div class="d-flex justify-content-between align-items-center">
  360.                                                         <div>
  361.                                                             <img id="imgStep4" src="{{ asset('assets/shop/images/icons/ic_check_small_grey.png')}}" style="width: 18px; position: relative; top: -2px; margin-right: 10px;"/>
  362.                                                             <a id="txtStep4" class="text-secondary">
  363.                                                                 <span style="font-size: 1.5em; font-weight: 500;">{{'app.ui.step_four'|trans}}</span>
  364.                                                                 <span style="font-size: 1.3em; font-weight: 400; margin-left: 20px;">{{ 'app.ui.step_four_indication'|trans }}</span>
  365.                                                             </a>
  366.                                                         </div>
  367.                                                         <div id="step4EditIcon"  class="d-none"  style=" margin-left: auto; order: 2;"  >
  368.                                                             <img src="{{ asset('assets/shop/images/icons/ic_edit_grey.png')}}" style="width: 20px"/>
  369.                                                         </div>
  370.                                                     </div>
  371.                                                 </div>
  372.                                             </div>
  373.                                         </button>
  374.                                         <div style="display: none">
  375.                                             <button data-toggle="tooltip" class="tooltip-button" data-placement="top" data-original-title="{{ 'app.hu_vignette.availability_description'|raw|trans }}">
  376.                                                 <img src="{{ asset('assets/shop/images/icons/info.png') }}" style="width: 30px"/>
  377.                                             </button>
  378.                                         </div>
  379.                                     </div>
  380.                                 </h5>
  381.                             </div>
  383.                             <div id="step4Collapse" class="collapse" aria-labelledby="headingFour" data-parent="#accordion">
  384.                                 <div class="card-body">
  385.                                     <div class=" d-flex align-items-center" >
  386.                                         <div class="mr-2">
  387.                                             <label for="carCountry" id="carCountryLabel" class="lbl-custom lbl-custom-grey d-none" style="width: 100% !important;">{{ 'app.ui.country_code'|trans}}</label>
  388.                                             <select id="carCountry" name="carCountry"
  389.                                                     data-style="btn-grey border-0 selectpicker-custom shadow-none prometo-font restrict-height" data-live-search="true"
  390.                                                     title="{{ 'app.ui.country_code'|trans }}*" class="form-control input-custom input-custom-grey selectpicker"
  391.                                                     required>
  392.                                                 <option id="countryCodeOption" value="">{{'app.ui.country_code'|trans}}</option>
  393.                                                 {% for country in countries|sort((a, b) => a.name > b.name) %}
  394.                                                     <option data-content="<span class='text-dark'>{{ country.name }} - {{ country.code }}</span>"
  395.                                                             value="{{ country.code }}"
  396.                                                     >{{ country.name }} - {{ country.code }}</option>
  397.                                                 {% endfor %}
  398.                                             </select>
  399.                                         </div>
  400.                                         <div class="flex-grow-1">
  401.                                             <label for="registrationPlate"  id="registrationPlateLabel" class="lbl-custom lbl-custom-grey d-none" style="width: 100% !important;">{{'app.ui.registration_plate'|trans}}</label>
  402.                                             <input id="registrationPlate" data-warning-message="{{ 'app.warning.characters_not_allowed'|trans }}" data-error-message="{{'app.errors.no_plate'|trans }}" name="registrationPlate"
  403.                                                    maxlength="10" type="text" class="form-control input-custom input-custom-grey"
  404.                                                    placeholder="{{'app.ui.registration_plate'|trans}}" required>
  405.                                         </div>
  406.                                         <div id="registrationPlateCheckIcon" class="ml-2 invisible" >
  407.                                             <img src="{{ asset('assets/shop/images/icons/ic_validation_check.png')}}" style="width: 30px"/>
  408.                                         </div>
  409.                                     </div>
  410.                                     <div class="date-disclaimer mb-1">
  411.                                         {% autoescape false %}
  412.                                             <b>Calendar Huvinieta</b> - calendarul se bazează pe ora Ungariei
  413.                                         {% endautoescape %}
  414.                                     </div>
  415.                                     <div class="date-disclaimer">
  416.                                         {% autoescape false %}
  417.                                             {{'app.ui.date_disclaimer'|trans}}
  418.                                         {% endautoescape %}
  419.                                     </div>
  420.                                     <div class="d-flex align-items-center my-2">
  421.                                         <div class="flex-grow-1">
  422.                                             <div id="vinBlock">
  424.                                             </div>
  425.                                         </div>
  426.                                         <div id="vinCheckIcon" class="ml-2 invisible" >
  427.                                             <img src="{{ asset('assets/shop/images/icons/ic_validation_check.png')}}" style="width: 30px"/>
  428.                                         </div>
  429.                                     </div>
  430.                                 </div>
  431.                             </div>
  432.                         </div>
  433.                     </div>
  434.                 </div>
  436.                 <div id="finalizeOrder">
  437.                     {# <div id="smsAlert" class="vignette-alert-container px-2 py-3">
  438.                     <div class="d-flex justify-content-between align-items-center-center">
  439.                         <div class="custom-control custom-checkbox">
  440.                             <input type="checkbox" name="vignetteAlert" id="vignetteAlert" class="custom-control-input">
  441.                             <label for="vignetteAlert" class="custom-control-label">
  442.                                 <h4 class="text-dark font-weight-bolder" style="letter-spacing: 0.01em;">{{'app.ui.sms_alert'|trans}}</h4>
  443.                             </label>
  444.                         </div>
  445.                         <div>
  446.                             <h4 class="font-weight-bolder"> {{ smsPrice }} Lei ({{ sms_price_eur }} Eur)</h4>
  447.                         </div>
  448.                     </div>
  449.                     <div>
  450.                         <a>{{'app.ui.alert_description'|trans}}</a>
  451.                     </div>
  452.                 </div>#}
  453.                     <div class="row my-3" style="height: 45px; margin: 5px;">
  454.                         <button id="btnSubmitVignette" name="btnSubmitVignette" type="submit" class="submit-button btn btn-submit btn-primary w-100 h-100">
  455.                             <a>{{'app.ui.next_step'|trans}}</a>
  456.                         </button>
  457.                     </div>
  458.                 </div>
  459.             </div>
  460.         </form>
  461.         <div class="row">
  462.             <div class="col-12">
  463.                 <div class="info-text category">
  464.                     {% autoescape false %}
  465.                         {{ 'app.hu_vignette.category_description'|raw|trans }}
  466.                     {% endautoescape %}
  467.                 </div>
  468.             </div>
  470.             <div class="col-12">
  471.                 <div class="info-text availability">
  472.                     {% autoescape false %}
  473.                         {{ 'app.hu_vignette.availability_description'|raw|trans }}
  474.                     {% endautoescape %}
  475.                 </div>
  476.             </div>
  477.         </div>
  478.         <div class="bs-stepper">
  480.         </div>
  481.         <style>
  483.             .date-disclaimer {
  484.                 border: 1px solid;
  485.                 padding: 5px;
  486.                 margin-top: 10px;
  487.             }
  488.             .step-wrapper {
  489.                 display: inline-block;
  490.             }
  492.             #imgStep1 span {
  493.                 float:left;
  494.             }
  496.             button.tooltip-button {
  497.                 cursor: pointer;
  498.                 border: none;
  499.                 background-color: transparent;
  500.                 padding: 0;
  501.             }
  502.             button.tooltip-button:focus {outline:0;}
  503.             .selectpicker-custom {
  504.                 height: 50px !important;
  505.                 border-bottom: 1px solid #878C96 !important;
  506.             }
  508.             .input-custom {
  509.                 width: 100% !important;
  510.             }
  511.             .webkit-none {
  512.                 -webkit-appearance: none !important;
  513.             }
  515.             .tooltip-inner {
  516.                 max-width: 350px; /* set this to your maximum fitting width */
  517.                 width: inherit; /* will take up least amount of space */
  518.             }
  520.             .restrict-height {
  521.                 height: 25px !important;
  522.             }
  524.             .loading {
  525.                 display: flex;
  526.                 flex-direction: column;
  527.                 justify-content: center;
  528.                 align-items: center;
  529.                 text-align: center;
  530.                 min-height: 100vh;
  531.                 z-index: 999;
  532.                 position: fixed;
  533.                 background-color: rgba(0,0,0,0.7);
  534.                 opacity: 100%;
  535.                 width: 100%;
  536.                 height: 100%;
  537.             }
  539.             .availability-box {
  540.                 max-width: 130px;
  541.             }
  543.             .dropdown-menu.show {
  544.                 max-width: 100%;
  545.             }
  548.             .datepicker-disabled .ui-datepicker-next {
  549.                 display: none;
  550.             }
  552.             .datepicker-disabled .ui-state-default {
  553.                 color: lightgray;
  554.                 cursor: default;
  555.             }
  556.             .show-info-btn {
  557.                 cursor: pointer;
  558.             }
  559.             .info-text {
  560.                 display: block;
  561.                 border: 1px solid lightgray;
  562.                 padding: 20px;
  563.                 width: 100%;
  564.                 background: white;
  565.                 border-radius: 20px;
  566.             }
  567.             .ui-state-highlight, .ui-widget-content .ui-state-highlight {
  568.                 background: none !important;
  569.                 color: #454545 !important;
  570.                 border: none !important;
  571.             }
  572.         </style>
  573.     {% else %}
  574.         <div class="card text-center my-3">
  575.             <div class="card-header">
  576.                 <h2>{{ 'app.ui.disabled_temporary'|trans }}</h2>
  577.             </div>
  578.             <div class="card-body">
  579.                 <a href="{{ path('sylius_shop_homepage') }}">{{ 'sylius.ui.back_to_store'|trans }}</a>
  580.             </div>
  581.         </div>
  582.     {% endif %}
  583. {% endblock %}
  587. {% block footer %}
  588.     {% if lastProductStatus.huVignetteStatus or isAdmin %}
  589.         <script type="text/javascript">
  590.             $(document).ready(function () {
  591.                 $('.selectpicker').selectpicker({
  592.                     'selectAllText': '{{ 'app.ui.select_all'|trans }}',
  593.                     'deselectAllText': '{{ 'app.ui.deselect_all'|trans }}',
  594.                     'doneButtonText': '{{ 'app.ui.close'|trans }}',
  595.                 });
  596.                 $('.show-info-btn').click(function() {
  597.                     const element = $('.info-text.'+$(this).data('for'));
  598.                     element.toggleClass('d-none');
  599.                     if (!element.hasClass('d-none')) {
  600.                         $("html, body").animate({ scrollTop: $(document).height() }, 1000);
  601.                     }
  602.                 });
  603.                 $('body').on('keyup', '.bs-searchbox input', function() {
  604.                     const options = optionsStartsWith($(this).val(), $('#carCountry').find('option'));
  605.                     $("#carCountry").empty().append(options);
  606.                     $("#carCountry").selectpicker('refresh');
  607.                 });
  609.                 function optionsStartsWith(input, data) {
  610.                     const first = [];
  611.                     const others = [];
  612.                     for (var i = 0; i < data.length; i++) {
  613.                         console.log(data[i].text.toLowerCase());
  614.                         console.log(input);
  615.                         if (startsWith(data[i].text.toLowerCase(), input.toLowerCase())) {
  616.                             first.push(data[i]);
  617.                         } else {
  618.                             others.push(data[i]);
  619.                         }
  620.                     }
  622.                     return first.concat(others);
  623.                 }
  625.                 function startsWith(str, word) {
  626.                     return str.indexOf(word) === 0;
  627.                 }
  629.                 $('[data-toggle="tooltip"]').tooltip({
  630.                     html:true,
  631.                     trigger: 'focus'
  632.                 });
  633.                 $(window).bind("load", function () {
  634.                     let locale = getLocale();
  635.                     function getLocale() {
  636.                         let url = Routing.generate('app_shop_get_locale');
  637.                         $.ajax({
  638.                             url: url,
  639.                             type: 'GET',
  640.                             async: false,
  641.                             dataType: 'json',
  643.                             success: function (locale) {
  644.                                 if (locale == 'ro_RO' || locale == 'ro') {
  645.                                     $('[name="carCountry"] option').filter(function() {
  646.                                         return ($(this).val() == 'RO');
  647.                                     }).prop('selected', true).change();
  648.                                     $('select[name=carCountry]').val('RO').change();
  649.                                     $('.selectpicker').selectpicker('refresh');
  650.                                     let btn = $('[data-id="' + 'carCountry' + '"]');
  651.                                     btn.addClass('selectpicker-custom-selected');
  652.                                     btn.removeClass('selectpicker-custom');
  653.                                 } else if (locale == 'hu') {
  654.                                     $('[name="carCountry"] option').filter(function() {
  655.                                         return ($(this).val() == 'HU');
  656.                                     }).prop('selected', true).change();
  657.                                 }
  658.                             },
  659.                             error: function (data) {
  661.                             }
  662.                         });
  663.                     }
  664.                 });
  665.             })
  666.             var stepper = new Stepper($('.bs-stepper')[0]);
  667.             var one_day = '{{ 'app.hu_vignette.1_day'|trans|lower }}';
  668.             var ten_days = '{{ 'app.hu_vignette.10_days'|trans|lower }}';
  669.             var thirty_days = '{{ 'app.hu_vignette.30_days'|trans|lower }}';
  670.             var twelve_months = '{{ 'app.hu_vignette.12_months'|trans|lower|raw }}';
  671.             var twelve_months_county = '{{ 'app.hu_vignette.12_months_county'|trans|lower|raw }}';
  672.             var locale = '{{ app.request.getLocale() }}';
  673.             var isOneYearHuVignetteAvailableThisYear = {{ isOneYearHuVignetteAvailableThisYear ? 'true' : 'false' }};
  674.         </script>
  675.     {% endif %}
  677.     {% block cnair_partner %}
  678.         <div class="mx-5">
  679.             <div class="text-center align-items-center">
  680.                 <div class="ui circular label bg-white">
  681.                     <img src="{{ asset('assets/shop/images/icons/ic_trust_cnair_bw.png') }}" style="width: 20px"/>
  682.                 </div>
  683.                 <div class="ui circular label bg-white">
  684.                     <img src="{{ asset('assets/shop/images/icons/ic_trust_stema_bw.png') }}" style="width: 20px"/>
  685.                 </div>
  686.                 <br/>
  687.                 <small>
  688.                     {{ 'app.ui.cnair_authorized_long'|trans }}
  689.                 </small>
  690.             </div>
  691.         </div>
  692.     {% endblock %}
  694.     {% if accordionBlocksAboutHuVignette is defined and accordionBlocksAboutHuVignette|length > 0 %}
  695.         <div class="row my-3 align-items-center text-center">
  696.             {% for key, block in accordionBlocksAboutHuVignette %}
  697.                 <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-3">
  698.                     <button class="accordion" type="button" data-toggle="collapse" data-target="#collapse{{ key }}" aria-expanded="false" aria-controls="collapse{{ key }}">{{ block.name }}</button>
  699.                     <div class="collapse" id="collapse{{ key }}">
  700.                         <div class="card card-body border">{{ block.content|raw }}</div>
  701.                     </div>
  702.                 </div>
  703.             {% endfor %}
  704.         </div>
  705.     {% endif %}
  707.     {% include '@templates/Front/Shop/v2/_footer.html.twig' %}
  709. {% endblock %}