@extends('layouts.student')

@section('title', __('student.recharge.recharge_history'))

@section('content')
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">{{ __('student.recharge.recharge_history') }}</h1>
            <p class="text-muted mb-0">{{ __('student.recharge.subtitle') }}</p>
        </div>
        <a href="{{ route('student.recharge.index') }}" class="btn btn-primary">
            <i class="bi bi-plus-circle me-2"></i>{{ __('student.recharge.recharge_account') }}
        </a>
    </div>

    <!-- Filters -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="GET" action="{{ route('student.recharge.history') }}" class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">{{ __('student.recharge.status') }}</label>
                    <select name="status" class="form-select">
                        <option value="">{{ __('student.withdrawal.all_status') }}</option>
                        <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>{{ __('student.recharge.status_pending') }}</option>
                        <option value="completed" {{ request('status') === 'completed' ? 'selected' : '' }}>{{ __('student.recharge.status_success') }}</option>
                        <option value="failed" {{ request('status') === 'failed' ? 'selected' : '' }}>{{ __('student.recharge.status_failed') }}</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">{{ __('student.withdrawal.start_date') }}</label>
                    <input type="date" name="start_date" class="form-control" value="{{ request('start_date') }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">{{ __('student.withdrawal.end_date') }}</label>
                    <input type="date" name="end_date" class="form-control" value="{{ request('end_date') }}">
                </div>
                <div class="col-md-3 d-flex align-items-end">
                    <div class="w-100">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="bi bi-funnel me-2"></i>{{ __('student.withdrawal.filter') }}
                        </button>
                    </div>
                </div>
                @if(request()->hasAny(['status', 'start_date', 'end_date']))
                <div class="col-12">
                    <a href="{{ route('student.recharge.history') }}" class="btn btn-outline-secondary">
                        <i class="bi bi-x-circle me-2"></i>{{ __('student.recharge.clear_filters') }}
                    </a>
                </div>
                @endif
            </form>
        </div>
    </div>

    <!-- Recharges Table -->
    <div class="card">
        <div class="card-body">
            @if($recharges->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>{{ __('student.recharge.date') }}</th>
                                <th>{{ __('student.recharge.reference') }}</th>
                                <th>{{ __('student.recharge.amount') }}</th>
                                <th>{{ __('student.recharge.payment_method') }}</th>
                                <th>{{ __('student.recharge.phone_number') }}</th>
                                <th>{{ __('student.recharge.status') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recharges as $recharge)
                                <tr>
                                    <td>
                                        <div class="d-flex flex-column">
                                            <span>{{ format_datetime($recharge->created_at, false) }}</span>
                                            <small class="text-muted">{{ $recharge->created_at->format('H:i') }}</small>
                                        </div>
                                    </td>
                                    <td>
                                        <code class="text-muted">{{ $recharge->transaction_id }}</code>
                                    </td>
                                    <td>
                                        <strong>{{ format_currency($recharge->amount) }}</strong>
                                    </td>
                                    <td>
                                        @php
                                            $method = \App\Enums\PaymentMethod::from($recharge->payment_method);
                                        @endphp
                                        <span class="badge" style="background-color: {{ $method->color() }};">
                                            <i class="{{ $method->icon() }} me-1"></i>
                                            {{ $method->label() }}
                                        </span>
                                    </td>
                                    <td>
                                        @php
                                            preg_match('/(\d{9})/', $recharge->notes ?? '', $matches);
                                            $phoneNumber = $matches[1] ?? '-';
                                        @endphp
                                        <span class="text-muted">{{ $phoneNumber !== '-' ? '(+237) '.$phoneNumber : '-' }}</span>
                                    </td>
                                    <td>
                                        @if($recharge->status === 'completed')
                                            <span class="badge bg-success">
                                                <i class="bi bi-check-circle me-1"></i>{{ __('student.recharge.status_success') }}
                                            </span>
                                        @elseif($recharge->status === 'pending')
                                            <span class="badge bg-warning text-dark">
                                                <i class="bi bi-clock me-1"></i>{{ __('student.recharge.status_pending') }}
                                            </span>
                                        @else
                                            <span class="badge bg-danger">
                                                <i class="bi bi-x-circle me-1"></i>{{ __('student.recharge.status_failed') }}
                                            </span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="d-flex justify-content-center mt-4">
                    {{ $recharges->links() }}
                </div>
            @else
                <div class="text-center py-5">
                    <i class="bi bi-inbox display-1 text-muted"></i>
                    <p class="text-muted mt-3">{{ __('student.recharge.no_history') }}</p>
                    <a href="{{ route('student.recharge.index') }}" class="btn btn-primary mt-3">
                        <i class="bi bi-plus-circle me-2"></i>{{ __('student.recharge.recharge_account') }}
                    </a>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection