@extends('layouts.owner')

@section('breadcrumb')
    <a href="{{ route('owner.reports.index') }}" class="hover:text-text-primary transition-colors">Laporan</a>
    <span class="mx-2 text-text-muted">/</span>
    <span class="text-text-primary">Pendapatan</span>
@endsection

@section('content')
    <div class="mb-8 flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-text-primary">Laporan Pendapatan</h1>
            <p class="text-text-secondary">Ringkasan performa finansial bisnis kos lo.</p>
        </div>
        
        <form action="{{ route('owner.reports.revenue') }}" method="GET" class="flex flex-wrap items-center gap-3">
            <select name="property_id" class="border border-border rounded-xl px-4 py-2.5 text-sm outline-none bg-white" onchange="this.form.submit()">
                <option value="">Semua Properti</option>
                @foreach($properties as $property)
                    <option value="{{ $property->id }}" {{ request('property_id') == $property->id ? 'selected' : '' }}>{{ $property->name }}</option>
                @endforeach
            </select>
            
            <select name="year" class="border border-border rounded-xl px-4 py-2.5 text-sm outline-none bg-white" onchange="this.form.submit()">
                @for($y = now()->year; $y >= 2024; $y--)
                    <option value="{{ $y }}" {{ ($filters['year'] ?? now()->year) == $y ? 'selected' : '' }}>{{ $y }}</option>
                @endfor
            </select>
            
            <a href="{{ route('owner.reports.revenue.export', request()->query()) }}" class="px-5 py-2.5 bg-white border border-border rounded-xl text-sm font-bold text-text-primary hover:bg-surface transition-all flex items-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                Export CSV
            </a>
        </form>

    </div>

    <!-- Stats Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="bg-white p-6 rounded-3xl border border-border shadow-sm">
            <p class="text-[10px] font-bold text-text-muted uppercase tracking-widest mb-1">Total Penagihan (Gross)</p>
            <p class="text-2xl font-black text-text-primary">Rp {{ number_format($data['total_gross'], 0, ',', '.') }}</p>
            <div class="mt-4 flex items-center gap-2 text-[10px] font-bold text-emerald-600 bg-emerald-50 px-2 py-1 rounded-lg w-fit">
                <span>{{ $filters['year'] ?? now()->year }}</span>
            </div>
        </div>
        
        <div class="bg-white p-6 rounded-3xl border border-border shadow-sm">
            <p class="text-[10px] font-bold text-text-muted uppercase tracking-widest mb-1">Total Diterima (Nett)</p>
            <p class="text-2xl font-black text-emerald-600">Rp {{ number_format($data['total_paid'], 0, ',', '.') }}</p>
            <div class="mt-4 flex items-center gap-2 text-[10px] font-bold text-emerald-600 bg-emerald-50 px-2 py-1 rounded-lg w-fit">
                <span>{{ round($data['total_gross'] > 0 ? ($data['total_paid'] / $data['total_gross']) * 100 : 0, 1) }}% dari target</span>
            </div>
        </div>

        <div class="bg-white p-6 rounded-3xl border border-border shadow-sm">
            <p class="text-[10px] font-bold text-text-muted uppercase tracking-widest mb-1">Tunggakan (Unpaid)</p>
            <p class="text-2xl font-black text-red-600">Rp {{ number_format($data['total_unpaid'], 0, ',', '.') }}</p>
            <div class="mt-4 flex items-center gap-2 text-[10px] font-bold text-red-600 bg-red-50 px-2 py-1 rounded-lg w-fit">
                <span>{{ round($data['total_gross'] > 0 ? ($data['total_unpaid'] / $data['total_gross']) * 100 : 0, 1) }}% belum bayar</span>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Chart Section -->
        <div class="lg:col-span-2 bg-white p-8 rounded-3xl border border-border shadow-sm">
            <h3 class="text-lg font-bold text-text-primary mb-6">Tren Pendapatan (6 Bulan Terakhir)</h3>
            <div class="h-[300px]">
                <canvas id="revenueChart"></canvas>
            </div>
        </div>

        <!-- Breakdown Section -->
        <div class="bg-white p-8 rounded-3xl border border-border shadow-sm">
            <h3 class="text-lg font-bold text-text-primary mb-6">Rincian Sumber</h3>
            <div class="space-y-6">
                <div>
                    <div class="flex justify-between text-sm font-bold text-text-primary mb-2">
                        <span>Sewa Kamar</span>
                        <span>Rp {{ number_format($data['breakdown']['rent'], 0, ',', '.') }}</span>
                    </div>
                    <div class="w-full bg-surface h-2 rounded-full overflow-hidden">
                        <div class="bg-primary-500 h-full" style="width: {{ $data['total_gross'] > 0 ? ($data['breakdown']['rent'] / $data['total_gross']) * 100 : 0 }}%"></div>
                    </div>
                </div>

                <div>
                    <div class="flex justify-between text-sm font-bold text-text-primary mb-2">
                        <span>Listrik & Air</span>
                        <span>Rp {{ number_format($data['breakdown']['electricity'] + $data['breakdown']['water'], 0, ',', '.') }}</span>
                    </div>
                    <div class="w-full bg-surface h-2 rounded-full overflow-hidden">
                        <div class="bg-emerald-500 h-full" style="width: {{ $data['total_gross'] > 0 ? (($data['breakdown']['electricity'] + $data['breakdown']['water']) / $data['total_gross']) * 100 : 0 }}%"></div>
                    </div>
                </div>

                <div>
                    <div class="flex justify-between text-sm font-bold text-text-primary mb-2">
                        <span>Biaya Lainnya</span>
                        <span>Rp {{ number_format($data['breakdown']['others'], 0, ',', '.') }}</span>
                    </div>
                    <div class="w-full bg-surface h-2 rounded-full overflow-hidden">
                        <div class="bg-amber-500 h-full" style="width: {{ $data['total_gross'] > 0 ? ($data['breakdown']['others'] / $data['total_gross']) * 100 : 0 }}%"></div>
                    </div>
                </div>
            </div>
            
            <div class="mt-8 pt-8 border-t border-border">
                <p class="text-xs text-text-muted leading-relaxed italic">
                    * Data dihitung berdasarkan total seluruh invoice yang sudah di-konfirmasi bayar pada periode yang dipilih.
                </p>
            </div>
        </div>
    </div>

    @push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const ctx = document.getElementById('revenueChart').getContext('2d');
        const labels = {!! json_encode(collect($trend)->pluck('label')) !!};
        const values = {!! json_encode(collect($trend)->pluck('value')) !!};

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Pendapatan Bersih',
                    data: values,
                    borderColor: '#10b981',
                    backgroundColor: 'rgba(16, 185, 129, 0.1)',
                    fill: true,
                    tension: 0.4,
                    borderWidth: 3,
                    pointBackgroundColor: '#fff',
                    pointBorderColor: '#10b981',
                    pointBorderWidth: 2,
                    pointRadius: 4,
                    pointHoverRadius: 6
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: { borderDash: [5, 5], color: '#e5e7eb' },
                        ticks: {
                            callback: function(value) {
                                if (value >= 1000000) return 'Rp ' + (value/1000000) + 'jt';
                                return 'Rp ' + value.toLocaleString();
                            }
                        }
                    },
                    x: {
                        grid: { display: false }
                    }
                }
            }
        });
    </script>
    @endpush
@endsection