@extends('website.layouts.app')

@section('content')

    @include('website.layouts.title_section')

    <!-- Contact Form Section -->
    <section class="contact-form-sec py-5">
        <div class="container my-md-4">
            <div class="section-head text-start pb-xl-2">
                <div class="label-title">GET IN TOUCH WITH US</div>
                <h1 class="heading">Leave a message</h1>
                <p class="sub-title m-0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
            </div>

            @if(session('success'))
                <div id="success-alert" class="alert alert-success mt-3">
                    {{ session('success') }}
                </div>

                <script>
                    setTimeout(function () {
                        const alert = document.getElementById('success-alert');
                        if (alert) {
                            alert.style.transition = 'opacity 1s';
                            alert.style.opacity = 0;
                            setTimeout(() => alert.remove(), 1000); // remove after fade-out
                        }
                    }, 10000); // 30 seconds = 30000ms
                </script>
            @endif


            <div class="row gx-md-5 mt-4">
                <div class="col-xxl-8 col-lg-7 mb-5 mb-lg-0">
                    <div class="contact-sec">
                        <form class="contact-page__form contact-form-validated" novalidate="novalidate"  method="POST" action="{{ route('contact-us.submit') }}">
                            @csrf
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <input type="text" class="form-control @error('name') is-invalid @enderror" placeholder="Your name" name="name" value="{{ old('name') }}" >
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6">
                                    <input type="email" class="form-control @error('email') is-invalid @enderror" placeholder="Email address" name="email" value="{{ old('email') }}" >
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6">
                                    <input type="text" class="form-control @error('phone') is-invalid @enderror" placeholder="Phone number" name="phone" value="{{ old('phone') }}" required>
                                    @error('phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6">
                                    <input type="text" class="form-control @error('subject') is-invalid @enderror" placeholder="Subject" name="subject" value="{{ old('subject') }}" required>
                                    @error('subject')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-12">
                                    <textarea name="message" class="form-control @error('message') is-invalid @enderror" placeholder="Write message" required>{{ old('message') }}</textarea>
                                    @error('message')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="btn-wrapper mt-4">
                                <button type="submit" class="btn btn-primary btn-custom px-4">Send a message</button>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="col-xxl-4 col-lg-5">
                    <div class="contact-info text-white p-4 h-100" style="background-color: rgb(252 94 57) !important;">
                        <p class="mb-4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit sed diam nonummy
                            nibheuismod tincidunt.</p>
                        <hr class="my-4" />

                        <div class="mob d-flex gap-3 mb-2">
                            <div class="icon">
                                <i class="fs-4 bi bi-telephone"></i>
                            </div>
                            <div class="details">
                                <h6 class="text-capitalize mb-1">Call Us</h6>
                                <p class="small opacity-75">{{ isset($web_settings['call_us'][0]) ? $web_settings['call_us'][0]->value : '' }}</p>
                            </div>
                        </div>
                        <div class="email d-flex gap-3 mb-2">
                            <div class="icon">
                                <i class="fs-4 bi bi-envelope"></i>
                            </div>
                            <div class="details">
                                <h6 class="text-capitalize mb-1">Email Us</h6>
                                <p class="small opacity-75">{{ isset($web_settings['email_us'][0]) ? $web_settings['email_us'][0]->value : '' }}</p>
                            </div>
                        </div>
                        <div class="location d-flex gap-3">
                            <div class="icon">
                                <i class="fs-4 bi bi-geo-alt"></i>
                            </div>
                            <div class="details">
                                <h6 class="text-capitalize mb-1">Address</h6>
                                <p class="small opacity-75 m-0">{{ isset($web_settings['address'][0]) ? $web_settings['address'][0]->value : '' }}</p>
                            </div>
                        </div>
                        <hr class="my-4" />

                        <div class="social-wrapper d-flex align-items-center gap-3 mt-3">
                            <a href="{{ isset($web_settings['facebook'][0]) ? $web_settings['facebook'][0]->value : '' }}" class="text-white fs-5"><i
                                    class="bi bi-facebook"></i></a>
                            <a href="{{ isset($web_settings['twitter'][0]) ? $web_settings['twitter'][0]->value : '' }}" class="text-white fs-5"><i class="bi bi-twitter"></i></a>
                            <a href="{{ isset($web_settings['instagram'][0]) ? $web_settings['instagram'][0]->value : '' }}" class="text-white fs-5"><i
                                    class="bi bi-instagram"></i></a>
                            <!-- <a href="{{ isset($web_settings['instagram'][0]) ? $web_settings['instagram'][0]->value : '' }}" class="text-white fs-5"><i
                                    class="bi bi-pinterest"></i></a> -->
                            <a href="{{ isset($web_settings['linkedin'][0]) ? $web_settings['linkedin'][0]->value : '' }}" class="text-white fs-5"><i
                                    class="bi bi-linkedin"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Location Map Section -->
    <section class="location-map">
        <iframe
            src="https://www.google.com/maps/embed?pb={{ isset($web_settings['map'][0]) ? $web_settings['map'][0]->value : '' }}"
            class="w-100" allowfullscreen=""></iframe>
    </section>

@endsection