@extends('layouts.admin')

@section('title', 'Sales 360')

@section('content')
<div class="admin-page-header d-flex justify-content-between align-items-center flex-wrap gap-2">
    <h1>Sales 360</h1>
    <div class="d-flex gap-2">
        @can('reports.top-products')
        <a href="{{ route('admin.reports.top-products') }}" class="btn btn-outline-primary">Top Products</a>
        @endcan
        @can('reports.salesman')
        <a href="{{ route('admin.reports.salesman') }}" class="btn btn-outline-primary">Salesman Report</a>
        @endcan
    </div>
</div>

<!-- Filters -->
<div class="admin-card mb-4">
    <div class="card-body">
        <form method="GET" action="{{ route('admin.reports.sales') }}" class="row g-3 justify-content-end">
            <div class="col-lg-2 col-md-3">
                <label for="period" class="form-label">Period</label>
                <select name="period" id="period" class="form-select" onchange="toggleCustomDates()">
                    <option value="day" {{ in_array($period, ['day','today']) ? 'selected' : '' }}>Today</option>
                    <option value="yesterday" {{ $period === 'yesterday' ? 'selected' : '' }}>Yesterday</option>
                    <option value="week" {{ $period === 'week' ? 'selected' : '' }}>This Week</option>
                    <option value="last_7_days" {{ $period === 'last_7_days' ? 'selected' : '' }}>Last 7 Days</option>
                    <option value="month" {{ $period === 'month' ? 'selected' : '' }}>This Month</option>
                    <option value="last_month" {{ $period === 'last_month' ? 'selected' : '' }}>Last 30 Days</option>
                    <option value="year" {{ $period === 'year' ? 'selected' : '' }}>This Year</option>
                    <option value="last_year" {{ $period === 'last_year' ? 'selected' : '' }}>Last Year</option>
                    <option value="custom" {{ $period === 'custom' ? 'selected' : '' }}>Custom Range</option>
                </select>
            </div>
            <div class="col-md-3 col-lg-2" id="startDateDiv" style="{{ $period === 'custom' ? '' : 'display: none;' }}">
                <label for="start_date" class="form-label">Start Date</label>
                <input type="date" name="start_date" id="start_date" class="form-control" value="{{ $startDate }}">
            </div>
            <div class="col-md-3 col-lg-2" id="endDateDiv" style="{{ $period === 'custom' ? '' : 'display: none;' }}">
                <label for="end_date" class="form-label">End Date</label>
                <input type="date" name="end_date" id="end_date" class="form-control" value="{{ $endDate }}">
            </div>
            <div class="col-md-3 col-lg-2">
                <label for="source" class="form-label">Source</label>
                <select name="source" id="source" class="form-select" onchange="toggleStaffFilter()">
                    <option value="all" {{ $source === 'all' ? 'selected' : '' }}>All</option>
                    <option value="online" {{ $source === 'online' ? 'selected' : '' }}>Online</option>
                    <option value="pos" {{ $source === 'pos' ? 'selected' : '' }}>POS</option>
                </select>
            </div>
            <div class="col-md-3 col-lg-2" id="staffDiv" style="{{ $source === 'pos' ? '' : 'display: none;' }}">
                <label for="staff_id" class="form-label">Staff</label>
                <select name="staff_id" id="staff_id" class="form-select">
                    <option value="">All Staff</option>
                    @foreach($staff as $member)
                        <option value="{{ $member->id }}" {{ $staffId == $member->id ? 'selected' : '' }}>{{ $member->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2 d-flex align-items-end">
                <button type="submit" class="btn btn-primary w-100"><i class="bi bi-search"></i> Apply</button>
            </div>
        </form>
    </div>
</div>

<!-- KPI Row -->
<div class="row g-4 mb-4">
    <div class="col-md-6 col-lg-3">
        <div class="admin-stat-card stat-primary">
            <div class="stat-icon"><i class="bi bi-currency-rupee"></i></div>
            <div class="stat-label"><strong class="stat-value">₹{{ number_format($totalRevenue, 2) }}</strong><br />Total Revenue</div>
            <div class="stat-meta">{{ number_format($totalOrders) }} orders</div>
        </div>
    </div>
    <div class="col-md-6 col-lg-3">
        <div class="admin-stat-card stat-info">
            <div class="stat-icon"><i class="bi bi-receipt"></i></div>
            <div class="stat-label"><strong class="stat-value">{{ number_format($totalOrders) }}</strong><br />Total Orders</div>
            <div class="stat-meta">₹{{ number_format($avgOrderValue, 0) }} avg</div>
        </div>
    </div>
    <div class="col-md-6 col-lg-3">
        <div class="admin-stat-card stat-success">
            <div class="stat-icon"><i class="bi bi-calculator"></i></div>
            <div class="stat-label"><strong class="stat-value">₹{{ number_format($avgOrderValue, 2) }}</strong><br />Avg Order Value</div>
        </div>
    </div>
    <div class="col-md-6 col-lg-3">
        <div class="admin-stat-card stat-warning">
            <div class="stat-icon"><i class="bi bi-percent"></i></div>
            <div class="stat-label"><strong class="stat-value">₹{{ number_format($totalDiscounts, 2) }}</strong><br />Total Discounts</div>
        </div>
    </div>
</div>

<!-- By Source -->
<div class="row g-4 mb-4">
    <div class="col-md-6">
        <div class="admin-card h-100">
            <div class="card-header"><h6 class="mb-0"><i class="bi bi-globe text-primary"></i> By Source</h6></div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-6">
                        <div class="border rounded p-3">
                            <div class="text-muted small">Online</div>
                            <div class="fw-bold">₹{{ number_format($bySource['online']['revenue'] ?? 0, 2) }}</div>
                            <div class="small">{{ $bySource['online']['orders'] ?? 0 }} orders</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="border rounded p-3">
                            <div class="text-muted small">POS</div>
                            <div class="fw-bold">₹{{ number_format($bySource['pos']['revenue'] ?? 0, 2) }}</div>
                            <div class="small">{{ $bySource['pos']['orders'] ?? 0 }} orders</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="admin-card h-100">
            <div class="card-header"><h6 class="mb-0"><i class="bi bi-credit-card"></i> By Payment Method</h6></div>
            <div class="card-body">
                <div class="row g-2">
                    @forelse($byPayment as $label => $data)
                    <div class="col-6 col-md-4">
                        <div class="border rounded p-3">
                            <div class="text-muted small">{{ $label }}</div>
                            <div class="fw-bold">₹{{ number_format($data['revenue'] ?? 0, 0) }}</div>
                            <div class="small">{{ $data['orders'] ?? 0 }} orders</div>
                        </div>
                    </div>
                    @empty
                    <div class="col-12 text-muted small">No payment data</div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Trend Chart -->
<div class="admin-card mb-4">
    <div class="card-header"><h5 class="mb-0">Revenue Trend</h5><small class="text-muted">({{ $startDate }} to {{ $endDate }})</small></div>
    <div class="card-body">
        <div style="height: 280px;">
            <canvas id="salesTrendChart"></canvas>
        </div>
    </div>
</div>

<!-- Daily Breakdown -->
<div class="admin-card">
    <div class="card-header"><h5 class="mb-0">Daily Breakdown</h5></div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="admin-table table table-hover">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Orders</th>
                        <th>Revenue</th>
                        <th>Discounts</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($salesData as $data)
                    <tr>
                        <td>{{ \Carbon\Carbon::parse($data->date)->format('M d, Y') }}</td>
                        <td>{{ $data->orders_count }}</td>
                        <td>₹{{ number_format($data->revenue, 2) }}</td>
                        <td>₹{{ number_format($data->discounts, 2) }}</td>
                    </tr>
                    @empty
                    <tr><td colspan="4" class="text-center text-muted py-4">No sales in this period.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('js/vendor/chart.umd.min.js') }}"></script>
<script>
function ymd(d) {
    return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
}
function syncDatesToPeriod() {
    var p = document.getElementById('period').value;
    var startIn = document.getElementById('start_date');
    var endIn = document.getElementById('end_date');
    if (!startIn || !endIn) return;
    var today = new Date();
    var start, end;
    if (p === 'day' || p === 'today') {
        start = end = new Date(today);
    } else if (p === 'yesterday') {
        start = end = new Date(today);
        start.setDate(start.getDate() - 1);
    } else if (p === 'week') {
        start = new Date(today);
        var dow = start.getDay();
        start.setDate(start.getDate() - (dow === 0 ? 6 : dow - 1));
        end = new Date(start);
        end.setDate(end.getDate() + 6);
    } else if (p === 'last_7_days') {
        end = new Date(today);
        start = new Date(today);
        start.setDate(start.getDate() - 6);
    } else if (p === 'month') {
        start = new Date(today.getFullYear(), today.getMonth(), 1);
        end = new Date(today.getFullYear(), today.getMonth() + 1, 0);
    } else if (p === 'last_month') {
        end = new Date(today);
        start = new Date(today);
        start.setDate(start.getDate() - 29);
    } else if (p === 'year') {
        start = new Date(today.getFullYear(), 0, 1);
        end = new Date(today.getFullYear(), 11, 31);
    } else if (p === 'last_year') {
        end = new Date(today);
        start = new Date(today);
        start.setDate(start.getDate() - 364);
    } else {
        return;
    }
    startIn.value = ymd(start);
    endIn.value = ymd(end);
}
function toggleCustomDates() {
    const period = document.getElementById('period').value;
    const startDateDiv = document.getElementById('startDateDiv');
    const endDateDiv = document.getElementById('endDateDiv');
    if (period === 'custom') {
        startDateDiv.style.display = 'block';
        endDateDiv.style.display = 'block';
    } else {
        startDateDiv.style.display = 'none';
        endDateDiv.style.display = 'none';
        syncDatesToPeriod();
    }
}
function toggleStaffFilter() {
    const source = document.getElementById('source').value;
    const staffDiv = document.getElementById('staffDiv');
    staffDiv.style.display = source === 'pos' ? 'block' : 'none';
    if (source !== 'pos') document.getElementById('staff_id').value = '';
}

const salesTrendData = @json($salesTrendData ?? []);

document.addEventListener('DOMContentLoaded', function() {
    toggleCustomDates();
    toggleStaffFilter();
    syncDatesToPeriod();
    var form = document.querySelector('form[action*="reports/sales"]');
    if (form) {
        form.addEventListener('submit', function() { syncDatesToPeriod(); });
    }

    const ctx = document.getElementById('salesTrendChart');
    if (ctx && salesTrendData.length > 0) {
        const labels = salesTrendData.map(function(d) {
            const dt = new Date(d.date);
            return dt.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
        });
        const revenues = salesTrendData.map(function(d) { return d.revenue; });
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Revenue (₹)',
                    data: revenues,
                    borderColor: 'rgb(59, 130, 246)',
                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
                    fill: true,
                    tension: 0.35
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: { callback: function(v) { return '₹' + Number(v).toLocaleString('en-IN'); } }
                    },
                    x: { grid: { display: false } }
                }
            }
        });
    }
});
</script>
@endpush

@push('styles')
<style>
.admin-stat-card { background: #fff; border-radius: 12px; padding: 1.25rem; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border: 1px solid #eee; }
.admin-stat-card .stat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; margin-bottom: 0.75rem; }
.stat-primary .stat-icon { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.stat-info .stat-icon { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.stat-success .stat-icon { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.stat-warning .stat-icon { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.stat-label { font-size: 0.9rem; color: #555; }
.stat-value { font-size: 1.35rem; font-weight: 700; color: #111; }
.stat-meta { font-size: 0.8rem; color: #888; margin-top: 0.25rem; }
</style>
@endpush