@extends('backend.template-admin')

@section('content')
    <div class="bg-white p-6 rounded-lg shadow-md">
        <div class="mb-6">
            <h2 class="text-2xl font-bold text-gray-800">Detail About</h2>
            <div class="flex gap-4 mt-2">
                <a href="{{ route('admin.about.index') }}" class="text-orange-500 hover:underline">
                    <i class="fa fa-arrow-left"></i> Kembali ke Daftar
                </a>
                <a href="{{ route('admin.about.edit', $about->id) }}" class="text-blue-500 hover:underline">
                    <i class="fa fa-pencil"></i> Edit
                </a>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="md:col-span-2">
                <div class="mb-4">
                    <h3 class="text-lg font-semibold text-gray-700 mb-2">Content:</h3>
                    <div class="prose max-w-none">
                        {!! $about->content !!}
                    </div>
                </div>
            </div>
            
            <div class="space-y-4">
                <div>
                    <h3 class="text-lg font-semibold text-gray-700 mb-2">Status:</h3>
                    @if ($about->status == 'enable')
                        <span class="bg-green-100 text-sm px-4 py-2 rounded-md text-green-500">Enable</span>
                    @else
                        <span class="bg-red-100 text-sm px-4 py-2 rounded-md text-red-500">Disabled</span>
                    @endif
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold text-gray-700 mb-2">Created At:</h3>
                    <p class="text-gray-600">{{ $about->created_at->format('d M Y H:i') }}</p>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold text-gray-700 mb-2">Updated At:</h3>
                    <p class="text-gray-600">{{ $about->updated_at->format('d M Y H:i') }}</p>
                </div>
            </div>
        </div>
    </div>
@endsection