@extends('admin.layout')

@section('title', 'Kelola Dawuh')
@section('page-title', 'Kelola Dawuh')

@section('content')
<div class="bg-white p-6 rounded-2xl shadow-lg">

    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 gap-4">
        <h2 class="text-3xl font-bold text-gray-800">Daftar Dawuh</h2>
        <a href="{{ route('dawuh.create') }}" 
           class="inline-flex items-center gap-2 bg-blue-600 text-white px-5 py-2.5 rounded-xl shadow hover:bg-blue-700 hover:shadow-lg transition duration-300">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-5 h-5">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
            </svg>
            Tambah Dawuh
        </a>
    </div>

    <!-- Alert -->
    @if(session('success'))
        <div class="bg-green-100 border-l-4 border-green-500 text-green-800 p-4 rounded-lg mb-4 shadow">
            {{ session('success') }}
        </div>
    @endif

    <!-- Tabel -->
    <div class="overflow-x-auto rounded-xl border border-gray-200 shadow-sm">
        <table class="w-full text-gray-700">
            <thead class="bg-gradient-to-r from-gray-100 to-gray-50 text-gray-700 uppercase text-sm font-semibold">
                <tr>
                    <th class="p-3 border-b text-center">No</th>
                    <th class="p-3 border-b">Judul</th>
                    <th class="p-3 border-b">Sumber</th>
                    <th class="p-3 border-b text-center">Tanggal</th>
                    <th class="p-3 border-b text-center">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @foreach($dawuh as $i => $item)
                    <tr class="hover:bg-gray-50 transition">
                        <td class="p-3 text-center">{{ $i + 1 }}</td>
                        <td class="p-3 font-medium text-gray-800">{{ $item->judul }}</td>
                        <td class="p-3">{{ $item->sumber }}</td>
                        <td class="p-3 text-center">{{ $item->tanggal }}</td>
                        <td class="p-3 text-center">
                            <div class="flex items-center justify-center gap-2">
                                <!-- Tombol Edit -->
                                <a href="{{ route('dawuh.edit', $item->id) }}" 
                                   class="inline-flex items-center gap-1 bg-blue-500 text-white px-3 py-1.5 rounded-lg shadow hover:bg-blue-600 transition duration-200 text-sm font-medium">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536M9 11l6-6 3 3-6 6-3 3H6v-3l3-3z" />
                                    </svg>
                                    Edit
                                </a>

                                <!-- Tombol Hapus -->
                                <form action="{{ route('dawuh.destroy', $item->id) }}" method="POST" 
                                      onsubmit="return confirm('Yakin hapus?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" 
                                            class="inline-flex items-center gap-1 bg-red-500 text-white px-3 py-1.5 rounded-lg shadow hover:bg-red-600 transition duration-200 text-sm font-medium cursor-pointer">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                        </svg>
                                        Hapus
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="mt-6">
        {{ $dawuh->links('pagination::tailwind') }}
    </div>
</div>
@endsection