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

@section('content')
    <main>
        <div class="blog-highlight-banner">
            <div class="flex items-center">
                <div class="container lg:px-24 text-center">
                    <p class="th-5 text-black fs-22 xs:fs-28 md:fs-32 leading-6 md:leading-8">{!! $menu_contact['name'] ?? '' !!}</p>
                </div>
            </div>
        </div>
        <div class="container pb-8">
            <div class="flex flex-wrap">
                <div class="w-full px-4">
                    <div class="flex flex-wrap flex-col mt-4">
                        @if (!empty($page_init['contact']['office']))
                            <div class="w-full md:w-1/2 p-[.5rem] space-y-2 lg:py-2">
                                <div class="flex items-center space-x-3">
                                    <img src="{{ Module::asset('frontend:img/pin.svg') }}" alt="pin">
                                    <p class="th-6 fs-20">@lang('frontend::lang.contact.address')</p>
                                </div>
                                <p class="text-base-lg">{!! $page_init['contact']['office'] ?? '' !!}</p>
                            </div>
                        @endif

                        @if (!empty($page_init['contact']['tel']))
                            <div class="w-full md:w-1/2 p-[.5rem] space-y-2 lg:py-2">
                                <div class="flex items-center space-x-3">
                                    <img src="{{ Module::asset('frontend:img/tel2.svg') }}" alt="tele">
                                    <p class="th-6 fs-20">@lang('frontend::lang.contact.tel')</p>
                                </div>
                                <p class="text-base-lg full-url">{{ $page_init['contact']['tel'] ?? '' }} <a href="tel:{{ $page_init['contact']['tel'] ?? '' }}"> </a></p>
                            </div>
                        @endif

                        @if (!empty($page_init['contact']['email']))
                            <div class="w-full md:w-1/2 p-[.5rem] space-y-2 lg:py-2">
                                <div class="flex items-center space-x-3">
                                    <img src="{{ Module::asset('frontend:img/mail.svg') }}" alt="mail">
                                    <p class="th-6 fs-20">@lang('frontend::lang.contact.email')</p>
                                </div>
                                <p class="text-base-lg full-url">{{ $page_init['contact']['email'] ?? '' }} <a href="mailto:{{ $page_init['contact']['email'] ?? '' }}"> </a></p>
                            </div>
                        @endif
                        @if (!empty($page_init['contact']['social']))
                            @php
                                // กรองเฉพาะตัวที่มี url เท่านั้น
                                $socialWithUrl = array_filter($page_init['contact']['social'], function ($item) {
                                    return !empty($item['url']);
                                });
                            @endphp
                            @if (count($socialWithUrl) > 0)
                                <div class="w-full md:w-1/2 p-[.5rem] space-y-2 lg:py-2">
                                    <div class="contact-info">
                                        <p class="font-semibold mb-2">@lang('frontend::lang.contact.follow')</p>
                                        <div class="flex items-center space-x-2 mt-2">
                                            @foreach ($socialWithUrl as $key => $value)
                                                @php
                                                    $map = [
                                                        'facebook' => 'f',
                                                        'line' => 'l',
                                                        'youtube' => 'y',
                                                        'twitter' => 'x',
                                                        'instagram' => 'i',
                                                        'tiktok' => 't',
                                                    ];
                                                    $image = $map[$key] ?? '';
                                                @endphp
                                                <div class="icon-wrapper">
                                                    <a href="{{ $value['url'] }}" target="_blank">
                                                        <img class="m-2 lg:ml-0 w-14 h-12" src="{{ Module::asset('frontend:img/' . $image . '.svg') }}" />
                                                    </a>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @endif
                    </div>
                </div>
            </div>
        </div>
        @if (!empty($page_init['contact']['google_map']))
            <div class="flex flex-wrap">
                <div class="w-full md:w-full">
                    <div class="map-wrapper">{!! $page_init['contact']['google_map'] ?? '' !!}</div>
                </div>
            </div>
        @endif

        <div class="default-bg-cover relative py-8 lg:py-16" style="background-image:url({{ Module::asset('frontend:img/contact-bg.jpg') }})">
            <div class="container relative z-1">
                <div class="flex items-center -mx-4 flex-wrap">
                    <div class="p-3 w-full lg:w-1/2 flex flex-col items-center justify-center">
                        <p class="fs-36 text-white th-6">@lang('frontend::lang.contact.msg_title')</p>
                        <p class="fs-30 text-white th-3"><i>@lang('frontend::lang.contact.msg_content')</i></p>
                    </div>
                    @livewire('frontend::contact.form')
                </div>
            </div>
            <div class="fil-bd-dark"></div>
        </div>
    </main>
@endsection