@extends('backend.template-admin')

@section('content')
    <div class="flex gap-4 justify-between">
        <button
            class="bg-orange-100 mb-10 hover:bg-orange-200 transition text-sm px-4 py-2 rounded-md text-orange-500 border-2 border-orange-300">
            <a href="{{ route('admin.about.create') }}">Tambah About Baru</a>
        </button>
    </div>

    <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
        <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                <tr>
                    <th scope="col" class="px-6 py-3">No</th>
                    <th scope="col" class="px-6 py-3">Content Preview</th>
                    <th scope="col" class="px-6 py-3">Status</th>
                    <th scope="col" class="px-6 py-3">Created At</th>
                    <th scope="col" class="px-6 py-3">Actions</th>
                </tr>
            </thead>
            <tbody>
                @php $no = 1; @endphp
                @forelse ($about as $item)
                    <tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                            {{ $no++ }}
                        </th>
                        <td class="px-6 py-4">
                            <div class="max-w-xs">
                                {!! Str::limit(strip_tags($item->content), 100, '...') !!}
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            @if ($item->status == 'enable')
                                <span class="bg-green-100 text-sm px-4 py-1 rounded-md text-green-500">Enable</span>
                            @else
                                <span class="bg-red-100 text-sm px-4 py-1 rounded-md text-red-500">Disabled</span>
                            @endif
                        </td>
                        <td class="px-6 py-4">
                            {{ $item->created_at->format('d M Y H:i') }}
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex gap-4">
                                <a href="{{ route('admin.about.show', $item->id) }}" 
                                   class="font-medium text-blue-600 hover:underline">
                                    <i class="fa fa-eye"></i>
                                </a>
                                <a href="{{ route('admin.about.edit', $item->id) }}" 
                                   class="font-medium text-gray-600 hover:underline">
                                    <i class="fa fa-pencil"></i>
                                </a>
                                <form action="{{ route('admin.about.destroy', $item->id) }}" method="POST" class="inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" 
                                            onclick="return confirm('Are you sure you want to delete this content?')"
                                            class="font-medium text-red-600 hover:underline">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="px-6 py-4 text-center text-gray-500">
                            Belum ada data about
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
@endsection