@extends('layouts.user')

@section('title', __('subscriptions.title'))
@section('page_title', __('subscriptions.page_title'))
@section('breadcrumb', __('subscriptions.breadcrumb'))

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

    {{-- Header: sharp / no rounded --}}
    <div class="border border-slate-200 bg-white px-3 py-3 rounded-none">
        <h1 class="text-base md:text-lg font-bold text-slate-800 leading-tight">
            {{ __('subscriptions.heading') }}
        </h1>
        <p class="mt-1 text-xs md:text-sm text-slate-500 leading-relaxed">
            {{ __('subscriptions.subheading') }}
        </p>
    </div>

    @if(session('success'))
        <div class="border border-emerald-200 bg-emerald-50 px-3 py-2.5 text-xs md:text-sm text-emerald-700 rounded-2xl shadow-sm">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="border border-red-200 bg-red-50 px-3 py-2.5 text-xs md:text-sm text-red-700 rounded-2xl shadow-sm">
            {{ session('error') }}
        </div>
    @endif

    @if(request('success') === 'submitted')
        <div class="border border-emerald-200 bg-emerald-50 px-3 py-2.5 text-xs md:text-sm text-emerald-700 rounded-2xl shadow-sm">
            {{ __('subscriptions.request_submitted') }}
        </div>
    @endif

    @if($activeSubscription)
        <div class="rounded-2xl border border-emerald-200 bg-gradient-to-r from-emerald-50 to-teal-50 px-4 py-4 shadow-sm">
            <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                <div class="min-w-0">
                    <h2 class="text-sm md:text-base font-bold text-emerald-800">
                        {{ __('subscriptions.active_paid_subscription') }}
                    </h2>

                    <p class="mt-2 text-xs md:text-sm text-emerald-700 leading-relaxed">
                        {{ __('subscriptions.current_plan_is') }}
                        <span class="font-semibold">{{ $activeSubscription->plan->name ?? __('subscriptions.na') }}</span>.
                    </p>

                    <p class="mt-1 text-xs md:text-sm text-emerald-700 leading-relaxed">
                        {{ __('subscriptions.expiry_date') }}
                        <span class="font-semibold">
                            {{ $activeSubscription->end_date ? $activeSubscription->end_date->format('d M, Y h:i A') : __('subscriptions.na') }}
                        </span>
                    </p>
                </div>

                <div class="rounded-xl border border-emerald-100 bg-white/80 px-3 py-2 text-xs md:text-sm text-slate-700 shrink-0">
                    {{ __('subscriptions.remaining_days') }}
                    <span class="font-bold text-emerald-700">
                        {{ $activeSubscription->end_date ? max(0, now()->diffInDays($activeSubscription->end_date, false)) : 0 }}
                    </span>
                </div>
            </div>
        </div>

    @elseif($pendingRequest)
        <div class="rounded-2xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 px-4 py-4 shadow-sm">
            <div class="flex items-start gap-3">
                <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-amber-100 text-lg shrink-0">
                    ⏳
                </div>

                <div class="flex-1 min-w-0">
                    <h2 class="text-sm md:text-base font-bold text-amber-800">
                        {{ __('subscriptions.pending_request_title') }}
                    </h2>

                    <p class="mt-2 text-xs md:text-sm text-amber-700 leading-relaxed">
                        {{ __('subscriptions.pending_request_text') }}
                    </p>

                    <div class="mt-4 grid grid-cols-1 gap-3 md:grid-cols-4">
                        <div class="rounded-xl border border-amber-100 bg-white/80 px-3 py-3">
                            <div class="text-[11px] md:text-xs text-slate-500">
                                {{ __('subscriptions.plan') }}
                            </div>
                            <div class="mt-1 text-xs md:text-sm font-semibold text-slate-800 break-words">
                                {{ $pendingRequest->plan->name ?? '-' }}
                            </div>
                        </div>

                        <div class="rounded-xl border border-amber-100 bg-white/80 px-3 py-3">
                            <div class="text-[11px] md:text-xs text-slate-500">
                                {{ __('subscriptions.trx_id') }}
                            </div>
                            <div class="mt-1 text-xs md:text-sm font-semibold text-slate-800 break-all">
                                {{ $pendingRequest->trx_id }}
                            </div>
                        </div>

                        <div class="rounded-xl border border-amber-100 bg-white/80 px-3 py-3">
                            <div class="text-[11px] md:text-xs text-slate-500">
                                {{ __('subscriptions.status') }}
                            </div>
                            <div id="pendingStatusText" class="mt-1 text-xs md:text-sm font-semibold uppercase text-amber-700">
                                {{ $pendingRequest->status }}
                            </div>
                        </div>

                        <div class="rounded-xl border border-amber-100 bg-white/80 px-3 py-3">
                            <div class="text-[11px] md:text-xs text-slate-500">
                                {{ __('subscriptions.next_check') }}
                            </div>
                            <div id="pendingCountdown" class="mt-1 text-sm md:text-base font-bold text-amber-700">
                                5s
                            </div>
                        </div>
                    </div>

                    <div class="mt-3 rounded-xl border border-amber-100 bg-white/70 px-3 py-2.5 text-xs md:text-sm text-amber-800">
                        {{ __('subscriptions.auto_checking_text') }}
                    </div>
                </div>
            </div>
        </div>

    @else
        <form action="{{ route('user.subscriptions.select') }}" method="POST" id="planSelectForm">
            @csrf

            <div class="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
                @forelse($plans as $plan)
                    <label class="block cursor-pointer">
                        <input type="radio"
                               name="plan_id"
                               value="{{ $plan->id }}"
                               class="peer sr-only"
                               {{ (string)$selectedPlanId === (string)$plan->id ? 'checked' : '' }}>

                        <div class="relative rounded-2xl border border-slate-200 bg-white p-3 transition duration-200 hover:border-slate-300 hover:shadow-sm peer-checked:border-blue-500 peer-checked:bg-blue-50/40">

                            <div class="absolute right-3 top-3 hidden rounded-full border border-blue-200 bg-blue-100 px-2 py-0.5 text-[10px] md:text-[11px] font-semibold text-blue-700 peer-checked:block">
                                {{ __('subscriptions.selected') }}
                            </div>

                            <div class="mb-3 pr-14">
                                <h2 class="text-sm md:text-base font-bold text-slate-800 leading-tight">
                                    {{ $plan->name }}
                                </h2>
                                <p class="mt-1 text-[11px] md:text-xs text-slate-500 leading-relaxed">
                                    {{ __('subscriptions.plan_card_text') }}
                                </p>
                            </div>

                            <div class="mb-3 rounded-xl border border-blue-200 bg-blue-50 px-2 py-3 text-center">
                                <div class="text-[11px] md:text-xs text-slate-500">
                                    {{ __('subscriptions.price') }}
                                </div>
                                <div class="mt-1 text-xl md:text-2xl font-extrabold text-blue-600 leading-none">
                                    {{ number_format($plan->price, 2) }} ৳
                                </div>
                                <div class="mt-2 text-xs md:text-sm font-medium text-slate-600">
                                    {{ $plan->duration_days }} {{ __('subscriptions.days') }}
                                </div>
                            </div>

                            <div class="space-y-1.5">
                                <div class="flex items-start gap-2 text-[11px] md:text-xs text-slate-600">
                                    <span class="mt-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-emerald-100 text-[10px] text-emerald-600 shrink-0">✓</span>
                                    <span>{{ __('subscriptions.feature_accounting_management') }}</span>
                                </div>

                                <div class="flex items-start gap-2 text-[11px] md:text-xs text-slate-600">
                                    <span class="mt-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-emerald-100 text-[10px] text-emerald-600 shrink-0">✓</span>
                                    <span>{{ __('subscriptions.feature_customer_supplier_tracking') }}</span>
                                </div>

                                <div class="flex items-start gap-2 text-[11px] md:text-xs text-slate-600">
                                    <span class="mt-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-emerald-100 text-[10px] text-emerald-600 shrink-0">✓</span>
                                    <span>{{ __('subscriptions.feature_reports_monitoring') }}</span>
                                </div>

                                <div class="flex items-start gap-2 text-[11px] md:text-xs text-slate-600">
                                    <span class="mt-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-emerald-100 text-[10px] text-emerald-600 shrink-0">✓</span>
                                    <span>{{ __('subscriptions.feature_secure_access') }}</span>
                                </div>
                            </div>
                        </div>
                    </label>
                @empty
                    <div class="col-span-full rounded-2xl border border-slate-200 bg-white px-4 py-8 text-center shadow-sm">
                        <h3 class="text-sm md:text-base font-semibold text-slate-700">
                            {{ __('subscriptions.no_paid_plans') }}
                        </h3>
                        <p class="mt-1 text-xs md:text-sm text-slate-500">
                            {{ __('subscriptions.contact_admin') }}
                        </p>
                    </div>
                @endforelse
            </div>

            @if($plans->count())
                <div class="sticky bottom-3 z-20 mt-5">
                    <div class="mx-auto max-w-3xl rounded-2xl border border-slate-200 bg-white/95 px-3 py-3 shadow-xl backdrop-blur">
                        <div class="flex flex-col items-start justify-between gap-3 md:flex-row md:items-center">
                            <div class="min-w-0">
                                <p class="text-[11px] md:text-xs text-slate-500">
                                    {{ __('subscriptions.selected_plan') }}
                                </p>
                                <h3 class="text-sm md:text-base font-bold text-slate-800 truncate" id="selectedPlanText">
                                    {{ __('subscriptions.no_plan_selected') }}
                                </h3>
                            </div>

                            <button type="submit"
                                    id="subscribeBtn"
                                    disabled
                                    class="w-full rounded-xl bg-blue-600 px-4 py-2.5 text-xs md:text-sm font-semibold text-white shadow transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50 md:w-auto">
                                {{ __('subscriptions.subscribe') }}
                            </button>
                        </div>
                    </div>
                </div>
            @endif
        </form>
    @endif
</div>
@endsection

@section('scripts')
<script>
    const radios = document.querySelectorAll('input[name="plan_id"]');
    const selectedPlanText = document.getElementById('selectedPlanText');
    const subscribeBtn = document.getElementById('subscribeBtn');

    function updateSelectedPlan() {
        const checked = document.querySelector('input[name="plan_id"]:checked');

        if (checked) {
            const card = checked.closest('label');
            const name = card.querySelector('h2')?.innerText || @json(__('subscriptions.selected_plan_fallback'));
            if (selectedPlanText) selectedPlanText.textContent = name;
            if (subscribeBtn) subscribeBtn.disabled = false;
        } else {
            if (selectedPlanText) selectedPlanText.textContent = @json(__('subscriptions.no_plan_selected'));
            if (subscribeBtn) subscribeBtn.disabled = true;
        }
    }

    radios.forEach(radio => {
        radio.addEventListener('change', updateSelectedPlan);
    });

    updateSelectedPlan();

    @if($pendingRequest)
        let timeLeft = 5;
        let pollingStopped = false;

        const countdownEl = document.getElementById('pendingCountdown');
        const statusTextEl = document.getElementById('pendingStatusText');

        async function checkPendingStatus() {
            if (pollingStopped) return;

            try {
                const response = await fetch("{{ route('user.subscriptions.check-status', $pendingRequest->id) }}", {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    }
                });

                if (!response.ok) {
                    return;
                }

                const data = await response.json();

                if (statusTextEl && data.status) {
                    statusTextEl.textContent = data.status;
                }

                if (data.status === 'approved' || data.has_active_subscription) {
                    pollingStopped = true;
                    clearInterval(pendingInterval);

                    if (countdownEl) countdownEl.textContent = '0s';

                    Swal.fire({
                        icon: 'success',
                        title: @json(__('subscriptions.swal_approved_title')),
                        text: data.active_plan_name
                            ? @json(__('subscriptions.swal_approved_with_plan_prefix')) + data.active_plan_name + @json(__('subscriptions.swal_approved_with_plan_suffix'))
                            : @json(__('subscriptions.swal_approved_text')),
                        confirmButtonColor: '#2563eb',
                        allowOutsideClick: false,
                        allowEscapeKey: false
                    }).then(() => {
                        window.location.href = "{{ route('user.dashboard') }}";
                    });

                    return;
                }

                if (data.status === 'cancelled') {
                    pollingStopped = true;
                    clearInterval(pendingInterval);

                    if (countdownEl) countdownEl.textContent = '0s';

                    Swal.fire({
                        icon: 'warning',
                        title: @json(__('subscriptions.swal_cancelled_title')),
                        text: @json(__('subscriptions.swal_cancelled_text')),
                        confirmButtonColor: '#2563eb'
                    }).then(() => {
                        window.location.reload();
                    });

                    return;
                }

            } catch (error) {
                console.error('Pending polling failed:', error);
            }
        }

        const pendingInterval = setInterval(() => {
            if (pollingStopped) {
                clearInterval(pendingInterval);
                return;
            }

            timeLeft--;

            if (countdownEl) {
                countdownEl.textContent = timeLeft + 's';
            }

            if (timeLeft <= 0) {
                checkPendingStatus();
                timeLeft = 5;

                if (countdownEl) {
                    countdownEl.textContent = timeLeft + 's';
                }
            }
        }, 1000);

        checkPendingStatus();
    @endif
</script>
@endsection