@extends('layouts.app')

@section('title', 'Payment Methods - BlueSmokeAI')

@section('header')
    <h2 class="font-semibold text-xl text-gray-800 leading-tight">
        {{ __('Payment Methods') }}
    </h2>
@endsection

@section('content')
<div class="py-6">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Status Messages -->
        @if (session('success'))
            <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-6" role="alert">
                <p>{{ session('success') }}</p>
            </div>
        @endif

        @if ($errors->any())
            <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6" role="alert">
                <p class="font-bold">Please fix the following errors:</p>
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <!-- Current Payment Methods -->
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg mb-6">
            <div class="p-6 bg-white border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Your Payment Methods</h3>
                
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Card</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Expiration</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @forelse($paymentMethods as $method)
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0 h-10 w-10 flex items-center justify-center">
                                                @if($method['brand'] === 'visa')
                                                    <svg class="h-8 w-8 text-blue-600" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M22.4 3.6H1.6C0.72 3.6 0 4.32 0 5.2V18.8C0 19.68 0.72 20.4 1.6 20.4H22.4C23.28 20.4 24 19.68 24 18.8V5.2C24 4.32 23.28 3.6 22.4 3.6Z" fill="currentColor"/>
                                                        <path d="M9.6 14.4L11.2 9.6H12.8L11.2 14.4H9.6Z" fill="white"/>
                                                        <path d="M14.4 14.4L16 9.6H17.6L16 14.4H14.4Z" fill="white"/>
                                                        <path d="M8 9.6L6.4 12.8L6 11.6L5.2 9.6H3.6L5.6 14.4H7.2L9.6 9.6H8Z" fill="white"/>
                                                        <path d="M17.6 9.6C16.8 9.6 16 10 16 10.8C16 11.6 16.8 12 17.6 12C18.4 12 19.2 11.6 19.2 10.8C19.2 10 18.4 9.6 17.6 9.6Z" fill="white"/>
                                                    </svg>
                                                @elseif($method['brand'] === 'mastercard')
                                                    <svg class="h-8 w-8 text-red-500" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M22.4 3.6H1.6C0.72 3.6 0 4.32 0 5.2V18.8C0 19.68 0.72 20.4 1.6 20.4H22.4C23.28 20.4 24 19.68 24 18.8V5.2C24 4.32 23.28 3.6 22.4 3.6Z" fill="currentColor"/>
                                                        <path d="M14.4 12C14.4 9.6 16 7.6 18.4 7.6C20.8 7.6 22.4 9.6 22.4 12C22.4 14.4 20.8 16.4 18.4 16.4C16 16.4 14.4 14.4 14.4 12Z" fill="#FF5F00"/>
                                                        <path d="M9.6 12C9.6 9.6 11.2 7.6 13.6 7.6C16 7.6 17.6 9.6 17.6 12C17.6 14.4 16 16.4 13.6 16.4C11.2 16.4 9.6 14.4 9.6 12Z" fill="#EB001B"/>
                                                        <path d="M12 12C12 10.4 12.8 8.8 14.4 8C13.6 7.2 12.8 7.2 12 7.2C9.6 7.2 8 9.2 8 12C8 14.8 9.6 16.8 12 16.8C12.8 16.8 13.6 16.4 14.4 15.6C12.8 14.8 12 13.6 12 12Z" fill="#F79E1B"/>
                                                    </svg>
                                                @elseif($method['brand'] === 'amex')
                                                    <svg class="h-8 w-8 text-blue-400" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M22.4 3.6H1.6C0.72 3.6 0 4.32 0 5.2V18.8C0 19.68 0.72 20.4 1.6 20.4H22.4C23.28 20.4 24 19.68 24 18.8V5.2C24 4.32 23.28 3.6 22.4 3.6Z" fill="currentColor"/>
                                                        <path d="M14.4 7.2H20V8.8H14.4V7.2Z" fill="white"/>
                                                        <path d="M14.4 10.4H20V12H14.4V10.4Z" fill="white"/>
                                                        <path d="M14.4 13.6H20V15.2H14.4V13.6Z" fill="white"/>
                                                        <path d="M4 7.2H9.6V15.2H8V12.8H5.6V15.2H4V7.2Z" fill="white"/>
                                                        <path d="M5.6 8.8V11.2H8V8.8H5.6Z" fill="currentColor"/>
                                                        <path d="M10.4 7.2H16V8.8H12V10.4H16V12H12V13.6H16V15.2H10.4V7.2Z" fill="white"/>
                                                    </svg>
                                                @else
                                                    <svg class="h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
                                                        <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" />
                                                    </svg>
                                                @endif
                                            </div>
                                            <div class="ml-4">
                                                <div class="text-sm font-medium text-gray-900">
                                                    {{ ucfirst($method['brand']) }} ending in {{ $method['last4'] }}
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        {{ $method['exp_month'] }}/{{ $method['exp_year'] }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        @if($method['is_default'])
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                                Default
                                            </span>
                                        @else
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                                                Active
                                            </span>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        @if(!$method['is_default'])
                                            <form method="POST" action="{{ route('billing.payment-methods.default', $method['id']) }}" class="inline">
                                                @csrf
                                                <button type="submit" class="text-indigo-600 hover:text-indigo-900 mr-3">Make Default</button>
                                            </form>
                                        @endif
                                        <form method="POST" action="{{ route('billing.payment-methods.destroy', $method['id']) }}" class="inline">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="text-red-600 hover:text-red-900" onclick="return confirm('Are you sure you want to remove this payment method?');">Remove</button>
                                        </form>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">
                                        No payment methods found. Add your first payment method below.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        <!-- Add New Payment Method -->
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6 bg-white border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Add New Payment Method</h3>
                
                <form action="{{ route('billing.payment-methods.store') }}" method="POST" id="payment-form">
                    @csrf
                    
                    <div class="mb-4">
                        <div id="card-element" class="p-3 border border-gray-300 rounded-md"></div>
                        <div id="card-errors" class="text-red-600 text-sm mt-2"></div>
                    </div>
                    
                    <div class="mb-4">
                        <label class="inline-flex items-center">
                            <input type="checkbox" name="default" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                            <span class="ml-2 text-sm text-gray-600">Set as default payment method</span>
                        </label>
                    </div>
                    
                    <div>
                        <button type="submit" id="card-button" data-secret="{{ $intent->client_secret }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-indigo-700 active:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                            Add Payment Method
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://js.stripe.com/v3/"></script>
<script>
    const stripe = Stripe('{{ config('services.stripe.key') }}');
    const elements = stripe.elements();
    const cardElement = elements.create('card');
    
    cardElement.mount('#card-element');
    
    const cardButton = document.getElementById('card-button');
    const clientSecret = cardButton.dataset.secret;
    
    cardElement.addEventListener('change', function(event) {
        const displayError = document.getElementById('card-errors');
        if (event.error) {
            displayError.textContent = event.error.message;
        } else {
            displayError.textContent = '';
        }
    });
    
    const form = document.getElementById('payment-form');
    
    form.addEventListener('submit', function(event) {
        event.preventDefault();