@extends('website.layout.app')
@section('title', 'Contact Us - Invinaa Associates')
@section('meta_description', 'We are leading tax law firm in Delhi offering a wide range of tax advisory services. Contact us at: +91- 9354179311 or email at: info@lexntax.com.')
@section('content')
    <!-- Header Start -->
    <div class="container-fluid bg-breadcrumb">
        <div class="container text-center py-5" style="max-width: 900px">
            <h3 class="text-white display-3 mb-4 wow fadeInDown" data-wow-delay="0.1s">
                Contact Us
            </h3>

            <ol class="breadcrumb justify-content-center text-white mb-0 wow fadeInDown" data-wow-delay="0.3s">
                <li class="breadcrumb-item">
                    <a href="index.html" class="text-white">Home</a>
                </li>

                <li class="breadcrumb-item active text-secondary">Contact Us</li>
            </ol>
        </div>
    </div>
    <!-- Header End -->

    <div class="container-fluid contact overflow-hidden py-5">
        <div class="container py-5">
            <div class="row g-5">
                <!-- LEFT SIDE -->
                <div class="col-lg-6 wow fadeInLeft" data-wow-delay="0.1s">
                    <!-- Sub Heading -->
                    <div class="sub-style">
                        <h5 class="sub-title text-primary pe-3">Quick Contact</h5>
                    </div>

                    <!-- Main Heading -->
                    <h3 class="display-6 fw-bold mb-4">Need Assistance?</h3>

                    <!-- Contact Card -->
                    <div class="card shadow-sm border-0 rounded-4 p-4 mt-3">
                        <!-- LOCATION -->
                        <div class="d-flex align-items-start mb-4">
                            <div class="icon-box bg-primary bg-opacity-10 text-primary p-3 rounded-3 me-3 shadow-sm">
                                <i class="fas fa-map-marker-alt fa-lg text-white"></i>
                            </div>
                            <div>
                                <h5 class="fw-bold mb-1">Location</h5>
                                <p class="mb-0 text-muted lh-sm">
                                    {{ $setting->address ?? '123 Street, New Delhi, India' }}
                                </p>
                            </div>
                        </div>

                        <!-- PHONE -->
                        <div class="d-flex align-items-start mb-4">
                            <div class="icon-box bg-primary bg-opacity-10 text-primary p-3 rounded-3 me-3 shadow-sm">
                                <i class="fas fa-phone-alt fa-lg text-white"></i>
                            </div>
                            <div>
                                <h5 class="fw-bold mb-1">Phone</h5>
                                <a href="tel:+919876543210" class="fs-5 text-primary fw-semibold text-decoration-none">
                                    {{ $setting->phone ?? '+91 98765 43210' }}
                                </a>
                            </div>
                        </div>

                        <!-- EMAIL -->
                        <div class="d-flex align-items-start mb-4">
                            <div class="icon-box bg-primary bg-opacity-10 text-primary p-3 rounded-3 me-3 shadow-sm">
                                <i class="fas fa-envelope fa-lg text-white"></i>
                            </div>
                            <div>
                                <h5 class="fw-bold mb-1">Email</h5>
                                <a href="mailto:invinaa@gmail.com"
                                    class="fs-5 text-primary fw-semibold text-decoration-none">
                                    {{ $setting->email ?? 'invinaa@gmail.com' }}
                                </a>
                            </div>
                        </div>

                        <hr class="my-3" />

                        <!-- FOLLOW US -->
                        <h5 class="fw-bold mb-3">Follow Us</h5>

                        <!-- SOCIAL ICONS -->
                        <div class="d-flex">
                            <a class="btn btn-primary btn-social rounded-circle me-2 shadow-sm"
                                href="{{ $setting->facebook_link ?? '#' }}">
                                <i class="fab fa-facebook-f"></i>
                            </a>
                            <a class="btn btn-primary btn-social rounded-circle me-2 shadow-sm"
                                href="{{ $setting->twitter_link ?? '#' }}">
                                <i class="bi bi-twitter-x"></i>
                            </a>
                            <a class="btn btn-primary btn-social rounded-circle me-2 shadow-sm"
                                href="{{ $setting->instagram_link ?? '#' }}">
                                <i class="fab fa-instagram"></i>
                            </a>
                            <a class="btn btn-primary btn-social rounded-circle shadow-sm"
                                href="{{ $setting->linkedin_link ?? '#' }}">
                                <i class="fab fa-linkedin-in"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- RIGHT SIDE – CONTACT FORM -->
                <div class="col-lg-6 wow fadeInRight" data-wow-delay="0.3s">
                    <div class="sub-style">
                        <h5 class="sub-title text-primary pe-3">Let’s Connect</h5>
                    </div>

                    <h3 class="display-6 mb-4">Send Us a Message</h3>

                    <h4 class="lh-base mb-4">
                        Fill out the form below and our team will get in touch with you
                        shortly.
                    </h4>

                    <form action="{{ route('contact_submit') }}" method="POST" class="contactUs2">
                        @csrf
                        <div class="row g-4">

                            <div class="col-lg-12 col-xl-6">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="name" name="name" placeholder="Your Name"
                                        oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')" />
                                    <label for="name">Enter Name</label>
                                </div>
                            </div>

                            <div class="col-lg-12 col-xl-6">
                                <div class="form-floating">
                                    <input type="email" class="form-control" id="email" name="email" placeholder="Your Email"
                                        oninput="this.value = this.value.replace(/[^a-zA-Z0-9@._-]/g, '')" />
                                    <label for="email">Enter Email</label>
                                </div>
                            </div>


                            <div class="col-lg-12 col-xl-6">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="phone" name="mobile" placeholder="Phone" maxlength="10"
                                        oninput="this.value = this.value.replace(/[^0-9]/g, '')" maxlength="10" />
                                    <label for="phone">Enter Phone</label>
                                </div>
                            </div>

                            <div class="col-lg-12 col-xl-6">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="subject" name="subject" placeholder="Subject"
                                        oninput="this.value = this.value.replace(/[^a-zA-Z\s,]/g, '')" maxlength="100" />
                                    <label for="subject">Subject</label>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="form-floating">
                                    <textarea class="form-control" placeholder="Leave a message here" name="message" id="message"
                                        style="height: 160px" oninput="this.value = this.value.replace(/[^a-zA-Z\s,]/g, '')"
                                        maxlength="250"></textarea>
                                    <label for="message">Message</label>
                                </div>
                            </div>

                            <div class="col-12">
                                <button type="submit" class="btn btn-primary w-100 py-3">
                                    Send Message
                                </button>
                            </div>

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