templates/admin/coach/addCoach.html.twig line 1

Open in your IDE?
  1. {% extends 'admin/baseAdmin.html.twig' %}
  2.     {% block page_title %}Ajouter Coaches{% endblock %}
  3. {% block breadcump_main %}Coach{% endblock %}
  4. {% block breadcump_subtitle %}Création de compte{% 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 title %}{{"Ajouter coach"|trans }}{% endblock %} 
  15. {% block content %} 
  16.     <form class="p-1 " method="post" action="{{ path('add_coach')}}" enctype="multipart/form-data"  >
  18.     <div class="container-fluid">
  20.         <div class="row">
  21.             <div class="col-xl-12 px-0">
  22.                 <div class="card">
  23.                     <div class="card-body">
  24.                         <div class="m-auto my-3 relative">
  25.                                 <label for="avatar-upload" class="relative flex justify-center" style="cursor: pointer;">
  26.                                     <img class="w-40 h-40 rounded-full ring-2 ring-gray-700 object-cover dark:ring-gray-500 m-auto" src="{{asset('admin/images/users/images.png') }}"  alt="Bordered avatar" id="avatar-img">
  27.                                     <div class="h-10 w-10 bg-gray-300 rounded-full flex  items-center justify-center" style="position: absolute;right: 48%;bottom: 4px;font-size: 35px;">
  28.                                         <i class="bx bxs-image-alt text-gray-600"></i>
  29.                                     </div>
  30.                                     <input type="file" id="avatar-upload" style="display: none;" name="image" accept="image/*" onchange="changeAvatar(event)">
  31.                                 </label>
  32.                                 <p class="pb-4 text-gray-700 text-center text-sm">Ajouter photo de profile du coach </p>
  33.                             </div>
  36.                             <h5 class="text-lg font-semibold mt-5  ">Information personnel du coach </h5>
  37.                             <p class="pb-4 text-gray-700 text-sm">Ici, vous pouvez modifier et consulter les informations personnelles du coach. </p>
  38.                             <div class="row mb-4">
  39.                                 <div class="form-floating col-md-6 col-sm-12 ">
  40.                                     <input type="text" name="firstname"
  41.                                            class="form-control sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 ps-5"
  42.                                            id="nom" placeholder="John">
  43.                                     <label class="mb-2 ms-2 ps-5 text-sm font-medium text-gray-900 " for="nom">Nom</label>
  44.                                     <div class="absolute" style="top: 15px;left: 21px;color: #a1a1a1;">
  45.                                         <i class="bx bxs-user-circle text-2xl"></i>
  46.                                     </div>
  47.                                 </div>
  48.                                 <div class="form-floating col-md-6 col-sm-12 mt-2.5 sm:mt-0">
  49.                                     <input type="text" name="lastname"
  50.                                            class="form-control sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 ps-5"
  51.                                            id="prenom" placeholder="Doe">
  52.                                     <label class="mb-2 ms-2 ps-5 text-sm font-medium text-gray-900 " for="prenom">Prénom</label>
  53.                                     <div class="absolute" style="top: 15px;left: 21px;color: #a1a1a1;">
  54.                                         <i class="bx bxs-user-circle text-2xl"></i>
  55.                                     </div>
  56.                                 </div>
  57.                             </div>
  59.                             <div class="row mb-4">
  60.                                 <div class="form-floating mb-3 col-md-6 col-sm-12">
  61.                                     <input type="email" name="email"
  62.                                            class="block font-medium form-control  p-2.5 rounded-lg sm:text-sm text-gray-900 w-full ps-5" id="email"
  63.                                            placeholder="name@example.com">
  64.                                     <label class="mb-2 ms-2 ps-5 text-sm font-medium text-gray-900 dark:text-white" for="email">Email address</label>
  65.                                     <div class="absolute" style="top: 15px;left: 21px;color: #a1a1a1;">
  66.                                         <i class="bx bx-envelope text-2xl"></i>
  67.                                     </div>
  68.                                 </div>
  69.                                 <div class="form-floating col-md-6 mb-3 col-md-6">
  70.                                     <input type="tel"  class="block sm:text-sm form-control p-2.5 rounded-lg w-full input-tel py-3" name="phone" id="phone" placeholder="1234567">
  71.                                 </div>
  73.                             </div>
  74.                             <div class="row mb-4">
  75.                                 <div class=" rounded p-1">
  76.                                     <label for="inline-radio" class="ms-2 text-sm font-medium text-gray-500 dark:text-gray-300">Genre:</label>
  77.                                     <div class="flex justify-between w-50  ms-2 pt-1">
  80.                                         <div class="form-check mb-3">
  81.                                             <input value="1" class="form-check-input" type="radio" name="sex"
  82.                                                    id="formRadios1" checked>
  83.                                             <label class="form-check-label" for="formRadios1">
  84.                                                 Homme
  85.                                             </label>
  86.                                         </div>
  87.                                         <div class="form-check mb-3">
  88.                                             <input value="0" class="form-check-input" type="radio" name="sex"
  89.                                                    id="formRadios1" checked>
  90.                                             <label class="form-check-label" for="formRadios1">
  91.                                                 Femme
  92.                                             </label>
  93.                                         </div>
  95.                                     </div>
  96.                                 </div>
  97.                             </div>
  99.                             <div class="row pb-9 text-sm">
  100.                                 <div class="  ">
  101.                                     <p for="" class="form-label font-semibold col-2  ">Biographie</p>
  102.                                     <div class="relative w-full">
  103.                                         <textarea class="form-control text-sm px-5 pe-4" name="description" placeholder="Qui suis-je ?" id="description_programe" style="height: 100px"></textarea>
  104.                                         <div class="absolute" style="top: 8px;left: 11px;color: #a1a1a1;">
  105.                                             <i class="bx bx-notepad text-2xl" style=""></i>
  106.                                         </div>
  107.                                     </div>
  108.                                 </div>
  110.                             </div>
  111.                             <h5 class="text-lg font-semibold mt-5  ">Info de payment </h5>
  112.                             <p class="pb-4 text-gray-700 text-sm">Ici, vous pouvez modifier et consulter les informations de paiements. </p>
  113.                             <div class="row mb-3">
  114.                                 <div class="form-floating col-md-6 col-sm-12 ">
  115.                                     <input type="text" value="FGE" name="nom-bank" 
  116.                                            class="block sm:text-sm form-control ps-5 p-2.5 rounded-lg w-full" id="floatingInput" placeholder="JOHN DOE">
  117.                                     <label class="mb-2 ms-2 ps-5 text-sm font-medium text-gray-900 " for="nom-bank">Nom de la banque</label>
  118.                                     <div class="absolute" style="top: 15px;left: 21px;color: #a1a1a1;">
  119.                                         <i class="bx bxs-bank  text-2xl"></i>
  120.                                     </div>
  121.                                 </div>
  122.                                 <div class="form-floating col-md-6 col-sm-12 mt-2.5 mb-3 sm:mt-0">
  123.                                     <input type="text" value="XXXX" name="iban" 
  124.                                            class="iban-input block sm:text-sm form-control ps-5 p-2.5 rounded-lg w-full" id="floatingInput" placeholder="XXXX">
  125.                                     <label class="mb-2 ms-2 ps-5 text-sm font-medium text-gray-900 " for="iban-input">Iban</label>
  126.                                     <div class="absolute" style="top: 15px;left: 21px;color: #a1a1a1;">
  127.                                         <i class="bx bxs-info-circle text-2xl"></i>
  128.                                     </div>
  129.                                 </div>
  130.                             </div>
  131.                             <div class="form-floating col-md-6 col-sm-12 mt-2.5 mb-4 sm:mt-0">
  132.                                 <input type="text" value="XXXX" name="swift" 
  133.                                        class="swift-input block sm:text-sm form-control ps-5 p-2.5 rounded-lg w-full" id="floatingInput" placeholder="XXXX">
  134.                                 <label class="mb-2 ms-2 ps-5 text-sm font-medium text-gray-900 " for="swift-input">Swift</label>
  135.                                 <div class="absolute" style="top: 15px;left: 21px;color: #a1a1a1;">
  136.                                     <i class="bx bxs-info-circle text-2xl"></i>
  137.                                 </div>
  138.                             </div>
  140.                             <h5 class="text-lg font-semibold mt-5 ">Détails de Résidence </h5>
  141.                             <p class="pb-4 text-gray-700 text-sm">Ici, vous pouvez modifier et consulter l'adresse du coach. </p>
  142.                             <div class="row mb-4">
  144.                                 <div class="mb-3 col-md-6">
  145.                                     <select id="countries" name="country" class=" select border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-3.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 py-3">
  146.                                         <option value="BE" data-capital="Brussels">Belgium</option>
  147.                                         <option value="CA" data-capital="Ottawa">Canada</option>
  148.                                         <option value="FR" data-capital="Paris" selected>France</option>
  149.                                         <option value="PF" data-capital="Papeete">French Polynesia</option>
  150.                                         <option value="LU" data-capital="Luxembourg City">Luxembourg</option>
  151.                                         <option value="MA" data-capital="Rabat">Morocco</option>
  152.                                         <option value="NL" data-capital="Amsterdam">Netherlands</option>
  153.                                         <option value="NZ" data-capital="Wellington">New Zealand</option>
  154.                                     </select>
  155.                                 </div>
  156.                                 <div class="form-floating mb-3 col-md-6" id="address">
  157.                                     <input type="text" name="address" class="block sm:text-sm form-control p-2.5 rounded-lg w-full mt-0" id="floatingInput" placeholder="Adresse">
  158.                                     <label class="mb-2 ps-4 text-sm font-medium text-gray-900 dark:text-white" for="floatingInput">Adresse
  159.                                     </label>
  160.                                 </div>
  162.                             </div>
  164.                             <div class="divider mt-16"></div>
  165.                             <div class="flex mt-4 row">
  166.                                 <div class="col-md-6">
  167.                                     <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>
  168.                                 </div>
  169.                                 <div class="col-md flex justify-end">
  170.                                     <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">
  171.                                         Annuler</button>
  172.                                     <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>
  173.                                 </div>
  174.                             </div>
  175.                     </div>
  176.                     <!-- end card body -->
  177.                 </div>
  178.                 <!-- end card -->
  179.             </div>
  180.             <!-- end col -->
  183.             <!-- end col -->
  184.         </div>
  187.     </div> <!-- container-fluid -->
  189.                         </form>
  191.     <!-- End main -->
  192. {% endblock %}
  193. {% block javascripts %}
  194.     <!-- apexcharts -->
  195.     <script src="{{ asset('admin/libs/parsleyjs/parsley.min.js')}}"></script>
  196.     <script src="{{ asset('admin/libs/select2/js/select2.min.js')}}"></script>
  197.     <script src="{{ asset('admin/libs/bootstrap-maxlength/bootstrap-maxlength.min.js')}}"></script>
  199.     <script src="{{ asset('admin/js/pages/form-validation.init.js')}}"></script>
  201.     <script src="{{ asset('admin/js/app.js')}}"></script>
  202.     <script>
  203.                                         /*
  204.                                          Template Name: Skote - Admin & Dashboard Template
  205.                                          Author: Themesbrand
  206.                                          Website: https://themesbrand.com/
  207.                                          Contact: themesbrand@gmail.com
  208.                                          File: Form Advanced Js File
  209.                                          */
  211.                                         !function ($) {
  212.                                             "use strict";
  214.                                             var AdvancedForm = function () { };
  216.                                             AdvancedForm.prototype.init = function () {
  218.                                                 // Select2
  219.                                                 if ($('.select2').length > 0) {
  220.                                                     $(".select2").select2();
  221.                                                 }
  222.                                                 if ($('.select2-tags').length > 0) {
  223.                                                     $(".select2-tags").select2({
  224.                                                         tags: true
  225.                                                     });
  226.                                                 }
  227.                                                 if ($('.select2-limiting-3').length > 0) {
  228.                                                     $(".select2-limiting-3").select2({
  229.                                                         maximumSelectionLength: 3
  230.                                                     });
  231.                                                 }
  233.                                                 //Bootstrap-MaxLength
  234.                                                 $('input#defaultconfig').maxlength({
  235.                                                     warningClass: "badge bg-info",
  236.                                                     limitReachedClass: "badge bg-warning"
  237.                                                 });
  239.                                                 $('input#thresholdconfig').maxlength({
  240.                                                     threshold: 20,
  241.                                                     warningClass: "badge bg-info",
  242.                                                     limitReachedClass: "badge bg-warning"
  243.                                                 });
  245.                                                 $('input#moreoptions').maxlength({
  246.                                                     alwaysShow: true,
  247.                                                     warningClass: "badge bg-success",
  248.                                                     limitReachedClass: "badge bg-danger"
  249.                                                 });
  251.                                                 $('input#alloptions').maxlength({
  252.                                                     alwaysShow: true,
  253.                                                     warningClass: "badge bg-success",
  254.                                                     limitReachedClass: "badge bg-danger",
  255.                                                     separator: ' out of ',
  256.                                                     preText: 'You typed ',
  257.                                                     postText: ' chars available.',
  258.                                                     validate: true
  259.                                                 });
  261.                                                 $('textarea#textarea').maxlength({
  262.                                                     alwaysShow: true,
  263.                                                     warningClass: "badge bg-info",
  264.                                                     limitReachedClass: "badge bg-warning"
  265.                                                 });
  267.                                                 $('input#placement').maxlength({
  268.                                                     alwaysShow: true,
  269.                                                     placement: 'top-left',
  270.                                                     warningClass: "badge bg-info",
  271.                                                     limitReachedClass: "badge bg-warning"
  272.                                                 });
  274.                                             },
  275.                                                     //init
  276.                                                     $.AdvancedForm = new AdvancedForm, $.AdvancedForm.Constructor = AdvancedForm
  277.                                         }(window.jQuery),
  278.                                                 //Datepicker
  279.                                                         function ($) {
  280.                                                             "use strict";
  281.                                                             $.AdvancedForm.init();
  282.                                                         }(window.jQuery);
  284.     </script>
  285. {% endblock %}