@extends('layouts.app')
@section('title', 'Sales Report')
@section('content')
<div class="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
    <div>
        <h2 class="page-title">Sales Report</h2>
        <p class="page-subtitle">Analyze your sales performance</p>
    </div>
    <div class="flex items-center gap-2">
        <x-button type="link" href="{{ route('reports.sales', ['export' => 'pdf'] + request()->query()) }}" variant="secondary">
            <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
            PDF
        </x-button>
        <x-button type="link" href="{{ route('reports.sales', ['export' => 'csv'] + request()->query()) }}" variant="secondary">
            <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            CSV
        </x-button>
    </div>
</div>

{{-- Period Presets --}}
<div class="flex flex-wrap items-center gap-2 mb-4">
    <span class="text-sm font-medium text-gray-500 dark:text-dark-muted mr-1">Period:</span>
    @foreach(['7days' => '7 Days', '1month' => '1 Month', '6months' => '6 Months', '1year' => '1 Year'] as $key => $label)
        <a href="{{ route('reports.sales', array_merge(request()->except('period'), ['period' => $key])) }}"
           class="px-4 py-2 rounded-xl text-sm font-medium transition-all duration-200 {{ $period === $key ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-500/30' : 'bg-white dark:bg-dark-card border border-gray-200 dark:border-dark-border text-gray-600 dark:text-dark-muted hover:border-indigo-300' }}">
            {{ $label }}
        </a>
    @endforeach
</div>

<form method="GET" action="{{ route('reports.sales') }}" class="search-card dark:bg-dark-card dark:border-dark-border">
    <input type="hidden" name="period" value="{{ $period }}">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-4">
        <x-form-group label="Customer" name="customer_id" type="select" :options="$customers" value="{{ request('customer_id') }}" />
        <x-form-group label="Invoice Type" name="invoice_type" type="select" :options="['' => 'All', 'tax' => 'Tax Invoice', 'non-tax' => 'Non-Tax Invoice']" value="{{ request('invoice_type') }}" />
    </div>
    <div class="mt-4 flex justify-end gap-2">
        @if((request('period') && request('period') !== '1month') || request('customer_id') || request('invoice_type'))
            <a href="{{ route('reports.sales') }}" class="btn-secondary">Clear</a>
        @endif
        <button type="submit" class="btn-primary">
            <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
            Filter
        </button>
    </div>
</form>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
    <div class="bg-white dark:bg-dark-card rounded-2xl border border-gray-100 dark:border-dark-border p-6 card-elevated">
        <div class="flex items-center gap-4">
            <div class="w-14 h-14 rounded-2xl bg-indigo-50 dark:bg-dark-surface flex items-center justify-center">
                <svg class="w-7 h-7 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
            <div>
                <p class="text-sm font-medium text-gray-500 dark:text-dark-muted">Total Revenue</p>
                <p class="text-2xl font-bold text-gray-900 dark:text-dark-text">₹{{ number_format($revenue, 2) }}</p>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-dark-card rounded-2xl border border-gray-100 dark:border-dark-border p-6 card-elevated">
        <div class="flex items-center gap-4">
            <div class="w-14 h-14 rounded-2xl bg-emerald-50 dark:bg-dark-surface flex items-center justify-center">
                <svg class="w-7 h-7 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21v-6m-6 6v-6m-6 6v-6M4 4h16v16H4V4z"/></svg>
            </div>
            <div>
                <p class="text-sm font-medium text-gray-500 dark:text-dark-muted">Total Tax</p>
                <p class="text-2xl font-bold text-gray-900 dark:text-dark-text">₹{{ number_format($tax, 2) }}</p>
            </div>
        </div>
    </div>
</div>

{{-- Sales Chart --}}
<div class="bg-white dark:bg-dark-card rounded-2xl border border-gray-100 dark:border-dark-border p-6 card-elevated mb-6">
    <div class="flex items-center justify-between mb-4">
        <h3 class="text-base font-semibold text-gray-900 dark:text-dark-text">Sales Over Time</h3>
    </div>
    <div class="relative" style="height: 320px;">
        <canvas id="salesChart"></canvas>
    </div>
</div>

<div class="table-container dark:bg-dark-card dark:border-dark-border">
    <div class="overflow-x-auto scrollbar-thin">
        <table class="min-w-full divide-y divide-gray-100 dark:divide-dark-border text-sm">
            <thead>
                <tr>
                    <th class="table-th dark:text-dark-muted">Invoice #</th>
                    <th class="table-th dark:text-dark-muted">Customer</th>
                    <th class="table-th dark:text-dark-muted">Date</th>
                    <th class="table-th dark:text-dark-muted">Type</th>
                    <th class="table-th text-right dark:text-dark-muted">Subtotal</th>
                    <th class="table-th text-right dark:text-dark-muted">Tax</th>
                    <th class="table-th text-right dark:text-dark-muted">Total</th>
                    <th class="table-th text-center dark:text-dark-muted">Status</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50 dark:divide-dark-border">
                @forelse($invoices as $invoice)
                <tr class="table-row dark:hover:bg-dark-surface">
                    <td class="table-td font-medium text-gray-900 dark:text-dark-text font-mono text-xs">{{ $invoice->invoice_number }}</td>
                    <td class="table-td text-gray-600 dark:text-dark-muted">{{ $invoice->customer->customer_name ?? '—' }}</td>
                    <td class="table-td text-gray-500 dark:text-dark-muted">{{ $invoice->invoice_date?->format('d-m-Y') }}</td>
                    <td class="table-td">
                        @if($invoice->invoice_type === 'tax')
                            <span class="badge badge-purple">Tax</span>
                        @else
                            <span class="badge badge-gray">Non-Tax</span>
                        @endif
                    </td>
                    <td class="table-td text-right text-gray-600 dark:text-dark-muted">₹{{ number_format($invoice->subtotal, 2) }}</td>
                    <td class="table-td text-right text-gray-600 dark:text-dark-muted">₹{{ number_format($invoice->tax_amount, 2) }}</td>
                    <td class="table-td text-right font-semibold text-gray-900 dark:text-dark-text">₹{{ number_format($invoice->grand_total, 2) }}</td>
                    <td class="table-td text-center">
                        @php
                            $statusClasses = ['pending' => 'badge-warning', 'paid' => 'badge-success', 'cancelled' => 'badge-danger'][$invoice->status] ?? 'badge-gray';
                        @endphp
                        <span class="badge capitalize {{ $statusClasses }}">{{ $invoice->status }}</span>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="px-6 py-12 text-center text-sm text-gray-500 dark:text-dark-muted">No sales records found.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($invoices->hasPages())
        <div class="px-6 py-4 border-t border-gray-100 dark:border-dark-border"><x-pagination :paginator="$invoices" /></div>
    @endif
</div>
@endsection
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const labels = @json($chartLabels ?? []);
    const values = @json($chartValues ?? []);

    if (labels.length > 0) {
        new Chart(document.getElementById('salesChart'), {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Revenue',
                    data: values,
                    borderColor: '#6366f1',
                    backgroundColor: function(ctx) {
                        const grad = ctx.chart.ctx.createLinearGradient(0, 0, 0, 320);
                        grad.addColorStop(0, 'rgba(99, 102, 241, 0.25)');
                        grad.addColorStop(1, 'rgba(99, 102, 241, 0.01)');
                        return grad;
                    },
                    fill: true,
                    tension: 0.4,
                    pointBackgroundColor: '#6366f1',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                    pointRadius: 4,
                    pointHoverRadius: 6,
                    borderWidth: 2,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        backgroundColor: 'rgba(26, 26, 46, 0.9)',
                        titleColor: '#fff',
                        bodyColor: '#fff',
                        padding: 12,
                        cornerRadius: 8,
                        callbacks: {
                            label: function(ctx) {
                                return '₹ ' + Number(ctx.raw).toLocaleString('en-IN');
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: { color: 'rgba(0,0,0,0.04)' },
                        border: { display: false },
                        ticks: {
                            font: { size: 11 },
                            callback: function(value) {
                                return '₹' + value.toLocaleString('en-IN');
                            }
                        }
                    },
                    x: {
                        grid: { display: false },
                        border: { display: false },
                        ticks: {
                            font: { size: 10 },
                            maxRotation: 45,
                            maxTicksLimit: 20,
                        }
                    }
                }
            }
        });
    }
});
</script>
@endpush