@extends('frontend.layouts.main')
@section('content')
    <section class="intro-hero">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="text-center">Lets Start Something Great!</h2>
                </div>
            </div>
        </div>
    </section>

    <div class="contact-block">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <form action="{{ route('contact.store') }}" method="POST"
                                        enctype="multipart/form-data">
                                        @csrf
                                        <div class="row">
                                            <div class="col-md-8">
                                                <label for="name" class="enquiry form-label">Name</label>
                                                <input type="text" name="name" class="input form-control mb-4"
                                                    placeholder="Your Name *" required="">
                                            </div>
                                            <div class="col-md-8">
                                                <label for="email" class="enquiry form-label">Email</label>
                                                <input type="email" name="email" class="input form-control mb-4"
                                                    placeholder="Your Email *" required="">
                                            </div>
                                            <div class="col-md-8">
                                                <label for="number" class="enquiry form-label">Mobile</label>
                                                <input type="text" maxlength="10" name="number"
                                                    class="input form-control mb-4" placeholder="Your Mobile*"
                                                    onkeypress="return event.charCode >= 48 && event.charCode <= 57"
                                                    id="number">
                                            </div>
                                            <div class="col-md-8">
                                                <label for="subject" class="enquiry form-label">Subject</label>
                                                <input type="text" name="subject" class="input form-control mb-4"
                                                    placeholder="Your Subject" required="">
                                            </div>
                                            <div class="col-md-8 ">
                                                <label for="message" class="enquiry form-label">Message</label>
                                                <textarea name="message" cols="40" rows="4" class="input form-control mb-4" placeholder="Message"
                                                    required=""></textarea>
                                            </div>

                                            <div class=" send-message">
                                                <button type="submit"
                                                    class="enquiries">Send Message</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="detail">
                                            <div class="col-md-2">
                                                <div class="office-icon">
                                                    <i class="fa-solid fa-magnifying-glass-location"></i>
                                                </div>
                                            </div>
                                            <div class="col-md-10">
                                                <div class="name">
                                                    <h4>{{ $contact->office_name_1 }}</h4>
                                                </div>
                                                <div class="office-address">
                                                    <p>{{ $contact->address_1 }}.</p>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="row">
                                        <div class="detail">
                                            <div class="col-md-2">
                                                <div class="office-icon">
                                                    <i class="fa-solid fa-magnifying-glass-location"></i>
                                                </div>
                                            </div>
                                            <div class="col-md-10">
                                                <div class="name">
                                                    <h4>{{ $contact->office_name_2 }}</h4>
                                                </div>
                                                <div class="office-address">
                                                    <p>{{ $contact->address_2 }}.</p>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="row">
                                        <div class="detail">
                                            <div class="col-md-2">
                                                <div class="email-icon">
                                                    <i class="fa-solid fa-envelope-open-text"></i>
                                                </div>
                                            </div>
                                            <div class="col-md-10">
                                                <div class="name">
                                                    <h4>Email :</h4>
                                                </div>
                                                <div class="email-address">
                                                    {{ $contact->email }}.
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="detail">
                                            <div class="col-md-2">
                                                <div class="mobile-icon">
                                                    <i class="fa-solid fa-phone"></i>
                                                </div>
                                            </div>
                                            <div class="col-md-10">
                                                <div class="name">
                                                    <h4>Mobile :</h4>
                                                </div>
                                                <div class="mobile-detail">
                                                    +91-{{ $contact->mobile }}.
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection