<x-layouts.app-layout :page="$page">

    <!-- Page Header Start -->
    <div class="container-fluid page-header py-6 my-6 mt-0 wow fadeIn" data-wow-delay="0.1s">
        <div class="container text-center">
            <h1 class="display-4 text-white animated slideInDown mb-4">{{ $page->title }}</h1>
            <nav aria-label="breadcrumb animated slideInDown">
                <!-- <ol class="breadcrumb justify-content-center mb-0">
                    <li class="breadcrumb-item"><a class="text-white" href="#">Home</a></li>
                    <li class="breadcrumb-item"><a class="text-white" href="#">Pages</a></li>
                    <li class="breadcrumb-item text-primary active" aria-current="page">About</li>
                </ol> -->
            </nav>
        </div>
    </div>
    <!-- Page Header End -->


    <!-- Contact Section -->
    <section class="container py-5">
        <div class="row g-4">

            <!-- Contact Form -->
            <div class="col-lg-6">
                <div class="card shadow border-0 h-100">
                    <div class="card-body p-4">
                        <h3 class="card-title mb-4">@lang('Get in Touch')</h3>
                        <form action="{{ route('contact.submit') }}" method="POST">
                            @csrf

                            <div class="mb-3">
                                <label for="name" class="form-label">@lang('Name')</label>
                                <input type="text" name="name" class="form-control" id="name"
                                    placeholder="@lang('Your Name')" required>
                                @error('name')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="email" class="form-label">@lang('Email')</label>
                                <input type="email" name="email" class="form-control" id="email"
                                    placeholder="@lang('Your Email')" required>
                                @error('email')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="phone" class="form-label">@lang('Phone')</label>
                                <input type="text" name="phone" class="form-control" id="phone"
                                    placeholder="@lang('Your Phone Number')" required>
                                @error('phone')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="subject" class="form-label">@lang('Subject')</label>
                                <input type="text" name="subject" class="form-control" id="subject"
                                    placeholder="@lang('Your Subject')" required>
                                @error('subject')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="message" class="form-label">@lang('Message')</label>
                                <textarea name="message" class="form-control" id="message" rows="5" placeholder="@lang('Your Message')" required></textarea>
                                @error('message')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <button type="submit" class="btn btn-primary w-100">
                                @lang('Send Message')
                            </button>
                        </form>

                    </div>
                </div>
            </div>

            <!-- Contact Info -->
            <div class="col-lg-6">
                <div class="card shadow border-0 h-100">
                    <div class="card-body p-4">
                        <h3 class="card-title mb-4">@lang('Contact Information')</h3>
                        <ul class="list-unstyled mb-4">
                            <div class="d-flex gap-4 mb-3">
                                @foreach ($contact->social_links as $link)
                                    <a class="text-primary fs-2" href="{{ $link['url'] }}"><i
                                            class="{{ $link['icon'] }}"></i></a>
                                @endforeach

                            </div>
                            @foreach ($contact->phones as $phone)
                                <li class="mb-3"><i class="fas fa-phone me-2 text-dark"></i> {{ $phone }}</li>
                            @endforeach


                            <li class="mb-3"><i class="fas fa-envelope me-2 text-dark"></i> {{ $contact->email }}
                            </li>
                            <li class="mb-3"><i class="fas fa-map-marker-alt me-2 text-dark"></i>
                                {{ $contact->address }}</li>
                        </ul>
                        <div class="ratio ratio-16x9">
                            <!-- Embed Google Map -->
                            @if ($contact->maps)
                                <iframe src="{{ $contact->maps }}" width="100%" height="100%" style="border:0;"
                                    allowfullscreen="" loading="lazy">
                                </iframe>
                            @endif

                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>

</x-layouts.app-layout>
