@extends('layouts.app')

@section('title', 'Admin - Ver Campaña')
@section('content')

<div class="p-4 w-full">
    <div class="w-full mb-6 p-4 rounded-lg shadow-md bg-white dark:bg-gray-800">
        <div class="flex items-center justify-between gap-3 flex-wrap">
            <div>
                <h1 class="text-3xl font-bold dark:text-gray-400">Campaña #{{ $campana->id }}</h1>
                <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">{{ $campana->nombre }}</p>
            </div>

            <div class="flex gap-2">
                <a href="{{ route('admin.campanas.edit', $campana->id) }}"
                    class="bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded text-sm">
                    Editar
                </a>
                <a href="{{ route('admin.campanas.registros', $campana->id) }}"
                    class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded text-sm">
                    Ver registros
                </a>
                <a href="{{ route('admin.campanas') }}"
                    class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded text-sm">
                    Volver
                </a>
            </div>
        </div>
    </div>

    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 space-y-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="p-4 rounded-lg border border-gray-200 dark:border-gray-700">
                <p class="text-xs text-gray-500 dark:text-gray-400">Estado</p>
                <p class="mt-1 dark:text-gray-200">
                    @if($campana->estado == 1)
                    <span class="text-xs bg-emerald-600 text-white px-2 py-1 rounded">Activa</span>
                    @else
                    <span class="text-xs bg-gray-500 text-white px-2 py-1 rounded">Inactiva</span>
                    @endif
                </p>
            </div>
            <div class="p-4 rounded-lg border border-gray-200 dark:border-gray-700">
                <p class="text-xs text-gray-500 dark:text-gray-400">Creada</p>
                <p class="mt-1 dark:text-gray-200">{{ $campana->created_at->format('d/m/Y H:i') }}</p>
            </div>
            <div class="p-4 rounded-lg border border-gray-200 dark:border-gray-700">
                <p class="text-xs text-gray-500 dark:text-gray-400">Actualizada</p>
                <p class="mt-1 dark:text-gray-200">{{ $campana->updated_at->format('d/m/Y H:i') }}</p>
            </div>
        </div>

        <div class="p-4 rounded-lg border border-gray-200 dark:border-gray-700">
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">Bases</p>
            <div class="prose max-w-none dark:prose-invert dark:text-gray-200">
                {!! nl2br(e($campana->bases)) !!}
            </div>
        </div>
    </div>
</div>

@endsection