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

Open in your IDE?
  1. {% extends 'admin/baseAdmin.html.twig' %}
  2. {% block page_title %}Modifier la Disponibilité {% endblock %}
  3. {% block breadcump_main %}Experience{% endblock %}
  4. {% block breadcump_subtitle %}{% 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.     <style>div .card-radio-input:checked+.card-radio {
  15.             border-color: #7bc2a8 !important;
  16.         }
  17.         div .text-primary {
  18.             color: #7bc2a8 !important;
  19.         }
  20.     </style>
  21. {% endblock %}
  22. {% block content %}
  23.     <form id="form-general" class="general-info custom-validation" method="POST" action="{{ path('edit_availability',{'id':experience.id}) }}" enctype="multipart/form-data"  >
  24.         <div class="container-fluid">
  26.             <div class="row">
  27.                 <div class="col-xl-12 px-0">
  28.                     <div class="card">
  29.                         <div class="card-body">
  30.                             <div class="card-body">
  31.                                 <div class="text-center">
  32.                                     <div class="avatar-sm mx-auto mb-4">
  33.                                         <span class="avatar-title rounded-circle bg-primary-subtle font-size-24">
  34.                                             <i class="mdi mdi-calendar-check  text-white"></i>
  35.                                         </span>
  36.                                     </div>
  37.                                     <p class="font-16 text-muted mb-2"></p>
  38.                                     <h5><a href="javascript: void(0);" class="text-dark">Disponibilité - <span class="text-muted font-16">Calendrier et dates</span> </a></h5>
  39.                                     <p class="text-muted">Personnaliser la disponilbilité de vos experiences selon vos besoins, cette outils vous permet d'administrer votre calendrier de date de disponiilité en choisissant le type de diponibilité qui vous convient :</p>
  40.                                     <a href="javascript: void(0);" class="text-primary font-16">Learn more <i class="mdi mdi-chevron-right"></i></a>
  41.                                 </div>
  42.                                 <div class="row mt-4">
  43.                                     <div class="col-4">
  44.                                         <div class="social-source text-center mt-3">
  45.                                             <div class="avatar-xs mx-auto mb-3">
  46.                                                 <span class="avatar-title rounded-circle bg-primary font-size-16">
  47.                                                     <i class="mdi mdi-flash text-white"></i>
  48.                                                 </span>
  49.                                             </div>
  50.                                             <h5 class="font-size-15">Réservations instantanés</h5>
  51.                                             <p class="text-muted mb-0">Vous accepter de recevoir des réservations à partir d'une journée avant la date de départ de la réservation.</p>
  52.                                         </div>
  53.                                     </div>
  54.                                     <div class="col-4">
  55.                                         <div class="social-source text-center mt-3">
  56.                                             <div class="avatar-xs mx-auto mb-3">
  57.                                                 <span class="avatar-title rounded-circle bg-info font-size-16">
  58.                                                     <i class="mdi mdi-calendar-start text-white"></i>
  59.                                                 </span>
  60.                                             </div>
  61.                                             <h5 class="font-size-15">Reservation avancée</h5>
  62.                                             <p class="text-muted mb-0">Définir le nombre de jours tolérer pour ouvrir la disponibilité pour accepter les réservation.</p>
  63.                                         </div>
  64.                                     </div>
  65.                                     <div class="col-4">
  66.                                         <div class="social-source text-center mt-3">
  67.                                             <div class="avatar-xs mx-auto mb-3">
  68.                                                 <span class="avatar-title rounded-circle bg-pink font-size-16">
  69.                                                     <i class="mdi mdi-calendar text-white"></i>
  70.                                                 </span>
  71.                                             </div>
  72.                                             <h5 class="font-size-15">Calendrier de disponibilité</h5>
  73.                                             <p class="text-muted mb-0">Enregistrer la durée et les dates de départ de l'éxperience pour metre enligne la disponibilité </p>
  74.                                         </div>
  75.                                     </div>
  76.                                 </div>
  78.                             </div>
  80.                         </div>
  81.                         <!-- end card -->
  82.                     </div>
  83.                     <div class="sm:p-4 p-2 pb-0 pt-1">
  85.                         <form class="disponibilite" id="form-disponibilite" >
  88.                             <div class="card">
  89.                                 <div class="card-body">
  90.                                     <div class="row mt-4">
  91.                                         <div class="col-12">
  92.                                             <div class="social-source px-5 text-center mb-6">
  93.                                                 <div class="avatar-xs mx-auto mb-3">
  94.                                                     <span class="avatar-title rounded-circle bg-primary font-size-16">
  95.                                                         <i class="mdi mdi-calendar-check  text-white"></i>
  96.                                                     </span>
  97.                                                 </div>
  98.                                                 <h5 class="font-size-15">Dates de disponibilités</h5>
  99.                                                 <p class="text-muted mb-6">Séléctionner les dates de disponibiités et choisisser les dates de départ de <br>l'éxperience et le nombre de jours de l'éxperience.</p>
  101.                                             </div>
  102.                                         </div>
  103.                                         <div class="col-8  mb-4  m-auto mt-3">
  104.                                             <label  class="form-label">Durrée de l'éxperience</label>
  105.                                             <input value="{{ experience.availability.duration }}" required="" name="duration" data-toggle="touchspin" type="number" value="1">
  106.                                             <span class="text-muted  mb-8">Nombres de jours, e.g : 3 jours</span>
  107.                                         </div>
  113.                                         <div class="col-8 m-auto mt-3">
  115.                                             <div class="mb-2 row">
  116.                                                 <div class="col-12"  style="background: #edf6f3;border-radius: 4px;">
  117.                                                     <div class="px-4 mt-4">
  118.                                                         <div class="d-flex gap-2 flex-wrap mb-3">
  119.                                                             <div  data-bs-toggle="collapse" href="#availabilitytype" aria-expanded="false" aria-controls="availabilitytype"   class="form-check form-radio-success mb-3">
  120.                                                                 <input {% if experience.availability.availabilitytype =="1"  %}checked="" {% endif %}value="1" class="form-check-input" type="radio" name="availabilitytype" id="formRadioColor3" >
  121.                                                                 <label class="form-check-label" for="formRadioColor3">
  122.                                                                     CALENDRIER DE DISPONIBILITÉ : Dates de départ
  123.                                                                 </label>
  124.                                                             </div>
  125.                                                         </div>
  126.                                                         <div class="collapse {% if experience.availability.availabilitytype =="1"  %}show {% endif %}" id="availabilitytype">
  127.                                                             <div style="background: #edf6f3;"  class="card border shadow-none card-body text-muted mb-0">
  128.                                                                 <label for="formrow-email-input" class="form-label">Dates de départ de l'éxperience</label>
  129.                                                                 <div class="input-group  mb-2" id="datepicker3">
  130.                                                                     <input value="{% for datestart in experience.availability.datesstart %}{{ datestart }}{% endfor %}"  name="availabilities[]" type="text" class="form-control" placeholder="dd M, yyyy"
  131.                                                                            data-provide="datepicker" data-date-container='#datepicker3' data-date-format="dd M, yyyy"
  132.                                                                            data-date-multidate="true">
  134.                                                                     <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
  135.                                                                 </div>
  136.                                                                 <span class="text-muted  mb-8">Les dates que vous selectionés seront les dates de départ de votre éxperience.</span>                                                
  137.                                                             </div>
  138.                                                         </div>
  139.                                                     </div>
  140.                                                 </div>
  141.                                             </div>
  142.                                             <div class="row">
  143.                                                 <div class="col-12" style="background: #efedf6;border-radius: 4px;" >
  144.                                                     <div class="px-4 mt-4">
  145.                                                         <div class="d-flex gap-2 flex-wrap mb-3">
  146.                                                             <div  data-bs-toggle="collapse" href="#availabilitytype" aria-expanded="false" aria-controls="availabilitytype"   class="form-check form-radio-success mb-3">
  147.                                                                 <input {% if experience.availability.availabilitytype =="2"  %}checked="" {% endif %} value="2" class="form-check-input" type="radio" name="availabilitytype" id="formRadioColor4" >
  148.                                                                 <label class="form-check-label" for="formRadioColor4">
  149.                                                                     CALENDRIER OUVERTE : Dates d'indisponibilité
  150.                                                                 </label>
  151.                                                             </div>
  152.                                                         </div>
  153.                                                         <div class="collapse{% if experience.availability.availabilitytype =="2"  %} show {% endif %}" id="availabilitytype">
  154.                                                             <div style="background: #efedf6;"  class="card border shadow-none card-body text-muted mb-0">
  155.                                                                 <label class="form-label"> Insérer les dates indisponible</label>
  156.                                                                 <div class="input-group  mb-2" id="datepicker4">
  157.                                                                     <input value="{% for unavailability in experience.availability.unavailabilities %}{{ unavailability}}{% endfor %}" name="unavailabilities[]" type="text" class="form-control" placeholder="dd M, yyyy"
  158.                                                                            data-provide="datepicker" data-date-container='#datepicker4' data-date-format="dd M, yyyy"
  159.                                                                            data-date-multidate="true">
  161.                                                                     <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
  162.                                                                 </div>
  163.                                                                 <span class="text-muted  mb-8">Les autres dates non sélectionnée seront par défaut disponible au calendrier de réservation.</span>                                                   
  164.                                                             </div>
  165.                                                         </div>
  166.                                                     </div>
  167.                                                 </div>
  168.                                             </div>
  169.                                         </div>
  173.                                     </div>
  174.                                 </div>
  175.                             </div>
  176.                             <div class="card">
  177.                                 <div class="card-body">
  178.                                     <div class="row text-center">
  179.                                         <h5 class="font-size-15">Planification de périodes de réservations</h5>
  180.                                         <p class="card-title-desc">
  181.                                             Vous voulez avoir des réservation avant la date de départ <code> à partir de ?</code>
  182.                                         </p>
  183.                                         <div class="row">
  184.                                             <div class="col-xl-3 col-sm-4">
  185.                                                 <div class="mb-3">
  186.                                                     <label class="card-radio-label mb-2">
  187.                                                         <input {% if experience.availability.daysbefore =="1"  %}checked="" {% endif %}  value="1" type="radio" name="daysbefore" id="buycurrencyoption1" class="card-radio-input">
  189.                                                         <div class="card-radio">
  190.                                                             <div>
  192.                                                                 <i class="mdi mdi-flash font-size-24 text-primary align-middle me-2"></i>
  193.                                                                 <span>1 Journée</span>
  194.                                                             </div>
  195.                                                         </div>
  196.                                                         <p><small>Réservations Dérniere minute</small></p>
  197.                                                     </label>
  198.                                                 </div>
  199.                                             </div>
  200.                                             <div class="col-xl-3 col-sm-4">
  201.                                                 <div class="mb-3">
  202.                                                     <label class="card-radio-label mb-2">
  203.                                                         <input {% if experience.availability.daysbefore =="2"  %}checked="" {% endif %} value="2" type="radio" name="daysbefore" id="buycurrencyoption2" class="card-radio-input" >
  205.                                                         <div class="card-radio">
  206.                                                             <div>
  208.                                                                 <i class="mdi mdi-chevron-right font-size-24 text-primary align-middle me-2"></i>
  209.                                                                 <span>2 jours</span>
  210.                                                             </div>
  211.                                                         </div>
  212.                                                     </label>
  213.                                                 </div>
  214.                                             </div>
  216.                                             <div class="col-xl-3 col-sm-4">
  217.                                                 <div class="mb-3">
  218.                                                     <label class="card-radio-label mb-2">
  219.                                                         <input {% if experience.availability.daysbefore =="3"  %}checked="" {% endif %} value="3" type="radio" name="daysbefore" id="buycurrencyoption3" class="card-radio-input">
  221.                                                         <div class="card-radio">
  222.                                                             <div>
  223.                                                                 <i class="mdi mdi-chevron-right font-size-24 text-primary align-middle me-2"></i>
  224.                                                                 <span>3 Jours</span>
  225.                                                             </div>
  226.                                                         </div>
  227.                                                     </label>
  228.                                                 </div>
  229.                                             </div>
  231.                                             <div class="col-xl-3 col-sm-4">
  232.                                                 <div class="mb-3">
  233.                                                     <label class="card-radio-label mb-2">
  234.                                                         <input {% if experience.availability.daysbefore =="7"  %}checked="" {% endif %} value="7" type="radio" name="daysbefore" id="buycurrencyoption4" class="card-radio-input">
  236.                                                         <div class="card-radio">
  237.                                                             <div>
  238.                                                                 <i class="mdi mdi-chevron-right font-size-24 text-primary align-middle me-2"></i>
  239.                                                                 <span>1 semaine</span>
  240.                                                             </div>
  241.                                                         </div>
  242.                                                     </label>
  243.                                                 </div>
  244.                                             </div>
  245.                                             <div class="col-xl-3 col-sm-4">
  246.                                                 <div class="mb-3">
  247.                                                     <label class="card-radio-label mb-2">
  248.                                                         <input {% if experience.availability.daysbefore =="15"  %}checked="" {% endif %} value="15" type="radio" name="daysbefore" id="buycurrencyoption5" class="card-radio-input">
  250.                                                         <div class="card-radio">
  251.                                                             <div>
  252.                                                                 <i class="mdi mdi-chevron-right font-size-24 text-primary align-middle me-2"></i>
  253.                                                                 <span>15 jours</span>
  254.                                                             </div>
  255.                                                         </div>
  256.                                                     </label>
  257.                                                 </div>
  258.                                             </div>
  259.                                             <div class="col-xl-3 col-sm-4">
  260.                                                 <div class="mb-3">
  261.                                                     <label class="card-radio-label mb-2">
  262.                                                         <input {% if experience.availability.daysbefore =="30"  %}checked="" {% endif %} value="30" type="radio" name="daysbefore" id="buycurrencyoption6" class="card-radio-input">
  264.                                                         <div class="card-radio">
  265.                                                             <div>
  266.                                                                 <i class="mdi mdi-chevron-right font-size-24 text-primary align-middle me-2"></i>
  267.                                                                 <span>30 jours</span>
  268.                                                             </div>
  269.                                                         </div>
  270.                                                     </label>
  271.                                                 </div>
  272.                                             </div>
  274.                                         </div>
  275.                                     </div>
  276.                                 </div>
  277.                             </div>
  278.                             <div class="card">
  279.                                 <div class="card-body">
  280.                                     <div class="flex mt-4 row pt-3">
  281.                                         <div class="col-md-6">
  282.                                             <p class="text-xs  text-gray-900 mb-2">En cliquant sur le bouton de Suivant, vous mettez à jours les informations envoyé dans ce formulaire </p>
  283.                                         </div>
  284.                                         <div class="col-md flex justify-end">
  285.                                             <button type="" style=" color: #ffaa00; border: 1px solid;" class="font-medium h-10 cursor-pointer   py-2.5 rounded-lg text-center text-sm  w-40 me-2">
  286.                                                 Précédant</button>
  287.                                             <button type="" style=" background: #ffaa00;" class="font-medium hover:bg-primary-700 h-10 cursor-pointer   py-2.5 rounded-lg text-center text-sm text-white w-40">Enregistrer</button>
  288.                                         </div>
  289.                                     </div>
  290.                                 </div>
  291.                             </div>
  292.                     </div>
  293.                 </div>
  294.                 <!-- end card body -->
  295.                 <!-- end col -->
  296.             </div>
  299.         </div> <!-- container-fluid -->
  300.     </div>
  301.     <!-- End Page-content -->
  304. </form>
  305. {% endblock %}
  306. {% block javascripts %}
  307.     <!-- apexcharts -->
  308.     <script src="{{ asset('admin/libs/parsleyjs/parsley.min.js')}}"></script>
  309.     <script src="{{ asset('admin/libs/select2/js/select2.min.js')}}"></script>
  310.     <script src="{{ asset('admin/libs/bootstrap-maxlength/bootstrap-maxlength.min.js')}}"></script>
  311.     <script src="{{ asset('admin/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}"></script>
  312.     <script src="{{ asset('admin/libs/@chenfengyuan/datepicker/datepicker.min.js')}}"></script>
  313.     <script src="{{ asset('admin/libs/bootstrap-touchspin/jquery.bootstrap-touchspin.min.js')}}"></script>
  315.     <script src="{{ asset('admin/js/pages/form-validation.init.js')}}"></script>
  317.     <script src="{{ asset('admin/js/app.js')}}"></script>
  318.     <script>
  319.         /*
  320.          Template Name: Skote - Admin & Dashboard Template
  321.          Author: Themesbrand
  322.          Website: https://themesbrand.com/
  323.          Contact: themesbrand@gmail.com
  324.          File: Form Advanced Js File
  325.          */
  327.         !function ($) {
  328.             "use strict";
  330.             var AdvancedForm = function () { };
  332.             AdvancedForm.prototype.init = function () {
  334.                 // Select2
  335.                 if ($('.select2').length > 0) {
  336.                     $(".select2").select2();
  337.                 }
  338.                 if ($('.select2-tags').length > 0) {
  339.                     $(".select2-tags").select2({
  340.                         tags: true
  341.                     });
  342.                 }
  343.                 if ($('.select2-limiting-3').length > 0) {
  344.                     $(".select2-limiting-3").select2({
  345.                         maximumSelectionLength: 3
  346.                     });
  347.                 }
  349.                 //Bootstrap-MaxLength
  350.                 $('input#defaultconfig').maxlength({
  351.                     warningClass: "badge bg-info",
  352.                     limitReachedClass: "badge bg-warning"
  353.                 });
  355.                 $('input#thresholdconfig').maxlength({
  356.                     threshold: 20,
  357.                     warningClass: "badge bg-info",
  358.                     limitReachedClass: "badge bg-warning"
  359.                 });
  361.                 $('input#moreoptions').maxlength({
  362.                     alwaysShow: true,
  363.                     warningClass: "badge bg-success",
  364.                     limitReachedClass: "badge bg-danger"
  365.                 });
  367.                 $('input#alloptions').maxlength({
  368.                     alwaysShow: true,
  369.                     warningClass: "badge bg-success",
  370.                     limitReachedClass: "badge bg-danger",
  371.                     separator: ' out of ',
  372.                     preText: 'You typed ',
  373.                     postText: ' chars available.',
  374.                     validate: true
  375.                 });
  377.                 $('textarea#textarea').maxlength({
  378.                     alwaysShow: true,
  379.                     warningClass: "badge bg-info",
  380.                     limitReachedClass: "badge bg-warning"
  381.                 });
  383.                 $('input#placement').maxlength({
  384.                     alwaysShow: true,
  385.                     placement: 'top-left',
  386.                     warningClass: "badge bg-info",
  387.                     limitReachedClass: "badge bg-warning"
  388.                 });
  389. //Bootstrap-TouchSpin
  390.                 var defaultOptions = {
  391.                 };
  393.                 // touchspin
  394.                 $('[data-toggle="touchspin"]').each(function (idx, obj) {
  395.                     var objOptions = $.extend({}, defaultOptions, $(obj).data());
  396.                     $(obj).TouchSpin(objOptions);
  397.                 });
  399.                 $("input[name='demo3_21']").TouchSpin({
  400.                     initval: 40,
  401.                     buttondown_class: "btn btn-primary",
  402.                     buttonup_class: "btn btn-primary"
  403.                 });
  404.                 $("input[name='demo3_22']").TouchSpin({
  405.                     initval: 40,
  406.                     buttondown_class: "btn btn-primary",
  407.                     buttonup_class: "btn btn-primary"
  408.                 });
  410.                 $("input[name='demo_vertical']").TouchSpin({
  411.                     verticalbuttons: true
  412.                 });
  414.                 //Bootstrap-MaxLength
  415.                 $('input#defaultconfig').maxlength({
  416.                     warningClass: "badge bg-info",
  417.                     limitReachedClass: "badge bg-warning"
  418.                 });
  420.                 $('input#thresholdconfig').maxlength({
  421.                     threshold: 20,
  422.                     warningClass: "badge bg-info",
  423.                     limitReachedClass: "badge bg-warning"
  424.                 });
  426.                 $('input#moreoptions').maxlength({
  427.                     alwaysShow: true,
  428.                     warningClass: "badge bg-success",
  429.                     limitReachedClass: "badge bg-danger"
  430.                 });
  432.                 $('input#alloptions').maxlength({
  433.                     alwaysShow: true,
  434.                     warningClass: "badge bg-success",
  435.                     limitReachedClass: "badge bg-danger",
  436.                     separator: ' out of ',
  437.                     preText: 'You typed ',
  438.                     postText: ' chars available.',
  439.                     validate: true
  440.                 });
  442.                 $('textarea#textarea').maxlength({
  443.                     alwaysShow: true,
  444.                     warningClass: "badge bg-info",
  445.                     limitReachedClass: "badge bg-warning"
  446.                 });
  448.                 $('input#placement').maxlength({
  449.                     alwaysShow: true,
  450.                     placement: 'top-left',
  451.                     warningClass: "badge bg-info",
  452.                     limitReachedClass: "badge bg-warning"
  453.                 });
  454.             },
  455.                     //init
  456.                     $.AdvancedForm = new AdvancedForm, $.AdvancedForm.Constructor = AdvancedForm
  457.         }(window.jQuery),
  458.                 //Datepicker
  459.                         function ($) {
  460.                             "use strict";
  461.                             $.AdvancedForm.init();
  462.                         }(window.jQuery);
  464.     </script>
  465. {% endblock %}