{{-- Vermieter-Dashboard --}}
<div class="py-12">
    <div class="max-w-full mx-auto sm:px-6 lg:px-8">

        {{-- Statistik-Boxen --}}
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">

            @php
                $propertyCount = \App\Models\Property::where('user_id', auth()->id())->count();
                $unitCount = \App\Models\Unit::whereHas('property', fn($q) => $q->where('user_id', auth()->id()))->count();
                $tenantCount = \App\Models\Tenant::where('user_id', auth()->id())->count();
                $totalRent = \App\Models\Contract::whereHas('tenant', fn($q) => $q->where('user_id', auth()->id()))->where('status', 'aktiv')->sum('rent_amount');
                $offeneSumme = \App\Models\Payment::where('user_id', auth()->id())->whereIn('status', ['offen', 'überfällig'])->sum('amount');
            @endphp

            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-4 text-center">
                    <p class="text-sm text-gray-500 uppercase">Immobilien</p>
                    <p class="text-3xl font-bold text-blue-600">{{ $propertyCount }}</p>
                </div>
            </div>
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-4 text-center">
                    <p class="text-sm text-gray-500 uppercase">Einheiten</p>
                    <p class="text-3xl font-bold text-green-600">{{ $unitCount }}</p>
                </div>
            </div>
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-4 text-center">
                    <p class="text-sm text-gray-500 uppercase">Mieter</p>
                    <p class="text-3xl font-bold text-purple-600">{{ $tenantCount }}</p>
                </div>
            </div>
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-4 text-center">
                    <p class="text-sm text-gray-500 uppercase">Offene Zahlungen</p>
                    <p class="text-3xl font-bold text-red-600">{{ number_format($offeneSumme, 0, ',', '.') }} €</p>
                </div>
            </div>

        </div>

        {{-- Immobilien-Tabelle --}}
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg mb-8">
            <div class="p-6">
                <h3 class="font-bold text-lg mb-4">Deine Immobilien</h3>
                @php $properties = \App\Models\Property::where('user_id', auth()->id())->latest()->get(); @endphp
                @if($properties->isEmpty())
                    <p class="text-gray-500">Noch keine Immobilien.</p>
                @else
                    <div class="overflow-x-auto">
                        <table class="min-w-full">
                            <thead>
                                <tr class="border-b">
                                    <th class="text-left py-3 px-4 cursor-pointer hover:bg-gray-100 select-none" onclick="sortTable(0)">
                                        Name <span class="text-xs">↕</span>
                                    </th>
                                    <th class="text-left py-3 px-4 cursor-pointer hover:bg-gray-100 select-none" onclick="sortTable(1)">
                                        Typ <span class="text-xs">↕</span>
                                    </th>
                                    <th class="text-left py-3 px-4 cursor-pointer hover:bg-gray-100 select-none" onclick="sortTable(2)">
                                        Adresse <span class="text-xs">↕</span>
                                    </th>
                                    <th class="text-left py-3 px-4 cursor-pointer hover:bg-gray-100 select-none" onclick="sortTable(3)">
                                        Einheiten <span class="text-xs">↕</span>
                                    </th>
                                    <th class="text-left py-3 px-4 cursor-pointer hover:bg-gray-100 select-none" onclick="sortTable(4)">
                                        Baujahr <span class="text-xs">↕</span>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($properties as $property)
                                    <tr class="border-b hover:bg-gray-50">
                                        <td class="py-3 px-4">
                                            <a href="{{ route('properties.show', $property) }}" class="text-blue-600 hover:underline font-medium">{{ $property->name }}</a>
                                        </td>
                                        <td class="py-3 px-4 text-sm">
                                            <span class="px-2 py-1 rounded text-xs
                                                {{ $property->type === 'wohnung' ? 'bg-blue-100 text-blue-800' : '' }}
                                                {{ $property->type === 'haus' ? 'bg-green-100 text-green-800' : '' }}
                                                {{ $property->type === 'gewerbe' ? 'bg-purple-100 text-purple-800' : '' }}">
                                                {{ ucfirst($property->type) }}
                                            </span>
                                        </td>
                                        <td class="py-3 px-4 text-sm">{{ $property->street }} {{ $property->house_number }}, {{ $property->postal_code }} {{ $property->city }}</td>
                                        <td class="py-3 px-4 text-sm">{{ $property->units->count() }}</td>
                                        <td class="py-3 px-4 text-sm">{{ $property->construction_year ?? '-' }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>

        {{-- Charts Reihe 1 --}}
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">

            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <h3 class="font-bold text-lg mb-4">Einheiten-Status</h3>
                    <canvas id="statusChart" style="max-height: 300px;"></canvas>
                </div>
            </div>

            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <h3 class="font-bold text-lg mb-4">Immobilien-Typen</h3>
                    <canvas id="typeChart" style="max-height: 300px;"></canvas>
                </div>
            </div>
        </div>

        {{-- Charts Reihe 2 --}}
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">

            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <h3 class="font-bold text-lg mb-4">Zahlungsübersicht</h3>
                    <canvas id="paymentChart" style="max-height: 300px;"></canvas>
                </div>
            </div>

            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <h3 class="font-bold text-lg mb-4">Mieteinnahmen (6 Monate)</h3>
                    <canvas id="monthlyChart" style="max-height: 300px;"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {

        @php
            $statusFrei = \App\Models\Unit::whereHas('property', fn($q) => $q->where('user_id', auth()->id()))->where('status', 'frei')->count();
            $statusVermietet = \App\Models\Unit::whereHas('property', fn($q) => $q->where('user_id', auth()->id()))->where('status', 'vermietet')->count();
            $statusRenovierung = \App\Models\Unit::whereHas('property', fn($q) => $q->where('user_id', auth()->id()))->where('status', 'renovierung')->count();

            $wohnungCount = \App\Models\Property::where('user_id', auth()->id())->where('type', 'wohnung')->count();
            $hausCount = \App\Models\Property::where('user_id', auth()->id())->where('type', 'haus')->count();
            $gewerbeCount = \App\Models\Property::where('user_id', auth()->id())->where('type', 'gewerbe')->count();

            $bezahlt = \App\Models\Payment::where('user_id', auth()->id())->where('status', 'bezahlt')->sum('amount');
            $offen = \App\Models\Payment::where('user_id', auth()->id())->where('status', 'offen')->where('due_date', '>=', now())->sum('amount');
            $ueberfaellig = \App\Models\Payment::where('user_id', auth()->id())->where('status', 'offen')->where('due_date', '<', now())->sum('amount');

            $months = [];
            $monthlyData = [];
            for ($i = 5; $i >= 0; $i--) {
                $date = now()->subMonths($i);
                $months[] = $date->format('M Y');
                $monthlyData[] = \App\Models\Payment::where('user_id', auth()->id())->where('status', 'bezahlt')->whereYear('paid_date', $date->year)->whereMonth('paid_date', $date->month)->sum('amount');
            }
        @endphp

        // Status Chart
        new Chart(document.getElementById('statusChart'), {
            type: 'doughnut',
            data: {
                labels: ['Frei', 'Vermietet', 'Renovierung'],
                datasets: [{ data: [{{ $statusFrei }}, {{ $statusVermietet }}, {{ $statusRenovierung }}], backgroundColor: ['#22c55e', '#3b82f6', '#eab308'], borderWidth: 2, borderColor: '#fff' }]
            },
            options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' } } }
        });

        // Typen Chart
        new Chart(document.getElementById('typeChart'), {
            type: 'bar',
            data: {
                labels: ['Wohnung', 'Haus', 'Gewerbe'],
                datasets: [{ data: [{{ $wohnungCount }}, {{ $hausCount }}, {{ $gewerbeCount }}], backgroundColor: ['#3b82f6', '#22c55e', '#a855f7'], borderRadius: 6 }]
            },
            options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } } }
        });

        // Payment Chart
        new Chart(document.getElementById('paymentChart'), {
            type: 'doughnut',
            data: {
                labels: ['Bezahlt', 'Offen', 'Überfällig'],
                datasets: [{ data: [{{ $bezahlt }}, {{ $offen }}, {{ $ueberfaellig }}], backgroundColor: ['#22c55e', '#f59e0b', '#ef4444'], borderWidth: 2, borderColor: '#fff' }]
            },
            options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' } } }
        });

        // Monthly Chart
        new Chart(document.getElementById('monthlyChart'), {
            type: 'bar',
            data: {
                labels: {!! json_encode($months) !!},
                datasets: [{ label: 'Mieteinnahmen (€)', data: {!! json_encode($monthlyData) !!}, backgroundColor: '#3b82f6', borderRadius: 6 }]
            },
            options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true } } }
        });

    });

    // Sortier-Funktionen für die Immobilien-Tabelle
    let sortDirection = {};
    let typeSortState = 0;

    function sortTable(columnIndex) {
        const table = document.querySelector('table');
        const tbody = table.querySelector('tbody');
        const rows = Array.from(tbody.querySelectorAll('tr'));

        if (columnIndex === 1) {
            typeSortState = (typeSortState + 1) % 4;
            const orders = [
                ['Wohnung', 'Haus', 'Gewerbe'],
                ['Haus', 'Gewerbe', 'Wohnung'],
                ['Gewerbe', 'Wohnung', 'Haus'],
            ];

            if (typeSortState === 0) {
                location.reload();
                return;
            }

            const order = orders[typeSortState - 1];
            rows.sort((a, b) => {
                const aVal = a.cells[1].textContent.trim();
                const bVal = b.cells[1].textContent.trim();
                return order.indexOf(aVal) - order.indexOf(bVal);
            });

            rows.forEach(row => tbody.appendChild(row));

            document.querySelectorAll('th span').forEach(s => s.textContent = '↕');
            const states = ['', '▲W', '▲H', '▲G'];
            document.querySelectorAll('th')[1].querySelector('span').textContent = states[typeSortState];
            return;
        }

        sortDirection[columnIndex] = !sortDirection[columnIndex];
        const ascending = sortDirection[columnIndex];

        rows.sort((a, b) => {
            let aVal = a.cells[columnIndex].textContent.trim();
            let bVal = b.cells[columnIndex].textContent.trim();

            if (columnIndex === 3 || columnIndex === 4) {
                aVal = parseFloat(aVal) || 0;
                bVal = parseFloat(bVal) || 0;
                return ascending ? aVal - bVal : bVal - aVal;
            }

            return ascending ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
        });

        rows.forEach(row => tbody.appendChild(row));

        document.querySelectorAll('th span').forEach(s => s.textContent = '↕');
        const header = table.querySelectorAll('th')[columnIndex].querySelector('span');
        header.textContent = ascending ? '▲' : '▼';
    }
</script>