@extends('layouts.main')

@section('title')
    {{ __('credits.credit_packages') }}
@endsection

@section('page_title')
    {{ __('credits.purchase_credits') }}
@endsection

@php
    $breadcrumbs = [
        ['url' => route('dashboard'), 'label' => __('dashboard.title')],
        ['url' => route('credits.index'), 'label' => __('credits.my_credits')],
        ['url' => '', 'label' => __('credits.credit_packages')],
    ];
@endphp

@section('content')
    <div class="w-full space-y-6">
        <!-- Header Section -->
    
        <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 p-4 sm:p-6 shadow-front-box-shadow-glow">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div class="flex items-center space-x-3 sm:space-x-4">
                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-primary rounded-lg flex items-center justify-center shadow-sm flex-shrink-0">
                        <i class="fas fa-credit-card text-white text-lg sm:text-xl"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <h1 class="text-xl sm:text-2xl font-semibold text-gray-700">{{ __('credits.choose_credit_package') }}</h1>
                        <p class="text-sm sm:text-base text-gray-600 mt-1">{{ __('credits.select_package_description') }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Packages Grid -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            @foreach($packages as $package)
                <div class="border {{ $package->is_popular ? 'border-primary ring-2 ring-primary/20' : 'border-white' }} bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 shadow-front-box-shadow-glow hover:shadow-front-large-blur transition-all duration-300 relative">
                    @if($package->is_popular)
                        <div class="absolute top-0 right-0 bg-primary text-white px-3 py-1 rounded-bl-lg rounded-tr-lg text-xs font-semibold">
                            {{ __('credits.most_popular') }}
                        </div>
                    @endif
                    
                    <div class="p-6">
                        <!-- Package Header -->
                        <div class="text-center mb-6">
                            <h3 class="text-xl font-semibold text-gray-700 mb-1">{{ $package->title }}</h3>
                            @if($package->subtitle)
                                <p class="text-sm text-gray-500">{{ $package->subtitle }}</p>
                            @endif
                        </div>

                        <!-- Price -->
                        <div class="text-center mb-6">
                            <div class="text-4xl font-semibold text-gray-700">₹{{ number_format($package->price, 0) }}</div>
                            <div class="text-sm text-gray-500 mt-1">{{ number_format($package->credits) }} {{ __('credits.credits_label') }}</div>
                            <div class="text-xs text-green-600 mt-2 font-medium">₹{{ number_format($package->effective_rate, 2) }}{{ __('credits.per_message') }}</div>
                        </div>

                        <!-- Features -->
                        <div class="space-y-3 mb-6">
                            @if($package->features)
                                @foreach($package->features as $feature)
                                    <div class="flex items-start">
                                        <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                                        <span class="text-sm text-gray-600">{{ $feature }}</span>
                                    </div>
                                @endforeach
                            @endif
                        </div>

                        <!-- Purchase Button -->
                        <a href="{{ route('credits.checkout', $package) }}" class="btn {{ $package->is_popular ? 'btn-primary' : 'btn-outline-secondary' }} w-full text-center">
                            <i class="fas fa-shopping-cart mr-2"></i>
                            {{ __('credits.purchase_now') }}
                        </a>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endsection