@extends('distributor.layouts.app')

@section('title', 'PV Ledger')

@section('content')
<div class="container mx-auto px-4 py-8">
    <!-- Header -->
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">PV Ledger</h1>
            <p class="text-gray-600 mt-2">Track all your PV (Point Value) transactions</p>
        </div>
        
        <!-- Filters -->
        <div class="mt-4 md:mt-0">
            <form action="{{ route('distributor.pv-ledger') }}" method="GET" class="flex flex-wrap gap-4">
                <div>
                    <select name="type" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                        <option value="">All Types</option>
                        <option value="purchase" {{ request('type') == 'purchase' ? 'selected' : '' }}>Purchase</option>
                        <option value="matching_bonus" {{ request('type') == 'matching_bonus' ? 'selected' : '' }}>Matching Bonus</option>
                        <option value="generation_bonus" {{ request('type') == 'generation_bonus' ? 'selected' : '' }}>Generation Bonus</option>
                        <option value="sponsor_bonus" {{ request('type') == 'sponsor_bonus' ? 'selected' : '' }}>Sponsor Bonus</option>
                        <option value="rank_bonus" {{ request('type') == 'rank_bonus' ? 'selected' : '' }}>Rank Bonus</option>
                        <option value="weekly_flush" {{ request('type') == 'weekly_flush' ? 'selected' : '' }}>Weekly Flush</option>
                    </select>
                </div>
                
                <div>
                    <input type="date" name="date_from" value="{{ request('date_from') }}" 
                           class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                           placeholder="From Date">
                </div>
                
                <div>
                    <input type="date" name="date_to" value="{{ request('date_to') }}" 
                           class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                           placeholder="To Date">
                </div>
                
                <div>
                    <button type="submit" class="px-6 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-lg transition-colors">
                        Filter
                    </button>
                    <a href="{{ route('distributor.pv-ledger') }}" class="ml-2 px-6 py-2 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium rounded-lg transition-colors">
                        Clear
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="bg-gradient-to-r from-green-50 to-emerald-100 border border-green-200 rounded-2xl p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-green-600 font-medium mb-2">Total PV Credits</p>
                    <p class="text-3xl font-bold text-gray-900">{{ number_format($totalCredit, 2) }} PV</p>
                </div>
                <div class="bg-green-100 p-3 rounded-xl">
                    <i class="fas fa-arrow-up text-green-600 text-xl"></i>
                </div>
            </div>
        </div>
        
        <div class="bg-gradient-to-r from-red-50 to-pink-100 border border-red-200 rounded-2xl p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-red-600 font-medium mb-2">Total PV Debits</p>
                    <p class="text-3xl font-bold text-gray-900">{{ number_format($totalDebit, 2) }} PV</p>
                </div>
                <div class="bg-red-100 p-3 rounded-xl">
                    <i class="fas fa-arrow-down text-red-600 text-xl"></i>
                </div>
            </div>
        </div>
        
        <div class="bg-gradient-to-r from-blue-50 to-indigo-100 border border-blue-200 rounded-2xl p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-blue-600 font-medium mb-2">Net PV Balance</p>
                    <p class="text-3xl font-bold text-gray-900">{{ number_format($netPv, 2) }} PV</p>
                </div>
                <div class="bg-blue-100 p-3 rounded-xl">
                    <i class="fas fa-balance-scale text-blue-600 text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- PV Ledger Table -->
    <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="bg-gray-50">
                        <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date & Time</th>
                        <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
                        <th class="px6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
                        <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order</th>
                        <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">PV Amount</th>
                        <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Balance</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($pvEntries as $entry)
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900">{{ $entry->created_at->format('M d, Y') }}</div>
                            <div class="text-xs text-gray-500">{{ $entry->created_at->format('h:i A') }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full 
                                @if($entry->pv_type == 'purchase') bg-blue-100 text-blue-800
                                @elseif($entry->pv_type == 'matching_bonus') bg-green-100 text-green-800
                                @elseif($entry->pv_type == 'generation_bonus') bg-purple-100 text-purple-800
                                @elseif($entry->pv_type == 'sponsor_bonus') bg-yellow-100 text-yellow-800
                                @elseif($entry->pv_type == 'rank_bonus') bg-pink-100 text-pink-800
                                @elseif($entry->pv_type == 'weekly_flush') bg-red-100 text-red-800
                                @else bg-gray-100 text-gray-800 @endif">
                                {{ ucfirst(str_replace('_', ' ', $entry->pv_type)) }}
                            </span>
                        </td>
                        <td class="px-6 py-4">
                            <div class="text-sm text-gray-900">{{ $entry->description ?? 'N/A' }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            @if($entry->order)
                                <a href="{{ route('distributor.orders.show', $entry->order_id) }}" 
                                   class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">
                                    #{{ $entry->order->order_number }}
                                </a>
                            @else
                                <span class="text-gray-400 text-sm">-</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="text-sm font-medium {{ $entry->pv_amount >= 0 ? 'text-green-600' : 'text-red-600' }}">
                                {{ $entry->pv_amount >= 0 ? '+' : '' }}{{ number_format($entry->pv_amount, 2) }} PV
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            {{ number_format($entry->pv_amount, 2) }} PV
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="px-6 py-12 text-center">
                            <div class="text-gray-500">
                                <i class="fas fa-chart-line text-4xl mb-4 opacity-20"></i>
                                <p class="text-lg">No PV transactions found</p>
                                <p class="text-sm mt-2">Your PV ledger will appear here when you make transactions</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        @if($pvEntries->hasPages())
        <div class="px-6 py-4 border-t border-gray-200">
            {{ $pvEntries->withQueryString()->links() }}
        </div>
        @endif
    </div>

    <!-- Type Legend -->
    <div class="mt-8 bg-gray-50 rounded-2xl p-6 border border-gray-200">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">PV Type Legend</h3>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
            <div class="flex items-center">
                <span class="w-3 h-3 bg-blue-500 rounded-full mr-2"></span>
                <span class="text-sm text-gray-700">Purchase</span>
            </div>
            <div class="flex items-center">
                <span class="w-3 h-3 bg-green-500 rounded-full mr-2"></span>
                <span class="text-sm text-gray-700">Matching Bonus</span>
            </div>
            <div class="flex items-center">
                <span class="w-3 h-3 bg-purple-500 rounded-full mr-2"></span>
                <span class="text-sm text-gray-700">Generation Bonus</span>
            </div>
            <div class="flex items-center">
                <span class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></span>
                <span class="text-sm text-gray-700">Sponsor Bonus</span>
            </div>
            <div class="flex items-center">
                <span class="w-3 h-3 bg-pink-500 rounded-full mr-2"></span>
                <span class="text-sm text-gray-700">Rank Bonus</span>
            </div>
            <div class="flex items-center">
                <span class="w-3 h-3 bg-red-500 rounded-full mr-2"></span>
                <span class="text-sm text-gray-700">Weekly Flush</span>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    table {
        min-width: 1000px;
    }
    
    @media (min-width: 768px) {
        table {
            min-width: auto;
        }
    }
</style>
@endpush