@extends('user.layout')

@section('title','ড্রাইভ প্যাক হিস্ট্রি')

@section('content')
<style>
:root{
    --theme:#ff5a00;
    --theme2:#ff303c;
    --bg:#f8fafc;
    --text:#0f172a;
    --muted:#64748b;
    --line:#e2e8f0;
}

.history-page{
    background:var(--bg);
    min-height:auto;
    padding:12px 12px calc(var(--footer-h,72px) + 14px);
    color:var(--text);
    overflow-x:hidden;
}

.history-top{
    background:linear-gradient(135deg,var(--theme),var(--theme2));
    border-radius:18px;
    padding:16px 15px;
    color:#fff;
    margin-bottom:13px;
    box-shadow:0 8px 22px rgba(255,90,0,.20);
}

.history-title{
    font-size:21px;
    font-weight:900;
    margin:0;
    line-height:1.2;
}

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

.top-action{
    height:40px;
    border-radius:11px;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.25);
    color:#fff!important;
    text-decoration:none!important;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    font-size:13px;
    font-weight:900;
}

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

.filter-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:12px;
    margin-bottom:13px;
    box-shadow:0 2px 8px rgba(15,23,42,.04);
}

.filter-grid{
    display:grid;
    grid-template-columns:1fr 112px;
    gap:8px;
}

.filter-input,
.filter-select{
    height:42px;
    border:1px solid var(--line);
    border-radius:11px;
    padding:0 11px;
    font-size:13px;
    font-weight:800;
    color:var(--text);
    background:#f8fafc;
    outline:0;
}

.filter-input:focus,
.filter-select:focus{
    border-color:var(--theme);
    background:#fff;
    box-shadow:0 0 0 3px rgba(255,90,0,.10);
}

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

.filter-btn,
.reset-btn{
    height:40px;
    border:0;
    border-radius:11px;
    font-size:13px;
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    text-decoration:none!important;
}

.filter-btn{
    background:var(--theme);
    color:#fff;
}

.reset-btn{
    background:#111827;
    color:#fff!important;
}

.history-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.order-row{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:12px;
    box-shadow:0 2px 8px rgba(15,23,42,.04);
}

.order-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
    padding-bottom:10px;
    border-bottom:1px dashed #e2e8f0;
}

.trx{
    font-size:12px;
    font-weight:900;
    color:var(--theme);
    word-break:break-all;
}

.number{
    font-size:16px;
    font-weight:900;
    color:var(--text);
    margin-top:4px;
}

.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:999px;
    padding:5px 10px;
    font-size:11px;
    font-weight:900;
    margin-top:5px;
}

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

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

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

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

.meta-box{
    background:#f8fafc;
    border:1px solid #eef2f7;
    border-radius:11px;
    padding:8px;
}

.meta-label{
    font-size:11px;
    color:var(--muted);
    font-weight:900;
    margin-bottom:3px;
}

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

.pack-title{
    margin-top:10px;
    background:#fff7ed;
    border:1px solid #fed7aa;
    border-radius:11px;
    padding:9px;
    color:#9a3412;
    font-size:12px;
    font-weight:900;
}

.commission-box,
.refund-box{
    margin-top:10px;
    border-radius:11px;
    padding:9px;
    font-size:12px;
    font-weight:900;
    line-height:1.5;
}

.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:16px;
    padding:34px 15px;
    text-align:center;
    color:var(--muted);
    font-size:14px;
    font-weight:900;
}

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

@media(max-width:420px){
    .history-page{
        padding:12px 10px calc(var(--footer-h,72px) + 12px);
    }

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

    .history-title{
        font-size:20px;
    }
}
</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">ড্রাইভ প্যাক হিস্ট্রি</h1>

        <div class="top-actions">
            <a href="{{ route('user.drive-packs') }}" class="top-action">
                <i class="fa-solid fa-plus"></i>
                নতুন প্যাক
            </a>

            <a href="{{ route('user.dashboard') }}" class="top-action">
                <i class="fa-solid fa-table-cells"></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.drive-packs.history') }}">
            <div class="filter-grid">
                <input
                    type="text"
                    name="search"
                    value="{{ request('search') }}"
                    class="filter-input"
                    placeholder="TRX ID / Number / Pack"
                >

                <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.drive-packs.history') }}" class="reset-btn">
                    <i class="fa-solid fa-rotate-left"></i>
                    রিসেট
                </a>
            </div>
        </form>
    </div>

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

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

                        <span class="badge-status st-{{ $order->status }}">
                            {{ $statusLabels[$order->status] ?? $order->status }}
                        </span>
                    </div>
                </div>

                <div class="pack-title">
                    {{ $order->title ?: $order->package_id }}
                </div>

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

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

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

                @if((float)($order->refunded_amount ?? 0) > 0)
                    <div class="refund-box">
                        🔁 ফেরত: ৳{{ number_format($order->refunded_amount, 2) }}
                    </div>
                @endif
            </div>
        @empty
            <div class="empty-box">
                কোনো ড্রাইভ প্যাক হিস্ট্রি পাওয়া যায়নি
            </div>
        @endforelse
    </div>

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