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

    <section class="py-5">
        <div class="container">
            <div class="row g-4">
                <!-- Contact Address -->
                <div class="col-lg-6">
                    <div class="bg-white p-4 p-md-5 rounded-4 shadow-sm h-100">
                        <h4 class="fw-bold mb-4">@lang('frontend::text.title.contact_let_s_discuss')</h4>
                        <div class="my-4 rounded-4 shadow-sm p-2">
                            <div class="ratio ratio-4x3">
                                @if (!empty($page_init['contact']['google_map']))
                                    {!! $page_init['contact']['google_map'] ?? '' !!}    
                                @endif
                            </div>
                        </div>
                        <div class="d-flex flex-column gap-2">
                            @if (!empty($page_init['contact']['office']) || !empty($page_init['contact']['tel']) || !empty($page_init['contact']['email']))
                                <div class="h5 text-uppercase mb-3">@lang('frontend::text.title.headquarters')</div>
                                @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 text-dark">@lang('frontend::text.title.address')</h6>
                                            <p class="text-muted small mb-0">{!! $page_init['contact']['office'] ?? '' !!}</p>
                                        </div>
                                    </div>
                                @endif
                            @endif
                            
                            <div class="row g-4">
                                @if (!empty($page_init['contact']['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 text-dark">@lang('frontend::text.title.phone')</h6>
                                                <a href="tel:{{ $page_init['contact']['tel'] ?? '' }}" class="text-decoration-none text-muted small">{{ $page_init['contact']['tel'] ?? '' }}</a>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                                @if (!empty($page_init['contact']['email']))
                                    <div class="col-md-6">
                                        <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 text-dark">@lang('frontend::text.title.email')</h6>
                                                <a href="mailto:{{ $page_init['contact']['email'] ?? '' }}" class="text-decoration-none text-muted small text-break">{{ $page_init['contact']['email'] ?? '' }}</a>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                               
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Contact Form -->
                @livewire('frontend::contact.contact-form')
            </div>
        </div>
    </section>
@endsection