templates/course_detail/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}Zatoka Kodu - opis kursu{% endblock %}
  3. {% block css %}
  4.     {{ parent() }}
  5.     <link rel="stylesheet" type="text/css" href="{{ asset('../../assets/vendor/choices/css/choices.min.css')  }}">
  6. {% endblock %}
  7. {% block body %}
  8.     <!-- **************** MAIN CONTENT START **************** -->
  9.     <main>
  11.         <!-- =======================
  12.         Page intro START -->
  13.         <section class="bg-blue">
  14.             <div class="container">
  15.                 <div class="row justify-content-lg-between">
  17.                     <div class="col-lg-8">
  18.                         <!-- Title -->
  19.                         <h1 class="text-white">{{ course.name }}</h1>
  21.                     </div>
  23.                     <div class="col-lg-3">
  25.                         <!-- Button -->
  26.                         <a href="/kurs/{{ course.id }}/{{ course.name|replace({' ': '-'}) }}/harmonogram" style="margin-top:50px;" class="btn btn-warning mb-3 w-100">Zapisy i Terminarze</a>
  28.                     </div>
  30.                 </div>
  31.             </div>
  32.         </section>
  33.         <!-- =======================
  34.         Page intro END -->
  36.         <!-- =======================
  37.         Page content START -->
  38.         <section class="pt-0">
  39.             <div class="container">
  40.                 <div class="row">
  41.                     <!-- Main content START -->
  42.                     <div class="col-lg-8">
  43.                         <div class="card shadow rounded-2 p-0 mt-n5">
  44.                             <!-- Tabs START -->
  45.                             <div class="card-header border-bottom px-4 py-3">
  46.                                 <ul class="nav nav-pills nav-tabs-line py-0" id="course-pills-tab" role="tablist">
  47.                                     <!-- Tab item -->
  48.                                     <li class="nav-item me-2 me-sm-4" role="presentation">
  49.                                         <button class="nav-link mb-2 mb-md-0 active" id="course-pills-tab-1" data-bs-toggle="pill" data-bs-target="#course-pills-1" type="button" role="tab" aria-controls="course-pills-1" aria-selected="true">Opis Kursu</button>
  50.                                     </li>
  51.                                     <!-- Tab item -->
  52.                                     <li class="nav-item me-2 me-sm-4" role="presentation">
  53.                                         <button class="nav-link mb-2 mb-md-0" id="course-pills-tab-2" data-bs-toggle="pill" data-bs-target="#course-pills-2" type="button" role="tab" aria-controls="course-pills-2" aria-selected="false">Plan Zajęć</button>
  54.                                     </li>
  55.                                     <!-- Tab item -->
  56.                                     <li class="nav-item me-2 me-sm-4" role="presentation">
  57.                                         <button class="nav-link mb-2 mb-md-0" id="course-pills-tab-3" data-bs-toggle="pill" data-bs-target="#course-pills-3" type="button" role="tab" aria-controls="course-pills-3" aria-selected="false">Modele płatności</button>
  58.                                     </li>
  59.                                     <!-- Tab item
  60.                                     <li class="nav-item me-2 me-sm-4" role="presentation">
  61.                                         <button class="nav-link mb-2 mb-md-0" id="course-pills-tab-4" data-bs-toggle="pill" data-bs-target="#course-pills-4" type="button" role="tab" aria-controls="course-pills-4" aria-selected="false">Komentarze</button>
  62.                                     </li>-->
  63.                                     <!-- Tab item -->
  64.                                     <li class="nav-item me-2 me-sm-4" role="presentation">
  65.                                         <button class="nav-link mb-2 mb-md-0" id="course-pills-tab-5" data-bs-toggle="pill" data-bs-target="#course-pills-5" type="button" role="tab" aria-controls="course-pills-5" aria-selected="false">FAQ </button>
  66.                                     </li>
  67.                                 </ul>
  68.                             </div>
  69.                             <!-- Tabs END -->
  71.                             <!-- Tab contents START -->
  72.                             <div class="card-body p-4">
  73.                                 <div class="tab-content pt-2" id="course-pills-tabContent">
  74.                                     <!-- Content START -->
  75.                                     <div class="tab-pane fade show active" id="course-pills-1" role="tabpanel" aria-labelledby="course-pills-tab-1">
  76.                                         <!-- Course detail START -->
  77.                                         <h5 class="mb-3">Opis kursu</h5>
  78.                                         <p class="mb-3">{{ course.description|raw }}</p>
  79.                                     </div>
  80.                                     <!-- Content END -->
  82.                                     <!-- Content START -->
  83.                                     <div class="tab-pane fade" id="course-pills-2" role="tabpanel" aria-labelledby="course-pills-tab-2">
  84.                                         <!-- Course accordion START -->
  85.                                         {% include 'course_detail/schedule.html.twig' %}
  86.                                         <!-- Course accordion END -->
  87.                                     </div>
  88.                                     <!-- Content END -->
  90.                                     <!-- Content START -->
  91.                                     <div class="tab-pane fade" id="course-pills-3" role="tabpanel" aria-labelledby="course-pills-tab-3">
  92.                                         {% include 'course_detail/price.html.twig' %}
  93.                                     </div>
  94.                                     <!-- Content END -->
  96.                                     <!-- Content START -->
  97.                                     <div class="tab-pane fade" id="course-pills-4" role="tabpanel" aria-labelledby="course-pills-tab-4">
  98.                                         <!-- Review START -->
  99.                                         <div class="row mb-4">
  100.                                             <h5 class="mb-4">Our Student Reviews</h5>
  102.                                             <!-- Rating info -->
  103.                                             <div class="col-md-4 mb-3 mb-md-0">
  104.                                                 <div class="text-center">
  105.                                                     <!-- Info -->
  106.                                                     <h2 class="mb-0">4.5</h2>
  107.                                                     <!-- Star -->
  108.                                                     <ul class="list-inline mb-0">
  109.                                                         <li class="list-inline-item me-0"><i class="fas fa-star text-warning"></i></li>
  110.                                                         <li class="list-inline-item me-0"><i class="fas fa-star text-warning"></i></li>
  111.                                                         <li class="list-inline-item me-0"><i class="fas fa-star text-warning"></i></li>
  112.                                                         <li class="list-inline-item me-0"><i class="fas fa-star text-warning"></i></li>
  113.                                                         <li class="list-inline-item me-0"><i class="fas fa-star-half-alt text-warning"></i></li>
  114.                                                     </ul>
  115.                                                     <p class="mb-0">(Based on todays review)</p>
  116.                                                 </div>
  117.                                             </div>
  119.                                             <!-- Progress-bar and star -->
  120.                                             <div class="col-md-8">
  121.                                                 <div class="row align-items-center">
  122.                                                     <!-- Progress bar and Rating -->
  123.                                                     <div class="col-6 col-sm-8">
  124.                                                         <!-- Progress item -->
  125.                                                         <div class="progress progress-sm bg-warning bg-opacity-15">
  126.                                                             <div class="progress-bar bg-warning" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
  127.                                                         </div>
  128.                                                     </div>
  130.                                                     <div class="col-6 col-sm-4">
  131.                                                         <!-- Star item -->
  132.                                                         <ul class="list-inline mb-0">
  133.                                                             <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  134.                                                             <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  135.                                                             <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  136.                                                             <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  137.                                                             <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  138.                                                         </ul>
  139.                                                     </div>
  141.                                                     <!-- Progress bar and Rating -->
  142.                                                     <div class="col-6 col-sm-8">
  143.                                                         <!-- Progress item -->
  144.                                                         <div class="progress progress-sm bg-warning bg-opacity-15">
  145.                                                             <div class="progress-bar bg-warning" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
  146.                                                         </div>
  147.                                                     </div>
  149.                                                     <div class="col-6 col-sm-4">
  150.                                                         <!-- Star item -->
  151.                                                         <ul class="list-inline mb-0">
  152.                                                             <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  153.                                                             <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  154.                                                             <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  155.                                                             <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  156.                                                             <li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
  157.                                                         </ul>
  158.                                                     </div>
  160.                                                     <!-- Progress bar and Rating -->
  161.                                                     <div class="col-6 col-sm-8">
  162.                                                         <!-- Progress item -->
  163.                                                         <div class="progress progress-sm bg-warning bg-opacity-15">
  164.                                                             <div class="progress-bar bg-warning" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
  165.                                                         </div>
  166.                                                     </div>
  168.                                                     <div class="col-6 col-sm-4">
  169.                                                         <!-- Star item -->
  170.                                                         <ul class="list-inline mb-0">
  171.                                                             <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  172.                                                             <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  173.                                                             <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  174.                                                             <li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
  175.                                                             <li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
  176.                                                         </ul>
  177.                                                     </div>
  179.                                                     <!-- Progress bar and Rating -->
  180.                                                     <div class="col-6 col-sm-8">
  181.                                                         <!-- Progress item -->
  182.                                                         <div class="progress progress-sm bg-warning bg-opacity-15">
  183.                                                             <div class="progress-bar bg-warning" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
  184.                                                         </div>
  185.                                                     </div>
  187.                                                     <div class="col-6 col-sm-4">
  188.                                                         <!-- Star item -->
  189.                                                         <ul class="list-inline mb-0">
  190.                                                             <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  191.                                                             <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  192.                                                             <li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
  193.                                                             <li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
  194.                                                             <li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
  195.                                                         </ul>
  196.                                                     </div>
  198.                                                     <!-- Progress bar and Rating -->
  199.                                                     <div class="col-6 col-sm-8">
  200.                                                         <!-- Progress item -->
  201.                                                         <div class="progress progress-sm bg-warning bg-opacity-15">
  202.                                                             <div class="progress-bar bg-warning" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
  203.                                                         </div>
  204.                                                     </div>
  206.                                                     <div class="col-6 col-sm-4">
  207.                                                         <!-- Star item -->
  208.                                                         <ul class="list-inline mb-0">
  209.                                                             <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  210.                                                             <li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
  211.                                                             <li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
  212.                                                             <li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
  213.                                                             <li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
  214.                                                         </ul>
  215.                                                     </div>
  216.                                                 </div>
  217.                                             </div>
  218.                                         </div>
  219.                                         <!-- Review END -->
  221.                                         <!-- Student review START -->
  222.                                         <div class="row">
  223.                                             <!-- Review item START -->
  224.                                             <div class="d-md-flex my-4">
  225.                                                 <!-- Avatar -->
  226.                                                 <div class="avatar avatar-xl me-4 flex-shrink-0">
  227.                                                     <img class="avatar-img rounded-circle" src="/assets/images/avatar/09.jpg" alt="avatar">
  228.                                                 </div>
  229.                                                 <!-- Text -->
  230.                                                 <div>
  231.                                                     <div class="d-sm-flex mt-1 mt-md-0 align-items-center">
  232.                                                         <h5 class="me-3 mb-0">Jacqueline Miller</h5>
  233.                                                         <!-- Review star -->
  234.                                                         <ul class="list-inline mb-0">
  235.                                                             <li class="list-inline-item me-0"><i class="fas fa-star text-warning"></i></li>
  236.                                                             <li class="list-inline-item me-0"><i class="fas fa-star text-warning"></i></li>
  237.                                                             <li class="list-inline-item me-0"><i class="fas fa-star text-warning"></i></li>
  238.                                                             <li class="list-inline-item me-0"><i class="fas fa-star text-warning"></i></li>
  239.                                                             <li class="list-inline-item me-0"><i class="far fa-star text-warning"></i></li>
  240.                                                         </ul>
  241.                                                     </div>
  242.                                                     <!-- Info -->
  243.                                                     <p class="small mb-2">2 days ago</p>
  244.                                                     <p class="mb-2">Perceived end knowledge certainly day sweetness why cordially. Ask a quick six seven offer see among. Handsome met debating sir dwelling age material. As style lived he worse dried. Offered related so visitors we private removed. Moderate do subjects to distance. </p>
  245.                                                     <!-- Like and dislike button -->
  246.                                                     <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  247.                                                         <!-- Like button -->
  248.                                                         <input type="radio" class="btn-check" name="btnradio" id="btnradio1">
  249.                                                         <label class="btn btn-outline-light btn-sm mb-0" for="btnradio1"><i class="far fa-thumbs-up me-1"></i>25</label>
  250.                                                         <!-- Dislike button -->
  251.                                                         <input type="radio" class="btn-check" name="btnradio" id="btnradio2">
  252.                                                         <label class="btn btn-outline-light btn-sm mb-0" for="btnradio2"> <i class="far fa-thumbs-down me-1"></i>2</label>
  253.                                                     </div>
  254.                                                 </div>
  255.                                             </div>
  257.                                             <!-- Comment children level 1 -->
  258.                                             <div class="d-md-flex mb-4 ps-4 ps-md-5">
  259.                                                 <!-- Avatar -->
  260.                                                 <div class="avatar avatar-lg me-4 flex-shrink-0">
  261.                                                     <img class="avatar-img rounded-circle" src="/assets/images/avatar/02.jpg" alt="avatar">
  262.                                                 </div>
  263.                                                 <!-- Text -->
  264.                                                 <div>
  265.                                                     <div class="d-sm-flex mt-1 mt-md-0 align-items-center">
  266.                                                         <h5 class="me-3 mb-0">Louis Ferguson</h5>
  267.                                                     </div>
  268.                                                     <!-- Info -->
  269.                                                     <p class="small mb-2">1 days ago</p>
  270.                                                     <p class="mb-2">Water timed folly right aware if oh truth. Imprudence attachment him for sympathize. Large above be to means. Dashwood does provide stronger is. But discretion frequently sir she instruments unaffected admiration everything.</p>
  271.                                                 </div>
  272.                                             </div>
  274.                                             <!-- Divider -->
  275.                                             <hr>
  276.                                             <!-- Review item END -->
  278.                                             <!-- Review item START -->
  279.                                             <div class="d-md-flex my-4">
  280.                                                 <!-- Avatar -->
  281.                                                 <div class="avatar avatar-xl me-4 flex-shrink-0">
  282.                                                     <img class="avatar-img rounded-circle" src="/assets/images/avatar/07.jpg" alt="avatar">
  283.                                                 </div>
  284.                                                 <!-- Text -->
  285.                                                 <div>
  286.                                                     <div class="d-sm-flex mt-1 mt-md-0 align-items-center">
  287.                                                         <h5 class="me-3 mb-0">Dennis Barrett</h5>
  288.                                                         <!-- Review star -->
  289.                                                         <ul class="list-inline mb-0">
  290.                                                             <li class="list-inline-item me-0"><i class="fas fa-star text-warning"></i></li>
  291.                                                             <li class="list-inline-item me-0"><i class="fas fa-star text-warning"></i></li>
  292.                                                             <li class="list-inline-item me-0"><i class="fas fa-star text-warning"></i></li>
  293.                                                             <li class="list-inline-item me-0"><i class="fas fa-star text-warning"></i></li>
  294.                                                             <li class="list-inline-item me-0"><i class="far fa-star text-warning"></i></li>
  295.                                                         </ul>
  296.                                                     </div>
  297.                                                     <!-- Info -->
  298.                                                     <p class="small mb-2">2 days ago</p>
  299.                                                     <p class="mb-2">Handsome met debating sir dwelling age material. As style lived he worse dried. Offered related so visitors we private removed. Moderate do subjects to distance. </p>
  300.                                                     <!-- Like and dislike button -->
  301.                                                     <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  302.                                                         <!-- Like button -->
  303.                                                         <input type="radio" class="btn-check" name="btnradio" id="btnradio3">
  304.                                                         <label class="btn btn-outline-light btn-sm mb-0" for="btnradio3"><i class="far fa-thumbs-up me-1"></i>25</label>
  305.                                                         <!-- Dislike button -->
  306.                                                         <input type="radio" class="btn-check" name="btnradio" id="btnradio4">
  307.                                                         <label class="btn btn-outline-light btn-sm mb-0" for="btnradio4"> <i class="far fa-thumbs-down me-1"></i>2</label>
  308.                                                     </div>
  309.                                                 </div>
  310.                                             </div>
  311.                                             <!-- Review item END -->
  312.                                             <!-- Divider -->
  313.                                             <hr>
  314.                                         </div>
  315.                                         <!-- Student review END -->
  317.                                         <!-- Leave Review START -->
  318.                                         <div class="mt-2">
  319.                                             <h5 class="mb-4">Leave a Review</h5>
  320.                                             <form class="row g-3">
  321.                                                 <!-- Name -->
  322.                                                 <div class="col-md-6 bg-light-input">
  323.                                                     <input type="text" class="form-control" id="inputtext" placeholder="Name" aria-label="First name">
  324.                                                 </div>
  325.                                                 <!-- Email -->
  326.                                                 <div class="col-md-6 bg-light-input">
  327.                                                     <input type="email" class="form-control" placeholder="Email" id="inputEmail4">
  328.                                                 </div>
  329.                                                 <!-- Rating -->
  330.                                                 <div class="col-12 bg-light-input">
  331.                                                     <select id="inputState2" class="form-select js-choice">
  332.                                                         <option selected="">★★★★★ (5/5)</option>
  333.                                                         <option>★★★★☆ (4/5)</option>
  334.                                                         <option>★★★☆☆ (3/5)</option>
  335.                                                         <option>★★☆☆☆ (2/5)</option>
  336.                                                         <option>★☆☆☆☆ (1/5)</option>
  337.                                                     </select>
  338.                                                 </div>
  339.                                                 <!-- Message -->
  340.                                                 <div class="col-12 bg-light-input">
  341.                                                     <textarea class="form-control" id="exampleFormControlTextarea1" placeholder="Your review" rows="3"></textarea>
  342.                                                 </div>
  343.                                                 <!-- Button -->
  344.                                                 <div class="col-12">
  345.                                                     <button type="submit" class="btn btn-primary mb-0">Post Review</button>
  346.                                                 </div>
  347.                                             </form>
  348.                                         </div>
  349.                                         <!-- Leave Review END -->
  351.                                     </div>
  352.                                     <!-- Content END -->
  354.                                     <!-- Content START -->
  355.                                     <div class="tab-pane fade" id="course-pills-5" role="tabpanel" aria-labelledby="course-pills-tab-5">
  356.                                         {% include 'course_detail/faq.html.twig' %}
  357.                                     </div>
  358.                                     <!-- Content END -->
  360.                                 </div>
  361.                             </div>
  362.                             <!-- Tab contents END -->
  363.                         </div>
  364.                     </div>
  365.                     <!-- Main content END -->
  367.                     <!-- Right sidebar START -->
  368.                     <div class="col-lg-4 pt-5 pt-lg-0">
  369.                         <div class="row mb-5 mb-lg-0">
  370.                             <div class="col-md-6 col-lg-12">
  371.                                 <!-- Video START -->
  372.                                 <div class="card shadow p-2 mb-4 z-index-9">
  373.                                     <div class="overflow-hidden rounded-3">
  374.                                         <img src="{{ asset('./assets/videos/images/' ~ course.video ~ '.png')  }}" class="card-img" alt="course image">
  375.                                         <!-- Overlay -->
  376.                                         <div class="bg-overlay bg-dark opacity-6"></div>
  377.                                         <div class="card-img-overlay d-flex align-items-start flex-column p-3">
  378.                                             <!-- Video button and link -->
  379.                                             <div class="m-auto">
  380.                                                 <a href="{{ asset('./assets/videos/' ~ course.video ~ '.mp4')  }}" class="btn btn-lg text-danger btn-round btn-white-shadow mb-0" data-glightbox="" data-gallery="course-video">
  381.                                                     <i class="fas fa-play"></i>
  382.                                                 </a>
  383.                                             </div>
  384.                                         </div>
  385.                                     </div>
  387.                                     <!-- Card body -->
  388.                                     <div class="card-body px-3">
  389.                                         <!-- Info -->
  390.                                         <div class="d-flex justify-content-between align-items-center">
  391.                                             <!-- Price and time -->
  392.                                             <div>
  393.                                                 <div class="d-flex align-items-center">
  394.                                                     {% if course.price.yearly matches '/^\\d+$/' %}
  395.                                                     <span></span><h4 class="fw-bold mb-0 me-2 text-danger">Darmowa lekcja próbna</h4></div></span>
  396.                                                     <span></span><h6 class="fw-bold mb-0 me-2">Cena za cały kurs: {{ (course.price.yearly * course.lessons/100)|round(2, 'floor') }} zł</h6></span>
  397.                                                     {% endif %}
  398.                                                     {% if (course.price.monthly matches '/^\\d+$/') and  (course.price.yearly matches '/^\\d+$/') %}
  399.                                                     <span class="text-decoration-line-through mb-0 me-2">{{ (course.price.monthly * course.lessons/100)|round(2, 'floor') }} zł</span>
  400.                                                     <span class="badge text-bg-orange mb-0">{{ (course.price.monthly - course.price.yearly) * course.lessons/100|round(2, 'floor') }} zł taniej</span>
  401.                                                     {%  endif %}
  402.                                                 </div>
  403.                                                 {% if 1==2 %}
  404.                                                 <p class="mb-0 text-danger"><i class="fas fa-stopwatch me-2"></i>5 days left at this price</p>
  405.                                                 {%  endif %}
  406.                                             </div>
  407.                                         </div>
  409.                                         <!-- Buttons -->
  410.                                     <!--
  411.                                         <div class="mt-3 d-sm-flex justify-content-sm-between">
  412.                                             {% if course.free_lesson != 2 %}
  413.                                                 <a href="/kurs/{{ course.id }}/{{ course.name|replace({' ': '-'}) }}/harmonogram" class="btn btn-outline-primary mb-0">Darmowa lekcja</a>
  414.                                             {% endif %}
  415.                                             <a href="/kurs/{{ course.id }}/{{ course.name|replace({' ': '-'}) }}/harmonogram" class="btn btn-warning mb-0">Zapisy i Terminrze</a>
  416.                                         </div>
  417.                                         -->
  418.                                     </div>
  419.                                 </div>
  420.                                 <!-- Video END -->
  421.                             <div class="card card-body shadow p-4 mb-4">
  422.                                 <form class="row g-3 position-relative" id="contact-form">
  423.                                     <h4 class="fw-bold mb-0 me-2">Zapisz się na darmową lekcję</h4>
  424.                                     <!-- Name -->
  425.                                     <div class="col-md-12 col-lg-12 col-xl-12">
  426.                                         <label class="form-label"><b>Twoje imię i nazwisko *</b></label>
  427.                                         <input type="text" id="contact-form-name" class="form-control orange-border-input" aria-label="Name" style="padding:12px;" required>
  428.                                     </div>
  429.                                     <!-- Phone number -->
  430.                                     <div class="col-md-12 col-lg-12 col-xl-12">
  431.                                         <label class="form-label"><b>Numer Telefonu *</b></label>
  432.                                         <input type="text" id="contact-form-phone" class="form-control orange-border-input" style="padding:12px;" required>
  433.                                     </div>
  434.                                     <!-- Email -->
  435.                                     <div class="col-md-12 col-lg-12 col-xl-12">
  436.                                         <label class="form-label"><b>Twój email (niewymagany)</b></label>
  437.                                         <input type="email" id="contact-form-email" class="form-control orange-border-input" style="padding:12px;">
  438.                                     </div>
  439.                                     <div class="col-md-12 col-lg-12 col-xl-12">
  440.                                         <label class="form-label"><b>Wiek dziecka (niewymagany)</b></label>
  441.                                         <input type="text" id="contact-form-age" class="form-control orange-border-input" style="padding:12px;">
  442.                                     </div>
  443.                                     <!-- Button -->
  444.                                     <div class="d-sm-flex align-items-center justify-content-center justify-content-lg-start">
  445.                                         <!-- Button -->
  446.                                         <submit class="btn btn-lg btn-gold mx-auto mt-3" id="free-lesson">ODBIERZ DARMOWĄ LEKCJĘ</submit>
  447.                                     </div>
  448.                                 </form>
  449.                             </div>
  450.                                 <!-- Course info START -->
  451.                                 <div class="card card-body shadow p-4 mb-4">
  452.                                     <!-- Title -->
  453.                                     <h4 class="mb-3">Szczegóły kursu</h4>
  454.                                     <ul class="list-group list-group-borderless">
  455.                                         <li class="list-group-item d-flex justify-content-between align-items-center">
  456.                                             <span class="h6 fw-light mb-0"><i class="fas fa-fw fa-book-open text-primary"></i>Liczba lekcji</span>
  457.                                             <span>{{ course.lessons }}</span>
  458.                                         </li>
  459.                                         <li class="list-group-item d-flex justify-content-between align-items-center">
  460.                                             <span class="h6 fw-light mb-0"><i class="fas fa-fw fa-clock text-primary"></i>Czas trwania</span>
  461.                                             <span>{{ course.duration }} min</span>
  462.                                         </li>
  463.                                         <li class="list-group-item d-flex justify-content-between align-items-center">
  464.                                             <span class="h6 fw-light mb-0"><i class="fas fa-fw fa-dollar text-primary"></i>Cena za cały kurs</span>
  465.                                             <span>{{ (course.price.yearly * course.lessons/100)|round(2, 'floor') }} zł</span>
  466.                                         </li>
  467.                                         <li class="list-group-item d-flex justify-content-between align-items-center">
  468.                                             <span class="h6 fw-light mb-0"><i class="fas fa-fw fa-signal text-primary"></i>Poziom</span>
  469.                                             <span>
  470.                                                 {% if course.level == 'beginner' %}
  471.                                                     Początkujący
  472.                                                 {%  elseif course.level == 'intermediate' %}
  473.                                                     Średniozaawansowany
  474.                                                 {% else %}
  475.                                                     Zaawansowany
  476.                                                 {% endif %}
  477.                                             </span>
  478.                                         </li>
  479.                                         <li class="list-group-item d-flex justify-content-between align-items-center">
  480.                                             <span class="h6 fw-light mb-0"><i class="fas fa-fw fa-medal text-primary"></i>Certyfikat</span>
  481.                                             <span>Tak</span>
  482.                                         </li>
  483.                                     </ul>
  484.                                 </div>
  485.                                 <!-- Course info END -->
  486.                             </div>
  487.                         </div><!-- Row End -->
  488.                     </div>
  489.                     <!-- Right sidebar END -->
  491.                 </div><!-- Row END -->
  492.             </div>
  493.         </section>
  494.         <!-- =======================
  495.         Page content END -->
  497.     </main>
  498.     <!-- **************** MAIN CONTENT END **************** -->
  499. {% endblock %}
  501. {%  block js %}
  502.     <script src="{{ asset('./assets/vendor/choices/js/choices.min.js')  }}"></script>
  503.     <script src="{{ asset('./assets/js/jquery-3.6.4.min.js')  }}"></script>
  504.     {{ parent() }}
  505.     <script>
  506.         function sendContactForm() {
  507.             const data = {
  508.                 name: $('#contact-form-name').val(),
  509.                 phone: $('#contact-form-phone').val(),
  510.                 email: $('#contact-form-email').val(),
  511.                 message: 'Wiek dziecka' + $('#contact-form-age').val(),
  512.                 type: 'contact'
  513.             };
  515.             $.ajax({
  516.                 url: '/message',
  517.                 method: 'POST',
  518.                 data: data,
  519.                 success: function(response) {
  520.                     document.getElementById('contact-form').innerHTML = "<div class=\"col-lg-12 mx-auto text-center\">\n" +
  521.                         "                        <h3>Dziękujemy za zgłoszenie</h3>\n" +
  522.                         "                        <h5 class=\"mb-0\">Odezwiemy się o Ciebie w ciągu 2 dni i zaproponujemy termin darmowych zajęć. Do usłyszenia!</h5>\n" +
  523.                         "                    </div>";
  524.                 },
  525.                 error: function(jqXHR, textStatus, errorThrown) {
  526.                     console.error('Error sending message:', errorThrown);
  527.                 }
  528.             });
  529.         }
  530.     document.getElementById('free-lesson').addEventListener('click', function() {
  531.     sendContactForm();
  532.     });
  533.     </script>
  534. {%  endblock %}