@extends('frontend.layouts.main')
@push('page-title')
    Contact us
@endpush
@section('content')
    <section class="contactPageTop">
        <img class="img-fluid mainImage" src="{{ asset('assets/images/homepage/4.jpg') }}">
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <h1>
                            Contact Us
                        </h1>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="contactPageMain">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <p>
                        If you would like to enquire about booking the Puffin' Rooms for your next event please use the form beside.  Alternatively please feel free to give us a call on <a href='tel:+441517051005'>0151 705 1005</a>
                    </p>
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2378.3493039283085!2d-2.9952227841374417!3d53.40857887999206!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487b213238d00001%3A0x7e805bf2b1f1a6f2!2sPuffin&#39;%20Rooms!5e0!3m2!1sen!2suk!4v1680606733332!5m2!1sen!2suk" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
                <div class="col-lg-6">
                    @if($errors->any())
                        <div class="flex flex-row alert alert-danger">
                            <ul>
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <form action="{{ route('contact-form-submission') }}" method="post">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <label for="">First Name *</label>
                                <input type="text" name="first_name" id="first_name" value="{{ old('first_name') }}" required>
                                @error('first_name')
                                <div class="text-danger">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="">Last Name *</label>
                                <input type="text" name="last_name" id="last_name" value="{{ old('last_name') }}" required>
                                @error('last_name')
                                <div class="text-danger">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <label for="">Email Address *</label>
                                <input type="email" name="email_address" id="email_address" value="{{ old('email_address') }}" required>
                                @error('email_address')
                                <div class="text-danger">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="">Phone Number *</label>
                                <input type="tel" name="phone_number" id="phone_number" value="{{ old('phone_number') }}" required>
                                @error('phone_number')
                                <div class="text-danger">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <label for="">Your Message *</label>
                                <textarea name="message" id="message" cols="30" rows="10">{{ old('message') }}</textarea>
                                @error('message')
                                <div class="text-danger">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="g-recaptcha" data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}"></div>
                            </div>
                            <div class="col-md-6 d-flex justify-content-end">
                                <button type="submit" class="solidGoldBtn">Send enquiry</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection