@extends('layouts.user')

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

@section('content')
<div class="max-w-6xl mx-auto px-3 sm:px-4 lg:px-5 py-5">

    <div class="mb-5 flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
        <div>
            <h1 class="text-lg md:text-xl font-bold text-slate-800 leading-tight">
                {{ __('subscriptions.choose_payment_method') }}
            </h1>
            <p class="mt-1 text-xs md:text-sm text-slate-500 leading-relaxed">
                {{ __('subscriptions.select_payment_method_to_continue') }}
            </p>
        </div>

        <div class="min-w-[240px] border border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-4 shadow-sm rounded-none">
            <div class="text-[11px] uppercase tracking-wide text-slate-500">
                {{ __('subscriptions.selected_plan') }}
            </div>
            <div class="mt-1 text-base md:text-lg font-bold text-slate-800 leading-tight">
                {{ $plan->name }}
            </div>
            <div class="mt-2 text-xs md:text-sm text-slate-600">
                {{ __('subscriptions.price') }}: {{ number_format($plan->price, 2) }} ৳
            </div>
            <div class="text-xs md:text-sm text-slate-600">
                {{ __('subscriptions.duration') }}: {{ $plan->duration_days }} {{ __('subscriptions.days') }}
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
        @forelse($methods as $method)
            <a href="{{ route('user.subscriptions.payment', $method->id) }}"
               class="group overflow-hidden border border-slate-200 bg-white shadow-sm transition duration-300 hover:-translate-y-0.5 hover:shadow-md rounded-none">

                {{-- Banner Image --}}
                <div class="relative h-40 w-full overflow-hidden bg-slate-50 rounded-none">
                    @if($method->photo)
                        <img src="{{ asset($method->photo) }}"
                             alt="{{ $method->name }}"
                             class="h-full w-full object-contain p-4 transition duration-300 group-hover:scale-[1.02]">
                    @else
                        <div class="flex h-full w-full items-center justify-center text-3xl font-bold text-slate-400">
                            {{ strtoupper(substr($method->name, 0, 1)) }}
                        </div>
                    @endif

                    <div class="absolute right-3 top-3 bg-white/90 px-2 py-1 text-[10px] md:text-[11px] font-semibold text-slate-700 shadow-sm rounded-none">
                        {{ __('subscriptions.active') }}
                    </div>
                </div>

                {{-- Content --}}
                <div class="p-4">
                    <h2 class="text-base md:text-lg font-bold text-slate-800 transition group-hover:text-blue-600 leading-tight">
                        {{ $method->name }}
                    </h2>

                    <p class="mt-1.5 text-xs md:text-sm text-slate-500 leading-relaxed">
                        {{ __('subscriptions.click_to_continue_with_payment_method') }}
                    </p>

                    @if($method->instructions)
                        <div class="mt-3 border border-slate-100 bg-slate-50 p-3 rounded-none">
                            <div class="text-[10px] md:text-[11px] font-semibold uppercase tracking-wide text-slate-500">
                                {{ __('subscriptions.instructions') }}
                            </div>
                            <p class="mt-1.5 text-xs md:text-sm leading-5 text-slate-600 line-clamp-3">
                                {{ $method->instructions }}
                            </p>
                        </div>
                    @endif

                    <div class="mt-4 inline-flex items-center text-xs md:text-sm font-semibold text-blue-600">
                        {{ __('subscriptions.continue') }} →
                    </div>
                </div>
            </a>
        @empty
            <div class="col-span-full border border-slate-200 bg-white p-8 text-center shadow-sm rounded-none">
                <div class="mx-auto flex h-12 w-12 items-center justify-center bg-slate-100 text-xl rounded-none">
                    💳
                </div>
                <h3 class="mt-3 text-sm md:text-base font-semibold text-slate-700">
                    {{ __('subscriptions.no_payment_method_available') }}
                </h3>
                <p class="mt-1 text-xs md:text-sm text-slate-500">
                    {{ __('subscriptions.please_contact_admin') }}
                </p>
            </div>
        @endforelse
    </div>
</div>
@endsection