@extends('layouts.kurir_sidebar')

@section('title', 'Riwayat Transaksi')

@push('styles')
<style>
    .soft-shadow { box-shadow: 0 4px 15px rgba(0,0,0,.04); }
    .card-hover { transition: transform .2s ease, box-shadow .2s ease; }
    .card-hover:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }

    /* Badge metode bayar */
    .badge-tunai    { background:#ecfdf5; color:#059669; border:1px solid #a7f3d0; }
    .badge-transfer { background:#eff6ff; color:#2563eb; border:1px solid #bfdbfe; }
    .badge-qris     { background:#fdf4ff; color:#9333ea; border:1px solid #e9d5ff; }

    /* Skeleton shimmer */
    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
    .skeleton {
        background: linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);
        background-size: 200% 100%;
        animation: shimmer 1.4s infinite;
        border-radius: .5rem;
    }

    /* Mobile card scroll */
    .mobile-card { border-bottom: 1px solid #f1f5f9; }
    .mobile-card:last-child { border-bottom: none; }

    /* Pagination custom */
    .page-btn {
        display:flex; align-items:center; justify-content:center;
        min-width:2rem; height:2rem; padding:0 .5rem;
        border-radius:.5rem; font-size:.8rem; font-weight:600;
        transition: all .15s;
    }
    .page-btn.active { background:#2563eb; color:#fff; }
    .page-btn:not(.active):not(.disabled):hover { background:#eff6ff; color:#2563eb; }
    .page-btn.disabled { opacity:.4; pointer-events:none; }

    input:focus, select:focus { outline:none; box-shadow:0 0 0 3px rgba(59,130,246,.12); }

    /* Modal caution */
    #deleteModal {
        backdrop-filter: blur(4px);
        transition: opacity .2s ease;
    }
    #deleteModal.hidden { opacity:0; pointer-events:none; }
    #deleteModal:not(.hidden) { opacity:1; }
    .modal-card {
        transform: scale(.95);
        transition: transform .2s ease;
    }
    #deleteModal:not(.hidden) .modal-card { transform: scale(1); }

    /* Btn hapus */
    .btn-hapus {
        display:inline-flex; align-items:center; justify-content:center;
        width:2rem; height:2rem; border-radius:.5rem;
        background:#fff0f0; color:#dc2626;
        border:1px solid #fecaca;
        cursor:pointer; transition: all .15s;
    }
    .btn-hapus:hover { background:#fef2f2; border-color:#f87171; transform:scale(1.08); }
</style>
@endpush

@section('content')
<div class="max-w-7xl mx-auto">


    {{-- ===== HEADER + STATS ===== --}}
    <div class="mb-6">
        <div class="flex items-center justify-between mb-6 flex-wrap gap-3">
            <div>
                <h1 class="text-xl font-bold text-slate-800">Riwayat Transaksi</h1>
                <p class="text-xs text-slate-400 mt-0.5">Seluruh catatan penjualan gas LPG</p>
            </div>

        </div>

        {{-- Stats Cards --}}
        @php
            // Mendapatkan teks label berdasarkan filter
            $labelSatu = 'HARI INI';
            if (request('tanggal')) {
                $labelSatu = strtoupper(\Carbon\Carbon::parse(request('tanggal'))->translatedFormat('d M Y'));
            } elseif (request('search') || request('metode')) {
                $labelSatu = 'PENCARIAN';
            }
        @endphp

        <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6">
            {{-- Total Transaksi --}}
            <div class="bg-white rounded-2xl p-4 border border-slate-100 soft-shadow flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center flex-shrink-0">
                    <i data-lucide="receipt" class="w-5 h-5 text-blue-500"></i>
                </div>
                <div class="min-w-0">
                    <p class="text-[10px] text-slate-400 font-bold uppercase tracking-wider truncate" title="Total Transaksi {{ $labelSatu }}">TRX {{ $labelSatu === 'HARI INI' || $labelSatu === 'PENCARIAN' ? $labelSatu : 'TERPILIH' }}</p>
                    <p class="text-xl font-black text-slate-800">{{ number_format($totalTransaksi) }}</p>
                </div>
            </div>

            {{-- Total Tabung --}}
            <div class="bg-white rounded-2xl p-4 border border-slate-100 soft-shadow flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-green-50 flex items-center justify-center flex-shrink-0">
                    <i data-lucide="package" class="w-5 h-5 text-green-500"></i>
                </div>
                <div class="min-w-0">
                    <p class="text-[10px] text-slate-400 font-bold uppercase tracking-wider truncate" title="Tabung Terjual">TABUNG TERJUAL</p>
                    <p class="text-xl font-black text-slate-800">{{ number_format($totalTabung) }}</p>
                </div>
            </div>

            {{-- Total Nominal --}}
            <div class="col-span-2 md:col-span-1 bg-gradient-to-br from-blue-600 to-blue-700 rounded-2xl p-4 border border-blue-500 shadow-[0_4px_16px_-4px_rgba(37,99,235,.5)] flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-white/15 flex items-center justify-center flex-shrink-0">
                    <i data-lucide="banknote" class="w-5 h-5 text-white"></i>
                </div>
                <div class="min-w-0">
                    <p class="text-[10px] text-blue-200 font-bold uppercase tracking-wider truncate" title="Nominal {{ $labelSatu }}">NOMINAL {{ $labelSatu === 'HARI INI' || $labelSatu === 'PENCARIAN' ? $labelSatu : 'TERPILIH' }} (NON-QRIS)</p>
                    <p class="text-lg font-black text-white truncate">Rp {{ number_format($totalNominal, 0, ',', '.') }}</p>
                </div>
            </div>
        </div>
    </div>

    {{-- ===== FILTER / SEARCH BAR ===== --}}
    <form method="GET" action="{{ route('kurir.riwayat') }}" id="filterForm"
          class="bg-white rounded-2xl border border-slate-100 p-4 soft-shadow mb-5">
        <div class="flex flex-col sm:flex-row gap-3">
            {{-- Pencarian --}}
            <div class="relative flex-1">
                <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
                    <i data-lucide="search" class="w-4 h-4 text-slate-400"></i>
                </div>
                <input type="text" name="search" id="searchInput"
                       value="{{ request('search') }}"
                       placeholder="Cari nama pelanggan atau produk..."
                       class="w-full pl-10 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm text-slate-700 placeholder:text-slate-400 focus:border-blue-300 transition-all">
            </div>

            {{-- Filter Tanggal --}}
            <div class="relative sm:w-44">
                <input type="date" name="tanggal" 
                       value="{{ request('tanggal', (request()->has('search') || request()->has('metode') || request()->has('tanggal')) ? request('tanggal') : date('Y-m-d')) }}"
                       onchange="this.form.submit()"
                       class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm text-slate-700 focus:border-blue-300 transition-all appearance-none cursor-pointer">
            </div>

            {{-- Filter Metode --}}
            <div class="relative sm:w-44">
                <select name="metode" onchange="this.form.submit()"
                        class="w-full pl-4 pr-10 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm text-slate-700 appearance-none cursor-pointer focus:border-blue-300 transition-all">
                    <option value="">Semua Metode</option>
                    <option value="Tunai"    {{ request('metode') == 'Tunai'    ? 'selected' : '' }}>Tunai</option>
                    <option value="Transfer" {{ request('metode') == 'Transfer' ? 'selected' : '' }}>Transfer Bank</option>
                    <option value="Qris"     {{ request('metode') == 'Qris'     ? 'selected' : '' }}>QRIS</option>
                </select>
                <div class="absolute inset-y-0 right-0 flex items-center px-3 pointer-events-none text-slate-400">
                    <i data-lucide="chevron-down" class="w-4 h-4"></i>
                </div>
            </div>

            {{-- Tombol Cari --}}
            <button type="submit"
                    class="flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold px-5 py-2.5 rounded-xl text-sm transition-all shrink-0">
                <i data-lucide="search" class="w-4 h-4"></i>
                <span>Cari</span>
            </button>

            {{-- Reset (jika ada filter aktif) --}}
            @if(request('search') || request('metode'))
            <a href="{{ route('kurir.riwayat') }}"
               class="flex items-center justify-center gap-2 bg-slate-100 hover:bg-slate-200 text-slate-600 font-semibold px-4 py-2.5 rounded-xl text-sm transition-all shrink-0">
                <i data-lucide="x" class="w-4 h-4"></i>
                <span class="hidden sm:inline">Reset</span>
            </a>
            @endif
        </div>

        {{-- Active filter badge --}}
        @if(request('search') || request('metode') || request('tanggal'))
        <div class="flex items-center gap-2 mt-3 flex-wrap">
            <span class="text-xs text-slate-400 font-medium">Filter aktif:</span>
            @if(request('tanggal'))
                <span class="inline-flex items-center gap-1 bg-emerald-50 text-emerald-600 text-xs font-semibold px-2.5 py-1 rounded-full border border-emerald-100">
                    <i data-lucide="calendar" class="w-3 h-3"></i>
                    {{ \Carbon\Carbon::parse(request('tanggal'))->translatedFormat('d M Y') }}
                </span>
            @endif
            @if(request('search'))
                <span class="inline-flex items-center gap-1 bg-blue-50 text-blue-600 text-xs font-semibold px-2.5 py-1 rounded-full border border-blue-100">
                    <i data-lucide="search" class="w-3 h-3"></i>
                    "{{ request('search') }}"
                </span>
            @endif
            @if(request('metode'))
                <span class="inline-flex items-center gap-1 bg-purple-50 text-purple-600 text-xs font-semibold px-2.5 py-1 rounded-full border border-purple-100">
                    <i data-lucide="credit-card" class="w-3 h-3"></i>
                    {{ request('metode') }}
                </span>
            @endif
        </div>
        @endif
    </form>

    {{-- ===== TABEL DESKTOP ===== --}}
    <div class="hidden md:block bg-white rounded-2xl border border-slate-100 soft-shadow overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
            <div class="flex items-center gap-2">
                <i data-lucide="list" class="w-4 h-4 text-slate-400"></i>
                <span class="text-sm font-semibold text-slate-600">
                    {{ $riwayat->firstItem() ?? 0 }}–{{ $riwayat->lastItem() ?? 0 }}
                    dari {{ $riwayat->total() }} transaksi
                </span>
            </div>
            <span class="text-xs text-slate-400">Halaman {{ $riwayat->currentPage() }} / {{ $riwayat->lastPage() }}</span>
        </div>

        <table class="w-full text-sm">
            <thead>
                <tr class="bg-slate-50 border-b border-slate-100 text-left">
                    <th class="px-6 py-3.5 text-xs font-bold text-slate-400 uppercase tracking-wider w-12">#</th>
                    <th class="px-4 py-3.5 text-xs font-bold text-slate-400 uppercase tracking-wider">Tanggal</th>
                    <th class="px-4 py-3.5 text-xs font-bold text-slate-400 uppercase tracking-wider">Pelanggan</th>
                    <th class="px-4 py-3.5 text-xs font-bold text-slate-400 uppercase tracking-wider">Produk</th>
                    <th class="px-4 py-3.5 text-xs font-bold text-slate-400 uppercase tracking-wider text-center">Qty</th>
                    <th class="px-4 py-3.5 text-xs font-bold text-slate-400 uppercase tracking-wider">Harga</th>
                    <th class="px-4 py-3.5 text-xs font-bold text-slate-400 uppercase tracking-wider">Total</th>
                    <th class="px-4 py-3.5 text-xs font-bold text-slate-400 uppercase tracking-wider">Metode</th>
                    <th class="px-4 py-3.5 text-xs font-bold text-slate-400 uppercase tracking-wider text-center">Status</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-50">
                @forelse($riwayat as $index => $trx)
                    @php
                        $metodeBadge = match(strtolower($trx->metode_bayar ?? '')) {
                            'tunai'    => 'badge-tunai',
                            'transfer' => 'badge-transfer',
                            'qris'     => 'badge-qris',
                            default    => 'bg-slate-50 text-slate-500 border border-slate-100',
                        };
                        $metodeIcon = match(strtolower($trx->metode_bayar ?? '')) {
                            'tunai'    => 'banknote',
                            'transfer' => 'building-2',
                            'qris'     => 'qr-code',
                            default    => 'circle-help',
                        };
                    @endphp
                    <tr class="hover:bg-slate-50/60 transition-colors group">
                        <td class="px-6 py-4 text-xs text-slate-300 font-mono font-bold">
                            {{ $riwayat->firstItem() + $index }}
                        </td>
                        <td class="px-4 py-4">
                            <div class="text-xs font-semibold text-slate-700">
                                {{ $trx->tanggal_transaksi
                                    ? \Carbon\Carbon::parse($trx->tanggal_transaksi)->timezone('Asia/Jakarta')->translatedFormat('d M Y')
                                    : \Carbon\Carbon::parse($trx->created_at)->timezone('Asia/Jakarta')->translatedFormat('d M Y') }}
                            </div>
                            <div class="text-[10px] text-slate-400 mt-0.5">
                                {{ \Carbon\Carbon::parse($trx->created_at)->timezone('Asia/Jakarta')->format('H:i') }} WIB
                            </div>
                        </td>
                        <td class="px-4 py-4">
                            <div class="flex items-center gap-2.5">
                                <div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center text-white text-xs font-bold flex-shrink-0 shadow-sm">
                                    {{ strtoupper(substr($trx->pelanggan?->name ?? 'U', 0, 1)) }}
                                </div>
                                <div class="min-w-0">
                                    <div class="text-sm font-semibold text-slate-700 truncate max-w-[140px]">
                                        {{ $trx->pelanggan?->name ?? '—' }}
                                    </div>
                                    @php
                                        $dest = !empty($trx->pelanggan?->titik_koordinat) ? $trx->pelanggan->titik_koordinat : ($trx->pelanggan?->address ?? '');
                                    @endphp
                                    <div class="text-[10px] text-slate-400 font-mono flex items-center gap-1">
                                        @if(!empty($dest))
                                            <a href="https://www.google.com/maps/dir/?api=1&destination={{ urlencode($dest) }}" 
                                               target="_blank" 
                                               class="text-blue-600 hover:text-blue-800 hover:underline flex items-center gap-1 transition-colors"
                                               title="Petunjuk Arah (Navigasi)">
                                                <i data-lucide="navigation" class="w-2.5 h-2.5"></i>
                                                <span class="truncate max-w-[120px]">{{ $trx->pelanggan->address }}</span>
                                            </a>
                                        @else
                                            <i data-lucide="map-pin" class="w-2.5 h-2.5"></i>
                                            <span class="truncate max-w-[120px]">No Address</span>
                                        @endif
                                    </div>
                                    <div class="mt-1 flex items-center gap-1.5">
                                        <span class="text-[9px] px-1.5 py-0.5 rounded-md border {{ $trx->id_kurir ? 'bg-indigo-50 text-indigo-600 border-indigo-100' : 'bg-amber-50 text-amber-600 border-amber-100' }} font-bold uppercase tracking-tighter">
                                            {{ $trx->id_kurir ? 'Pengiriman' : 'Penjualan' }}
                                        </span>
                                        <span class="text-[9px] text-slate-300 font-mono">
                                            {{ $trx->customers_id }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-4">
                            <div class="inline-flex items-center gap-1.5 bg-slate-50 border border-slate-100 px-2.5 py-1 rounded-lg">
                                <i data-lucide="package-2" class="w-3.5 h-3.5 text-slate-400"></i>
                                <span class="text-xs font-semibold text-slate-600">{{ $trx->produk?->nama_produk ?? $trx->id_produk }}</span>
                            </div>
                        </td>
                        <td class="px-4 py-4 text-center">
                            <span class="inline-flex items-center justify-center w-9 h-9 rounded-xl bg-green-50 text-green-700 text-sm font-black border border-green-100">
                                {{ $trx->qty_beli_isi }}
                            </span>
                        </td>
                        <td class="px-4 py-4 text-xs text-slate-500 font-mono">
                            Rp {{ number_format($trx->harga_satuan, 0, ',', '.') }}
                        </td>
                        <td class="px-4 py-4">
                            <span class="text-sm font-black text-slate-800 font-mono">
                                Rp {{ number_format($trx->total_harga, 0, ',', '.') }}
                            </span>
                        </td>
                        <td class="px-4 py-4">
                            <span class="inline-flex items-center gap-1.5 text-[11px] font-bold px-2.5 py-1 rounded-full {{ $metodeBadge }}">
                                <i data-lucide="{{ $metodeIcon }}" class="w-3 h-3"></i>
                                {{ $trx->metode_bayar ?? '—' }}
                            </span>
                            @if($trx->metode_bayar === 'Qris' && $trx->bukti_bayar)
                                <br>
                                <a href="{{ route('bukti-bayar', ['filename' => basename($trx->bukti_bayar)]) }}" target="_blank" class="inline-flex items-center gap-0.5 mt-1 text-[9px] font-bold text-purple-600 hover:text-purple-800 hover:underline">
                                    <i data-lucide="image" class="w-2.5 h-2.5"></i> Bukti
                                </a>
                            @endif
                        </td>
                        <td class="px-4 py-4 text-center">
                            <span class="inline-flex items-center gap-1 bg-green-100 text-green-700 text-[10px] font-bold px-2 py-0.5 rounded-md border border-green-200">
                                <i data-lucide="check-circle" class="w-3 h-3"></i>
                                SELESAI
                            </span>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="9" class="px-6 py-16 text-center">
                            <div class="flex flex-col items-center gap-3 text-slate-400">
                                <div class="w-16 h-16 rounded-full bg-slate-50 flex items-center justify-center">
                                    <i data-lucide="inbox" class="w-8 h-8 opacity-40"></i>
                                </div>
                                <p class="font-semibold text-slate-500">Tidak ada transaksi ditemukan</p>
                                <p class="text-xs max-w-xs">
                                    @if(request('search') || request('metode'))
                                        Coba ubah kata kunci atau hapus filter yang aktif.
                                    @else
                                        Belum ada riwayat transaksi. Mulai dari halaman Penjualan.
                                    @endif
                                </p>
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>

        {{-- Pagination Desktop --}}
        @if($riwayat->hasPages())
        <div class="px-6 py-4 border-t border-slate-100 flex items-center justify-between flex-wrap gap-3">
            <span class="text-xs text-slate-400 font-medium">
                Menampilkan {{ $riwayat->firstItem() }}–{{ $riwayat->lastItem() }} dari {{ $riwayat->total() }} data
            </span>
            <div class="flex items-center gap-1">
                {{-- Prev --}}
                @if($riwayat->onFirstPage())
                    <span class="page-btn disabled text-slate-300">
                        <i data-lucide="chevron-left" class="w-4 h-4"></i>
                    </span>
                @else
                    <a href="{{ $riwayat->previousPageUrl() }}" class="page-btn text-slate-500">
                        <i data-lucide="chevron-left" class="w-4 h-4"></i>
                    </a>
                @endif

                {{-- Page Numbers --}}
                @foreach($riwayat->getUrlRange(max(1,$riwayat->currentPage()-2), min($riwayat->lastPage(),$riwayat->currentPage()+2)) as $page => $url)
                    @if($page == $riwayat->currentPage())
                        <span class="page-btn active">{{ $page }}</span>
                    @else
                        <a href="{{ $url }}" class="page-btn text-slate-500">{{ $page }}</a>
                    @endif
                @endforeach

                {{-- Next --}}
                @if($riwayat->hasMorePages())
                    <a href="{{ $riwayat->nextPageUrl() }}" class="page-btn text-slate-500">
                        <i data-lucide="chevron-right" class="w-4 h-4"></i>
                    </a>
                @else
                    <span class="page-btn disabled text-slate-300">
                        <i data-lucide="chevron-right" class="w-4 h-4"></i>
                    </span>
                @endif
            </div>
        </div>
        @endif
    </div>

    {{-- ===== CARD LIST MOBILE ===== --}}
    <div class="md:hidden space-y-3">
        @forelse($riwayat as $trx)
            @php
                                                $dest = !empty($trx->pelanggan?->titik_koordinat) ? $trx->pelanggan->titik_koordinat : ($trx->pelanggan?->address ?? '');
                                                $metodeBadge = match(strtolower($trx->metode_bayar ?? '')) {
                                                    'tunai'    => 'badge-tunai',
                                                    'transfer' => 'badge-transfer',
                                                    'qris'     => 'badge-qris',
                                                    default    => 'bg-slate-50 text-slate-500 border border-slate-100',
                                                };
                                                $metodeIcon = match(strtolower($trx->metode_bayar ?? '')) {
                                                    'tunai'    => 'banknote',
                                                    'transfer' => 'building-2',
                                                    'qris'     => 'qr-code',
                                                    default    => 'circle-help',
                                                };
                                            @endphp
                                            <div class="bg-white rounded-2xl border border-slate-100 soft-shadow card-hover overflow-hidden">
                                                {{-- Card Header --}}
                                                <div class="flex items-center justify-between px-4 pt-4 pb-3 border-b border-slate-50">
                                                    <div class="flex items-center gap-3">
                                                        <div class="w-9 h-9 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center text-white text-sm font-bold flex-shrink-0 shadow-sm">
                                                            {{ strtoupper(substr($trx->pelanggan?->name ?? 'U', 0, 1)) }}
                                                        </div>
                                                        <div>
                                                            <div class="text-sm font-bold text-slate-800">{{ $trx->pelanggan?->name ?? '—' }}</div>
                                                            <div class="text-[10px] text-slate-400 font-mono flex flex-col gap-0.5">
                                                                <span class="flex items-center gap-1">
                                                                    @if(!empty($dest))
                                                                        <a href="https://www.google.com/maps/dir/?api=1&destination={{ urlencode($dest) }}" 
                                                                           target="_blank" 
                                                                           class="text-blue-600 hover:text-blue-800 hover:underline flex items-center gap-1 transition-colors"
                                                                           title="Petunjuk Arah (Navigasi)">
                                                                            <i data-lucide="navigation" class="w-2.5 h-2.5"></i>
                                                                            <span>{{ $trx->pelanggan->address }}</span>
                                                                        </a>
                                                                    @else
                                                                        <i data-lucide="map-pin" class="w-2.5 h-2.5"></i> {{ $trx->pelanggan?->address ?? '-' }}
                                                                    @endif
                                                                </span>
                                <span class="flex items-center gap-1">
                                    <span class="px-1.5 py-0.5 rounded-md border {{ $trx->id_kurir ? 'bg-indigo-50 text-indigo-600 border-indigo-100' : 'bg-amber-50 text-amber-600 border-amber-100' }} text-[8px] font-black uppercase">
                                        {{ $trx->id_kurir ? 'Antar' : 'Jual' }}
                                    </span>
                                    &bull; {{ $trx->customers_id }}
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-col items-end">
                        <span class="inline-flex items-center gap-1 text-[11px] font-bold px-2.5 py-1 rounded-full {{ $metodeBadge }}">
                            <i data-lucide="{{ $metodeIcon }}" class="w-3 h-3"></i>
                            {{ $trx->metode_bayar ?? '—' }}
                        </span>
                        @if($trx->metode_bayar === 'Qris' && $trx->bukti_bayar)
                            <a href="{{ route('bukti-bayar', ['filename' => basename($trx->bukti_bayar)]) }}" target="_blank" class="inline-flex items-center gap-0.5 mt-1 text-[9px] font-bold text-purple-600 hover:text-purple-800 hover:underline">
                                <i data-lucide="image" class="w-2.5 h-2.5"></i> Bukti
                            </a>
                        @endif
                    </div>
                </div>

                {{-- Card Body --}}
                <div class="px-4 py-3 space-y-2.5">
                    {{-- Produk + Qty --}}
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-2">
                            <i data-lucide="package-2" class="w-4 h-4 text-slate-400 flex-shrink-0"></i>
                            <span class="text-sm font-semibold text-slate-700">{{ $trx->produk?->nama_produk ?? $trx->id_produk }}</span>
                        </div>
                        <div class="flex items-center gap-1 bg-green-50 border border-green-100 text-green-700 text-xs font-black px-2.5 py-1 rounded-lg">
                            <i data-lucide="package" class="w-3 h-3"></i>
                            {{ $trx->qty_beli_isi }} tabung
                        </div>
                    </div>

                    {{-- Harga Satuan --}}
                    <div class="flex items-center justify-between text-xs">
                        <span class="text-slate-400 font-medium">Harga Satuan</span>
                        <span class="font-semibold text-slate-600 font-mono">Rp {{ number_format($trx->harga_satuan, 0, ',', '.') }}</span>
                    </div>

                    {{-- Tanggal --}}
                    <div class="flex items-center justify-between text-xs">
                        <span class="text-slate-400 font-medium">Waktu Transaksi</span>
                        <span class="font-semibold text-slate-600 flex items-center gap-1 text-right">
                            <i data-lucide="calendar" class="w-3 h-3 text-slate-400"></i>
                            {{ $trx->tanggal_transaksi
                                ? \Carbon\Carbon::parse($trx->tanggal_transaksi)->timezone('Asia/Jakarta')->translatedFormat('d M Y')
                                : \Carbon\Carbon::parse($trx->created_at)->timezone('Asia/Jakarta')->translatedFormat('d M Y') }}
                            &bull; {{ \Carbon\Carbon::parse($trx->created_at)->timezone('Asia/Jakarta')->format('H:i') }} WIB
                        </span>
                    </div>
                </div>

                {{-- Card Footer --}}
                <div class="px-4 py-3 bg-slate-50 border-t border-slate-100 flex items-center justify-between rounded-b-2xl">
                    <span class="text-xs text-slate-400 font-medium">Total Tagihan</span>
                    <div class="flex items-center gap-3">
                        <span class="text-base font-black text-blue-600 font-mono">
                            Rp {{ number_format($trx->total_harga, 0, ',', '.') }}
                        </span>
                        <span class="bg-green-100 text-green-700 text-[9px] font-bold px-1.5 py-0.5 rounded border border-green-200 uppercase">
                            Selesai
                        </span>
                    </div>
                </div>
            </div>
        @empty
            <div class="bg-white rounded-2xl border border-slate-100 soft-shadow p-12 text-center">
                <div class="w-16 h-16 rounded-full bg-slate-50 flex items-center justify-center mx-auto mb-4">
                    <i data-lucide="inbox" class="w-8 h-8 text-slate-300"></i>
                </div>
                <p class="font-semibold text-slate-500 mb-1">Tidak ada transaksi</p>
                <p class="text-xs text-slate-400">
                    @if(request('search') || request('metode'))
                        Coba ubah kata kunci pencarian.
                    @else
                        Belum ada riwayat transaksi.
                    @endif
                </p>
            </div>
        @endforelse

        {{-- Pagination Mobile --}}
        @if($riwayat->hasPages())
        <div class="flex items-center justify-between pt-2 pb-4">
            @if($riwayat->onFirstPage())
                <span class="inline-flex items-center gap-1.5 px-4 py-2.5 rounded-xl bg-slate-100 text-slate-300 text-sm font-semibold cursor-not-allowed">
                    <i data-lucide="chevron-left" class="w-4 h-4"></i> Sebelumnya
                </span>
            @else
                <a href="{{ $riwayat->previousPageUrl() }}"
                   class="inline-flex items-center gap-1.5 px-4 py-2.5 rounded-xl bg-white border border-slate-200 text-slate-600 text-sm font-semibold hover:bg-slate-50 transition-all soft-shadow">
                    <i data-lucide="chevron-left" class="w-4 h-4"></i> Sebelumnya
                </a>
            @endif

            <span class="text-xs text-slate-400 font-semibold px-3">
                {{ $riwayat->currentPage() }} / {{ $riwayat->lastPage() }}
            </span>

            @if($riwayat->hasMorePages())
                <a href="{{ $riwayat->nextPageUrl() }}"
                   class="inline-flex items-center gap-1.5 px-4 py-2.5 rounded-xl bg-blue-600 text-white text-sm font-semibold hover:bg-blue-700 transition-all shadow-[0_4px_12px_-2px_rgba(37,99,235,.4)]">
                    Berikutnya <i data-lucide="chevron-right" class="w-4 h-4"></i>
                </a>
            @else
                <span class="inline-flex items-center gap-1.5 px-4 py-2.5 rounded-xl bg-slate-100 text-slate-300 text-sm font-semibold cursor-not-allowed">
                    Berikutnya <i data-lucide="chevron-right" class="w-4 h-4"></i>
                </span>
            @endif
        </div>
        @endif
    </div>

</div>


@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    if (typeof lucide !== 'undefined') lucide.createIcons();

    // Enter di search input → submit form
    const searchInput = document.getElementById('searchInput');
    if (searchInput) {
        searchInput.addEventListener('keydown', function (e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                document.getElementById('filterForm').submit();
            }
        });
    }
});
</script>
@endpush