@extends('frontend::layouts.master')
@section('content')
    <x-breadcrumb title="{{ end($breadcrumbs)['name'] ?? '' }}" subtitle="{{ end($breadcrumbs)['desc'] ?? '' }}" :breadcrumbs=$breadcrumbs :active="count($breadcrumbs) - 1" backgroundImage=""/>

    <!-- Contact Section -->
    <section class="page-contact p-t-40">
        <div class="container">
            <div class="row">
                <!-- Company Information -->
                <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                    <div class="contact-info">
                        <!-- <h3 class="contact-title">ข้อมูลบริษัท</h3> -->

                        <div class="company-details">
                            @if (!empty($page_init['contact']['image']))
                                <div class="company-logo">
                                    <img src="{{ asset($page_init['contact']['image']) }}" alt="Pro Part Distributor Logo" class="img-responsive">
                                </div>
                            @endif
                            @if (!empty($page_init['contact']['name']))
                                <h4 class="company-name">{!! $page_init['contact']['name'] !!}</h4>
                            @endif
                            
                            @if (!empty($page_init['contact']['desc']))
                                <p class="company-desc">{!! $page_init['contact']['desc'] !!}</p>
                            @endif
                        </div>

                        <div class="contact-details">
                            @if (!empty($page_init['contact']['office']))
                                <div class="contact-item">
                                    <div class="contact-icon">
                                        <i class="icon-map-pin"></i>
                                    </div>
                                    <div class="contact-text">
                                        <h5>@lang('frontend::frontend.contact.address')</h5>
                                        {!! $page_init['contact']['office'] ?? '' !!}
                                    </div>
                                </div>
                            @endif
                            
                            @if (!empty($page_init['contact']['tel']))
                                <div class="contact-item">
                                    <div class="contact-icon">
                                        <i class="icon-phone"></i>
                                    </div>
                                    <div class="contact-text">
                                        <h5>@lang('frontend::frontend.contact.tel')</h5>
                                        <p><a style="word-break: break-all !important;" href="tel:{{ $page_init['contact']['tel'] ?? '' }}">{{ $page_init['contact']['tel'] ?? '' }}</a></p>
                                    </div>
                                </div>
                            @endif
                            
                            <div class="contact-item">
                                <div class="contact-icon">
                                    <i class="icon-mail"></i>
                                </div>
                                <div class="contact-text">
                                    <h5>@lang('frontend::frontend.contact.email')</h5>
                                    @if (!empty($page_init['contact']['email']))
                                        <p>
                                            <a style="word-break: break-all !important;" href="mailto:{{ $page_init['contact']['email'] }}">{!! $page_init['contact']['email'] !!}</a>
                                        </p>
                                    @else
                                        <p>-</p>
                                    @endif
                                </div>
                            </div>   
                        </div>
                    </div>
                </div>

                <!-- Contact Form -->
                <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
                    @livewire('frontend::from.contact')
                </div>
            </div>
        </div>
    </section>

    <!-- Google Maps Section -->
    @if (!empty($page_init['contact']['gmap']))
        <section class="sect-map">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 no-padding">
                        <div class="map-container">
                            <div class="map-wrapper">
                                {!! $page_init['contact']['gmap'] ?? '' !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
    
@endsection