@extends('frontend.layout.applayout')
@section('title', 'Contact-us')
@section('main-content')
    <div class="container py-5">
        <div class="row mb-5">
            <div class="col-lg-12 text-center">
                <h1>Contact Us</h1>
            </div>
        </div>
        <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2885.963611862979!2d-79.67158549999999!3d43.66972659999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882b2f8c000eaaab%3A0x5080812a1b81fe24!2sVersova%20Inc.!5e0!3m2!1sen!2sin!4v1735794642961!5m2!1sen!2sin"
            width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"></iframe>

        <div class="row bg-light p-4 rounded">
            <div class="col-lg-6 col-md-6 mb-4">
                <div class="contact_wrapper">
                    <address>
                        <h5>Address</h5>
                        <strong></strong> {{ $setting->address }}<br>
                    </address>
                    <h5>Hours :</h5>
                    <div style="margin-left: 60px; font-size: 16px; width: 50%;">
                        <table style="width: 100%; border-collapse: collapse; line-height: 1.8;">
                            <tr>
                                <td style="width: 50%;"><strong>Monday</strong></td>
                                <td>08:30 AM - 04:30 PM</td>
                            </tr>
                            <tr>
                                <td><strong>Tuesday</strong></td>
                                <td>08:30 AM - 04:30 PM</td>
                            </tr>
                            <tr>
                                <td><strong>Wednesday</strong></td>
                                <td>08:30 AM - 04:30 PM</td>
                            </tr>
                            <tr>
                                <td><strong>Thursday</strong></td>
                                <td>08:30 AM - 04:30 PM</td>
                            </tr>
                            <tr>
                                <td><strong>Friday</strong></td>
                                <td>08:30 AM - 04:30 PM</td>
                            </tr>
                            <tr>
                                <td><strong>Saturday</strong></td>
                                <td>Closed</td>
                            </tr>
                            <tr>
                                <td><strong>Sunday</strong></td>
                                <td>Closed</td>
                            </tr>
                        </table>
                    </div>
                    <address>

                        <strong>Email:</strong> <a href="mailto:{{ $setting->email }}">{{ $setting->email }}</a><br>
                        <strong>Tel:</strong> <a href="tel:{{ $setting->phone }}">{{ $setting->phone }}</a>
                    </address>
                </div>
            </div>

            <div class="col-lg-6 col-md-6">
                <div class="contact_wrapper_1">
                    <form action="{{ route('guest.contact-us') }}" method="POST">
                        @csrf
                        <div class="form-group mb-3">
                            <label for="name">Name <span class="text-danger">*</span></label>
                            <input type="text" id="name" name="name" class="form-control"
                                placeholder="Enter your name" required>
                            @error('name')
                                <span style="color: red; font-size:13px;">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group mb-3">
                            <label for="email">Email <span class="text-danger">*</span></label>
                            <input type="email" id="email" name="email" class="form-control"
                                placeholder="Enter your email" required>

                        </div>

                        <div class="form-group mb-3">
                            <label for="phone">Phone <span class="text-danger">*</span></label>
                            <input type="text" id="phone" name="phone" class="form-control"
                                placeholder="Enter your phone number" minlength="10" maxlength="15"
                                oninput="this.value = this.value.replace(/\D/g, '')" required>
                            @error('phone')
                                <span style="color: red; font-size:13px;">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group mb-3">
                            <label for="message">Comment <span class="text-danger">*</span></label>
                            <textarea name="message" id="message" class="form-control" rows="4" placeholder="Your message" required></textarea>
                        </div>

                        <div class="text-center">
                            <button type="submit" class="btn btn-primary px-5">Submit <i
                                    class="bx bx-right-arrow-alt"></i></button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection