<x-app-layout>
    <x-module-hero
        title="My Payments"
        description="View your payment history and download receipts"
        icon="fa-history">

        <x-slot name="tabs">
            @can('view mentorship payments')
                <a href="{{ route('mentorship.payments.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.payments.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-credit-card text-sm"></i> All Payments
                </a>
            @endcan
            @can('view own mentorship payments')
                <a href="{{ route('mentorship.payments.my-payments') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.payments.my-payments') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-history text-sm"></i> My Payments
                </a>
            @endcan
            @can('view mentorship programmes')
                <a href="{{ route('mentorship.programmes.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.programmes.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-list text-sm"></i> Programmes
                </a>
            @endcan
            @can('download mentorship certificates')
                <a href="{{ route('mentorship.certificates.my-certificates') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.certificates.my-certificates') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-award text-sm"></i> My Certificates
                </a>
            @endcan
        </x-slot>
    </x-module-hero>

    <div class="p-6">
        @if(session('success'))
            <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center gap-2">
                <i class="fas fa-check-circle"></i> {{ session('success') }}
            </div>
        @endif

        @if($payments->count() > 0)
            <div class="space-y-4">
                @foreach($payments as $payment)
                    <div class="bg-white rounded-lg border border-gray-200 p-6 hover:shadow-md transition-shadow">
                        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                            <div class="flex items-start gap-4">
                                <div class="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0
                                    @if($payment->isSuccessful()) bg-green-100
                                    @elseif($payment->isFailed()) bg-red-100
                                    @else bg-yellow-100 @endif">
                                    @if($payment->isSuccessful())
                                        <i class="fas fa-check text-green-600"></i>
                                    @elseif($payment->isFailed())
                                        <i class="fas fa-times text-red-600"></i>
                                    @else
                                        <i class="fas fa-clock text-yellow-600"></i>
                                    @endif
                                </div>
                                <div>
                                    <h3 class="font-semibold text-gray-900 text-sm">{{ $payment->programme->title ?? 'Mentorship Programme' }}</h3>
                                    <p class="text-xs text-gray-500 mt-0.5">
                                        <span class="font-mono">{{ $payment->reference }}</span>
                                        <span class="mx-1">·</span>
                                        {{ $payment->created_at->format('M d, Y H:i') }}
                                    </p>
                                </div>
                            </div>
                            <div class="flex items-center gap-4">
                                <div class="text-right">
                                    <p class="text-lg font-bold text-gray-900">{{ $payment->formatted_amount }}</p>
                                    @php $statusColors = ['pending' => 'bg-yellow-100 text-yellow-800', 'processing' => 'bg-blue-100 text-blue-800', 'successful' => 'bg-green-100 text-green-800', 'failed' => 'bg-red-100 text-red-800', 'refunded' => 'bg-purple-100 text-purple-800']; @endphp
                                    <span class="text-xs px-2 py-0.5 rounded {{ $statusColors[$payment->status] ?? 'bg-gray-100 text-gray-800' }}">
                                        {{ $payment->status_label }}
                                    </span>
                                </div>
                                <div class="flex gap-2">
                                    @if($payment->isSuccessful())
                                        <a href="{{ route('mentorship.payments.receipt', $payment) }}" target="_blank"
                                           class="btn-action-download">
                                            <i class="fas fa-receipt"></i>
                                        </a>
                                    @endif
                                    @if($payment->canBeRetried())
                                        <form action="{{ route('mentorship.payments.retry', $payment) }}" method="POST" class="inline">
                                            @csrf
                                            <button type="submit" class="btn-action-approve">
                                                <i class="fas fa-redo"></i>
                                            </button>
                                        </form>
                                    @endif
                                    <a href="{{ route('mentorship.payments.show', $payment) }}" class="btn-action-view">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            @if($payments->hasPages())
                <div class="mt-6">{{ $payments->links() }}</div>
            @endif
        @else
            <div class="text-center py-16">
                <div class="w-16 h-16 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-4">
                    <i class="fas fa-credit-card text-gray-400 text-2xl"></i>
                </div>
                <h3 class="text-lg font-medium text-gray-900 mb-2">No Payments Yet</h3>
                <p class="text-gray-500 mb-4 max-w-md mx-auto">
                    You haven't made any payments for mentorship programmes yet.
                </p>
                <a href="{{ route('mentorship.public.index') }}"
                   class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-sm">
                    <i class="fas fa-search"></i> Browse Programmes
                </a>
            </div>
        @endif
    </div>
</x-app-layout>
