@extends('frontend.layouts.app')

@section('title', $title)
@section('description', $description)

@section('content')
    @php
        $settingsService = app(\App\Services\SettingsService::class);
        $contactPhone = $settingsService->get('contact_phone', '+263 78 691 2342');
        $contactEmail = $settingsService->get('contact_email', config('mail.from.address'));
        $contactAddress = $settingsService->get('contact_address', '3690 New Market Rd #309, Brodil, San Fransisko - USA');
        $contactWhatsapp = $settingsService->get('contact_whatsapp');
        $contactHours = collect(preg_split('/\r\n|\r|\n/', (string) $settingsService->get('contact_hours', '')))
            ->map(fn ($line) => trim($line))
            ->filter()
            ->values();
        $contactMapEmbedUrl = $settingsService->get('contact_map_embed_url')
            ?: 'https://maps.google.com/maps?q=Harare%2C%20Zimbabwe&t=m&z=12&output=embed&iwloc=near';
        $logoSetting = $settingsService->get('primary_logo') ?: $settingsService->get('logo_url');
        $contactLogo = $logoSetting ? asset('storage/' . $logoSetting) : asset('frontend/images/logo/ndarama-logo.svg');
    @endphp

    @include('frontend.layouts.breadcrumb', ['title' => 'Contact Us'])

    <section class="tv-contact-section inner space bg-light">
        <div class="container">
            <div class="row gy-30">
                <div class="col-lg-5">
                    <div class="contact-content-wrap">
                        <div class="title-wrap">
                            <div class="sub-title-2 text-theme"><i class="fa-solid fa-circle-check"></i>Contact Us</div>
                            <h2 class="sec-title">Get in Touch with Ndarama Technologies</h2>
                            <p>We are always ready to help your business. Let us talk.</p>
                        </div>
                        <div class="contact-info">
                            <div class="contact-item">
                                <div class="icon"><i class="fa-sharp fa-regular fa-location-dot"></i></div>
                                <div class="info">
                                    <h4 class="title">Our Address</h4>
                                    <p>{{ $contactAddress }}</p>
                                </div>
                            </div>
                            <div class="contact-item">
                                <div class="icon"><i class="fa-light fa-circle-phone"></i></div>
                                <div class="info">
                                    <h4 class="title">Call us Anytime</h4>
                                    <div class="content"><a href="tel:{{ preg_replace('/[^0-9+]/', '', $contactPhone) }}">{{ $contactPhone }}</a></div>
                                </div>
                            </div>
                            @if($contactWhatsapp)
                                <div class="contact-item">
                                    <div class="icon"><i class="fa-brands fa-whatsapp"></i></div>
                                    <div class="info">
                                        <h4 class="title">WhatsApp</h4>
                                        <div class="content"><a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $contactWhatsapp) }}" target="_blank" rel="noopener">{{ $contactWhatsapp }}</a></div>
                                    </div>
                                </div>
                            @endif
                            <div class="contact-item">
                                <div class="icon"><i class="fa-light fa-envelope"></i></div>
                                <div class="info">
                                    <h4 class="title">Send E-Mail</h4>
                                    <div class="content"><a href="mailto:{{ $contactEmail }}">{{ $contactEmail }}</a></div>
                                </div>
                            </div>
                            @if($contactHours->isNotEmpty())
                                <div class="contact-item">
                                    <div class="icon"><i class="fa-regular fa-clock"></i></div>
                                    <div class="info">
                                        <h4 class="title">Business Hours</h4>
                                        @foreach($contactHours as $hoursLine)
                                            <p class="mb-0">{{ $hoursLine }}</p>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        </div>
                        <div class="social-links">
                            <a href="{{ $settingsService->get('facebook_url', '#') }}"><span class="link-effect"><span class="effect-1">Facebook</span><span class="effect-1">Facebook</span></span></a>
                            <a href="{{ $settingsService->get('twitter_url', '#') }}"><span class="link-effect"><span class="effect-1">Twitter/X</span><span class="effect-1">Twitter/X</span></span></a>
                            <a href="{{ $settingsService->get('linkedin_url', '#') }}"><span class="link-effect"><span class="effect-1">LinkedIn</span><span class="effect-1">LinkedIn</span></span></a>
                            <a href="{{ $settingsService->get('instagram_url', '#') }}"><span class="link-effect"><span class="effect-1">Instagram</span><span class="effect-1">Instagram</span></span></a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="contact-form">
                        <h2 class="title mt--5 mb-35">Send us a message</h2>
                        <form action="{{ route('frontend.contact.submit') }}" method="POST" class="contact_form">
                        @csrf
                        @include('frontend.partials.contact-spam-fields')
                        <div class="form-grid">
                            <div class="form-group"><span class="icon"><i class="fa-regular fa-user"></i></span><input type="text" id="name" name="name" value="{{ old('name') }}" required placeholder="Your Name"></div>
                            <div class="form-group"><span class="icon"><i class="fa-regular fa-envelope"></i></span><input type="email" id="email" name="email" value="{{ old('email') }}" required placeholder="Email Address"></div>
                        </div>
                        <div class="form-grid">
                            <div class="form-group"><span class="icon"><i class="fa-solid fa-phone"></i></span><input type="text" id="phone" name="phone" value="{{ old('phone') }}" placeholder="Phone No."></div>
                            <div class="form-group"><input type="text" id="subject" name="subject" value="{{ old('subject') }}" required placeholder="Subject"></div>
                        </div>
                        <div class="form-group"><textarea id="message" name="message" required placeholder="Write Message">{{ old('message') }}</textarea></div>
                        <div class="form-group terms">
                            <input type="checkbox" id="terms" checked>
                            <label for="terms">I agree to all terms and conditions.</label>
                        </div>
                        <button type="submit" class="theme-btn mt-30">
                            <span class="link-effect"><span class="effect-1">Submit Now</span><span class="effect-1">Submit Now</span></span>
                        </button>
                        </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="tv-contact-map">
        <div class="container-fluid p-0">
            <div class="row">
                <div class="map-box">
                    <iframe class="map-canvas" src="{{ $contactMapEmbedUrl }}" allowfullscreen loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </div>
        </div>
    </div>

    <section class="tv-branch-section space bg-light">
        <div class="container">
            <div class="title-wrap three text-center">
                <div class="sub-title-2 text-theme"><i class="fa-solid fa-circle-check"></i>Our Branches</div>
                <h2 class="sec-title">Visit Our Office</h2>
                <p>We currently operate from one listed office. Reach out before visiting so the right team member can assist you.</p>
            </div>
            <div class="row gy-30 justify-content-center">
                <div class="col-lg-5 col-md-8 col-sm-10">
                    <div class="branch-single-box cms-contact-branch-card">
                        <div class="image-box">
                            <div class="image cms-contact-branch-logo">
                                <img src="{{ $contactLogo }}" alt="Ndarama Technologies">
                            </div>
                        </div>
                        <div class="branch-content">
                            <div class="branch-header"><h4 class="location-name">Ndarama Technologies</h4><p class="location-type">HEAD OFFICE</p></div>
                            <div class="divider"></div>
                            <p class="address">{{ $contactAddress }}</p>
                            <div class="phone"><a href="tel:{{ preg_replace('/[^0-9+]/', '', $contactPhone) }}">{{ $contactPhone }}</a></div>
                            <div class="email"><a href="mailto:{{ $contactEmail }}">{{ $contactEmail }}</a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @include('frontend.partials.newsletter')
@endsection