@extends('layouts.user')

@section('title', __('subscriptions.subscription_history'))

@section('content')
<div class="w-full px-2 lg:px-3 space-y-3 text-xs">

    {{-- Header --}}
    <div class="border border-slate-200 bg-white px-3 py-2">
        <h1 class="text-sm font-bold text-slate-900">
            {{ __('subscriptions.subscription_history') }}
        </h1>
        <p class="mt-0.5 text-[11px] text-slate-500">
            {{ __('subscriptions.view_current_and_previous') }}
        </p>
    </div>

    {{-- Active Plan --}}
    @if($activeSubscription)
        <div class="border border-emerald-200 bg-emerald-50 px-3 py-3">
            <div class="flex flex-col md:flex-row md:justify-between gap-3">

                {{-- Left --}}
                <div>
                    <div class="inline-block border border-emerald-200 bg-white px-2 py-[2px] text-[10px] font-bold uppercase text-emerald-700">
                        {{ __('subscriptions.current_active_plan') }}
                    </div>

                    <h2 class="mt-1 text-sm font-bold text-emerald-800">
                        {{ $activeSubscription->plan->name ?? __('subscriptions.na') }}
                    </h2>

                    <p class="mt-1 text-[11px] text-emerald-700">
                        {{ __('subscriptions.start') }}:
                        <span class="font-semibold">
                            {{ $activeSubscription->start_date?->format('d M, Y h:i A') }}
                        </span>
                    </p>

                    <p class="text-[11px] text-emerald-700">
                        {{ __('subscriptions.expiry') }}:
                        <span class="font-semibold">
                            {{ $activeSubscription->end_date?->format('d M, Y h:i A') }}
                        </span>
                    </p>
                </div>

                {{-- Right Countdown --}}
                <div class="border border-emerald-200 bg-white px-3 py-2 min-w-[200px]">
                    <div class="text-[10px] font-semibold text-slate-500">
                        {{ __('subscriptions.remaining_time') }}
                    </div>

                    <div id="subscriptionCountdown"
                         data-seconds="{{ $remainingSeconds ?? 0 }}"
                         class="mt-1 text-sm font-bold text-emerald-700 tracking-wide">
                        --
                    </div>
                </div>

            </div>
        </div>
    @endif

    {{-- Table --}}
    <div class="border border-slate-200 bg-white">
        <div class="overflow-x-auto">
            <table class="min-w-full text-xs">
                <thead class="bg-slate-50 text-slate-600">
                    <tr>
                        <th class="px-2 py-2 text-left font-semibold uppercase">{{ __('subscriptions.plan') }}</th>
                        <th class="px-2 py-2 text-left font-semibold uppercase">{{ __('subscriptions.type') }}</th>
                        <th class="px-2 py-2 text-left font-semibold uppercase">{{ __('subscriptions.start') }}</th>
                        <th class="px-2 py-2 text-left font-semibold uppercase">{{ __('subscriptions.end') }}</th>
                        <th class="px-2 py-2 text-left font-semibold uppercase">{{ __('subscriptions.status') }}</th>
                    </tr>
                </thead>

                <tbody class="divide-y">
                    @forelse($subscriptions as $item)
                        <tr class="hover:bg-slate-50">

                            <td class="px-2 py-2">
                                <div class="font-semibold text-slate-800">
                                    {{ $item->plan->name ?? __('subscriptions.na') }}
                                </div>
                                <div class="text-[10px] text-slate-500">
                                    {{ $item->plan ? number_format($item->plan->price, 2) : '0.00' }} ৳
                                </div>
                            </td>

                            <td class="px-2 py-2">
                                @if($item->is_trial)
                                    <span class="border border-blue-200 bg-blue-50 px-2 py-[2px] text-[10px] font-bold text-blue-700">
                                        {{ __('subscriptions.trial') }}
                                    </span>
                                @else
                                    <span class="border border-violet-200 bg-violet-50 px-2 py-[2px] text-[10px] font-bold text-violet-700">
                                        {{ __('subscriptions.paid') }}
                                    </span>
                                @endif
                            </td>

                            <td class="px-2 py-2 text-[11px] whitespace-nowrap">
                                {{ $item->start_date?->format('d M, Y h:i A') }}
                            </td>

                            <td class="px-2 py-2 text-[11px] whitespace-nowrap">
                                {{ $item->end_date?->format('d M, Y h:i A') }}
                            </td>

                            <td class="px-2 py-2">
                                @if($item->status === 'active')
                                    <span class="border border-emerald-200 bg-emerald-50 px-2 py-[2px] text-[10px] font-bold text-emerald-700">
                                        {{ __('subscriptions.active') }}
                                    </span>
                                @else
                                    <span class="border border-rose-200 bg-rose-50 px-2 py-[2px] text-[10px] font-bold text-rose-700">
                                        {{ __('subscriptions.expired') }}
                                    </span>
                                @endif
                            </td>

                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="py-8 text-center text-slate-500 text-xs">
                                {{ __('subscriptions.no_history') }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Pagination --}}
    @if($subscriptions->hasPages())
        <div class="pt-1">
            {{ $subscriptions->links() }}
        </div>
    @endif

</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const el = document.getElementById('subscriptionCountdown');
    if (!el) return;

    let totalSeconds = parseInt(el.dataset.seconds || '0', 10);

    function render() {
        if (totalSeconds <= 0) {
            el.textContent = "{{ __('subscriptions.time_format', ['d'=>0,'h'=>0,'m'=>0,'s'=>0]) }}";
            return;
        }

        const days = Math.floor(totalSeconds / 86400);
        const hours = Math.floor((totalSeconds % 86400) / 3600);
        const minutes = Math.floor((totalSeconds % 3600) / 60);
        const seconds = totalSeconds % 60;

        el.textContent = `{{ __('subscriptions.time_format_js') }}`
            .replace(':d', days)
            .replace(':h', hours)
            .replace(':m', minutes)
            .replace(':s', seconds);
    }

    render();

    const timer = setInterval(() => {
        if (totalSeconds <= 0) {
            clearInterval(timer);
            return;
        }

        totalSeconds--;
        render();
    }, 1000);
});
</script>
@endpush