{% extends "layouts/_main.twig" %}

{% block content %}

{% css %}
  input.form-control, textarea {
    margin-bottom: 10px;
  }
{% endcss %}


 <div class="container" style='margin-top:120px;'>
    {{ "now"|date("H:i m/d/Y",'Asia/Singapore')}}

<div class="row">
    <div class="col-8 py-3 px-4">

    <h1>Contact Us</h1>
    <h4>Advanced Contact Form</h4>

    {% macro errorList(errors) %}
        {% if errors %}
            {{ ul(errors, {class: 'errors'}) }}
        {% endif %}
    {% endmacro %}


    {% if craft.app.session.hasFlash('notice') %}

        <div class="alert alert-success" role="alert">
            {{ craft.app.session.getFlash('notice') }}
        </div>
    {% elseif craft.app.session.hasFlash('error') %}
        <p class="message error">{{ craft.app.session.getFlash('error') }}</p>
    {% endif %}


    {% set submission = submission ?? null %}

     <form method="post" action="" accept-charset="UTF-8">
        {{ csrfInput() }}
        {{ actionInput('contact-form/send') }}
        {# redirectInput('contact/thanks') #}

        <label class='form-label' for="from-name">Your Name</label>
        {{ input('text', 'fromName', submission.fromName ?? 'Mr.test', {
            id: 'from-name',
            autocomplete: 'name',
            class : 'form-control'
        },
        
        ) }}
        {{ submission ? _self.errorList(submission.getErrors('fromName')) }}

        <label class='control-label' for="from-email">Your Email</label>
        {{ input('email', 'fromEmail', submission.fromEmail ?? 'lionel@wesvault.com', {
            id: 'from-email',
            autocomplete: 'email',
            class : 'form-control'
        }) }}

        {{ submission ? _self.errorList(submission.getErrors('fromEmail')) }}

        <label class='control-label' for="subject">Subject</label>
        {{ input('text', 'subject', submission.subject ?? '', {
            id: 'subject',

            class : 'form-control'
        }) }}
        {{ submission ? _self.errorList(submission.getErrors('subject')) }}

        <label class='control-label' for="message">Message</label>
        {{ tag('textarea', {
            text: submission.message ?? '',
            id: 'message',
            name: 'message[body]',
            rows: 5,
            cols: 40,
            class : 'form-control'
        }) }}
        {{ submission ? _self.errorList(submission.getErrors('message')) }}




        <label  class='control-label' for="phone">Your phone number</label>
        <input id="phone" class='form-control' type="text" name="message[Phone]" value="">

        
        
        <div class="row my-4">
            <label class="control-label">When </label>
            <div class="col-6">
                <input type="date" class='form-control' name="message[date from]"> 
            </div>
            <div class="col-6">
               <input type="date" class='form-control' name="message[date to]"> 
            </div>
        </div>
        
        


        What services are you interested in?
        <p>
        <label><input type="checkbox" name="message[Services][]" value="Design"> Design</label>
        <label><input type="checkbox" name="message[Services][]" value="Development"> Development</label>
        <label><input type="checkbox" name="message[Services][]" value="Strategy"> Strategy</label>
        <label><input type="checkbox" name="message[Services][]" value="Marketing"> Marketing</label>            
        </p>



        <div class="mt-5">
        <button type="submit" class='btn btn-primary'>Send</button>    
        </div>
        
    </form>
    </div>       

    </div>
</div>
{% endblock %}