{{--
    Contact form, landing page layout. Posts to /enquiry (App\Http\Controllers\ContactController),
    which validates, saves the enquiry and emails the Site settings recipients.
    Name is sent as first_name and split into first/last name on the server (App\Contact::processContact).
    reCAPTCHA v3: the script in front/partials/recaptcha.blade.php adds the token to any form
    containing a .g-recaptcha element when it is submitted.
--}}
@php
    $formId = 'contact-form-' . ($item->id ?? 'main');
    $sent = session()->has('success');
@endphp

<div class="contact-form {{ $item->classes ?? '' }} {{ extract_spacing_values($item) }}" id="{{ $formId }}">

    @if($sent)
        <div class="contact-form__message contact-form__message--success" role="status">
            <p class="contact-form__message-title">Thank you</p>
            <p>Your message has been sent. We'll be in touch soon.</p>
        </div>
    @endif

    @if($errors->any())
        <div class="contact-form__message contact-form__message--error" role="alert">
            <ul>
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="post" action="/enquiry">
        {{ csrf_field() }}
        <input type="hidden" name="form_type" value="contact">

        <div class="form-row">
            <div class="form-group col-sm-6">
                <label class="sr-only" for="{{ $formId }}-name">Name</label>
                <input id="{{ $formId }}-name" class="form-control" type="text" name="first_name"
                       value="{{ old('first_name') }}" placeholder="Name*" autocomplete="name" required>
            </div>
            <div class="form-group col-sm-6">
                <label class="sr-only" for="{{ $formId }}-phone">Phone</label>
                <input id="{{ $formId }}-phone" class="form-control" type="tel" name="phone"
                       value="{{ old('phone') }}" placeholder="Phone*" autocomplete="tel" required>
            </div>
        </div>

        <div class="form-group">
            <label class="sr-only" for="{{ $formId }}-email">Email Address</label>
            <input id="{{ $formId }}-email" class="form-control" type="email" name="email"
                   value="{{ old('email') }}" placeholder="Email Address*" autocomplete="email" required>
        </div>

        <div class="form-group">
            <label class="sr-only" for="{{ $formId }}-suburb">Project Suburb</label>
            <input id="{{ $formId }}-suburb" class="form-control" type="text" name="location"
                   value="{{ old('location') }}" placeholder="Project Suburb*" autocomplete="address-level2" required>
        </div>

        <div class="form-group">
            <label class="sr-only" for="{{ $formId }}-message">Tell Us About Your Project</label>
            <textarea id="{{ $formId }}-message" class="form-control" name="message" rows="4" maxlength="500"
                      placeholder="Tell Us About Your Project*" required>{{ old('message') }}</textarea>
        </div>

        <div class="g-recaptcha"></div>
        <p class="contact-form__recaptcha">
            This site is protected by reCAPTCHA and the Google
            <a href="https://policies.google.com/privacy" target="_blank" rel="noopener">Privacy Policy</a> and
            <a href="https://policies.google.com/terms" target="_blank" rel="noopener">Terms of Service</a> apply.
        </p>

        <button type="submit" class="btn btn-secondary contact-form__submit">Submit</button>
    </form>
</div>

@if($sent || $errors->any())
    {{-- After sending, the page reloads at the top: bring the visitor back to the form's message. --}}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.getElementById('{{ $formId }}').scrollIntoView({ block: 'center' });
        });
    </script>
@endif