@extends('frontend.layouts.user_panel')
@section('panel_content')
@php
    $paymentHistory = \App\Models\CustomerPackagePayment::with('customer_package')
        ->where('user_id', Auth::user()->id)
        ->orderBy('id','desc')
        ->get();
    $totalCount     = $paymentHistory->count();
    $completedCount = $paymentHistory->where('status','Completed')->count();
    $failedCount    = $paymentHistory->whereIn('status',['Failed','failed'])->count();
@endphp

<style>
.ph-stat { background: #f8f9fb; border-radius: 10px; padding: 1rem; }
.ph-stat-label { font-size: 12px; color: #64748b; margin: 0 0 4px; }
.ph-stat-value { font-size: 22px; font-weight: 600; margin: 0; color: #0b1426; }
.ph-table-wrap { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; }
.ph-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ph-table thead tr { background: #f8f9fb; }
.ph-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 700; color: #94a3b8; letter-spacing: 0.6px; text-transform: uppercase; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.ph-table td { padding: 14px 16px; border-bottom: 1px solid #f0f2f8; color: #0b1426; vertical-align: middle; }
.ph-table tbody tr:last-child td { border-bottom: none; }
.ph-table tbody tr:hover td { background: #f8f9fb; }
.pincode-chip { font-size: 12px; font-family: monospace; background: #f0f2f8; border: 1px solid #e2e8f0; border-radius: 6px; padding: 2px 8px; color: #334155; }
.pm-badge { display: inline-flex; align-items: center; font-size: 12px; padding: 3px 10px; border-radius: 6px; background: #f0f2f8; border: 1px solid #e2e8f0; color: #475569; }
.badge-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px; position: static; white-space: nowrap; }
.badge-completed { background: #dcfce7; color: #166534; }
.badge-failed    { background: #fee2e2; color: #991b1b; }
.badge-pending   { background: #fef9c3; color: #854d0e; }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dot-completed { background: #16a34a; }
.dot-failed    { background: #dc2626; }
.dot-pending   { background: #ca8a04; }
</style>

<div style="padding: 0.5rem 0;">

    {{-- Header --}}
    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem;">
        <h5 style="font-size:18px; font-weight:600; color:#0b1426; margin:0;">{{ translate('Purchase History') }}</h5>
    </div>

    {{-- Stats --}}
    <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:1.5rem;">
        <div class="ph-stat">
            <p class="ph-stat-label">{{ translate('Total Purchases') }}</p>
            <p class="ph-stat-value">{{ $totalCount }}</p>
        </div>
        <div class="ph-stat">
            <p class="ph-stat-label">{{ translate('Completed') }}</p>
            <p class="ph-stat-value" style="color:#166534;">{{ $completedCount }}</p>
        </div>
        <div class="ph-stat">
            <p class="ph-stat-label">{{ translate('Failed') }}</p>
            <p class="ph-stat-value" style="color:#991b1b;">{{ $failedCount }}</p>
        </div>
    </div>

    {{-- Table --}}
    @if($totalCount > 0)
    <div class="ph-table-wrap">
        <table class="ph-table">
            <thead>
                <tr>
                    <th>{{ translate('Pincode') }}</th>
                    <th>{{ translate('Package') }}</th>
                    <th>{{ translate('Purchase Date') }}</th>
                    <th>{{ translate('Expiry Date') }}</th>
                    <th>{{ translate('Amount') }}</th>
                    <th>{{ translate('Payment Mode') }}</th>
                    <th>{{ translate('Status') }}</th>
                </tr>
            </thead>
            <tbody>
                @foreach($paymentHistory as $value)
                @php
                    $status = strtolower($value->status ?? 'pending');
                    $affilate = \App\Models\Affiliate::where('user_id', Auth::user()->id)->first();
                    // record specific pincode first, fallback to affiliate pincode
                    $pincode = $value->pincode ?? ($affilate->pincode ?? '—');
                    // expiry date from affiliate if completed
                    $expiryDate = ($status == 'completed' && isset($affilate->expiry_date))
                        ? date('d-m-Y', strtotime($affilate->expiry_date))
                        : '—';
                @endphp
                <tr>
                    <td>
                        @if($pincode && $pincode != '—')
                            <span class="pincode-chip">{{ $pincode }}</span>
                        @else
                            <span style="color:#94a3b8;">—</span>
                        @endif
                    </td>
                    <td style="font-weight:600;">
                        {{ isset($value->customer_package->name) ? $value->customer_package->name : '—' }}
                    </td>
                    <td style="color:#475569;">{{ date('d-m-Y', strtotime($value->created_at)) }}</td>
                    <td style="color:#475569;">{{ $expiryDate }}</td>
                    <td style="font-weight:600;">{{ single_price($value->amount) }}</td>
                    <td>
                        <span class="pm-badge">{{ $value->payment_method ?? '—' }}</span>
                    </td>
                    <td>
                        @if($status == 'completed')
                            <span class="badge-status badge-completed">
                                <span class="badge-dot dot-completed"></span>
                                {{ translate('Completed') }}
                            </span>
                        @elseif($status == 'failed')
                            <span class="badge-status badge-failed">
                                <span class="badge-dot dot-failed"></span>
                                {{ translate('Failed') }}
                            </span>
                        @else
                            <span class="badge-status badge-pending">
                                <span class="badge-dot dot-pending"></span>
                                {{ translate('Pending') }}
                            </span>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @else
    <div style="text-align:center; padding:3rem; color:#94a3b8; font-size:14px;">
        {{ translate('No purchase history found') }}
    </div>
    @endif

</div>
@endsection

@section('modal')
    @include('modals.delete_modal')
@endsection