@extends('layout.front.master')

@section('title', 'Aplicar al programa de Partners — BewPro')
@section('description', 'Form de aplicación al programa de Partners oficiales BewPro.')

@section('content')

<section class="bp-section" style="padding: 48px 0;">
    <div class="container container-xl-custom">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="mb-4">
                    <a href="{{ route('resellers.landing') }}" class="bp-link-arrow" style="color: var(--grey-700);">
                        <i class="fas fa-arrow-left"></i> Volver al programa
                    </a>
                </div>
                <div class="bp-pretitle mb-3">
                    <span class="bp-pretitle-dot"></span>
                    <span>Aplicación a Partner Oficial</span>
                </div>
                <h1 class="bp-hero-title" style="font-size: 36px; margin-bottom: 16px;">
                    Contanos sobre tu negocio
                </h1>
                <p class="bp-hero-lead" style="margin-bottom: 32px;">
                    5 minutos. Te respondemos en menos de 48hs hábiles al email <strong style="color: var(--light);">{{ $authUser->email }}</strong>.
                </p>

                @if($errors->any())
                <div class="alert alert-danger mb-4">
                    <ul class="mb-0">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
                </div>
                @endif

                <div class="bp-apply-card">
                    <form action="{{ route('resellers.apply.store') }}" method="POST">
                        @csrf

                        <div class="bp-apply-group">
                            <label class="bp-apply-label">¿Cómo se llama tu negocio o agencia?</label>
                            <input type="text" name="business_name" value="{{ old('business_name') }}"
                                   class="bp-apply-input" maxlength="200" required
                                   placeholder="Ej: Acme Digital">
                        </div>

                        <div class="bp-apply-group">
                            <label class="bp-apply-label">¿Tenés sitio web?</label>
                            <input type="url" name="business_url" value="{{ old('business_url') }}"
                                   class="bp-apply-input" maxlength="255"
                                   placeholder="https://miagencia.com (opcional)">
                            <span class="bp-apply-hint">Si no tenés todavía, no pasa nada — empezamos juntos.</span>
                        </div>

                        <div class="bp-apply-group">
                            <label class="bp-apply-label">¿Dónde vendés?</label>
                            <select name="target_market" class="bp-apply-input" required>
                                @foreach(\App\Models\ResellerApplication::targetMarketOptions() as $val => $label)
                                    <option value="{{ $val }}" {{ old('target_market') === $val ? 'selected' : '' }}>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="bp-apply-group">
                            <label class="bp-apply-label">¿En qué industrias te enfocás?</label>
                            <input type="text" name="focus_areas" value="{{ old('focus_areas') }}"
                                   class="bp-apply-input" maxlength="500"
                                   placeholder="Ej: inmobiliarias, restaurantes, profesionales (opcional)">
                            <span class="bp-apply-hint">Las que más conocés. Te orientamos al catálogo correspondiente.</span>
                        </div>

                        <div class="bp-apply-group">
                            <label class="bp-apply-label">¿Cuántos clientes estimás por mes?</label>
                            <select name="monthly_clients_estimate" class="bp-apply-input" required>
                                @foreach(\App\Models\ResellerApplication::clientsEstimateOptions() as $val => $label)
                                    <option value="{{ $val }}" {{ old('monthly_clients_estimate') === $val ? 'selected' : '' }}>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="bp-apply-group">
                            <label class="bp-apply-label">¿Por qué querés ser Partner Oficial?</label>
                            <textarea name="why_partner" class="bp-apply-input" rows="5" required minlength="30" maxlength="2000"
                                      placeholder="Contanos qué te llamó la atención del programa, qué tipo de clientes pensás atender, cómo creés que sumás valor.">{{ old('why_partner') }}</textarea>
                            <span class="bp-apply-hint">Mínimo 30 caracteres. Sin presión — usá tus palabras.</span>
                        </div>

                        <div class="d-flex flex-wrap gap-2 mt-4">
                            <button type="submit" class="bp-btn bp-btn-primary bp-btn-lg">
                                Enviar aplicación <i class="fas fa-arrow-right"></i>
                            </button>
                            <a href="{{ route('resellers.landing') }}" class="bp-btn bp-btn-ghost bp-btn-lg">Cancelar</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('css')
@include('partials._bp-platform-styles')
<style>
.bp-apply-card { background: var(--secondary-100); border: 1px solid var(--primary-rgba-10); padding: 32px; }
.bp-apply-group { margin-bottom: 24px; }
.bp-apply-label { color: var(--light); font-size: 15px; font-weight: 600; display: block; margin-bottom: 8px; }
.bp-apply-input {
    width: 100%; padding: 12px 16px; font-size: 14px;
    background: var(--secondary); color: var(--light);
    border: 1px solid var(--primary-rgba-20); border-radius: 4px;
    transition: border-color 0.15s;
    font-family: inherit;
}
.bp-apply-input:focus { outline: none; border-color: var(--primary); }
.bp-apply-input::placeholder { color: var(--grey-700); }
select.bp-apply-input { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }
.bp-apply-hint { color: var(--grey-700); font-size: 12px; margin-top: 6px; display: block; }
</style>
@endsection