templates/admin/experience/add/addHebergement.html.twig line 1

Open in your IDE?
  1. {% extends 'admin/baseAdmin.html.twig' %}
  2. {% block page_title %}Ajouter Hebergement {% endblock %}
  3. {% block breadcump_main %}Experiences{% endblock %}
  4. {% block breadcump_subtitle %}Nouveau hebergement de l'experience{% 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">
  13. {% endblock %}
  14. {% block content %}
  15.     <form id="form-general" class="general-info custom-validation" method="POST" action="{{ path('add_hebergement',{'id':experience.id}) }}" enctype="multipart/form-data"  >
  16.         <div class="container-fluid">
  17.             <div class="row">
  18.                 <div class="col-xl-12 px-0">
  19.                     <div class="card">
  20.                         <div class="card-body">
  21.                             <div class="bar-top sm:flex block gap-2 bg-white p-2 pb-3 mb-8 text-uppercase rounded-2xl flex-wrap border-b border-gray-200">
  22.                                 <h3 class="text-sm  cursor-pointer hover:text-orange pt-2 " id="general-info">General Info</h3>
  23.                                 <span class="border-r mx-2 h-6 hidden sm:flex"></span>
  24.                                 <h3 class="text-sm  cursor-pointer hover:text-orange  pt-2 " id="gallery">Hébergement</h3>
  25.                                 <span class="border-r mx-2 h-6 hidden sm:flex"></span>
  26.                                 <h3 class="text-sm  cursor-pointer hover:text-orange active-nav pt-2 " id="gallery">Gallery</h3>
  27.                                 <span class="border-r mx-2 h-6 hidden sm:flex"></span>
  28.                                 <h3 class="text-sm  cursor-pointer hover:text-orange pt-2 " id="itineraire">Programme</h3>
  29.                                 <span class="border-r mx-2 h-6 hidden sm:flex"></span>
  30.                                 <h3 class="text-sm  cursor-pointer hover:text-orange pt-2 " id="highlights">Description</h3>
  31.                                 <span class="border-r mx-2 h-6 hidden sm:flex"></span>
  32.                                 <h3 class="text-sm  cursor-pointer hover:text-orange pt-2 " id="dispo">Disponibilité</h3>
  33.                                 <span class="border-r mx-2 h-6 hidden sm:flex"></span>
  34.                                 <h3 class="text-sm  cursor-pointer hover:text-orange pt-2 " id="disponibilite">Tarification</h3>
  35.                                 <span class="border-r mx-2 h-6 hidden sm:flex"></span>
  36.                                 <h3 class="text-sm  cursor-pointer hover:text-orange pt-2 " id="faq">Points Forts</h3>
  38.                             </div>   
  40.                             <div class="sm:p-4 p-2 pb-0 pt-1" >
  41.                                 <h5 class="text-lg font-semibold mt-2 mb-2 ">Image principale de l'Hebergement</h5>
  42.                                 <p class="pb-4 text-gray-700 text-sm">Ajouter L'image principale du l'Hebergement, qui s'affichera en premier </p>
  43.                                 <div  class="space-y-3 ">
  44.                                     <div class="m-auto my-1 relative ">
  45.                                         <label for="avatar-upload" class="relative flex justify-center" style="cursor: pointer;">
  46.                                             <img src="{{ asset('admin/images/categories/Culinaire.jpg') }}" class="rounded-xl h-64 object-cover w-full" id="avatar-img">
  47.                                             <div class="h-10 w-10 bg-orange rounded-full flex  items-center justify-center" style="position: absolute;right: 43%;bottom: 4px;font-size: 43px;">
  48.                                                 <i class="bx bxs-image-alt text-xl text-white"></i>
  49.                                             </div>
  50.                                             <input type="file" id="avatar-upload" name="image" style="display: none;" accept="image/*" onchange="changeAvatar(event)">
  51.                                         </label>
  52.                                     </div>
  53.                                 </div>
  54.                             </div>
  55.                             <h5 class="text-lg font-semibold mt-5 ">Décription de l'hebergement</h5>
  56.                             <p class="text-gray-700 text-sm">Enregistrer les points fort de l'hebergement.</p>
  57.                             <div class="divider w-2/6 mt-1 mb-5"></div>
  58.                             <div class="row mb-4 text-sm  ">
  59.                                 <div class="flex items-center">
  60.                                     <p for="" class="form-label font-semibold col-3">Nom de la chambre</p>
  61.                                     <div class="form-floating mb-3 col-9">
  62.                                         <input required="" class="form-control"  id="floatingnameInput" type="text" name="name"  placeholder="Nom et Type de chambre pour l'hebergement">
  63.                                         <label for="floatingnameInput">Nom et Type de chambre de l'hebergement</label>
  64.                                     </div>
  65.                                 </div>
  66.                             </div>
  67.                             <div class="row mb-4 text-sm">
  68.                                 <div class=" flex ">
  69.                                     <p for="" class="form-label font-semibold col-3 "> Description et détails </p>
  70.                                     <div class="relative col-9">
  71.                                         <textarea required="" class="form-control text-sm px-5" name="description" placeholder="Taper une petite description "
  72.                                                   id="floatingTextarea2" style="height: 100px"></textarea>
  73.                                         <div class="absolute" style="top: 8px;left: 11px;color: #a1a1a1;">
  74.                                             <i class="bx bx-notepad text-2xl"></i>
  75.                                         </div>
  76.                                     </div>
  77.                                 </div>
  78.                             </div>
  80.                             <div class="mt-2 gallery " id="form-gallery" action="" >
  81.                                 <h5 class="text-lg font-semibold  my-2 ">Images et medias</h5>
  82.                                 <p class="text-gray-700 text-sm">Ajouter des images de l'héberegement, Photos de la chambre, salle de bain... </p>
  84.                                 <div class="container mx-auto p-4">
  87.                                     <div id="imagePreviewContainer" class="border-2 border-dashed flex flex-wrap gap-4 grid grid-cols-1 lg:grid-cols-4 mb-4 md:grid-cols-3 sm:grid-cols-2 p-3 ">
  88.                                         <div class="text-ini flex flex-col justify-center items-center col-span-12 my-8">
  89.                                             <i class="bx bx-image-alt text-gray-500 text-5xl pb-3"></i>
  90.                                             <p class="col-span-full text-center text-gray-500">Aucune image sélectionnée pour l'hebergement</p>
  91.                                         </div>
  92.                                     </div>
  94.                                     <div class="col-span-12 mb-3">
  95.                                         <input name="medias[]" class="relative m-0 block w-full min-w-0 flex-auto cursor-pointer rounded border border-solid border-neutral-300 bg-clip-padding px-3 py-[0.32rem] font-normal leading-[2.15] text-neutral-700 transition duration-300 ease-in-out file:-mx-3 file:-my-[0.32rem] file:cursor-pointer file:overflow-hidden file:rounded-none file:border-0 file:border-solid file:border-inherit file:bg-neutral-100 file:px-3 file:py-[0.32rem] file:text-neutral-700 file:transition file:duration-150 file:ease-in-out file:[border-inline-end-width:1px] file:[margin-inline-end:0.75rem] hover:file:bg-neutral-200 focus:border-primary focus:text-neutral-700 focus:shadow-te-primary focus:outline-none dark:border-zinc-50 dark:text-zinc-200 dark:file:bg-zinc-50 dark:file:text-zinc-200 dark:focus:border-primary" id="formFileLg" type="file" multiple>
  96.                                     </div>
  97.                                 </div>
  98.                             </div>
  99.                             <div class="divider mt-20 mb-3"></div>
  102.                         </div>
  103.                         <!-- end card body -->
  104.                     </div>
  105.                     <div class="row">
  106.                         <div class="col-lg-12">
  107.                             <div class="card">
  108.                                 <div class="card-body">
  109.                                     <div class="flex mt-4 row">
  110.                                         <div class="col-md-6">
  111.                                             <p class="text-xs  text-gray-900 mb-2">En cliquant sur le bouton d'enregistrement, vous mettez à jours les informations
  112.                                                 enregistrer par ce formulaire </p>                                    </div>
  113.                                         <div class="col-md flex justify-end">
  114.                                             <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">
  115.                                                 Annuler</button>
  116.                                             <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>
  117.                                         </div>
  118.                                     </div>
  120.                                 </div>
  121.                             </div>
  122.                         </div>
  123.                     </div>
  124.                     <!-- end card -->
  125.                 </div>
  126.                 <!-- end col -->
  129.                 <!-- end col -->
  130.             </div>
  133.         </div> <!-- container-fluid -->
  134.     </form>
  135. {% endblock %}
  136. {% block javascripts %}
  137.     <!-- apexcharts -->
  138.     <script src="{{ asset('admin/libs/parsleyjs/parsley.min.js')}}"></script>
  139.     <script src="{{ asset('admin/libs/select2/js/select2.min.js')}}"></script>
  140.     <script src="{{ asset('admin/libs/bootstrap-maxlength/bootstrap-maxlength.min.js')}}"></script>
  142.     <script src="{{ asset('admin/js/pages/form-validation.init.js')}}"></script>
  144.     <script src="{{ asset('admin/js/app.js')}}"></script>
  145.     <script>
  146.                                                 /*
  147.                                                  Template Name: Skote - Admin & Dashboard Template
  148.                                                  Author: Themesbrand
  149.                                                  Website: https://themesbrand.com/
  150.                                                  Contact: themesbrand@gmail.com
  151.                                                  File: Form Advanced Js File
  152.                                                  */
  154.                                                 !function ($) {
  155.                                                     "use strict";
  157.                                                     var AdvancedForm = function () { };
  159.                                                     AdvancedForm.prototype.init = function () {
  161.                                                         // Select2
  162.                                                         if ($('.select2').length > 0) {
  163.                                                             $(".select2").select2();
  164.                                                         }
  165.                                                         if ($('.select2-tags').length > 0) {
  166.                                                             $(".select2-tags").select2({
  167.                                                                 tags: true
  168.                                                             });
  169.                                                         }
  170.                                                         if ($('.select2-limiting-3').length > 0) {
  171.                                                             $(".select2-limiting-3").select2({
  172.                                                                 maximumSelectionLength: 3
  173.                                                             });
  174.                                                         }
  176.                                                         //Bootstrap-MaxLength
  177.                                                         $('input#defaultconfig').maxlength({
  178.                                                             warningClass: "badge bg-info",
  179.                                                             limitReachedClass: "badge bg-warning"
  180.                                                         });
  182.                                                         $('input#thresholdconfig').maxlength({
  183.                                                             threshold: 20,
  184.                                                             warningClass: "badge bg-info",
  185.                                                             limitReachedClass: "badge bg-warning"
  186.                                                         });
  188.                                                         $('input#moreoptions').maxlength({
  189.                                                             alwaysShow: true,
  190.                                                             warningClass: "badge bg-success",
  191.                                                             limitReachedClass: "badge bg-danger"
  192.                                                         });
  194.                                                         $('input#alloptions').maxlength({
  195.                                                             alwaysShow: true,
  196.                                                             warningClass: "badge bg-success",
  197.                                                             limitReachedClass: "badge bg-danger",
  198.                                                             separator: ' out of ',
  199.                                                             preText: 'You typed ',
  200.                                                             postText: ' chars available.',
  201.                                                             validate: true
  202.                                                         });
  204.                                                         $('textarea#textarea').maxlength({
  205.                                                             alwaysShow: true,
  206.                                                             warningClass: "badge bg-info",
  207.                                                             limitReachedClass: "badge bg-warning"
  208.                                                         });
  210.                                                         $('input#placement').maxlength({
  211.                                                             alwaysShow: true,
  212.                                                             placement: 'top-left',
  213.                                                             warningClass: "badge bg-info",
  214.                                                             limitReachedClass: "badge bg-warning"
  215.                                                         });
  217.                                                     },
  218.                                                             //init
  219.                                                             $.AdvancedForm = new AdvancedForm, $.AdvancedForm.Constructor = AdvancedForm
  220.                                                 }(window.jQuery),
  221.                                                         //Datepicker
  222.                                                                 function ($) {
  223.                                                                     "use strict";
  224.                                                                     $.AdvancedForm.init();
  225.                                                                 }(window.jQuery);
  227.     </script>
  228. {% endblock %}