@extends('layouts.app')

@section('title', 'Dashboard - Smart ERP')
@section('page-title', 'Dashboard')

@section('content')

<!-- Date Filter -->
<div class="card p-4 mb-5 anim-up">
    <form method="GET" class="flex items-center gap-3 flex-wrap">
        <span class="text-sm font-semibold text-gray-600">Period:</span>
        <input type="date" name="start_date" value="{{ $startDate->format('Y-m-d') }}" class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm outline-none focus:border-indigo-500">
        <span class="text-gray-400">to</span>
        <input type="date" name="end_date" value="{{ $endDate->format('Y-m-d') }}" class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm outline-none focus:border-indigo-500">
        <button type="submit" class="px-4 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-medium transition-colors">
            Apply
        </button>
        <a href="{{ route('dashboard') }}" class="px-4 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-600 rounded-lg text-sm font-medium transition-colors">
            Reset
        </a>
    </form>
</div>

<!-- Stats Row 1 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-5">
    
    <div class="card p-5 anim-up">
        <div class="flex items-center justify-between mb-3">
            <div class="w-10 h-10 rounded-lg bg-emerald-100 flex items-center justify-center">
                <i class="fas fa-rupee-sign text-emerald-600"></i>
            </div>
            <span class="text-[10px] font-bold text-emerald-600 bg-emerald-50 px-2 py-1 rounded uppercase">Today</span>
        </div>
        <p class="text-2xl font-bold text-gray-800">₹{{ number_format($todaySales, 2) }}</p>
        <p class="text-xs text-gray-500 mt-1">{{ $todayInvoices }} invoices</p>
    </div>

    <div class="card p-5 anim-up" style="animation-delay:0.05s">
        <div class="flex items-center justify-between mb-3">
            <div class="w-10 h-10 rounded-lg bg-indigo-100 flex items-center justify-center">
                <i class="fas fa-chart-line text-indigo-600"></i>
            </div>
            <span class="text-[10px] font-bold text-indigo-600 bg-indigo-50 px-2 py-1 rounded uppercase">Month</span>
        </div>
        <p class="text-2xl font-bold text-gray-800">₹{{ number_format($monthSales, 2) }}</p>
        <p class="text-xs text-gray-500 mt-1">{{ $monthInvoices }} invoices</p>
    </div>

    <div class="card p-5 anim-up" style="animation-delay:0.1s">
        <div class="flex items-center justify-between mb-3">
            <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center">
                <i class="fas fa-users text-blue-600"></i>
            </div>
            <span class="text-[10px] font-bold text-blue-600 bg-blue-50 px-2 py-1 rounded uppercase">+{{ $newCustomersThisMonth }}</span>
        </div>
        <p class="text-2xl font-bold text-gray-800">{{ number_format($totalCustomers) }}</p>
        <p class="text-xs text-gray-500 mt-1">Total Customers</p>
    </div>

    <div class="card p-5 anim-up" style="animation-delay:0.15s">
        <div class="flex items-center justify-between mb-3">
            <div class="w-10 h-10 rounded-lg bg-amber-100 flex items-center justify-center">
                <i class="fas fa-box text-amber-600"></i>
            </div>
            @if($lowStockProducts > 0)
                <span class="text-[10px] font-bold text-red-600 bg-red-50 px-2 py-1 rounded uppercase">{{ $lowStockProducts }} Low</span>
            @else
                <span class="text-[10px] font-bold text-emerald-600 bg-emerald-50 px-2 py-1 rounded uppercase">OK</span>
            @endif
        </div>
        <p class="text-2xl font-bold text-gray-800">{{ number_format($totalProducts) }}</p>
        <p class="text-xs text-gray-500 mt-1">Total Products</p>
    </div>
</div>

<!-- Stats Row 2 -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-5">
    
    <div class="card p-5 anim-up" style="animation-delay:0.2s">
        <div class="flex items-center gap-4">
            <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center">
                <i class="fas fa-truck text-purple-600 text-lg"></i>
            </div>
            <div>
                <p class="text-xs text-gray-500 font-medium">Suppliers</p>
                <p class="text-xl font-bold text-gray-800">{{ number_format($totalSuppliers) }}</p>
            </div>
        </div>
    </div>

    <div class="card p-5 anim-up" style="animation-delay:0.25s">
        <div class="flex items-center gap-4">
            <div class="w-12 h-12 rounded-lg bg-rose-100 flex items-center justify-center">
                <i class="fas fa-percentage text-rose-600 text-lg"></i>
            </div>
            <div>
                <p class="text-xs text-gray-500 font-medium">GST Payable</p>
                <p class="text-xl font-bold text-gray-800">₹{{ number_format(($gstSummary->total_cgst ?? 0) + ($gstSummary->total_sgst ?? 0) + ($gstSummary->total_igst ?? 0), 2) }}</p>
            </div>
        </div>
    </div>

    <div class="card p-5 anim-up" style="animation-delay:0.3s">
        <div class="flex items-center gap-4">
            <div class="w-12 h-12 rounded-lg bg-cyan-100 flex items-center justify-center">
                <i class="fas fa-calculator text-cyan-600 text-lg"></i>
            </div>
            <div>
                <p class="text-xs text-gray-500 font-medium">Taxable</p>
                <p class="text-xl font-bold text-gray-800">₹{{ number_format($gstSummary->total_taxable ?? 0, 2) }}</p>
            </div>
        </div>
    </div>
</div>

<!-- Charts -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-5">
    
    <div class="card p-5 anim-up" style="animation-delay:0.35s">
        <h3 class="font-bold text-gray-800 mb-4">Daily Sales (30 Days)</h3>
        <div class="h-52">
            <canvas id="dailyChart"></canvas>
        </div>
    </div>

    <div class="card p-5 anim-up" style="animation-delay:0.4s">
        <h3 class="font-bold text-gray-800 mb-4">Monthly Sales (12 Months)</h3>
        <div class="h-52">
            <canvas id="monthlyChart"></canvas>
        </div>
    </div>
</div>

<!-- Bottom Row -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
    
    <!-- Recent Invoices -->
    <div class="card p-5 lg:col-span-2 anim-up" style="animation-delay:0.45s">
        <div class="flex items-center justify-between mb-4">
            <h3 class="font-bold text-gray-800">Recent Invoices</h3>
            <a href="#" class="text-sm text-indigo-600 hover:text-indigo-700 font-medium">View All</a>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-gray-100">
                        <th class="text-left py-2 px-3 text-xs font-semibold text-gray-400 uppercase">Invoice</th>
                        <th class="text-left py-2 px-3 text-xs font-semibold text-gray-400 uppercase">Customer</th>
                        <th class="text-right py-2 px-3 text-xs font-semibold text-gray-400 uppercase">Amount</th>
                        <th class="text-center py-2 px-3 text-xs font-semibold text-gray-400 uppercase">Status</th>
                        <th class="text-right py-2 px-3 text-xs font-semibold text-gray-400 uppercase">Date</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($recentInvoices as $invoice)
                    <tr class="border-b border-gray-50 hover:bg-gray-50 transition-colors">
                        <td class="py-3 px-3 font-semibold text-gray-800">#{{ $invoice->invoice_number }}</td>
                        <td class="py-3 px-3 text-gray-600">{{ $invoice->customer->name ?? 'N/A' }}</td>
                        <td class="py-3 px-3 text-right font-semibold">₹{{ number_format($invoice->total_amount, 2) }}</td>
                        <td class="py-3 px-3 text-center">
                            <span class="px-2 py-1 rounded-full text-xs font-bold {{ $invoice->status === 'paid' ? 'bg-emerald-100 text-emerald-700' : ($invoice->status === 'pending' ? 'bg-amber-100 text-amber-700' : 'bg-red-100 text-red-700') }}">
                                {{ ucfirst($invoice->status) }}
                            </span>
                        </td>
                        <td class="py-3 px-3 text-right text-gray-400 text-xs">{{ $invoice->created_at->format('d M Y') }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="py-8 text-center text-gray-400">
                            <i class="fas fa-inbox text-2xl mb-2 block"></i>
                            No invoices yet
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Right Side -->
    <div class="space-y-4">
        
        <!-- Low Stock -->
        <div class="card p-5 anim-up" style="animation-delay:0.5s">
            <h3 class="font-bold text-gray-800 mb-3 flex items-center gap-2">
                <i class="fas fa-exclamation-triangle text-amber-500"></i>
                Low Stock Alert
            </h3>
            <div class="space-y-2 max-h-60 overflow-y-auto">
                @forelse($lowStockItems as $product)
                <div class="flex items-center justify-between p-3 bg-red-50 rounded-lg border border-red-100">
                    <div>
                        <p class="font-semibold text-gray-800 text-sm">{{ $product->name }}</p>
                        <p class="text-xs text-gray-500">{{ $product->sku }}</p>
                    </div>
                    <div class="text-right">
                        <p class="font-bold text-red-600">{{ $product->current_stock }}</p>
                        <p class="text-[10px] text-gray-500">Min: {{ $product->min_stock_level }}</p>
                    </div>
                </div>
                @empty
                <div class="text-center py-4 text-gray-400">
                    <i class="fas fa-check-circle text-emerald-500 text-xl mb-1"></i>
                    <p class="text-sm">All stock levels good</p>
                </div>
                @endforelse
            </div>
        </div>

        <!-- Top Products -->
        <div class="card p-5 anim-up" style="animation-delay:0.55s">
            <h3 class="font-bold text-gray-800 mb-3">Top Products (30 Days)</h3>
            <div class="space-y-3">
                @forelse($topProducts as $index => $product)
                <div class="flex items-center gap-3">
                    <div class="w-7 h-7 rounded-md bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold text-xs">
                        {{ $index + 1 }}
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-medium text-gray-800 truncate">{{ $product->name }}</p>
                        <p class="text-xs text-gray-500">{{ $product->total_qty }} sold</p>
                    </div>
                    <p class="text-sm font-bold text-gray-800">₹{{ number_format($product->total_sales, 0) }}</p>
                </div>
                @empty
                <p class="text-center text-gray-400 text-sm py-4">No sales data</p>
                @endforelse
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
    // Minimal Chart Config
    const chartOptions = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
            y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { font: { size: 10 } } },
            x: { grid: { display: false }, ticks: { font: { size: 10 } } }
        }
    };

    new Chart(document.getElementById('dailyChart'), {
        type: 'line',
        data: {
            labels: {!! json_encode($dailySales->pluck('date')->map(fn($d) => \Carbon\Carbon::parse($d)->format('d M'))) !!},
            datasets: [{
                data: {!! json_encode($dailySales->pluck('total')) !!},
                borderColor: '#4f46e5',
                backgroundColor: 'rgba(79,70,229,0.1)',
                borderWidth: 2,
                fill: true,
                tension: 0.4,
                pointRadius: 0,
                pointHoverRadius: 4
            }]
        },
        options: chartOptions
    });

    new Chart(document.getElementById('monthlyChart'), {
        type: 'bar',
        data: {
            labels: {!! json_encode($monthlySales->map(fn($m) => \Carbon\Carbon::create($m->year, $m->month)->format('M Y'))) !!},
            datasets: [{
                data: {!! json_encode($monthlySales->pluck('total')) !!},
                backgroundColor: '#10b981',
                borderRadius: 6,
                barThickness: 20
            }]
        },
        options: chartOptions
    });
</script>
@endpush