@extends('layouts.site')

@section('content')
    @include('frontend.common.breadcrumb')

    <!-- Contact Section -->
    <section class="contact-page-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 mb-4">
                    <div class="contact-info-card">
                        <div class="icon-box">
                            <i class="bi bi-geo-alt"></i>
                        </div>
                        <h4>Visit Us</h4>
                        <p>{{$globalSettings['address']}}</p>
                    </div>
                </div>
                <div class="col-lg-4 mb-4">
                    <div class="contact-info-card">
                        <div class="icon-box">
                            <i class="bi bi-telephone"></i>
                        </div>
                        <h4>Call Us</h4>
                        <p>{{$globalSettings['contact_number']}}</p>
                    </div>
                </div>
                <div class="col-lg-4 mb-4">
                    <div class="contact-info-card">
                        <div class="icon-box">
                            <i class="bi bi-envelope"></i>
                        </div>
                        <h4>Email Us</h4>
                        <p>{{$globalSettings['email']}}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Form -->
    <section class="contact-form-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto">
                    <div class="form-card">
                        <h2>Send us a Message</h2>
                        <form id="contactForm">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Your Name</label>
                                    <input type="text" class="form-control" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Your Email</label>
                                    <input type="email" class="form-control" required>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Phone Number</label>
                                    <input type="tel" class="form-control">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Subject</label>
                                    <input type="text" class="form-control" required>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Message</label>
                                <textarea class="form-control" rows="6" required></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">Send Message</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Map Section -->
    <section class="map-section">
        <div class="container-fluid p-0">
            <iframe
            src="{{$globalSettings['google_map_location']}}"
                {{-- src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3651.468310614048!2d90.41163377473737!3d23.76633238816564!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755b8be6f4c0df1%3A0x99c525f64f42033e!2sBanani%2C%20Dhaka!5e0!3m2!1sen!2sbd!4v1763738223069!5m2!1sen!2sbd" --}}
                width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
        </div>
    </section>
@endsection