templates/admin/experience/edit/editPrice.html.twig line 1

Open in your IDE?
  1. {% extends 'admin/baseAdmin.html.twig' %}
  2. {% block page_title %}Modifier tarrification {% endblock %}
  3. {% block breadcump_main %}Prix{% endblock %}
  4. {% block breadcump_subtitle %}Modification{% endblock %}
  5. {% block menu_left_sidebar %}
  6.     {% include 'include/menu/menuAdmin.html.twig' with { menu_active_event : '2'} %}
  7. {% endblock %}
  8. {% block stylesheets %}
  9.     <link href="{{ asset('admin/libs/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css">
  10.     <link href="{{ asset('admin/css/tailwind.min.css') }}" rel="stylesheet" type="text/css">
  11.     <link href="{{ asset('admin/css/tailwind2.css') }}" rel="stylesheet" type="text/css">
  12.     <link href="{{ asset('admin/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css">
  13.     <link href="{{ asset('admin/libs/@chenfengyuan/datepicker/datepicker.min.css') }}" rel="stylesheet" type="text/css">
  14. {% endblock %}
  15. {% block content %}
  16.     <form id="form-general" class="general-info custom-validation" method="POST" action="{{ path('edit_price',{'id':experience.id}) }}" enctype="multipart/form-data"  >
  17.         <div class="container-fluid">
  18.             <div class="row">
  19.                 <div class="col-xl-12 px-0">
  20.                     <div class="card">
  21.                         <div class="card-body">
  22.                             <div class="sm:p-4 p-2 pb-0 pt-1">
  23.                                 <h5 class="text-lg font-semibold mt-2 mb-2 ">Prix et tarification </h5>
  24.                                 <p class="pb-1 text-gray-700 text-sm">Calculer le prix de l'expérience, en excluant le prix de l'hébergement standard si c'est le cas d'hebergement.
  25.                                 </p>
  26.                                 <div class="mt-10  flex justify-center gap-5">
  27.                                     <div class="flex gap-2 w-8/12 ">
  28.                                         <div class="w-10/12">
  29.                                             <h6 class="text-13 dark:text-white font-semibold mb-2">Le prix de l'éxperience</h6>
  30.                                             <div class="relative h-16 w-full">
  31.                                                 <input value="{{ experience.price }}" style="font-size: 1.5rem;COLOR: #f8853b;text-align: center;" required="" name="price" type="number" id="floating_outlined" class="appearance-none bg-transparent block border border-gray-400 dark:bg-transparent dark:border-zink-50 dark:placeholder:text-zink-200 dark:text-zink-200 focus:border-blue-600 focus:outline-none focus:ring-0 h-100 pb-2.5 peer pt-4 px-2.5 rounded-lg text-gray-900 text-sm w-full" placeholder=" ">
  32.                                                 <label for="floating_outlined" class="absolute text-sm text-gray-600 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 left-1 dark:bg-transparent">Prix</label>
  33.                                             </div>
  34.                                         </div>
  35.                                         <div class="w-1/6">
  36.                                             <h6 class="text-13 dark:text-white font-semibold mb-2">Devise</h6>
  37.                                             <div class="relative h-16">
  38.                                                 <select required="" name='currency' placeholder="choisir le type d'accomodation" class="h-100 text-sm form-control " aria-invalid="false">
  39.                                                     <option {% if experience.currency == 'usd' %}selected=""{% endif %} value="usd">$ USD</option>
  40.                                                     <option {% if experience.currency == 'eur' %}selected=""{% endif %} value="eur">€ EUR</option>
  41.                                                     <option {% if experience.currency == 'GBP' %}selected=""{% endif %} value="gbp">£ GBP</option>
  42.                                                     <option {% if experience.currency == 'mad' %}selected=""{% endif %} value="gbp">dh MAD</option>
  43.                                                 </select>
  44.                                             </div>
  45.                                         </div>
  46.                                     </div>
  47.                                 </div>
  48.                             </div>
  49.                             <!-- end row -->
  50.                             <h5 class="text-lg font-semibold mt-5 ">Politique d'annulation </h5>
  51.                             <p class="pb-1 text-gray-700 text-sm">Pour mieux servir tout le monde, nous avons standardisé les politiques d'annulation pour les retraites. Moins de confusion. Plus de clarté. Les deux conduisent à plus de réservations et moins de maux de tête pour vous. 
  52.                             </p>
  53.                             <div class="flex items-start mt-3">
  54.                                 <p for="" class="form-label font-medium text-sm mr-2 col-3"> Choisir un choix:  </p>
  55.                                 <div class="row col-9">
  56.                                     <div class="relative col-3 py-4">
  57.                                         <div class="flex items-center mb-3">
  58.                                             <label class="flex items-start gratuit" >
  59.                                                 <input {% if experience.cancellation == '0' %} checked {% endif %}  value="0" type="radio"  name="cancellation" class="form-checkbox h-5 w-6 text-blue-600 me-3">
  60.                                                 <span class=" text-sm">Gratuit</span>
  61.                                             </label>
  62.                                         </div>
  63.                                         <div class="flex items-center mb-3 flexible" >
  64.                                             <label class="flex items-start">
  65.                                                 <input {% if experience.cancellation == '1' %} checked {% endif %} value="1" type="radio"  name="cancellation" class="form-checkbox h-5 w-6 text-blue-600 me-3">
  66.                                                 <span class=" text-sm">Flexible</span>
  67.                                             </label>
  68.                                         </div>
  69.                                         <div class="flex items-center mb-3 modere">
  70.                                             <label class="flex items-start">
  71.                                                 <input {% if experience.cancellation == '2' %} checked {% endif %} value="2" type="radio" name="cancellation" class="form-checkbox h-5 w-6 text-blue-600 me-3">
  72.                                                 <span class=" text-sm">Modérée</span>
  73.                                             </label>
  74.                                         </div>
  75.                                     </div>
  76.                                     <div class="col-9">
  77.                                         <div id="alert-gratuit" class="p-4 mb-4 text-green-800 border border-green-300 rounded-lg bg-green-50 " role="alert">
  78.                                             <div class="flex items-center justify-center">
  79.                                                 <svg class="flex-shrink-0 w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
  80.                                                 <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
  81.                                                 </svg>
  82.                                                 <h3 class="text-lg font-medium">Gratuit</h3>
  83.                                             </div>
  84.                                             <div class="my-2 text-sm" >
  85.                                                 <ul style="list-style: disc;">
  86.                                                     <li>1+ days before the retreat start date.</li>
  87.                                                     <li>The remaining balance is due upon arrival.</li>
  88.                                                     <li>If paid at the time of booking, a full refund of the remaining balance is available up to the day before your retreat start date.</li>
  89.                                                 </ul>
  90.                                             </div>
  91.                                         </div>
  92.                                         <div id="alert-flexible" style="display: none;" class="p-4 mb-4 text-green-800 border border-green-300 rounded-lg bg-green-50 " role="alert">
  93.                                             <div class="flex items-center justify-center ">
  94.                                                 <svg class="flex-shrink-0 w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
  95.                                                 <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
  96.                                                 </svg>
  97.                                                 <h3 class="text-lg font-medium"> Flexible</h3>
  98.                                             </div>
  99.                                             <div class="my-2 text-sm" >
  100.                                                 <ul style="list-style: disc;">
  101.                                                     <li>50% deposit refund for cancellation 15-29 days before retreat start date.</li>
  102.                                                     <li>0% deposit refund for cancellation 0-14 days before retreat start date.</li>
  103.                                                     <li>The remaining balance is due upon arrival.</li>
  104.                                                     <li> If paid at the time of booking, a full refund of the remaining balance is available up to the day before your retreat start date.</li>
  105.                                                 </ul>
  106.                                             </div>
  107.                                         </div>
  108.                                         <div id="alert-moderate" style="display: none;" class="p-4 mb-4 text-green-800 border border-green-300 rounded-lg bg-green-50 " role="alert">
  109.                                             <div class="flex items-center justify-center">
  110.                                                 <svg class="flex-shrink-0 w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
  111.                                                 <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
  112.                                                 </svg>
  113.                                                 <h3 class="text-lg font-medium">Moderate</h3>
  114.                                             </div>
  115.                                             <div class="my-2 text-sm" >
  116.                                                 <ul style="list-style: disc;">
  117.                                                     <li>100% deposit refund for cancellation 60+ days before retreat start date.</li>
  118.                                                     <li>50% deposit refund for cancellation 30-59 days before retreat start date.</li>
  119.                                                     <li>0% deposit refund for cancellation 0-29 days before retreat start date.</li>
  120.                                                 </ul>
  121.                                                 </span>
  122.                                             </div>
  123.                                         </div>
  124.                                     </div>
  125.                                 </div>
  126.                             </div>
  127.                         </div>
  128.                     </div>
  129.                 </div>
  130.             </div>
  131.             <div class="row">
  132.                 <div class="col-lg-12 px-0"
  133.                      <!-- end card body -->
  134.                      <div class="card">
  135.                         <div class="card-body">
  136.                             <div class="mt-1">
  137.                                 <h5 class="text-lg font-semibold mt-2 mb-2 ">Promotion</h5>
  138.                                 <p class="card-title-desc">
  139.                                     <small>Proposer des réductions de prix pour acroitre plus de ventes, vous trouverez tous les outils necessaires pour cette fin en activant le mode promotion.</small> 
  140.                                 </p>
  141.                                 <div class="mb-3">
  142.                                     <h5 class="font-size-14" >
  143.                                         Activer la promotion ?
  144.                                     </h5>
  145.                                     <input {% if experience.onpromo == '1' %} checked {% endif %} name="onpromo" type="checkbox" id="switch1" switch="success" data-bs-toggle="collapse" href="#promotionbloc" aria-expanded="false" aria-controls="promotionbloc" />
  146.                                     <label for="switch1" data-on-label="Oui" data-off-label="Non"></label>
  147.                                 </div>
  148.                                 <div class="collapse {% if experience.onpromo == '1' %} show {% endif %}" id="promotionbloc">
  149.                                     <div class="card border shadow-none card-body text-muted mb-0">
  150.                                         <div class="row ">
  151.                                             <div class="mt-3 mb-3 col-md-6">
  152.                                                 <label for="formrow-firstname-input" class="form-label">Pourcentage</label>
  153.                                                 <div class="input-group">
  154.                                                     <div class="input-group-text">%</div>
  155.                                                     <input value="{{ experience.promotion.percent }}" required="" name="percent"  type="number" class="form-control" id="autoSizingInputGroup" placeholder="Taper le pourcentage de la promo">
  156.                                                 </div>
  157.                                             </div>
  158.                                         </div>
  159.                                         <div class="row ">
  160.                                             <div class="mb-4">
  161.                                                 <label>Durée de la promoation</label>
  162.                                                 <div class="input-daterange input-group" id="datepicker6" data-date-format="dd M, yyyy" data-date-autoclose="true" data-provide="datepicker" data-date-container='#datepicker6'>
  163.                                                     <input value="{{ experience.promotion.datestart|date("m/d/Y") }}" required="" type="text" class="form-control" name="datestart" placeholder="Date debut" />
  164.                                                     <input value="{{ experience.promotion.dateend|date("m/d/Y") }}" required="" type="text" class="form-control" name="dateend" placeholder="Date Fin" />
  165.                                                 </div>
  166.                                             </div>
  167.                                         </div>
  168.                                     </div>
  169.                                 </div>
  170.                             </div>
  171.                         </div>
  172.                     </div>
  173.                     <div class="card">
  174.                         <div class="card-body">
  175.                             <div  class="mt-3 " >
  176.                                 <h5 class="text-lg font-semibold mt-2 mb-2 ">Prix des chambres</h5>
  177.                                 <p class="card-title-desc">
  178.                                     <small>Si vos proposer aux utilisateurs des chambres pour l'éxperience, vous devez mentionner le prix de chaque chambre.</small> 
  179.                                 </p>
  180.                                 <div class="mb-3">
  181.                                     <h5 class="font-size-14" >
  182.                                         Hebergement ?
  183.                                     </h5>
  184.                                     <input {% if experience.hashebergement == '1' %} checked {% endif %} name="hashebergement" type="checkbox" id="switch2" switch="success" data-bs-toggle="collapse" href="#hashebergementbloc" aria-expanded="false" aria-controls="hashebergementbloc" />
  185.                                     <label for="switch2" data-on-label="Oui" data-off-label="Non"></label>
  186.                                 </div>
  187.                                 <div class="collapse {% if experience.hashebergement == '1' %} show {% endif %} " id="hashebergementbloc">
  188.                                     <div class="card border shadow-none card-body text-muted mb-0">
  189.                                         <p class="text-sm"><small>Veuillez mentionner les prix des chambres que vous avez ajouter à cette éxperience, le prix total des réservations sera celui de l'éxperience avec l'hébergement sélectionné.</small></p>
  190.                                         <div id="price-forms" class="row text-sm  ">
  191.                                             {% for hebergement in experience.hebergements %}
  192.                                                 <div class="price-item mt-4">
  193.                                                     <p for="" class="form-label text-sm font-semibold col-2">Chambre {{ loop.index }} </p>
  194.                                                     <div class="row mb-3" >
  195.                                                         <div class=" col-lg-6  lg:mb-0">
  196.                                                             <p for="" class="form-label font-medium ">Nom de la chambre</p>
  197.                                                             <div class="relative w-full ">
  198.                                                                 <input value="{{hebergement.id}}" placeholder="#{{hebergement.id}} - {{ hebergement.name }}" readonly="" type="text" name="n-chambre" class="form-control sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 ps-3 "  >
  199.                                                                 <input  value="{{hebergement.id}}" hidden="" type="text" name="idhebergements[]" class="form-control sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 ps-3 "  placeholder="Titre ">
  200.                                                             </div>
  201.                                                         </div>
  202.                                                         <div class="  col-lg-6">
  203.                                                             <p for="" class="form-label font-medium ">Prix </p>
  204.                                                             <div class="relative w-full ">
  205.                                                                 <input required="" value="{{ hebergement.price }}" type="number" name="pricehebergements[]" class="form-control sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 ps-3 "  placeholder="Prix ">
  206.                                                             </div>
  207.                                                         </div>
  208.                                                     </div>
  209.                                                 </div>
  210.                                             {% endfor %}
  211.                                         </div>
  212.                                     </div>
  213.                                 </div>                                                   
  214.                             </div>
  215.                         </div>                                                   
  216.                     </div>
  217.                 </div>
  218.                 <!-- end card -->
  219.             </div>
  220.             <!-- end col -->
  221.             <div class="row">
  222.                 <div class="col-lg-12">
  223.                     <div class="card">
  224.                         <div class="card-body">
  225.                             <div class="flex mt-4 row">
  226.                                 <div class="col-md-6">
  227.                                     <p class="text-xs  text-gray-900 mb-2">En cliquant sur le bouton de Enregistrer, vous mettez à jours les informations envoyé dans ce formulaire </p>
  228.                                 </div>
  229.                                 <div class="col-md flex justify-end">
  230.                                     <button type="reset" style=" color: #ffaa00; border: 1px solid;" class="font-medium h-10  py-2.5 rounded-lg text-center text-sm  w-40 me-2">
  231.                                         Annuler</button>
  232.                                     <button type="submit" style=" background: #ffaa00;" class="font-medium hover:bg-primary-700 h-10  py-2.5 rounded-lg text-center text-sm text-white w-40">Enregistrer</button>
  233.                                 </div>
  234.                             </div>
  235.                         </div>
  236.                     </div>
  237.                 </div>
  238.             </div>
  239.             <!-- end col -->
  240.         </div>
  241.         <!-- End Page-content -->
  242.     </div><!-- container-fluid -->
  243. </form>
  244. {% endblock %}
  245. {% block javascripts %}
  246.     <!-- apexcharts -->
  247.     <script src="{{ asset('admin/libs/parsleyjs/parsley.min.js')}}"></script>
  248.     <script src="{{ asset('admin/libs/select2/js/select2.min.js')}}"></script>
  249.     <script src="{{ asset('admin/libs/bootstrap-maxlength/bootstrap-maxlength.min.js')}}"></script>
  250.     <script src="{{ asset('admin/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}"></script>
  251.     <script src="{{ asset('admin/libs/@chenfengyuan/datepicker/datepicker.min.js')}}"></script>
  252.     <script src="{{ asset('admin/js/pages/form-validation.init.js')}}"></script>
  253.     <script src="{{ asset('admin/js/app.js')}}"></script>
  254.     <script>
  255.         /*
  256.          Template Name: Skote - Admin & Dashboard Template
  257.          Author: Themesbrand
  258.          Website: https://themesbrand.com/
  259.          Contact: themesbrand@gmail.com
  260.          File: Form Advanced Js File
  261.          */
  262.         !function ($) {
  263.             "use strict";
  264.             var AdvancedForm = function () { };
  265.             AdvancedForm.prototype.init = function () {
  266.                 // Select2
  267.                 if ($('.select2').length > 0) {
  268.                     $(".select2").select2();
  269.                 }
  270.                 if ($('.select2-tags').length > 0) {
  271.                     $(".select2-tags").select2({
  272.                         tags: true
  273.                     });
  274.                 }
  275.                 if ($('.select2-limiting-3').length > 0) {
  276.                     $(".select2-limiting-3").select2({
  277.                         maximumSelectionLength: 3
  278.                     });
  279.                 }
  280.                 //Bootstrap-MaxLength
  281.                 $('input#defaultconfig').maxlength({
  282.                     warningClass: "badge bg-info",
  283.                     limitReachedClass: "badge bg-warning"
  284.                 });
  285.                 $('input#thresholdconfig').maxlength({
  286.                     threshold: 20,
  287.                     warningClass: "badge bg-info",
  288.                     limitReachedClass: "badge bg-warning"
  289.                 });
  290.                 $('input#moreoptions').maxlength({
  291.                     alwaysShow: true,
  292.                     warningClass: "badge bg-success",
  293.                     limitReachedClass: "badge bg-danger"
  294.                 });
  295.                 $('input#alloptions').maxlength({
  296.                     alwaysShow: true,
  297.                     warningClass: "badge bg-success",
  298.                     limitReachedClass: "badge bg-danger",
  299.                     separator: ' out of ',
  300.                     preText: 'You typed ',
  301.                     postText: ' chars available.',
  302.                     validate: true
  303.                 });
  304.                 $('textarea#textarea').maxlength({
  305.                     alwaysShow: true,
  306.                     warningClass: "badge bg-info",
  307.                     limitReachedClass: "badge bg-warning"
  308.                 });
  309.                 $('input#placement').maxlength({
  310.                     alwaysShow: true,
  311.                     placement: 'top-left',
  312.                     warningClass: "badge bg-info",
  313.                     limitReachedClass: "badge bg-warning"
  314.                 });
  315.             },
  316.                     //init
  317.                     $.AdvancedForm = new AdvancedForm, $.AdvancedForm.Constructor = AdvancedForm
  318.         }(window.jQuery),
  319.                 //Datepicker
  320.                         function ($) {
  321.                             "use strict";
  322.                             $.AdvancedForm.init();
  323.                         }(window.jQuery);
  324.     </script>
  325. {% endblock %}