@extends('frontend::layouts.master')
@section('content')
    @livewire('frontend::page-title', ['title' => $breadcrumb[0]['name'] ?? '', 'breadcrumbs' => $breadcrumb])

    <section class="py-5">
        <div class="container">
            <div class="row g-4">
                <!-- CONTACT INFO + MAP -->
                <div class="col-lg-6 cleft" data-animate="fadeInLeft" data-animate-delay="100">
                    <div class="bg-white p-4 rounded-4 shadow-sm h-100">
                        <h4 class="fw-bold mb-4">{!! __('frontend::text.label.contact_us') !!}</h4>

                        <!-- Map -->
                        @if (!empty($page_init['contact']['google_map']))
                            <div class="my-4 rounded-4 overflow-hidden shadow-sm position-relative" style="height: 300px;">
                                {!! $page_init['contact']['google_map'] ?? '' !!}
                            </div>
                        @endif

                        <div class="d-flex flex-column gap-4">
                            <!-- Address -->
                            @if (!empty($page_init['contact']['office']))
                                <div class="d-flex align-items-start">
                                    <div class="text-ci-primary">
                                        <i class="fas fa-map-marker-alt"></i>
                                    </div>
                                    <div class="ms-3">
                                        <h6 class="fw-bold mb-1 ">{!! __('frontend::text.label.address') !!}</h6>
                                        <p class="text-muted mb-0"> {!! $page_init['contact']['office'] ?? '' !!}</p>
                                    </div>
                                </div>
                            @endif

                            <div class="row g-4">
                                <!-- Phone -->
                                @if (!empty($page_init['contact']['tel']) && count($page_init['contact']['tel']) > 0)
                                    @foreach ($page_init['contact']['tel'] as $k => $tel)
                                        <div class="col-md-6">
                                            <div class="d-flex align-items-start">
                                                <div class="text-ci-primary">
                                                    <i class="fa fa-phone"></i>
                                                </div>
                                                <div class="ms-3">
                                                    <h6 class="fw-bold mb-1 ">{!! __('frontend::text.label.phone') !!}</h6>

                                                    {{-- @if ($k == 0) --}}
                                                    <a href="tel:{{ $tel ?? '' }}"
                                                        class="text-decoration-none text-muted">{{ $tel ?? '' }}</a>
                                                    {{-- @endif --}}

                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                                <!-- Email -->
                                @if (!empty($page_init['contact']['email']) && count($page_init['contact']['email']) > 0)
                                    @foreach ($page_init['contact']['email'] as $k => $email)
                                        <div class="col-md-12">
                                            <div class="d-flex align-items-start">
                                                <div class="text-ci-primary">
                                                    <i class="fa fa-envelope"></i>
                                                </div>
                                                <div class="ms-3">
                                                    <h6 class="fw-bold mb-1 ">{!! __('frontend::text.label.email') !!}</h6>
                                                    @if (!empty($page_init['contact']['email']))
                                                        <a href="mailto:{{ $email ?? '' }}"
                                                            class="text-decoration-none text-muted">{{ $email ?? '' }}</a>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                            </div>

                            <hr class="text-secondary opacity-25">

                            <!-- Follow Us -->
                            @if (!empty($page_init['contact']['social']))
                                <div>
                                    <div class="fw-bold mb-1 mb-3">{!! __('frontend::text.label.follow_us') !!}</div>
                                    <div class="row g-0 gap-2 px-3">
                                        @foreach ($page_init['contact']['social'] as $icon => $social)
                                            @if (!empty($social['url']))
                                                                                                <div class="col-auto p-0">
                                                    <a class="btn btn-social rounded-circle d-flex align-items-center justify-content-center"
                                                        href="{{ $social['url'] ?? '' }}" target="_blank">
                                                        <i class="fab fa-{{ $icon }}"></i>
                                                    </a>
                                                </div>
                                            @endif
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
                <!-- CONTACT FORM -->
                @livewire('frontend::contact.contact-form', ['page_init' => $page_init])
            </div>
        </div>
    </section>

    <script>
        // reCAPTCHA Placeholder Animation
        document.addEventListener('DOMContentLoaded', function() {
            const recaptchaCheck = document.getElementById('recaptcha-check');
            const recaptchaBox = document.querySelector('.recaptcha-box');

            if (recaptchaCheck) {
                recaptchaCheck.addEventListener('change', function() {
                    if (this.checked) {
                        // Add loading animation
                        recaptchaBox.style.opacity = '0.7';
                        recaptchaBox.style.pointerEvents = 'none';

                        // Simulate verification delay
                        setTimeout(() => {
                            recaptchaBox.style.opacity = '1';
                            recaptchaBox.style.pointerEvents = 'auto';
                            recaptchaBox.style.borderColor = '#4CAF50';
                            recaptchaBox.style.background = '#f0fff0';
                        }, 800);
                    } else {
                        // Reset styles
                        recaptchaBox.style.borderColor = '#d3d3d3';
                        recaptchaBox.style.background = '#f9f9f9';
                    }
                });
            }

            // Form validation
            const contactForm = document.querySelector('.contact-box form');
            if (contactForm) {
                contactForm.addEventListener('submit', function(e) {
                    e.preventDefault();

                    if (!recaptchaCheck.checked) {
                        alert('Please verify that you are not a robot.');
                        recaptchaBox.style.borderColor = '#f44336';
                        setTimeout(() => {
                            recaptchaBox.style.borderColor = '#d3d3d3';
                        }, 2000);
                        return false;
                    }

                    // Show success message
                    alert('Message sent successfully!');
                    contactForm.reset();
                    recaptchaCheck.checked = false;
                    recaptchaBox.style.borderColor = '#d3d3d3';
                    recaptchaBox.style.background = '#f9f9f9';
                });
            }
        });
    </script>
@endsection