@extends('layouts.app')

@section('title', 'Payment Methods - WedBooker')
@section('page-title', 'Payment Methods')
@section('page-description', 'Manage your payment methods')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    
    <!-- Back Button -->
    <div>
        <a href="{{ route('subscription.index') }}" class="text-purple-400 hover:text-purple-300 transition">
            <i class="fas fa-arrow-left mr-2"></i>Back to Subscription
        </a>
    </div>
    
    <!-- Add New Payment Method -->
    <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-up">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-xl font-bold text-white">Add New Payment Method</h3>
            <button onclick="showAddPaymentModal()" class="px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg text-white font-semibold hover:shadow-2xl transition hover:scale-105">
                <i class="fas fa-plus mr-2"></i>Add Card
            </button>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
            <div class="p-4 bg-white/5 rounded-lg text-center hover:bg-white/10 transition cursor-pointer" onclick="showAddPaymentModal()">
                <i class="fab fa-cc-visa text-4xl text-blue-400 mb-2"></i>
                <p class="text-gray-300 text-sm">Visa</p>
            </div>
            <div class="p-4 bg-white/5 rounded-lg text-center hover:bg-white/10 transition cursor-pointer" onclick="showAddPaymentModal()">
                <i class="fab fa-cc-mastercard text-4xl text-orange-400 mb-2"></i>
                <p class="text-gray-300 text-sm">Mastercard</p>
            </div>
            <div class="p-4 bg-white/5 rounded-lg text-center hover:bg-white/10 transition cursor-pointer" onclick="showAddPaymentModal()">
                <i class="fab fa-cc-amex text-4xl text-blue-300 mb-2"></i>
                <p class="text-gray-300 text-sm">American Express</p>
            </div>
        </div>
    </div>
    
    <!-- Saved Payment Methods -->
    <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-up">
        <h3 class="text-xl font-bold text-white mb-4">Saved Payment Methods</h3>
        
        <div class="space-y-4">
            <!-- Default Card -->
            <div class="p-4 bg-gradient-to-r from-purple-600/20 to-pink-600/20 rounded-xl border border-purple-500/30">
                <div class="flex justify-between items-start">
                    <div class="flex items-center gap-4">
                        <i class="fab fa-cc-visa text-4xl text-blue-400"></i>
                        <div>
                            <p class="text-white font-semibold">Visa ending in 4242</p>
                            <p class="text-gray-400 text-sm">Expires 12/2026</p>
                            <span class="badge badge-success mt-1">Default</span>
                        </div>
                    </div>
                    <div class="flex gap-2">
                        <button onclick="setAsDefault(1)" class="text-green-400 hover:text-green-300 transition" title="Set as Default">
                            <i class="fas fa-check-circle"></i>
                        </button>
                        <button onclick="deletePaymentMethod(1)" class="text-red-400 hover:text-red-300 transition" title="Remove">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- Another Card -->
            <div class="p-4 bg-white/5 rounded-xl">
                <div class="flex justify-between items-start">
                    <div class="flex items-center gap-4">
                        <i class="fab fa-cc-mastercard text-4xl text-orange-400"></i>
                        <div>
                            <p class="text-white font-semibold">Mastercard ending in 1234</p>
                            <p class="text-gray-400 text-sm">Expires 08/2025</p>
                        </div>
                    </div>
                    <div class="flex gap-2">
                        <button onclick="setAsDefault(2)" class="text-green-400 hover:text-green-300 transition" title="Set as Default">
                            <i class="fas fa-check-circle"></i>
                        </button>
                        <button onclick="deletePaymentMethod(2)" class="text-red-400 hover:text-red-300 transition" title="Remove">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Billing Information -->
    <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-up">
        <h3 class="text-xl font-bold text-white mb-4">Billing Information</h3>
        
        <div class="grid md:grid-cols-2 gap-6">
            <div>
                <label class="block text-white mb-2">Full Name</label>
                <input type="text" value="John Doe" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white">
            </div>
            <div>
                <label class="block text-white mb-2">Company (Optional)</label>
                <input type="text" value="Wedding Planning Co." class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white">
            </div>
            <div>
                <label class="block text-white mb-2">Address Line 1</label>
                <input type="text" value="123 Wedding Street" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white">
            </div>
            <div>
                <label class="block text-white mb-2">Address Line 2</label>
                <input type="text" value="Suite 100" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white">
            </div>
            <div>
                <label class="block text-white mb-2">City</label>
                <input type="text" value="London" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white">
            </div>
            <div>
                <label class="block text-white mb-2">Postal Code</label>
                <input type="text" value="EC1A 1BB" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white">
            </div>
            <div>
                <label class="block text-white mb-2">Country</label>
                <select class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white">
                    <option>United Kingdom</option>
                    <option>United States</option>
                    <option>Canada</option>
                </select>
            </div>
            <div>
                <label class="block text-white mb-2">VAT Number (Optional)</label>
                <input type="text" value="GB123456789" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white">
            </div>
        </div>
        
        <div class="mt-6">
            <button onclick="updateBillingInfo()" class="px-6 py-2 bg-purple-600 rounded-lg text-white hover:bg-purple-700 transition">
                <i class="fas fa-save mr-2"></i>Update Billing Information
            </button>
        </div>
    </div>
    
    <!-- Billing History Link -->
    <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-up">
        <div class="flex justify-between items-center">
            <div>
                <h3 class="text-xl font-bold text-white">Billing History</h3>
                <p class="text-gray-400 text-sm">View all your past invoices</p>
            </div>
            <a href="{{ route('subscription.invoice', 1) }}" class="text-purple-400 hover:text-purple-300 transition">
                View Invoices <i class="fas fa-arrow-right ml-1"></i>
            </a>
        </div>
    </div>
</div>

<!-- Add Payment Method Modal -->
<div id="addPaymentModal" class="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
    <div class="glass-card rounded-2xl max-w-md w-full">
        <div class="sticky top-0 bg-black/50 backdrop-blur-lg p-4 border-b border-white/10 flex justify-between items-center">
            <h3 class="text-xl font-bold text-white">Add Payment Method</h3>
            <button onclick="closeAddPaymentModal()" class="text-gray-400 hover:text-white">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        <div class="p-6">
            <form id="addPaymentForm" action="{{ route('subscription.add-payment-method') }}" method="POST">
                @csrf
                <div class="space-y-4">
                    <div>
                        <label class="block text-white mb-2">Card Number</label>
                        <input type="text" name="card_number" placeholder="1234 5678 9012 3456" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" required>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-white mb-2">Expiry Date</label>
                            <input type="text" name="expiry" placeholder="MM/YY" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" required>
                        </div>
                        <div>
                            <label class="block text-white mb-2">CVC</label>
                            <input type="text" name="cvc" placeholder="123" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" required>
                        </div>
                    </div>
                    <div>
                        <label class="block text-white mb-2">Cardholder Name</label>
                        <input type="text" name="cardholder_name" placeholder="John Doe" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white" required>
                    </div>
                    <div class="flex gap-3 pt-4">
                        <button type="submit" class="flex-1 px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg text-white font-semibold hover:shadow-2xl transition">
                            Add Card
                        </button>
                        <button type="button" onclick="closeAddPaymentModal()" class="px-4 py-2 bg-white/10 rounded-lg text-gray-300 hover:bg-white/20 transition">
                            Cancel
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<form id="setDefaultForm" method="POST" style="display: none;">
    @csrf
    @method('PUT')
</form>

<form id="deletePaymentForm" method="POST" style="display: none;">
    @csrf
    @method('DELETE')
</form>

@push('scripts')
<script>
    function showAddPaymentModal() {
        document.getElementById('addPaymentModal').classList.remove('hidden');
        document.getElementById('addPaymentModal').classList.add('flex');
    }
    
    function closeAddPaymentModal() {
        document.getElementById('addPaymentModal').classList.remove('flex');
        document.getElementById('addPaymentModal').classList.add('hidden');
    }
    
    function setAsDefault(paymentMethodId) {
        if(confirm('Set this as your default payment method?')) {
            const form = document.getElementById('setDefaultForm');
            form.action = "{{ url('subscription/payment-methods') }}/" + paymentMethodId + "/default";
            form.submit();
        }
    }
    
    function deletePaymentMethod(paymentMethodId) {
        if(confirm('Are you sure you want to remove this payment method?')) {
            const form = document.getElementById('deletePaymentForm');
            form.action = "{{ url('subscription/payment-methods') }}/" + paymentMethodId;
            form.submit();
        }
    }
    
    function updateBillingInfo() {
        alert('Billing information updated successfully!');
    }
    
    // Close modal on outside click
    document.getElementById('addPaymentModal').addEventListener('click', function(e) {
        if(e.target === this) {
            closeAddPaymentModal();
        }
    });
    
    // Add animation to cards
    document.querySelectorAll('.glass-card').forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-5px)';
        });
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
        });
    });
</script>
@endpush
@endsection