@extends('web_site.layouts.master')

@php
    $mapUrl = fn (string $query) => 'https://www.google.com/maps?q=' . urlencode($query) . '&z=15&t=m&hl=' . app()->getLocale() . '&output=embed';
    // Main Data "map location" may hold an embed URL or a whole <iframe> snippet; take its src.
    $mainMap = trim((string) $siteData?->maplocation);
    if (preg_match('/src=["\']([^"\']+)["\']/', $mainMap, $match)) {
        $mainMap = html_entity_decode($match[1]);
    }
    $mainMapSrc = str_starts_with($mainMap, 'https://') ? $mainMap : null;
    $firstBranchAddress = $branches->first(fn ($branch) => filled($branch->address))?->address;
    $siteAddress = $siteData?->getTranslation('address', app()->getLocale(), false) ?: $siteData?->getTranslation('address', 'en', false);
    $mapSrc = $firstBranchAddress ? $mapUrl($firstBranchAddress) : ($mainMapSrc ?? ($siteAddress ? $mapUrl($siteAddress) : null));
@endphp

@section('content')

    <section class="breadcumb-wrapper" data-bg-src="{{ asset('assets_web/img/breadcurmb1.webp') }}">
        <div class="container">
            <h1 class="breadcumb-title">{{ trans('site.nav.contact') }}</h1>
        </div>
    </section>

    <section class="vs-contact-wrapper vs-contact-layout1 space-top space-md-bottom">
        <div class="container">
            <div class="row gx-60 align-items-center1">
                <div class="col-md-6">
                    @if ($branches->isNotEmpty())
                        <div class="vs-accordion two accordion mb-30" id="branchAccordion">
                            @foreach ($branches as $branch)
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button {{ $loop->first ? '' : 'collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#collapseBranch{{ $branch->id }}" aria-expanded="{{ $loop->first ? 'true' : 'false' }}">
                                            {{ $branch->name }}
                                        </button>
                                    </h2>
                                    <div id="collapseBranch{{ $branch->id }}" class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}" data-bs-parent="#branchAccordion" @if ($branch->address) data-map-src="{{ $mapUrl($branch->address) }}" @endif>
                                        <div class="accordion-body">
                                            <div class="media-21">
                                                @if ($branch->address)
                                                    <p class="fs-md cr"><i class="far fa-map-marker-alt me-2"></i> {{ $branch->address }}</p>
                                                @endif
                                                @if ($branch->phone)
                                                    <p class="fs-md cr"><a href="tel:{{ preg_replace('/\s+/', '', $branch->phone) }}" class="cr"><i class="far fa-phone-alt me-2"></i>{{ $branch->phone }}</a></p>
                                                @endif
                                                @if ($branch->fax)
                                                    <p class="fs-md cr"><a href="tel:{{ preg_replace('/\s+/', '', $branch->fax) }}" class="cr"><i class="fas fa-phone-rotary me-2"></i>{{ $branch->fax }}</a></p>
                                                @endif
                                                @if ($branch->email)
                                                    <p class="fs-md cr"><a href="mailto:{{ $branch->email }}" class="cr"><i class="far fa-envelope me-2"></i>{{ $branch->email }}</a></p>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>

                <div class="col-md-6">
                    @if (session('success'))
                        <div class="alert alert-success" data-flash-fallback>{{ session('success') }}</div>
                    @endif
                    <form action="{{ route('contact.store') }}" method="POST" class="form-wrap3 mb-30 backgroundfr" id="contactForm" novalidate>
                        @csrf
                        <input type="hidden" name="subject" value="{{ trans('site.contact.default_subject') }}">
                        <div class="form-title">
                            <h3 class="mt-n2 fls-n2 mb-4">{{ trans('site.contact.form_title') }}</h3>
                        </div>
                        <div class="row">
                            <div class="form-group mb-15">
                                <input type="text" class="form-control style3 @error('name') is-invalid @enderror" name="name" id="name" placeholder="{{ trans('site.contact.name') }}" value="{{ old('name') }}">
                                <i class="fal fa-user"></i>
                                @error('name')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-xl-6 form-group mb-15">
                                <input type="text" class="form-control style3 @error('email') is-invalid @enderror" name="email" id="email" dir="ltr" placeholder="{{ trans('site.contact.email') }}" value="{{ old('email') }}">
                                <i class="fal fa-envelope"></i>
                                @error('email')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-xl-6 form-group mb-15">
                                <input type="text" class="form-control style3 @error('phone') is-invalid @enderror" name="phone" id="phone" dir="ltr" placeholder="{{ trans('site.contact.phone') }}" value="{{ old('phone') }}">
                                <i class="fal fa-phone-alt"></i>
                                @error('phone')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                            </div>
                            <div class="form-group mb-15">
                                <textarea name="message" id="message" cols="30" rows="3" class="form-control style3 @error('message') is-invalid @enderror" placeholder="{{ trans('site.contact.message') }}">{{ old('message') }}</textarea>
                                <i class="fal fa-pencil-alt"></i>
                                @error('message')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                            </div>
                            <div class="form-btn pt-15">
                                <button type="submit" class="vs-btn style2">{{ trans('site.contact.send') }}<i class="fas fa-chevron-right"></i></button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            @if ($mapSrc)
                <div class="contact-map mt-30">
                    <div class="map-wrapper cont">
                        <iframe id="contactMap" class="gmap_iframe" width="100%" height="450" src="{{ $mapSrc }}" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" loading="lazy" title="{{ trans('site.nav.contact') }}"></iframe>
                    </div>
                </div>
            @endif
        </div>
    </section>

@endsection

@section('js')
    <script>
        // Show the opened branch on the map.
        document.querySelectorAll('#branchAccordion [data-map-src]').forEach(function (panel) {
            panel.addEventListener('shown.bs.collapse', function () {
                var map = document.getElementById('contactMap');
                if (map && map.src !== panel.dataset.mapSrc) {
                    map.src = panel.dataset.mapSrc;
                }
            });
        });
    </script>
    <script type="text/javascript" src="{{ asset('vendor/jsvalidation/js/jsvalidation.js') }}"></script>
    {!! JsValidator::formRequest('App\Http\Requests\Site\StoreContactRequest', '#contactForm') !!}
@endsection