@extends('layouts.master')

@section('title', 'Trew India Pvt Ltd')

@section('content')


    <main class="main">

        <!-- breadcrumb -->
        <div class="site-breadcrumb">
            <div class="site-breadcrumb-bg" style="background:#d8f5fd"></div>
            <div class="container">
                <div class="site-breadcrumb-wrap">
                    <h4 class="breadcrumb-title">Contact Us</h4>
                    <ul class="breadcrumb-menu">
                        <li><a href="index-2.html"><i class="far fa-home"></i> Home</a></li>
                        <li class="active">Contact Us</li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- breadcrumb end -->


        <!-- contact area -->
        <div class="contact-area py-5">
            <div class="container">
                <div class="contact-wrapper">
                    <div class="row">
                        <!-- Contact Info -->
                        <div class="col-lg-4">
                            <div class="contact-info">
                                <div class="contact-info-icon"><i class="fal fa-map-marker-alt"></i></div>
                                <div class="contact-info-content">
                                    <h5>Office Address</h5>
                                    <p>83(69), Vikas Nagar Industrial Area, Meerut Road Ghaziabad Near Raj Nagar Extention.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <div class="contact-info">
                                <div class="contact-info-icon"><i class="fal fa-phone"></i></div>
                                <div class="contact-info-content">
                                    <h5>Call Us</h5>
                                    <p>+91 9599186606</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <div class="contact-info">
                                <div class="contact-info-icon"><i class="fal fa-envelope"></i></div>
                                <div class="contact-info-content">
                                    <h5>Email Us</h5>
                                    <p><a href="mailto:trew.india@gmail.com">trew.india@gmail.com</a></p>
                                </div>
                            </div>
                        </div>

                        <!-- Contact Form -->
                        <div class="col-md-6 align-self-center mt-4">
                            <div class="contact-form">
                                <div class="contact-form-header">
                                    <h2>Get In Touch</h2>
                                </div>

                                <!-- Laravel Form -->
                                <form method="POST" action="{{ route('contact.submit') }}" id="contact-form">
                                    @csrf
                                    <div class="row">
                                        <!-- Name -->
                                        <div class="col-md-6 mb-3">
                                            <input type="text" class="form-control" name="name"
                                                placeholder="Your Name" required>
                                        </div>

                                        <!-- Phone -->
                                        <div class="col-md-6 mb-3">
                                            <input type="text" class="form-control" name="phone"
                                                placeholder="Your Phone Number" required>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <!-- Email -->
                                        <div class="col-md-6 mb-3">
                                            <input type="email" class="form-control" name="email"
                                                placeholder="Your Email" required>
                                        </div>

                                        <!-- Subject Dropdown -->
                                        <div class="col-md-6 mb-3 position-relative">
                                            <div class="select-wrapper">
                                                <select class="form-control" name="subject" required>
                                                    <option value="" disabled selected>Select Service Type</option>
                                                    <option value="Housekeeping">Housekeeping</option>
                                                    <option value="Kitchen Care">Kitchen Care</option>
                                                    <option value="Floor Cleaner">Floor Cleaner</option>
                                                    <option value="Laundry">Laundry</option>
                                                    <option value="Personal Care">Personal Care</option>
                                                    <option value="Others">Others</option>
                                                </select>
                                               
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Message -->
                                    <div class="form-group mb-3">
                                        <textarea name="message" cols="30" rows="5" class="form-control" placeholder="Write Your Message" required></textarea>
                                    </div>

                                    <!-- Submit Button -->
                                    <button type="submit" class="theme-btn mb-3">
                                        <i class="far fa-paper-plane"></i> Send Message
                                    </button>

                                    <!-- Success Message -->
                                    @if (session('success'))
                                        <div class="alert alert-success mt-3">
                                            {{ session('success') }}
                                        </div>
                                    @endif
                                </form>
                            </div>
                        </div>

                        <!-- Google Map -->
                        <div class="col-md-6 align-self-center mt-4">
                            <div class="contact-map">
                                <iframe
                                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d20887.891168968657!2d77.07826160071126!3d28.62939420091004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6e31595dab23a319%3A0x7dd5f7dcea5866d1!2sMyra%20luxe%20Aesthetics!5e0!3m2!1sen!2sin!4v1756108963066!5m2!1sen!2sin"
                                    style="border-radius: 10px; width:100%; height:490px;" allowfullscreen=""
                                    loading="lazy">
                                </iframe>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- end contact area -->




    </main>

    <style>
        .form-control {
            padding: 12px 12px;
        }
    </style>



@endsection