@extends('layouts.vuexy')

@section('title', 'Nueva campaña — Preview y confirmar')

@php
    $objectiveLabels = [
        'app_installs' => 'Instalación de la app',
        'traffic' => 'Tráfico',
        'conversions' => 'Conversiones / pedidos',
    ];
    $audienceLabels = [
        'new' => 'Nueva audiencia (por ubicación)',
        'remarketing' => 'Remarketing',
        'lookalike' => 'Lookalike',
    ];
@endphp

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

    <div class="row g-6">
        <div class="col-lg-5">
            <h6 class="mb-4">Así se vería el 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 class="col-lg-7">
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Resumen de la campaña</h6>
                    <table class="table table-borderless mb-6">
                        <tbody>
                            <tr><th class="text-body-secondary" style="width: 40%;">Nombre</th><td>{{ $settings['name'] }}</td></tr>
                            <tr><th class="text-body-secondary">Restaurante</th><td>{{ $content['restaurant_name'] }}</td></tr>
                            <tr><th class="text-body-secondary">Objetivo</th><td>{{ $objectiveLabels[$settings['objective']] }}</td></tr>
                            <tr>
                                <th class="text-body-secondary">Presupuesto</th>
                                <td>{{ number_format($settings['budget_amount'], 2) }} € / {{ $settings['budget_type'] === 'daily' ? 'día' : 'total de la campaña' }}</td>
                            </tr>
                            <tr>
                                <th class="text-body-secondary">Duración</th>
                                <td>
                                    {{ \Illuminate\Support\Carbon::parse($settings['start_date'])->format('d/m/Y') }}
                                    @if (!empty($settings['end_date']))
                                        – {{ \Illuminate\Support\Carbon::parse($settings['end_date'])->format('d/m/Y') }}
                                    @else
                                        (sin fecha de fin)
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th class="text-body-secondary">Ubicación</th>
                                <td>{{ $settings['city'] ?: 'Sin ciudad especificada' }} — radio {{ $settings['geo_radius_km'] ?? 5 }} km</td>
                            </tr>
                            <tr><th class="text-body-secondary">Audiencia</th><td>{{ $audienceLabels[$settings['audience_type']] }}</td></tr>
                        </tbody>
                    </table>

                    <div class="alert alert-info">
                        <i class="ti tabler-info-circle me-1"></i>
                        Esto se guarda como <strong>borrador</strong>. Todavía no se publica en Facebook/Instagram —
                        eso es la Fase 3 (ver <code>GIGI/plan-implementacion.md</code>).
                    </div>

                    <div class="d-flex justify-content-between">
                        <a href="{{ route('campaigns.create.settings') }}" class="btn btn-label-secondary">Atrás</a>
                        <form method="POST" action="{{ route('campaigns.store') }}">
                            @csrf
                            <button type="submit" class="btn btn-primary">Guardar como borrador</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection