@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" style="color: black;">Hoş geldin, {{ auth()->user()->first_name }}! 👋
                                </h2>
                                <p class="mb-0 opacity-75" style="color: black;">{{ $agency->name ?? 'Acente Paneli' }} 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'] ?? 0 }}</div>
                    <div class="stats-label">Toplam Tur</div>
                    <div class="stats-change">
                        <small class="text-muted">{{ $stats['active_tours'] ?? 0 }} 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'] ?? 0 }}</div>
                    <div class="stats-label">Bu Ay Rezervasyon</div>
                    <div class="stats-change {{ ($stats['bookings_change'] ?? 0) >= 0 ? 'positive' : 'negative' }}">
                        <i class="fas fa-arrow-{{ ($stats['bookings_change'] ?? 0) >= 0 ? 'up' : 'down' }}"></i>
                        %{{ abs($stats['bookings_change'] ?? 0) }} 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'] ?? 0 }}</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, 0, ',', '.') }}</div>
                    <div class="stats-label">Bu Ay Gelir</div>
                    <div class="stats-change {{ ($stats['revenue_change'] ?? 0) >= 0 ? 'positive' : 'negative' }}">
                        <i class="fas fa-arrow-{{ ($stats['revenue_change'] ?? 0) >= 0 ? 'up' : 'down' }}"></i>
                        %{{ abs($stats['revenue_change'] ?? 0) }} 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="" class="btn btn-outline-primary btn-sm">
                            Tümünü Gör
                        </a>
                    </div>
                    <div class="card-body p-0">
                        @forelse($popularTours as $popularTour)
                            <div class="tour-item">
                                <div class="tour-info">
                                    <div class="tour-title">{{ $popularTour->name }}</div>
                                    <div class="tour-stats">
                                        <span><i class="fas fa-calendar-check me-1"></i> {{ $popularTour->bookings_count }} rezervasyon</span>
                                        <span><i class="fas fa-lira-sign me-1"></i> {{ number_format($popularTour->total_revenue, 0, ',', '.') }}</span>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="p-4 text-center text-muted">Henüz veri bulunmuyor.</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'] ?? 0 }}</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'] ?? 0 }}</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'] ?? 0 }}</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>
                                <span class="status-badge status-{{ $booking->status }}">
                                    {{ $booking->status }}
                                </span>
                            </div>
                        @empty
                            <div class="p-4 text-center text-muted">Henüz rezervasyon bulunmuyor.</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="p-4 text-center text-muted">Henüz aktivite bulunmuyor.</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>
@endpush