<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-300">Admin</p>
                <h2 class="text-2xl font-bold text-slate-950 dark:text-white">{{ $motivation->title }}</h2>
            </div>
            <a href="{{ route('admin.motivations.index') }}" class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-bold text-white transition hover:-translate-y-0.5 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400">All Motivations</a>
        </div>
    </x-slot>

    <div class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
        <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-300">{{ $motivation->author ?: 'ViZuTrade Admin' }}</p>
        <h3 class="mt-2 text-2xl font-bold text-slate-950 dark:text-white">{{ $motivation->title }}</h3>
        <p class="mt-4 text-base leading-7 text-slate-600 dark:text-slate-300">{{ $motivation->message }}</p>
        <p class="mt-5 text-sm text-slate-500 dark:text-slate-400">Display date: {{ $motivation->display_date?->format('M d, Y') ?? 'None' }} | Status: {{ ucfirst($motivation->status) }}</p>
    </div>

    <div class="mt-6 flex flex-wrap gap-3">
        <a href="{{ route('admin.motivations.edit', $motivation) }}" class="rounded-lg border border-blue-100 px-4 py-2 text-sm font-bold text-blue-700 transition hover:-translate-y-0.5 hover:bg-blue-50 dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60">Edit</a>
        <form method="POST" action="{{ route('admin.motivations.mark-today', $motivation) }}">
            @csrf
            @method('PATCH')
            <button class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-bold text-white transition hover:-translate-y-0.5 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400">Mark As Today's Motivation</button>
        </form>
        <form method="POST" action="{{ route('admin.motivations.toggle-status', $motivation) }}">
            @csrf
            @method('PATCH')
            <button class="rounded-lg border border-blue-100 px-4 py-2 text-sm font-bold text-blue-700 transition hover:-translate-y-0.5 hover:bg-blue-50 dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60">{{ $motivation->isActive() ? 'Deactivate' : 'Activate' }}</button>
        </form>
        <form method="POST" action="{{ route('admin.motivations.destroy', $motivation) }}" onsubmit="return confirm('Delete this motivation?');">
            @csrf
            @method('DELETE')
            <button class="rounded-lg border border-red-200 px-4 py-2 text-sm font-bold text-red-700 transition hover:-translate-y-0.5 hover:bg-red-50 dark:border-red-900/60 dark:text-red-300 dark:hover:bg-red-950/40">Delete</button>
        </form>
    </div>
</x-app-layout>
