<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">
                    {{ __('Koreksi Data: ') }}{{ $umkm->nama_usaha }}
                </h2>
            </div>
            <a href="{{ route('umkm.index') }}" class="inline-flex items-center gap-2 px-5 py-2.5 bg-slate-900 hover:bg-blue-600 text-xs font-bold text-white uppercase tracking-wider rounded-xl shadow-sm transition-all duration-200 dark:bg-blue-600 dark:hover:bg-blue-700">
                <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="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18" />
                </svg>
                <span>Kembali ke Daftar</span>
            </a>
        </div>
    </x-slot>

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

            @if ($errors->any())
                <div class="mb-6 bg-rose-50 border border-rose-200 text-rose-700 px-4 py-3 rounded-xl text-sm font-medium">
                    <ul class="list-disc list-inside space-y-1">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-8">
                <form action="{{ route('umkm.update', $umkm->id) }}" method="POST" class="space-y-5">
                    @csrf
                    @method('PATCH')

                    <div>
                        <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Nama Usaha</label>
                        <input type="text" name="nama_usaha" value="{{ old('nama_usaha', $umkm->nama_usaha) }}" required autofocus class="mt-2 w-full px-4 py-3 bg-slate-50 rounded-xl border border-slate-200 focus:border-[#15db00] focus:ring-4 focus:ring-[#15db00]/10 outline-none text-sm">
                    </div>

                    <div>
                        <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Nama Pemilik / Pengusaha</label>
                        <input type="text" name="nama_pemilik" value="{{ old('nama_pemilik', $umkm->nama_pemilik) }}" required class="mt-2 w-full px-4 py-3 bg-slate-50 rounded-xl border border-slate-200 focus:border-[#15db00] focus:ring-4 focus:ring-[#15db00]/10 outline-none text-sm">
                    </div>

                    <div>
                        <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Jenis Usaha</label>
                        <select name="jenis_usaha" required class="mt-2 w-full px-4 py-3 bg-slate-50 rounded-xl border border-slate-200 focus:border-[#15db00] focus:ring-4 focus:ring-[#15db00]/10 outline-none text-sm">
                            @foreach (['Kuliner', 'Fashion', 'Agrobisnis', 'Kriya / Kerajinan', 'Jasa'] as $jenis)
                                <option value="{{ $jenis }}" {{ old('jenis_usaha', $umkm->jenis_usaha) == $jenis ? 'selected' : '' }}>{{ $jenis }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                        <div>
                            <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">No. Telepon / WhatsApp</label>
                            <input type="text" name="no_telepon" value="{{ old('no_telepon', $umkm->no_telepon) }}" required class="mt-2 w-full px-4 py-3 bg-slate-50 rounded-xl border border-slate-200 focus:border-[#15db00] focus:ring-4 focus:ring-[#15db00]/10 outline-none text-sm">
                        </div>
                        <div>
                            <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Modal Awal (Rp)</label>
                            <input type="number" name="modal_awal" value="{{ old('modal_awal', $umkm->modal_awal) }}" min="0" required class="mt-2 w-full px-4 py-3 bg-slate-50 rounded-xl border border-slate-200 focus:border-[#15db00] focus:ring-4 focus:ring-[#15db00]/10 outline-none text-sm">
                        </div>
                    </div>

                    <div>
                        <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Alamat Lengkap</label>
                        <textarea name="alamat" rows="3" required class="mt-2 w-full px-4 py-3 bg-slate-50 rounded-xl border border-slate-200 focus:border-[#15db00] focus:ring-4 focus:ring-[#15db00]/10 outline-none text-sm">{{ old('alamat', $umkm->alamat) }}</textarea>
                    </div>

                    <div class="flex items-center gap-4 pt-2">
                        <button type="submit" class="inline-flex items-center justify-center gap-2 px-5 py-3 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="M4.5 12.75l6 6 9-13.5" />
                            </svg>
                            Perbarui Data
                        </button>
                        <a href="{{ route('umkm.index') }}" class="inline-flex items-center px-5 py-3 bg-slate-100 hover:bg-slate-200 text-slate-600 text-xs font-bold rounded-xl transition-all duration-200">
                            Batal
                        </a>
                    </div>
                </form>
            </div>

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