@extends('layouts.dashboard')

@section('title', 'Dashboard')
@section('page-title', 'Dashboard')

@section('content')
@php
$isSuperAdmin = $adminInfo['is_superadmin'] ?? false;
@endphp



<!-- Stats Cards -->
<div class="row g-4 mb-4">
    <div class="col-md-6 col-lg-3">
        <div class="stat-card users" onclick="window.location='{{ route('dashboard.users') }}'" style="cursor: pointer;">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="value">{{ number_format($totalUsers) }}</div>
                    <div class="label">Total Users</div>
                </div>
                <div class="icon">
                    <i class="bi bi-people"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-3">
        <div class="stat-card calls" onclick="window.location='{{ route('dashboard.call-logs') }}'" style="cursor: pointer;">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="value">{{ number_format($totalCalls) }}</div>
                    <div class="label">Total Calls</div>
                </div>
                <div class="icon">
                    <i class="bi bi-telephone"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-3">
        <div class="stat-card sms" onclick="window.location='{{ route('dashboard.sms-logs') }}'" style="cursor: pointer;">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="value">{{ number_format($totalSms) }}</div>
                    <div class="label">Total SMS</div>
                </div>
                <div class="icon">
                    <i class="bi bi-chat-text"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-3">
        <div class="stat-card" onclick="window.location='{{ route('dashboard.whatsapp-logs') }}'" style="cursor: pointer; background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="value text-white">{{ number_format($totalWhatsApp ?? 0) }}</div>
                    <div class="label text-white-50">WhatsApp</div>
                </div>
                <div class="icon text-white">
                    <i class="bi bi-whatsapp"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Stats Cards Row 2 -->
<div class="row g-4 mb-4">
    <div class="col-md-6 col-lg-3">
        <div class="stat-card success">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="value">{{ number_format($totalSmsSent) }}</div>
                    <div class="label">SMS Sent</div>
                </div>
                <div class="icon">
                    <i class="bi bi-check-circle"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-3">
        <div class="stat-card" style="background: linear-gradient(135deg, #075E54 0%, #25D366 100%);">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="value text-white">{{ number_format($totalWhatsAppSent ?? 0) }}</div>
                    <div class="label text-white-50">WhatsApp Sent</div>
                </div>
                <div class="icon text-white">
                    <i class="bi bi-check2-all"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-3">
        <div class="stat-card" style="background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="value text-white">{{ number_format($totalPromotions ?? 0) }}</div>
                    <div class="label text-white-50">Promotions</div>
                </div>
                <div class="icon text-white">
                    <i class="bi bi-megaphone"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-3">
        <div class="stat-card" style="background: linear-gradient(135deg, #6f42c1 0%, #483d8b 100%);">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="value text-white">{{ number_format($activeUsers ?? 0) }}</div>
                    <div class="label text-white-50">Active Users</div>
                </div>
                <div class="icon text-white">
                    <i class="bi bi-person-check"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Charts Row -->
<div class="row g-4 mb-4">
    <div class="col-lg-8">
        <div class="chart-container">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0">Calls & SMS (Last 7 Days)</h5>
            </div>
            <canvas id="activityChart" height="100"></canvas>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="chart-container">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0">Call Types</h5>
            </div>
            <canvas id="callTypesChart"></canvas>
        </div>
    </div>
</div>

<!-- Recent Activity (All Admins) -->
<div class="row g-4">
    <div class="col-lg-6">
        <div class="table-container">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0">Recent Calls</h5>
                <a href="{{ route('dashboard.call-logs') }}" class="btn btn-sm btn-outline-primary">View All</a>
            </div>
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>User</th>
                            <th>Phone</th>
                            <th>Type</th>
                            <th>Time</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentCalls as $call)
                        <tr>
                            <td>{{ $call->user->name ?? 'N/A' }}</td>
                            <td>
                                <code class="small">{{ $call->phone_number }}</code>
                                @if($call->contact_name)
                                <div class="tiny text-muted" style="font-size: 0.7rem;">{{ $call->contact_name }}</div>
                                @endif
                            </td>
                            <td>
                                <span class="badge badge-{{ $call->call_type }}">
                                    {{ ucfirst($call->call_type) }}
                                </span>
                            </td>
                            <td>{{ $call->call_time->diffForHumans() }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="text-center text-muted">No recent calls</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="table-container">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0">Recent Messages</h5>
                <a href="{{ route('dashboard.sms-logs') }}" class="btn btn-sm btn-outline-primary">View All</a>
            </div>
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Channel</th>
                            <th>Phone</th>
                            <th>Status</th>
                            <th>Time</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentSms as $sms)
                        <tr>
                            <td>
                                @if(($sms->channel ?? 'sms') == 'whatsapp')
                                <span class="badge bg-success"><i class="bi bi-whatsapp"></i></span>
                                @else
                                <span class="badge bg-primary"><i class="bi bi-chat-text"></i></span>
                                @endif
                            </td>
                            <td>
                                <code class="small">{{ $sms->phone_number }}</code>
                                @if($sms->contact_name)
                                <div class="tiny text-muted" style="font-size: 0.7rem;">{{ $sms->contact_name }}</div>
                                @endif
                            </td>
                            <td>
                                <span class="badge badge-{{ $sms->status }}">
                                    {{ ucfirst($sms->status) }}
                                </span>
                            </td>
                            <td>{{ $sms->sent_at?->diffForHumans() ?? 'N/A' }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="text-center text-muted">No recent messages</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Recent Logins -->
<div class="row g-4 mt-2">
    <div class="col-12">
        <div class="table-container">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0">Recent User Logins</h5>
                <a href="{{ route('dashboard.session-logs') }}" class="btn btn-sm btn-outline-primary">View All</a>
            </div>
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>User</th>
                            <th>Device ID</th>
                            <th>IP Address</th>
                            <th>Time</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentLogins as $login)
                        <tr>
                            <td>{{ $login->user->name ?? 'N/A' }}</td>
                            <td><code class="small">{{ Str::limit($login->device_id, 20) }}</code></td>
                            <td><code class="small">{{ $login->ip_address ?? 'N/A' }}</code></td>
                            <td>{{ $login->created_at->diffForHumans() }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="text-center text-muted">No recent logins</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Activity Chart (Calls, SMS & WhatsApp)
    const activityCtx = document.getElementById('activityChart').getContext('2d');
    new Chart(activityCtx, {
        type: 'line',
        data: {
            labels: {!! json_encode(collect($callStats)->pluck('date')) !!},
            datasets: [
                {
                    label: 'Calls',
                    data: {!! json_encode(collect($callStats)->pluck('count')) !!},
                    borderColor: '#667eea',
                    backgroundColor: 'rgba(102, 126, 234, 0.1)',
                    fill: true,
                    tension: 0.4
                },
                {
                    label: 'SMS',
                    data: {!! json_encode(collect($smsStats)->pluck('count')) !!},
                    borderColor: '#28a745',
                    backgroundColor: 'rgba(40, 167, 69, 0.1)',
                    fill: true,
                    tension: 0.4
                },
                {
                    label: 'WhatsApp',
                    data: {!! json_encode(collect($whatsappStats ?? [])->pluck('count')) !!},
                    borderColor: '#25D366',
                    backgroundColor: 'rgba(37, 211, 102, 0.1)',
                    fill: true,
                    tension: 0.4
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { position: 'top' }
            },
            scales: {
                y: { beginAtZero: true }
            }
        }
    });

    // Call Types Pie Chart
    const callTypesCtx = document.getElementById('callTypesChart').getContext('2d');
    new Chart(callTypesCtx, {
        type: 'doughnut',
        data: {
            labels: ['Incoming', 'Outgoing', 'Missed'],
            datasets: [{
                data: [{{ $callTypeStats['incoming'] ?? 0 }}, {{ $callTypeStats['outgoing'] ?? 0 }}, {{ $callTypeStats['missed'] ?? 0 }}],
                backgroundColor: ['#28a745', '#007bff', '#dc3545'],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { position: 'bottom' }
            }
        }
    });
</script>
@endpush