@extends('layouts.frontend')

@section('content')
    <section class="contactPageTop">
        <img class="img-fluid mainImage" src="{{ asset('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:+441312858082'>0131 285 8082</a>
                    </p>
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2234.3241909438643!2d-3.197123623282723!3d55.94375277726746!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4887c79577dbb415%3A0xa48a9f1bb0ec688a!2sPuffin&#39;%20Rooms%20-%20Edinburgh!5e0!3m2!1sen!2suk!4v1700563225194!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-us-store') }}" 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