@extends('layouts.admin')

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

@section('content')
<x-admin.report-page title="Sales 360" subtitle="Revenue, orders, and payment mix across online and POS.">
    <x-slot:actions>
        @can('reports.top-products')
            <a href="{{ route('admin.reports.top-products') }}" class="ci-btn ci-btn--ghost">Top Products</a>
        @endcan
        @can('reports.salesman')
            <a href="{{ route('admin.reports.salesman') }}" class="ci-btn ci-btn--ghost">Salesman Report</a>
        @endcan
    </x-slot:actions>

    <form method="GET" action="{{ route('admin.reports.sales') }}" class="ci-filters ci-filters--report">
        @include('admin.reports.partials.location-filter', ['ci' => true])
        <div class="ci-filters__field">
            <label for="period">Period</label>
            <select name="period" id="period" 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="ci-filters__field" id="startDateDiv" style="{{ $period === 'custom' ? '' : 'display: none;' }}">
            <label for="start_date">Start Date</label>
            <input type="date" name="start_date" id="start_date" value="{{ $startDate }}">
        </div>
        <div class="ci-filters__field" id="endDateDiv" style="{{ $period === 'custom' ? '' : 'display: none;' }}">
            <label for="end_date">End Date</label>
            <input type="date" name="end_date" id="end_date" value="{{ $endDate }}">
        </div>
        <div class="ci-filters__field">
            <label for="source">Source</label>
            <select name="source" id="source" 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="ci-filters__field" id="staffDiv" style="{{ $source === 'pos' ? '' : 'display: none;' }}">
            <label for="staff_id">Staff</label>
            <select name="staff_id" id="staff_id">
                <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="ci-filters__actions">
            <button type="submit" class="ci-btn ci-btn--primary"><i class="bi bi-search"></i> Apply</button>
        </div>
    </form>

    <div class="ci-stats">
        <div class="ci-stat">
            <div>
                <p class="ci-stat__label">Total Revenue</p>
                <p class="ci-stat__value ci-stat__value--sm"><span class="ci-money">₹{{ number_format($totalRevenue, 2) }}</span></p>
                <p class="ci-stat__meta">{{ number_format($totalOrders) }} orders</p>
            </div>
            <span class="ci-stat__icon"><i class="bi bi-currency-rupee"></i></span>
        </div>
        <div class="ci-stat">
            <div>
                <p class="ci-stat__label">Total Orders</p>
                <p class="ci-stat__value">{{ number_format($totalOrders) }}</p>
                <p class="ci-stat__meta">₹{{ number_format($avgOrderValue, 0) }} avg</p>
            </div>
            <span class="ci-stat__icon"><i class="bi bi-receipt"></i></span>
        </div>
        <div class="ci-stat">
            <div>
                <p class="ci-stat__label">Avg Order Value</p>
                <p class="ci-stat__value ci-stat__value--sm"><span class="ci-money">₹{{ number_format($avgOrderValue, 2) }}</span></p>
            </div>
            <span class="ci-stat__icon"><i class="bi bi-calculator"></i></span>
        </div>
        <div class="ci-stat">
            <div>
                <p class="ci-stat__label">Total Discounts</p>
                <p class="ci-stat__value ci-stat__value--sm ci-stat__value--warning"><span class="ci-money">₹{{ number_format($totalDiscounts, 2) }}</span></p>
            </div>
            <span class="ci-stat__icon"><i class="bi bi-percent"></i></span>
        </div>
    </div>

    <div class="ci-grid-2">
        <div class="ci-section">
            <div class="ci-section__head">
                <h2><i class="bi bi-globe"></i> By Source</h2>
            </div>
            <div class="ci-section__body">
                <div class="ci-grid-2" style="margin-bottom:0;">
                    <div class="ci-mini-stat">
                        <p class="ci-mini-stat__label">Online</p>
                        <p class="ci-mini-stat__value"><span class="ci-money">₹{{ number_format($bySource['online']['revenue'] ?? 0, 2) }}</span></p>
                        <p class="ci-mini-stat__meta">{{ $bySource['online']['orders'] ?? 0 }} orders</p>
                    </div>
                    <div class="ci-mini-stat">
                        <p class="ci-mini-stat__label">POS</p>
                        <p class="ci-mini-stat__value"><span class="ci-money">₹{{ number_format($bySource['pos']['revenue'] ?? 0, 2) }}</span></p>
                        <p class="ci-mini-stat__meta">{{ $bySource['pos']['orders'] ?? 0 }} orders</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="ci-section">
            <div class="ci-section__head">
                <h2><i class="bi bi-credit-card"></i> By Payment Method</h2>
            </div>
            <div class="ci-section__body">
                <div class="ci-grid-2" style="margin-bottom:0;">
                    @forelse($byPayment as $label => $data)
                        <div class="ci-mini-stat">
                            <p class="ci-mini-stat__label">{{ $label }}</p>
                            <p class="ci-mini-stat__value"><span class="ci-money">₹{{ number_format($data['revenue'] ?? 0, 0) }}</span></p>
                            <p class="ci-mini-stat__meta">{{ $data['orders'] ?? 0 }} orders</p>
                        </div>
                    @empty
                        <p class="ci-muted" style="margin:0;">No payment data</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <div class="ci-section">
        <div class="ci-section__head">
            <h2>Revenue Trend</h2>
            <span class="ci-muted">({{ $startDate }} to {{ $endDate }})</span>
        </div>
        <div class="ci-section__body">
            <div style="height: 280px;">
                <canvas id="salesTrendChart"></canvas>
            </div>
        </div>
    </div>

    <div class="ci-table-card">
        <div class="ci-section__head">
            <h2>Daily Breakdown</h2>
        </div>
        <div class="ci-table-wrap">
            <table class="ci-table">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Orders</th>
                        <th class="ci-end">Revenue</th>
                        <th class="ci-end">Discounts</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($salesData as $data)
                        <tr>
                            <td>{{ \Carbon\Carbon::parse($data->date)->format('M d, Y') }}</td>
                            <td class="ci-num">{{ $data->orders_count }}</td>
                            <td class="ci-end"><span class="ci-money">₹{{ number_format($data->revenue, 2) }}</span></td>
                            <td class="ci-end"><span class="ci-money ci-money--muted">₹{{ number_format($data->discounts, 2) }}</span></td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4">
                                <div class="ci-empty">
                                    <i class="bi bi-inbox"></i>
                                    <h3>No sales in this period</h3>
                                    <p>Try a different date range or source filter.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</x-admin.report-page>
@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