@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>
                        </div>
                        <div class="col-sm-6 pe-0">
                            <ol class="bc">
                                <li>
                                    <a href="/admin/dashboard" class="bc-home">
                                        <i class="fas fa-home"></i>
                                    </a>
                                </li>
                                <li class="bc-sep">›</li>
                                <li>
                                    <a href="/admin/reports/overview" 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="/admin/reports/revenue/export?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 . $totals['collected'], '#22c55e', 'fa-rupee-sign'],
                                    ['Transactions', $totals['transactions'], '#3b82f6', 'fa-receipt'],
                                    ['Online Payments', $currency . $totals['online'], '#8b5cf6', 'fa-credit-card'],
                                    ['Cash / Manual', $currency . $totals['cash'] + $totals['manual'], '#c9a96e', 'fa-money-bill'],
                                ] as [$label, $val, $color, $icon])
                        <div cla        ss="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
        </di        v>
    </div>
        
            <div class="cont        ainer-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 gate        way --}}
            <div class="        col-lg-4 mb-3">
                <div cla        ss="card shadow-sm" style="border-top:3px solid #3b82f6">
                    <div cla        ss="card-header"><h6 class="mb-0">By Gateway</h6></div>
                    <div class="        card-body p-0">
                        @foreach($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 }}{{ $g->total }}</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 • {{ $pct }}%</div>
                            </div>
                        @endforeach
                            </div>
                        </div>
            </div>
        
                    {{-- Tra        nsactions table --}}
            <div cla        ss="col-12">
                <div cla        ss="card shadow-sm">
                    <div cla        ss="card-header d-flex justify-content-between">
                        <h6 clas        s="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') }}</td>
                                                    <td>

                                                                                                            <div style="font-weight:600">{{ $t->user?->name }}</div>
                                                        <div style="font-size:11px;color:#94a3b8">{{ $t->user?->phone }}</div>
                                                    </td>

                                                                                                    <td>

                                                                                                        <div style="font-weight:600">Unit {{ $t->booking?->plot_number }}</div>
                                                        <div style="font-size:11px;color:#94a3b8">{{ $t->booking?->plot_type }}</div>
                                                    </td>

                                                    <td><span class="badge badge-primary">{{ ucfirst($t->gateway) }}</span
                                                       ></td>

                                                                                        <td><span class="badge badge-secondary">{{ ucfirst($t->mode) }}</span></td>
                                                    <td style="font-weight:700;color:#22c55e">{{ $currency }}{{ $t->amount }}</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')