@extends('layouts.user')

@section('title', 'Account')
@section('page-title', 'Account')

@section('content')
    <div class="max-w-4xl mx-auto px-5 space-y-6">
        <div class="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm">
            <div class="flex flex-col gap-2">
                <h3 class="font-bold text-slate-900 text-xl">{{ Auth::user()->name ?? '' }}</h3>
                <p class="text-slate-500 text-sm mb-0">{{ Auth::user()->phone_number ?? '' }}</p>
                @if($subscription)
                    <div class="mt-2 text-sm text-slate-600">
                        Current plan: <span class="font-semibold">{{ $subscription->plan->name ?? '-' }}</span>,
                        status: <span class="font-semibold">{{ strtoupper($subscription->status) }}</span>
                        @if($subscription->ends_at)
                            , ends: <span class="font-semibold">{{ $subscription->ends_at->format('d M Y') }}</span>
                        @endif
                    </div>
                @endif
            </div>
        </div>

        <div class="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm">
            <h4 class="font-bold text-slate-900 mb-4">Subscription Request</h4>
            <form
                action="{{ route('subscription-requests.store') }}"
                method="POST"
                enctype="multipart/form-data"
                class="space-y-4"
                data-current-plan-price="{{ (float) ($subscription?->plan?->price ?? 0) }}"
                data-has-active-subscription="{{ $subscription?->status === 'active' ? '1' : '0' }}"
            >
                @csrf
                <div>
                    <label class="block text-sm font-semibold mb-2">Choose plan</label>
                    <select name="landing_plan_id" class="w-full rounded-xl border-slate-200" id="billing-plan-select">
                        @foreach($plans as $plan)
                            @php($planEvaluation = $planEvaluations[$plan->id] ?? ['blocked' => false, 'message' => ''])
                            <option
                                value="{{ $plan->id }}"
                                data-plan-price="{{ (float) $plan->price }}"
                                data-plan-blocked="{{ ($planEvaluation['blocked'] ?? false) ? '1' : '0' }}"
                                data-plan-warning="{{ $planEvaluation['message'] ?? '' }}"
                            >{{ $plan->name }} - {{ $plan->price }} Tk</option>
                        @endforeach
                    </select>
                    <div id="billing-plan-warning" class="mt-2 hidden rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm font-semibold text-amber-900"></div>
                </div>
                <div>
                    <label class="block text-sm font-semibold mb-2">bKash number</label>
                    <input type="text" name="bkash_number" class="w-full rounded-xl border-slate-200" placeholder="bKash number">
                </div>
                <div>
                    <label class="block text-sm font-semibold mb-2">Transaction ID</label>
                    <input type="text" name="transaction_id" class="w-full rounded-xl border-slate-200" placeholder="bKash transaction ID">
                </div>
                <div>
                    <label class="block text-sm font-semibold mb-2">Payment proof</label>
                    <input type="file" name="payment_proof" class="w-full rounded-xl border-slate-200">
                </div>
                <div>
                    <label class="block text-sm font-semibold mb-2">Note</label>
                    <textarea name="note" rows="3" class="w-full rounded-xl border-slate-200" placeholder="Any note for admin"></textarea>
                </div>
                <button type="submit" id="billing-submit-btn" class="bg-slate-900 text-white px-6 py-3 rounded-full font-bold">Submit Request</button>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script>
(function () {
    const form = document.querySelector('form[action="{{ route('subscription-requests.store') }}"]');
    if (!form) return;

    const select = form.querySelector('#billing-plan-select');
    const warning = form.querySelector('#billing-plan-warning');
    const submit = form.querySelector('#billing-submit-btn');
    const currentPlanPrice = Number(form.dataset.currentPlanPrice || 0);
    const hasActiveSubscription = form.dataset.hasActiveSubscription === '1';

    const syncWarning = () => {
        const option = select.selectedOptions[0];
        const selectedPrice = Number(option?.dataset.planPrice || 0);
        const blocked = option?.dataset.planBlocked === '1';
        let message = option?.dataset.planWarning || '';

        if (!message && hasActiveSubscription && option?.value) {
            if (selectedPrice < currentPlanPrice) {
                message = 'This is a downgrade plan. Please choose a higher plan.';
            } else if (selectedPrice === currentPlanPrice) {
                message = 'This plan matches your current price. Please choose a higher plan.';
            }
        }

        warning.textContent = message;
        warning.classList.toggle('hidden', !message);
        submit.disabled = blocked || !!message;
    };

    select.addEventListener('change', syncWarning);
    syncWarning();
})();
</script>
@endpush