@include('Partials.sidebar')
<section class="main_content dashboard_part large_header_bg">
@include('Partials.header')
<div class="main_content_iner default_main_contaner_iner">
<div class="page-body">

    <div class="container-fluid">
        <div class="page-title">
            <div class="row align-items-center">
                <div class="col-sm-6 ps-0">
                    <h3><i class="fas fa-chart-line mr-2" style="color:#22c55e"></i>Revenue Report</h3>
                    <p class="text-muted mb-0" style="font-size:13px">
                        Transaction revenue analysis
                        @if(isset($currentTenant))
                            <span class="ml-2">• {{ $currentTenant->name ?? 'Tenant' }}</span>
                        @endif
                    </p>
                </div>
                <div class="col-sm-6 pe-0">
                    <ol class="bc">
                        <li><a href="/{{ $tenantSlug }}/admin/dashboard" class="bc-home"><i class="fas fa-home"></i></a></li>
                        <li class="bc-sep">›</li>
                        <li><a href="{{ route('admin.reports.overview', ['tenant' => $tenantSlug ?? request()->route('tenant')]) }}" class="bc-link">Reports</a></li>
                        <li class="bc-sep">›</li>
                        <li class="bc-active">Revenue</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    {{-- Date filter + export --}}
    <div class="container-fluid mb-3">
        <div class="card shadow-sm">
            <div class="card-body py-2">
                <form method="GET" class="d-flex flex-wrap align-items-center" style="gap:8px">
                    <div>
                        <label style="font-size:11px;color:#94a3b8;display:block">From</label>
                        <input type="date" name="from" class="form-control form-control-sm" value="{{ $from }}">
                    </div>
                    <div>
                        <label style="font-size:11px;color:#94a3b8;display:block">To</label>
                        <input type="date" name="to" class="form-control form-control-sm" value="{{ $to }}">
                    </div>
                    <select name="group" class="form-control form-control-sm" style="max-width:120px;margin-top:16px">
                        <option value="day" {{ $groupBy === 'day' ? 'selected' : '' }}>By Day</option>
                        <option value="month" {{ $groupBy === 'month' ? 'selected' : '' }}>By Month</option>
                    </select>
                    <div style="margin-top:16px;display:flex;gap:6px">
                        <button class="btn btn-primary btn-sm"><i class="fas fa-filter mr-1"></i>Apply</button>
                        <a href="{{ route('admin.reports.revenue.export', ['tenant' => $tenantSlug ?? request()->route('tenant'), 'from' => $from, 'to' => $to]) }}"
                            class="btn btn-sm btn-outline-success">
                            <i class="fas fa-download mr-1"></i>CSV
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- KPI cards --}}
    <div class="container-fluid mb-3">
        <div class="row">
            @foreach([
                ['Total Collected', $currency . number_format($totals['collected'], 2), '#22c55e', 'fa-rupee-sign'],
                ['Transactions', $totals['transactions'], '#3b82f6', 'fa-receipt'],
                ['Online Payments', $currency . number_format($totals['online'], 2), '#8b5cf6', 'fa-credit-card'],
                ['Cash / Manual', $currency . number_format($totals['cash'] + $totals['manual'], 2), '#c9a96e', 'fa-money-bill'],
            ] as [$label, $val, $color, $icon])
            <div class="col-md-3 col-sm-6 mb-3">
                <div class="card shadow-sm" style="border-left:4px solid {{ $color }}">
                    <div class="card-body py-3">
                        <div style="font-size:11px;text-transform:uppercase;color:#94a3b8">{{ $label }}</div>
                        <div style="font-size:24px;font-weight:800;color:{{ $color }}">{{ $val }}</div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            {{-- Revenue chart --}}
            <div class="col-lg-8 mb-3">
                <div class="card shadow-sm" style="border-top:3px solid #22c55e">
                    <div class="card-header"><h6 class="mb-0">Revenue Trend</h6></div>
                    <div class="card-body"><canvas id="revChart" height="120"></canvas></div>
                </div>
            </div>

            {{-- By gateway --}}
            <div class="col-lg-4 mb-3">
                <div class="card shadow-sm" style="border-top:3px solid #3b82f6">
                    <div class="card-header"><h6 class="mb-0">By Gateway</h6></div>
                    <div class="card-body p-0">
                        @forelse($byGateway as $g)
                            @php $pct = $totals['collected'] > 0 ? ($g->total / $totals['collected']) * 100 : 0; @endphp
                            <div style="padding:10px 16px;border-bottom:1px solid #f1f5f9">
                                <div class="d-flex justify-content-between mb-1">
                                    <span style="font-weight:600;font-size:13px">{{ ucfirst($g->gateway) }}</span>
                                    <span style="font-weight:700;color:#22c55e">{{ $currency }}{{ number_format($g->total, 2) }}</span>
                                </div>
                                <div style="height:4px;background:#f1f5f9;border-radius:2px">
                                    <div style="height:4px;background:#3b82f6;border-radius:2px;width:{{ $pct }}%"></div>
                                </div>
                                <div style="font-size:11px;color:#94a3b8;margin-top:2px">{{ $g->count }} txns • {{ number_format($pct, 1) }}%</div>
                            </div>
                        @empty
                            <div class="text-center py-4 text-muted">No gateway data</div>
                        @endforelse
                    </div>
                </div>
            </div>

            {{-- Transactions table --}}
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-header d-flex justify-content-between">
                        <h6 class="mb-0">Transactions ({{ $transactions->total() }})</h6>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0" style="font-size:13px">
                                <thead style="background:#f8f9fa">
                                    <tr><th>Date</th><th>User</th><th>Unit</th><th>Gateway</th><th>Mode</th><th>Amount</th></tr>
                                </thead>
                                <tbody>
                                    @forelse($transactions as $t)
                                    <tr>
                                        <td style="color:#94a3b8">{{ $t->paid_at?->format('d M Y, H:i') ?? $t->created_at->format('d M Y, H:i') }}</td>
                                        <td>
                                            <div style="font-weight:600">{{ $t->user?->name ?? $t->booking?->client_name ?? 'N/A' }}</div>
                                            <div style="font-size:11px;color:#94a3b8">{{ $t->user?->phone ?? $t->booking?->client_phone ?? '' }}</div>
                                        </td>
                                        <td>
                                            <div style="font-weight:600">Unit {{ $t->booking?->plot_number ?? 'N/A' }}</div>
                                            <div style="font-size:11px;color:#94a3b8">{{ $t->booking?->plot_type ?? '' }}</div>
                                        </td>
                                        <td><span class="badge badge-primary">{{ ucfirst($t->gateway ?? 'N/A') }}</span></td>
                                        <td><span class="badge badge-secondary">{{ ucfirst($t->mode ?? 'N/A') }}</span></td>
                                        <td style="font-weight:700;color:#22c55e">{{ $currency }}{{ number_format($t->amount, 2) }}</td>
                                    </tr>
                                    @empty
                                    <tr><td colspan="6" class="text-center py-4 text-muted">No transactions in this period.</td></tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                    @if($transactions->hasPages())
                        <div class="card-footer">{{ $transactions->appends(request()->query())->links() }}</div>
                    @endif
                </div>
            </div>
        </div>
    </div>

</div>
</div>
</section>

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
const chartData = @json($chartData);
new Chart(document.getElementById('revChart'), {
    type: 'bar',
    data: {
        labels: chartData.map(d => d.period),
        datasets: [{
            label: 'Revenue',
            data: chartData.map(d => d.total),
            backgroundColor: '#22c55e55',
            borderColor: '#22c55e',
            borderWidth: 2,
            borderRadius: 4,
        }]
    },
    options: {
        responsive: true,
        plugins: { legend: { display: false } },
        scales: { y: { ticks: { callback: v => '{{ $currency }}' + Number(v).toLocaleString() } } }
    }
});
</script>

@include('Partials.footer')