@extends('frontend.master')

@section('title')
    Contact Page
@endsection

@section('content')
    <!-- Start of Main -->
    <main class="main">
        <!-- Start of Page Header -->
        <div class="page-header">
            <div class="container">
                <h1 class="page-title mb-0">Contact Us</h1>
            </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('contact') }}">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>
                                        {{ @$contact->email }}
                                    </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-headphone"></i>
                                </span>
                                <div class="icon-box-content">
                                    <h4 class="icon-box-title">Phone Number</h4>
                                    <p>{{ @$contact->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>{{ @$contact->location }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- End of Contact Information section -->

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

                <section class="contact-section">
                    <div class="container">
                        <div class="row gutter-lg pb-3">
                            <div class="col-lg-10 mb-8">
                                <h4 class="title mb-3">Send Us a Message</h4>
                                <form action="{{ route('contact.message') }}" method="POST">
                                    @csrf

                                    <div class="row">
                                        <div class="col-lg-6 mt-3">
                                            <div class="form-group">
                                                <label for="username">Your Name</label>
                                                <input type="text" name="name" class="form-control">
                                                @error('name')
                                                    <strong class="text-danger">
                                                        {{ $message }}
                                                    </strong>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-lg-6 mt-3">
                                            <div class="form-group">
                                                <label for="username">Your Email</label>
                                                <input type="email" name="email" class="form-control">
                                                @error('email')
                                                    <strong class="text-danger">
                                                        {{ $message }}
                                                    </strong>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-lg-12 mt-3">
                                            <div class="form-group">
                                                <label for="username">Phone Number</label>
                                                <input type="number" name="phone" class="form-control">
                                                @error('phone')
                                                    <strong class="text-danger">
                                                        {{ $message }}
                                                    </strong>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-lg-12 mt-3">
                                            <div class="form-group">
                                                <label for="username">Subject</label>
                                                <input type="text" name="subject" class="form-control">
                                                @error('subject')
                                                    <strong class="text-danger">
                                                        {{ $message }}
                                                    </strong>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-lg-12  mt-3">
                                            <div class="form-group">
                                                <label for="message">Your Message</label>
                                                <textarea id="message" name="message" cols="30" rows="5" class="form-control"></textarea>
                                                @error('message')
                                                    <strong class="text-danger">
                                                        {{ $message }}</strong>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-lg-6 mt-3">
                                            <button type="submit" class="btn btn-dark btn-rounded">Send
                                                Now</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- End of Contact Section -->
            </div>

            <!-- Google Maps - Go to the bottom of the page to change settings and map location. -->
            @if (!empty(@$contact->map_link))
                <div style="margin-bottom: 50px;">
                    <iframe src="{{ @$contact->map_link }}" style="width: 100%; height: 450px;" frameborder="0"></iframe>
                </div>
            @endif
            <!-- End Map Section -->
        </div>
        <!-- End of PageContent -->
    </main>
    <!-- End of Main -->
@endsection