@extends('admin.layouts.app')

@section('title', __('Dashboard'))

@push('styles')
<style>
    .chart-container {
        position: relative;
        height: 300px;
        width: 100%;
    }
</style>
@endpush

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3 mb-0">Yönetim Paneli</h1>
    <div class="btn-group">
        <a href="{{ route('admin.dashboard', ['period' => 'daily']) }}"
           class="btn btn-{{ request('period', 'daily') === 'daily' ? 'primary' : 'default' }}">
            Günlük
        </a>
        <a href="{{ route('admin.dashboard', ['period' => 'weekly']) }}"
           class="btn btn-{{ request('period') === 'weekly' ? 'primary' : 'default' }}">
            Haftalık
        </a>
        <a href="{{ route('admin.dashboard', ['period' => 'monthly']) }}"
           class="btn btn-{{ request('period') === 'monthly' ? 'primary' : 'default' }}">
            Aylık
        </a>
    </div>
</div>

<!-- Info boxes -->
<div class="row">
    <div class="col-12 col-sm-6 col-md-3">
        <div class="info-box">
            <span class="info-box-icon bg-info"><i class="fas fa-shopping-cart"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">
                    @if(request('period') === 'weekly')
                        Haftalık Toplam Sipariş
                    @elseif(request('period') === 'monthly')
                        Aylık Toplam Sipariş
                    @else
                        Günlük Toplam Sipariş
                    @endif
                </span>
                <span class="info-box-number">{{ $stats->total_orders ?? 0 }}</span>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-md-3">
        <div class="info-box">
            <span class="info-box-icon bg-success"><i class="fas fa-lira-sign"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">
                    @if(request('period') === 'weekly')
                        Haftalık Gelir
                    @elseif(request('period') === 'monthly')
                        Aylık Gelir
                    @else
                        Günlük Gelir
                    @endif
                </span>
                <span class="info-box-number">₺{{ number_format($stats->total_revenue ?? 0, 2) }}</span>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-md-3">
        <div class="info-box">
            <span class="info-box-icon bg-warning"><i class="fas fa-clock"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Bekleyen Siparişler</span>
                <span class="info-box-number">{{ $stats->pending_orders ?? 0 }}</span>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-md-3">
        <div class="info-box">
            <span class="info-box-icon bg-success"><i class="fas fa-check"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Ödenmiş Siparişler</span>
                <span class="info-box-number">{{ $stats->paid_orders ?? 0 }}</span>
            </div>
        </div>
    </div>
</div>

<!-- Sales Trend Chart -->
<div class="card">
    <div class="card-header">
        <h3 class="card-title">Son 7 Günlük Satış Trendi</h3>
    </div>
    <div class="card-body">
        <div class="chart-container">
            <canvas id="salesTrendChart"></canvas>
        </div>
    </div>
</div>

<!-- Status Distribution Charts -->
<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    @if(request('period') === 'weekly')
                        Haftalık Sipariş Durumu Dağılımı
                    @elseif(request('period') === 'monthly')
                        Aylık Sipariş Durumu Dağılımı
                    @else
                        Günlük Sipariş Durumu Dağılımı
                    @endif
                </h3>
            </div>
            <div class="card-body">
                <div class="chart-container">
                    <canvas id="orderStatusChart"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    @if(request('period') === 'weekly')
                        Haftalık Ödeme Durumu Dağılımı
                    @elseif(request('period') === 'monthly')
                        Aylık Ödeme Durumu Dağılımı
                    @else
                        Günlük Ödeme Durumu Dağılımı
                    @endif
                </h3>
            </div>
            <div class="card-body">
                <div class="chart-container">
                    <canvas id="paymentStatusChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Best Selling Products -->
<div class="card">
    <div class="card-header">
        <h3 class="card-title">
            @if(request('period') === 'weekly')
                Haftanın En Çok Satan Ürünleri
            @elseif(request('period') === 'monthly')
                Ayın En Çok Satan Ürünleri
            @else
                Günün En Çok Satan Ürünleri
            @endif
        </h3>
    </div>
    <div class="card-body table-responsive p-0">
        <table class="table table-hover text-nowrap">
            <thead>
                <tr>
                    <th>Ürün</th>
                    <th>Satış Adedi</th>
                    <th>Gelir</th>
                </tr>
            </thead>
            <tbody>
                @forelse($bestSellers as $product)
                    <tr>
                        <td>{{ $product->product_name }}</td>
                        <td>{{ $product->total_quantity }}</td>
                        <td>₺{{ number_format($product->total_revenue, 2) }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="3" class="text-center">Veri bulunamadı</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Quick Actions -->
<div class="card">
    <div class="card-header">
        <h3 class="card-title">Hızlı İşlemler</h3>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-3 col-sm-6 col-12">
                <a href="{{ route('admin.products.create') }}" class="btn btn-primary btn-block mb-3">
                    <i class="fas fa-plus mr-2"></i> Yeni Ürün Ekle
                </a>
            </div>
            <div class="col-md-3 col-sm-6 col-12">
                <a href="{{ route('admin.categories.create') }}" class="btn btn-primary btn-block mb-3">
                    <i class="fas fa-list mr-2"></i> Yeni Kategori Ekle
                </a>
            </div>
            <div class="col-md-3 col-sm-6 col-12">
                <a href="{{ route('admin.allergens.create') }}" class="btn btn-primary btn-block mb-3">
                    <i class="fas fa-exclamation-circle mr-2"></i> Yeni İçindekiler Bilgisi Ekle
                </a>
            </div>
            <div class="col-md-3 col-sm-6 col-12">
                <a href="{{ route('admin.orders.index') }}?status=pending" class="btn btn-primary btn-block mb-3">
                    <i class="fas fa-clock mr-2"></i> Bekleyen Siparişler
                </a>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('backend/js/chart.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Sales Trend Chart
    const salesTrendCtx = document.getElementById('salesTrendChart').getContext('2d');
    new Chart(salesTrendCtx, {
        type: 'line',
        data: {
            labels: @json($salesTrend['labels']),
            datasets: [
                {
                    label: 'Sipariş Sayısı',
                    data: @json($salesTrend['orders']),
                    borderColor: 'rgb(75, 192, 192)',
                    tension: 0.1,
                    yAxisID: 'y'
                },
                {
                    label: 'Gelir (₺)',
                    data: @json($salesTrend['revenue']),
                    borderColor: 'rgb(255, 99, 132)',
                    tension: 0.1,
                    yAxisID: 'y1'
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: {
                mode: 'index',
                intersect: false,
            },
            scales: {
                y: {
                    type: 'linear',
                    display: true,
                    position: 'left',
                    title: {
                        display: false
                    }
                },
                y1: {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    title: {
                        display: false
                    },
                    grid: {
                        drawOnChartArea: false
                    }
                }
            }
        }
    });

    // Order Status Chart
    const orderStatusCtx = document.getElementById('orderStatusChart').getContext('2d');
    new Chart(orderStatusCtx, {
        type: 'doughnut',
        data: {
            labels: @json($orderStatusDistribution['labels']),
            datasets: [{
                data: @json($orderStatusDistribution['data']),
                backgroundColor: [
                    'rgb(255, 193, 7)',   // Beklemede - Sarı
                    'rgb(0, 123, 255)',   // İşleniyor - Mavi
                    'rgb(40, 167, 69)',   // Tamamlandı - Yeşil
                    'rgb(220, 53, 69)'    // İptal Edildi - Kırmızı
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });

    // Payment Status Chart
    const paymentStatusCtx = document.getElementById('paymentStatusChart').getContext('2d');
    new Chart(paymentStatusCtx, {
        type: 'doughnut',
        data: {
            labels: @json($paymentStatusDistribution['labels']),
            datasets: [{
                data: @json($paymentStatusDistribution['data']),
                backgroundColor: [
                    'rgb(255, 193, 7)',   // Beklemede - Sarı
                    'rgb(40, 167, 69)',   // Ödendi - Yeşil
                    'rgb(220, 53, 69)'    // Başarısız - Kırmızı
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
});
</script>
@endpush