@extends('agency.layouts.app')

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

@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.min.css" rel="stylesheet">
    <style>
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .content-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .chart-container {
            position: relative;
            height: 350px;
            width: 100%;
        }

        .activity-item {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            padding: 1rem;
            border-radius: 12px;
            margin-bottom: 1rem;
            transition: all 0.3s ease;
        }

        .activity-item:hover {
            background: var(--gray-50);
        }

        .activity-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
            flex-shrink: 0;
        }

        .activity-content {
            flex: 1;
            min-width: 0;
        }

        .activity-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: 4px;
        }

        .activity-desc {
            font-size: 13px;
            color: var(--gray-600);
            margin-bottom: 4px;
        }

        .activity-time {
            font-size: 12px;
            color: var(--gray-400);
        }

        .tour-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            border-radius: 12px;
            margin-bottom: 1rem;
            transition: all 0.3s ease;
        }

        .tour-item:hover {
            background: var(--gray-50);
        }

        .tour-image {
            width: 60px;
            height: 60px;
            border-radius: 12px;
            object-fit: cover;
            background: var(--gray-200);
            flex-shrink: 0;
        }

        .tour-info {
            flex: 1;
            min-width: 0;
        }

        .tour-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .tour-stats {
            display: flex;
            gap: 1rem;
            font-size: 12px;
            color: var(--gray-500);
        }

        .booking-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem;
            border-radius: 12px;
            margin-bottom: 1rem;
            transition: all 0.3s ease;
        }

        .booking-item:hover {
            background: var(--gray-50);
        }

        .booking-info {
            flex: 1;
            min-width: 0;
        }

        .customer-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: 2px;
        }

        .tour-name {
            font-size: 13px;
            color: var(--gray-600);
            margin-bottom: 4px;
        }

        .booking-date {
            font-size: 12px;
            color: var(--gray-400);
        }

        .status-badge {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .status-pending {
            background: var(--warning-100);
            color: var(--warning-700);
        }

        .status-confirmed {
            background: var(--success-100);
            color: var(--success-700);
        }

        .status-cancelled {
            background: var(--danger-100);
            color: var(--danger-700);
        }

        @media (max-width: 1200px) {
            .content-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .stats-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid">
        <!-- Welcome Section -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card border-0 bg-primary text-white overflow-hidden">
                    <div class="card-body position-relative">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <h2 class="h3 mb-2">Hoş geldin, {{ auth()->user()->first_name }}! 👋</h2>
                                <p class="mb-0 opacity-75">{{ auth()->user()->agency->name }} için bugünün özeti</p>
                            </div>
                            <div class="col-md-4 text-end d-none d-md-block">
                                <i class="fas fa-chart-line fa-3x opacity-25"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Stats Cards -->
        <div class="stats-grid">
            <div class="stats-card">
                <div class="stats-icon">
                    <i class="fas fa-map-marked-alt"></i>
                </div>
                <div class="stats-content">
                    <div class="stats-number">{{ $stats['total_tours'] }}</div>
                    <div class="stats-label">Toplam Tur</div>
                    <div class="stats-change">
                        <small class="text-muted">{{ $stats['active_tours'] }} aktif tur</small>
                    </div>
                </div>
            </div>

            <div class="stats-card stats-success">
                <div class="stats-icon">
                    <i class="fas fa-calendar-check"></i>
                </div>
                <div class="stats-content">
                    <div class="stats-number">{{ $stats['total_bookings'] }}</div>
                    <div class="stats-label">Bu Ay Rezervasyon</div>
                    <div class="stats-change {{ $stats['bookings_change'] >= 0 ? 'positive' : 'negative' }}">
                        <i class="fas fa-arrow-{{ $stats['bookings_change'] >= 0 ? 'up' : 'down' }}"></i>
                        %{{ abs($stats['bookings_change']) }} geçen aya göre
                    </div>
                </div>
            </div>

            <div class="stats-card stats-info">
                <div class="stats-icon">
                    <i class="fas fa-users"></i>
                </div>
                <div class="stats-content">
                    <div class="stats-number">{{ $stats['total_customers'] }}</div>
                    <div class="stats-label">Toplam Müşteri</div>
                    <div class="stats-change">
                        <small class="text-muted">Benzersiz müşteri sayısı</small>
                    </div>
                </div>
            </div>

            <div class="stats-card stats-warning">
                <div class="stats-icon">
                    <i class="fas fa-lira-sign"></i>
                </div>
                <div class="stats-content">
                    <div class="stats-number">₺{{ number_format($stats['monthly_revenue'], 0, ',', '.') }}</div>
                    <div class="stats-label">Bu Ay Gelir</div>
                    <div class="stats-change {{ $stats['revenue_change'] >= 0 ? 'positive' : 'negative' }}">
                        <i class="fas fa-arrow-{{ $stats['revenue_change'] >= 0 ? 'up' : 'down' }}"></i>
                        %{{ abs($stats['revenue_change']) }} geçen aya göre
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content Grid -->
        <div class="content-grid">
            <!-- Charts & Analytics -->
            <div class="col">
                <!-- Revenue Chart -->
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="card-title mb-1">Aylık Gelir Trendi</h5>
                            <p class="text-muted mb-0">Son 6 aylık gelir durumu</p>
                        </div>
                        <div class="dropdown">
                            <button class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown">
                                Son 6 Ay
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#">Son 3 Ay</a></li>
                                <li><a class="dropdown-item" href="#">Son 6 Ay</a></li>
                                <li><a class="dropdown-item" href="#">Son Yıl</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="revenueChart"></canvas>
                        </div>
                    </div>
                </div>

                <!-- Popular Tours -->
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="card-title mb-1">Popüler Turlar</h5>
                            <p class="text-muted mb-0">En çok rezervasyon alan turlar</p>
                        </div>
                        <a href="{{ route('agency.tours.index') }}" class="btn btn-outline-primary btn-sm">
                            Tümünü Gör
                        </a>
                    </div>
                    <div class="card-body p-0">
                        @forelse($popularTours as $tour)
                            <div class="tour-item">
                                @if($tour->image)
                                    <img src="{{ asset('storage/' . $tour->image) }}" alt="{{ $tour->title }}" class="tour-image">
                                @else
                                    <div class="tour-image d-flex align-items-center justify-content-center">
                                        <i class="fas fa-image text-muted"></i>
                                    </div>
                                @endif
                                <div class="tour-info">
                                    <div class="tour-title">{{ $tour->title }}</div>
                                    <div class="tour-stats">
                                        <span><i class="fas fa-calendar-check me-1"></i>{{ $tour->bookings_count }}
                                            rezervasyon</span>
                                        <span><i
                                                class="fas fa-lira-sign me-1"></i>₺{{ number_format($tour->total_revenue, 0, ',', '.') }}</span>
                                    </div>
                                </div>
                                <div class="text-end">
                                    <div class="fw-bold text-primary">
                                        ₺{{ number_format($tour->price, 0, ',', '.') }}</div>
                                </div>
                            </div>
                        @empty
                            <div class="text-center py-4">
                                <i class="fas fa-map-marked-alt fa-3x text-muted mb-3"></i>
                                <p class="text-muted">Henüz tur bulunmuyor</p>
                                <a href="{{ route('agency.tours.create') }}" class="btn btn-primary btn-sm">İlk Turunu
                                    Oluştur</a>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col">
                <!-- Quick Stats -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Hızlı Durum</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="text-muted">Bekleyen Rezervasyonlar</span>
                            <span class="badge bg-warning">{{ $stats['pending_bookings'] }}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="text-muted">Onaylanan Rezervasyonlar</span>
                            <span class="badge bg-success">{{ $stats['confirmed_bookings'] }}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="text-muted">Aktif Turlar</span>
                            <span class="badge bg-info">{{ $stats['active_tours'] }}</span>
                        </div>
                    </div>
                </div>

                <!-- Recent Bookings -->
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">Son Rezervasyonlar</h5>
                        <a href="{{ route('agency.sales.index') }}" class="btn btn-outline-primary btn-sm">
                            Tümünü Gör
                        </a>
                    </div>
                    <div class="card-body p-0">
                        @forelse($recentBookings as $booking)
                            <div class="booking-item">
                                <div class="booking-info">
                                    <div class="customer-name">{{ $booking->first_name }} {{ $booking->last_name }}</div>
                                    <div class="tour-name">{{ $booking->tour_title }}</div>
                                    <div class="booking-date">
                                        {{ \Carbon\Carbon::parse($booking->created_at)->format('d.m.Y H:i') }}</div>
                                </div>
                                <div>
                                    <span class="status-badge status-{{ $booking->status }}">
                                        {{ $booking->status === 'pending' ? 'Bekliyor' : ($booking->status === 'confirmed' ? 'Onaylandı' : 'İptal') }}
                                    </span>
                                </div>
                            </div>
                        @empty
                            <div class="text-center py-4">
                                <i class="fas fa-calendar-times fa-2x text-muted mb-2"></i>
                                <p class="text-muted mb-0">Henüz rezervasyon yok</p>
                            </div>
                        @endforelse
                    </div>
                </div>

                <!-- Recent Activities -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Son Aktiviteler</h5>
                    </div>
                    <div class="card-body p-0">
                        @forelse($recentActivities as $activity)
                            <div class="activity-item">
                                <div class="activity-icon bg-{{ $activity['color'] }}">
                                    <i class="{{ $activity['icon'] }}"></i>
                                </div>
                                <div class="activity-content">
                                    <div class="activity-title">{{ $activity['title'] }}</div>
                                    <div class="activity-desc">{{ $activity['description'] }}</div>
                                    <div class="activity-time">{{ $activity['time'] }}</div>
                                </div>
                            </div>
                        @empty
                            <div class="text-center py-4">
                                <i class="fas fa-history fa-2x text-muted mb-2"></i>
                                <p class="text-muted mb-0">Henüz aktivite yok</p>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Revenue Chart
            const ctx = document.getElementById('revenueChart').getContext('2d');
            const revenueChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: @json($monthlyRevenue['months']),
                    datasets: [{
                        label: 'Gelir (₺)',
                        data: @json($monthlyRevenue['revenues']),
                        borderColor: '#3b82f6',
                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
                        borderWidth: 3,
                        fill: true,
                        tension: 0.4,
                        pointBackgroundColor: '#3b82f6',
                        pointBorderColor: '#ffffff',
                        pointBorderWidth: 3,
                        pointRadius: 6,
                        pointHoverRadius: 8
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
                            titleColor: '#ffffff',
                            bodyColor: '#ffffff',
                            borderColor: '#3b82f6',
                            borderWidth: 1,
                            cornerRadius: 8,
                            displayColors: false,
                            callbacks: {
                                label: function (context) {
                                    return '₺' + context.parsed.y.toLocaleString('tr-TR');
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(0, 0, 0, 0.1)',
                                drawBorder: false
                            },
                            ticks: {
                                color: '#6b7280',
                                callback: function (value) {
                                    return '₺' + value.toLocaleString('tr-TR');
                                }
                            }
                        },
                        x: {
                            grid: {
                                display: false,
                                drawBorder: false
                            },
                            ticks: {
                                color: '#6b7280'
                            }
                        }
                    },
                    interaction: {
                        intersect: false,
                        mode: 'index'
                    }
                }
            });

            // Auto refresh stats every 5 minutes
            setInterval(function () {
                // Refresh page stats
                location.reload();
            }, 5 * 60 * 1000);
        });
    </script>
@endpush