@extends('layouts.app')

@section('title', __('dashboard.billing'))

@section('content')
<div class="container mx-auto px-4 py-12">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-white">{{ __('dashboard.billing') }}</h1>
        <p class="text-gray-400 mt-2">{{ __('dashboard.billing_description') }}</p>
    </div>

    @if(session('success'))
        <div class="bg-green-600 text-white p-4 rounded-lg mb-6">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="bg-red-600 text-white p-4 rounded-lg mb-6">
            {{ session('error') }}
        </div>
    @endif

    <!-- Current Subscription -->
    <div class="bg-gray-800 rounded-lg shadow-lg p-6 mb-8">
        <h2 class="text-xl font-semibold text-white mb-4">{{ __('dashboard.current_subscription') }}</h2>
        
        @if(Auth::user()->subscription)
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <div class="mb-4">
                        <span class="text-gray-400">{{ __('dashboard.package') }}:</span>
                        <span class="text-white ml-2 font-semibold">{{ Auth::user()->subscription->package->name }}</span>
                    </div>
                    
                    <div class="mb-4">
                        <span class="text-gray-400">{{ __('dashboard.billing_cycle') }}:</span>
                        <span class="text-white ml-2">
                            {{ Auth::user()->subscription->billing_cycle == 'monthly' ? __('dashboard.monthly') : __('dashboard.yearly') }}
                        </span>
                    </div>
                    
                    <div class="mb-4">
                        <span class="text-gray-400">{{ __('dashboard.amount') }}:</span>
                        <span class="text-white ml-2">${{ number_format(Auth::user()->subscription->amount, 2) }}</span>
                    </div>
                    
                    <div class="mb-4">
                        <span class="text-gray-400">{{ __('dashboard.next_billing_date') }}:</span>
                        <span class="text-white ml-2">{{ Auth::user()->subscription->next_billing_date->format('Y-m-d') }}</span>
                    </div>
                    
                    <div class="mb-4">
                        <span class="text-gray-400">{{ __('dashboard.status') }}:</span>
                        <span class="text-green-400 ml-2">{{ __('dashboard.active') }}</span>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold text-white mb-3">{{ __('dashboard.payment_method') }}</h3>
                    
                    @if(Auth::user()->card)
                        <div class="bg-gray-700 p-4 rounded-lg mb-4">
                            <div class="flex items-center">
                                <div class="mr-4">
                                    @if(Auth::user()->card->brand == 'visa')
                                        <i class="fab fa-cc-visa text-2xl text-blue-400"></i>
                                    @elseif(Auth::user()->card->brand == 'mastercard')
                                        <i class="fab fa-cc-mastercard text-2xl text-red-400"></i>
                                    @elseif(Auth::user()->card->brand == 'amex')
                                        <i class="fab fa-cc-amex text-2xl text-blue-300"></i>
                                    @else
                                        <i class="far fa-credit-card text-2xl text-gray-400"></i>
                                    @endif
                                </div>
                                <div>
                                    <p class="text-white">**** **** **** {{ Auth::user()->card->last4 }}</p>
                                    <p class="text-gray-400 text-sm">{{ __('dashboard.expires') }}: {{ Auth::user()->card->exp_month }}/{{ Auth::user()->card->exp_year }}</p>
                                </div>
                            </div>
                        </div>
                        
                        <button type="button" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg mb-2 w-full" 
                                onclick="toggleModal('updateCardModal')">
                            {{ __('dashboard.update_card') }}
                        </button>
                    @else
                        <p class="text-gray-400 mb-4">{{ __('dashboard.no_payment_method') }}</p>
                        
                        <button type="button" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg mb-2 w-full" 
                                onclick="toggleModal('addCardModal')">
                            {{ __('dashboard.add_payment_method') }}
                        </button>
                    @endif
                    
                    <form action="{{ route('subscription.cancel', app()->getLocale()) }}" method="POST" class="mt-4" 
                          onsubmit="return confirm('{{ __('dashboard.cancel_confirmation') }}')">
                        @csrf
                        <button type="submit" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg w-full">
                            {{ __('dashboard.cancel_subscription') }}
                        </button>
                    </form>
                </div>
            </div>
        @else
            <p class="text-gray-400">{{ __('dashboard.no_active_subscription') }}</p>
            <div class="mt-4">
                <a href="{{ route('packages', app()->getLocale()) }}" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg">
                    {{ __('dashboard.choose_package') }}
                </a>
            </div>
        @endif
    </div>

    <!-- Billing History -->
    <div class="bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-xl font-semibold text-white mb-4">{{ __('dashboard.billing_history') }}</h2>
        
        @if(isset($invoices) && count($invoices) > 0)
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="text-left text-gray-400 border-b border-gray-700">
                            <th class="pb-3">{{ __('dashboard.date') }}</th>
                            <th class="pb-3">{{ __('dashboard.description') }}</th>
                            <th class="pb-3">{{ __('dashboard.amount') }}</th>
                            <th class="pb-3">{{ __('dashboard.status') }}</th>
                            <th class="pb-3">{{ __('dashboard.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($invoices as $invoice)
                            <tr class="border-b border-gray-700">
                                <td class="py-4 text-white">{{ $invoice->created_at->format('Y-m-d') }}</td>
                                <td class="py-4 text-white">{{ $invoice->description }}</td>
                                <td class="py-4 text-white">${{ number_format($invoice->amount, 2) }}</td>
                                <td class="py-4">
                                    @if($invoice->status == 'paid')
                                        <span class="bg-green-600 text-white text-xs px-2 py-1 rounded-full">{{ __('dashboard.paid') }}</span>
                                    @elseif($invoice->status == 'pending')
                                        <span class="bg-yellow-600 text-white text-xs px-2 py-1 rounded-full">{{ __('dashboard.pending') }}</span>
                                    @else
                                        <span class="bg-red-600 text-white text-xs px-2 py-1 rounded-full">{{ __('dashboard.failed') }}</span>
                                    @endif
                                </td>
                                <td class="py-4">
                                    <a href="{{ route('invoices.show', [app()->getLocale(), $invoice->id]) }}" class="text-blue-400 hover:text-blue-300">
                                        {{ __('dashboard.view') }}
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <p class="text-gray-400">{{ __('dashboard.no_billing_history') }}</p>
        @endif
    </div>
</div>

<!-- Update Card Modal -->
<div id="updateCardModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6 w-full max-w-md">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-xl font-semibold text-white">{{ __('dashboard.update_payment_method') }}</h3>
            <button type="button" class="text-gray-400 hover:text-white" onclick="toggleModal('updateCardModal')">
                <i class="fas fa-times"></i>
            </button>
        </div>
        
        <form action="{{ route('card.update', app()->getLocale()) }}" method="POST" id="update-card-form">
            @csrf
            <div id="update-card-element" class="bg-gray-700 p-4 rounded-lg mb-4"></div>
            <div id="update-card-errors" class="text-red-500 mb-4"></div>
            
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg w-full">
                {{ __('dashboard.update_card') }}
            </button>
        </form>
    </div>
</div>

<!-- Add Card Modal -->
<div id="addCardModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6 w-full max-w-md">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-xl font-semibold text-white">{{ __('dashboard.add_payment_method') }}</h3>
            <button type="button" class="text-gray-400 hover:text-white" onclick="toggleModal('addCardModal')">
                <i class="fas fa-times"></i>
            </button>
        </div>
        
        <form action="{{ route('card.store', app()->getLocale()) }}" method="POST" id="add-card-form">
            @csrf
            <div id="card-element" class="bg-gray-700 p-4 rounded-lg mb-4"></div>
            <div id="card-errors" class="text-red-500 mb-4"></div>
            
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg w-full">
                {{ __('dashboard.save_card') }}
            </button>
        </form>
    </div>
</div>

@push('scripts')
<script>
    function toggleModal(modalId) {
        const modal = document.getElementById(modalId);
        if (modal.classList.contains('hidden')) {
            modal.classList.remove('hidden');
        } else {
            modal.classList.add('hidden');
        }
    }
    
    // Stripe integration would go here in a real implementation
</script>
@endpush
@endsection