@extends('layouts.portal')

@section('title', 'Commission Management')
@section('page_title', 'Commission Management')
@section('page_subtitle', 'Manage agent and lawyer commissions')

@section('sidebar')
    @include('admin.partials.sidebar', ['active' => 'finance-commissions'])
@endsection

@section('content')
<div class="max-w-6xl mx-auto">
    <!-- Welcome Banner -->
    <div class="bg-gradient-to-r from-red-900 via-red-800 to-red-900 rounded-xl p-8 text-white mb-4 shadow-xl animate-fade-in-up relative overflow-hidden min-h-[120px]">
        <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -mr-32 -mt-32"></div>
        <div class="absolute bottom-0 left-0 w-32 h-32 bg-white/10 rounded-full -ml-16 -mb-16"></div>
        
        <div class="relative z-10 flex items-center justify-between">
            <div>
                <h2 class="text-xl font-bold mb-2">Commission Management</h2>
                <p class="text-red-100 text-sm mb-3">Manage agent and lawyer commissions</p>
                <div class="flex items-center space-x-3">
                    <span class="inline-flex items-center px-3 py-2 rounded-full text-xs font-medium bg-white/20 backdrop-blur-sm">
                        <i class="fas fa-dollar-sign mr-2"></i>
                        Total Commission: RM{{ number_format($stats['total_commission'], 2) }}
                    </span>
                    <span class="inline-flex items-center px-3 py-2 rounded-full text-xs font-medium bg-green-400/30 backdrop-blur-sm">
                        <i class="fas fa-circle text-green-300 mr-2 text-xs"></i>
                        System Online
                    </span>
                </div>
            </div>
            <div class="hidden md:block">
                <div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                    <i class="fas fa-hand-holding-usd text-2xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <div class="bg-gradient-to-br from-blue-600 to-blue-700 rounded-lg p-6 text-white shadow-lg">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold">Total Commission</h3>
                <i class="fas fa-dollar-sign text-2xl opacity-80"></i>
            </div>
            <div class="text-3xl font-bold mb-1">RM{{ number_format($stats['total_commission'], 2) }}</div>
            <div class="text-sm opacity-90">All commissions</div>
        </div>
        
        <div class="bg-gradient-to-br from-green-600 to-green-700 rounded-lg p-6 text-white shadow-lg">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold">Paid</h3>
                <i class="fas fa-check-circle text-2xl opacity-80"></i>
            </div>
            <div class="text-3xl font-bold mb-1">RM{{ number_format($stats['paid_commission'], 2) }}</div>
            <div class="text-sm opacity-90">Completed payments</div>
        </div>
        
        <div class="bg-gradient-to-br from-yellow-600 to-orange-600 rounded-lg p-6 text-white shadow-lg">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold">Pending</h3>
                <i class="fas fa-clock text-2xl opacity-80"></i>
            </div>
            <div class="text-3xl font-bold mb-1">RM{{ number_format($stats['pending_commission'], 2) }}</div>
            <div class="text-sm opacity-90">Awaiting payment</div>
        </div>
        
        <div class="bg-gradient-to-br from-red-600 to-red-700 rounded-lg p-6 text-white shadow-lg">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold">Cancelled</h3>
                <i class="fas fa-times-circle text-2xl opacity-80"></i>
            </div>
            <div class="text-3xl font-bold mb-1">RM{{ number_format($stats['cancelled_commission'], 2) }}</div>
            <div class="text-sm opacity-90">Cancelled commissions</div>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
        <div class="bg-gradient-to-r from-red-800 to-red-900 text-white p-4">
            <h3 class="text-lg font-semibold">Filters</h3>
        </div>
        <div class="p-6">
            <form method="GET" action="{{ route('admin.finance.commissions') }}">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
                    <div>
                        <label for="start_date" class="block text-sm font-semibold text-gray-700 mb-2">Start Date</label>
                        <x-date-picker
                    name="start_date"
                    value="{{ $filters["
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
                />
                    </div>
                    <div>
                        <label for="end_date" class="block text-sm font-semibold text-gray-700 mb-2">End Date</label>
                        <x-date-picker
                    name="end_date"
                    value="{{ $filters["
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
                />
                    </div>
                    <div>
                        <label for="status" class="block text-sm font-semibold text-gray-700 mb-2">Status</label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500" id="status" name="status">
                            <option value="">All</option>
                            <option value="paid" {{ ($filters['status'] ?? '') == 'paid' ? 'selected' : '' }}>Paid</option>
                            <option value="pending" {{ ($filters['status'] ?? '') == 'pending' ? 'selected' : '' }}>Pending</option>
                            <option value="cancelled" {{ ($filters['status'] ?? '') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                        </select>
                    </div>
                    <div>
                        <label for="user_role" class="block text-sm font-semibold text-gray-700 mb-2">User Role</label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500" id="user_role" name="user_role">
                            <option value="">All Roles</option>
                            <option value="agent" {{ ($filters['user_role'] ?? '') == 'agent' ? 'selected' : '' }}>Agent</option>
                            <option value="lawyer" {{ ($filters['user_role'] ?? '') == 'lawyer' ? 'selected' : '' }}>Lawyer</option>
                        </select>
                    </div>
                    <div>
                        <label for="user_id" class="block text-sm font-semibold text-gray-700 mb-2">User</label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500" id="user_id" name="user_id">
                            <option value="">All Users</option>
                            @foreach($users as $user)
                            <option value="{{ $user->id }}" {{ ($filters['user_id'] ?? '') == $user->id ? 'selected' : '' }}>
                                {{ $user->first_name }} {{ $user->last_name }} ({{ ucfirst($user->role) }})
                            </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="flex items-center justify-between mt-4">
                    <div class="flex space-x-3">
                        <button type="submit" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors duration-200">
                            Apply Filters
                        </button>
                        <a href="{{ route('admin.finance.commissions') }}" class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors duration-200">
                            Clear
                        </a>
                    </div>
                    <button type="button" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors duration-200" onclick="exportCommissions()">
                        <i class="fas fa-download mr-2"></i> Export Excel
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Commissions Table -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
        <div class="bg-gradient-to-r from-red-800 to-red-900 text-white p-4">
            <h3 class="text-lg font-semibold">Commissions</h3>
        </div>
        <div class="p-6">
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b border-gray-200">
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">ID</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Date</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">User</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Role</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Client</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Will ID</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Amount</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Status</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Paid Date</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($commissions as $commission)
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-4 text-sm">{{ $commission->id }}</td>
                            <td class="py-3 px-4 text-sm">{{ $commission->created_at?->format('M d, Y') ?? 'N/A' }}</td>
                            <td class="py-3 px-4 text-sm">
                                @if($commission->user)
                                    {{ $commission->user->first_name }} {{ $commission->user->last_name }}
                                @else
                                    N/A
                                @endif
                            </td>
                            <td class="py-3 px-4 text-sm">
                                @if($commission->user)
                                    {{ ucfirst($commission->user->role) }}
                                @else
                                    N/A
                                @endif
                            </td>
                            <td class="py-3 px-4 text-sm">
                                @if($commission->client)
                                    {{ $commission->client->first_name }} {{ $commission->client->last_name }}
                                @else
                                    N/A
                                @endif
                            </td>
                            <td class="py-3 px-4 text-sm">
                                @if($commission->will)
                                    <a href="{{ route('admin.wills.show', $commission->will->id) }}" class="text-red-600 hover:text-red-800">#{{ $commission->will->id }}</a>
                                @else
                                    N/A
                                @endif
                            </td>
                            <td class="py-3 px-4 text-sm font-medium">RM{{ number_format($commission->amount, 2) }}</td>
                            <td class="py-3 px-4 text-sm">
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium 
                                    {{ $commission->status == 'paid' ? 'bg-green-100 text-green-800' : 
                                    ($commission->status == 'pending' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800') }}">
                                    {{ ucfirst($commission->status) }}
                                </span>
                            </td>
                            <td class="py-3 px-4 text-sm">{{ $commission->paid_at?->format('M d, Y') ?? 'N/A' }}</td>
                            <td class="py-3 px-4 text-sm">
                                <div class="flex space-x-2">
                                    @if($commission->status == 'pending')
                                    <button type="button" class="px-2 py-1 bg-green-600 text-white rounded hover:bg-green-700 transition-colors duration-200" onclick="markPaid({{ $commission->id }})">
                                        <i class="fas fa-check"></i>
                                    </button>
                                    <button type="button" class="px-2 py-1 bg-red-600 text-white rounded hover:bg-red-700 transition-colors duration-200" onclick="markCancelled({{ $commission->id }})">
                                        <i class="fas fa-times"></i>
                                    </button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            
            <!-- Pagination -->
            <div class="flex items-center justify-between mt-4">
                <div class="text-sm text-gray-700">
                    Showing {{ $commissions->firstItem() }} to {{ $commissions->lastItem() }} of {{ $commissions->total() }} entries
                </div>
                {{ $commissions->links() }}
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function exportCommissions() {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{{ route('admin.finance.export.commissions') }}';
        
        // Add CSRF token
        const csrf = document.createElement('input');
        csrf.type = 'hidden';
        csrf.name = '_token';
        csrf.value = '{{ csrf_token() }}';
        form.appendChild(csrf);
        
        // Add filters
        const filters = ['start_date', 'end_date', 'status', 'user_role', 'user_id'];
        filters.forEach(filter => {
            const element = document.getElementById(filter);
            if (element && element.value) {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = filter;
                input.value = element.value;
                form.appendChild(input);
            }
        });
        
        document.body.appendChild(form);
        form.submit();
        document.body.removeChild(form);
    }
    
    function viewCommission(id) {
        // Implement view commission modal
        alert('View commission details for ID: ' + id);
    }
    
    function markPaid(id) {
        if (confirm('Are you sure you want to mark this commission as paid?')) {
            window.location.href = '/admin/finance/commission/' + id + '/paid';
        }
    }
    
    function markCancelled(id) {
        if (confirm('Are you sure you want to cancel this commission?')) {
            window.location.href = '/admin/finance/commission/' + id + '/cancelled';
        }
    }
</script>
@endpush