@extends('v2-portal::app-layout', [
    'pageTitle'             => 'Associe-se — ' . config('app.name'),
    'pageDescription'       => 'Torne-se um associado da ' . config('app.name') . '. Conheça nossos planos e preencha o formulário.',
    'fullWidthMain'         => true,
    'showHeader'            => false,
    'showMainHeader'        => false,
    'showMainFooter'        => false,
    'showFooter'            => false,
    'showAccessibilityBar'  => false,
    'showMainLeftArea'      => false,
    'showMainRightArea'     => false,
])

@section('main-section-area')

{{-- HERO BREADCRUMB — mesmo padrão do portal (breadcrumb-wrapper bg-cover) --}}
<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>Associe-se</li>
            </ul>
            <h1>{{ $configs['associese_form_title'] ?? 'Associe-se' }}</h1>
        </div>
    </div>
</div>

{{-- INTRO TEXT --}}
@if(!empty($configs['associese_intro_text']))
    <section class="section-padding">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <p class="lead text-center text-muted mb-0">
                        {{ $configs['associese_intro_text'] }}
                    </p>
                </div>
            </div>
        </div>
    </section>
@endif

{{-- PLANS SECTION --}}
@if(($configs['associese_show_plans'] ?? '1') === '1' && $plans->count() > 0)
    <section class="section-padding section-bg">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold mb-2">Nossos Planos</h2>
                <p class="text-muted">Escolha o plano ideal para você</p>
            </div>

            <div class="row g-4 justify-content-center">
                @foreach($plans as $plan)
                    <div class="col-lg-4 col-md-6">
                        <div class="team-box-items mt-0 h-100">
                            @if($plan->gallery->count() > 0 && $plan->gallery->first()->galleryMedia)
                                @php
                                    $firstMedia = $plan->gallery->first()->galleryMedia;
                                    $isImage = strpos($firstMedia->mime_type ?? '', 'image/') === 0;
                                    $imgVariants = !empty($firstMedia->variants) ? json_decode($firstMedia->variants, true) : [];
                                @endphp
                                @if($isImage)
                                    @include('v2-service-media::components.picture', [
                                        'originalPath' => $firstMedia->file_path,
                                        'variants' => is_array($imgVariants) ? $imgVariants : [],
                                        'alt' => $plan->name,
                                        'class' => 'w-100',
                                        'style' => 'height: 200px; object-fit: cover;',
                                        'lazy' => true,
                                    ])
                                @endif
                            @else
                                <div class="bg-primary bg-opacity-10 d-flex align-items-center justify-content-center"
                                     style="height: 200px;">
                                    <i class="bi bi-person-badge text-primary" style="font-size: 4rem;" aria-hidden="true"></i>
                                </div>
                            @endif

                            <div class="team-content p-4 d-flex flex-column">
                                <h3 class="h5 fw-bold text-center mb-3">{{ $plan->name }}</h3>

                                <div class="text-center mb-3">
                                    <span class="h2 fw-bold text-primary">
                                        R$ {{ number_format($plan->price, 2, ',', '.') }}
                                    </span>
                                    <span class="text-muted">/{{ $plan->billing_cycle === 'monthly' ? 'mês' : 'ano' }}</span>
                                </div>

                                @if(!empty($plan->htmlDescription))
                                    <div class="mb-3 small text-muted flex-grow-1">
                                        {!! $plan->htmlDescription !!}
                                    </div>
                                @endif

                                @if($plan->gallery->count() > 1)
                                    <div class="mt-auto">
                                        <div class="d-flex gap-1 flex-wrap">
                                            @foreach($plan->gallery->take(4) as $idx => $item)
                                                @if($item->galleryMedia && strpos($item->galleryMedia->mime_type ?? '', 'image/') === 0)
                                                     <img alt="Galeria {{ $plan->name }}"
                                                          src="{{ v2_storage_url($item->galleryMedia->file_path) }}"
                                                         class="rounded border"
                                                         style="width: 40px; height: 40px; object-fit: cover;"
                                                         loading="lazy" decoding="async" width="40" height="40">
                                                @endif
                                            @endforeach
                                            @if($plan->gallery->count() > 4)
                                                <span class="badge bg-secondary d-flex align-items-center">+{{ $plan->gallery->count() - 4 }}</span>
                                            @endif
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endif

{{-- FORM SECTION --}}
<section class="section-padding">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white py-3">
                        <h2 class="h4 mb-0">
                            <i class="bi bi-pencil-square me-2" aria-hidden="true"></i>
                            Formulário de Interesse
                        </h2>
                    </div>
                    <div class="card-body p-4">
                        <form method="POST" action="{{ route('v2.associe-se.portal.store') }}" novalidate class="associese-form">
                            {{ csrf_field() }}

                            <div class="row g-3">
                                {{-- Nome --}}
                                <div class="col-md-6">
                                    <label for="name" class="form-label fw-semibold">Nome completo <span class="text-danger">*</span></label>
                                    <input type="text" id="name" name="name"
                                           class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}"
                                           required maxlength="255" value="{{ old('name') }}" placeholder="Seu nome">
                                    @if ($errors->has('name'))
                                        <div class="text-danger small mt-1">{{ $errors->first('name') }}</div>
                                    @endif
                                </div>

                                {{-- Email --}}
                                <div class="col-md-6">
                                    <label for="email" class="form-label fw-semibold">E-mail <span class="text-danger">*</span></label>
                                    <input type="email" id="email" name="email"
                                           class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}"
                                           required maxlength="255" value="{{ old('email') }}" placeholder="seu@email.com">
                                    @if ($errors->has('email'))
                                        <div class="text-danger small mt-1">{{ $errors->first('email') }}</div>
                                    @endif
                                </div>

                                {{-- Telefone --}}
                                <div class="col-md-6">
                                    <label for="phone" class="form-label fw-semibold">Telefone</label>
                                    <input type="text" id="phone" name="phone"
                                           class="form-control{{ $errors->has('phone') ? ' is-invalid' : '' }}"
                                           maxlength="50" value="{{ old('phone') }}" placeholder="(61) 99999-9999">
                                    @if ($errors->has('phone'))
                                        <div class="text-danger small mt-1">{{ $errors->first('phone') }}</div>
                                    @endif
                                </div>

                                {{-- Empresa --}}
                                <div class="col-md-6">
                                    <label for="company" class="form-label fw-semibold">Empresa</label>
                                    <input type="text" id="company" name="company"
                                           class="form-control{{ $errors->has('company') ? ' is-invalid' : '' }}"
                                           maxlength="255" value="{{ old('company') }}" placeholder="Nome da empresa">
                                    @if ($errors->has('company'))
                                        <div class="text-danger small mt-1">{{ $errors->first('company') }}</div>
                                    @endif
                                </div>

                                {{-- Estado (UF) --}}
                                <div class="col-md-6">
                                    <label for="state" class="form-label fw-semibold">Estado</label>
                                    <select id="state" name="state"
                                            class="form-select{{ $errors->has('state') ? ' is-invalid' : '' }}">
                                        <option value="">Selecione...</option>
                                        @php
                                            $ufs = ['AC'=>'Acre','AL'=>'Alagoas','AP'=>'Amapá','AM'=>'Amazonas','BA'=>'Bahia','CE'=>'Ceará','DF'=>'Distrito Federal','ES'=>'Espírito Santo','GO'=>'Goiás','MA'=>'Maranhão','MT'=>'Mato Grosso','MS'=>'Mato Grosso do Sul','MG'=>'Minas Gerais','PA'=>'Pará','PB'=>'Paraíba','PR'=>'Paraná','PE'=>'Pernambuco','PI'=>'Piauí','RJ'=>'Rio de Janeiro','RN'=>'Rio Grande do Norte','RS'=>'Rio Grande do Sul','RO'=>'Rondônia','RR'=>'Roraima','SC'=>'Santa Catarina','SP'=>'São Paulo','SE'=>'Sergipe','TO'=>'Tocantins'];
                                        @endphp
                                        @foreach($ufs as $sigla => $nome)
                                            <option value="{{ $sigla }}" @if(old('state') === $sigla) selected @endif>{{ $nome }} ({{ $sigla }})</option>
                                        @endforeach
                                    </select>
                                    @if ($errors->has('state'))
                                        <div class="text-danger small mt-1">{{ $errors->first('state') }}</div>
                                    @endif
                                </div>

                                {{-- Cidade --}}
                                <div class="col-md-6">
                                    <label for="city" class="form-label fw-semibold">Cidade</label>
                                    <input type="text" id="city" name="city"
                                           class="form-control{{ $errors->has('city') ? ' is-invalid' : '' }}"
                                           maxlength="255" value="{{ old('city') }}" placeholder="Sua cidade">
                                    @if ($errors->has('city'))
                                        <div class="text-danger small mt-1">{{ $errors->first('city') }}</div>
                                    @endif
                                </div>

                                {{-- Plano --}}
                                @if($plans->count() > 0)
                                <div class="col-12">
                                    <label for="plan_id" class="form-label fw-semibold">Plano de Interesse</label>
                                    <select id="plan_id" name="plan_id"
                                            class="form-select{{ $errors->has('plan_id') ? ' is-invalid' : '' }}">
                                        <option value="">Selecione um plano (opcional)</option>
                                        @foreach($plans as $plan)
                                            <option value="{{ $plan->id }}" @if(old('plan_id') === $plan->id) selected @endif>
                                                {{ $plan->name }} — R$ {{ number_format($plan->price, 2, ',', '.') }}/{{ $plan->billing_cycle === 'monthly' ? 'mês' : 'ano' }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @if ($errors->has('plan_id'))
                                        <div class="text-danger small mt-1">{{ $errors->first('plan_id') }}</div>
                                    @endif
                                </div>
                                @endif

                                {{-- Mensagem --}}
                                <div class="col-12">
                                    <label for="message" class="form-label fw-semibold">Mensagem</label>
                                    <textarea id="message" name="message"
                                              class="form-control{{ $errors->has('message') ? ' is-invalid' : '' }}"
                                              rows="4" placeholder="Conte-nos um pouco sobre seu interesse...">{{ old('message') }}</textarea>
                                    @if ($errors->has('message'))
                                        <div class="text-danger small mt-1">{{ $errors->first('message') }}</div>
                                    @endif
                                </div>
                            </div>

                            @if (count($errors) > 0)
                                <div class="alert alert-danger d-flex align-items-center gap-2 mt-3 mb-0 py-2 small" role="alert">
                                    <i class="bi bi-exclamation-triangle-fill flex-shrink-0" aria-hidden="true"></i>
                                    <span>Corrija os campos destacados acima antes de enviar.</span>
                                </div>
                            @endif

                            <button type="submit" class="btn btn-primary btn-lg w-100 mt-4">
                                <i class="bi bi-send me-2" aria-hidden="true"></i> Enviar Solicitação
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- BENEFITS STRIP --}}
<section class="section-padding section-bg">
    <div class="container">
        <div class="row g-4 text-center">
            <div class="col-md-4">
                <i class="bi bi-shield-check text-primary" style="font-size: 2.5rem;" aria-hidden="true"></i>
                <h3 class="h5 fw-bold mt-3">Benefícios Exclusivos</h3>
                <p class="text-muted small mb-0">Acesso a vantagens e descontos especiais para associados.</p>
            </div>
            <div class="col-md-4">
                <i class="bi bi-headset text-primary" style="font-size: 2.5rem;" aria-hidden="true"></i>
                <h3 class="h5 fw-bold mt-3">Suporte Prioritário</h3>
                <p class="text-muted small mb-0">Atendimento dedicado para tirar suas dúvidas.</p>
            </div>
            <div class="col-md-4">
                <i class="bi bi-people text-primary" style="font-size: 2.5rem;" aria-hidden="true"></i>
                <h3 class="h5 fw-bold mt-3">Networking</h3>
                <p class="text-muted small mb-0">Conecte-se com profissionais e empresas do setor.</p>
            </div>
        </div>
    </div>
</section>

{{-- JS: elimina o wrapper nice-select dos selects deste formulário --}}
@push('scripts')
<script>
if (typeof jQuery !== 'undefined' && jQuery.fn && jQuery.fn.niceSelect) {
    (function() {
        function fixSelects() {
            document.querySelectorAll('.associese-form .nice-select').forEach(function(wrapper) {
                var native = wrapper.querySelector('select');
                if (native) {
                    native.style.display = '';
                    native.style.visibility = 'visible';
                    native.style.opacity = '1';
                    native.style.position = 'static';
                    native.style.pointerEvents = 'auto';
                    native.style.width = '100%';
                    wrapper.parentNode.replaceChild(native, wrapper);
                }
            });
        }
        fixSelects();
        document.addEventListener('DOMContentLoaded', fixSelects);
        setTimeout(fixSelects, 500);
        setTimeout(fixSelects, 1500);
    })();
}
</script>
@endpush

@push('head-styles')
<style>
.associese-form .nice-select { display: none !important; }
.associese-form select.form-select {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    pointer-events: auto !important;
}
.associese-form input.form-control.is-invalid,
.associese-form select.form-select.is-invalid,
.associese-form textarea.form-control.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 .2rem rgba(220,53,69,.25) !important;
}
</style>
@endpush

@endsection