<form method="post" id="form-vertical" enctype="multipart/form-data" class="needs-validation" nonvalidate="nonvalidate">
<div class="col-md-12">
   <div class="form-group">
      <label for="cource_title">Course Title</label>
      {{ form_widget(form.title,{ 'attr': {'class': 'form-control', 'label': 'Company', 'maxlength' : '25','data-rule-required':'true','data-rule-lettersonly':'true'} }) }}
      <div class="invalid-feedback">
                  Please choose a Course Title.
               </div>
   </div>
</div>
<div class="col-md-12">
   <div class="form-group">
      <label for="productName">Description</label>
    <textarea class="form-control" name="description" id="" 
    maxlength="800" rows="3">{{ cource.description}}</textarea>
   </div>
</div>
<div class="col-md-12">
   <div class="form-group">
      <label for="productName">Price (AED)</label>
      {{ form_widget(form.price,{ 'attr': {'class': 'form-control', 'label': 'Company' } }) }}
   </div>
</div>
<div class="col-md-6">
   <div class="form-group">
      <label for="productName">Event Time Start</label>
      {{ form_widget(form.eventtimeStart,{ 'attr': {'class': 'form-control', 'label': 'Company' } }) }}
   </div>
</div>
<div class="col-md-6">
   <div class="form-group">
      <label for="productName">Event Time End</label>
      {{ form_widget(form.eventtimeEnd,{ 'attr': {'class': 'form-control', 'label': 'Company' } }) }}
   </div>
</div>
<div class="col-md-6">
   <div class="form-group">
      <label for="productName">Course start date</label>
      {{ form_widget(form.courseStart,{ 'attr': {'class': 'form-control', 'label': 'Company' } }) }}
   </div>
</div>
<div class="col-md-6">
   <div class="form-group">
      <label for="productName">Course End Date (Delete course at this date  )</label>
      {{ form_widget(form.courseEnd,{ 'attr': {'class': 'form-control', 'label': 'Company' } }) }}
   </div>
</div>
<div class="col-md-6">
   <div class="form-group">
      <label for="productName">Course Place</label>
      {{ form_widget(form.place,{ 'attr': {'class': 'form-control', 'label': 'Company', 'maxlength' : '40' } }) }}
   </div>
</div>
<div class="col-md-12">
   <div class="form-group">
      <label for="productName">Course Country</label>
      {{ form_widget(form.country,{ 'attr': {'class': 'form-control', 'label': 'Company' } }) }}
   </div>
</div>
<div class="col-md-6">
   <div class="form-group">
      <label for="productName">Course category</label>
      {{ form_widget(form.category,{ 'attr': {'class': 'form-control', 'label': 'Company' } }) }}
   </div>
</div>
<div class="col-md-6">
   <div class="form-group">
      <label for="productName">Full name of the main trainer</label>
      {{ form_widget(form.fullnameMain,{ 'attr': {'class': 'form-control', 'label': 'Company' } }) }}
   </div>
</div>
<div class="col-md-6">
   <div class="form-group">
      <label for="productName">Full name of the secondary trainer (optionel)</label>
      {{ form_widget(form.fullnamesecandary,{ 'attr': {'class': 'form-control', 'label': 'Company' } }) }}
   </div>
</div>
<div class="col-md-6">
   <div class="form-group">
      <label for="thumb">Thumbnail image</label>
      <input id="thumb" type="file" name="thumbail" data-buttontext="Choose image" data-buttonname="btn-outline btn-primary" data-iconname="ti-image" data-rule-accept="image/*" class="filestyle">
      <span class="name_photo">{% if cource.photos[0].path is defined %} {{ cource.photos[0].path }}{% endif %}</span>

   </div>
</div>

<div class="col-md-6">
   <div class="form-group">
      <label for="image1">Description image 1 (Optional)</label>
      <input id="image1" type="file" name="image[]" data-buttontext="Choose image" data-buttonname="btn-outline btn-primary"  data-iconname="ti-image" data-rule-accept="image/*" class="filestyle">
      <span class="name_photo">{% if cource.photos[1].path is defined %} {{ cource.photos[1].path }}{% endif %}</span>
   </div>
</div>
<div class="col-md-6">
   <div class="form-group">
      <label for="image2">Description image 2 (Optional)</label>
      <input id="image2" type="file" name="image[]" data-buttontext="Choose image" data-buttonname="btn-outline btn-primary" data-iconname="ti-image" data-rule-accept="image/*" class="filestyle">
      <span class="name_photo">{% if cource.photos[2].path is defined %} {{ cource.photos[2].path }}{% endif %}</span>
   </div>
</div>
<div class="col-md-6">
   <div class="form-group">
      <label for="image3">Description image 3 (Optional)</label>
      <input id="image3" type="file" name="image[]" data-buttontext="Choose image" data-buttonname="btn-outline btn-primary" data-iconname="ti-image" data-rule-accept="image/*" class="filestyle">
      <span class="name_photo">{% if cource.photos[3].path is defined %} {{ cource.photos[3].path }}{% endif %}</span>

   </div>
</div>
<div class="col-md-6">
   <div class="form-group">
      <label for="image4">Description image 4 (Optional)</label>
      <input id="image4" type="file" name="image[]" data-buttontext="Choose image" data-buttonname="btn-outline btn-primary" data-iconname="ti-image" data-rule-accept="image/*" class="filestyle">
      <span class="name_photo">{% if cource.photos[4].path is defined %} {{ cource.photos[4].path }}{% endif %}</span>

   </div>
</div>
<div class="col-md-6">
   <div class="form-group">
      <label for="image5">Description image 5 (Optional)</label>
      <input id="image5" type="file" name="image[]" data-buttontext="Choose image" data-buttonname="btn-outline btn-primary" data-iconname="ti-image" data-rule-accept="image/*" class="filestyle">
      <span class="name_photo">{% if cource.photos[5].path is defined %} {{ cource.photos[5].path }}{% endif %}</span>

   </div>
</div>

   <div class="col-md-4 col-sm-6">
      <div class="form-group">
         <label for="productName " class="labelcheck">discount (%) </label>
         {{ form_widget(form.discount,{ 'attr': {'class': 'form-control inputcheck', 'label': 'Company','id':'discount' } }) }}
      </div>
   </div>
   <div class="col-md-4 col-sm-6">
      <div class="form-group">
         <label for="productName " class="labelcheck">Seats limit</label>
         {{ form_widget(form.limite,{ 'attr': {'class': 'form-control inputcheck', 'label': 'Company' } }) }}
      </div>
   </div>
   <div class="col-md-7 col-sm-10">
      <div class="form-group" id="autoUpdate" style="display:none">
         <label for="productName">Discount</label>
          <input type="number" name="discountVal" value="{{ cource.discountVal}}" class="form-control" min="1" max="100"><br><br>
      </div>
   </div>
   <div class="col-md-7 col-sm-10">
      <div class="form-group" id="Limit" style="display:none">
         <label for="productName">Limit</label>
         {{ form_widget(form.limiteVal,{ 'attr': {'class': 'form-control', 'label': 'Company' } }) }}
      </div>
   </div>

<div class="row"></div>
<button class="btn">{{ button_label|default('Save') }}</button>
{{ form_end(form) }}
{% block javascript %}{% endblock %}
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
<script>
$(function () {
        $("#cource_discount").click(function () {
            if ($(this).is(":checked")) {
                $("#autoUpdate").show();

            } else {
                $("#autoUpdate").hide();

            }
        });
         $("#cource_limite").click(function () {
            if ($(this).is(":checked")) {
                $("#Limit").show();

            } else {
                $("#Limit").hide();

            }
        });
    });

</script>
<script>
function TDate() {
    var selectedDate = document.getElementById("cource_courseEnd").value;
    if (selectedDate < Date.now()) {
        alert("The Date must be Bigger to today date")
        return false;
    }
    return true;
}
</script>
<script>
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
