@extends('admin.layouts.app')

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

@push('styles')
    <link rel="stylesheet" href="{{asset('assets/css/dashboard.css')}}">
@endpush

@section('content')
    <div class="dashboard-container">
        <!-- Dashboard Header -->
        <div class="dashboard-header">
            <div class="dashboard-welcome">
                <h1 class="dashboard-title">Hoş geldiniz, {{ auth()->user()->first_name }}!</h1>
                <p class="dashboard-subtitle">Bugün harika bir gün! İşte sisteminizin genel durumu.</p>
            </div>
            <div class="dashboard-actions">
                <button class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i>
                    Yeni Ekle
                </button>
                <button class="btn btn-outline">
                    <i class="fas fa-download me-2"></i>
                    Rapor İndir
                </button>
            </div>
        </div>

        <!-- Stats Grid -->
        <div class="stats-grid">
            <div class="stats-card stats-primary">
                <div class="stats-icon">
                    <i class="fas fa-users"></i>
                </div>
                <div class="stats-content">
                    <div class="stats-number">{{ number_format($stats['total_users']) }}</div>
                    <div class="stats-label">Toplam Kullanıcı</div>
                    <div class="stats-change positive">
                        <i class="fas fa-arrow-up"></i>
                        <span>+12%</span>
                    </div>
                </div>
                <div class="stats-chart">
                    <canvas id="usersChart" width="100" height="40"></canvas>
                </div>
            </div>

            <div class="stats-card stats-success">
                <div class="stats-icon">
                    <i class="fas fa-user-check"></i>
                </div>
                <div class="stats-content">
                    <div class="stats-number">{{ number_format($stats['active_users']) }}</div>
                    <div class="stats-label">Aktif Kullanıcı</div>
                    <div class="stats-change positive">
                        <i class="fas fa-arrow-up"></i>
                        <span>+8%</span>
                    </div>
                </div>
                <div class="stats-chart">
                    <canvas id="activeUsersChart" width="100" height="40"></canvas>
                </div>
            </div>

            <div class="stats-card stats-warning">
                <div class="stats-icon">
                    <i class="fas fa-building"></i>
                </div>
                <div class="stats-content">
                    <div class="stats-number">{{ number_format($stats['total_agencies']) }}</div>
                    <div class="stats-label">Toplam Acente</div>
                    <div class="stats-change positive">
                        <i class="fas fa-arrow-up"></i>
                        <span>+24%</span>
                    </div>
                </div>
                <div class="stats-chart">
                    <canvas id="agenciesChart" width="100" height="40"></canvas>
                </div>
            </div>

            <div class="stats-card stats-info">
                <div class="stats-icon">
                    <i class="fas fa-calendar-check"></i>
                </div>
                <div class="stats-content">
                    <div class="stats-number">{{ number_format($stats['verified_users']) }}</div>
                    <div class="stats-label">Rezervasyonlar</div>
                    <div class="stats-change negative">
                        <i class="fas fa-arrow-down"></i>
                        <span>-3%</span>
                    </div>
                </div>
                <div class="stats-chart">
                    <canvas id="reservationsChart" width="100" height="40"></canvas>
                </div>
            </div>
        </div>

        <!-- Main Content Grid -->
        <div class="content-grid">
            <!-- Left Column -->
            <div class="content-left">
                <!-- Recent Activity -->
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">
                            <h3>Son Aktiviteler</h3>
                            <p>Sistemdeki son hareketler</p>
                        </div>
                        <div class="card-actions">
                            <button class="btn btn-sm btn-ghost">
                                <i class="fas fa-eye"></i>
                                Tümünü Gör
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="activity-timeline">
                            @forelse($recent_users as $user)
                                <div class="timeline-item">
                                    <div class="timeline-marker">
                                        <div class="timeline-icon bg-primary">
                                            <i class="fas fa-user-plus"></i>
                                        </div>
                                    </div>
                                    <div class="timeline-content">
                                        <div class="timeline-header">
                                            <h4>Yeni kullanıcı kaydı</h4>
                                            <span class="timeline-time">{{ $user->created_at->diffForHumans() }}</span>
                                        </div>
                                        <p><strong>{{ $user->full_name }}</strong> sisteme kaydoldu</p>
                                        <div class="timeline-meta">
                                    <span class="meta-item">
                                        <i class="fas fa-envelope"></i>
                                        {{ $user->email }}
                                    </span>
                                            @if($user->agency)
                                                <span class="meta-item">
                                        <i class="fas fa-building"></i>
                                        {{ $user->agency->name }}
                                    </span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="empty-state">
                                    <div class="empty-icon">
                                        <i class="fas fa-clock"></i>
                                    </div>
                                    <div class="empty-text">
                                        <h4>Henüz aktivite yok</h4>
                                        <p>Sistem aktiviteleri burada görünecek</p>
                                    </div>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>

                <!-- Performance Chart -->
                <div class="card mt-4">
                    <div class="card-header">
                        <div class="card-title">
                            <h3>Performans Analizi</h3>
                            <p>Son 30 günlük sistem performansı</p>
                        </div>
                        <div class="card-actions">
                            <div class="btn-group-toggle">
                                <button class="btn btn-sm active" data-period="7">7 Gün</button>
                                <button class="btn btn-sm" data-period="30">30 Gün</button>
                                <button class="btn btn-sm" data-period="90">3 Ay</button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="performanceChart" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column -->
            <div class="content-right">
                <!-- Quick Actions -->
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">
                            <h3>Hızlı İşlemler</h3>
                            <p>Sık kullanılan işlemler</p>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="quick-actions-grid">
                            <a href="#" class="quick-action-item">
                                <div class="action-icon bg-gradient-primary">
                                    <i class="fas fa-user-plus"></i>
                                </div>
                                <div class="action-content">
                                    <h4>Yeni Kullanıcı</h4>
                                    <p>Sisteme kullanıcı ekle</p>
                                </div>
                                <div class="action-arrow">
                                    <i class="fas fa-arrow-right"></i>
                                </div>
                            </a>

                            <a href="#" class="quick-action-item">
                                <div class="action-icon bg-gradient-success">
                                    <i class="fas fa-building"></i>
                                </div>
                                <div class="action-content">
                                    <h4>Yeni Acente</h4>
                                    <p>Acente kaydı oluştur</p>
                                </div>
                                <div class="action-arrow">
                                    <i class="fas fa-arrow-right"></i>
                                </div>
                            </a>

                            <a href="#" class="quick-action-item">
                                <div class="action-icon bg-gradient-warning">
                                    <i class="fas fa-map-marked-alt"></i>
                                </div>
                                <div class="action-content">
                                    <h4>Yeni Tur</h4>
                                    <p>Tur paketi ekle</p>
                                </div>
                                <div class="action-arrow">
                                    <i class="fas fa-arrow-right"></i>
                                </div>
                            </a>

                            <a href="#" class="quick-action-item">
                                <div class="action-icon bg-gradient-info">
                                    <i class="fas fa-chart-bar"></i>
                                </div>
                                <div class="action-content">
                                    <h4>Raporlar</h4>
                                    <p>Detaylı analiz</p>
                                </div>
                                <div class="action-arrow">
                                    <i class="fas fa-arrow-right"></i>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- System Status -->
                <div class="card mt-4">
                    <div class="card-header">
                        <div class="card-title">
                            <h3>Sistem Durumu</h3>
                            <p>Gerçek zamanlı sistem bilgileri</p>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="system-status-list">
                            <div class="status-item">
                                <div class="status-indicator online"></div>
                                <div class="status-content">
                                    <div class="status-title">Sistem Durumu</div>
                                    <div class="status-value">Çevrimiçi</div>
                                </div>
                                <div class="status-action">
                                    <i class="fas fa-check-circle text-success"></i>
                                </div>
                            </div>

                            <div class="status-item">
                                <div class="status-indicator warning"></div>
                                <div class="status-content">
                                    <div class="status-title">CPU Kullanımı</div>
                                    <div class="status-value">68%</div>
                                </div>
                                <div class="status-progress">
                                    <div class="progress-bar" style="width: 68%"></div>
                                </div>
                            </div>

                            <div class="status-item">
                                <div class="status-indicator online"></div>
                                <div class="status-content">
                                    <div class="status-title">Bellek Kullanımı</div>
                                    <div class="status-value">45%</div>
                                </div>
                                <div class="status-progress">
                                    <div class="progress-bar" style="width: 45%"></div>
                                </div>
                            </div>

                            <div class="status-item">
                                <div class="status-indicator online"></div>
                                <div class="status-content">
                                    <div class="status-title">Disk Alanı</div>
                                    <div class="status-value">32%</div>
                                </div>
                                <div class="status-progress">
                                    <div class="progress-bar" style="width: 32%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Recent Agencies -->
                <div class="card mt-4">
                    <div class="card-header">
                        <div class="card-title">
                            <h3>Son Acenteler</h3>
                            <p>Yeni kayıt olan acenteler</p>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="agencies-list">
                            <div class="agency-item">
                                <div class="agency-avatar">
                                    <img
                                        src="https://ui-avatars.com/api/?name=Travel+Agency&background=3B82F6&color=fff"
                                        alt="Agency">
                                </div>
                                <div class="agency-content">
                                    <div class="agency-name">Travel Pro Agency</div>
                                    <div class="agency-status">
                                        <span class="status-badge pending">Onay Bekliyor</span>
                                    </div>
                                </div>
                                <div class="agency-actions">
                                    <button class="btn btn-sm btn-ghost">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="agency-item">
                                <div class="agency-avatar">
                                    <img src="https://ui-avatars.com/api/?name=Tourism+Plus&background=10B981&color=fff"
                                         alt="Agency">
                                </div>
                                <div class="agency-content">
                                    <div class="agency-name">Tourism Plus</div>
                                    <div class="agency-status">
                                        <span class="status-badge approved">Onaylandı</span>
                                    </div>
                                </div>
                                <div class="agency-actions">
                                    <button class="btn btn-sm btn-ghost">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="agency-item">
                                <div class="agency-avatar">
                                    <img src="https://ui-avatars.com/api/?name=Dream+Tours&background=F59E0B&color=fff"
                                         alt="Agency">
                                </div>
                                <div class="agency-content">
                                    <div class="agency-name">Dream Tours</div>
                                    <div class="agency-status">
                                        <span class="status-badge pending">Onay Bekliyor</span>
                                    </div>
                                </div>
                                <div class="agency-actions">
                                    <button class="btn btn-sm btn-ghost">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom Section -->
        <div class="bottom-section">
            <!-- Latest Reservations -->
            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        <h3>Son Rezervasyonlar</h3>
                        <p>Güncel rezervasyon listesi</p>
                    </div>
                    <div class="card-actions">
                        <div class="filter-tabs">
                            <button class="filter-tab active" data-filter="all">Tümü</button>
                            <button class="filter-tab" data-filter="pending">Bekleyen</button>
                            <button class="filter-tab" data-filter="confirmed">Onaylı</button>
                        </div>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-container">
                        <table class="data-table">
                            <thead>
                            <tr>
                                <th>Rezervasyon No</th>
                                <th>Müşteri</th>
                                <th>Tur</th>
                                <th>Acente</th>
                                <th>Tarih</th>
                                <th>Tutar</th>
                                <th>Durum</th>
                                <th>İşlemler</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>
                                    <div class="reservation-id">#RES-2024-001</div>
                                </td>
                                <td>
                                    <div class="customer-info">
                                        <div class="customer-avatar">
                                            <img
                                                src="https://ui-avatars.com/api/?name=John+Doe&background=3B82F6&color=fff"
                                                alt="Customer">
                                        </div>
                                        <div class="customer-details">
                                            <div class="customer-name">John Doe</div>
                                            <div class="customer-email">john@example.com</div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="tour-info">
                                        <div class="tour-name">Kapadokya Turu</div>
                                        <div class="tour-duration">3 Gün 2 Gece</div>
                                    </div>
                                </td>
                                <td>
                                    <div class="agency-info">
                                        <div class="agency-name">Travel Pro</div>
                                    </div>
                                </td>
                                <td>
                                    <div class="date-info">
                                        <div class="date">15 Şub 2024</div>
                                        <div class="time">09:30</div>
                                    </div>
                                </td>
                                <td>
                                    <div class="amount">
                                        <span class="currency">₺</span>2,500
                                    </div>
                                </td>
                                <td>
                                    <span class="status-badge confirmed">Onaylandı</span>
                                </td>
                                <td>
                                    <div class="action-buttons">
                                        <button class="action-btn" title="Görüntüle">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="action-btn" title="Düzenle">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="action-btn" title="İptal Et">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="reservation-id">#RES-2024-002</div>
                                </td>
                                <td>
                                    <div class="customer-info">
                                        <div class="customer-avatar">
                                            <img
                                                src="https://ui-avatars.com/api/?name=Jane+Smith&background=10B981&color=fff"
                                                alt="Customer">
                                        </div>
                                        <div class="customer-details">
                                            <div class="customer-name">Jane Smith</div>
                                            <div class="customer-email">jane@example.com</div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="tour-info">
                                        <div class="tour-name">Antalya Tatili</div>
                                        <div class="tour-duration">7 Gün 6 Gece</div>
                                    </div>
                                </td>
                                <td>
                                    <div class="agency-info">
                                        <div class="agency-name">Dream Tours</div>
                                    </div>
                                </td>
                                <td>
                                    <div class="date-info">
                                        <div class="date">20 Şub 2024</div>
                                        <div class="time">14:15</div>
                                    </div>
                                </td>
                                <td>
                                    <div class="amount">
                                        <span class="currency">₺</span>4,200
                                    </div>
                                </td>
                                <td>
                                    <span class="status-badge pending">Bekleyen</span>
                                </td>
                                <td>
                                    <div class="action-buttons">
                                        <button class="action-btn" title="Görüntüle">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="action-btn" title="Düzenle">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="action-btn" title="İptal Et">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection