@extends('layouts.app')

@section('title', 'Digital Wallet & Bank Transfer Payment - Saba Remedies')

@section('content')
<section class="py-12 bg-slate-50 min-h-[80vh]">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">

        <!-- Top Header Card -->
        <div class="bg-white rounded-3xl border border-slate-200 p-6 shadow-sm flex flex-col sm:flex-row items-center justify-between gap-4">
            <div>
                <h1 class="text-2xl font-extrabold text-slate-900 tracking-tight">Digital Wallet &amp; Direct Bank Transfer</h1>
                <p class="text-xs text-slate-500 mt-1">Order #<span class="font-mono font-bold text-slate-700">{{ $order->order_id }}</span></p>
            </div>

            <div class="flex items-center gap-4">
                <div class="px-6 py-2.5 bg-rose-600 text-white rounded-2xl font-extrabold text-sm shadow-sm tracking-wide">
                    Total Amount: ₹{{ number_format((float)$order->total_price, 2) }}
                </div>
                <a href="{{ route('checkout.index') }}" class="px-4 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold rounded-2xl text-xs transition-all flex items-center gap-2">
                    <i class="fa-solid fa-arrow-left"></i> Back
                </a>
            </div>
        </div>

        <!-- Main Content 2 Columns -->
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
            
            <!-- Left Column: QR Code + Bank Details (7 Cols) -->
            <div class="lg:col-span-7 bg-white rounded-3xl border border-slate-200 p-6 sm:p-8 shadow-sm space-y-8">
                
                <div class="grid grid-cols-1 sm:grid-cols-12 gap-6 items-center">
                    <!-- QR Code (5 Cols) -->
                    <div class="sm:col-span-5 text-center p-4 bg-slate-50/80 rounded-2xl border border-slate-200 space-y-3">
                        <div class="inline-flex items-center gap-2 text-xs font-bold text-slate-700">
                            <i class="fa-brands fa-google-pay text-2xl text-blue-600"></i>
                            <span>Accepted Here</span>
                        </div>
                        <div class="bg-white p-2.5 rounded-xl border border-slate-200 inline-block shadow-sm max-w-[200px]">
                            <img src="{{ asset('img/sabaremedics-scanqr.png') }}" alt="Saba Remedies UPI QR Code" class="w-full h-auto rounded-lg">
                        </div>
                        <div class="text-[11px] font-bold text-slate-800">
                            Saba Remedies
                            <div class="text-slate-500 font-normal">+91 94400 59951</div>
                        </div>
                    </div>

                    <!-- Instructions (7 Cols) -->
                    <div class="sm:col-span-7 space-y-3 text-xs text-slate-600">
                        <h3 class="font-bold text-slate-900 text-sm flex items-center gap-2">
                            <i class="fa-solid fa-qrcode text-emerald-600"></i> Scan &amp; Pay via Any UPI App
                        </h3>
                        <p class="leading-relaxed">
                            Open <strong>Google Pay, PhonePe, Paytm, BHIM</strong> or your bank UPI app, scan the QR code, and transfer <strong>₹{{ number_format((float)$order->total_price, 2) }}</strong>.
                        </p>
                        <div class="p-3 bg-emerald-50 rounded-xl border border-emerald-200 text-emerald-800 text-[11px] font-semibold space-y-1">
                            <div><i class="fa-solid fa-circle-info mr-1 text-emerald-600"></i> After payment, note down the <strong>Transaction / UTR ID</strong> and take a screenshot of the payment receipt.</div>
                        </div>
                    </div>
                </div>

                <!-- Bank Details Table -->
                <div class="border-t border-slate-100 pt-6 space-y-4">
                    <h3 class="font-extrabold text-slate-900 text-sm flex items-center gap-2">
                        <i class="fa-solid fa-building-columns text-emerald-600"></i> NEFT / IMPS / RTGS Bank Details
                    </h3>

                    <div class="overflow-x-auto rounded-2xl border border-slate-200">
                        <table class="w-full text-left text-xs divide-y divide-slate-200">
                            <tbody class="divide-y divide-slate-100 bg-white">
                                <tr class="hover:bg-slate-50">
                                    <th class="py-3 px-4 font-bold text-slate-600 bg-slate-50 w-1/3">Account Holder Name</th>
                                    <td class="py-3 px-4 font-bold text-slate-900">Saba Remedies</td>
                                </tr>
                                <tr class="hover:bg-slate-50">
                                    <th class="py-3 px-4 font-bold text-slate-600 bg-slate-50">Account Number</th>
                                    <td class="py-3 px-4 font-mono font-bold text-slate-900 flex items-center justify-between">
                                        <span>009011010000033</span>
                                        <button type="button" onclick="navigator.clipboard.writeText('009011010000033'); alert('Account number copied!');" class="text-emerald-600 hover:text-emerald-800 text-[11px] font-semibold">Copy</button>
                                    </td>
                                </tr>
                                <tr class="hover:bg-slate-50">
                                    <th class="py-3 px-4 font-bold text-slate-600 bg-slate-50">Bank Name</th>
                                    <td class="py-3 px-4 font-semibold text-slate-800">Union Bank of India</td>
                                </tr>
                                <tr class="hover:bg-slate-50">
                                    <th class="py-3 px-4 font-bold text-slate-600 bg-slate-50">Branch Name</th>
                                    <td class="py-3 px-4 text-slate-700">Maruri Nagar, Hyderabad, Telangana</td>
                                </tr>
                                <tr class="hover:bg-slate-50">
                                    <th class="py-3 px-4 font-bold text-slate-600 bg-slate-50">IFSC Code</th>
                                    <td class="py-3 px-4 font-mono font-bold text-slate-900 flex items-center justify-between">
                                        <span>IBIN082174</span>
                                        <button type="button" onclick="navigator.clipboard.writeText('IBIN082174'); alert('IFSC code copied!');" class="text-emerald-600 hover:text-emerald-800 text-[11px] font-semibold">Copy</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>

            <!-- Right Column: Upload Payment Proof Form (5 Cols) - Clean Light Theme -->
            <div class="lg:col-span-5 bg-white text-slate-800 rounded-3xl border border-slate-200 p-6 sm:p-8 shadow-sm space-y-6">
                
                <div class="border-b border-slate-100 pb-4 text-center space-y-1">
                    <span class="inline-block px-3 py-1 bg-emerald-50 text-emerald-700 font-bold text-[10px] rounded-full uppercase tracking-wider mb-1">Step 2: Confirmation</span>
                    <h3 class="font-extrabold text-base tracking-tight text-slate-900">Upload Payment Success Proof</h3>
                    <p class="text-slate-500 text-xs">Attach transaction details for fast verification</p>
                </div>

                <form action="{{ route('payment.offline.submit') }}" method="POST" enctype="multipart/form-data" class="space-y-4 text-xs">
                    @csrf
                    <input type="hidden" name="order_id" value="{{ $order->order_id }}">

                    <div>
                        <label class="block font-bold text-slate-700 mb-1">Payment Method Used *</label>
                        <select name="payment_method" required class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 text-slate-900 font-medium focus:bg-white focus:ring-2 focus:ring-emerald-500 focus:outline-none transition-all">
                            <option value="Gpay">Google Pay (GPay)</option>
                            <option value="Phonepe">PhonePe</option>
                            <option value="Paytm">Paytm / Other UPI</option>
                            <option value="Bank Account">Direct Bank Transfer / NEFT</option>
                        </select>
                    </div>

                    <div>
                        <label class="block font-bold text-slate-700 mb-1">Amount Paid (₹) *</label>
                        <input type="text" name="amount" value="{{ $order->total_price }}" required class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 text-slate-900 font-medium focus:bg-white focus:ring-2 focus:ring-emerald-500 focus:outline-none transition-all">
                    </div>

                    <div>
                        <label class="block font-bold text-slate-700 mb-1">UPI Ref / Transaction-ID *</label>
                        <input type="text" name="transaction_id" required placeholder="e.g. 324567891234 or UTR number" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 text-slate-900 placeholder-slate-400 focus:bg-white focus:ring-2 focus:ring-emerald-500 focus:outline-none font-mono transition-all">
                    </div>

                    <div>
                        <label class="block font-bold text-slate-700 mb-1">Payment Screenshot / Photo Proof *</label>
                        <input type="file" name="proof_code" accept="image/*" required class="w-full bg-slate-50 border border-slate-200 rounded-xl p-2.5 text-slate-600 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-emerald-50 file:text-emerald-700 hover:file:bg-emerald-100">
                        <span class="text-[10px] text-slate-400 mt-1 block">Upload a screenshot of the successful payment screen (JPG, PNG) - Required.</span>
                    </div>

                    <button type="submit" class="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-extrabold py-3.5 px-4 rounded-xl shadow-md shadow-emerald-600/20 transition-all text-xs flex items-center justify-center gap-2">
                        <i class="fa-solid fa-cloud-arrow-up"></i>
                        Submit Payment Proof &amp; Complete Order
                    </button>
                </form>

            </div>

        </div>

    </div>
</section>
@endsection