[viewBag]
==
{% put scripts %}
<script>
$( "#contactForm" ).submit(function( event ) {
    //alert( "Handler for .submit() called." );
    $('#contactForm').request('{{ __SELF__ }}::onFormSubmit', {
        flash: 1,
        success: function(data) {
        this.success(data).done(function() {
            //alert("Succuess");
            const elemToHideMain = document.querySelectorAll("#contactForm .hide-js");
            //alert("hidding now");
            elemToHideMain.forEach(function(element) {
              element.style.display = 'none';
            });
            $('html, body').animate({
                scrollTop: ($("body").offset().top)
            }, 200);
            $("#{{ __SELF__ }}_forms_flash").html("Your enquiry was successfully submitted");
            $("#{{ __SELF__ }}_forms_flash").addClass("alert alert-success");
        });
    }});
  event.preventDefault();
});
</script>
{% endput %}

<form id="contactForm" class="contact-form form-container container">
{{ form_token() }}
        <div id="{{ __SELF__ }}_forms_flash" class="">
        </div>
        <div class="row">
          <div class="input-row hide-js col50">
            <div class="date form-group ">
              <input class="wow fadeInUp form-control eq-inp" type="date" name="Date" placeholder="Date">
            </div>
          </div>
          <div class="input-row form-group hide-js col50">
            <input class="wow fadeInUp form-control eq-inp" name="Email" placeholder="Email" required />
          </div>
          <div class="input-row form-group hide-js col50">
            <input class="wow fadeInUp form-control eq-inp" name="First name" placeholder="First Name" required />
          </div>
          <div class="input-row form-group hide-js col50">
            <input class="wow fadeInUp form-control eq-inp" name="Last name" placeholder="Last Name" required />
          </div>
          <div class="row">
              <div class="col-6">
                  <div class="form-group input-row hide-js">
                      <label>Adults</label>
                      <input class="wow fadeInUp form-control eq-inp" value="0" name="Adults" type="number" />
                  </div>
              </div>
              <div class="col-6">
                  <div class="input-row form-group hide-js">
                      <label>Kids</label>
                      <input class="wow fadeInUp form-control eq-inp" value="0" name="Kids" type="number" />
                  </div>
              </div>
          </div>
          <div class="input-row form-group hide-js">
            <select id="destination" class="wow fadeInUp destination-select" name="Destination">
                <option>Destination selection</option>
                {% for island in builderList.records %}
                    <option value="{{ island.title }}">{{ island.title }}</option>
                {% endfor %}
            </select>
          </div>
          <div class="input-row form-group hide-js">
            <textarea class="wow fadeInUp eq-inp" name="Purpose of trip" placeholder="Purpose of Trip"></textarea>
          </div>
          <div class="input-row form-group hide-js">
            <textarea class="wow fadeInUp eq-inp" name="Budget ranges" placeholder="Budget Ranges"></textarea>
          </div>
          <!-- Budget ranges --> 
          <div class="input-row form-group hide-js">
            <textarea class="wow fadeInUp eq-inp" name="Tell us more" placeholder="Tell us more"></textarea>
          </div>
        <div class="col-12 hide-js">
            {% partial '@recaptcha' %}
        </div>
          <div class="input-row hide-js">
            <div class="conditions_box">
              <label class="label_check">
                <input type="checkbox" name="Alert" id="alert1">
                <span style="color: #000">I would like this trip & other interesting trips, we never give your data to third parties.</span></label>
            </div>
            <button type="submit" class="send-btn wow fadeInUp hide-js btn-lg" style="margin: 8px;">Send Message</button>
          </div>
        </div>
</form>
{% put scripts %}
<script>

    // In your Javascript (external .js resource or <script> tag)
    $(document).ready(function() {
        $(".destination-select").select2({
            theme: "bootstrap-5",
            width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
            placeholder: $( this ).data( 'placeholder' ),
        });
        $(".selection").css({"width": "100%", "border": "solid #000 1px","border-radius": "10px","padding": "5px"});
        $(".select2-container").css({"padding-bottom": "15px"});
    });
</script>
{% endput %}
{% put styles %}
<style>
.conditions_box .label_check span {line-height: 24px;padding-left: 30px;position: relative;display: inline-block;cursor: pointer;font-size: 18px;text-align: left;}
.conditions_box .label_check span:after {content: "";position: absolute;left: 0px;width: 20px;height: 20px;top: 2px;border: 2px solid #7a7668;font-size: 15px;}
.conditions_box .label_check span:before {content: "✓";position: absolute;width: 20px;height: 20px;text-align: center;line-height: 22px;display: inline-block;left: 0px;top: 1px;opacity: 0;color: #7a7668;}
.conditions_box .label_check input {display: none;}
.conditions_box input[type="checkbox"]:checked+span:before {opacity: 1;}
.input-row select.dest.eq-inp {font-weight:600 !important;}
</style>
{% endput %}