@extends('index')

@section('content')
    <!-- Page Title -->
    <div class="page-title dark-background" data-aos="fade">
        <div class="heading">
            <div class="container">
                <div class="row d-flex justify-content-center text-center">
                    <div class="col-lg-8">
                        <h1>Connect With Us</h1>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- End Page Title -->


    <!-- Contact Section -->
    <section id="contact" class="contact section">
        <!-- Section Title -->
        <div class="container section-title">
            <h2>Contact</h2>
            <div><span>Contact</span> <span class="description-title">Us</span></div>
        </div><!-- End Section Title -->

        <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <div class="contact-info">
                        <div class="contact-card">
                            <h3><span class="fi fi-us"></span> US Branch Office</h3>
                            <p> Connect with Our Texas Team </p>

                            <div class="contact-details">
                                <div class="contact-item">
                                    <i class="bi bi-geo-alt"></i>
                                    <div>
                                        <p>Address</p>
                                        <h4>Texas, USA</h4>
                                    </div>
                                </div>

                                <div class="contact-item">
                                    <i class="bi bi-telephone"></i>
                                    <div>
                                        <h4>Phone:</h4>
                                        <p>+1 817-966-0481</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="contact-info">
                        <div class="contact-card">
                            <h3><span class="fi fi-np"></span> Nepal Branch Office</h3>
                            <p> HQ Visit Us in Kathmandu </p>

                            <div class="contact-details">
                                <div class="contact-item">
                                    <i class="bi bi-geo-alt"></i>
                                    <div>
                                        <p>Address</p>
                                        <h4>Kathmandu, Nepal</h4>
                                    </div>
                                </div>

                                <div class="contact-item">
                                    <i class="bi bi-telephone"></i>
                                    <div>
                                        <h4>Phone:</h4>
                                        <p>+977 986-188-8856</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="contact-info">
                        <div class="contact-card">
                            <h3><span class="fi fi-us"></span> US Branch Office</h3>
                            <p> Reach Out to Virginia </p>

                            <div class="contact-details">
                                <div class="contact-item">
                                    <i class="bi bi-geo-alt"></i>
                                    <div>
                                        <p>Address</p>
                                        <h4>Virginia, USA</h4>
                                    </div>
                                </div>

                                <div class="contact-item">
                                    <i class="bi bi-telephone"></i>
                                    <div>
                                        <h4>Phone:</h4>
                                        <p>+1 757-338-3452</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="contact-info">
                        <div class="contact-card">
                            <h3>Contact</h3>
                            <p> Drop Us an Email Anytime</p>

                            <div class="contact-details mb-0">
                                <div class="contact-item">
                                    <i class="bi bi-envelope"></i>
                                    <div>
                                        <h4>Email:</h4>
                                        <p>info@crsfinancialservices.com</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="contact-info">
                        <div class="contact-card">
                            <h3>Social Media</h3>
                            <p>Follow & Engage on Social Media</p>
                            <div class="social-links">
                                <a href="#"><i class="bi bi-twitter"></i></a>
                                <a href="#"><i class="bi bi-facebook"></i></a>
                                <a href="#"><i class="bi bi-instagram"></i></a>
                                <a href="#"><i class="bi bi-linkedin"></i></a>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="col-lg-12">
                    <div class="contact-form-wrapper">
                        <form action="{{ route('contact.send') }}" method="POST" class="php-email-form">
                            @csrf
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <label for="name">Your Name</label>
                                    <input type="text" name="name" class="form-control" id="name"
                                        placeholder="John Doe" required="">
                                </div>
                                <div class="col-md-6 form-group mt-3 mt-md-0">
                                    <label for="email">Your Email</label>
                                    <input type="email" class="form-control" name="email" id="email"
                                        placeholder="john@example.com" required="">
                                </div>
                            </div>
                            <div class="form-group mt-3">
                                <label for="subject">Subject</label>
                                <input type="text" class="form-control" name="subject" id="subject"
                                    placeholder="I need your service!" required="">
                            </div>
                            <div class="form-group mt-3">
                                <label for="message">Message</label>
                                <textarea class="form-control" name="message" rows="7" placeholder="Your message here..." required=""></textarea>
                            </div>

                            <div class="my-3">
                                <div class="loading">Loading</div>
                                <div class="error-message"></div>
                                <div class="sent-message">Thank you for your message, we will get back to you.</div>
                            </div>

                            <div class="text-center">
                                <button type="submit">Send Message</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section><!-- /Contact Section -->
@endsection