<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <div>
                <p class="text-xs font-black tracking-widest text-[#15db00] uppercase">SaaS Repositori Data</p>
                <h2 class="mt-1 font-black text-2xl text-slate-900 tracking-tight leading-tight">
                    {{ __('Manajemen Data UMKM') }}
                </h2>
            </div>
            <a href="{{ route('umkm.create') }}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-[#15db00] hover:bg-[#12c400] text-slate-900 text-xs font-black rounded-xl transition-all duration-200 shadow-lg shadow-[#15db00]/25 active:scale-[0.98]">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                </svg>
                <span>Input Manual (Admin)</span>
            </a>
        </div>
    </x-slot>

    <div class="py-10 bg-slate-100/70 min-h-screen">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">

            @if (session('success'))
                <div class="bg-emerald-50 border border-emerald-200 text-emerald-800 px-4 py-3 rounded-xl flex items-center gap-3 shadow-sm dark:bg-emerald-950/50 dark:border-emerald-900 dark:text-emerald-300" role="alert">
                    <svg class="w-5 h-5 text-emerald-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <span class="text-sm font-medium">{{ session('success') }}</span>
                </div>
            @endif

            <!-- Stat Mini -->
            <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-5">
                <div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-200 relative overflow-hidden">
                    <div class="absolute top-0 right-0 w-24 h-24 bg-[#15db00]/5 rounded-full blur-2xl"></div>
                    <p class="text-xs font-bold tracking-wider text-slate-500 uppercase">Total Data UMKM</p>
                    <p class="mt-2 text-3xl font-black text-slate-900 tracking-tight">{{ number_format($umkms->count(), 0, ',', '.') }}</p>
                    <p class="mt-1.5 text-[11px] font-semibold text-slate-400">Usaha terdaftar di sistem</p>
                </div>
                <div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-200 relative overflow-hidden">
                    <div class="absolute top-0 right-0 w-24 h-24 bg-indigo-500/5 rounded-full blur-2xl"></div>
                    <p class="text-xs font-bold tracking-wider text-slate-500 uppercase">Akumulasi Modal</p>
                    <p class="mt-2 text-3xl font-black text-slate-900 tracking-tight">{{ $umkms->sum('modal_awal') > 0 ? 'Rp ' . number_format($umkms->sum('modal_awal'), 0, ',', '.') : 'Rp 0' }}</p>
                    <p class="mt-1.5 text-[11px] font-semibold text-slate-400">Modal awal seluruh UMKM</p>
                </div>
                <div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-200 relative overflow-hidden">
                    <div class="absolute top-0 right-0 w-24 h-24 bg-emerald-500/5 rounded-full blur-2xl"></div>
                    <p class="text-xs font-bold tracking-wider text-slate-500 uppercase">Terisi Via Frontend</p>
                    <p class="mt-2 text-3xl font-black text-emerald-600 tracking-tight">{{ $umkms->whereNotNull('user_id')->count() }}</p>
                    <p class="mt-1.5 text-[11px] font-semibold text-slate-400">Data dari aplikasi React.js</p>
                </div>
                <div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-200 relative overflow-hidden">
                    <div class="absolute top-0 right-0 w-24 h-24 bg-rose-500/5 rounded-full blur-2xl"></div>
                    <p class="text-xs font-bold tracking-wider text-slate-500 uppercase">Input Manual Admin</p>
                    <p class="mt-2 text-3xl font-black text-rose-600 tracking-tight">{{ $umkms->whereNull('user_id')->count() }}</p>
                    <p class="mt-1.5 text-[11px] font-semibold text-slate-400">Data dari form admin</p>
                </div>
            </div>

            <!-- Tabel Data UMKM -->
            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
                <div class="px-6 py-5 border-b border-slate-100 flex items-center justify-between">
                    <div>
                        <h3 class="font-black text-lg text-slate-900 tracking-tight">Daftar Data UMKM</h3>
                        <p class="text-xs font-medium text-slate-400 mt-0.5">Seluruh data terpusat dari frontend React.js & input admin</p>
                    </div>
                    <span class="inline-flex items-center px-3.5 py-1.5 rounded-full text-xs font-black bg-[#15db00]/10 text-emerald-700 border border-[#15db00]/20">
                        {{ $umkms->count() }} UMKM
                    </span>
                </div>

                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead class="bg-slate-900">
                            <tr>
                                <th scope="col" class="px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-slate-300">Nama Perusahaan / Usaha</th>
                                <th scope="col" class="px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-slate-300">Jenis Usaha</th>
                                <th scope="col" class="px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-slate-300">Nama Pemilik</th>
                                <th scope="col" class="px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-slate-300">Email Pemilik</th>
                                <th scope="col" class="px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-slate-300">Nomor WA</th>
                                <th scope="col" class="px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-slate-300">Modal Awal</th>
                                <th scope="col" class="px-6 py-4 text-right text-xs font-bold uppercase tracking-wider text-slate-300">Aksi Admin</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-slate-100">
                            @forelse ($umkms as $umkm)
                                <tr class="hover:bg-slate-50/80 transition-colors duration-150">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center gap-3">
                                            <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-[#15db00]/15 to-emerald-100 text-[#15db00] flex items-center justify-center text-sm font-black shrink-0">
                                                {{ strtoupper(substr($umkm->nama_usaha, 0, 1)) }}
                                            </div>
                                            <div>
                                                <p class="text-sm font-bold text-slate-900">{{ $umkm->nama_usaha }}</p>
                                                <p class="text-[11px] text-slate-400 font-medium">{{ \Illuminate\Support\Str::limit($umkm->alamat, 28) }}</p>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2.5 py-1 inline-flex text-[11px] leading-5 font-bold rounded-full bg-[#15db00]/10 text-emerald-700 border border-[#15db00]/20">
                                            {{ $umkm->jenis_usaha }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-slate-600">{{ $umkm->nama_pemilik }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{{ $umkm->user?->email ?? '—' }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-600">{{ $umkm->no_telepon }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-black text-slate-900">{{ $umkm->modal_awal > 0 ? 'Rp ' . number_format($umkm->modal_awal, 0, ',', '.') : 'Rp 0' }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-semibold">
                                        <div class="flex justify-end space-x-3">
                                            <a href="{{ route('umkm.edit', $umkm->id) }}" class="inline-flex items-center gap-1.5 text-indigo-600 hover:text-indigo-900 bg-indigo-50 hover:bg-indigo-100 px-3 py-1.5 rounded-lg transition-colors">
                                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" />
                                                </svg>
                                                Ubah
                                            </a>
                                            <form action="{{ route('umkm.destroy', $umkm->id) }}" method="POST" onsubmit="return confirm('Hapus data UMKM {{ $umkm->nama_usaha }} secara permanen?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="inline-flex items-center gap-1.5 text-red-600 hover:text-red-900 bg-red-50 hover:bg-red-100 px-3 py-1.5 rounded-lg transition-colors">
                                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                                                    </svg>
                                                    Hapus
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="px-6 py-16 text-center">
                                        <div class="max-w-sm mx-auto flex flex-col items-center">
                                            <div class="w-14 h-14 bg-slate-100 rounded-2xl flex items-center justify-center text-slate-400 mb-4">
                                                <svg class="w-7 h-7" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
                                                </svg>
                                            </div>
                                            <h4 class="text-sm font-bold text-slate-900">Belum Ada Data UMKM</h4>
                                            <p class="mt-1 text-xs text-slate-500 max-w-sm leading-relaxed">
                                                Data yang masuk dari aplikasi React.js (setelah user isi formulir pendataan) atau input manual admin akan tampil di sini.
                                            </p>
                                            <a href="{{ route('umkm.create') }}" class="mt-5 inline-flex items-center gap-2 px-4 py-2.5 bg-[#15db00] hover:bg-[#12c400] text-slate-900 text-xs font-black rounded-xl transition-all duration-200 shadow-lg shadow-[#15db00]/20 active:scale-[0.98]">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                                                </svg>
                                                Tambah Data Pertama
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

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