@extends('layouts.user')

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

@section('content')
<div class="min-h-[calc(100vh-140px)] flex items-center justify-center px-3 py-5">
    <div class="w-full max-w-3xl">

        <div class="mb-4 border border-slate-200 bg-white px-4 py-4 shadow-sm rounded-none">
            <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">

                <div class="min-w-0">
                    <p class="text-[10px] md:text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">
                        {{ __('subscriptions.subscription_payment') }}
                    </p>
                    <h1 class="mt-1 text-lg md:text-xl font-bold text-slate-800 leading-tight">
                        {{ $plan->name }}
                    </h1>
                    <p class="mt-1 text-xs md:text-sm text-slate-500 leading-relaxed">
                        {{ __('subscriptions.complete_payment_and_submit_trx') }}
                    </p>
                </div>

                <div class="border border-slate-200 bg-slate-50 px-3 py-3 text-xs md:text-sm text-slate-700 rounded-none">
                    <div>
                        <span class="font-semibold">{{ __('subscriptions.price') }}:</span>
                        {{ number_format($plan->price, 2) }} ৳
                    </div>
                    <div class="mt-1">
                        <span class="font-semibold">{{ __('subscriptions.duration') }}:</span>
                        {{ $plan->duration_days }} {{ __('subscriptions.days') }}
                    </div>
                </div>
            </div>
        </div>

        @if ($errors->any())
            <div class="mb-4 border border-red-200 bg-red-50 px-4 py-3 text-xs md:text-sm text-red-700 shadow-sm rounded-none">
                <ul class="space-y-1">
                    @foreach ($errors->all() as $error)
                        <li>• {{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="overflow-hidden border border-slate-200 bg-white shadow-lg rounded-none">

            <div class="border-b border-slate-100 bg-slate-50 px-4 py-3 rounded-none">
                <div class="flex items-center justify-between gap-3">
                    <div class="flex min-w-0 items-center gap-3">
                        <div class="flex h-10 w-10 shrink-0 items-center justify-center border border-slate-200 bg-white rounded-none">
                            @if($method->photo)
                                <img src="{{ asset($method->photo) }}"
                                     alt="{{ $method->name }}"
                                     class="h-7 w-7 object-contain">
                            @else
                                <span class="text-xs font-bold text-slate-700">
                                    {{ strtoupper(substr($method->name, 0, 1)) }}
                                </span>
                            @endif
                        </div>

                        <div class="min-w-0">
                            <div class="truncate text-sm md:text-base font-bold text-slate-800">{{ $method->name }}</div>
                            <div class="truncate text-[11px] md:text-xs text-slate-500">{{ __('subscriptions.secure_subscription_payment') }}</div>
                        </div>
                    </div>

                    <div class="bg-emerald-100 px-2.5 py-1 text-[10px] md:text-[11px] font-bold text-emerald-700 rounded-none">
                        {{ __('subscriptions.active_upper') }}
                    </div>
                </div>
            </div>

            <div class="p-4 md:p-5">
                <form action="{{ route('user.subscriptions.submit') }}" method="POST" enctype="multipart/form-data" class="space-y-4">
                    @csrf

                    <input type="hidden" name="payment_method_id" value="{{ $method->id }}">

                    <div class="bg-gradient-to-b from-blue-600 via-indigo-600 to-blue-700 p-4 text-white shadow-sm rounded-none">

                        <div class="text-center">
                            <h2 class="text-base md:text-lg font-bold">{{ __('subscriptions.complete_your_payment') }}</h2>
                            <p class="mt-1 text-xs md:text-sm text-white/85 leading-relaxed">
                                {{ __('subscriptions.follow_instructions_and_verify_trx') }}
                            </p>
                        </div>

                        <div class="mt-4">
                            <label class="mb-2 block text-xs md:text-sm font-semibold text-white">
                                {{ __('subscriptions.transaction_id') }}
                            </label>

                            <div class="flex flex-col gap-2 sm:flex-row">
                                <input type="text"
                                       name="trx_id"
                                       id="trxInput"
                                       value="{{ old('trx_id') }}"
                                       placeholder="{{ __('subscriptions.enter_transaction_id') }}"
                                       class="w-full border border-white/30 bg-white px-3 py-2.5 text-xs md:text-sm font-medium text-slate-800 shadow-sm outline-none focus:border-white focus:ring-4 focus:ring-white/20 rounded-none">

                                <button type="button"
                                        id="pasteTrxBtn"
                                        class="inline-flex items-center justify-center bg-slate-900 px-4 py-2.5 text-xs md:text-sm font-semibold text-white shadow transition hover:bg-black rounded-none">
                                    {{ __('subscriptions.paste') }}
                                </button>
                            </div>
                        </div>

                        <div class="mt-4 border border-white/20 bg-white/10 p-4 rounded-none">
                            <div class="space-y-3 text-xs md:text-sm leading-5 md:leading-6">

                                <div class="flex items-start gap-3 border-b border-white/15 pb-3">
                                    <span class="mt-1 h-2 w-2 shrink-0 bg-white rounded-none"></span>
                                    <div>
                                        {!! __('subscriptions.pay_using_method_app_or_dial', ['method' => '<span class="font-bold">'.$method->name.'</span>']) !!}
                                    </div>
                                </div>

                                <div class="flex items-start gap-3 border-b border-white/15 pb-3">
                                    <span class="mt-1 h-2 w-2 shrink-0 bg-white rounded-none"></span>
                                    <div>
                                        {!! __('subscriptions.select_send_money_option') !!}
                                    </div>
                                </div>

                                <div class="flex items-start gap-3 border-b border-white/15 pb-3">
                                    <span class="mt-1 h-2 w-2 shrink-0 bg-white rounded-none"></span>
                                    <div class="flex w-full flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                                        <div>
                                            {{ __('subscriptions.copy_this_number_for_send_money') }}
                                            <span id="paymentNumber" class="font-bold tracking-wide">{{ $method->number }}</span>
                                        </div>

                                        <button type="button"
                                                id="copyNumberBtn"
                                                class="inline-flex shrink-0 items-center justify-center bg-white/20 px-3 py-2 text-[11px] md:text-xs font-bold text-white transition hover:bg-white/30 rounded-none">
                                            {{ __('subscriptions.copy') }}
                                        </button>
                                    </div>
                                </div>

                                <div class="flex items-start gap-3 border-b border-white/15 pb-3">
                                    <span class="mt-1 h-2 w-2 shrink-0 bg-white rounded-none"></span>
                                    <div>
                                        {{ __('subscriptions.amount_to_pay') }}
                                        <span class="font-bold">{{ number_format($plan->price, 2) }} ৳</span>
                                    </div>
                                </div>

                                <div class="flex items-start gap-3 border-b border-white/15 pb-3">
                                    <span class="mt-1 h-2 w-2 shrink-0 bg-white rounded-none"></span>
                                    <div>
                                        {!! __('subscriptions.after_payment_enter_correct_trx') !!}
                                    </div>
                                </div>

                                <div class="flex items-start gap-3">
                                    <span class="mt-1 h-2 w-2 shrink-0 bg-white rounded-none"></span>
                                    <div>
                                        {!! __('subscriptions.upload_clear_screenshot_then_submit') !!}
                                    </div>
                                </div>
                            </div>
                        </div>

                        @if($method->instructions)
                            <div class="mt-4 border border-white/15 bg-white/10 p-4 text-xs md:text-sm text-white/90 rounded-none">
                                <div class="mb-2 text-[11px] md:text-xs font-bold uppercase tracking-wide text-white">
                                    {{ __('subscriptions.additional_instructions') }}
                                </div>
                                <p class="leading-5 md:leading-6 whitespace-pre-line">{{ $method->instructions }}</p>
                            </div>
                        @endif
                    </div>

                    <div class="border border-slate-200 bg-slate-50 p-4 rounded-none">
                        <label class="mb-2 block text-xs md:text-sm font-semibold text-slate-700">
                            {{ __('subscriptions.payment_screenshot') }}
                        </label>

                        <input type="file"
                               name="payment_screenshot"
                               accept=".jpg,.jpeg,.png,.webp"
                               class="block w-full border border-slate-300 bg-white px-3 py-2.5 text-xs md:text-sm text-slate-600 shadow-sm file:mr-3 file:border-0 file:bg-blue-50 file:px-3 file:py-2 file:text-xs md:file:text-sm file:font-semibold file:text-blue-700 hover:file:bg-blue-100 rounded-none">

                        <p class="mt-2 text-[11px] md:text-xs text-slate-500">
                            {{ __('subscriptions.accepted_formats_max_size') }}
                        </p>
                    </div>

                    <button type="submit"
                            class="inline-flex w-full items-center justify-center bg-blue-600 px-4 py-3 text-sm md:text-base font-bold text-white shadow-md transition hover:bg-blue-700 rounded-none">
                        {{ __('subscriptions.verify_and_submit') }}
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    function showToast(icon, title) {
        Swal.fire({
            toast: true,
            position: 'top-end',
            icon: icon,
            title: title,
            showConfirmButton: false,
            timer: 1800,
            timerProgressBar: true
        });
    }

    document.getElementById('copyNumberBtn')?.addEventListener('click', async function () {
        const text = document.getElementById('paymentNumber')?.innerText?.trim();
        if (!text) return;

        try {
            await navigator.clipboard.writeText(text);
            showToast('success', @json(__('subscriptions.number_copied')));
        } catch (error) {
            showToast('error', @json(__('subscriptions.number_copy_failed')));
        }
    });

    document.getElementById('pasteTrxBtn')?.addEventListener('click', async function () {
        try {
            const text = await navigator.clipboard.readText();
            document.getElementById('trxInput').value = text;
            showToast('success', @json(__('subscriptions.trx_pasted')));
        } catch (error) {
            showToast('error', @json(__('subscriptions.paste_failed_manual')));
        }
    });
</script>
@endsection