@extends('layouts.frontend')
@section('meta_info')
    <title>{{ setting('site_title') }}</title>
    <meta name="description" content="{{ setting('meta_description') }}">
    <meta name="keywords" content="{{ setting('meta_keywords') }}">
    <meta name="author" content="{{ setting('meta_author') }}">
@endsection
@section('content')
    <section class="page__top pg__contact d-none d-md-block position-relative" style="background-image: url(/img/banner-contact.jpg);">
        <div class="container">
            <div class="page__head">
                <h1 class="text-white mb-0 title">GET IN TOUCH WITH US</h1>
            </div>
        </div>
    </section>

    <section class="position-relative bg-secondary">
        <div class="container position-relative zindex-2">
            <div class="row">
                <div class="col-xl-4 col-lg-5 pb-4 pb-sm-5 mb-2 mb-sm-0">
                    <div class="pe-lg-4 pe-xl-0">
                        <h1 class="pb-3 pb-md-4 mb-lg-5">Contact Us</h1>
                        <div class="d-flex align-items-start pb-3 mb-sm-1 mb-md-3">
                            <div class="bg-light text-primary rounded-circle flex-shrink-0 fs-3 lh-1 p-3">
                                <i class="bx bx-envelope"></i>
                            </div>
                            <div class="ps-3 ps-sm-4">
                                <h2 class="h4 pb-1 mb-2">Email us</h2>
                                <p class="mb-2">Please feel free to drop us a line. We will respond as soon as
                                    possible.</p>
                                <div class="btn btn-link btn-lg px-0">
                                    Leave a message
                                    <i class="bx bx-right-arrow-alt lead ms-2"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Contact form -->
                <div class="col-xl-6 col-lg-7 offset-xl-2">
                    <div class="card border-light shadow-lg py-3 p-sm-4 p-md-5">
                        <div class="bg-dark position-absolute top-0 start-0 w-100 h-100 rounded-3 d-none d-dark-mode-block"></div>
                        <div class="card-body position-relative zindex-2">
                            <h2 class="card-title pb-3 mb-4">Have any Query?</h2>
                            @if (session('success'))
                                <div class="alert alert-success" role="alert">
                                    {{ session('success') }}
                                </div>
                            @endif

                            @if (session('status'))
                                <div class="alert alert-success" role="alert">
                                    {{ session('status') }}
                                </div>
                            @endif

                            <form class="row needs-validation " method="POST" action="{{ route('message') }}">
                                @csrf
                                <div class="col-12">
                                    <label for="fn" class="form-label fs-base">Full Name <span
                                                class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="fn" name="name"
                                           value="{{ old('name') }}" maxlength="30" required>
                                    @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-12">
                                    <label for="email" class="form-label fs-base">Email Address</label>
                                    <input type="email" class="form-control" id="email" name="email"
                                           value="{{ old('email') }}" maxlength="100" required>
                                    @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-12">
                                    <label for="email" class="form-label fs-base">Message</label>
                                    <textarea id="message" class="form-control" rows="4" name="message" maxlength="300"
                                              required>{{ old('message') }}</textarea>
                                    @error('message')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-12 pt-2 pt-sm-3">
                                    <button type="submit" class="btn btn-outline-primary">
                                        Send Message
                                        <i class="bx bx-right-arrow-alt fs-xl ms-2 me-n1"></i>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="position-absolute bottom-0 start-0 w-100 bg-light" style="height: 8rem;"></div>
    </section>
@endsection