@extends('layouts.student')

@section('title', 'Recharge - MentoraMind')

@section('content')
<div class="page-header d-flex justify-content-between align-items-center">
    <div>
        <h1>{{ __('student.recharge.title') }}</h1>
        <p class="mb-0">{{ __('student.recharge.subtitle') }}</p>
    </div>
    <a href="{{ route('student.recharge.history') }}" class="btn btn-outline-primary">
        <i class="bi bi-clock-history me-2"></i>{{ __('student.recharge.recharge_history') }}
    </a>
</div>

<div class="row mb-4">
    <div class="col-lg-4 mb-3 mb-lg-0">
        <div class="card text-center">
            <div class="card-body p-3 p-md-4">
                <div class="stat-icon orange mx-auto mb-3" style="width: 80px; height: 80px; font-size: 2rem;">
                    <i class="bi bi-wallet2"></i>
                </div>
                <h6 class="text-muted mb-2">{{ __('student.recharge.account_balance') }}</h6>
                <h2 class="mb-0" style="color: var(--primary-orange); font-weight: 800;">
                    {{ format_currency(auth()->user()->customer->current_balance ?? 0) }}
                </h2>
            </div>
        </div>
    </div>

    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">{{ __('student.recharge.recharge_account') }}</h5>
            </div>
            <div class="card-body p-4">
                @livewire('student.recharge-form')
            </div>
        </div>
    </div>
</div>

@endsection