{% extends 'base.html' %}
{% block title %}{{ config.website }} {{ config.booking ? 'Booking' : 'Quotation' }} Form{% endblock %}
{% block javascript %}
    {% if config.test %}
        <script type="module">
            import { fakerEN_GB as faker } from 'https://cdn.skypack.dev/@faker-js/faker';
            import dayjs from 'https://esm.sh/dayjs@1.11.7';

            if (document.querySelector('#test_populate')) {
                document.querySelector('#test_populate').addEventListener('click', (event) => {
                    event.preventDefault()

                    document.querySelector('#contact_name').value = faker.person.fullName()
                    document.querySelector('#contact_email').value = 'paul@phpdeveloper.org.uk'
                    document.querySelector('#contact_telephone').value = faker.phone.number()
                    document.querySelector('#contact_cell_phone').value = faker.phone.number()

                    document.querySelector('#passenger_count').value = faker.number.int({
                        min: 1,
                        max: 10
                    })

                    if (document.querySelector('#luggage_count')) {
                        document.querySelector('#luggage_count').value = faker.number.int({
                            min: 0,
                            max: 10
                        })
                    }

                    const pickUpDate = dayjs(faker.date.soon({days: 7}))

                    document.querySelector('#outward_pick_up_date').value = pickUpDate.format('YYYY-MM-DD')
                    document.querySelector('#outward_pick_up_time_hour').value = pickUpDate.format('H')
                    document.querySelector('#outward_pick_up_time_minute').value = pickUpDate.format('m')
                    document.querySelector('#outward_pick_up_postcode').value = 'SW1A 1AA'
                    document.querySelector('#outward_pick_up_street').value = faker.location.buildingNumber() + ' ' + faker.location.street()
                    document.querySelector('#outward_pick_up_locality').value = ''
                    document.querySelector('#outward_pick_up_town_city').value = faker.location.city()

                    document.querySelector('#outward_drop_off_postcode').value = 'SW1A 2AA'
                    document.querySelector('#outward_drop_off_street').value = faker.location.buildingNumber() + ' ' + faker.location.street()
                    document.querySelector('#outward_drop_off_locality').value = ''
                    document.querySelector('#outward_drop_off_town_city').value = faker.location.city()

                    // Don't populate return journey as there is a checkbox for this

                    // Don't populate billing details as there is a checkbox for this
                })
            }
        </script>
    {% endif %}

    {% if config.common_addresses %}
        <script type="module">
            const commonAddresses = {{ commonAddressesJson|raw }}

            if (document.querySelector('#outward_pick_up_common_address')) {
                document.querySelector('#outward_pick_up_common_address').addEventListener('change', (event) => {
                    if (event.target.value) {
                        let address = commonAddresses[event.target.value]
                        document.querySelector('#outward_pick_up_postcode').value = address.postcode
                        document.querySelector('#outward_pick_up_street').value = address.address1
                        document.querySelector('#outward_pick_up_locality').value = address.address2
                        document.querySelector('#outward_pick_up_town_city').value = address.city
                    }
                })
            }

            if (document.querySelector('#outward_drop_off_common_address')) {
                document.querySelector('#outward_drop_off_common_address').addEventListener('change', (event) => {
                    if (event.target.value) {
                        let address = commonAddresses[event.target.value]
                        document.querySelector('#outward_drop_off_postcode').value = address.postcode
                        document.querySelector('#outward_drop_off_street').value = address.address1
                        document.querySelector('#outward_drop_off_locality').value = address.address2
                        document.querySelector('#outward_drop_off_town_city').value = address.city
                    }
                })
            }

            if (document.querySelector('#return_pick_up_common_address')) {
                document.querySelector('#return_pick_up_common_address').addEventListener('change', (event) => {
                    if (event.target.value) {
                        let address = commonAddresses[event.target.value]
                        document.querySelector('#return_pick_up_postcode').value = address.postcode
                        document.querySelector('#return_pick_up_street').value = address.address1
                        document.querySelector('#return_pick_up_locality').value = address.address2
                        document.querySelector('#return_pick_up_town_city').value = address.city
                    }
                })
            }

            if (document.querySelector('#return_drop_off_common_address')) {
                document.querySelector('#return_drop_off_common_address').addEventListener('change', (event) => {
                    if (event.target.value) {
                        let address = commonAddresses[event.target.value]
                        document.querySelector('#return_drop_off_postcode').value = address.postcode
                        document.querySelector('#return_drop_off_street').value = address.address1
                        document.querySelector('#return_drop_off_locality').value = address.address2
                        document.querySelector('#return_drop_off_town_city').value = address.city
                    }
                })
            }
        </script>
    {% endif %}

    <script type="module">
        import {PostcoderAddress} from './js/PostcoderAddress.js'

        const postcoderApiKey = 'PCW44-QR85V-X3KQ8-3VGBB'

        if (document.querySelector('#outward_pick_up_postcode')) {
            const postcoderOutwardPickUp = new PostcoderAddress({
                apiKey: postcoderApiKey,
                searchTerm: '#outward_pick_up_postcode',
                addressSelectContainer: '#outward_pick_up_addresses_container',
                addressSelect: '#outward_pick_up_addresses_select',
                noResultMessage: '#outward_pick_up_no_result_message',
                countryCode: '#country_default',
                searchButton: '#outward_pick_up_postcode_button',
                searchTermInput: '#outward_pick_up_postcode',
                addressLines: 4,
                exclude: '',
                fields: {
                    street: '#outward_pick_up_street',
                    locality: '#outward_pick_up_locality',
                    townCity: '#outward_pick_up_town_city'
                }
            })
        }

        if (document.querySelector('#outward_drop_off_postcode')) {
            const postcoderOutwardDropOff = new PostcoderAddress({
                apiKey: postcoderApiKey,
                searchTerm: '#outward_drop_off_postcode',
                addressSelectContainer: '#outward_drop_off_addresses_container',
                addressSelect: '#outward_drop_off_addresses_select',
                noResultMessage: '#outward_drop_off_no_result_message',
                countryCode: '#country_default',
                searchButton: '#outward_drop_off_postcode_button',
                searchTermInput: '#outward_drop_off_postcode',
                addressLines: 4,
                exclude: '',
                fields: {
                    street: '#outward_drop_off_street',
                    locality: '#outward_drop_off_locality',
                    townCity: '#outward_drop_off_town_city'
                }
            })
        }

        if (document.querySelector('#return_pick_up_postcode')) {
            const postcoderReturnPickUp = new PostcoderAddress({
                apiKey: postcoderApiKey,
                searchTerm: '#return_pick_up_postcode',
                addressSelectContainer: '#return_pick_up_addresses_container',
                addressSelect: '#return_pick_up_addresses_select',
                noResultMessage: '#return_pick_up_no_result_message',
                countryCode: '#country_default',
                searchButton: '#return_pick_up_postcode_button',
                searchTermInput: '#return_pick_up_postcode',
                addressLines: 4,
                exclude: '',
                fields: {
                    street: '#return_pick_up_street',
                    locality: '#return_pick_up_locality',
                    townCity: '#return_pick_up_town_city'
                }
            })
        }

        if (document.querySelector('#return_drop_off_postcode')) {
            const postcoderReturnDropOff = new PostcoderAddress({
                apiKey: postcoderApiKey,
                searchTerm: '#return_drop_off_postcode',
                addressSelectContainer: '#return_drop_off_addresses_container',
                addressSelect: '#return_drop_off_addresses_select',
                noResultMessage: '#return_drop_off_no_result_message',
                countryCode: '#country_default',
                searchButton: '#return_drop_off_postcode_button',
                searchTermInput: '#return_drop_off_postcode',
                addressLines: 4,
                exclude: '',
                fields: {
                    street: '#return_drop_off_street',
                    locality: '#return_drop_off_locality',
                    townCity: '#return_drop_off_town_city'
                }
            })
        }

        if (document.querySelector('#billing_postcode')) {
            const postcoderBilling = new PostcoderAddress({
                apiKey: postcoderApiKey,
                searchTerm: '#billing_postcode',
                addressSelectContainer: '#billing_addresses_container',
                addressSelect: '#billing_addresses_select',
                noResultMessage: '#billing_no_result_message',
                countryCode: '#billing_country',
                searchButton: '#billing_postcode_button',
                searchTermInput: '#billing_postcode',
                addressLines: 4,
                exclude: '',
                fields: {
                    street: '#billing_street',
                    locality: '#billing_locality',
                    townCity: '#billing_town_city'
                }
            })
        }

        if (document.querySelector('#reverse_outward_journey')) {
            document.querySelector('#reverse_outward_journey').addEventListener('change', (event) => {
                if (event.target.checked) {
                    document.querySelector('#return_journey_container').classList.remove('hide')
                    // Return journey starts from outward drop off
                    if (document.querySelector('#outward_drop_off_common_address') && document.querySelector('#return_pick_up_common_address')) {
                        document.querySelector('#return_pick_up_common_address').value = document.querySelector('#outward_drop_off_common_address').value
                    }

                    document.querySelector('#return_pick_up_postcode').value = document.querySelector('#outward_drop_off_postcode').value
                    document.querySelector('#return_pick_up_street').value = document.querySelector('#outward_drop_off_street').value
                    document.querySelector('#return_pick_up_locality').value = document.querySelector('#outward_drop_off_locality').value
                    document.querySelector('#return_pick_up_town_city').value = document.querySelector('#outward_drop_off_town_city').value

                    // Return journey ends at outward pick up
                    if (document.querySelector('#outward_pick_up_common_address') && document.querySelector('#return_drop_off_common_address')) {
                        document.querySelector('#return_drop_off_common_address').value = document.querySelector('#outward_pick_up_common_address').value
                    }

                    document.querySelector('#return_drop_off_postcode').value = document.querySelector('#outward_pick_up_postcode').value
                    document.querySelector('#return_drop_off_street').value = document.querySelector('#outward_pick_up_street').value
                    document.querySelector('#return_drop_off_locality').value = document.querySelector('#outward_pick_up_locality').value
                    document.querySelector('#return_drop_off_town_city').value = document.querySelector('#outward_pick_up_town_city').value
                } else {
                    document.querySelector('#return_journey_container').classList.add('hide')
                }
            })
        }

        if (document.querySelector('#billing_contact_pick_up_details')) {
            document.querySelector('#billing_contact_pick_up_details').addEventListener('change', (event) => {
                if (event.target.checked) {
                    document.querySelector('#billing_name').value = document.querySelector('#contact_name').value
                    document.querySelector('#billing_postcode').value = document.querySelector('#outward_pick_up_postcode').value
                    document.querySelector('#billing_street').value = document.querySelector('#outward_pick_up_street').value
                    document.querySelector('#billing_locality').value = document.querySelector('#outward_pick_up_locality').value
                    document.querySelector('#billing_town_city').value = document.querySelector('#outward_pick_up_town_city').value
                }
            })
        }
    </script>
{% endblock %}
{% block content %}
    {% if config.test %}
        <div class="columns is-centered">
            <div class="column is-6">
                <p><button class="button is-link" id="test_populate">Populate Form</button></p>
            </div>
        </div>
    {% endif %}

    <form action="./" method="post" id="booking_form" novalidate autocomplete="off">
        {% if errors.general is defined %}
            <div class="columns is-centered">
                <div class="column is-6">
                    <p class="has-text-red">{{ errors.general }}</p>
                </div>
            </div>
        {% endif %}

        <div class="columns is-centered">
            <div class="column is-6">
                <h2 class="subtitle is-4">Contact Details</h2>
            </div>
        </div>

        <div class="columns is-centered">
            <div class="column is-3">
                <div class="field-label is-normal">
                    <label class="label" for="contact_name">Name</label>
                </div>
            </div>
            <div class="column is-3">
                <div class="field-body">
                    <div class="field">
                        <div class="control has-icons-left">
                            <input class="input {{ errors.contact_name is defined ? 'is-danger' : '' }}" type="text" id="contact_name" name="contact_name" value="{{ form.contact_name ?? '' }}" required>
                            <span class="icon is-large is-left required-field">*</span>
                        </div>
                        {% if errors.contact_name is defined %}
                            <p class="help is-danger">{{ errors.contact_name }}</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        {% if config.contact_company_name %}
            <div class="columns is-centered">
                <div class="column is-3">
                    <div class="field-label is-normal">
                        <label class="label" for="contact_company_name">Company Name</label>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="field-body">
                        <div class="field">
                            <div class="control has-icons-left">
                                <input class="input {{ errors.contact_company_name is defined ? 'is-danger' : '' }}" type="text" id="contact_company_name" name="contact_company_name" value="{{ form.contact_company_name ?? '' }}" required>
                                <span class="icon is-large is-left required-field">*</span>
                            </div>
                            {% if errors.contact_company_name is defined %}
                                <p class="help is-danger">{{ errors.contact_company_name }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}

        <div class="columns is-centered">
            <div class="column is-3">
                <div class="field-label is-normal">
                    <label class="label" for="contact_email">Email</label>
                </div>
            </div>
            <div class="column is-3">
                <div class="field-body">
                    <div class="field">
                        <div class="control has-icons-left">
                            <input class="input {{ errors.contact_email is defined ? 'is-danger' : '' }}" type="email" id="contact_email" name="contact_email" value="{{ form.contact_email ?? '' }}" required>
                            <span class="icon is-large is-left required-field">*</span>
                        </div>
                        {% if errors.contact_email is defined %}
                            <p class="help is-danger">{{ errors.contact_email }}</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <div class="columns is-centered">
            <div class="column is-3">
                <div class="field-label is-normal">
                    <label class="label" for="contact_telephone">Telephone</label>
                </div>
            </div>
            <div class="column is-3">
                <div class="field-body">
                    <div class="field">
                        <div class="control has-icons-left">
                            <input class="input {{ errors.contact_telephone is defined ? 'is-danger' : '' }}" type="text" id="contact_telephone" name="contact_telephone" value="{{ form.contact_telephone ?? '' }}" required>
                            <span class="icon is-large is-left required-field">*</span>
                        </div>
                        {% if errors.contact_telephone is defined %}
                            <p class="help is-danger">{{ errors.contact_telephone }}</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <div class="columns is-centered">
            <div class="column is-3">
                <div class="field-label is-normal">
                    <label class="label" for="contact_cell_phone">Mobile Phone</label>
                </div>
            </div>
            <div class="column is-3">
                <div class="field-body">
                    <div class="field">
                        <div class="control has-icons-left">
                            <input class="input {{ errors.contact_cell_phone is defined ? 'is-danger' : '' }}" type="text" id="contact_cell_phone" name="contact_cell_phone" value="{{ form.contact_cell_phone ?? '' }}" required>
                            <span class="icon is-large is-left required-field">*</span>
                        </div>
                        {% if errors.contact_cell_phone is defined %}
                            <p class="help is-danger">{{ errors.contact_cell_phone }}</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <div class="columns is-centered">
            <div class="column is-6">
                <h2 class="subtitle is-4">{{ config.event ? 'Details of Event' : 'Outward Journey' }}</h2>
            </div>
        </div>

        {% if config.passengers %}
            <div class="columns is-centered">
                <div class="column is-3">
                    <div class="field-label is-normal">
                        <label class="label" for="passenger_count">Number of Passengers</label>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="field-body">
                        <div class="field">
                            <div class="control has-icons-left">
                                <input class="input {{ errors.passenger_count is defined ? 'is-danger' : '' }}" type="number" id="passenger_count" name="passenger_count" value="{{ form.passenger_count ?? '' }}" required>
                                <span class="icon is-large is-left required-field">*</span>
                            </div>
                            {% if errors.passenger_count is defined %}
                                <p class="help is-danger">{{ errors.passenger_count }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}

        {% if config.luggage %}
            <div class="columns is-centered">
                <div class="column is-3">
                    <div class="field-label is-normal">
                        <label class="label" for="luggage_count">Number of Items of Luggage</label>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="field-body">
                        <div class="field">
                            <div class="control has-icons-left">
                                <input class="input {{ errors.luggage_count is defined ? 'is-danger' : '' }}" type="number" id="luggage_count" name="luggage_count" value="{{ form.luggage_count ?? 0 }}" required>
                                <span class="icon is-large is-left required-field">*</span>
                            </div>
                            {% if errors.luggage_count is defined %}
                                <p class="help is-danger">{{ errors.luggage_count }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}

        {% if config.taxis %}
            <div class="columns is-centered">
                <div class="column is-3">
                    <div class="field-label is-normal">
                        <label class="label" for="taxi_count">Number of Taxis Required</label>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="field-body">
                        <div class="field">
                            <div class="control has-icons-left">
                                <input class="input {{ errors.taxi_count is defined ? 'is-danger' : '' }}" type="number" id="taxi_count" name="taxi_count" value="{{ form.taxi_count ?? 1 }}" required>
                                <span class="icon is-large is-left required-field">*</span>
                            </div>
                            {% if errors.taxi_count is defined %}
                                <p class="help is-danger">{{ errors.taxi_count }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}

        {% if config.tour %}
            <div class="columns is-centered">
                <div class="column is-3">
                    <div class="field-label is-normal">
                        <label class="label" for="tour">Please select your tour</label>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="field-body">
                        <div class="field">
                            <div class="control has-icons-left">
                                <div class="select {{ errors.tour is defined ? 'is-danger' : '' }}">
                                    <select id="tour" name="tour" required>
                                        <option value=""></option>
                                        {% for value, name in tourOptions %}
                                            <option value="{{ value }}" {{ form.tour is defined and value == form.tour ? 'selected' : '' }}>{{ name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="icon is-large is-left required-field">*</div>
                            </div>
                            {% if errors.tour is defined %}
                                <p class="help is-danger">{{ errors.tour }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}

        {% if config.guests %}
            <div class="columns is-centered">
                <div class="column is-3">
                    <div class="field-label is-normal">
                        <label class="label" for="guest_count">Number of Guests</label>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="field-body">
                        <div class="field">
                            <div class="control has-icons-left">
                                <input class="input {{ errors.guest_count is defined ? 'is-danger' : '' }}" type="number" id="guest_count" name="guest_count" value="{{ form.guest_count ?? '' }}" required>
                                <span class="icon is-large is-left required-field">*</span>
                            </div>
                            {% if errors.guest_count is defined %}
                                <p class="help is-danger">{{ errors.guest_count }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}

        {% if config.marshals %}
            <div class="columns is-centered">
                <div class="column is-3">
                    <div class="field-label is-normal">
                        <label class="label" for="marshal_count">Number of Marshals</label>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="field-body">
                        <div class="field">
                            <div class="control has-icons-left">
                                <input class="input {{ errors.marshal_count is defined ? 'is-danger' : '' }}" type="number" id="marshal_count" name="marshal_count" value="{{ form.marshal_count ?? 2 }}" required>
                                <span class="icon is-large is-left required-field">*</span>
                            </div>
                            {% if errors.marshal_count is defined %}
                                <p class="help is-danger">{{ errors.marshal_count }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}

        {% if config.taxi_model %}
            <div class="columns is-centered">
                <div class="column is-3">
                    <div class="field-label is-normal">
                        <label class="label" for="taxi_model">Please select your taxi model</label>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="field-body">
                        <div class="field">
                            <div class="control has-icons-left">
                                <div class="select {{ errors.taxi_model is defined ? 'is-danger' : '' }}">
                                    <select id="taxi_model" name="taxi_model" required>
                                        <option value=""></option>
                                        {% for value, name in taxiModelOptions %}
                                            <option value="{{ value }}" {{ form.taxi_model is defined and value == form.taxi_model ? 'selected' : '' }}>{{ name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="icon is-large is-left required-field">*</div>
                            </div>
                            {% if errors.taxi_model is defined %}
                                <p class="help is-danger">{{ errors.taxi_model }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}

        {% if config.wedding_taxi %}
            <div class="columns is-centered">
                <div class="column is-3">
                    <div class="field-label is-normal">
                        <label class="label" for="wedding_taxi_model">Please select your taxi model</label>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="field-body">
                        <div class="field">
                            <div class="control has-icons-left">
                                <div class="select {{ errors.wedding_taxi_model is defined ? 'is-danger' : '' }}">
                                    <select id="wedding_taxi_model" name="wedding_taxi_model" required>
                                        <option value=""></option>
                                        {% for value, name in weddingTaxiModelOptions %}
                                            <option value="{{ value }}" {{ form.wedding_taxi_model is defined and value == form.wedding_taxi_model ? 'selected' : '' }}>{{ name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="icon is-large is-left required-field">*</div>
                            </div>
                            {% if errors.wedding_taxi_model is defined %}
                                <p class="help is-danger">{{ errors.wedding_taxi_model }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}

        {% if config.booking_duration %}
            <div class="columns is-centered">
                <div class="column is-3">
                    <div class="field-label is-normal">
                        <label class="label" for="booking_duration">Duration of Booking</label>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="field-body">
                        <div class="field">
                            <div class="control has-icons-left">
                                <div class="select {{ errors.booking_duration is defined ? 'is-danger' : '' }}">
                                    <select id="booking_duration" name="booking_duration" required>
                                        {% for value, name in bookingDurationOptions %}
                                            <option value="{{ value }}" {{ (form.booking_duration is defined and value == form.booking_duration) ? 'selected' : '' }}>{{ name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="icon is-large is-left required-field">*</div>
                            </div>
                            {% if errors.booking_duration is defined %}
                                <p class="help is-danger">{{ errors.booking_duration }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}

        <div class="columns is-centered">
            <div class="column is-6">
                <h3 class="subtitle is-5">{{ config.event ? 'Event' : 'UK Pick Up' }} Details</h3>
            </div>
        </div>

        <div class="columns is-centered">
            <div class="column is-3">
                <div class="field-label is-normal">
                    <label class="label" for="outward_pick_up_date">{{ config.event ? 'Event' : 'Pick Up' }} Date</label>
                </div>
            </div>
            <div class="column is-3">
                <div class="field-body">
                    <div class="field">
                        <div class="control has-icons-left">
                            <input class="input {{ errors.outward_pick_up_date is defined ? 'is-danger' : '' }}" type="date" id="outward_pick_up_date" name="outward_pick_up_date" value="{{ form.outward_pick_up_date ?? '' }}" min="{{ today|date('Y-m-d') }}">
                            <span class="icon is-large is-left required-field">*</span>
                        </div>
                        {% if errors.outward_pick_up_date is defined %}
                            <p class="help is-danger">{{ errors.outward_pick_up_date }}</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <div class="columns is-centered">
            <div class="column is-3">
                <div class="field-label is-normal">
                    <label class="label" for="outward_pick_up_time_hour">{{ config.event ? 'Event' : 'Pick Up' }} Time (Hour)</label>
                </div>
            </div>
            <div class="column is-3">
                <div class="field-body">
                    <div class="field">
                        <div class="control has-icons-left">
                            <div class="select {{ errors.outward_pick_up_time_hour is defined ? 'is-danger' : '' }}">
                                <select id="outward_pick_up_time_hour" name="outward_pick_up_time_hour" required>
                                    <option value=""></option>
                                    {% for hour in 0..23 %}
                                        <option value="{{ hour }}" {{ (form.outward_pick_up_time_hour is defined and form.outward_pick_up_time_hour != '' and form.outward_pick_up_time_hour == hour ) ? 'selected' : '' }}>{{ "%'02.2s"|format(hour) }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="icon is-large is-left required-field">*</div>
                        </div>
                        {% if errors.outward_pick_up_time_hour is defined %}
                            <p class="help is-danger">{{ errors.outward_pick_up_time_hour }}</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <div class="columns is-centered">
            <div class="column is-3">
                <div class="field-label is-normal">
                    <label class="label" for="outward_pick_up_time_minute">{{ config.event ? 'Event' : 'Pick Up' }} Time (Minute)</label>
                </div>
            </div>
            <div class="column is-3">
                <div class="field-body">
                    <div class="field">
                        <div class="control has-icons-left">
                            <div class="select {{ errors.outward_pick_up_time_minute is defined ? 'is-danger' : '' }}">
                                <select id="outward_pick_up_time_minute" name="outward_pick_up_time_minute" required>
                                    <option value=""></option>
                                    {% for minute in 0..59 %}
                                        <option value="{{ minute }}" {{ (form.outward_pick_up_time_minute is defined and form.outward_pick_up_time_minute != '' and form.outward_pick_up_time_minute == minute ) ? 'selected' : '' }}>{{ "%'02.2s"|format(minute) }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="icon is-large is-left required-field">*</div>
                        </div>
                        {% if errors.outward_pick_up_time_minute is defined %}
                            <p class="help is-danger">{{ errors.outward_pick_up_time_minute }}</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        {% if config.common_addresses %}
            <div class="columns is-centered">
                <div class="column is-3">
                    <div class="field-label is-normal">
                        <label class="label" for="outward_pick_up_common_address">UK Common Addresses</label>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="field-body">
                        <div class="field">
                            <div class="control">
                                <div class="select">
                                    <select id="outward_pick_up_common_address" name="outward_pick_up_common_address">
                                        <option value=""></option>
                                        {% for address in commonAddresses %}
                                            <option value="{{ loop.index0 }}" {{ form.outward_pick_up_common_address is defined and form.outward_pick_up_common_address != '' and form.outward_pick_up_common_address == loop.index0 ? 'selected' : '' }}>{{ address.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}

        <div class="columns is-centered">
            <div class="column is-3">
                <div class="field-label is-normal">
                    <label class="label" for="outward_pick_up_postcode">UK Postcodes only or Please Enter Manually</label>
                </div>
            </div>
            <div class="column is-3">
                <div class="field-body">
                    <div class="field is-grouped">
                        <div class="control is-expanded has-icons-left">
                            <input class="input {{ errors.outward_pick_up_postcode is defined ? 'is-danger' : '' }}" type="text" id="outward_pick_up_postcode" name="outward_pick_up_postcode" value="{{ form.outward_pick_up_postcode ?? '' }}">
                            <span class="icon is-large is-left required-field">*</span>
                        </div>
                        <div class="control">
                            <button type="button" class="button is-info" id="outward_pick_up_postcode_button">Find Address</button>
                        </div>
                        {% if errors.outward_pick_up_postcode is defined %}
                            <p class="help is-danger">{{ errors.outward_pick_up_postcode }}</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <div class="columns is-centered hide" id="outward_pick_up_addresses_container">
            <div class="column is-3">
                <div class="field-label is-normal">
                    <label class="label">{{ config.event ? 'Event' : 'Pick Up' }} Address</label>
                </div>
            </div>
            <div class="column is-3">
                <div class="field-body">
                    <div class="field">
                        <div class="control select">
                            <select id="outward_pick_up_addresses_select">
    
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="columns is-centered hide" id="outward_pick_up_no_result_message">
            <div class="column is-6">
                Address not found, please enter manually
            </div>
        </div>

        <div class="columns is-centered">
            <div class="column is-3">
                <div class="field-label is-normal">
                    <label class="label" for="outward_pick_up_street">Address 1</label>
                </div>
            </div>
            <div class="column is-3">
                <div class="field-body">
                    <div class="field">
                        <div class="control has-icons-left">
                            <input class="input {{ errors.outward_pick_up_street is defined ? 'is-danger' : '' }}" type="text" id="outward_pick_up_street" name="outward_pick_up_street" value="{{ form.outward_pick_up_street ?? '' }}" required>
                            <span class="icon is-large is-left required-field">*</span>
                        </div>
                        {% if errors.outward_pick_up_street is defined %}
                            <p class="help is-danger">{{ errors.outward_pick_up_street }}</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <div class="columns is-centered">
            <div class="column is-3">
                <div class="field-label is-normal">
                    <label class="label" for="outward_pick_up_locality">Address 2</label>
                </div>
            </div>
            <div class="column is-3">
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <input class="input {{ errors.outward_pick_up_locality is defined ? 'is-danger' : '' }}" type="text" id="outward_pick_up_locality" name="outward_pick_up_locality" value="{{ form.outward_pick_up_locality ?? '' }}">
                        </div>
                        {% if errors.outward_pick_up_locality is defined %}
                            <p class="help is-danger">{{ errors.outward_pick_up_locality }}</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <div class="columns is-centered">
            <div class="column is-3">
                <div class="field-label is-normal">
                    <label class="label" for="outward_pick_up_town_city">Town/City</label>
                </div>
            </div>
            <div class="column is-3">
                <div class="field-body">
                    <div class="field">
                        <div class="control has-icons-left">
                            <input class="input {{ errors.outward_pick_up_town_city is defined ? 'is-danger' : '' }}" type="text" id="outward_pick_up_town_city" name="outward_pick_up_town_city" value="{{ form.outward_pick_up_town_city ?? '' }}" required>
                            <span class="icon is-large is-left required-field">*</span>
                        </div>
                        {% if errors.outward_pick_up_town_city is defined %}
                            <p class="help is-danger">{{ errors.outward_pick_up_town_city }}</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        {% if config.outward_drop_off %}
            <div class="columns is-centered">
                <div class="column is-6">
                    <h3 class="subtitle is-5">UK Drop Off Details</h3>
                </div>
            </div>

            {% if config.common_addresses %}
                <div class="columns is-centered">
                    <div class="column is-3">
                        <div class="field-label is-normal">
                            <label class="label" for="outward_drop_off_common_address">UK Common Addresses</label>
                        </div>
                    </div>
                    <div class="column is-3">
                        <div class="field-body">
                            <div class="field">
                                <div class="control">
                                    <div class="select">
                                        <select id="outward_drop_off_common_address" name="outward_drop_off_common_address">
                                            <option value=""></option>
                                            {% for address in commonAddresses %}
                                                <option value="{{ loop.index0 }}" {{ form.outward_drop_off_common_address is defined and form.outward_drop_off_common_address != '' and form.outward_drop_off_common_address == loop.index0 ? 'selected' : '' }}>{{ address.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}

            <div class="columns is-centered">
                <div class="column is-3">
                    <div class="field-label is-normal">
                        <label class="label" for="outward_drop_off_postcode">UK Postcodes only or Please Enter Manually</label>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="field-body">
                        <div class="field is-grouped">
                            <div class="control is-expanded">
                                <input class="input {{ errors.outward_drop_off_postcode is defined ? 'is-danger' : '' }}" type="text" id="outward_drop_off_postcode" name="outward_drop_off_postcode" value="{{ form.outward_drop_off_postcode ?? '' }}">
                            </div>
                            <div class="control">
                                <button type="button" class="button is-info" id="outward_drop_off_postcode_button">Find Address</button>
                            </div>
                            {% if errors.outward_drop_off_postcode is defined %}
                                <p class="help is-danger">{{ errors.outward_drop_off_postcode }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <div class="columns is-centered hide" id="outward_drop_off_addresses_container">
                <div class="column is-3">
                    <div class="field-label is-normal">
                        <label class="label">Drop Off Address</label>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="field-body">
                        <div class="field">
                            <div class="control select">
                                <select id="outward_drop_off_addresses_select">
    
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="columns is-centered hide" id="outward_drop_off_no_result_message">
                <div class="column is-6">
                    Address not found, please enter manually
                </div>
            </div>

            <div class="columns is-centered">
                <div class="column is-3">
                    <div class="field-label is-normal">
                        <label class="label" for="outward_drop_off_street">Address 1</label>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="field-body">
                        <div class="field">
                            <div class="control">
                                <input class="input {{ errors.outward_drop_off_street is defined ? 'is-danger' : '' }}" type="text" id="outward_drop_off_street" name="outward_drop_off_street" value="{{ form.outward_drop_off_street ?? '' }}">
                            </div>
                            {% if errors.outward_drop_off_street is defined %}
                                <p class="help is-danger">{{ errors.outward_drop_off_street }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <div class="columns is-centered">
                <div class="column is-3">
                    <div class="field-label is-normal">
                        <label class="label" for="outward_drop_off_locality">Address 2</label>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="field-body">
                        <div class="field">
                            <div class="control">
                                <input class="input {{ errors.outward_drop_off_locality is defined ? 'is-danger' : '' }}" type="text" id="outward_drop_off_locality" name="outward_drop_off_locality" value="{{ form.outward_drop_off_locality ?? '' }}">
                            </div>
                            {% if errors.outward_drop_off_locality is defined %}
                                <p class="help is-danger">{{ errors.outward_drop_off_locality }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <div class="columns is-centered">
                <div class="column is-3">
                    <div class="field-label is-normal">
                        <label class="label" for="outward_drop_off_town_city">Town/City</label>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="field-body">
                        <div class="field">
                            <div class="control">
                                <input class="input {{ errors.outward_drop_off_town_city is defined ? 'is-danger' : '' }}" type="text" id="outward_drop_off_town_city" name="outward_drop_off_town_city" value="{{ form.outward_drop_off_town_city ?? '' }}">
                            </div>
                            {% if errors.outward_drop_off_town_city is defined %}
                                <p class="help is-danger">{{ errors.outward_drop_off_town_city }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}

        {% if config.return_journey %}
            <div class="columns is-centered">
                <div class="column is-6">
                    <h2 class="subtitle is-4">Return Journey</h2>
                </div>
            </div>

            <div class="columns is-centered">
                <div class="column is-3">
                    <div class="field-label">
                        <label class="label return-journey">I would like a return journey</label>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="field-body">
                        <div class="field">
                        <div class="control">
                            <label class="checkbox">
                            <input type="checkbox" name="reverse_outward_journey" id="reverse_outward_journey" value="1" {{ form.reverse_outward_journey is defined and form.reverse_outward_journey ? 'checked' : '' }}>
                            </label>
                        </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="return_journey_container" class="{{ form.reverse_outward_journey is defined and form.reverse_outward_journey ? '' : 'hide' }}">
                <div class="columns is-centered">
                    <div class="column is-6">
                        <h3 class="subtitle is-5">{{ config.event ? 'Event' : 'UK Pick Up' }} Details</h3>
                    </div>
                </div>

                <div class="columns is-centered">
                    <div class="column is-3">
                        <div class="field-label is-normal">
                            <label class="label" for="return_pick_up_date">{{ config.event ? 'Event' : 'Pick Up' }} Date</label>
                        </div>
                    </div>
                    <div class="column is-3">
                        <div class="field-body">
                            <div class="field">
                                <div class="control">
                                    <input class="input {{ errors.return_pick_up_date is defined ? 'is-danger' : '' }}" type="date" id="return_pick_up_date" name="return_pick_up_date" value="{{ form.return_pick_up_date ?? '' }}" min="{{ today|date('Y-m-d') }}">
                                </div>
                                {% if errors.return_pick_up_date is defined %}
                                    <p class="help is-danger">{{ errors.return_pick_up_date }}</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="columns is-centered">
                    <div class="column is-3">
                        <div class="field-label is-normal">
                            <label class="label" for="return_pick_up_time_hour">{{ config.event ? 'Event' : 'Pick Up' }} Time (Hour)</label>
                        </div>
                    </div>
                    <div class="column is-3">
                        <div class="field-body">
                            <div class="field">
                                <div class="control has-icons-left">
                                    <div class="select {{ errors.return_pick_up_time_hour is defined ? 'is-danger' : '' }}">
                                        <select id="return_pick_up_time_hour" name="return_pick_up_time_hour" required>
                                            <option value=""></option>
                                            {% for hour in 0..23 %}
                                                <option value="{{ hour }}" {{ (form.return_pick_up_time_hour is defined and form.return_pick_up_time_hour != '' and form.return_pick_up_time_hour == hour ) ? 'selected' : '' }}>{{ "%'02.2s"|format(hour) }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div class="icon is-large is-left required-field">*</div>
                                </div>
                                {% if errors.return_pick_up_time_hour is defined %}
                                    <p class="help is-danger">{{ errors.return_pick_up_time_hour }}</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
        
                <div class="columns is-centered">
                    <div class="column is-3">
                        <div class="field-label is-normal">
                            <label class="label" for="return_pick_up_time_minute">{{ config.event ? 'Event' : 'Pick Up' }} Time (Minute)</label>
                        </div>
                    </div>
                    <div class="column is-3">
                        <div class="field-body">
                            <div class="field">
                                <div class="control has-icons-left">
                                    <div class="select {{ errors.return_pick_up_time_minute is defined ? 'is-danger' : '' }}">
                                        <select id="return_pick_up_time_minute" name="return_pick_up_time_minute" required>
                                            <option value=""></option>
                                            {% for minute in 0..59 %}
                                                <option value="{{ minute }}" {{ (form.return_pick_up_time_minute is defined and form.return_pick_up_time_minute != '' and form.return_pick_up_time_minute == minute ) ? 'selected' : '' }}>{{ "%'02.2s"|format(minute) }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div class="icon is-large is-left required-field">*</div>
                                </div>
                                {% if errors.return_pick_up_time_minute is defined %}
                                    <p class="help is-danger">{{ errors.return_pick_up_time_minute }}</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                {% if config.common_addresses %}
                    <div class="columns is-centered">
                        <div class="column is-3">
                            <div class="field-label is-normal">
                                <label class="label" for="return_pick_up_common_address">UK Common Addresses</label>
                            </div>
                        </div>
                        <div class="column is-3">
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <div class="select">
                                            <select id="return_pick_up_common_address" name="return_pick_up_common_address">
                                                <option value=""></option>
                                                {% for address in commonAddresses %}
                                                    <option value="{{ loop.index0 }}" {{ form.return_pick_up_common_address is defined and form.return_pick_up_common_address != '' and form.return_pick_up_common_address == loop.index0 ? 'selected' : '' }}>{{ address.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}

                <div class="columns is-centered">
                    <div class="column is-3">
                        <div class="field-label is-normal">
                            <label class="label" for="return_pick_up_postcode">UK Postcodes only or Please Enter Manually</label>
                        </div>
                    </div>
                    <div class="column is-3">
                        <div class="field-body">
                            <div class="field is-grouped">
                                <div class="control is-expanded">
                                    <input class="input {{ errors.return_pick_up_postcode is defined ? 'is-danger' : '' }}" type="text" id="return_pick_up_postcode" name="return_pick_up_postcode" value="{{ form.return_pick_up_postcode ?? '' }}">
                                </div>
                                <div class="control">
                                    <button type="button" class="button is-info" id="return_pick_up_postcode_button">Find Address</button>
                                </div>
                                {% if errors.return_pick_up_postcode is defined %}
                                    <p class="help is-danger">{{ errors.return_pick_up_postcode }}</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="columns is-centered hide" id="return_pick_up_addresses_container">
                    <div class="column is-3">
                        <div class="field-label is-normal">
                            <label class="label">{{ config.event ? 'Event' : 'Pick Up' }} Address</label>
                        </div>
                    </div>
                    <div class="column is-3">
                        <div class="field-body">
                            <div class="field">
                                <div class="control select">
                                    <select id="return_pick_up_addresses_select">
        
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
    
                <div class="columns is-centered hide" id="return_pick_up_no_result_message">
                    <div class="column is-6">
                        Address not found, please enter manually
                    </div>
                </div>

                <div class="columns is-centered">
                    <div class="column is-3">
                        <div class="field-label is-normal">
                            <label class="label" for="return_pick_up_street">Address 1</label>
                        </div>
                    </div>
                    <div class="column is-3">
                        <div class="field-body">
                            <div class="field">
                                <div class="control">
                                    <input class="input {{ errors.return_pick_up_street is defined ? 'is-danger' : '' }}" type="text" id="return_pick_up_street" name="return_pick_up_street" value="{{ form.return_pick_up_street ?? '' }}">
                                </div>
                                {% if errors.return_pick_up_street is defined %}
                                    <p class="help is-danger">{{ errors.return_pick_up_street }}</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="columns is-centered">
                    <div class="column is-3">
                        <div class="field-label is-normal">
                            <label class="label" for="return_pick_up_locality">Address 2</label>
                        </div>
                    </div>
                    <div class="column is-3">
                        <div class="field-body">
                            <div class="field">
                                <div class="control">
                                    <input class="input {{ errors.return_pick_up_locality is defined ? 'is-danger' : '' }}" type="text" id="return_pick_up_locality" name="return_pick_up_locality" value="{{ form.return_pick_up_locality ?? '' }}">
                                </div>
                                {% if errors.return_pick_up_locality is defined %}
                                    <p class="help is-danger">{{ errors.return_pick_up_locality }}</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="columns is-centered">
                    <div class="column is-3">
                        <div class="field-label is-normal">
                            <label class="label" for="return_pick_up_town_city">Town/City</label>
                        </div>
                    </div>
                    <div class="column is-3">
                        <div class="field-body">
                            <div class="field">
                                <div class="control">
                                    <input class="input {{ errors.return_pick_up_town_city is defined ? 'is-danger' : '' }}" type="text" id="return_pick_up_town_city" name="return_pick_up_town_city" value="{{ form.return_pick_up_town_city ?? '' }}">
                                </div>
                                {% if errors.return_pick_up_town_city is defined %}
                                    <p class="help is-danger">{{ errors.return_pick_up_town_city }}</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="columns is-centered">
                    <div class="column is-6">
                        <h3 class="subtitle is-5">UK Drop Off Details</h3>
                    </div>
                </div>

                {% if config.common_addresses %}
                    <div class="columns is-centered">
                        <div class="column is-3">
                            <div class="field-label is-normal">
                                <label class="label" for="return_drop_off_common_address">UK Common Addresses</label>
                            </div>
                        </div>
                        <div class="column is-3">
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <div class="select">
                                            <select id="return_drop_off_common_address" name="return_drop_off_common_address">
                                                <option value=""></option>
                                                {% for address in commonAddresses %}
                                                    <option value="{{ loop.index0 }}" {{ form.return_drop_off_common_address is defined and form.return_drop_off_common_address != '' and form.return_drop_off_common_address == loop.index0 ? 'selected' : '' }}>{{ address.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}

                <div class="columns is-centered">
                    <div class="column is-3">
                        <div class="field-label is-normal">
                            <label class="label" for="return_drop_off_postcode">UK Postcodes only or Please Enter Manually</label>
                        </div>
                    </div>
                    <div class="column is-3">
                        <div class="field-body">
                            <div class="field is-grouped">
                                <div class="control is-expanded">
                                    <input class="input {{ errors.return_drop_off_postcode is defined ? 'is-danger' : '' }}" type="text" id="return_drop_off_postcode" name="return_drop_off_postcode" value="{{ form.return_drop_off_postcode ?? '' }}">
                                </div>
                                <div class="control">
                                    <button type="button" class="button is-info" id="return_drop_off_postcode_button">Find Address</button>
                                </div>
                                {% if errors.return_drop_off_postcode is defined %}
                                    <p class="help is-danger">{{ errors.return_drop_off_postcode }}</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="columns is-centered hide" id="return_drop_off_addresses_container">
                    <div class="column is-3">
                        <div class="field-label is-normal">
                            <label class="label">{{ config.event ? 'Event' : 'Pick Up' }} Address</label>
                        </div>
                    </div>
                    <div class="column is-3">
                        <div class="field-body">
                            <div class="field">
                                <div class="control select">
                                    <select id="return_drop_off_addresses_select">
        
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
    
                <div class="columns is-centered hide" id="return_drop_off_no_result_message">
                    <div class="column is-6">
                        Address not found, please enter manually
                    </div>
                </div>

                <div class="columns is-centered">
                    <div class="column is-3">
                        <div class="field-label is-normal">
                            <label class="label" for="return_drop_off_street">Address 1</label>
                        </div>
                    </div>
                    <div class="column is-3">
                        <div class="field-body">
                            <div class="field">
                                <div class="control">
                                    <input class="input {{ errors.return_drop_off_street is defined ? 'is-danger' : '' }}" type="text" id="return_drop_off_street" name="return_drop_off_street" value="{{ form.return_drop_off_street ?? '' }}">
                                </div>
                                {% if errors.return_drop_off_street is defined %}
                                    <p class="help is-danger">{{ errors.return_drop_off_street }}</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="columns is-centered">
                    <div class="column is-3">
                        <div class="field-label is-normal">
                            <label class="label" for="return_drop_off_locality">Address 2</label>
                        </div>
                    </div>
                    <div class="column is-3">
                        <div class="field-body">
                            <div class="field">
                                <div class="control">
                                    <input class="input {{ errors.return_drop_off_locality is defined ? 'is-danger' : '' }}" type="text" id="return_drop_off_locality" name="return_drop_off_locality" value="{{ form.return_drop_off_locality ?? '' }}">
                                </div>
                                {% if errors.return_drop_off_locality is defined %}
                                    <p class="help is-danger">{{ errors.return_drop_off_locality }}</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="columns is-centered">
                    <div class="column is-3">
                        <div class="field-label is-normal">
                            <label class="label" for="return_drop_off_town_city">Town/City</label>
                        </div>
                    </div>
                    <div class="column is-3">
                        <div class="field-body">
                            <div class="field">
                                <div class="control">
                                    <input class="input {{ errors.return_drop_off_town_city is defined ? 'is-danger' : '' }}" type="text" id="return_drop_off_town_city" name="return_drop_off_town_city" value="{{ form.return_drop_off_town_city ?? '' }}">
                                </div>
                                {% if errors.return_drop_off_town_city is defined %}
                                    <p class="help is-danger">{{ errors.return_drop_off_town_city }}</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}

        <div class="columns is-centered">
            <div class="column is-6">
                <h2 class="subtitle is-4">Special Instructions</h2>
            </div>
        </div>

        <div class="columns is-centered">
            <div class="column is-3">
                <div class="field-label is-normal">
                    <label class="label" for="outward_pick_up_special_instructions">Special Instructions</label>
                </div>
            </div>
            <div class="column is-3">
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <textarea class="textarea {{ errors.outward_pick_up_special_instructions is defined ? 'is-danger' : '' }}" id="outward_pick_up_special_instructions" name="outward_pick_up_special_instructions" {% if config.flight_details %}placeholder="For all airport pickups, please include your flight details so we can track your flight's arrival time."{% endif %}>{{ form.outward_pick_up_special_instructions ?? '' }}</textarea>
                        </div>
                        {% if errors.outward_pick_up_special_instructions is defined %}
                            <p class="help is-danger">{{ errors.outward_pick_up_special_instructions }}</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        {% if config.billing %}
            <div class="columns is-centered">
                <div class="column is-6">
                    <h2 class="subtitle is-4">Registered Card Billing Address</h2>

                    <p>Use the same name and address that matches your card details.</p>

                    <br>
                </div>
            </div>

            <div class="columns is-centered">
                <div class="column is-3">
                    <div class="field-label">
                        <label class="label">Use Contact and {{ config.event ? 'Event' : 'Pick Up' }} Details</label>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="field-body">
                        <div class="field">
                        <div class="control">
                            <label class="checkbox">
                            <input type="checkbox" id="billing_contact_pick_up_details">
                            </label>
                        </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="columns is-centered">
                <div class="column is-3">
                    <div class="field-label is-normal">
                        <label class="label" for="billing_name">Name</label>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="field-body">
                        <div class="field">
                            <div class="control has-icons-left">
                                <input class="input {{ errors.billing_name is defined ? 'is-danger' : '' }}" type="text" id="billing_name" name="billing_name" value="{{ form.billing_name ?? '' }}" required>
                                <span class="icon is-large is-left required-field">*</span>
                            </div>
                            {% if errors.billing_name is defined %}
                                <p class="help is-danger">{{ errors.billing_name }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <div class="columns is-centered">
                <div class="column is-3">
                    <div class="field-label is-normal">
                        <label class="label" for="billing_company_name">Company Name</label>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="field-body">
                        <div class="field">
                            <div class="control">
                                <input class="input {{ errors.billing_company_name is defined ? 'is-danger' : '' }}" type="text" id="billing_company_name" name="billing_company_name" value="{{ form.billing_company_name ?? '' }}">
                            </div>
                            {% if errors.billing_company_name is defined %}
                                <p class="help is-danger">{{ errors.billing_company_name }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <div class="columns is-centered">
                <div class="column is-3">
                    <div class="field-label is-normal">
                        <label class="label" for="billing_postcode">UK Postcodes only or Please Enter Manually</label>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="field-body">
                        <div class="field is-grouped">
                            <div class="control is-expanded has-icons-left">
                                <input class="input {{ errors.billing_postcode is defined ? 'is-danger' : '' }}" type="text" id="billing_postcode" name="billing_postcode" value="{{ form.billing_postcode ?? '' }}" required>
                                <span class="icon is-large is-left required-field">*</span>
                            </div>
                            <div class="control">
                                <button type="button" class="button is-info" id="billing_postcode_button">Find Address</button>
                            </div>
                            {% if errors.billing_postcode is defined %}
                                <p class="help is-danger">{{ errors.billing_postcode }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <div class="columns is-centered hide" id="billing_addresses_container">
                <div class="column is-3">
                    <div class="field-label is-normal">
                        <label class="label">{{ config.event ? 'Event' : 'Pick Up' }} Address</label>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="field-body">
                        <div class="field">
                            <div class="control select">
                                <select id="billing_addresses_select">
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="columns is-centered hide" id="billing_no_result_message">
                <div class="column is-6">
                    Address not found, please enter manually
                </div>
            </div>

            <div class="columns is-centered">
                <div class="column is-3">
                    <div class="field-label is-normal">
                        <label class="label" for="billing_street">Address 1</label>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="field-body">
                        <div class="field">
                            <div class="control has-icons-left">
                                <input class="input {{ errors.billing_street is defined ? 'is-danger' : '' }}" type="text" id="billing_street" name="billing_street" value="{{ form.billing_street ?? '' }}" required>
                                <span class="icon is-large is-left required-field">*</span>
                            </div>
                            {% if errors.billing_street is defined %}
                                <p class="help is-danger">{{ errors.billing_street }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <div class="columns is-centered">
                <div class="column is-3">
                    <div class="field-label is-normal">
                        <label class="label" for="billing_locality">Address 2</label>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="field-body">
                        <div class="field">
                            <div class="control">
                                <input class="input {{ errors.billing_locality is defined ? 'is-danger' : '' }}" type="text" id="billing_locality" name="billing_locality" value="{{ form.billing_locality ?? '' }}">
                            </div>
                            {% if errors.billing_locality is defined %}
                                <p class="help is-danger">{{ errors.billing_locality }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <div class="columns is-centered">
                <div class="column is-3">
                    <div class="field-label is-normal">
                        <label class="label" for="billing_town_city">Town/City</label>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="field-body">
                        <div class="field">
                            <div class="control has-icons-left">
                                <input class="input {{ errors.billing_town_city is defined ? 'is-danger' : '' }}" type="text" id="billing_town_city" name="billing_town_city" value="{{ form.billing_town_city ?? '' }}" required>
                                <span class="icon is-large is-left required-field">*</span>
                            </div>
                            {% if errors.billing_town_city is defined %}
                                <p class="help is-danger">{{ errors.billing_town_city }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <div class="columns is-centered">
                <div class="column is-3">
                    <div class="field-label is-normal">
                        <label class="label" for="billing_country">Country</label>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="field-body">
                        <div class="field">
                            <div class="control has-icons-left">
                                <div class="select {{ errors.billing_country is defined ? 'is-danger' : '' }}">
                                    <select id="billing_country" name="billing_country" required>
                                        <option value=""></option>
                                        {% for value, name in countryOptions %}
                                            <option value="{{ value }}" {{ (form.billing_country is defined and value == form.billing_country) or (form.billing_country is not defined and value == 'GB') ? 'selected' : '' }}>{{ name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="icon is-large is-left required-field">*</div>
                            </div>
                            {% if errors.billing_country is defined %}
                                <p class="help is-danger">{{ errors.billing_country }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <div class="columns is-centered">
                <div class="column is-3">
                    <div class="field-label is-normal">
                        <label class="label" for="billing_state">State (US only)</label>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="field-body">
                        <div class="field">
                            <div class="control">
                                <div class="select {{ errors.billing_state is defined ? 'is-danger' : '' }}">
                                    <select id="billing_state" name="billing_state">
                                        <option value=""></option>
                                        {% for value, name in stateOptions %}
                                            <option value="{{ value }}" {{ form.billing_state is defined and value == form.billing_state ? 'selected' : '' }}>{{ name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            {% if errors.billing_state is defined %}
                                <p class="help is-danger">{{ errors.billing_state }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}

        <div class="columns is-centered">
            <div class="column is-3">
                <div class="field-label is-normal">
                    <label class="label" for="how_find_us">How did you find us?</label>
                </div>
            </div>
            <div class="column is-3">
                <div class="field-body">
                    <div class="field">
                        <div class="control has-icons-left">
                            <div class="select {{ errors.how_find_us is defined ? 'is-danger' : '' }}">
                                <select id="how_find_us" name="how_find_us" required>
                                    <option value=""></option>
                                    {% for value, name in howFindUsOptions %}
                                        <option value="{{ value }}" {{ form.how_find_us is defined and value == form.how_find_us ? 'selected' : '' }}>{{ name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="icon is-large is-left required-field">*</div>
                        </div>
                        {% if errors.how_find_us is defined %}
                            <p class="help is-danger">{{ errors.how_find_us }}</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <div class="columns is-centered">
            <div class="column is-3">
                <div class="field-label">
                    <label class="label">I have read the full terms and conditions and hereby agree</label>
                </div>
            </div>
            <div class="column is-3">
                <div class="field-body">
                    <div class="field">
                    <div class="control">
                        <label class="checkbox">
                        <input type="checkbox" id="terms_and_conditions" name="terms_and_conditions" {{ form.terms_and_conditions is defined and form.terms_and_conditions ? 'checked' : '' }} required> <a class="terms-and-conditions" href="https://www.londonblacktaxis.net/terms-conditions/" target="_blank">Full Terms and Conditions</a> <span class="required-field">*</span>
                        </label>
                        {% if errors.terms_and_conditions is defined %}
                        <p class="help is-danger">{{ errors.terms_and_conditions }}</p>
                        {% endif %}
                    </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="columns is-centered">
            <div class="column is-3">
                <div class="field-label is-normal">
                    <label class="label" for="captcha_answer">Please confirm you are not a robot by answering this arithmetic question: what is {{ form.captcha_question_parts[0] ?? '' }} + {{ form.captcha_question_parts[1] ?? '' }}?</label>
                </div>
            </div>
            <div class="column is-3">
                <div class="field-body">
                    <div class="field">
                        <div class="control has-icons-left">
                            <input class="input {{ errors.captcha_answer is defined ? 'is-danger' : '' }}" type="number" id="captcha_answer" name="captcha_answer" value="{{ form.captcha_answer ?? '' }}">
                            <span class="icon is-large is-left required-field">*</span>
                            <input type="hidden" name="captcha_question" value="{{ form.captcha_question ?? '' }}">
                        </div>
                        {% if errors.captcha_answer is defined %}
                            <p class="help is-danger">{{ errors.captcha_answer }}</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <div class="columns is-centered">
            <div class="column is-6 has-text-centered">
                <div class="field">
                    <div class="control">
                        {% if config.test %}
                            <input type="hidden" name="test" value="1">
                        {% endif %}
                        <input type="hidden" name="country_default" id="country_default" value="GB">
                        <button class="button is-info" type="submit">Submit</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="columns is-centered">
            <div class="column is-6 has-text-centered booking-form-footer">
                <p class="has-text-weight-bold has-text-red">Please do not submit this form after 21.00pm (UK Time) if you are requesting a booking before 10.00am the next morning</p>

                {% if config.booking %}
                    <p class="has-text-weight-bold">You will receive a copy of this form shortly. Your booking is not confirmed until you receive a confirmation email from us</p>
                    <p>
                        After submitting this form, you will be taken to Sage Pay's secure payment server to pay the required £5 deposit (<span class="has-text-red">£25 for tours</span>) to confirm your booking<br>
                        Your deposit will be refunded if we cannot supply your taxi. We do not take cash
                    </p>
                {% else %}
                    <p>You will receive a copy of this form shortly</p>
                    <p>As soon as humanly possible, we will send you a quotation of costs to your email address</p>
                {% endif %}
                <p class="has-text-weight-bold">All details are secure and will not be passed to a 3rd party</p>
                {% if config.booking %}
                    <p>
                        <img src="images/logos/visa.jpg" width="72" height="52" alt="Visa logo"><img src="images/logos/visa-debit.jpg" width="72" height="52" alt="Visa Debit logo"><img src="images/logos/mastercard.jpg" width="72" height="52" alt="MasterCard logo"><img src="images/logos/amex.jpg" width="72" height="52" alt="American Express logo">
                    </p>
                    <p>For normal journeys (other than our Special Services such as Wedding Taxis), we have a minimum fare of £30 + 12.5% administration fee + £2 booking fee.</p>
                    <p>For our Special Services such as Wedding Taxis, our charges are detailed on our web pages.</p>
                    <p>No VAT is charged as we are currently not required to be VAT registered.</p>
                    <p>&quot;Meet & Greet&quot; pick-ups may incur car park fees. Airport/seaport pick-ups and drop-offs may incur any fees imposed by the airport/seaport.</p>
                {% endif %}
                <p>Our full Terms & Conditions can be found at this link:</p>
                <p><a href="https://www.londonblacktaxis.net/terms-conditions/" target="_blank">Full Terms and Conditions</a></p>
                <p>
                    London Black Taxis.net (and our affiliated websites) are trading names of Coleman Projects Limited<br>
                    Coleman Projects Limited is a company registered in England and Wales with company number 04814240<br>
                    Registered Office: 19-20 Bourne Court, Southend Road, IG8 8HB
                </p>
            </div>
        </div>
    </form>
{% endblock %}