<x-app-layout>
    <div class="py-12 bg-gray-50 min-h-screen">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
            
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between bg-white p-6 rounded-2xl border border-gray-100 shadow-sm gap-4">
                <div>
                    <h2 class="text-2xl font-black text-gray-800 tracking-tight">Daftar Mitra Aktif</h2>
                    <p class="text-sm text-gray-400 font-medium mt-0.5">Berikut adalah seluruh profil data pelaku usaha mitra UMKM Tempe Zhi.</p>
                </div>
                <div>
                    <a href="{{ route('pesanan.index') }}" 
                       class="inline-flex items-center gap-2 bg-green-700 hover:bg-green-800 text-white px-5 py-2.5 rounded-xl font-bold text-xs shadow-md shadow-green-700/10 transition-all active:scale-95 whitespace-nowrap">
                        Kembali ke Pesanan
                    </a>
                </div>
            </div>

            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
                <div class="max-h-[600px] overflow-auto">
                    <table class="w-full relative border-collapse">
                        <thead class="sticky top-0 bg-white z-10 border-b border-gray-100 shadow-[0_1px_0_0_rgba(243,244,246,1)]">
                            <tr class="text-left text-gray-400 text-xs font-bold uppercase tracking-wider">
                                <th class="px-8 py-4">Nama Mitra</th>
                                <th class="px-6 py-4">Email</th>
                                <th class="px-6 py-4">Kontak</th>
                                <th class="px-6 py-4">Alamat Lengkap</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-50">
                            @forelse($mitras as $mitra)
                                <tr class="hover:bg-gray-50/50 transition-all">
                                    <td class="px-8 py-5 font-bold text-gray-700 text-sm">{{ $mitra->name }}</td>
                                    <td class="px-6 py-5 text-sm text-gray-500 font-medium">{{ $mitra->email }}</td>
                                    <td class="px-6 py-5 text-sm font-bold text-gray-700">{{ $mitra->phone ?? '-' }}</td>
                                    <td class="px-6 py-5 text-sm text-gray-600 font-medium leading-relaxed">
                                        {{ $mitra->address }}
                                        <div class="text-xs text-gray-400 font-semibold mt-0.5">
                                            {{ $mitra->district ?? '-' }}, {{ $mitra->city ?? '-' }}
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="py-12 text-center text-sm font-medium text-gray-400 italic bg-white">
                                        Belum ada mitra bisnis terdaftar.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
</x-app-layout>