@extends('layouts.app')

@section('title', 'Billing - ' . config('app.name'))

@section('content')
    <div class="mb-8">
        <h2 class="text-2xl font-semibold mb-2">Billing</h2>
        <p class="text-[#706f6c] dark:text-[#A1A09A]
            Manage your billing and subscription
        </p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2">
            <div class="bg-white dark:bg-[#161615] border border-[#e3e3e0] dark:border-[#3E3E3A] rounded-lg p-6 mb-6">
                <h3 class="text-lg font-medium mb-4">Current Plan</h3>
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-2xl font-semibold mb-1">Professional</p>
                        <p class="text-[#706f6c] dark:text-[#A1A09A]
                    </div>
                    <button class="px-5 py-2.5 border border-[#e3e3e0] dark:border-[#3E3E3A] hover:border-gray-300 rounded-sm text-sm font-medium transition-all">
                        Change Plan
                    </button>
                </div>
            </div>

            <div class="bg-white dark:bg-[#161615] border border-[#e3e3e0] dark:border-[#3E3E3A] rounded-lg overflow-hidden">
                <div class="p-6">
                    <h3 class="text-lg font-medium mb-4">Billing History</h3>
                </div>
                <div class="divide-y divide-[#e3e3e0]
                    @for($i = 1; $i <= 5; $i++)
                        <div class="p-4 flex justify-between items-center hover:bg-white dark:bg-[#161615]
                            <div>
                                <p class="font-medium">Invoice #{{ 1000 + $i }}</p>
                                <p class="text-sm text-[#706f6c] dark:text-[#A1A09A] now()->subMonths($i)->format('F j, Y') }}</p>
                            </div>
                            <div class="text-right">
                                <p class="font-medium">$49.00</p>
                                <a href="#" class="text-sm text-[#1b1b18] dark:text-[#EDEDEC] hover:underline">Download</a>
                            </div>
                        </div>
                    @endfor
                </div>
            </div>
        </div>

        <div>
            <div class="bg-white dark:bg-[#161615] border border-[#e3e3e0] dark:border-[#3E3E3A] rounded-lg p-6">
                <h3 class="text-lg font-medium mb-4">Payment Method</h3>
                <div class="mb-4">
                    <p class="text-sm text-[#706f6c] dark:text-[#A1A09A] mb-2">Credit Card</p>
                    <p class="font-medium">•••• •••• •••• 4242</p>
                    <p class="text-sm text-[#706f6c] dark:text-[#A1A09A] 12/25</p>
                </div>
                <button class="w-full px-5 py-2.5 border border-[#e3e3e0] dark:border-[#3E3E3A] hover:border-gray-300 rounded-sm text-sm font-medium transition-all">
                    Update Payment
                </button>
            </div>
        </div>
    </div>
@endsection