@extends('website.layout.master')
@section('content')
    <header class="contact  py-5">
        <div class="container">
            <h1 class="mb-4">Contact Us</h1>
            <div class="row">
                <div class="col-lg-5">
                    @if (Session::has('message'))
                        <div class="alert alert-{{ Session::get('messageType') }} alert-dismissible">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">×</button>
                            <strong>{{ Session::get('message') }} </strong>
                        </div>
                    @endif
                    <form id="contact" action="{{ route('contact.store') }}" method="POST" novalidate="novalidate"
                        data-fv-no-icon="true" class="has-validator fv-plugins-bootstrap fv-plugins-framework">
                        @csrf
                        <div><input name="contact-token" type="hidden" value="147909679662ad9c09303265.32698724"><input
                                name="contact" type="hidden" value="1"></div>
                        <fieldset>
                            <div class="form-group fv-plugins-icon-container">
                                <div class="input-group">
                                    <div class="input-group-prepend"><span class="input-group-text"><span
                                                class="fa-solid fa-user" aria-hidden="true"></span></span></div><input
                                        id="name" name="name" type="text" value="{{ old('name') }}"
                                        required="" placeholder="Name" class="form-control" aria-label="Name"
                                        autocomplete="off">
                                </div>
                                @error('name')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                                <div class="fv-plugins-message-container"></div>
                            </div>
                            <div class="form-group fv-plugins-icon-container">
                                <div class="input-group">
                                    <div class="input-group-prepend"><span class="input-group-text"><span
                                                class="fa-solid fa-envelope" aria-hidden="true"></span></span></div><input
                                        id="user_email" name="email" type="email" value="{{ old('email') }}"
                                        placeholder="E-mail Address" required="" class="form-control"
                                        aria-label="E-mail Address">
                                </div>
                                @error('email')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                                <div class="fv-plugins-message-container"></div>
                            </div>
                            <div class="form-group fv-plugins-icon-container">
                                <div class="input-group">
                                    <div class="input-group-prepend"><span class="input-group-text"><span
                                                class="fa-solid fa-phone" aria-hidden="true"></span></span></div><input
                                        id="phone" name="phone" type="number" value="{{ old('phone') }}"
                                        placeholder="Phone" data-fv-phone="" data-fv-phone-country="GB"
                                        data-fv-phone-message="Please enter a valid UK phone number" required=""
                                        class="form-control" aria-label="Phone" autocomplete="off">
                                </div>
                                @error('phone')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                                <div class="fv-plugins-message-container"></div>
                            </div>
                            <div class="form-group"><input id="account_number" name="account_no" type="text"
                                    value="{{ old('account_no') }}" placeholder="Account Number" class="form-control"
                                    aria-label="Account Number" autocomplete="off">
                                @error('account_no')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group"><label for="Message" class="form-control-label">Message</label>
                                <textarea id="Message" name="message" class="form-control some_min_height form-control">
@if (old('message'))
{{ old('message') }}
@endif
</textarea>
                                @error('message')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <div class="recaptcha-wrapper" style="min-height: 78px;">
                                    <div id="recaptcha" class="g-recaptcha"
                                        data-sitekey="6Ld5OEwUAAAAABUkQwOSMzNTPbvxKOOIg2fIP3fE"
                                        style="position: inherit; width: auto; height: auto; transform: scale(1);">
                                    </div>
                                </div><br>
                            </div>
                            <div class="form-group"><button type="submit" name="submit-btn" value="1"
                                    class="btn btn-orange btn-lg rounded">Submit</button></div>
                        </fieldset>
                        <div></div><input type="hidden">
                    </form>
                    <script id="recaptchaCallBack">
                        var recaptchaCallBack = function() {
                            setTimeout(function() {
                                if (jQuery(".g-recaptcha")[0]) {
                                    jQuery(".g-recaptcha:not('.g-invisible-recaptcha')").each(function() {
                                        var recaptchaId = jQuery(this).attr("id");
                                        grecaptcha.render(recaptchaId, {
                                            "sitekey": "6Ld5OEwUAAAAABUkQwOSMzNTPbvxKOOIg2fIP3fE",
                                            "theme": "light"
                                        });
                                    });
                                    if (typeof(scaleCaptcha) !== "undefined") {
                                        scaleCaptcha();
                                    }
                                } else {
                                    recaptchaCallBack();
                                }
                            }, 200);
                        };
                    </script>
                </div>
                <div class="col-lg-6 ml-lg-5 pt-5 compare-form lg">
                    <h2 class="text-center">Find the right storage at the right price</h2>
                    <div class="col-lg-12 pt-3">
                        <form id="visitor_search_14" action="/contact.php" method="POST"
                            class="justify-content-center visitor-search form-inline has-validator fv-plugins-bootstrap fv-plugins-framework"
                            novalidate="novalidate" data-fv-no-icon="true">
                            <div><input name="visitor_search_14-token" type="hidden"
                                    value="182441531862ad9c09301bc1.36335903"><input name="visitor_search_14"
                                    type="hidden" value="1"></div>
                            <fieldset>
                                <legend>Enter postcode or town</legend>
                                <div class="form-group fv-plugins-icon-container" style="position: relative;"><input
                                        id="postcode" name="postcode" type="text" value=""
                                        class="corners-lt postcode form-control fv-group" placeholder="e.g. SW1A"
                                        required="" aria-label="e.g. SW1A" autocomplete="off">
                                    <div class="test"><select id="distance" name="distance"
                                            class="bootstrap-select btn-white outline distance form-control">
                                            <option value="5">5 Miles</option>
                                            <option value="10">10 Miles</option>
                                            <option value="15">15 Miles</option>
                                            <option value="20">20 Miles</option>
                                        </select></div>
                                    <div class="form-group"><button type="submit" name="submit-btn" value="1"
                                            class="btn btn-orange compare outline corners-rb">Compare Now!</button></div>
                                    <div class="pac-container"></div>
                                    <div class="fv-plugins-message-container"></div>
                                </div>
                            </fieldset>
                            <div></div><input type="hidden">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <section class="py-3">
        <div class="container py-5">
            <div class="row">
                <div class="col-lg-5 col-md-6 mx-auto pb-3">
                    <div class="card h-100">
                        <div class="card-body px-3"><img class="card-img-top"
                                src="{{ asset('/webassets/imgs/faq.JPG') }}" alt="frequently asked questions">
                            <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                        </div>
                        <div class="card-footer"><a href="/faqs"
                                class="btn btn-orange btn-block btn-sml float-md-right float-sm-none mx-auto rounded">FAQ's</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5 col-md-6 mx-auto pb-3">
                    <div class="card h-100">
                        <div class="card-body px-3"><img class="card-img-top"
                                src="{{ asset('/webassets/imgs/findoutmore.JPG') }}" alt="join us">
                            <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                        </div>
                        <div class="card-footer"><a href="join-us"
                                class="btn btn-orange btn-block btn-sml float-md-right float-sm-none mx-auto rounded">Find
                                Out More</a></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection