@extends('layouts.portal')

@section('title', 'Reports')
@section('page_title', 'My Reports')
@section('page_subtitle', 'Comprehensive client and will performance data')

@section('sidebar')
    @include('agent.partials.sidebar', ['active' => 'reports'])
@endsection

@section('content')
<div class="max-w-7xl mx-auto">
    <!-- Header -->
    <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
        <div class="flex justify-between items-center mb-6">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">Performance Reports</h1>
                <p class="text-gray-600 mt-2">Detailed client, will, and commission tracking</p>
            </div>
            <div class="flex gap-3">
                <button onclick="window.print()" class="bg-gradient-to-r from-[#772B10] to-[#8B3D15] hover:from-[#8B3D15] hover:to-[#9F4F1A] text-white px-6 py-3 rounded-lg font-medium inline-flex items-center no-print">
                    <i class="fas fa-print mr-2"></i>
                    Print
                </button>
                <a href="{{ route('agent.reports.pdf') }}" class="bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white px-6 py-3 rounded-lg font-medium inline-flex items-center no-print">
                    <i class="fas fa-file-pdf mr-2"></i>
                    PDF
                </a>
                <a href="{{ route('agent.reports') }}?export=csv" class="bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white px-6 py-3 rounded-lg font-medium inline-flex items-center no-print">
                    <i class="fas fa-download mr-2"></i>
                    Export
                </a>
            </div>
        </div>

        <!-- Quick Stats: Clients, Wills, Completed -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
            <div class="bg-gradient-to-br from-[#772B10] to-[#8B3D15] rounded-lg p-4 text-white">
                <p class="text-white/80 text-sm font-medium">Total Clients</p>
                <h3 class="text-3xl font-bold mt-1">{{ $totalClients ?? 0 }}</h3>
            </div>

            <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg p-4 text-white">
                <p class="text-blue-100 text-sm font-medium">Total Wills</p>
                <h3 class="text-3xl font-bold mt-1">{{ $totalWills ?? 0 }}</h3>
            </div>

            <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-lg p-4 text-white">
                <p class="text-green-100 text-sm font-medium">Completed</p>
                <h3 class="text-3xl font-bold mt-1">{{ $completedWills ?? 0 }}</h3>
            </div>

            <div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg p-4 text-white">
                <p class="text-purple-100 text-sm font-medium">Completion Rate</p>
                <h3 class="text-3xl font-bold mt-1">
                    @if($totalWills > 0)
                        {{ round(($completedWills / $totalWills) * 100, 1) }}%
                    @else
                        0%
                    @endif
                </h3>
            </div>
        </div>

        <!-- Commission Summary: Total, Paid, Pending -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-lg p-4 text-white">
                <p class="text-indigo-100 text-sm font-medium">Total Commission</p>
                <h3 class="text-3xl font-bold mt-1">RM {{ number_format($totalCommission ?? 0, 2) }}</h3>
            </div>

            <div class="bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-lg p-4 text-white">
                <p class="text-emerald-100 text-sm font-medium">Commission Paid</p>
                <h3 class="text-3xl font-bold mt-1">RM {{ number_format($paidCommission ?? 0, 2) }}</h3>
            </div>

            <div class="bg-gradient-to-br from-amber-500 to-amber-600 rounded-lg p-4 text-white">
                <p class="text-amber-100 text-sm font-medium">Commission Pending</p>
                <h3 class="text-3xl font-bold mt-1">RM {{ number_format($pendingCommission ?? 0, 2) }}</h3>
            </div>
        </div>
    </div>

    <!-- Clean Filters Section -->
    <div class="bg-white rounded-xl shadow-lg p-6 mb-6 no-print">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-900">
                <i class="fas fa-filter text-[#772B10] mr-2"></i>Filter Results
            </h3>
            @if(request()->has('will_status') || request()->has('commission_status') || request()->has('month') || request()->has('year') || request()->has('search'))
                <a href="{{ route('agent.reports') }}" class="text-sm text-[#772B10] hover:text-[#8B3D15] font-medium">
                    <i class="fas fa-times mr-1"></i>Clear All
                </a>
            @endif
        </div>

        <form method="GET" class="space-y-4">
            <!-- First Row -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3">
                <!-- Will Status -->
                <div>
                    <label class="block text-xs font-semibold text-gray-700 mb-1.5">Will Status</label>
                    <select name="will_status" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-transparent text-sm">
                        <option value="">All Status</option>
                        <option value="draft" {{ request('will_status') === 'draft' ? 'selected' : '' }}>Draft</option>
                        <option value="pending" {{ request('will_status') === 'pending' ? 'selected' : '' }}>Pending</option>
                        <option value="completed" {{ request('will_status') === 'completed' ? 'selected' : '' }}>Completed</option>
                        <option value="approved" {{ request('will_status') === 'approved' ? 'selected' : '' }}>Approved</option>
                    </select>
                </div>

                <!-- Commission Status -->
                <div>
                    <label class="block text-xs font-semibold text-gray-700 mb-1.5">Commission</label>
                    <select name="commission_status" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-transparent text-sm">
                        <option value="">All Commission</option>
                        <option value="pending" {{ request('commission_status') === 'pending' ? 'selected' : '' }}>Pending</option>
                        <option value="paid" {{ request('commission_status') === 'paid' ? 'selected' : '' }}>Paid</option>
                    </select>
                </div>

                <!-- Month -->
                <div>
                    <label class="block text-xs font-semibold text-gray-700 mb-1.5">Month</label>
                    <input type="month" name="month" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-transparent text-sm" value="{{ request('month') }}">
                </div>

                <!-- Year -->
                <div>
                    <label class="block text-xs font-semibold text-gray-700 mb-1.5">Year</label>
                    <select name="year" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-transparent text-sm">
                        <option value="">All Years</option>
                        @for ($y = now()->year; $y >= now()->year - 5; $y--)
                            <option value="{{ $y }}" {{ request('year') == $y ? 'selected' : '' }}>{{ $y }}</option>
                        @endfor
                    </select>
                </div>

                <!-- Search -->
                <div>
                    <label class="block text-xs font-semibold text-gray-700 mb-1.5">Search</label>
                    <input type="text" name="search" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-transparent text-sm" placeholder="Name or email..." value="{{ request('search') }}">
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex gap-2 pt-2">
                <button type="submit" class="bg-[#772B10] hover:bg-[#5A1F0D] text-white px-6 py-2 rounded-lg font-medium text-sm transition inline-flex items-center">
                    <i class="fas fa-search mr-2"></i>Search
                </button>
            </div>
        </form>
    </div>

    <!-- Reports Table -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 border-b border-gray-200 sticky top-0">
                    <tr>
                        <th class="px-3 py-3 text-left font-semibold text-gray-900 text-xs">Client Name</th>
                        <th class="px-3 py-3 text-left font-semibold text-gray-900 text-xs">IC Number</th>
                        <th class="px-3 py-3 text-left font-semibold text-gray-900 text-xs">Email</th>
                        <th class="px-3 py-3 text-left font-semibold text-gray-900 text-xs">Phone</th>
                        <th class="px-3 py-3 text-left font-semibold text-gray-900 text-xs">Created At (Time)</th>
                        <th class="px-3 py-3 text-left font-semibold text-gray-900 text-xs">Will Status</th>
                        <th class="px-3 py-3 text-left font-semibold text-gray-900 text-xs">Will Version</th>
                        <th class="px-3 py-3 text-left font-semibold text-gray-900 text-xs">Written By</th>
                        <th class="px-3 py-3 text-left font-semibold text-gray-900 text-xs">Completed</th>
                        <th class="px-3 py-3 text-left font-semibold text-gray-900 text-xs">Approved</th>
                        <th class="px-3 py-3 text-left font-semibold text-gray-900 text-xs">Comm. Level</th>
                        <th class="px-3 py-3 text-right font-semibold text-gray-900 text-xs">Amount</th>
                        <th class="px-3 py-3 text-left font-semibold text-gray-900 text-xs">Status</th>
                        <th class="px-3 py-3 text-left font-semibold text-gray-900 text-xs">Paid At (Time)</th>
                        <th class="px-3 py-3 text-center font-semibold text-gray-900 text-xs">Action</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($reports as $report)
                        <tr class="hover:bg-gray-50 transition text-xs">
                            <td class="px-3 py-2 text-gray-900 font-medium">{{ $report['client_name'] ?? 'N/A' }}</td>
                            <td class="px-3 py-2 text-gray-600">{{ $report['ic_number'] ?? 'N/A' }}</td>
                            <td class="px-3 py-2 text-gray-600 truncate">{{ $report['email'] ?? 'N/A' }}</td>
                            <td class="px-3 py-2 text-gray-600">{{ $report['phone'] ?? 'N/A' }}</td>
                            <td class="px-3 py-2 text-gray-600 whitespace-nowrap">
                                @if($report['client_created_at'])
                                    {{ \Carbon\Carbon::parse($report['client_created_at'])->format('M d, Y') }}
                                @else
                                    N/A
                                @endif
                            </td>
                            <td class="px-3 py-2">
                                @if($report['will_status'])
                                    <span class="px-2 py-0.5 rounded text-xs font-semibold
                                        @if($report['will_status'] === 'draft') bg-gray-100 text-gray-800
                                        @elseif($report['will_status'] === 'pending') bg-yellow-100 text-yellow-800
                                        @elseif($report['will_status'] === 'completed') bg-blue-100 text-blue-800
                                        @elseif($report['will_status'] === 'approved') bg-green-100 text-green-800
                                        @else bg-gray-100 text-gray-800
                                        @endif
                                    ">
                                        {{ ucfirst($report['will_status']) }}
                                    </span>
                                @else
                                    <span class="text-gray-500">—</span>
                                @endif
                            </td>
                            <td class="px-3 py-2 text-center font-semibold">{{ $report['will_version'] }}</td>
                            <td class="px-3 py-2 text-gray-600 truncate">{{ $report['will_created_by'] ?? 'N/A' }}</td>
                            <td class="px-3 py-2 text-gray-600 whitespace-nowrap text-xs">
                                @if($report['will_completed_at'])
                                    {{ \Carbon\Carbon::parse($report['will_completed_at'])->format('M d, Y') }}
                                @else
                                    <span class="text-gray-400">—</span>
                                @endif
                            </td>
                            <td class="px-3 py-2 text-xs">
                                @if($report['admin_approved_at'])
                                    <span class="inline-flex items-center text-green-700 font-semibold">
                                        <i class="fas fa-check-circle mr-0.5"></i>
                                        {{ \Carbon\Carbon::parse($report['admin_approved_at'])->format('M d') }}
                                    </span>
                                @else
                                    <span class="text-yellow-600 font-semibold"><i class="fas fa-clock mr-0.5"></i>Await</span>
                                @endif
                            </td>
                            <td class="px-3 py-2 font-semibold text-center">
                                @if($report['commission_level'] !== 'N/A')
                                    <span class="bg-indigo-100 text-indigo-800 px-2 py-0.5 rounded text-xs">Level {{ $report['commission_level'] }}</span>
                                @else
                                    <span class="text-gray-500">—</span>
                                @endif
                            </td>
                            <td class="px-3 py-2 text-right font-semibold text-gray-900">
                                RM {{ number_format($report['commission_amount'] ?? 0, 2) }}
                            </td>
                            <td class="px-3 py-2">
                                @if($report['commission_amount'] > 0)
                                    <span class="px-2 py-0.5 rounded text-xs font-semibold
                                        @if($report['commission_status'] === 'paid') bg-green-100 text-green-800
                                        @else bg-yellow-100 text-yellow-800
                                        @endif
                                    ">
                                        {{ ucfirst($report['commission_status'] ?? 'pending') }}
                                    </span>
                                @else
                                    <span class="text-gray-500 text-xs">—</span>
                                @endif
                            </td>
                            <td class="px-3 py-2 text-gray-600 text-xs whitespace-nowrap">
                                @if($report['commission_paid_at'])
                                    {{ \Carbon\Carbon::parse($report['commission_paid_at'])->format('M d, Y') }}
                                @else
                                    <span class="text-gray-400">—</span>
                                @endif
                            </td>
                            <td class="px-3 py-2 text-center">
                                <a href="{{ route('agent.clients.show', $report['client_id']) }}" class="text-[#772B10] hover:text-[#8B3D15] font-medium text-xs hover:underline">
                                    View
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="15" class="px-6 py-12 text-center text-gray-500">
                                <i class="fas fa-inbox text-4xl mb-3 block opacity-50"></i>
                                <p class="font-medium">No reports found</p>
                                <p class="text-sm mt-1">Create your first client to get started</p>
                                <a href="{{ route('agent.clients.create') }}" class="text-[#772B10] hover:text-[#8B3D15] font-medium mt-3 inline-block text-sm">
                                    Create Client <i class="fas fa-arrow-right ml-1"></i>
                                </a>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        @if($reports instanceof \Illuminate\Pagination\LengthAwarePaginator && $reports->hasPages())
            <div class="px-6 py-4 border-t border-gray-200 bg-gray-50 no-print">
                {{ $reports->links() }}
            </div>
        @endif
    </div>

    <!-- Bottom Summary Stats -->
    <div class="mt-6 text-center text-gray-600 py-4">
        <p class="text-sm">End of Report</p>
    </div>
</div>

<style>
    @media print {
        .no-print {
            display: none !important;
        }
        table {
            page-break-inside: avoid;
        }
        tr {
            page-break-inside: avoid;
        }
    }
</style>
@endsection