@extends('layouts.user')

@section('page-title', __('Auto Subscriptions'))

@section('content')
<div class="mb-6 flex items-center justify-between">
    <h2 class="text-xl font-bold">{{ __('Your Subscriptions') }}</h2>
    <a href="{{ route('user.subscriptions.create') }}" class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700">{{ __('New Subscription') }}</a>
</div>

<div class="bg-white rounded-xl border border-gray-200 overflow-x-auto">
    <table class="w-full text-sm">
        <thead class="bg-gray-50 border-b border-gray-200">
            <tr>
                <th class="text-left px-4 py-3 font-medium text-gray-600">{{ __('Code') }}</th>
                <th class="text-left px-4 py-3 font-medium text-gray-600">{{ __('Service') }}</th>
                <th class="text-left px-4 py-3 font-medium text-gray-600">{{ __('Target') }}</th>
                <th class="text-center px-4 py-3 font-medium text-gray-600">{{ __('Progress') }}</th>
                <th class="text-right px-4 py-3 font-medium text-gray-600">{{ __('Total') }}</th>
                <th class="text-center px-4 py-3 font-medium text-gray-600">{{ __('Status') }}</th>
                <th class="px-4 py-3"></th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
            @forelse($subscriptions as $subscription)
                <tr>
                    <td class="px-4 py-3 font-mono text-xs">{{ $subscription->code }}</td>
                    <td class="px-4 py-3"><span class="line-clamp-1 max-w-[180px]">{{ $subscription->service->name }}</span></td>
                    <td class="px-4 py-3 font-medium">{{ $subscription->username ?? $subscription->link }}</td>
                    <td class="px-4 py-3 text-center">
                        <div class="flex items-center gap-2">
                            <div class="flex-1 bg-gray-200 rounded-full h-2 min-w-[60px]">
                                <div class="bg-indigo-600 h-2 rounded-full" style="width: {{ $subscription->posts > 0 ? min(100, round($subscription->posts_done / $subscription->posts * 100)) : 0 }}%"></div>
                            </div>
                            <span class="text-xs text-gray-500 whitespace-nowrap">{{ $subscription->posts_done }}/{{ $subscription->posts }}</span>
                        </div>
                    </td>
                    <td class="px-4 py-3 text-right font-semibold">{{ currency($subscription->total_charge) }}</td>
                    <td class="px-4 py-3 text-center">
                        <span class="px-2 py-1 text-xs font-medium rounded-full
                            {{ $subscription->status === 'active' ? 'bg-green-100 text-green-700' : '' }}
                            {{ $subscription->status === 'paused' ? 'bg-yellow-100 text-yellow-700' : '' }}
                            {{ in_array($subscription->status, ['completed','cancelled','expired']) ? 'bg-gray-100 text-gray-700' : '' }}">
                            {{ ucfirst($subscription->status) }}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-right whitespace-nowrap">
                        <a href="{{ route('user.subscriptions.show', $subscription) }}" class="text-indigo-600 font-medium hover:underline">{{ __('View') }}</a>
                        @if($subscription->status === 'active' || $subscription->status === 'paused')
                            <form action="{{ route('user.subscriptions.toggle', $subscription) }}" method="POST" class="inline">
                                @csrf
                                <button type="submit" class="ml-2 text-xs text-gray-500 hover:text-indigo-600">
                                    {{ $subscription->isActive() ? __('Pause') : __('Resume') }}
                                </button>
                            </form>
                        @endif
                    </td>
                </tr>
            @empty
                <tr><td colspan="7" class="px-4 py-12 text-center text-gray-500">{{ __('No subscriptions yet') }}</td></tr>
            @endforelse
        </tbody>
    </table>
</div>
<div class="mt-4">{{ $subscriptions->links() }}</div>
@endsection