@extends('layouts.dashboard')

@section('title', __('messages.reports'))
@section('header', __('messages.reports'))

@section('sidebar')
<a href="{{ route('accountant.dashboard') }}" class="block px-3 py-2 rounded-md hover:bg-gray-700">
    {{ __('messages.dashboard') }}
</a>
<a href="{{ route('accountant.payments.index') }}" class="block px-3 py-2 rounded-md hover:bg-gray-700">
    {{ __('messages.payments') }}
</a>
<a href="{{ route('accountant.reports') }}" class="block px-3 py-2 rounded-md bg-gray-700 text-white">
    {{ __('messages.reports') }}
</a>
<a href="{{ route('accountant.settings') }}" class="block px-3 py-2 rounded-md hover:bg-gray-700">
    {{ __('messages.settings') }}
</a>
@endsection

@section('content')
<!-- Date Filter -->
<div class="bg-white rounded-lg shadow mb-6">
    <div class="p-6">
        <form method="GET" action="{{ route('accountant.reports') }}" class="flex flex-wrap gap-4 items-end">
            <div>
                <label for="date_from" class="block text-sm font-medium text-gray-700 mb-2">
                    {{ __('messages.date_from') }}
                </label>
                <input type="date" 
                       name="date_from" 
                       id="date_from" 
                       value="{{ $dateFrom }}"
                       class="px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
            </div>
            <div>
                <label for="date_to" class="block text-sm font-medium text-gray-700 mb-2">
                    {{ __('messages.date_to') }}
                </label>
                <input type="date" 
                       name="date_to" 
                       id="date_to" 
                       value="{{ $dateTo }}"
                       class="px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
            </div>
            <div>
                <button type="submit" 
                        class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
                    {{ __('messages.filter') }}
                </button>
            </div>
            <div>
                <a href="{{ route('accountant.reports') }}" 
                   class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300">
                    {{ __('messages.reset') }}
                </a>
            </div>
        </form>
    </div>
</div>

<!-- Statistics Cards -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
    <div class="bg-white rounded-lg shadow p-6">
        <h3 class="text-gray-500 text-sm font-medium mb-2">{{ __('messages.total_revenue') }}</h3>
        <p class="text-3xl font-bold text-gray-900">{{ number_format($totalRevenue ?? 0, 0) }} TZS</p>
    </div>
    <div class="bg-white rounded-lg shadow p-6">
        <h3 class="text-gray-500 text-sm font-medium mb-2">{{ __('messages.pending_payments') }}</h3>
        <p class="text-3xl font-bold text-yellow-600">{{ number_format($pendingPayments ?? 0, 0) }} TZS</p>
    </div>
    <div class="bg-white rounded-lg shadow p-6">
        <h3 class="text-gray-500 text-sm font-medium mb-2">{{ __('messages.overdue_payments') }}</h3>
        <p class="text-3xl font-bold text-red-600">{{ number_format($overduePayments ?? 0, 0) }} TZS</p>
    </div>
    <div class="bg-white rounded-lg shadow p-6">
        <h3 class="text-gray-500 text-sm font-medium mb-2">{{ __('messages.total_payments') }}</h3>
        <p class="text-3xl font-bold text-gray-900">{{ $paymentCount ?? 0 }}</p>
    </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
    <!-- Payments by Type -->
    <div class="bg-white rounded-lg shadow">
        <div class="p-6 border-b border-gray-200">
            <h3 class="text-lg font-semibold">{{ __('messages.payments_by_type') }}</h3>
        </div>
        <div class="p-6">
            @if(($paymentsByType ?? collect())->count() > 0)
            <div class="space-y-4">
                @foreach($paymentsByType as $item)
                <div>
                    <div class="flex justify-between mb-1">
                        <span class="text-sm font-medium text-gray-700">{{ ucfirst($item->type) }}</span>
                        <span class="text-sm font-semibold text-gray-900">{{ number_format($item->total, 0) }} TZS</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div class="bg-blue-600 h-2 rounded-full" 
                             style="width: {{ ($item->total / ($totalRevenue ?: 1)) * 100 }}%"></div>
                    </div>
                </div>
                @endforeach
            </div>
            @else
            <p class="text-sm text-gray-500">{{ __('messages.no_data') }}</p>
            @endif
        </div>
    </div>

    <!-- Payments by Method -->
    <div class="bg-white rounded-lg shadow">
        <div class="p-6 border-b border-gray-200">
            <h3 class="text-lg font-semibold">{{ __('messages.payments_by_method') }}</h3>
        </div>
        <div class="p-6">
            @if(($paymentsByMethod ?? collect())->count() > 0)
            <div class="space-y-4">
                @foreach($paymentsByMethod as $item)
                <div>
                    <div class="flex justify-between mb-1">
                        <span class="text-sm font-medium text-gray-700">{{ ucfirst(str_replace('_', ' ', $item->payment_method)) }}</span>
                        <span class="text-sm font-semibold text-gray-900">{{ number_format($item->total, 0) }} TZS</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div class="bg-green-600 h-2 rounded-full" 
                             style="width: {{ ($item->total / ($totalRevenue ?: 1)) * 100 }}%"></div>
                    </div>
                </div>
                @endforeach
            </div>
            @else
            <p class="text-sm text-gray-500">{{ __('messages.no_data') }}</p>
            @endif
        </div>
    </div>
</div>

<!-- Monthly Revenue Trend -->
@if(isset($monthlyRevenue) && count($monthlyRevenue) > 0)
<div class="bg-white rounded-lg shadow mb-8">
    <div class="p-6 border-b border-gray-200">
        <h3 class="text-lg font-semibold">{{ __('messages.monthly_revenue_trend') }}</h3>
    </div>
    <div class="p-6">
        <div class="space-y-4">
            @foreach($monthlyRevenue as $month)
            <div>
                <div class="flex justify-between mb-1">
                    <span class="text-sm font-medium text-gray-700">{{ $month['month'] }}</span>
                    <span class="text-sm font-semibold text-gray-900">{{ number_format($month['revenue'], 0) }} TZS</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-3">
                    @php
                        $maxRevenue = collect($monthlyRevenue)->max('revenue');
                        $percentage = $maxRevenue > 0 ? ($month['revenue'] / $maxRevenue) * 100 : 0;
                    @endphp
                    <div class="bg-blue-600 h-3 rounded-full" style="width: {{ $percentage }}%"></div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>
@endif

<!-- Top Tenants -->
@if(isset($topTenants) && $topTenants->count() > 0)
<div class="bg-white rounded-lg shadow mb-8">
    <div class="p-6 border-b border-gray-200">
        <h3 class="text-lg font-semibold">{{ __('messages.top_tenants_by_payment') }}</h3>
    </div>
    <div class="p-6">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{ __('messages.tenant') }}</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{ __('messages.total_paid') }}</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @foreach($topTenants as $item)
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                            {{ $item->tenant->full_name ?? 'N/A' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">
                            {{ number_format($item->total, 0) }} TZS
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endif

<!-- Recent Payments -->
@if(isset($recentPayments) && $recentPayments->count() > 0)
<div class="bg-white rounded-lg shadow">
    <div class="p-6 border-b border-gray-200">
        <h3 class="text-lg font-semibold">{{ __('messages.recent_payments') }}</h3>
    </div>
    <div class="p-6">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{ __('messages.payment_number') }}</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{ __('messages.date') }}</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{ __('messages.tenant') }}</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{ __('messages.amount') }}</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{ __('messages.status') }}</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @foreach($recentPayments as $payment)
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $payment->payment_number }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $payment->payment_date->format('M d, Y') }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $payment->tenant->full_name ?? 'N/A' }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">{{ number_format($payment->amount, 0) }} {{ $payment->currency }}</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                {{ $payment->status === 'completed' ? 'bg-green-100 text-green-800' : 
                                   ($payment->status === 'pending' ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800') }}">
                                {{ ucfirst($payment->status) }}
                            </span>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endif
@endsection