@extends('layouts.vuexy')

@section('title', 'Nueva campaña — Configuración')

@section('content')
    @include('campaigns.partials._wizard-steps', ['step' => 2])

    @if ($errors->any())
        <div class="alert alert-danger">{{ $errors->first() }}</div>
    @endif

    <div class="row g-6">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center gap-3 mb-6 pb-4 border-bottom">
                        <img src="{{ $content['image_url'] }}" class="rounded" style="width: 56px; height: 56px; object-fit: cover;">
                        <div>
                            <strong>{{ $content['restaurant_name'] }}</strong>
                            <br>
                            <a href="{{ route('campaigns.create.content') }}" class="small">Editar contenido</a>
                        </div>
                    </div>

                    <form method="POST" action="{{ route('campaigns.create.settings') }}">
                        @csrf

                        <div class="mb-4">
                            <label class="form-label" for="name">Nombre de la campaña</label>
                            <input type="text" class="form-control" id="name" name="name" maxlength="255" required
                                value="{{ old('name', $draft['name'] ?? ($content['restaurant_name'].' — '.now()->format('d/m/Y'))) }}">
                        </div>

                        <div class="mb-4">
                            <label class="form-label" for="objective">Objetivo</label>
                            <select class="form-select" id="objective" name="objective" required>
                                @php $objective = old('objective', $draft['objective'] ?? 'conversions'); @endphp
                                <option value="app_installs" @selected($objective === 'app_installs')>Instalación de la app</option>
                                <option value="traffic" @selected($objective === 'traffic')>Tráfico</option>
                                <option value="conversions" @selected($objective === 'conversions')>Conversiones / pedidos</option>
                            </select>
                        </div>

                        <div class="row g-4 mb-4">
                            <div class="col-md-4">
                                <label class="form-label" for="budget_type">Presupuesto</label>
                                @php $budgetType = old('budget_type', $draft['budget_type'] ?? 'daily'); @endphp
                                <select class="form-select" id="budget_type" name="budget_type" required>
                                    <option value="daily" @selected($budgetType === 'daily')>Diario</option>
                                    <option value="lifetime" @selected($budgetType === 'lifetime')>Total de la campaña</option>
                                </select>
                            </div>
                            <div class="col-md-8">
                                <label class="form-label" for="budget_amount">Monto (€)</label>
                                <input type="number" step="0.01" min="1" class="form-control" id="budget_amount" name="budget_amount" required
                                    value="{{ old('budget_amount', $draft['budget_amount'] ?? '10.00') }}">
                            </div>
                        </div>

                        <div class="row g-4 mb-4">
                            <div class="col-md-6">
                                <label class="form-label" for="start_date">Fecha de inicio</label>
                                <input type="date" class="form-control" id="start_date" name="start_date" required
                                    value="{{ old('start_date', $draft['start_date'] ?? now()->format('Y-m-d')) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label" for="end_date">Fecha de fin (opcional)</label>
                                <input type="date" class="form-control" id="end_date" name="end_date"
                                    value="{{ old('end_date', $draft['end_date'] ?? '') }}">
                            </div>
                        </div>

                        <div class="row g-4 mb-6">
                            <div class="col-md-8">
                                <label class="form-label" for="city">Ciudad</label>
                                <input type="text" class="form-control" id="city" name="city" maxlength="255"
                                    value="{{ old('city', $draft['city'] ?? '') }}" placeholder="Ej: Figueres">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label" for="geo_radius_km">Radio (km)</label>
                                <input type="number" min="1" max="100" class="form-control" id="geo_radius_km" name="geo_radius_km"
                                    value="{{ old('geo_radius_km', $draft['geo_radius_km'] ?? 5) }}">
                            </div>
                        </div>

                        <input type="hidden" name="geo_lat" value="{{ $content['restaurant_lat'] ?? '' }}">
                        <input type="hidden" name="geo_lng" value="{{ $content['restaurant_lng'] ?? '' }}">

                        <div class="mb-6">
                            <label class="form-label d-block">Audiencia</label>
                            @php $audienceType = old('audience_type', $draft['audience_type'] ?? 'new'); @endphp

                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="audience_type" id="audience_new" value="new" {{ $audienceType === 'new' ? 'checked' : '' }}>
                                <label class="form-check-label" for="audience_new">Nueva audiencia (por ubicación)</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="audience_type" id="audience_remarketing" value="remarketing" disabled>
                                <label class="form-check-label text-body-secondary" for="audience_remarketing">
                                    Remarketing — disponible en Fase 5 (requiere el SDK de eventos de la app)
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="audience_type" id="audience_lookalike" value="lookalike" disabled>
                                <label class="form-check-label text-body-secondary" for="audience_lookalike">
                                    Lookalike — disponible en Fase 5 (requiere el SDK de eventos de la app)
                                </label>
                            </div>
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="{{ route('campaigns.create.content') }}" class="btn btn-label-secondary">Atrás</a>
                            <button type="submit" class="btn btn-primary">Siguiente: Preview</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <h6 class="mb-4">Vista previa del anuncio</h6>
            @include('campaigns.partials._ad-preview', [
                'imageUrl' => $content['image_url'],
                'restaurantName' => $content['restaurant_name'],
                'headline' => $content['headline'] ?? null,
                'primaryText' => $content['primary_text'] ?? null,
                'badgeText' => $content['discount_badge_text'] ?? null,
                'ctaLabel' => 'Realizar pedido',
            ])
        </div>
    </div>
@endsection