<x-front-layout>
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        
        <x-slot name="header">
            <h2 class="font-bold text-2xl text-gray-900 leading-tight">Checkout Pesanan</h2>
        </x-slot>

        <!-- Progress bar visual (optional) -->
        <div class="mb-10 text-center">
            <h1 class="text-3xl font-extrabold text-gray-900 tracking-tight">Selesaikan Pesanan Anda</h1>
            <p class="mt-2 text-gray-500">Satu langkah lagi untuk mendapatkan akses produk.</p>
        </div>

        <!-- Global Validation Errors -->
        @if ($errors->any())
            <div class="mb-8 bg-red-50 border-l-4 border-red-500 p-4 rounded-xl">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <x-heroicon-s-x-circle class="h-5 w-5 text-red-500" />
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-bold text-red-800">Ada {{ $errors->count() }} kesalahan pada formulir Anda:</h3>
                        <div class="mt-2 text-sm text-red-700">
                            <ul class="list-disc pl-5 space-y-1">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <form action="{{ route('checkout.process', $product) }}" method="POST" enctype="multipart/form-data" x-data="{ submitting: false, method: 'bank' }" @submit="submitting = true">
            @csrf
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                
                <!-- Kiri: Info Produk -->
                <div class="lg:col-span-2 space-y-6">
                    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden p-6 sm:p-8">
                        <h3 class="font-bold text-lg text-gray-900 mb-6 border-b border-gray-100 pb-4">Pesanan Anda</h3>
                        
                        <div class="flex gap-6 items-center">
                            <div class="w-24 h-24 sm:w-32 sm:h-32 bg-gray-100 rounded-xl overflow-hidden flex-shrink-0 border border-gray-200">
                                @if($product->thumbnail)
                                    <img src="{{ Storage::url($product->thumbnail) }}" alt="{{ $product->name }}" class="w-full h-full object-cover">
                                @else
                                    <div class="w-full h-full flex items-center justify-center text-gray-400"><x-heroicon-o-photo class="w-8 h-8"/></div>
                                @endif
                            </div>
                            <div class="flex-1">
                                @if($product->category)
                                    <p class="text-sm font-medium text-violet-600 mb-1">{{ $product->category->name }}</p>
                                @endif
                                <h4 class="text-lg sm:text-xl font-bold text-gray-900 leading-tight mb-2">{{ $product->name }}</h4>
                                <p class="text-gray-500 text-sm hidden sm:block line-clamp-2 mb-4">{{ Str::limit($product->description, 100) }}</p>
                            </div>
                        </div>
                    </div>

                    @guest
                    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden p-6 sm:p-8">
                        <div class="flex items-center justify-between border-b border-gray-100 pb-4 mb-6">
                            <h3 class="font-bold text-lg text-gray-900">Data Diri & Akses Produk</h3>
                            <a href="{{ route('login') }}" class="text-sm font-bold text-violet-600 hover:text-violet-800 transition-colors">Sudah punya akun? Login</a>
                        </div>
                        
                        <p class="text-sm text-gray-500 mb-6 font-medium">Buat akun untuk mengakses produk digital Anda setelah pembayaran berhasil dikonfirmasi.</p>
                        
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
                            <div>
                                <label for="name" class="block text-sm font-bold text-gray-700 mb-1">Nama Lengkap <span class="text-red-500">*</span></label>
                                <input type="text" name="name" id="name" value="{{ old('name') }}" required class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-violet-500 focus:ring-violet-500 sm:text-sm py-2 px-3 border" placeholder="Masukkan nama Anda">
                                @error('name') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label for="email" class="block text-sm font-bold text-gray-700 mb-1">Alamat Email <span class="text-red-500">*</span></label>
                                <input type="email" name="email" id="email" value="{{ old('email') }}" required class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-violet-500 focus:ring-violet-500 sm:text-sm py-2 px-3 border" placeholder="email@contoh.com">
                                @error('email') <p class="mt-1 text-xs text-red-600 font-medium">{{ $message }}</p> @enderror
                            </div>
                        </div>
                        <div>
                            <label for="password" class="block text-sm font-bold text-gray-700 mb-1">Password <span class="text-red-500">*</span></label>
                            <input type="password" name="password" id="password" required class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-violet-500 focus:ring-violet-500 sm:text-sm py-2 px-3 border" placeholder="Minimal 8 karakter">
                            @error('password') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>
                    </div>
                    @endguest

                    @auth
                    <div class="bg-violet-50 rounded-2xl border border-violet-100 p-4 sm:p-5 flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-full bg-violet-200 flex items-center justify-center text-violet-700 font-bold">
                                {{ substr(Auth::user()->name, 0, 1) }}
                            </div>
                            <div>
                                <p class="text-sm font-semibold text-violet-900">Masuk sebagai {{ Auth::user()->name }}</p>
                                <p class="text-xs text-violet-700">{{ Auth::user()->email }}</p>
                            </div>
                        </div>
                    </div>
                    @endauth

                    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden p-6 sm:p-8" x-data="{ method: 'bank' }">
                        <h3 class="font-bold text-lg text-gray-900 mb-6 border-b border-gray-100 pb-4">Metode Pembayaran</h3>
                        
                        <div class="space-y-4 mb-6">
                            <!-- Metode Transfer Bank -->
                            <label class="relative flex cursor-pointer rounded-xl border border-gray-200 p-4 shadow-sm focus:outline-none transition-colors" :class="{'bg-violet-50 border-violet-200 ring-1 ring-violet-500': method === 'bank'}">
                                <input type="radio" name="method" value="bank" x-model="method" class="sr-only" checked>
                                <span class="flex flex-1">
                                    <span class="flex flex-col">
                                        <span class="block text-sm font-medium text-gray-900">Transfer Bank / E-Wallet Internal</span>
                                        <span class="mt-1 flex items-center text-sm text-gray-500">Verifikasi manual oleh Admin di website.</span>
                                    </span>
                                </span>
                                <x-heroicon-s-check-circle class="h-6 w-6 text-violet-600" x-show="method === 'bank'" x-cloak />
                            </label>

                            <!-- Metode WhatsApp -->
                            <label class="relative flex cursor-pointer rounded-xl border border-gray-200 p-4 shadow-sm focus:outline-none transition-colors" :class="{'bg-green-50 border-green-200 ring-1 ring-green-500': method === 'whatsapp'}">
                                <input type="radio" name="method" value="whatsapp" x-model="method" class="sr-only">
                                <span class="flex flex-1">
                                    <span class="flex flex-col">
                                        <span class="block text-sm font-medium text-gray-900">Pesan via WhatsApp</span>
                                        <span class="mt-1 flex items-center text-sm text-gray-500">Anda akan diarahkan ke WhatsApp Admin untuk proses bayar.</span>
                                    </span>
                                </span>
                                <x-heroicon-s-check-circle class="h-6 w-6 text-green-600" x-show="method === 'whatsapp'" x-cloak />
                            </label>
                        </div>

                        <!-- Opsi Bank (Hanya tampil jika bank dipilih) -->
                        <div x-show="method === 'bank'" x-transition x-cloak class="border-t border-gray-100 pt-6 space-y-6">
                            @if($banks->count() > 0)
                                <div class="bg-blue-50 border border-blue-100 rounded-xl p-4 mb-4 text-sm text-blue-800">
                                    <p class="font-bold flex items-center mb-2"><x-heroicon-o-information-circle class="w-5 h-5 mr-1"/> Instruksi Pembayaran</p>
                                    <p class="mb-3">Silakan transfer sejumlah <strong>Rp {{ number_format($product->price, 0, ',', '.') }}</strong> ke salah satu rekening berikut:</p>
                                    
                                    <ul class="space-y-3">
                                        @foreach($banks as $bank)
                                        <li class="bg-white border border-blue-100 rounded-lg p-3 flex gap-3 items-center">
                                            @if($bank->logo)
                                                <div class="h-10 w-16 bg-white border border-gray-100 rounded flex items-center justify-center p-1 shrink-0">
                                                    <img src="{{ Storage::url($bank->logo) }}" alt="{{ $bank->bank_name }}" class="max-h-full">
                                                </div>
                                            @endif
                                            <div>
                                                <div class="font-bold uppercase text-gray-900">{{ $bank->bank_name }}</div>
                                                <div class="font-mono text-violet-700 bg-violet-50 px-2 py-0.5 rounded text-sm inline-block my-0.5 cursor-pointer font-bold select-all">{{ $bank->account_number }}</div>
                                                <div class="text-xs text-gray-500 uppercase">A.n. {{ $bank->account_name }}</div>
                                            </div>
                                        </li>
                                        @endforeach
                                    </ul>
                                </div>

                                <div>
                                    <label for="payment_proof" class="block text-sm font-bold text-gray-700 mb-2">Upload Bukti Transfer <span class="text-red-500">*</span></label>
                                    <input type="file" name="payment_proof" id="payment_proof" accept="image/*" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2.5 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-violet-50 file:text-violet-700 hover:file:bg-violet-100 border border-gray-200 rounded-lg" x-bind:required="method === 'bank'">
                                    @error('payment_proof') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
                                </div>
                            @else
                                <div class="bg-red-50 border border-red-100 text-red-700 p-4 rounded-xl text-sm font-medium">
                                    Mohon maaf, belum ada rekening pembayaran yang diatur oleh Admin. Silakan gunakan metode WhatsApp.
                                </div>
                            @endif
                        </div>

                        <!-- Opsi WhatsApp -->
                        <div x-show="method === 'whatsapp'" x-transition x-cloak class="border-t border-gray-100 pt-6">
                            <div class="bg-green-50 border border-green-100 rounded-xl p-5 text-sm text-green-800 text-center">
                                <span class="bg-green-100 p-3 rounded-full inline-block mb-3">
                                    <svg class="w-8 h-8 text-green-600" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.711.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.77-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.299.045-.677.063-1.092-.069-.252-.08-.573-.187-.988-.365-1.739-.751-2.874-2.502-2.961-2.617-.087-.116-.708-.94-.708-1.793s.448-1.273.607-1.446c.159-.173.346-.217.462-.217l.332.006c.106.005.249-.04.39.298.144.347.491 1.2.534 1.287.043.087.072.188.014.304-.058.116-.087.188-.173.289l-.26.304c-.087.086-.177.18-.076.354.101.174.449.741.964 1.201.662.591 1.221.774 1.393.86s.274.072.376-.043c.101-.116.433-.506.549-.68.116-.173.231-.145.39-.087s1.011.477 1.184.564.289.13.332.202c.045.072.045.419-.1.824zm-3.423-14.416c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm.082 21.652c-1.638 0-3.328-.431-4.706-1.189l-5.32 1.398 1.439-5.185c-.86-1.465-1.31-3.236-1.31-5.066 0-5.309 4.319-9.625 9.627-9.625 5.31 0 9.63 4.316 9.63 9.624 0 5.311-4.32 9.625-9.63 9.625l-.01.018v-.006z"/></svg>
                                </span>
                                <p class="font-bold text-base mb-1">Penyelesaian di WhatsApp</p>
                                <p class="mb-0">Setelah ini Anda akan otomatis dialihkan ke WhatsApp Admin dengan pesan konfirmasi pesanan terisi otomatis.</p>
                            </div>
                        </div>

                        <!-- Catatan (Optional) -->
                        <div class="mt-6 border-t border-gray-100 pt-6">
                            <label for="note" class="block text-sm font-medium text-gray-700 mb-2">Catatan Pesanan (Opsional)</label>
                            <textarea id="note" name="note" rows="2" class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-violet-500 focus:ring-violet-500 sm:text-sm py-2 px-3 border" placeholder="Misal: Nomor rekening atas nama Budi..."></textarea>
                        </div>
                    </div>
                </div>

                <!-- Kanan: Ringkasan & Submit -->
                <div class="lg:col-span-1">
                    <div class="bg-violet-50 rounded-2xl border border-violet-100 p-5 sticky top-24">
                        <h3 class="font-bold text-base text-violet-900 mb-4 border-b border-violet-200 pb-3">Ringkasan Pembelian</h3>
                        
                        <div class="space-y-3 mb-4 text-sm">
                            <div class="flex flex-col sm:flex-row sm:justify-between text-violet-800 gap-1">
                                <span class="font-medium text-violet-700">Total Harga</span>
                                <span class="font-bold text-violet-900">Rp{{ number_format($product->price, 0, ',', '.') }}</span>
                            </div>
                            <div class="flex justify-between text-violet-800">
                                <span class="font-medium text-violet-700">Biaya Admin</span>
                                <span class="font-bold text-violet-900">Rp0</span>
                            </div>
                        </div>

                        <div class="border-t border-violet-200 pt-4 mb-6">
                            <span class="block text-sm font-bold text-violet-900 mb-1">Total Tunai</span>
                            <span class="block text-2xl font-black text-violet-600 tracking-tight leading-none overflow-hidden text-ellipsis whitespace-nowrap" title="Rp{{ number_format($product->price, 0, ',', '.') }}">
                                Rp{{ number_format($product->price, 0, ',', '.') }}
                            </span>
                        </div>

                        <button type="submit" x-bind:disabled="submitting" class="w-full flex items-center justify-center px-6 py-4 text-base font-bold text-white bg-violet-600 hover:bg-violet-700 rounded-xl transition-all shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-violet-500 disabled:opacity-75 disabled:cursor-not-allowed disabled:hover:translate-y-0">
                            <span x-show="!submitting" class="flex items-center gap-2">
                                <x-heroicon-s-lock-closed class="w-5 h-5 opacity-70" /> Bayar Sekarang
                            </span>
                            <span x-show="submitting" x-cloak class="flex items-center gap-2">
                                <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                                Memproses..
                            </span>
                        </button>
                        
                        <p class="text-center text-xs text-violet-800/80 mt-4 leading-relaxed font-semibold">Tersandikan & 100% Aman.</p>
                    </div>
                </div>
                
            </div>
        </form>
    </div>
</x-front-layout>

