@extends('v2-portal::app-layout', [
    'pageTitle'             => 'Fale Conosco — ' . config('app.name'),
    'pageDescription'       => 'Entre em contato conosco. Envie sua mensagem, dúvida ou sugestão.',
    'gtag'                  => ['page_context' => 'fale-conosco'],
    'schemas'               => [
        [
            '@context' => 'https://schema.org',
            '@type' => 'ContactPage',
            'name' => 'Fale Conosco',
            'description' => 'Entre em contato conosco. Envie sua mensagem, dúvida ou sugestão.',
            'url' => route('v2.fale-conosco.portal.index', [], false)
        ]
    ],
    'fullWidthMain'         => true,
    'showHeader'            => false,
    'showMainHeader'        => false,
    'showMainFooter'        => false,
    'showFooter'            => false,
    'showAccessibilityBar'  => false,
    'showMainLeftArea'      => false,
    'showMainRightArea'     => false,
])

@php
    /** @var array $configs */
@endphp

@section('main-section-area')

{{-- HERO BREADCRUMB --}}
<div class="breadcrumb-wrapper bg-cover" style="background-image: url('{{ asset('assets/sucesu/img/hero/breadcrumb.png') }}');">
    <div class="container">
        <div class="page-heading">
            <ul class="breadcrumb-items">
                <li><a href="{{ url('/') }}">Home</a></li>
                <li><i class="bi bi-chevron-right mx-2"></i></li>
                <li>Fale Conosco</li>
            </ul>
            <h1>Fale Conosco</h1>
        </div>
    </div>
</div>

{{-- FORM + INFO --}}
<section class="section-padding">
    <div class="container">
        <div class="row g-5">
            {{-- Form Column --}}
            <div class="col-lg-7">
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4">
                        <h2 class="h4 fw-bold mb-4">
                            <i class="bi bi-send me-2" aria-hidden="true"></i>
                            Envie sua Mensagem
                        </h2>

                        <form action="{{ route('v2.fale-conosco.portal.store') }}" method="POST">
                            {{ csrf_field() }}

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="name" class="form-label fw-semibold">
                                        Nome <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" id="name" name="name"
                                           class="form-control" required
                                           value="{{ old('name') }}"
                                           placeholder="Seu nome completo"
                                           maxlength="255">
                                </div>

                                <div class="col-md-6">
                                    <label for="email" class="form-label fw-semibold">
                                        Email <span class="text-danger">*</span>
                                    </label>
                                    <input type="email" id="email" name="email"
                                           class="form-control" required
                                           value="{{ old('email') }}"
                                           placeholder="seu@email.com"
                                           maxlength="255">
                                </div>

                                <div class="col-md-6">
                                    <label for="phone" class="form-label fw-semibold">Telefone</label>
                                    <input type="tel" id="phone" name="phone"
                                           class="form-control"
                                           value="{{ old('phone') }}"
                                           placeholder="(61) 99999-9999"
                                           data-mask="phone"
                                           maxlength="16"
                                           inputmode="tel">
                                </div>

                                <div class="col-md-6">
                                    <label for="subject" class="form-label fw-semibold">
                                        Assunto <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" id="subject" name="subject"
                                           class="form-control" required
                                           value="{{ old('subject') }}"
                                           placeholder="Assunto da mensagem"
                                           maxlength="255">
                                </div>

                                <div class="col-12">
                                    <label for="message" class="form-label fw-semibold">
                                        Mensagem <span class="text-danger">*</span>
                                    </label>
                                    <textarea id="message" name="message"
                                              class="form-control" rows="6" required
                                              placeholder="Digite sua mensagem...">{{ old('message') }}</textarea>
                                    <div class="form-text">Máximo de 10.000 caracteres.</div>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary btn-lg mt-4">
                                <i class="bi bi-send me-2" aria-hidden="true"></i>
                                Enviar Mensagem
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            {{-- Info Column --}}
            <div class="col-lg-5">
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body p-4">
                        <h2 class="h5 fw-bold mb-3">
                            <i class="bi bi-info-circle me-2" aria-hidden="true"></i>
                            Informações de Contato
                        </h2>

                        <div class="d-flex flex-column gap-3">
                            @if(!empty($configs['phone']))
                                <div class="d-flex align-items-start">
                                    <div class="me-3 text-primary">
                                        <i class="bi bi-telephone fs-5" aria-hidden="true"></i>
                                    </div>
                                    <div>
                                        <strong class="d-block small text-muted text-uppercase">Telefone</strong>
                                        <span>{{ $configs['phone'] }}</span>
                                    </div>
                                </div>
                            @endif

                            @if(!empty($configs['email']))
                                <div class="d-flex align-items-start">
                                    <div class="me-3 text-primary">
                                        <i class="bi bi-envelope fs-5" aria-hidden="true"></i>
                                    </div>
                                    <div>
                                        <strong class="d-block small text-muted text-uppercase">Email</strong>
                                        <a href="mailto:{{ $configs['email'] }}">{{ $configs['email'] }}</a>
                                    </div>
                                </div>
                            @endif

                            @if(!empty($configs['address']))
                                <div class="d-flex align-items-start">
                                    <div class="me-3 text-primary">
                                        <i class="bi bi-geo-alt fs-5" aria-hidden="true"></i>
                                    </div>
                                    <div>
                                        <strong class="d-block small text-muted text-uppercase">Endereço</strong>
                                        <span>{{ $configs['address'] }}</span>
                                        @if(!empty($configs['zipcode']))
                                            <br><span class="text-muted small">{{ $configs['zipcode'] }}</span>
                                        @endif
                                    </div>
                                </div>
                            @endif

                            @if(!empty($configs['po_box']))
                                <div class="d-flex align-items-start">
                                    <div class="me-3 text-primary">
                                        <i class="bi bi-mailbox fs-5" aria-hidden="true"></i>
                                    </div>
                                    <div>
                                        <strong class="d-block small text-muted text-uppercase">Caixa Postal</strong>
                                        <span>{{ $configs['po_box'] }}</span>
                                    </div>
                                </div>
                            @endif

                            @if(!empty($configs['business_hours']))
                                <div class="d-flex align-items-start">
                                    <div class="me-3 text-primary">
                                        <i class="bi bi-clock fs-5" aria-hidden="true"></i>
                                    </div>
                                    <div>
                                        <strong class="d-block small text-muted text-uppercase">Horário</strong>
                                        <span>{{ $configs['business_hours'] }}</span>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                @if(!empty($configs['map_embed_url']))
                    <div class="card border-0 shadow-sm">
                        <div class="card-body p-0">
                            <div class="ratio ratio-16x9">
                                <iframe src="{{ $configs['map_embed_url'] }}"
                                        style="border:0;"
                                        allowfullscreen=""
                                        loading="lazy"
                                        referrerpolicy="no-referrer-when-downgrade"
                                        title="Mapa de localização">
                                </iframe>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</section>

@endsection