@extends('layouts.admin')

@section('content')
<div class="container-fluid px-4">
    <h1 class="mt-4">Reports & Analytics</h1>

    <!-- Date Range Filter -->
    <div class="card mb-4">
        <div class="card-header">
            <i class="fas fa-calendar me-1"></i>
            Select Date Range
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('admin.reports.index') }}" class="row g-3">
                <div class="col-md-4">
                    <label class="form-label">From Date</label>
                    <input type="date" name="from_date" class="form-control" value="{{ request('from_date', now()->subDays(30)->format('Y-m-d')) }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">To Date</label>
                    <input type="date" name="to_date" class="form-control" value="{{ request('to_date', now()->format('Y-m-d')) }}">
                </div>
                <div class="col-md-4 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary me-2">Apply Filter</button>
                    <a href="{{ route('admin.reports.index') }}" class="btn btn-secondary">Reset</a>
                </div>
            </form>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="row">
        <div class="col-xl-3 col-md-6">
            <div class="card bg-primary text-white mb-4">
                <div class="card-body">
                    <h4 class="mb-0">৳ {{ number_format($totalRevenue, 2) }}</h4>
                    <div>Total Revenue</div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-success text-white mb-4">
                <div class="card-body">
                    <h4 class="mb-0">{{ $totalTransactions }}</h4>
                    <div>Total Transactions</div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-warning text-white mb-4">
                <div class="card-body">
                    <h4 class="mb-0">{{ $activeUsers }}</h4>
                    <div>Active Users</div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-info text-white mb-4">
                <div class="card-body">
                    <h4 class="mb-0">{{ number_format($averageRevenue, 2) }}</h4>
                    <div>Average Daily Revenue</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Revenue Chart -->
    <div class="card mb-4">
        <div class="card-header">
            <i class="fas fa-chart-line me-1"></i>
            Daily Revenue
        </div>
        <div class="card-body">
            <canvas id="revenueChart" width="100%" height="30"></canvas>
        </div>
    </div>

    <!-- Package Performance -->
    <div class="card mb-4">
        <div class="card-header">
            <i class="fas fa-chart-pie me-1"></i>
            Package Performance
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-8">
                    <canvas id="packageChart" width="100%" height="50"></canvas>
                </div>
                <div class="col-md-4">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Package</th>
                                <th>Sales</th>
                                <th>Revenue</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($packageStats as $stat)
                            <tr>
                                <td>{{ $stat->package_name }}</td>
                                <td>{{ $stat->total_sales }}</td>
                                <td>৳ {{ number_format($stat->total_revenue, 2) }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Transaction Status -->
    <div class="row">
        <div class="col-lg-6">
            <div class="card mb-4">
                <div class="card-header">
                    <i class="fas fa-chart-bar me-1"></i>
                    Transaction Status Distribution
                </div>
                <div class="card-body">
                    <canvas id="statusChart" width="100%" height="50"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card mb-4">
                <div class="card-header">
                    <i class="fas fa-clock me-1"></i>
                    Hourly Transaction Distribution
                </div>
                <div class="card-body">
                    <canvas id="hourlyChart" width="100%" height="50"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Export Options -->
    <div class="card mb-4">
        <div class="card-header">
            <i class="fas fa-download me-1"></i>
            Export Reports
        </div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-4">
                    <a href="{{ route('admin.reports.export', ['type' => 'transactions']) }}" class="btn btn-primary w-100">
                        <i class="fas fa-file-excel me-1"></i> Export Transactions
                    </a>
                </div>
                <div class="col-md-4">
                    <a href="{{ route('admin.reports.export', ['type' => 'revenue']) }}" class="btn btn-success w-100">
                        <i class="fas fa-file-excel me-1"></i> Export Revenue Report
                    </a>
                </div>
                <div class="col-md-4">
                    <a href="{{ route('admin.reports.export', ['type' => 'packages']) }}" class="btn btn-info w-100">
                        <i class="fas fa-file-excel me-1"></i> Export Package Report
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Revenue Chart
const revenueCtx = document.getElementById('revenueChart');
new Chart(revenueCtx, {
    type: 'line',
    data: {
        labels: {!! json_encode($revenueChart->labels) !!},
        datasets: [{
            label: 'Daily Revenue',
            data: {!! json_encode($revenueChart->data) !!},
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: function(value) {
                        return '৳ ' + value;
                    }
                }
            }
        }
    }
});

// Package Chart
const packageCtx = document.getElementById('packageChart');
new Chart(packageCtx, {
    type: 'pie',
    data: {
        labels: {!! json_encode($packageChart->labels) !!},
        datasets: [{
            data: {!! json_encode($packageChart->data) !!},
            backgroundColor: [
                'rgb(255, 99, 132)',
                'rgb(54, 162, 235)',
                'rgb(255, 205, 86)',
                'rgb(75, 192, 192)'
            ]
        }]
    }
});

// Status Chart
const statusCtx = document.getElementById('statusChart');
new Chart(statusCtx, {
    type: 'bar',
    data: {
        labels: {!! json_encode($statusChart->labels) !!},
        datasets: [{
            label: 'Transactions',
            data: {!! json_encode($statusChart->data) !!},
            backgroundColor: [
                'rgb(40, 167, 69)',
                'rgb(255, 193, 7)',
                'rgb(220, 53, 69)'
            ]
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

// Hourly Chart
const hourlyCtx = document.getElementById('hourlyChart');
new Chart(hourlyCtx, {
    type: 'bar',
    data: {
        labels: {!! json_encode($hourlyChart->labels) !!},
        datasets: [{
            label: 'Transactions',
            data: {!! json_encode($hourlyChart->data) !!},
            backgroundColor: 'rgb(54, 162, 235)'
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>
@endpush
@endsection