@extends('layouts.app')

@section('title', 'Checkout')

@section('content')
@if(session('error'))
<div class="max-w-4xl mx-auto px-4 mb-4">
    <div class="bg-red-50 border-l-4 border-red-500 text-red-700 p-4 rounded-lg shadow-sm" role="alert">
        <div class="flex items-center">
            <svg class="h-5 w-5 text-red-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
            </svg>
            <p class="text-sm font-medium">{{ session('error') }}</p>
        </div>
    </div>
</div>
@endif

<div class="max-w-4xl mx-auto px-4">
    <h1 class="text-2xl font-bold mb-6">Checkout</h1>

    @if(!session('user_id'))
    <div class="bg-blue-50 border-l-4 border-blue-500 text-blue-700 p-4 mb-6">
        <p class="text-sm">Sudah punya akun? <a href="/auth/login" class="font-bold underline">Login</a> untuk melacak pesanan lebih mudah.</p>
    </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2">
            <form action="/checkout/process" method="POST" id="checkoutForm" class="bg-white rounded-lg shadow p-6">
                @csrf
                <h2 class="text-lg font-semibold mb-4">Informasi Kontak</h2>
                
                <div class="mb-4">
                    <label class="block mb-2 font-medium">Email <span class="text-red-500">*</span></label>
                    <input type="email" name="email" value="{{ session('user_id') ? App\Models\User::find(session('user_id'))->email : '' }}" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500" required>
                </div>

                <div class="mb-6">
                    <label class="block mb-2 font-medium">Roblox Username <span class="text-red-500">*</span></label>
                    <input type="text" name="roblox_username" value="{{ session('user_id') ? App\Models\User::find(session('user_id'))->roblox_username : '' }}" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500" required>
                    <p class="text-xs text-gray-500 mt-1">Pastikan username Roblox benar untuk pengiriman otomatis</p>
                </div>

                <h2 class="text-lg font-semibold mb-4">Metode Pembayaran</h2>
                
                <!-- Payment Methods -->
                <div class="space-y-3 mb-6">
                    <!-- Automatic Payments -->
                    <div class="border rounded-lg p-4">
                        <h3 class="font-medium mb-3 text-blue-600">Pembayaran Otomatis</h3>
                        <div class="space-y-2">
                            <label class="flex items-center p-3 border rounded-lg cursor-pointer hover:bg-gray-50">
                                <input type="radio" name="payment_method" value="midtrans" class="mr-3">
                                <div class="flex items-center flex-1">
                                    <img src="https://mir-s3-cdn-cf.behance.net/projects/max_808/291f8953226557.Y3JvcCw4NzksNjg4LDI3NywxNTQ.png" class="w-10 h-10 rounded mr-3">
                                    <div>
                                        <span class="font-medium">Midtrans</span>
                                        <p class="text-xs text-gray-500">Credit Card, Bank Transfer, E-Wallet</p>
                                    </div>
                                </div>
                            </label>
                            
                            <label class="flex items-center p-3 border rounded-lg cursor-pointer hover:bg-gray-50">
                                <input type="radio" name="payment_method" value="xendit" class="mr-3">
                                <div class="flex items-center flex-1">
                                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvjYjs9oE0ExuYIBSMV3d0ymF8hJoSr9w_jA&s" class="w-10 h-10 rounded mr-3">
                                    <div>
                                        <span class="font-medium">Xendit</span>
                                        <p class="text-xs text-gray-500">Virtual Account, E-Wallet, QRIS, Retail</p>
                                    </div>
                                </div>
                            </label>
                            
                            <label class="flex items-center p-3 border rounded-lg cursor-pointer hover:bg-gray-50">
                                <input type="radio" name="payment_method" value="stripe" class="mr-3">
                                <div class="flex items-center flex-1">
                                    <img src="https://www.designyourway.net/blog/wp-content/uploads/2024/12/Stripe-logo-featured.jpg" class="w-10 h-10 rounded mr-3">
                                    <div>
                                        <span class="font-medium">Stripe</span>
                                        <p class="text-xs text-gray-500">Credit Card International</p>
                                    </div>
                                </div>
                            </label>
                        </div>
                    </div>

                    <!-- Manual Payment -->
                    <div class="border rounded-lg p-4">
                        <h3 class="font-medium mb-3 text-green-600">Pembayaran Manual (Transfer Bank)</h3>
                        <label class="flex items-center p-3 border rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="radio" name="payment_method" value="manual" class="mr-3" id="manualPayment">
                            <div class="flex items-center flex-1">
                                <svg class="w-10 h-10 text-green-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
                                </svg>
                                <div>
                                    <span class="font-medium">Transfer Bank Manual</span>
                                    <p class="text-xs text-gray-500">Pilih bank tujuan, konfirmasi manual</p>
                                </div>
                            </div>
                        </label>

                        <!-- Manual Payment Details (hidden by default) -->
                        <div id="manualPaymentDetails" class="mt-4 hidden space-y-4">
                            <p class="text-sm bg-yellow-50 p-3 rounded-lg border border-yellow-200">
                                <span class="font-bold">Penting:</span> Setelah checkout, Anda akan mendapatkan instruksi transfer. 
                                Upload bukti pembayaran di halaman order setelah checkout.
                            </p>
                            
                            <div>
                                <label class="block mb-2 text-sm font-medium">Pilih Bank Tujuan</label>
                                <select name="bank_id" class="w-full px-4 py-2 border rounded-lg" id="bankSelect">
                                    <option value="">Pilih Bank</option>
                                    @foreach($bankAccounts as $bank)
                                    <option value="{{ $bank->id }}" 
                                            data-bank="{{ $bank->bank_name }}"
                                            data-account="{{ $bank->account_number }}"
                                            data-holder="{{ $bank->account_holder }}"
                                            data-logo="{{ $bank->logo }}">
                                        {{ $bank->bank_name }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>

                            <div id="bankAccountInfo" class="hidden">
                                <div class="bg-gray-50 p-4 rounded-lg">
                                    <p class="text-sm font-medium mb-2">Rekening Tujuan:</p>
                                    <div class="flex items-center" id="bankDetails">
                                        <!-- Will be filled by JS -->
                                    </div>
                                </div>
                            </div>

                            <div>
                                <label class="block mb-2 text-sm font-medium">Atas Nama Pengirim</label>
                                <input type="text" name="account_name" class="w-full px-4 py-2 border rounded-lg" placeholder="Nama pemilik rekening">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Hidden fields -->
                <input type="hidden" name="gateway" id="gatewayField" value="">
                <input type="hidden" name="coupon_code" id="hiddenCouponCode" value="">

                <button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 font-medium transition" id="submitBtn">
                    Proses Pembayaran
                </button>

                <p class="text-xs text-center text-gray-500 mt-4">
                    Dengan melanjutkan, Anda menyetujui <a href="/terms" class="text-blue-600">Syarat & Ketentuan</a>
                </p>
            </form>
        </div>

        <!-- Order Summary -->
        <div class="lg:col-span-1">
            <div class="bg-white rounded-lg shadow p-6 sticky top-20">
                <h2 class="text-lg font-semibold mb-4">Ringkasan Pesanan</h2>
                
                <div class="space-y-3 mb-4 max-h-60 overflow-y-auto">
                    @foreach($cart->items as $item)
                    <div class="flex justify-between text-sm">
                        <div>
                            <span class="font-medium">{{ $item->product->name }}</span>
                            <span class="text-gray-500 text-xs block">{{ $item->product->game->name ?? 'Game' }}</span>
                        </div>
                        <div class="text-right">
                            <span class="block">{{ currency($item->price) }}</span>
                            <span class="text-gray-500 text-xs">x{{ $item->quantity }}</span>
                        </div>
                    </div>
                    @endforeach
                </div>

                <!-- Coupon -->
                <div class="mb-4">
                    <div class="flex space-x-2">
                        <input type="text" id="couponCode" placeholder="Kode Kupon" class="flex-1 px-3 py-2 border rounded-lg text-sm">
                        <button type="button" onclick="applyCoupon()" class="bg-gray-500 text-white px-4 py-2 rounded-lg text-sm hover:bg-gray-600">
                            Apply
                        </button>
                    </div>
                    <div id="couponMessage" class="text-xs mt-1 hidden"></div>
                </div>

                <!-- Totals with Currency -->
                <div class="border-t pt-4 space-y-2">
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Subtotal</span>
                        <span id="subtotal">{{ currency($cart->total) }}</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Diskon</span>
                        <span id="discount">{{ currency(0) }}</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Biaya Layanan</span>
                        <span id="fee">{{ currency($cart->total * 0.05) }}</span>
                    </div>
                    <div class="flex justify-between font-bold text-lg border-t pt-2">
                        <span>Total</span>
                        <span id="total">{{ currency($cart->total + ($cart->total * 0.05)) }}</span>
                    </div>
                </div>

                <!-- Currency Info -->
                <div class="mt-3 text-xs text-center text-gray-500">
                    * Ditampilkan dalam {{ currency_code() }}
                </div>

                <!-- Payment Info -->
                <div class="mt-4 p-3 bg-blue-50 rounded-lg">
                    <p class="text-xs text-blue-800">
                        <span class="font-bold">🔒 Aman & Terpercaya</span><br>
                        Semua transaksi dilindungi enkripsi SSL. Data pembayaran Anda aman.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Toggle manual payment details dan handle atribut required
    document.querySelectorAll('input[name="payment_method"]').forEach(radio => {
        radio.addEventListener('change', function() {
            const manualDetails = document.getElementById('manualPaymentDetails');
            const gatewayField = document.getElementById('gatewayField');
            const bankSelect = document.getElementById('bankSelect');
            const accountName = document.querySelector('input[name="account_name"]');
            
            console.log('Payment method changed to:', this.value);
            
            if (this.value === 'manual') {
                manualDetails.classList.remove('hidden');
                gatewayField.value = 'manual';
                bankSelect.setAttribute('required', 'required');
                accountName.setAttribute('required', 'required');
            } else {
                manualDetails.classList.add('hidden');
                gatewayField.value = this.value;
                bankSelect.removeAttribute('required');
                accountName.removeAttribute('required');
                bankSelect.value = '';
                accountName.value = '';
            }
        });
    });

    // Show bank account info from database
    document.getElementById('bankSelect')?.addEventListener('change', function() {
        const selected = this.options[this.selectedIndex];
        const infoDiv = document.getElementById('bankAccountInfo');
        const detailsDiv = document.getElementById('bankDetails');
        
        if (selected.value) {
            const bankName = selected.getAttribute('data-bank');
            const account = selected.getAttribute('data-account');
            const holder = selected.getAttribute('data-holder');
            const logo = selected.getAttribute('data-logo');
            
            let logoHtml = '';
            if (logo) {
                logoHtml = `<img src="/uploads/banks/${logo}" class="w-12 h-12 mr-3 object-contain">`;
            }
            
            detailsDiv.innerHTML = `
                ${logoHtml}
                <div>
                    <p class="font-bold">${bankName}</p>
                    <p class="text-lg font-mono mt-1">${account}</p>
                    <p class="text-gray-600">a.n. ${holder}</p>
                </div>
            `;
            infoDiv.classList.remove('hidden');
        } else {
            infoDiv.classList.add('hidden');
        }
    });

    // Apply coupon
    function applyCoupon() {
        const code = document.getElementById('couponCode').value;
        if (!code) {
            alert('Masukkan kode kupon');
            return;
        }
        
        const applyBtn = event.target;
        const originalText = applyBtn.textContent;
        applyBtn.textContent = 'Loading...';
        applyBtn.disabled = true;
        
        fetch('/checkout/apply-coupon', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ code: code })
        })
        .then(res => res.json())
        .then(data => {
            const msg = document.getElementById('couponMessage');
            
            if (data.error) {
                msg.className = 'text-xs mt-1 text-red-600';
                msg.textContent = data.error;
                msg.classList.remove('hidden');
                document.getElementById('hiddenCouponCode').value = '';
            } else {
                msg.className = 'text-xs mt-1 text-green-600';
                msg.textContent = 'Kupon berhasil digunakan!';
                msg.classList.remove('hidden');
                document.getElementById('hiddenCouponCode').value = code;
                
                // Update totals - use currency formatting
                const subtotal = {{ $cart->total }};
                const discount = Math.round(data.discount);
                const fee = Math.round(subtotal * 0.05);
                const total = subtotal - discount + fee;
                
                // Update display with currency formatting
                document.getElementById('discount').innerHTML = formatCurrency(discount);
                document.getElementById('total').innerHTML = formatCurrency(total);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            const msg = document.getElementById('couponMessage');
            msg.className = 'text-xs mt-1 text-red-600';
            msg.textContent = 'Terjadi kesalahan, silakan coba lagi';
            msg.classList.remove('hidden');
            document.getElementById('hiddenCouponCode').value = '';
        })
        .finally(() => {
            applyBtn.textContent = originalText;
            applyBtn.disabled = false;
        });
    }

    // Helper function untuk format currency
    function formatCurrency(amount) {
        const symbol = '{{ currency_symbol() }}';
        const code = '{{ currency_code() }}';
        
        if (code === 'IDR') {
            return symbol + ' ' + Math.round(amount).toLocaleString('id-ID');
        } else {
            return symbol + amount.toFixed(2);
        }
    }

    // Form validation sebelum submit
    document.getElementById('checkoutForm')?.addEventListener('submit', function(e) {
        const paymentMethod = document.querySelector('input[name="payment_method"]:checked');
        const gatewayField = document.getElementById('gatewayField');
        
        console.log('Form submitted with payment method:', paymentMethod ? paymentMethod.value : 'none');
        
        if (!paymentMethod) {
            e.preventDefault();
            alert('Pilih metode pembayaran terlebih dahulu');
            return;
        }
        
        gatewayField.value = paymentMethod.value;
        console.log('Gateway set to:', gatewayField.value);
        
        if (paymentMethod.value === 'manual') {
            const bankSelect = document.getElementById('bankSelect');
            const accountName = document.querySelector('input[name="account_name"]');
            
            if (!bankSelect.value) {
                e.preventDefault();
                alert('Pilih bank tujuan transfer');
                return;
            }
            
            if (!accountName.value.trim()) {
                e.preventDefault();
                alert('Masukkan nama pemilik rekening');
                return;
            }
        }
        
        console.log('Submitting form with data:', {
            payment_method: paymentMethod.value,
            gateway: gatewayField.value,
            coupon: document.getElementById('hiddenCouponCode').value
        });
        
        return true;
    });

    // Inisialisasi saat halaman dimuat
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('manualPaymentDetails').classList.add('hidden');
        document.getElementById('bankSelect').removeAttribute('required');
        document.querySelector('input[name="account_name"]').removeAttribute('required');
        console.log('Checkout page initialized');
    });
</script>
@endsection