{% extends "jinja/types/form.html" %}

{% set title %}Request meet and greet{% endset %}

{% block content %}
    <form method="POST">
        <h1 class="text-success text-center my-4">Meet & greet</h1>

        <div class="d-flex flex-row justify-content-center px-4">
            <div class="input-group mx-2">
                <span class="input-group-text">Pet name(s)</span>
                <input class="form-control" type="text"
                        placeholder="Tabby, Curly" name="client-pets" id="client-pets" required>
            </div>

            <div class="input-group mx-2">
                <span class="input-group-text">Name</span>
                <input class="form-control" type="text"
                        placeholder="Kasey" name="client-name" id="client-name" required>
            </div>

        </div>

        <div class="d-flex flex-row justify-content-center input-group m-2">
            <span class="input-group-text">Visit type</span>

            <input class="btn-check" type="radio"
                    name="visit-type" id="visit-type-walk" value="walk" required>
            <label class="btn btn-primary" for="visit-type-walk">
                Walk
            </label>
            
            <input class="btn-check" type="radio"
                    name="visit-type" id="visit-type-drop-in" value="drop-in" required>
            <label class="btn btn-primary" for="visit-type-drop-in">
                Drop-in
            </label>

            <input class="btn-check" type="radio"
                    name="visit-type" id="visit-type-house-sitting" value="house-sitting" required>
            <label class="btn btn-primary" for="visit-type-house-sitting">
                House sitting
            </label>
        </div>

        <div class="d-flex flex-row justify-content-center m-2">
            <div class="col-4 pe-1">
                <div class="input-group">
                    <span class="input-group-text">Date</span>
                    <input type="date" id="date"
                            name="meet-greet-date" class="form-control"
                            placeholder="mm/dd/yyyy" value="" required>
                </div>
            </div>

            <div class="col-4 ps-1">
                <div class="input-group">
                    <span class="input-group-text" id="time">Time</span>
                    <input type="time" id="meet-greet-time"
                        name="meet-greet-time" class="form-control"
                        min="09:00" max="16:00" value="09:00" required>
                </div>
            </div>
        </div>

        <div class="d-flex flex-row justify-content-center mx-4 mb-2">
            <div class="input-group">
                <span class="input-group-text">Contact</span>

                <input class="btn-check" type="radio"
                        name="contact-type" id="contact-type-email" value="email" required>
                    <label class="btn btn-primary" for="contact-type-email">
                        Email
                    </label>

                <input class="btn-check" type="radio"
                        name="contact-type" id="contact-type-phone" value="phone" required>
                    <label class="btn btn-primary" for="contact-type-phone">
                        Phone
                    </label>

                <input type="text" class="form-control" name="contact"
                        required>
            </div>
        </div>

        <div class="d-flex flex-row justify-content-center mx-4 mb-2">
            <span class="input-group-text">Additional notes</span>
            <textarea class="form-control" rows="5" for="notes"
                    id="notes" name="notes">
            </textarea>
        </div>

        <div class="row m-2">
            <button class="btn btn-primary" type="submit"
                    action="{{ url_for('forms.meet_and_greet') }}" method="post">
                Book it
            </button>
        </div>
    </form>
{% endblock %}