@extends('astrologer.layouts.app')

@section('title', 'Payment Settings')

@section('content')
    <div class="max-w-4xl mx-auto" x-data="{ isEditing: {{ $paymentMethod->exists ? 'false' : 'true' }} }">
        <!-- Messages -->
        <div class="space-y-4 mb-6">
            @if(session('success'))
                <div
                    class="bg-emerald-500/5 border border-emerald-500/10 text-emerald-500 px-5 py-3 rounded-xl flex items-center gap-3 text-sm">
                    <i data-lucide="check-circle" class="w-4 h-4"></i>
                    <span class="font-medium">{{ session('success') }}</span>
                </div>
            @endif

            @if($errors->any())
                <div class="bg-red-500/5 border border-red-500/10 text-red-500 px-5 py-3 rounded-xl text-sm">
                    <ul class="list-disc list-inside space-y-0.5">
                        @foreach($errors->all() as $error)
                            <li class="font-medium">{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>

        <!-- View Mode -->
        <div x-show="!isEditing" class="space-y-6 animate-fade-in-up">
            <div class="flex items-center justify-between mb-2">
                <h2 class="text-xl font-bold text-white">Payment Options</h2>
                <button @click="isEditing = true" 
                    class="bg-yellow-500 hover:bg-yellow-400 text-slate-950 font-bold px-6 py-2.5 rounded-xl shadow-lg shadow-yellow-500/10 transition-all flex items-center gap-2 text-xs uppercase tracking-wider">
                    <i data-lucide="edit-2" class="w-4 h-4"></i>
                    Edit Details
                </button>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- UPI -->
                <div class="glass-card rounded-2xl p-6 relative overflow-hidden group">
                    <div class="absolute top-0 right-0 p-4 opacity-50">
                        <i data-lucide="smartphone" class="w-12 h-12 text-yellow-500/10"></i>
                    </div>
                    <div class="relative z-10">
                        <div class="flex items-center gap-3 mb-6">
                            <div class="w-10 h-10 rounded-lg bg-yellow-500/10 flex items-center justify-center">
                                <i data-lucide="qr-code" class="w-5 h-5 text-yellow-500"></i>
                            </div>
                            <h3 class="font-bold text-white">UPI Payment</h3>
                        </div>
                        
                        @if($paymentMethod->upi_id)
                            <div class="space-y-5">
                                <div>
                                    <p class="text-[10px] text-slate-500 font-bold uppercase tracking-widest mb-1.5">UPI ID</p>
                                    <p class="text-slate-200 font-medium font-mono bg-white/5 p-3 rounded-lg border border-white/5">{{ $paymentMethod->upi_id }}</p>
                                </div>
                                @if($paymentMethod->upi_qr_code)
                                     <div>
                                        <p class="text-[10px] text-slate-500 font-bold uppercase tracking-widest mb-2">QR Code</p>
                                        <div class="w-24 h-24 bg-white p-2 rounded-xl">
                                            <img src="{{ asset('storage/' . $paymentMethod->upi_qr_code) }}" class="w-full h-full object-contain">
                                        </div>
                                     </div>
                                @else
                                     <p class="text-xs text-slate-600 italic flex items-center gap-2">
                                        <i data-lucide="alert-circle" class="w-3 h-3"></i> No QR code uploaded
                                     </p>
                                @endif
                            </div>
                        @else
                            <div class="text-center py-6 border border-dashed border-white/5 rounded-xl">
                                 <p class="text-slate-600 text-sm">Not configured</p>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- PayPal -->
                <div class="glass-card rounded-2xl p-6 relative overflow-hidden group">
                    <div class="absolute top-0 right-0 p-4 opacity-50">
                        <i data-lucide="globe" class="w-12 h-12 text-blue-500/10"></i>
                    </div>
                    <div class="relative z-10">
                        <div class="flex items-center gap-3 mb-6">
                             <div class="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center">
                                <i data-lucide="wallet" class="w-5 h-5 text-blue-500"></i>
                            </div>
                            <h3 class="font-bold text-white">PayPal</h3>
                        </div>
                        
                        @if($paymentMethod->paypal_email)
                            <div>
                                <p class="text-[10px] text-slate-500 font-bold uppercase tracking-widest mb-1.5">Email Address</p>
                                <p class="text-slate-200 font-medium bg-white/5 p-3 rounded-lg border border-white/5">{{ $paymentMethod->paypal_email }}</p>
                            </div>
                        @else
                            <div class="text-center py-6 border border-dashed border-white/5 rounded-xl">
                                 <p class="text-slate-600 text-sm">Not configured</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Bank Details -->
            <div class="glass-card rounded-2xl p-8 relative overflow-hidden">
                <div class="absolute top-0 right-0 p-8 opacity-50">
                    <i data-lucide="landmark" class="w-24 h-24 text-emerald-500/5"></i>
                </div>
                <div class="relative z-10">
                     <div class="flex items-center gap-3 mb-8">
                         <div class="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center">
                            <i data-lucide="building-2" class="w-5 h-5 text-emerald-500"></i>
                        </div>
                        <h3 class="font-bold text-white">Bank Account Details</h3>
                    </div>

                    @if($paymentMethod->bank_name || $paymentMethod->account_number)
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                            <div>
                                <p class="text-[10px] text-slate-500 font-bold uppercase tracking-widest mb-1.5">Bank Name</p>
                                <p class="text-slate-200 font-medium text-lg">{{ $paymentMethod->bank_name ?? '-' }}</p>
                            </div>
                            <div>
                                <p class="text-[10px] text-slate-500 font-bold uppercase tracking-widest mb-1.5">Account Holder</p>
                                <p class="text-slate-200 font-medium text-lg">{{ $paymentMethod->account_holder_name ?? '-' }}</p>
                            </div>
                            <div>
                                <p class="text-[10px] text-slate-500 font-bold uppercase tracking-widest mb-1.5">Account Number</p>
                                <p class="text-slate-200 font-medium font-mono text-lg tracking-wider">{{ $paymentMethod->account_number ?? '-' }}</p>
                            </div>
                            <div>
                                <p class="text-[10px] text-slate-500 font-bold uppercase tracking-widest mb-1.5">IFSC Code</p>
                                <p class="text-slate-200 font-medium font-mono text-lg">{{ $paymentMethod->ifsc_code ?? '-' }}</p>
                            </div>
                        </div>
                    @else
                        <div class="text-center py-8 border border-dashed border-white/5 rounded-xl">
                              <p class="text-slate-600">Bank details not configured</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <form action="{{ route('astrologer.payment-methods.update') }}" method="POST" enctype="multipart/form-data"
            class="space-y-6" x-show="isEditing" x-cloak>
            @csrf

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- UPI Details -->
                <div class="glass-card rounded-2xl overflow-hidden">
                    <div class="bg-white/[0.02] px-8 py-5 border-b border-white/5 flex items-center gap-3">
                        <i data-lucide="smartphone" class="w-5 h-5 text-yellow-500"></i>
                        <h3 class="text-base font-bold text-white">UPI Details</h3>
                    </div>
                    <div class="p-8 space-y-5">
                        <div>
                            <label class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">UPI
                                ID</label>
                            <input type="text" name="upi_id" value="{{ old('upi_id', $paymentMethod->upi_id) }}"
                                placeholder="example@upi"
                                class="w-full bg-slate-900/50 border border-white/5 rounded-lg px-4 py-2.5 text-slate-100 outline-none focus:border-yellow-500/30 transition-all font-medium text-sm">
                        </div>

                        <div>
                            <label class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">UPI QR
                                Code</label>
                            <div class="flex items-center gap-4">
                                @if($paymentMethod->upi_qr_code)
                                    <div class="w-16 h-16 rounded-lg bg-white/5 p-1">
                                        <img src="{{ asset('storage/' . $paymentMethod->upi_qr_code) }}"
                                            class="w-full h-full object-cover rounded">
                                    </div>
                                @endif
                                <div class="flex-1">
                                    <input type="file" name="upi_qr_code"
                                        class="text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-xs file:font-black file:bg-yellow-500/10 file:text-yellow-500 hover:file:bg-yellow-500/20 cursor-pointer">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- PayPal Details -->
                <div class="glass-card rounded-2xl overflow-hidden">
                    <div class="bg-white/[0.02] px-8 py-5 border-b border-white/5 flex items-center gap-3">
                        <i data-lucide="mail" class="w-5 h-5 text-blue-500"></i>
                        <h3 class="text-base font-bold text-white">PayPal Details</h3>
                    </div>
                    <div class="p-8">
                        <div>
                            <label class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">PayPal
                                Email Address</label>
                            <input type="email" name="paypal_email"
                                value="{{ old('paypal_email', $paymentMethod->paypal_email) }}"
                                placeholder="your-email@paypal.com"
                                class="w-full bg-slate-900/50 border border-white/5 rounded-lg px-4 py-2.5 text-slate-100 outline-none focus:border-yellow-500/30 transition-all font-medium text-sm">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Bank Details -->
            <div class="glass-card rounded-2xl overflow-hidden">
                <div class="bg-white/[0.02] px-8 py-5 border-b border-white/5 flex items-center gap-3">
                    <i data-lucide="landmark" class="w-5 h-5 text-emerald-500"></i>
                    <h3 class="text-base font-bold text-white">Bank Account Details</h3>
                </div>
                <div class="p-8">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Bank
                                Name</label>
                            <input type="text" name="bank_name" value="{{ old('bank_name', $paymentMethod->bank_name) }}"
                                placeholder="e.g. HDFC Bank"
                                class="w-full bg-slate-900/50 border border-white/5 rounded-lg px-4 py-2.5 text-slate-100 outline-none focus:border-yellow-500/30 transition-all font-medium text-sm">
                        </div>
                        <div>
                            <label
                                class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Account
                                Holder Name</label>
                            <input type="text" name="account_holder_name"
                                value="{{ old('account_holder_name', $paymentMethod->account_holder_name) }}"
                                placeholder="Full Name as per Bank"
                                class="w-full bg-slate-900/50 border border-white/5 rounded-lg px-4 py-2.5 text-slate-100 outline-none focus:border-yellow-500/30 transition-all font-medium text-sm">
                        </div>
                        <div>
                            <label
                                class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Account
                                Number</label>
                            <input type="text" name="account_number"
                                value="{{ old('account_number', $paymentMethod->account_number) }}"
                                placeholder="Enter Account Number"
                                class="w-full bg-slate-900/50 border border-white/5 rounded-lg px-4 py-2.5 text-slate-100 outline-none focus:border-yellow-500/30 transition-all font-medium text-sm">
                        </div>
                        <div>
                            <label class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">IFSC
                                Code</label>
                            <input type="text" name="ifsc_code" value="{{ old('ifsc_code', $paymentMethod->ifsc_code) }}"
                                placeholder="e.g. HDFC0001234"
                                class="w-full bg-slate-900/50 border border-white/5 rounded-lg px-4 py-2.5 text-slate-100 outline-none focus:border-yellow-500/30 transition-all font-medium text-sm">
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex justify-end pt-4 gap-4">
                <button type="button" @click="isEditing = false"
                    x-show="{{ $paymentMethod->exists ? 'true' : 'false' }}"
                    class="px-8 py-4 rounded-xl font-bold text-slate-400 hover:text-white transition-colors text-[10px] uppercase tracking-[0.2em] hover:bg-white/5">
                    Cancel
                </button>
                <button type="submit"
                    class="bg-yellow-500 hover:bg-yellow-400 text-slate-950 font-black px-12 py-4 rounded-xl shadow-lg shadow-yellow-500/10 transition-all uppercase tracking-[0.2em] text-[10px]">
                    Save Payment Settings
                </button>
            </div>
        </form>
    </div>
@endsection