@extends('frontend::layouts.app')

@section('content')
    <section class="gradient-green" id="page-title">
        <div class="container">
            <div class="page-title">
                <h1>{{ $data['page_init']['contact']['name'] ?? __('frontend::contact.contact_us') }}</h1>
            </div>
            <div class="breadcrumb">
                <ul>
                    <li><a href="{{ mwz_route('frontend.index') }}">{{ __('frontend::common.home') }}</a></li>
                    <li class="active">{{ $data['page_init']['contact']['name'] ?? __('frontend::contact.contact_us') }}</li>
                </ul>
            </div>
        </div>
    </section>

    <!-- Contact Details Section -->
    <section class="py-16 md:py-24" style="background: url('{{ asset('assets/frontend/images/bg-abstract-white.jpg') }}') no-repeat center center; background-size: cover;">
        <div class="mx-auto max-w-7xl px-6 lg:px-8">
            <div class="grid lg:grid-cols-2 gap-12">
                <!-- Contact Information -->
                <div class="box-contact-info">
                    <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-8">
                        {{ $data['page_init']['contact']['desc'] ?? '' }}
                    </h2>

                    <div class="space-y-6 mb-8">
                        @if (!empty($data['page_init']['contact']['office']))
                            <!-- Address -->
                            <div class="flex items-start gap-4">
                                <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center shrink-0">
                                    <svg class="h-6 w-6 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path>
                                        <circle cx="12" cy="10" r="3"></circle>
                                    </svg>
                                </div>
                                <div>
                                    <h3 class="font-semibold text-foreground mb-1">{{ __('frontend::contact.address') }}</h3>
                                    <p class="text-muted-foreground">
                                        {!! _html($data['page_init']['contact']['office'] ?? '') !!}
                                    </p>
                                </div>
                            </div>
                        @endif

                        @if (!empty($data['page_init']['contact']['tel']))
                            <!-- Phone -->
                            <div class="flex items-start gap-4">
                                <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center shrink-0">
                                    <svg class="h-6 w-6 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h3 class="font-semibold text-foreground mb-1">{{ __('frontend::contact.phone') }}</h3>
                                    @php
                                        $tel = explode(',', $data['page_init']['contact']['tel']);
                                    @endphp
                                    @foreach ($tel as $item)
                                        <p class="text-muted-foreground">{{ $item }}</p>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        @if (!empty($data['page_init']['contact']['email']))
                            <!-- Email -->
                            <div class="flex items-start gap-4">
                                <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center shrink-0">
                                    <svg class="h-6 w-6 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <rect width="20" height="16" x="2" y="4" rx="2"></rect>
                                        <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h3 class="font-semibold text-foreground mb-1">{{ __('frontend::contact.email') }}</h3>
                                    @php
                                        $email = explode(',', $data['page_init']['contact']['email']);
                                    @endphp
                                    @foreach ($email as $item)
                                        <p class="text-muted-foreground">{{ $item }}</p>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        @if (!empty($data['page_init']['contact']['work']))
                            <!-- Open Hours -->
                            <div class="flex items-start gap-4">
                                <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center shrink-0">
                                    <svg class="h-6 w-6 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <circle cx="12" cy="12" r="10"></circle>
                                        <polyline points="12 6 12 12 16 14"></polyline>
                                    </svg>
                                </div>
                                <div>
                                    <h3 class="font-semibold text-foreground mb-1">{{ __('frontend::contact.open_hours') }}</h3>
                                    <p class="text-muted-foreground">
                                        {!! _html($data['page_init']['contact']['work'] ?? '') !!}
                                    </p>
                                </div>
                            </div>
                        @endif
                    </div>

                    <!-- Social Media -->
                    <div class="mb-8">
                        <div class="flex flex-wrap gap-4">
                            @if (!empty($data['page_init']['contact']['social']))
                                <h3 class="font-semibold text-foreground mb-4">{{ __('frontend::contact.social_media') }}</h3>
                                @foreach ($data['page_init']['contact']['social'] as $key => $item)
                                    @switch($key)
                                        @case('line')
                                            <!-- Line -->
                                            <a class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center text-primary hover:bg-primary hover:text-primary-foreground transition-colors" href="{{ $item['url'] }}" aria-label="{{ __('frontend::contact.aria_line') }}">
                                                <svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor">
                                                    <path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"></path>
                                                </svg>
                                                <span class="sr-only">{{ __('frontend::contact.aria_line') }}</span>
                                            </a>
                                        @break

                                        @case('facebook')
                                            <!-- Facebook -->
                                            <a class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center text-primary hover:bg-primary hover:text-primary-foreground transition-colors" href="{{ $item['url'] }}" aria-label="{{ __('frontend::contact.aria_facebook') }}">
                                                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                    <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
                                                </svg>
                                                <span class="sr-only">Facebook</span>
                                            </a>
                                        @break

                                        @case('youtube')
                                            <!-- YouTube -->
                                            <a class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center text-primary hover:bg-primary hover:text-primary-foreground transition-colors" href="{{ $item['url'] }}" aria-label="{{ __('frontend::contact.aria_youtube') }}">
                                                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                    <path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"></path>
                                                    <path d="m10 15 5-3-5-3z"></path>
                                                </svg>
                                                <span class="sr-only">{{ __('frontend::contact.aria_youtube') }}</span>
                                            </a>
                                        @break

                                        @case('twitter')
                                            <!-- X -->
                                            <a class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center text-primary hover:bg-primary hover:text-primary-foreground transition-colors" href="{{ $item['url'] }}" aria-label="{{ __('frontend::contact.aria_x') }}">
                                                <svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor">
                                                    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path>
                                                </svg>
                                                <span class="sr-only">{{ __('frontend::contact.aria_x') }}</span>
                                            </a>
                                        @break

                                        @case('instagram')
                                            <!-- Instagram -->
                                            <a class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center text-primary hover:bg-primary hover:text-primary-foreground transition-colors" href="{{ $item['url'] }}" aria-label="{{ __('frontend::contact.aria_instagram') }}">
                                                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                    <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
                                                    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                                                    <line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
                                                </svg>
                                                <span class="sr-only">{{ __('frontend::contact.aria_instagram') }}</span>
                                            </a>
                                        @break

                                        @case('tiktok')
                                            <!-- TikTok -->
                                            <a class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center text-primary hover:bg-primary hover:text-primary-foreground transition-colors" href="{{ $item['url'] }}" aria-label="{{ __('frontend::contact.aria_tiktok') }}">
                                                <svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor">
                                                    <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"></path>
                                                </svg>
                                                <span class="sr-only">{{ __('frontend::contact.aria_tiktok') }}</span>
                                            </a>
                                        @break

                                        @case('linkedin')
                                            <!-- LinkedIn -->
                                            <a class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center text-primary hover:bg-primary hover:text-primary-foreground transition-colors" href="{{ $item['url'] }}" aria-label="{{ __('frontend::contact.aria_linkedin') }}">
                                                <svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor">
                                                    <path d="M4.98 3.5C4.98 4.88 3.88 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1 4.98 2.12 4.98 3.5zM.25 8.25h4.5V24h-4.5zM8.75 8.25h4.31v2.13h.06c.6-1.14 2.07-2.34 4.26-2.34 4.55 0 5.39 2.99 5.39 6.88V24h-4.5v-7.45c0-1.78-.03-4.06-2.47-4.06-2.47 0-2.85 1.93-2.85 3.93V24h-4.5z"></path>
                                                </svg>
                                                <span class="sr-only">{{ __('frontend::contact.aria_linkedin') }}</span>
                                            </a>
                                        @break
                                    @endswitch
                                @endforeach
                            @endif
                        </div>
                    </div>

                </div>

                <!-- Map and Image -->
                <div class="space-y-6">
                    @if (!empty($data['page_init']['contact']['image']))
                        <!-- Cover Image -->
                        <div class="relative h-[200px] rounded-lg overflow-hidden">
                            <img class="object-cover w-full h-full" src="{{ $data['page_init']['contact']['image'] ?? '' }}" alt="{{ $data['page_init']['contact']['name'] ?? __('frontend::contact.contact_us') }}" loading="lazy" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">

                            <div class="hidden absolute inset-0 items-center justify-center bg-accent">
                                <span class="text-muted-foreground">{{ __('frontend::contact.wbu_headquarters') }}</span>
                            </div>
                        </div>
                    @endif
                    @if (!empty($data['page_init']['contact']['gmap']))
                        <!-- Google Map -->
                        <div class="h-[300px] bg-muted rounded-lg overflow-hidden">
                            {!! _html($data['page_init']['contact']['gmap'] ?? '') !!}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Form Section -->
    <section class="py-16 md:py-24" style="background: url('{{ asset('assets/frontend/images/bg-dots.jpg') }}') no-repeat center center; background-size: cover; ">
        <div class="mx-auto max-w-3xl px-6 lg:px-8">
            <div class="text-center mb-12">
                <!-- <div class="hr-title" style="margin-bottom: 40px; margin-top:0;"></div> -->
                <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-4">
                    {{ __('frontend::contact.send_message') }}
                </h2>

                <p class="text-muted-foreground">
                    {{ __('frontend::contact.form_intro') }}
                </p>
            </div>

            <form class="bg-background rounded-lg p-8 shadow-sm border border-border" id="contact_frm" method="POST" onsubmit="return false;">
                <div class="grid gap-6">
                    <div class="grid sm:grid-cols-2 gap-6">
                        <!-- Full Name -->
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-foreground" for="fullName">
                                {{ __('frontend::contact.full_name') }} <span class="text-red-500">*</span>
                            </label>
                            <input class="w-full h-9 min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]" id="fullName" name="name" type="text" placeholder="{{ __('frontend::contact.full_name_placeholder') }}" required>
                        </div>
                        <!-- Email -->
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-foreground" for="email">
                                {{ __('frontend::contact.email') }} <span class="text-red-500">*</span>
                            </label>
                            <input class="w-full h-9 min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]" id="email" name="email" type="email" placeholder="{{ __('frontend::contact.email_placeholder') }}" required>
                        </div>
                    </div>

                    <div class="grid sm:grid-cols-2 gap-6">
                        <!-- Phone -->
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-foreground" for="phone">
                                {{ __('frontend::contact.phone') }}
                            </label>
                            <input class="w-full h-9 min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]" id="phone" name="phone" type="tel" placeholder="{{ __('frontend::contact.phone_placeholder') }}">
                        </div>
                        <!-- Subject -->
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-foreground" for="subject">
                                {{ __('frontend::contact.subject') }} <span class="text-red-500">*</span>
                            </label>
                            <input class="w-full h-9 min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]" id="subject" name="subject" type="text" placeholder="{{ __('frontend::contact.subject_placeholder') }}" required>
                        </div>
                    </div>

                    <!-- Message -->
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-foreground" for="message">
                            {{ __('frontend::contact.message') }} <span class="text-red-500">*</span>
                        </label>
                        <textarea class="flex min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] resize-none" id="message" name="message" placeholder="{{ __('frontend::contact.message_placeholder') }}" rows="5" required></textarea>
                    </div>

                    <!-- Privacy Policy Checkbox -->
                    <div class="flex items-start gap-3">
                        <input class="mt-1 size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] checked:bg-primary checked:text-primary-foreground checked:border-primary" id="privacy" name="privacy_policy" type="checkbox" required>
                        <label class="text-sm text-muted-foreground font-normal leading-relaxed" for="privacy">
                            {!! _html(__('frontend::contact.privacy_agree', ['policy' => $data['page_init']['setting']['policy']['name'] ?? '', 'url' => $data['page_init']['setting']['policy']['url'] ?? ''])) !!}
                        </label>
                    </div>

                    @if (!empty($data['page_init']['setting']['recapcha']['site_key']))
                        <!-- reCAPTCHA v2 -->
                        <div class="flex items-center gap-4">
                            <div class="g-recaptcha" data-sitekey="{{ $data['page_init']['setting']['recapcha']['site_key'] }}"></div>
                        </div>
                    @endif

                    <!-- Submit Button -->
                    <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-4 py-2 bg-primary text-primary-foreground hover:bg-primary/90 w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]" type="submit">
                        {{ __('frontend::contact.submit') }}
                    </button>
                </div>
            </form>
        </div>
    </section>
@endsection
@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    @if (!empty($data['page_init']['setting']['recapcha']['site_key']))
        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    @endif
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var hasRecaptcha = {{ !empty($data['page_init']['setting']['recapcha']['site_key']) ? 'true' : 'false' }};
            var form = document.getElementById('contact_frm');
            if (!form) return;

            form.addEventListener('submit', function(e) {
                e.preventDefault();
                var formData = new FormData(form);
                var submitBtn = form.querySelector('button[type="submit"]');

                if (hasRecaptcha && typeof grecaptcha !== 'undefined') {
                    var token = grecaptcha.getResponse();
                    if (!token) {
                        Swal.fire({
                            icon: 'warning',
                            text: '{{ __('frontend::common.recaptcha_required') }}'
                        });
                        return;
                    }
                    formData.append('g-recaptcha-response', token);
                }

                submitBtn.disabled = true;
                submitBtn.style.opacity = '0.6';

                fetch('{{ route('api.contact.send') }}', {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                            'language': '{{ app()->getLocale() }}',
                        },
                    })
                    .then(function(res) {
                        return res.json().then(function(data) {
                            return {
                                ok: res.ok,
                                data: data
                            };
                        });
                    })
                    .then(function(result) {
                        if (result.ok) {
                            Swal.fire({
                                icon: 'success',
                                text: result.data.msg || '{{ __('contact::lang.alert.success') }}'
                            });
                            form.reset();
                            if (hasRecaptcha && typeof grecaptcha !== 'undefined') {
                                grecaptcha.reset();
                            }
                        } else {
                            var msg = result.data && result.data.desc ? result.data.desc : (result.data && result.data.msg ? result.data.msg : '{{ __('contact::lang.alert.error') }}');
                            Swal.fire({
                                icon: 'error',
                                text: msg
                            });
                            if (hasRecaptcha && typeof grecaptcha !== 'undefined') {
                                grecaptcha.reset();
                            }
                        }
                    })
                    .catch(function(err) {
                        Swal.fire({
                            icon: 'error',
                            text: '{{ __('contact::lang.alert.error') }}'
                        });
                        if (hasRecaptcha && typeof grecaptcha !== 'undefined') {
                            grecaptcha.reset();
                        }
                    })
                    .finally(function() {
                        submitBtn.disabled = false;
                        submitBtn.style.opacity = '1';
                    });
            });
        });
    </script>
@endsection