<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">Kelola Akun SaaS</p>
                <h2 class="mt-1 font-black text-2xl text-slate-900 tracking-tight leading-tight">
                    {{ __('Buat Akun Pengguna Baru') }}
                </h2>
            </div>
            <a href="{{ route('accounts.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">
                <div class="mb-6 flex items-start gap-3 p-4 rounded-xl bg-blue-50 border border-blue-100">
                    <svg class="w-5 h-5 text-blue-500 shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
                    </svg>
                    <p class="text-xs text-blue-700 leading-relaxed">
                        Sistem akan membuat <b>password acak</b> dan mengirim <b>email otomatis</b> berisi
                        link website + email + password ke alamat pelanggan. User cukup login, tanpa registrasi.
                    </p>
                </div>

                <form method="POST" action="{{ route('accounts.store') }}" class="space-y-5">
                    @csrf

                    <div>
                        <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Nama Pelanggan</label>
                        <input type="text" name="name" value="{{ old('name') }}" 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" placeholder="Nama pemilik usaha">
                    </div>

                    <div>
                        <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Email (untuk login)</label>
                        <input type="email" name="email" value="{{ old('email') }}" 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" placeholder="nama@email.com">
                    </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">Paket</label>
                            <input type="text" name="package_name" value="{{ old('package_name', 'Basic') }}" 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" placeholder="Basic / Pro">
                        </div>
                        <div>
                            <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Harga (Rp)</label>
                            <input type="number" name="price" value="{{ old('price', 0) }}" 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>

                    <button type="submit" class="w-full inline-flex items-center justify-center gap-2 px-5 py-3.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="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
                        </svg>
                        Buat Akun & Kirim Email
                    </button>
                </form>
            </div>

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