@extends('layouts.app')

@section('title', 'Manajemen Transaksi - KunciLink')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-800">Manajemen Transaksi</h1>
        @if(auth()->user()->isAdmin())
        <a href="{{ route('admin.transactions.export') }}?format=csv" class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition duration-300">
            Export CSV
        </a>
        @endif
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-6">
        <div class="bg-white rounded-lg shadow p-4">
            <div class="text-gray-500 text-sm">Total</div>
            <div class="text-2xl font-bold">{{ number_format($stats['total']) }}</div>
        </div>
        <div class="bg-white rounded-lg shadow p-4">
            <div class="text-gray-500 text-sm">Pending</div>
            <div class="text-2xl font-bold text-yellow-600">{{ number_format($stats['pending']) }}</div>
        </div>
        <div class="bg-white rounded-lg shadow p-4">
            <div class="text-gray-500 text-sm">Sukses</div>
            <div class="text-2xl font-bold text-green-600">{{ number_format($stats['settlement']) }}</div>
        </div>
        <div class="bg-white rounded-lg shadow p-4">
            <div class="text-gray-500 text-sm">Kadaluarsa</div>
            <div class="text-2xl font-bold text-red-600">{{ number_format($stats['expired']) }}</div>
        </div>
        <div class="bg-white rounded-lg shadow p-4">
            <div class="text-gray-500 text-sm">Gagal</div>
            <div class="text-2xl font-bold text-red-600">{{ number_format($stats['failed']) }}</div>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-lg shadow p-4 mb-6">
        <form method="GET" action="{{ route('admin.transactions.manage') }}" class="grid grid-cols-1 md:grid-cols-6 gap-4">
            <div>
                <label for="status" class="block text-sm font-medium text-gray-700">Status</label>
                <select name="status" id="status" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                    <option value="">Semua Status</option>
                    <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="settlement" {{ request('status') == 'settlement' ? 'selected' : '' }}>Sukses</option>
                    <option value="expired" {{ request('status') == 'expired' ? 'selected' : '' }}>Kadaluarsa</option>
                    <option value="failed" {{ request('status') == 'failed' ? 'selected' : '' }}>Gagal</option>
                </select>
            </div>
            
            <div>
                <label for="date_from" class="block text-sm font-medium text-gray-700">Dari Tanggal</label>
                <input type="date" name="date_from" id="date_from" value="{{ request('date_from') }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
            </div>
            
            <div>
                <label for="date_to" class="block text-sm font-medium text-gray-700">Sampai Tanggal</label>
                <input type="date" name="date_to" id="date_to" value="{{ request('date_to') }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
            </div>
            
            <!-- Transaction type filter for both admin and non-admin users -->
            <div>
                <label for="type" class="block text-sm font-medium text-gray-700">Tipe Transaksi</label>
                <select name="type" id="type" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                    <option value="">Semua Tipe</option>
                    <option value="buy" {{ request('type') == 'buy' ? 'selected' : '' }}>Pembelian</option>
                    <option value="sell" {{ request('type') == 'sell' ? 'selected' : '' }}>Penjualan</option>
                </select>
            </div>
            
            <div>
                <label for="per_page" class="block text-sm font-medium text-gray-700">Items per Halaman</label>
                <select name="per_page" id="per_page" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                    <option value="10" {{ request('per_page') == '10' ? 'selected' : '' }}>10</option>
                    <option value="20" {{ request('per_page', 20) == '20' ? 'selected' : '' }}>20</option>
                    <option value="50" {{ request('per_page') == '50' ? 'selected' : '' }}>50</option>
                    <option value="100" {{ request('per_page') == '100' ? 'selected' : '' }}>100</option>
                </select>
            </div>
            
            <div class="flex items-end">
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition duration-300 mr-2">
                    Filter
                </button>
                <a href="{{ route('admin.transactions.manage') }}" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition duration-300">
                    Reset
                </a>
            </div>
        </form>
    </div>

    <!-- Transactions Table -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            <a href="{{ request()->fullUrlWithQuery(['sort_by' => 'order_id', 'sort_order' => request('sort_by') == 'order_id' && request('sort_order') == 'asc' ? 'desc' : 'asc']) }}" class="text-gray-500 hover:text-gray-700 flex items-center">
                                ID Transaksi
                                @if(request('sort_by') == 'order_id')
                                    @if(request('sort_order') == 'asc')
                                        <i class="fas fa-arrow-up ml-1"></i>
                                    @else
                                        <i class="fas fa-arrow-down ml-1"></i>
                                    @endif
                                @else
                                    <i class="fas fa-sort ml-1 text-gray-400"></i>
                                @endif
                            </a>
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            <a href="{{ request()->fullUrlWithQuery(['sort_by' => 'shortlink_id', 'sort_order' => request('sort_by') == 'shortlink_id' && request('sort_order') == 'asc' ? 'desc' : 'asc']) }}" class="text-gray-500 hover:text-gray-700 flex items-center">
                                Shortlink
                                @if(request('sort_by') == 'shortlink_id')
                                    @if(request('sort_order') == 'asc')
                                        <i class="fas fa-arrow-up ml-1"></i>
                                    @else
                                        <i class="fas fa-arrow-down ml-1"></i>
                                    @endif
                                @else
                                    <i class="fas fa-sort ml-1 text-gray-400"></i>
                                @endif
                            </a>
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            <a href="{{ request()->fullUrlWithQuery(['sort_by' => 'buyer_id', 'sort_order' => request('sort_by') == 'buyer_id' && request('sort_order') == 'asc' ? 'desc' : 'asc']) }}" class="text-gray-500 hover:text-gray-700 flex items-center">
                                Pembeli
                                @if(request('sort_by') == 'buyer_id')
                                    @if(request('sort_order') == 'asc')
                                        <i class="fas fa-arrow-up ml-1"></i>
                                    @else
                                        <i class="fas fa-arrow-down ml-1"></i>
                                    @endif
                                @else
                                    <i class="fas fa-sort ml-1 text-gray-400"></i>
                                @endif
                            </a>
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            <a href="{{ request()->fullUrlWithQuery(['sort_by' => 'seller_id', 'sort_order' => request('sort_by') == 'seller_id' && request('sort_order') == 'asc' ? 'desc' : 'asc']) }}" class="text-gray-500 hover:text-gray-700 flex items-center">
                                Penjual
                                @if(request('sort_by') == 'seller_id')
                                    @if(request('sort_order') == 'asc')
                                        <i class="fas fa-arrow-up ml-1"></i>
                                    @else
                                        <i class="fas fa-arrow-down ml-1"></i>
                                    @endif
                                @else
                                    <i class="fas fa-sort ml-1 text-gray-400"></i>
                                @endif
                            </a>
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            <a href="{{ request()->fullUrlWithQuery(['sort_by' => 'amount', 'sort_order' => request('sort_by') == 'amount' && request('sort_order') == 'asc' ? 'desc' : 'asc']) }}" class="text-gray-500 hover:text-gray-700 flex items-center">
                                Jumlah
                                @if(request('sort_by') == 'amount')
                                    @if(request('sort_order') == 'asc')
                                        <i class="fas fa-arrow-up ml-1"></i>
                                    @else
                                        <i class="fas fa-arrow-down ml-1"></i>
                                    @endif
                                @else
                                    <i class="fas fa-sort ml-1 text-gray-400"></i>
                                @endif
                            </a>
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            <a href="{{ request()->fullUrlWithQuery(['sort_by' => 'status', 'sort_order' => request('sort_by') == 'status' && request('sort_order') == 'asc' ? 'desc' : 'asc']) }}" class="text-gray-500 hover:text-gray-700 flex items-center">
                                Status
                                @if(request('sort_by') == 'status')
                                    @if(request('sort_order') == 'asc')
                                        <i class="fas fa-arrow-up ml-1"></i>
                                    @else
                                        <i class="fas fa-arrow-down ml-1"></i>
                                    @endif
                                @else
                                    <i class="fas fa-sort ml-1 text-gray-400"></i>
                                @endif
                            </a>
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            <a href="{{ request()->fullUrlWithQuery(['sort_by' => 'created_at', 'sort_order' => request('sort_by') == 'created_at' && request('sort_order') == 'asc' ? 'desc' : 'asc']) }}" class="text-gray-500 hover:text-gray-700 flex items-center">
                                Tanggal
                                @if(request('sort_by') == 'created_at')
                                    @if(request('sort_order') == 'asc')
                                        <i class="fas fa-arrow-up ml-1"></i>
                                    @else
                                        <i class="fas fa-arrow-down ml-1"></i>
                                    @endif
                                @else
                                    <i class="fas fa-sort ml-1 text-gray-400"></i>
                                @endif
                            </a>
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Aksi</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @forelse($transactions as $transaction)
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ $transaction->order_id }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            @if($transaction->shortlink)
                                <a href="{{ route('shortlink.handle', $transaction->shortlink->id) }}" class="text-blue-600 hover:underline" target="_blank">
                                    {{ $transaction->shortlink->custom_label ?? $transaction->shortlink->description ?? $transaction->shortlink->id }}
                                </a>
                            @else
                                <span class="text-gray-500">N/A</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            @if($transaction->buyer)
                                {{ $transaction->buyer->name }}
                            @else
                                <span class="text-gray-500">Tamu</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            @if($transaction->seller)
                                {{ $transaction->seller->name }}
                            @else
                                <span class="text-gray-500">N/A</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            Rp {{ number_format($transaction->amount, 0, ',', '.') }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                @if($transaction->status == 'settlement') bg-green-100 text-green-800
                                @elseif($transaction->status == 'pending') bg-yellow-100 text-yellow-800
                                @elseif($transaction->status == 'expired') bg-red-100 text-red-800
                                @else bg-gray-100 text-gray-800 @endif">
                                {{ ucfirst($transaction->status) }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ $transaction->created_at->format('d M Y H:i') }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <a href="{{ route('admin.transactions.show', $transaction) }}" class="text-blue-600 hover:text-blue-900">
                                Detail
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="px-6 py-4 text-center text-sm text-gray-500">
                            Tidak ada transaksi yang ditemukan.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        @if($transactions->hasPages())
        <div class="bg-white px-4 py-3 border-t border-gray-200 sm:px-6">
            <div class="flex items-center justify-between">
                <div class="text-sm text-gray-700">
                    Menampilkan {{ $transactions->firstItem() }} sampai {{ $transactions->lastItem() }} dari {{ $transactions->total() }} hasil
                </div>
                <div>
                    {{ $transactions->links() }}
                </div>
            </div>
        </div>
        @endif
    </div>
</div>
@endsection