@extends('layouts.app')

@section('title', 'Billing Dashboard - BlueSmokeAI')

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

@section('content')
<div class="py-6">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Current Subscription -->
        <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">Current Subscription</h3>
                
                <div class="bg-gray-50 p-4 rounded-lg">
                    <div class="flex justify-between items-center">
                        <div>
                            <p class="text-lg font-semibold text-indigo-600">{{ $currentSubscription['name'] }}</p>
                            <p class="text-sm text-gray-600">
                                @if($currentSubscription['status'] === 'active')
                                    Your subscription is active and will renew on {{ $currentSubscription['next_billing_date']->format('F j, Y') }}.
                                @elseif($currentSubscription['status'] === 'trialing')
                                    Your trial will end on {{ $currentSubscription['trial_ends_at']->format('F j, Y') }}.
                                @elseif($currentSubscription['status'] === 'canceled')
                                    Your subscription has been canceled and will end on {{ $currentSubscription['ends_at']->format('F j, Y') }}.
                                @endif
                            </p>
                        </div>
                        <div>
                            <p class="text-2xl font-bold text-gray-800">${{ number_format($currentSubscription['price'], 2) }}<span class="text-sm text-gray-600">/{{ $currentSubscription['interval'] }}</span></p>
                        </div>
                    </div>
                    <div class="mt-4 flex space-x-4">
                        <a href="{{ route('billing.plans') }}" 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">
                            Change Plan
                        </a>
                        @if($currentSubscription['status'] === 'active')
                            <a href="{{ route('billing.cancel') }}" class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                                Cancel Subscription
                            </a>
                        @elseif($currentSubscription['status'] === 'canceled')
                            <a href="{{ route('billing.resume') }}" class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                                Resume Subscription
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 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">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-medium text-gray-900">Payment Methods</h3>
                    <a href="{{ route('billing.payment-methods') }}" 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">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                        </svg>
                        Add Payment Method
                    </a>
                </div>
                
                <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']) }}