@extends('user.layout')

@section('title','রিচার্জ হিস্ট্রি')

@section('content')
<style>
:root{
    --theme: #0284c7;            /* Pro Earn Sky Blue Primary */
    --theme-hover: #0369a1;      /* Darker Sky Blue */
    --theme-gradient: linear-gradient(135deg, #0284c7, #2563eb);
    --theme-light: #f0f9ff;      /* Light Sky Blue */
    --theme-border: #bae6fd;     /* Sky Blue Border */
    --bg: #f8fafc;
    --card-bg: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
    --line: #e2e8f0;
    --green: #10b981;
    --red: #ef4444;
    --yellow: #f59e0b;
}

/* Base resets & layout fixes */
html, body{
    background: var(--bg)!important;
}

.app-body{
    flex: 0 0 auto!important;
    min-height: 0!important;
    padding-top: calc(var(--header-h) + 12px)!important;
    padding-bottom: calc(var(--footer-h) + 12px)!important;
    background: var(--bg)!important;
    overflow-x: hidden!important;
}

.history-page{
    background: var(--bg);
    min-height: auto;
    padding: 12px 14px 24px;
    color: var(--text);
    max-width: 500px;
    margin: 0 auto;
}

/* Header Banner Styling matching Pro Earn App Theme */
.history-top{
    background: var(--theme-gradient);
    border-radius: 20px;
    padding: 18px 16px;
    color: #fff;
    margin-bottom: 16px;
    box-shadow: 0 10px 25px -5px rgba(2, 132, 199, 0.3);
    position: relative;
    overflow: hidden;
}

.history-top::before{
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.history-title{
    font-size: 20px;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.top-action{
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff!important;
    text-decoration: none!important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    backdrop-filter: blur(4px);
    transition: all .2s ease;
}

.top-action:hover{
    background: rgba(255, 255, 255, 0.3);
}

.alert{
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 14px;
    padding: 12px;
}

.alert-success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.alert-danger {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* Filter Card */
.filter-card{
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 14px;
    margin-bottom: 16px;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03);
}

.filter-grid{
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 10px;
}

.filter-input,
.filter-select{
    height: 44px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    background: #f8fafc;
    outline: 0;
    transition: all .2s ease;
}

.filter-input:focus,
.filter-select:focus{
    border-color: var(--theme);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.12);
}

.filter-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.filter-btn,
.reset-btn{
    height: 42px;
    border: 0;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none!important;
    transition: all .2s ease;
    cursor: pointer;
}

.filter-btn{
    background: var(--theme-gradient);
    color: #fff;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.2);
}

.reset-btn{
    background: #f1f5f9;
    color: var(--muted)!important;
    border: 1px solid var(--line);
}

.reset-btn:hover{
    background: #e2e8f0;
    color: var(--text)!important;
}

/* History Items */
.history-list{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.recharge-row{
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
    transition: transform .2s ease;
}

.recharge-head{
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--line);
}

.recharge-left{
    min-width: 0;
}

.trx{
    font-size: 11px;
    font-weight: 800;
    color: var(--theme);
    word-break: break-all;
    background: var(--theme-light);
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
}

.number{
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    margin-top: 6px;
    letter-spacing: 0.3px;
}

.amount-box{
    text-align: right;
    flex-shrink: 0;
}

.amount{
    font-size: 18px;
    font-weight: 900;
    color: var(--text);
    white-space: nowrap;
}

.badge-status{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 800;
    margin-top: 6px;
}

.st-pending,
.st-processing{
    background: #fef3c7;
    color: #b45309;
}

.st-success{
    background: #dcfce7;
    color: #15803d;
}

.st-cancelled,
.st-failed{
    background: #fee2e2;
    color: #b91c1c;
}

.recharge-meta{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: 12px;
}

.meta-box{
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    padding: 9px 12px;
}

.meta-label{
    font-size: 10px;
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.meta-value{
    font-size: 12px;
    color: var(--text);
    font-weight: 800;
    line-height: 1.35;
}

.commission-box,
.refund-box{
    margin-top: 10px;
    border-radius: 12px;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 6px;
}

.commission-box{
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.refund-box{
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

.empty-box{
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 40px 15px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    font-weight: 800;
}

.empty-box i{
    font-size: 36px;
    color: #cbd5e1;
    margin-bottom: 10px;
    display: block;
}

.paginate-box{
    margin-top: 16px;
}

@media(max-width: 420px){
    .history-page{
        padding: 10px 10px 20px;
    }

    .filter-grid{
        grid-template-columns: 1fr;
    }

    .history-title{
        font-size: 18px;
    }
}
</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>

@php
    $statusLabels = [
        'pending' => 'Pending',
        'processing' => 'Processing',
        'success' => 'Success',
        'cancelled' => 'Cancelled',
        'failed' => 'Failed',
    ];
@endphp

<div class="history-page">

    <div class="history-top">
        <h1 class="history-title">
            <i class="fa-solid fa-clock-rotate-left"></i>
            রিচার্জ হিস্ট্রি
        </h1>

        <div class="top-actions">
            <a href="{{ route('user.mobile-recharge') }}" class="top-action">
                <i class="fa-solid fa-plus"></i>
                নতুন রিচার্জ
            </a>

            <a href="{{ route('user.dashboard') }}" class="top-action">
                <i class="fa-solid fa-house"></i>
                ড্যাশবোর্ড
            </a>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger">
            {{ session('error') }}
        </div>
    @endif

    <div class="filter-card">
        <form method="GET" action="{{ route('user.mobile-recharge.history') }}">
            <div class="filter-grid">
                <input
                    type="text"
                    name="search"
                    value="{{ request('search') }}"
                    class="filter-input"
                    placeholder="TRX ID / Number"
                >

                <select name="status" class="filter-select">
                    <option value="">সব Status</option>

                    @foreach($statusLabels as $key => $label)
                        <option value="{{ $key }}" @selected(request('status') == $key)>
                            {{ $label }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="filter-actions">
                <button type="submit" class="filter-btn">
                    <i class="fa-solid fa-magnifying-glass"></i>
                    সার্চ
                </button>

                <a href="{{ route('user.mobile-recharge.history') }}" class="reset-btn">
                    <i class="fa-solid fa-rotate-left"></i>
                    রিসেট
                </a>
            </div>
        </form>
    </div>

    <div class="history-list">
        @forelse($recharges as $recharge)
            <div class="recharge-row">
                <div class="recharge-head">
                    <div class="recharge-left">
                        <div class="trx">{{ $recharge->transaction_id }}</div>
                        <div class="number">{{ $recharge->mobile_number }}</div>
                    </div>

                    <div class="amount-box">
                        <div class="amount">৳{{ number_format($recharge->amount, 0) }}</div>

                        <span class="badge-status st-{{ $recharge->status }}">
                            {{ $statusLabels[$recharge->status] ?? ucfirst($recharge->status) }}
                        </span>
                    </div>
                </div>

                <div class="recharge-meta">
                    <div class="meta-box">
                        <div class="meta-label">অপারেটর</div>
                        <div class="meta-value">
                            {{ $recharge->operator }} · {{ ucfirst($recharge->type) }}
                        </div>
                    </div>

                    <div class="meta-box">
                        <div class="meta-label">সময়</div>
                        <div class="meta-value">
                            {{ $recharge->created_at ? $recharge->created_at->format('d M Y, h:i A') : '-' }}
                        </div>
                    </div>
                </div>

                @if((float)($recharge->commission_amount ?? 0) > 0)
                    <div class="commission-box">
                        <i class="fa-solid fa-circle-check"></i>
                        কমিশন: ৳{{ number_format($recharge->commission_amount, 2) }}
                    </div>
                @endif

                @if((float)($recharge->refunded_amount ?? 0) > 0)
                    <div class="refund-box">
                        <i class="fa-solid fa-rotate-left"></i>
                        ফেরত: ৳{{ number_format($recharge->refunded_amount, 2) }}
                    </div>
                @endif
            </div>
        @empty
            <div class="empty-box">
                <i class="fa-solid fa-receipt"></i>
                কোনো রিচার্জ হিস্ট্রি পাওয়া যায়নি
            </div>
        @endforelse
    </div>

    <div class="paginate-box">
        {{ $recharges->links() }}
    </div>

</div>
@endsection