<x-app-layout>
    <div class="portal-container">
        @if (session('status'))
            <div class="alert alert-success">{{ session('status') }}</div>
        @endif

        @php
            $displayMoney = function ($service) {
                $amount = number_format((float) $service->amount, 2);
                return strtoupper((string) $service->currency) === 'USD'
                    ? '$'.$amount.' USD'
                    : strtoupper((string) $service->currency).' '.$amount;
            };
        @endphp

        <div class="page-head compact-page-head">
            <div>
                <span class="eyebrow">Services</span>
                <h1 class="page-title">My Services</h1>
                <p class="page-subtitle">View your active services, billing periods, due dates, and account options.</p>
            </div>
            <form method="POST" action="{{ route('client.services.refresh') }}">
                @csrf
                <button class="secondary-btn" type="submit">Refresh</button>
            </form>
        </div>

        <div class="service-card-list">
            @forelse ($services as $service)
                @php
                    $status = strtolower(str_replace(' ', '_', (string) $service->status));
                    $statusLabel = ucwords(str_replace('_', ' ', $status ?: 'pending'));
                @endphp

                <a class="service-card service-card-link" href="{{ route('client.services.show', $service) }}">
                    <div class="service-card-title">
                        <strong>{{ $service->name }}</strong>
                        <small>{{ $service->domain_name ?: 'No domain assigned yet' }}</small>
                    </div>

                    <div class="service-price">
                        <strong>{{ $displayMoney($service) }}</strong><br>
                        <span class="service-muted">{{ $service->billing_cycle ?: 'Billing cycle unavailable' }}</span>
                    </div>

                    <div>
                        <strong>{{ optional($service->next_due_date)->format('l, F jS, Y') ?: '-' }}</strong><br>
                        <span class="service-muted">Next due date</span>
                    </div>

                    <div><span class="status-pill {{ $status }}">{{ $statusLabel }}</span></div>

                    <div>
                        @if ($status === 'active')
                            <span class="primary-btn">Manage</span>
                        @else
                            <span class="service-muted">Available after activation</span>
                        @endif
                    </div>
                </a>
            @empty
                <div class="card">
                    <p>No services yet.</p>
                </div>
            @endforelse
        </div>

        <div style="margin-top:18px;">{{ $services->links() }}</div>
    </div>
</x-app-layout>
