@extends('frontend.layouts.main')

@section('main-container')
    <section>
        <div class="header-banner">
            <h2 class="header-banner-title">Contact us</h2>
        </div>
    </section>
    <section class="section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-4 border-end pe-5">
                    <div class="mb-4">
                        <h2 class="mb-3">Connect with us!</h2>
                        <p>Feel free to connect with us.</p>
                    </div>
                    @if (!empty($site->address))
                        <div class="mb-4">
                            <h5 class="mb-2 fw-bold">Address</h5>
                            <p class="mb-0">
                                {{ $site->address ? $site->address : '' }}
                            </p>
                        </div>
                    @endif
                    @if (!empty($site->phone))
                        <div class="mb-4">
                            <h5 class="mb-2 fw-bold">Contact Number</h5>
                            <p class="mb-0">
                                {{ $site->phone ? $site->phone : '' }}
                            </p>
                        </div>
                    @endif
                    @if (!empty($site->email))
                        <div>
                            <h5 class="mb-2 fw-bold">Email Address</h5>
                            <p class="mb-0">
                                {{ $site->email ? $site->email : '' }}
                            </p>
                        </div>
                    @endif
                </div>
                <div class="col-md-1"></div>
                <div class="col-md-5">

                    <form action="{{ route('frontend.contact.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-4">
                                    <label for="name" class="mb-2">Full Name</label>
                                    <input type="text" id="name" name="name" class="form-control"
                                        required="required" placeholder="Full Name" />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-4">
                                    <label for="email" class="mb-2">Email Address</label>
                                    <input type="email" id="email" name="email" class="form-control"
                                        required="required" placeholder="Email Address" />

                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-4">
                                    <label for="mobile" class="mb-2">Phone Number</label>
                                    <input type="number" maxlength="10" id="mobile" name="mobile" required="required"
                                        class="form-control" placeholder="Phone Number" />

                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-4">
                                    <label for="subject" class="mb-2">Subject</label>
                                    <input type="text" id="subject" name="subject" class="form-control"
                                        required="required" placeholder="Subject" />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-4">
                                    <label for="message" class="mb-2">Message</label>
                                    <textarea class="form-control" id="message" name="message" required="required" rows="4" placeholder="Message"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="pt-3 btn-lg">
                                    <button type="submit" class="btn btn-primary btn-lg">Send Message</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection