@extends('welcome')

@section('title', __('contactus.seo_title', ['company' => config('app.name')]))
@section('meta_description', __('contactus.seo_description'))

@section('content')

    <!--==============================
            Breadcumb
    ============================== -->
    <div class="breadcumb-wrapper" 
         data-bg-src="{{ asset('images/banners/contact-us.jpg') }}"
         data-track-type="view"
         data-track-click="Visualização Breadcrumb"
         data-track-meta="Página: {{ __('contactus.breadcrumb_title') }}">

        <div class="container">
            <div class="breadcumb-content">

                <h1 class="breadcumb-title">
                    {{ __('contactus.breadcrumb_title') }}
                </h1>

                <ul class="breadcumb-menu">
                    <li>
                        <a href="{{ route('welcome') }}"
                           data-track-click="Breadcrumb Home"
                           data-track-type="navigation"
                           data-track-meta="Origem: {{ __('contactus.breadcrumb_title') }}">
                            {{ __('contactus.breadcrumb_home') }}
                        </a>
                    </li>

                    <li 
                        data-track-click="Breadcrumb Página Atual"
                        data-track-type="navigation"
                        data-track-meta="Página: {{ __('contactus.breadcrumb_title') }}">
                        {{ __('contactus.breadcrumb_title') }}
                    </li>
                </ul>

            </div>
        </div>
    </div>

    <!--==============================
            Contact Info Area
        ==============================-->
    <div class="space">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-6 col-md-7">
                    <div class="title-area text-center">
                        <h2 class="sec-title">{{ __('contactus.info_title') }}</h2>
                        <p class="sec-text">{{ __('contactus.info_text') }}</p>
                    </div>
                </div>
            </div>

            @php
                // Company contact info (config-driven)
                $contact = config('shop.contact', []);

                $addressLines = (array) data_get($contact, 'address_lines', []);
                $phones = (array) data_get($contact, 'phones', []);
                $emails = (array) data_get($contact, 'emails', []);

                // Social (config-driven)
                $socialLinks = config('app.social', []);
                $socialIcons = [
                    'facebook'  => 'fab fa-facebook-f',
                    'instagram' => 'fab fa-instagram',
                    'twitter'   => 'fab fa-twitter',
                    'linkedin'  => 'fab fa-linkedin-in',
                    'youtube'   => 'fab fa-youtube',
                    'tiktok'    => 'fab fa-tiktok',
                    'whatsapp'  => 'fab fa-whatsapp',
                ];

                $hasSocial = false;
                foreach ($socialIcons as $platform => $icon) {
                    if (!empty($socialLinks[$platform])) { $hasSocial = true; break; }
                }
            @endphp

            <div class="row gy-4 justify-content-center">
                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="contact-feature">
                        <div class="box-icon">
                            <i class="fa-light fa-location-dot"></i>
                        </div>
                        <div class="media-body">
                            <h3 class="box-title">{{ __('contactus.address_title') }}</h3>
                            <p class="box-text">
                                @if(!empty($addressLines))
                                    {!! nl2br(e(implode("\n", $addressLines))) !!}
                                @else
                                    {{ __('contactus.address_fallback') }}
                                @endif
                            </p>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="contact-feature">
                        <div class="box-icon bg-theme2">
                            <i class="fa-light fa-phone"></i>
                        </div>
                        <div class="media-body">
                            <h3 class="box-title">{{ __('contactus.phone_title') }}</h3>
                            <p class="box-text">
                                @if(!empty($phones))
                                    @foreach($phones as $phone)
                                        @php
                                            $label = is_array($phone) ? ($phone['label'] ?? '') : '';
                                            $value = is_array($phone) ? ($phone['value'] ?? '') : (string) $phone;
                                            $tel = preg_replace('/\s+/', '', $value);
                                        @endphp

                                        @if(!empty($value))
                                            <a href="tel:{{ $tel }}"
                                               data-track-click="Clique"
                                               data-track-type="Contacto"
                                               data-track-meta='@json([
                                                    "local" => "Página Contacto",
                                                    "tipo" => "Telefone",
                                                    "valor" => $value
                                               ], JSON_UNESCAPED_UNICODE)'>
                                                {{ $value }}@if(!empty($label)) <span class="d-block" style="font-size: 12px; opacity: .8;">{{ $label }}</span>@endif
                                            </a>
                                        @endif
                                    @endforeach
                                @else
                                    <span>{{ __('contactus.phone_fallback') }}</span>
                                @endif
                            </p>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="contact-feature">
                        <div class="box-icon bg-title">
                            <i class="fa-light fa-envelope"></i>
                        </div>
                        <div class="media-body">
                            <h3 class="box-title">{{ __('contactus.email_title') }}</h3>
                            <p class="box-text">
                                @if(!empty($emails))
                                    @foreach($emails as $email)
                                        @php
                                            $value = is_array($email) ? ($email['value'] ?? '') : (string) $email;
                                        @endphp

                                        @if(!empty($value))
                                            <a href="mailto:{{ $value }}"
                                               data-track-click="Clique"
                                               data-track-type="Contacto"
                                               data-track-meta='@json([
                                                    "local" => "Página Contacto",
                                                    "tipo" => "Email",
                                                    "valor" => $value
                                               ], JSON_UNESCAPED_UNICODE)'>
                                                {{ $value }}
                                            </a>
                                        @endif
                                    @endforeach
                                @else
                                    <span>{{ __('contactus.email_fallback') }}</span>
                                @endif
                            </p>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="contact-feature">
                        <div class="media-body">
                            <h3 class="box-title">{{ __('contactus.social_title') }}</h3>

                            @if($hasSocial)
                                <div class="th-social">
                                    @foreach($socialIcons as $platform => $icon)
                                        @if(!empty($socialLinks[$platform]))
                                            <a href="{{ $socialLinks[$platform] }}"
                                               target="_blank"
                                               rel="noopener"
                                               data-track-click="Clique"
                                               data-track-type="Rede Social"
                                               data-track-meta='@json([
                                                    "local" => "Página Contacto",
                                                    "plataforma" => ucfirst($platform)
                                               ], JSON_UNESCAPED_UNICODE)'>
                                                <i class="{{ $icon }}"></i>
                                            </a>
                                        @endif
                                    @endforeach
                                </div>
                            @else
                                <p class="box-text">{{ __('contactus.social_fallback') }}</p>
                            @endif

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--==============================
            Contact Area
        ==============================-->
    <div class="space-bottom">
        <div class="container">
            <form action="{{ route('contact.send') }}"
                  method="POST"
                  class="contact-form input-smoke ajax-contact"
                  data-track-click="Submeter"
                  data-track-type="Formulário"
                  data-track-meta='@json([
                        "local" => "Página Contacto",
                        "formulario" => "Contacto"
                  ], JSON_UNESCAPED_UNICODE)'>
                @csrf

                <h2 class="sec-title">{{ __('contactus.form_title') }}</h2>

                <div class="row">
                    <input type="hidden" name="website" value="">
                    <input type="hidden" name="form_loaded_at" value="{{ time() }}">
                    
                    <div class="form-group col-md-6">
                        <input type="text"
                               class="form-control @error('name') is-invalid @enderror"
                               name="name"
                               id="name"
                               value="{{ old('name') }}"
                               placeholder="{{ __('contactus.form_name') }}">
                        <i class="fal fa-user"></i>
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group col-md-6">
                        <input type="email"
                               class="form-control @error('email') is-invalid @enderror"
                               name="email"
                               id="email"
                               value="{{ old('email') }}"
                               placeholder="{{ __('contactus.form_email') }}">
                        <i class="fal fa-envelope"></i>
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group col-md-6">
                        <input type="tel"
                               class="form-control @error('number') is-invalid @enderror"
                               name="number"
                               id="number"
                               value="{{ old('number') }}"
                               placeholder="{{ __('contactus.form_phone') }}">
                        <i class="fal fa-phone"></i>
                        @error('number')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group col-md-6">
                        <select name="subject" id="subject" class="form-select @error('subject') is-invalid @enderror">
                            <option value="" disabled {{ old('subject') ? '' : 'selected' }} hidden>
                                {{ __('contactus.form_subject_placeholder') }}
                            </option>

                            @foreach(__('contactus.subjects') as $value => $label)
                                <option value="{{ $value }}" {{ old('subject') === $value ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                        <i class="fal fa-chevron-down"></i>
                        @error('subject')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group col-12">
                        <textarea name="message"
                                  id="message"
                                  cols="30"
                                  rows="3"
                                  class="form-control @error('message') is-invalid @enderror"
                                  placeholder="{{ __('contactus.form_message') }}">{{ old('message') }}</textarea>
                        <i class="fal fa-pencil"></i>
                        @error('message')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="form-btn col-12">
                        <button class="th-btn btn-fw" type="submit">
                            {{ __('contactus.form_submit') }}<i class="fas fa-chevrons-right ms-2"></i>
                        </button>
                    </div>
                </div>

                <p class="form-messages alert mb-0 mt-3">
                    @if($errors->any())
                        <span class="error">{{ __('contactus.form_error_general') }}</span>
                    @endif
                </p>
            </form>
        </div>
    </div>


    <!--==============================
            Map Area
        ==============================-->
    <div class="space-bottom">
        <div class="contact-map">
            <iframe src="{{ config('shop.contact.map_embed_url') }}"
                    allowfullscreen=""
                    loading="lazy"></iframe>
        </div>
    </div>

@endsection

@push('styles')
<style>    
    .fa-chevron-down{
        display: none !important;
    }
    
    /* Estilo para campo com erro */
    .form-group .is-invalid {
        border-color: var(--dm-error);
        padding-right: calc(1.5em + 0.75rem);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }

    /* Mensagem de erro */
    .form-group .invalid-feedback {
        display: block;
        width: 100%;
        margin-top: 0.25rem;
        font-size: 0.875em;
        color: var(--dm-error);
        font-weight: 500;
    }

    /* Estilo para campo com sucesso (quando validado) */
    .form-group .is-valid {
        border-color: var(--dm-success);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23077E07' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }

    /* Ajuste para o ícone não sobrepor a mensagem de erro */
    .form-group {
        position: relative;
        margin-bottom: 2rem;
    }

    .form-group .invalid-feedback {
        position: absolute;
        bottom: -1.5rem;
        left: 0;
        color: var(--dm-error);
    }

    /* Estilo para o ícone dentro do campo */
    .form-group i {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--dm-green-soft);
        pointer-events: none;
        transition: color 0.3s ease;
    }

    .form-group:hover i {
        color: var(--dm-orange);
    }

    /* Estilo para campos em foco */
    .form-group .form-control:focus {
        border-color: var(--dm-orange);
        box-shadow: 0 0 0 0.25rem rgba(210, 133, 39, 0.25);
        outline: 0;
    }

    .form-group .form-control:focus + i {
        color: var(--dm-orange-dark);
    }

    /* Estilo para o select */
    .form-group .form-select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        padding-right: 2.5rem;
    }

    /* Ajuste para o ícone do select */
    .form-group .fa-chevron-down {
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--dm-green-soft);
    }

    /* Mensagens de sucesso/erro gerais */
    .form-messages {
        padding: 1rem;
        border-radius: 0.5rem;
        font-weight: 500;
    }

    .form-messages.success {
        background-color: rgba(7, 126, 7, 0.1);
        color: var(--dm-success);
        border: 1px solid var(--dm-success);
    }

    .form-messages.error {
        background-color: rgba(220, 53, 69, 0.1);
        color: var(--dm-error);
        border: 1px solid var(--dm-error);
    }

    /* Container e título com cores da Dona Maria */
    .sec-title {
        color: var(--dm-green);
        font-weight: 700;
        margin-bottom: 2rem;
        position: relative;
    }

    .sec-title::after {
        content: '';
        position: absolute;
        bottom: -0.5rem;
        left: 0;
        width: 60px;
        height: 3px;
        background-color: var(--dm-orange);
    }

    /* Placeholders com cor mais suave */
    .form-control::placeholder {
        color: var(--dm-bg-soft);
        opacity: 0.8;
    }
    
</style>    
@endpush