@extends('layouts.portal')

@section('title', 'Financial Report')
@section('page_title', 'Financial Report')
@section('page_subtitle', 'Detailed financial analysis by will')

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

@section('content')
<div class="max-w-7xl mx-auto px-6 py-8">
    <!-- Header -->
    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Financial Report</h1>
            <p class="text-gray-600 mt-1">Total Documents (Wills & Trusts): {{ $documents->total() }}</p>
        </div>
        <div class="flex gap-3">
            <a href="{{ route('admin.reports.master.index') }}" class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors">
                <i class="fas fa-arrow-left mr-2"></i>Back
            </a>
        </div>
    </div>

    <!-- Filter Section -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <form method="GET" action="{{ route('admin.reports.master.financial') }}" class="grid grid-cols-1 md:grid-cols-6 gap-4 items-end">
            <!-- Search Input -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Search by Name/Email/Agent</label>
                <input 
                    type="text" 
                    name="search" 
                    value="{{ $search }}"
                    placeholder="Client name, email, or agent..." 
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                >
            </div>

            <!-- Month Filter -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Month</label>
                <select name="month" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">All Months</option>
                    @for($m = 1; $m <= 12; $m++)
                        <option value="{{ $m }}" {{ $month == $m ? 'selected' : '' }}>
                            {{ \Carbon\Carbon::createFromFormat('m', $m)->format('F') }}
                        </option>
                    @endfor
                </select>
            </div>

            <!-- Year Filter -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Year</label>
                <select name="year" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    @foreach($years as $y)
                        <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>{{ $y }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Filter Button -->
            <button type="submit" class="px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm h-10">
                <i class="fas fa-filter mr-1"></i>Filter
            </button>

            <!-- Reset Button -->
            <a href="{{ route('admin.reports.master.financial') }}" class="px-3 py-2 bg-gray-400 text-white rounded-lg hover:bg-gray-500 transition-colors text-center text-sm h-10 flex items-center justify-center">
                <i class="fas fa-redo mr-1"></i>Reset
            </a>

            <!-- Excel Export -->
            <a href="{{ route('admin.reports.master.financial.export.excel', ['search' => $search, 'month' => $month, 'year' => $year]) }}" 
               class="px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-center text-sm h-10 flex items-center justify-center"
               title="Export to Excel">
                <i class="fas fa-file-excel mr-1"></i>Excel
            </a>

            <!-- PDF Export -->
            <a href="{{ route('admin.reports.master.financial.export.pdf', ['search' => $search, 'month' => $month, 'year' => $year]) }}" 
               class="px-3 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-center text-sm h-10 flex items-center justify-center"
               title="Export to PDF">
                <i class="fas fa-file-pdf mr-1"></i>PDF
            </a>
        </form>
    </div>

    <!-- Summary Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg shadow-md p-6 border-l-4 border-blue-600">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-600 text-sm font-medium">Total Invoice</p>
                    <p class="text-3xl font-bold text-blue-600 mt-2">RM {{ number_format($stats['total_invoice'], 2) }}</p>
                </div>
                <div class="text-4xl text-blue-300"><i class="fas fa-file-invoice"></i></div>
            </div>
        </div>

        <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-lg shadow-md p-6 border-l-4 border-green-600">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-600 text-sm font-medium">Total Commission</p>
                    <p class="text-3xl font-bold text-green-600 mt-2">RM {{ number_format($stats['total_commission'], 2) }}</p>
                </div>
                <div class="text-4xl text-green-300"><i class="fas fa-percentage"></i></div>
            </div>
        </div>

        <div class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg shadow-md p-6 border-l-4 border-orange-600">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-600 text-sm font-medium">Total Payment</p>
                    <p class="text-3xl font-bold text-orange-600 mt-2">RM {{ number_format($stats['total_payment'], 2) }}</p>
                </div>
                <div class="text-4xl text-orange-300"><i class="fas fa-money-bill-wave"></i></div>
            </div>
        </div>

        <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg shadow-md p-6 border-l-4 border-purple-600">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-600 text-sm font-medium">Total Profit</p>
                    <p class="text-3xl font-bold text-purple-600 mt-2">RM {{ number_format($stats['total_all'], 2) }}</p>
                </div>
                <div class="text-4xl text-purple-300"><i class="fas fa-chart-line"></i></div>
            </div>
        </div>
    </div>

    <!-- Financial Details Table -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-xs">
                <thead>
                    <tr class="bg-gray-100 border-b-2 border-gray-300">
                        <th class="px-3 py-3 text-left font-semibold text-gray-700 whitespace-nowrap">Document ID</th>
                        <th class="px-3 py-3 text-left font-semibold text-gray-700 whitespace-nowrap">Type</th>
                        <th class="px-3 py-3 text-left font-semibold text-gray-700 whitespace-nowrap">Client Name</th>
                        <th class="px-3 py-3 text-left font-semibold text-gray-700 whitespace-nowrap">Created By</th>
                        <th class="px-3 py-3 text-center font-semibold text-gray-700 whitespace-nowrap">Role</th>
                        <th class="px-3 py-3 text-right font-semibold text-gray-700 whitespace-nowrap">Invoice (RM)</th>
                        <th class="px-3 py-3 text-center font-semibold text-gray-700 whitespace-nowrap">Invoice Status</th>
                        <th class="px-3 py-3 text-right font-semibold text-gray-700 whitespace-nowrap">L1 Commission (RM)</th>
                        <th class="px-3 py-3 text-right font-semibold text-gray-700 whitespace-nowrap">L2 Commission (RM)</th>
                        <th class="px-3 py-3 text-right font-semibold text-gray-700 whitespace-nowrap">L3 Commission (RM)</th>
                        <th class="px-3 py-3 text-right font-semibold text-gray-700 whitespace-nowrap">Lawyer Commission (RM)</th>
                        <th class="px-3 py-3 text-right font-semibold text-gray-700 whitespace-nowrap bg-red-50">Total Commission (RM)</th>
                        <th class="px-3 py-3 text-right font-semibold text-gray-700 whitespace-nowrap bg-green-50">Net Profit (RM)</th>
                        <th class="px-3 py-3 text-center font-semibold text-gray-700 whitespace-nowrap">Version</th>
                        <th class="px-3 py-3 text-center font-semibold text-gray-700 whitespace-nowrap">Version Changes</th>
                        <th class="px-3 py-3 text-center font-semibold text-gray-700 whitespace-nowrap">Payment Status</th>
                        <th class="px-3 py-3 text-right font-semibold text-gray-700 whitespace-nowrap">Payment (RM)</th>
                        <th class="px-3 py-3 text-left font-semibold text-gray-700 whitespace-nowrap">Payment Method</th>
                        <th class="px-3 py-3 text-right font-semibold text-gray-700 whitespace-nowrap">Tax (RM)</th>
                        <th class="px-3 py-3 text-center font-semibold text-gray-700 whitespace-nowrap">Tax Rate %</th>
                        <th class="px-3 py-3 text-right font-semibold text-gray-700 whitespace-nowrap">Discount (RM)</th>
                        <th class="px-3 py-3 text-center font-semibold text-gray-700 whitespace-nowrap">Discount %</th>
                        <th class="px-3 py-3 text-right font-semibold text-gray-700 whitespace-nowrap">Total Paid (RM)</th>
                        <th class="px-3 py-3 text-right font-semibold text-gray-700 whitespace-nowrap">Edit Request Amount (RM)</th>
                        <th class="px-3 py-3 text-right font-semibold text-gray-700 whitespace-nowrap">Total Profit (RM)</th>
                    </tr>
                </thead>
                <tbody class="divide-y">
                    @forelse($documents as $document)
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-3 py-3 font-mono text-xs text-gray-600">{{ $document['id'] }}</td>
                        <td class="px-3 py-3 font-semibold">
                            <span class="inline-block px-2 py-1 {{ $document['document_type'] === 'Will' ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800' }} rounded text-xs">
                                {{ $document['document_type'] }}
                            </span>
                        </td>
                        <td class="px-3 py-3 font-medium text-gray-900">{{ $document['client_name'] }}</td>
                        <td class="px-3 py-3 text-gray-600">{{ $document['created_by_name'] }}</td>
                        <td class="px-3 py-3 text-center">
                            @php
                                $roleClass = match($document['created_by_role']) {
                                    'Agent' => 'bg-blue-100 text-blue-800',
                                    'Lawyer' => 'bg-purple-100 text-purple-800',
                                    default => 'bg-gray-100 text-gray-800'
                                };
                            @endphp
                            <span class="inline-block px-2 py-1 {{ $roleClass }} rounded text-xs font-semibold">
                                {{ $document['created_by_role'] }}
                            </span>
                        </td>
                        <td class="px-3 py-3 text-right font-semibold text-gray-900">{{ number_format($document['invoice_amount'], 2) }}</td>
                        <td class="px-3 py-3 text-center">
                            <span class="inline-block px-2 py-1 {{ $document['invoice_status'] === 'paid' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }} rounded text-xs font-semibold">
                                {{ ucfirst($document['invoice_status']) }}
                            </span>
                        </td>
                        <td class="px-3 py-3 text-right font-semibold {{ $document['l1_commission'] > 0 ? 'text-red-600' : 'text-gray-600' }}">{{ number_format($document['l1_commission'], 2) }}</td>
                        <td class="px-3 py-3 text-right font-semibold {{ $document['l2_commission'] > 0 ? 'text-red-600' : 'text-gray-600' }}">{{ number_format($document['l2_commission'], 2) }}</td>
                        <td class="px-3 py-3 text-right font-semibold {{ $document['l3_commission'] > 0 ? 'text-red-600' : 'text-gray-600' }}">{{ number_format($document['l3_commission'], 2) }}</td>
                        <td class="px-3 py-3 text-right font-semibold {{ $document['lawyer_commission'] > 0 ? 'text-orange-600' : 'text-gray-600' }}">{{ number_format($document['lawyer_commission'], 2) }}</td>
                        <td class="px-3 py-3 text-right font-bold text-red-700 bg-red-50">{{ number_format($document['total_commission'], 2) }}</td>
                        <td class="px-3 py-3 text-right font-bold {{ $document['profit'] >= 0 ? 'text-green-600' : 'text-red-600' }} bg-green-50">{{ number_format($document['profit'], 2) }}</td>
                        <td class="px-3 py-3 text-center font-bold text-blue-600">v{{ $document['document_version'] }}</td>
                        <td class="px-3 py-3 text-center font-semibold text-orange-600">{{ $document['version_changes'] }}</td>
                        <td class="px-3 py-3 text-center">
                            <span class="inline-block px-2 py-1 {{ $document['payment_status'] === 'Completed' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }} rounded text-xs font-semibold">
                                {{ $document['payment_status'] }}
                            </span>
                        </td>
                        <td class="px-3 py-3 text-right font-semibold text-gray-900">{{ number_format($document['payment_amount'], 2) }}</td>
                        <td class="px-3 py-3 text-left text-gray-700 font-semibold">
                            <span class="inline-block px-2 py-1 bg-indigo-100 text-indigo-800 rounded text-xs">
                                {{ $document['payment_method'] }}
                            </span>
                        </td>
                        <td class="px-3 py-3 text-right font-semibold text-blue-600">{{ number_format($document['tax_amount'], 2) }}</td>
                        <td class="px-3 py-3 text-center text-gray-700 font-semibold">{{ number_format($document['tax_rate'], 2) }}%</td>
                        <td class="px-3 py-3 text-right font-semibold text-green-600">{{ number_format($document['discount_amount'], 2) }}</td>
                        <td class="px-3 py-3 text-center text-gray-700 font-semibold">{{ number_format($document['discount_rate'], 2) }}%</td>
                        <td class="px-3 py-3 text-right font-semibold text-orange-600">{{ number_format($document['total_paid_amount'], 2) }}</td>
                        <td class="px-3 py-3 text-right font-semibold text-blue-600">{{ number_format($document['edit_request_profit'], 2) }}</td>
                        <td class="px-3 py-3 text-right font-bold text-purple-600 bg-yellow-50">{{ number_format($document['total_profit'], 2) }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="25" class="px-6 py-12 text-center text-gray-500">
                            <i class="fas fa-inbox text-3xl mb-3 block opacity-50"></i>
                            No financial data found
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="bg-gray-50 border-t px-6 py-4">
            {{ $documents->appends(request()->query())->links() }}
        </div>
    </div>
</div>

<style>
    .sidebar-item.active a {
        background-color: rgba(59, 130, 246, 0.1);
        border-left: 3px solid #3b82f6;
        padding-left: calc(0.5rem - 3px);
    }
</style>
@endsection