@extends('layouts.app')
@section('title', 'Members')
@section('styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('') }}assets/css/style.min.css">
@endsection
@section('content')
    <main class="main">
        <!-- Start of Page Header -->
        <div class="shop-default-banner shop-boxed-banner banner d-flex align-items-center mb-6" style="background-image: url(assets/images/star1.png);background-size:contain;background-color: #fbfbfd;height: 200px;">
                    <div class="container banner-content">
                        <h4 class="banner-subtitle text-center" style="
    font-size: 50px;
">CONTACT US</h4>

                      
                    </div>
                </div>
        <!-- End of Page Header -->

        <!-- Start of Breadcrumb -->
        <nav class="breadcrumb-nav mb-10 pb-1">
            <div class="container">
                <ul class="breadcrumb">
                    <li><a href="{{route('home')}}">Home</a></li>
                    <li>Contact Us</li>
                </ul>
            </div>
        </nav>
        <!-- End of Breadcrumb -->

        <!-- Start of PageContent -->
        <div class="page-content contact-us">
            <div class="container">
                <section class="content-title-section mb-10">
                    <h3 class="title title-center mb-3">Contact
                        Information
                    </h3>
                 
                </section>
                <!-- End of Contact Title Section -->

                <section class="contact-information-section mb-10">
                    <div class=" swiper-container swiper-theme "
                        data-swiper-options="{
                        'spaceBetween': 20,
                        'slidesPerView': 1,
                        'breakpoints': {
                            '480': {
                                'slidesPerView': 2
                            },
                            '768': {
                                'slidesPerView': 3
                            },
                            '992': {
                                'slidesPerView': 3
                            }
                        }
                    }">
                        <div class="swiper-wrapper row cols-xl-4 cols-md-3 cols-sm-2 cols-1">
                            <div class="swiper-slide icon-box text-center icon-box-primary">
                                <span class="icon-box-icon icon-email">
                                    <i class="w-icon-envelop-closed"></i>
                                </span>
                                <div class="icon-box-content">
                                    <h4 class="icon-box-title">E-mail Address</h4>
                                    <p><a  class="_cf_email_"
                                            >{{ $settings->email }}</a>
                                    </p>
                                </div>
                            </div>
                            <div class="swiper-slide icon-box text-center icon-box-primary">
                                <span class="icon-box-icon icon-headphone">
                                    <i class="w-icon-phone"></i>
                                </span>
                                <div class="icon-box-content">
                                    <h4 class="icon-box-title">Phone Number</h4>
                                    <p>{{ $settings->phone }}</p>
                                </div>
                            </div>
                            <div class="swiper-slide icon-box text-center icon-box-primary">
                                <span class="icon-box-icon icon-map-marker">
                                    <i class="w-icon-map-marker"></i>
                                </span>
                                <div class="icon-box-content">
                                    <h4 class="icon-box-title">Address</h4>
                                    <p>CHATEAU D',AMPA,IV FLOOR<br>
                                    No.37(Old No.110),Nelson manickam Road,<br>CHENNAI-600 029
                                    
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- End of Contact Information section -->

                <hr class="divider mb-10 pb-1">

                <section class="contact-section">
                    <div class="row gutter-lg pb-3">

                        <div class="col-lg-6 mb-8 col-sm-6">
                            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15545.76992543253!2d80.223078899201!3d13.071119679544255!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a52668504d9bbc9%3A0xb953c83dcd2d138a!2sChateau%20D%20Ampa%2C%20Indian%20Statistical%20Institute%2C%20Nelson%20Manickam%20Rd%2C%20Rajaram%20Mehta%20Nagar%2C%20Aminjikarai%2C%20Chennai%2C%20Tamil%20Nadu%20600029!5e0!3m2!1sen!2sin!4v1695363547118!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                           

                        </div>
                        <div class="col-lg-6 mb-8">
                            <h4 class="title mb-3">Send Us a Message</h4>
                            @if ($message = Session::get('success'))
                                <div class="address__phone-email">
                                    <h2 class="contact-form-heading page-subheader">Hi {{ $message }}.</h2>
                                </div>
                            @else
                                <form class="form contact-us-form" action="{{ route('contacts.store') }}" method="post">
                                    @csrf
                                    <div class="form-group">
                                        <label for="username">Your Name</label>
                                        <input type="text" id="name" name="name" class="form-control">
                                    </div>
                                    @error('name')
                                        <div class="alert-warning text-danger mb-2">{{ $message }}</div>
                                    @enderror
                                    <div class="form-group">
                                        <label for="email">Your Email</label>
                                        <input type="email" id="email" name="email" class="form-control">
                                        @error('email')
                                            <div class="alert-warning text-danger mb-2">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <label for="phone">Your Phone Number</label>
                                        <input type="tel" id="phone" name="phone" class="form-control"
                                            maxlength="10">
                                        @error('phone')
                                            <div class="alert-warning text-danger mb-2">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <label for="message">Your Message</label>
                                        <textarea id="message" name="message" cols="30" rows="3" class="form-control"></textarea>
                                        @error('message')
                                            <div class="alert-warning text-danger mb-2">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <button type="submit" class="btn btn-dark btn-rounded">Send Now</button>
                                </form>
                            @endif
                        </div>
                    </div>
                </section>
                <!-- End of Contact Section -->
            </div>
        </div>
        <!-- End of PageContent -->
    </main>
@endsection