@extends('layouts.app')

@section('title', 'Kontrolna tabla - Checkpoint')

@section('content')
<div class="container py-4">
    <div class="row">
        <div class="col-lg-12">
            <h2 class="font-weight-bold text-6 mb-4">
                Dobrodošli, {{ auth()->user()->name }}!
            </h2>
        </div>
    </div>
    
    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-lg-3 col-sm-6 mb-4">
            <div class="card border-0 border-radius-0 bg-color-primary">
                <div class="card-body text-center text-white py-4">
                    <i class="fas fa-receipt fa-3x mb-3"></i>
                    <h3 class="text-white font-weight-bold mb-0">{{ $stats['total_receipts'] }}</h3>
                    <p class="text-white opacity-7 mb-0">Ukupno računa</p>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-sm-6 mb-4">
            <div class="card border-0 border-radius-0 bg-color-secondary">
                <div class="card-body text-center text-white py-4">
                    <i class="fas fa-calendar-alt fa-3x mb-3"></i>
                    <h3 class="text-white font-weight-bold mb-0">{{ $stats['current_month_receipts'] }}</h3>
                    <p class="text-white opacity-7 mb-0">Ovaj mesec</p>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-sm-6 mb-4">
            <div class="card border-0 border-radius-0 bg-color-tertiary">
                <div class="card-body text-center text-white py-4">
                    <i class="fas fa-money-bill-wave fa-3x mb-3"></i>
                    <h3 class="text-white font-weight-bold mb-0">{{ number_format($stats['current_month_total'], 2) }}</h3>
                    <p class="text-white opacity-7 mb-0">RSD ovaj mesec</p>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-sm-6 mb-4">
            <div class="card border-0 border-radius-0 bg-color-quaternary">
                <div class="card-body text-center text-white py-4">
                    <i class="fas fa-shield-alt fa-3x mb-3"></i>
                    <h3 class="text-white font-weight-bold mb-0">{{ $stats['warranty_receipts'] }}</h3>
                    <p class="text-white opacity-7 mb-0">Sa garancijom</p>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row">
        <!-- Recent Receipts -->
        <div class="col-lg-8">
            <div class="card card-modern">
                <div class="card-header">
                    <div class="card-actions">
                        <a href="{{ route('receipts.index') }}" class="card-action card-action-toggle">
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                    <h4 class="card-title">Poslednji računi</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>Datum</th>
                                    <th>Prodavac</th>
                                    <th>Broj računa</th>
                                    <th class="text-right">Iznos</th>
                                    <th width="100">Akcije</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($recentReceipts as $receipt)
                                <tr>
                                    <td>{{ $receipt->receipt_datetime->format('d.m.Y') }}</td>
                                    <td>{{ $receipt->seller_name }}</td>
                                    <td>{{ $receipt->receipt_number }}</td>
                                    <td class="text-right">{{ number_format($receipt->total_amount, 2) }} RSD</td>
                                    <td>
                                        <a href="{{ route('receipts.show', $receipt) }}" class="btn btn-sm btn-outline-primary">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="5" class="text-center">
                                        <p class="mb-0">Nemate skeniranih računa</p>
                                        <a href="{{ route('scan') }}" class="btn btn-primary btn-sm mt-2">
                                            <i class="fas fa-camera me-2"></i>Skeniraj prvi račun
                                        </a>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <!-- Monthly Spending Chart -->
            <div class="card card-modern mt-4">
                <div class="card-header">
                    <h4 class="card-title">Mesečna potrošnja</h4>
                </div>
                <div class="card-body">
                    <canvas id="spendingChart" height="300"></canvas>
                </div>
            </div>
        </div>
        
        <!-- Right Sidebar -->
        <div class="col-lg-4">
            <!-- Quick Actions -->
            <div class="card card-modern mb-4">
                <div class="card-header">
                    <h4 class="card-title">Brze akcije</h4>
                </div>
                <div class="card-body">
                    <a href="{{ route('scan') }}" class="btn btn-primary btn-block mb-2">
                        <i class="fas fa-qrcode me-2"></i>Skeniraj račun
                    </a>
                    <a href="{{ route('receipts.create') }}" class="btn btn-secondary btn-block mb-2">
                        <i class="fas fa-plus me-2"></i>Ručni unos
                    </a>
                    <a href="{{ route('receipts.index') }}?warranty=1" class="btn btn-info btn-block mb-2">
                        <i class="fas fa-shield-alt me-2"></i>Garancije
                    </a>
                    @if(auth()->user()->canSendToAccountant())
                    <a href="{{ route('receipts.index') }}?type=business&sent_to_accountant=0" class="btn btn-warning btn-block">
                        <i class="fas fa-envelope me-2"></i>Pošalji knjigovođi
                    </a>
                    @endif
                </div>
            </div>
            
            <!-- Top Sellers -->
            <div class="card card-modern mb-4">
                <div class="card-header">
                    <h4 class="card-title">Top prodavci</h4>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-0">
                        @forelse($topSellers as $seller)
                        <li class="mb-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <strong>{{ $seller->seller_name }}</strong>
                                    <br>
                                    <small class="text-muted">{{ $seller->count }} {{ $seller->count == 1 ? 'račun' : 'računa' }}</small>
                                </div>
                                <div class="text-right">
                                    <strong>{{ number_format($seller->total, 2) }}</strong>
                                    <br>
                                    <small>RSD</small>
                                </div>
                            </div>
                        </li>
                        @empty
                        <li class="text-center text-muted">Nema podataka</li>
                        @endforelse
                    </ul>
                </div>
            </div>
            
            <!-- Account Info -->
            <div class="card card-modern">
                <div class="card-header">
                    <h4 class="card-title">Informacije o nalogu</h4>
                </div>
                <div class="card-body">
                    <p class="mb-2">
                        <strong>Tip naloga:</strong>
                        @if(auth()->user()->role == 'user')
                            <span class="badge badge-default">Fizičko lice</span>
                        @elseif(auth()->user()->role == 'entrepreneur')
                            <span class="badge badge-primary">Preduzetnik</span>
                        @else
                            <span class="badge badge-success">Firma</span>
                        @endif
                    </p>
                    
                    <p class="mb-2">
                        <strong>Lični računi:</strong> {{ $stats['personal_receipts'] }}
                    </p>
                    
                    <p class="mb-2">
                        <strong>Poslovni računi:</strong> {{ $stats['business_receipts'] }}
                    </p>
                    
                    @if(auth()->user()->accountant_email)
                    <p class="mb-0">
                        <strong>Knjigovođa:</strong><br>
                        {{ auth()->user()->accountant_email }}
                    </p>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
$(document).ready(function() {
    // Monthly spending chart
    const monthlyData = @json($monthlySpending);
    
    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun', 'Jul', 'Avg', 'Sep', 'Okt', 'Nov', 'Dec'];
    const labels = monthlyData.map(item => months[item.month - 1] + ' ' + item.year);
    const data = monthlyData.map(item => item.total);
    
    const ctx = document.getElementById('spendingChart').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: 'Potrošnja (RSD)',
                data: data,
                backgroundColor: 'rgba(30, 136, 229, 0.8)',
                borderColor: 'rgba(30, 136, 229, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return value.toLocaleString('sr-RS') + ' RSD';
                        }
                    }
                }
            }
        }
    });
});
</script>
@endpush