@extends('layouts.main')

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

@section('page_title')
    {{ __('credits.add_credits_to', ['name' => $user->name]) }}
@endsection

@php
    $breadcrumbs = [
        ['url' => route('dashboard'), 'label' => __('credit_packages.dashboard')],
        ['url' => route('admin.credits.dashboard'), 'label' => __('credits.title')],
        ['url' => route('admin.credits.users'), 'label' => __('credits.users')],
        ['url' => '', 'label' => __('credits.add_credits')],
    ];
@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-coins 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 truncate">{{ __('credits.add_credits_to', ['name' => $user->name]) }}</h1>
                        <p class="text-sm sm:text-base text-gray-600 mt-1">{{ __('credits.add_credits_description') }}</p>
                    </div>
                </div>
                <a href="{{ route('admin.credits.users') }}" class="btn btn-outline-secondary shadow-lg hover:shadow-xl w-full sm:w-auto justify-center">
                    <i class="fas fa-arrow-left mr-2"></i>
                    <span class="hidden sm:inline whitespace-nowrap">{{ __('credits.back_to_users') }}</span>
                    <span class="sm:hidden">{{ __('credits.back') }}</span>
                </a>
            </div>
        </div>

        <!-- User Information Card -->
        <div class="">
            <div class="">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div class="text-center p-4 border 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">
                        <div class="w-12 h-12 bg-primary/10 backdrop-blur-sm rounded-lg flex items-center justify-center mx-auto mb-3 border border-white/50">
                            <i class="fas fa-user text-primary text-lg"></i>
                        </div>
                        <label class="text-sm font-medium text-gray-600 block mb-1">{{ __('credits.name') }}</label>
                        <p class="font-semibold text-gray-700">{{ $user->name }}</p>
                    </div>
                    
                    <div class="text-center p-4 border 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">
                        <div class="w-12 h-12 bg-blue-100/80 backdrop-blur-sm rounded-lg flex items-center justify-center mx-auto mb-3 border border-white/50">
                            <i class="fas fa-envelope text-blue-600 text-lg"></i>
                        </div>
                        <label class="text-sm font-medium text-gray-600 block mb-1">{{ __('credits.email') }}</label>
                        <p class="font-semibold text-gray-700 truncate">{{ $user->email }}</p>
                    </div>
                    
                    <div class="text-center p-4 border 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">
                        <div class="w-12 h-12 bg-green-100/80 backdrop-blur-sm rounded-lg flex items-center justify-center mx-auto mb-3 border border-white/50">
                            <i class="fas fa-wallet text-green-600 text-lg"></i>
                        </div>
                        <label class="text-sm font-medium text-gray-600 block mb-1">{{ __('credits.available_credits') }}</label>
                        <p class="font-semibold text-green-700 text-lg">{{ number_format($user->availableCredits()) }}</p>
                    </div>
                    
                    <div class="text-center p-4 border 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">
                        <div class="w-12 h-12 bg-purple-100/80 backdrop-blur-sm rounded-lg flex items-center justify-center mx-auto mb-3 border border-white/50">
                            <i class="fas fa-coins text-purple-600 text-lg"></i>
                        </div>
                        <label class="text-sm font-medium text-gray-600 block mb-1">{{ __('credits.total_credits') }}</label>
                        <p class="font-semibold text-purple-700 text-lg">{{ number_format($user->total_credits) }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Add Credits Form Card -->
        <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 shadow-front-box-shadow-glow">
            <div class="md:p-6 p-4">
                <form action="{{ route('admin.credits.storeCredits', $user) }}" method="POST" class="space-y-6">
                    @csrf
                    
                    <!-- Credits Input -->
                    <div class="form-group !mt-0">
                        <label for="credits" class="form-label required">{{ __('credits.number_of_credits') }}</label>
                        <div class="relative">
                            <input type="number" 
                                   name="credits" 
                                   id="credits" 
                                   class="form-control @error('credits') is-invalid @enderror" 
                                   min="1" 
                                   max="100000" 
                                   value="{{ old('credits') }}" 
                                   placeholder="{{ __('credits.credits_placeholder') }}"
                                   required>
                            <div class="absolute inset-y-0 right-0 flex items-center pr-3">
                                <i class="fas fa-coins text-gray-400"></i>
                            </div>
                        </div>
                        <small class="text-gray-500 mt-1">{{ __('credits.credits_help') }}</small>
                        @error('credits')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Description Input -->
                    <div class="form-group">
                        <label for="description" class="form-label required">{{ __('credits.description_reason') }}</label>
                        <textarea name="description" 
                                  id="description" 
                                  rows="4" 
                                  class="form-control @error('description') is-invalid @enderror" 
                                  placeholder="{{ __('credits.description_placeholder') }}"
                                  required>{{ old('description') }}</textarea>
                        <small class="text-gray-500 mt-1">{{ __('credits.description_help') }}</small>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Submit Buttons -->
                    <div class="flex items-center justify-end space-x-3 pt-4 border-t border-white/30">
                        <a href="{{ route('admin.credits.users') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-times mr-2"></i>
                            {{ __('credits.cancel') }}
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-plus mr-2"></i>
                            {{ __('credits.add_credits_button') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Warning Notice -->
        <div class="border-l-4 border-yellow-500 bg-yellow-50/80 backdrop-blur-sm rounded-24 p-6 border border-white/50">
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-triangle text-yellow-600 text-xl"></i>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-yellow-800 mb-2">{{ __('credits.important_notice') }}</h3>
                    <div class="text-sm text-yellow-700 space-y-2">
                        <p>• {{ __('credits.notice_point_1') }}</p>
                        <p>• {{ __('credits.notice_point_2') }}</p>
                        <p>• {{ __('credits.notice_point_3') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection