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

Open in your IDE?
  1. {% extends 'admin/baseAdmin.html.twig' %}
  2. {% block page_title %}Ajouter Programme {% endblock %}
  3. {% block breadcump_main %}Experiences{% endblock %}
  4. {% block breadcump_subtitle %}Nouveau programe{% 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_program',{'id':experience.id}) }}" enctype="multipart/form-data"  >
  16.         <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="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">
  23.                                 <h3 class="text-sm  cursor-pointer hover:text-orange pt-2 " id="general-info">General Info</h3>
  24.                                 <span class="border-r mx-2 h-6 hidden sm:flex"></span>
  25.                                 <h3 class="text-sm  cursor-pointer hover:text-orange  pt-2 " id="gallery">Hébergement</h3>
  26.                                 <span class="border-r mx-2 h-6 hidden sm:flex"></span>
  27.                                 <h3 class="text-sm  cursor-pointer hover:text-orange  pt-2 " id="gallery">Gallery</h3>
  28.                                 <span class="border-r mx-2 h-6 hidden sm:flex"></span>
  29.                                 <h3 class="text-sm  cursor-pointer hover:text-orange pt-2 active-nav " id="itineraire">Programme</h3>
  30.                                 <span class="border-r mx-2 h-6 hidden sm:flex"></span>
  31.                                 <h3 class="text-sm  cursor-pointer hover:text-orange pt-2 " id="highlights">Description</h3>
  32.                                 <span class="border-r mx-2 h-6 hidden sm:flex"></span>
  33.                                 <h3 class="text-sm  cursor-pointer hover:text-orange pt-2 " id="dispo">Disponibilité</h3>
  34.                                 <span class="border-r mx-2 h-6 hidden sm:flex"></span>
  35.                                 <h3 class="text-sm  cursor-pointer hover:text-orange pt-2 " id="disponibilite">Tarification</h3>
  36.                                 <span class="border-r mx-2 h-6 hidden sm:flex"></span>
  37.                                 <h3 class="text-sm  cursor-pointer hover:text-orange pt-2 " id="faq">Points Forts</h3>
  39.                             </div> 
  41.                             <div class="sm:p-4 p-2 pb-0 pt-1" >
  42.                                 <h5 class="text-lg font-semibold mt-2 ">Information sur Le programme</h5>
  43.                                 <p class="text-gray-700 text-sm">Ici, vous pouvez modifier et consulter Le programe du séjour. </p>
  44.                                 <div class="divider w-2/6 mt-1 mb-5"></div>
  45.                                 <div id="day-forms">
  46.                                     <div class="row mb-4 text-sm  ">
  47.                                         <div class="flex items-center">
  48.                                             <p for="" class="form-label font-semibold col-3">Titre </p>
  49.                                             <div class="relative col-8 ">
  50.                                                 <input required="" type="text" name="days[]" 
  51.                                                        class="form-control sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 ps-5"
  52.                                                        id="titre_programe" placeholder="Écrire le titre ">
  54.                                                 <div class="absolute" style="top: 3px;left: 6px;color: #a1a1a1;">
  55.                                                     <i class="bx bx-grid-small" style="font-size: 36px;"></i>
  56.                                                 </div>
  57.                                             </div>
  60.                                         </div>
  61.                                     </div>
  63.                                     <div class="row pb-9 text-sm">
  64.                                         <div class=" flex ">
  65.                                             <p for="" class="form-label font-semibold col-3 ">Description</p>
  66.                                             <div class="relative col-8">
  67.                                                 <textarea required="" name="descriptions[]" class="form-control text-sm px-5 pe-4"  placeholder="Écrire la description ici"
  68.                                                           id="description_programe" style="height: 100px"></textarea>
  69.                                                 <div class="absolute" style="top: 8px;left: 11px;color: #a1a1a1;">
  70.                                                     <i class="bx bx-notepad text-2xl"></i>
  71.                                                 </div>
  72.                                             </div>
  73.                                         </div>
  75.                                     </div>
  76.                                 </div>
  77.                                 <div id="add-day" class="mt-4  py-2 flex justify-end items-center gap-2  rounded cursor-pointer ">
  78.                                     <p class="m-0 text-base font-semibold">Nouveau programme </p>
  79.                                     <i class="bx bx-plus-circle text-orange text-2xl"></i>
  80.                                 </div>
  83.                                 <div class="divider mt-20 mb-3 hidden sm:block"></div>
  84.                             </div>
  85.                         </div>
  86.                         <!-- end card body -->
  87.                     </div>
  88.                     <!-- end card -->
  89.                     <div class="row">
  90.                         <div class="col-lg-12">
  91.                             <div class="card">
  92.                                 <div class="card-body">
  93.                                     <div class="flex mt-4 row">
  94.                                         <div class="col-md-6">
  95.                                             <p class="text-xs  text-gray-900 mb-2">En cliquant sur le bouton d'enregistrement, vous mettez à jours les informations
  96.                                                 enregistrer par ce formulaire </p>                                    </div>
  97.                                         <div class="col-md flex justify-end">
  98.                                             <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">
  99.                                                 Annuler</button>
  100.                                             <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>
  101.                                         </div>
  102.                                     </div>
  104.                                 </div>
  105.                             </div>
  106.                         </div>
  107.                     </div>
  108.                 </div>
  109.                 <!-- end col -->
  112.                 <!-- end col -->
  113.             </div>
  116.         </div> <!-- container-fluid -->
  117.     </form>
  118. {% endblock %}
  119. {% block javascripts %}
  120.     <!-- apexcharts -->
  121.     <script src="{{ asset('admin/libs/parsleyjs/parsley.min.js')}}"></script>
  122.     <script src="{{ asset('admin/libs/select2/js/select2.min.js')}}"></script>
  123.     <script src="{{ asset('admin/libs/bootstrap-maxlength/bootstrap-maxlength.min.js')}}"></script>
  125.     <script src="{{ asset('admin/js/pages/form-validation.init.js')}}"></script>
  126.     <script src="{{ asset('admin/js/pages/programe.js')}}"></script>
  128.     <script src="{{ asset('admin/js/app.js')}}"></script>
  129.     <script>
  130.         /*
  131.          Template Name: Skote - Admin & Dashboard Template
  132.          Author: Themesbrand
  133.          Website: https://themesbrand.com/
  134.          Contact: themesbrand@gmail.com
  135.          File: Form Advanced Js File
  136.          */
  138.         !function ($) {
  139.             "use strict";
  141.             var AdvancedForm = function () { };
  143.             AdvancedForm.prototype.init = function () {
  145.                 // Select2
  146.                 if ($('.select2').length > 0) {
  147.                     $(".select2").select2();
  148.                 }
  149.                 if ($('.select2-tags').length > 0) {
  150.                     $(".select2-tags").select2({
  151.                         tags: true
  152.                     });
  153.                 }
  154.                 if ($('.select2-limiting-3').length > 0) {
  155.                     $(".select2-limiting-3").select2({
  156.                         maximumSelectionLength: 3
  157.                     });
  158.                 }
  160.                 //Bootstrap-MaxLength
  161.                 $('input#defaultconfig').maxlength({
  162.                     warningClass: "badge bg-info",
  163.                     limitReachedClass: "badge bg-warning"
  164.                 });
  166.                 $('input#thresholdconfig').maxlength({
  167.                     threshold: 20,
  168.                     warningClass: "badge bg-info",
  169.                     limitReachedClass: "badge bg-warning"
  170.                 });
  172.                 $('input#moreoptions').maxlength({
  173.                     alwaysShow: true,
  174.                     warningClass: "badge bg-success",
  175.                     limitReachedClass: "badge bg-danger"
  176.                 });
  178.                 $('input#alloptions').maxlength({
  179.                     alwaysShow: true,
  180.                     warningClass: "badge bg-success",
  181.                     limitReachedClass: "badge bg-danger",
  182.                     separator: ' out of ',
  183.                     preText: 'You typed ',
  184.                     postText: ' chars available.',
  185.                     validate: true
  186.                 });
  188.                 $('textarea#textarea').maxlength({
  189.                     alwaysShow: true,
  190.                     warningClass: "badge bg-info",
  191.                     limitReachedClass: "badge bg-warning"
  192.                 });
  194.                 $('input#placement').maxlength({
  195.                     alwaysShow: true,
  196.                     placement: 'top-left',
  197.                     warningClass: "badge bg-info",
  198.                     limitReachedClass: "badge bg-warning"
  199.                 });
  201.             },
  202.                     //init
  203.                     $.AdvancedForm = new AdvancedForm, $.AdvancedForm.Constructor = AdvancedForm
  204.         }(window.jQuery),
  205.                 //Datepicker
  206.                         function ($) {
  207.                             "use strict";
  208.                             $.AdvancedForm.init();
  209.                         }(window.jQuery);
  211.     </script>
  212. {% endblock %}