@extends('layouts.admin')

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

@section('content')

{{-- ===== UPDATE NOTIFICATION BANNER ===== --}}
<div id="update-banner" class="alert alert-warning alert-dismissible d-none mb-3" role="alert">
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
        <div>
            <strong><i class="fas fa-arrow-up me-2"></i>Naya Update Available!</strong>
            <span id="update-version-info" class="ms-2"></span>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.updates.index') }}" class="btn btn-warning btn-sm">
                <i class="fas fa-download me-1"></i>Update Page Dekhen
            </a>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    </div>
</div>

<div class="d-flex justify-content-between align-items-center mb-4">
    <h3 class="m-0 fw-bold">Admin Dashboard</h3>
    <span class="text-muted">{{ now()->format('d M Y, h:i A') }}</span>
</div>

<div class="row g-3 mb-4">
    <div class="col-md-3 col-6">
        <a href="{{ route('admin.users.index') }}" class="text-decoration-none">
            <div class="admin-stat-card bg-gradient-primary">
                <div><h6>Total Users</h6><h2>{{ $stats['total_users'] }}</h2></div>
                <i class="fas fa-users"></i>
            </div>
        </a>
    </div>
    <div class="col-md-3 col-6">
        <a href="{{ route('admin.users.index', ['role' => 'retailer']) }}" class="text-decoration-none">
            <div class="admin-stat-card bg-gradient-success">
                <div><h6>Retailers</h6><h2>{{ $stats['retailers'] }}</h2></div>
                <i class="fas fa-store"></i>
            </div>
        </a>
    </div>
    <div class="col-md-3 col-6">
        <a href="{{ route('admin.users.index', ['role' => 'distributor']) }}" class="text-decoration-none">
            <div class="admin-stat-card bg-gradient-warning">
                <div><h6>Distributors</h6><h2>{{ $stats['distributors'] }}</h2></div>
                <i class="fas fa-truck"></i>
            </div>
        </a>
    </div>
    <div class="col-md-3 col-6">
        <a href="{{ route('admin.users.index', ['role' => 'master_distributor']) }}" class="text-decoration-none">
            <div class="admin-stat-card bg-gradient-danger">
                <div><h6>Master Distributors</h6><h2>{{ $stats['master_distributors'] }}</h2></div>
                <i class="fas fa-crown"></i>
            </div>
        </a>
    </div>
</div>

<div class="row g-3 mb-4">
    <div class="col-md-3 col-6">
        <div class="admin-stat-card bg-gradient-orange">
            <div><h6>Pending</h6><h2>{{ $stats['pending_requests'] }}</h2></div>
            <i class="fas fa-clock"></i>
        </div>
    </div>
    <div class="col-md-3 col-6">
        <div class="admin-stat-card bg-gradient-green">
            <div><h6>Success</h6><h2>{{ $stats['success_requests'] }}</h2></div>
            <i class="fas fa-check"></i>
        </div>
    </div>
    <div class="col-md-3 col-6">
        <div class="admin-stat-card bg-gradient-red">
            <div><h6>Rejected</h6><h2>{{ $stats['rejected_requests'] }}</h2></div>
            <i class="fas fa-times"></i>
        </div>
    </div>
    <div class="col-md-3 col-6">
        <div class="admin-stat-card bg-gradient-purple">
            <div><h6>Total Revenue</h6><h2>₹{{ number_format($stats['total_revenue'], 0) }}</h2></div>
            <i class="fas fa-rupee-sign"></i>
        </div>
    </div>
</div>

<div class="row g-3">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header bg-dark text-white d-flex justify-content-between">
                <h5 class="m-0"><i class="fas fa-tasks"></i> Recent Service Requests</h5>
                <a href="{{ route('admin.requests.index') }}" class="btn btn-sm btn-light">View All</a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-sm table-hover mb-0">
                        <thead class="table-light">
                            <tr><th>Request</th><th>User</th><th>Service</th><th>Amount</th><th>Status</th></tr>
                        </thead>
                        <tbody>
                            @forelse($recentRequests as $r)
                                <tr>
                                    <td><strong>{{ $r->request_no }}</strong></td>
                                    <td>{{ $r->user->name }}</td>
                                    <td>{{ $r->service->name }}</td>
                                    <td>₹{{ number_format($r->charge, 2) }}</td>
                                    <td><span class="badge bg-{{ $r->status_color }}">{{ ucfirst($r->status) }}</span></td>
                                </tr>
                            @empty
                                <tr><td colspan="5" class="text-center text-muted p-4">No requests yet.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header bg-dark text-white"><h5 class="m-0"><i class="fas fa-user-plus"></i> Recent Users</h5></div>
            <div class="card-body p-0">
                <ul class="list-group list-group-flush">
                    @forelse($recentUsers as $u)
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <strong>{{ $u->name }}</strong>
                                <br><small class="text-muted">{{ $u->role_label }} · {{ $u->mobile }}</small>
                            </div>
                            <span class="badge bg-{{ $u->status === 'active' ? 'success' : 'secondary' }}">{{ ucfirst($u->status) }}</span>
                        </li>
                    @empty
                        <li class="list-group-item text-center text-muted">No users yet.</li>
                    @endforelse
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Auto-check for updates on dashboard load
document.addEventListener('DOMContentLoaded', function () {
    const lastCheck = localStorage.getItem('update_last_check');
    const now = Math.floor(Date.now() / 1000);
    const interval = 3600; // Check every 1 hour

    if (!lastCheck || (now - parseInt(lastCheck)) > interval) {
        checkForUpdates();
    } else {
        // Show banner if we already know there's an update
        const cachedUpdate = localStorage.getItem('update_available');
        if (cachedUpdate === 'yes') {
            const version = localStorage.getItem('update_latest_version') || '';
            showUpdateBanner(version);
        }
    }
});

function checkForUpdates() {
    fetch('{{ route("admin.updates.check") }}', {
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(res => res.json())
    .then(data => {
        localStorage.setItem('update_last_check', Math.floor(Date.now() / 1000));
        if (data.success && data.update_available) {
            localStorage.setItem('update_available', 'yes');
            localStorage.setItem('update_latest_version', data.latest_version);
            showUpdateBanner(data.latest_version);
        } else {
            localStorage.setItem('update_available', 'no');
            localStorage.removeItem('update_latest_version');
        }
    })
    .catch(() => {
        // Silently ignore - server might be temporarily unreachable
    });
}

function showUpdateBanner(latestVersion) {
    const banner = document.getElementById('update-banner');
    const versionInfo = document.getElementById('update-version-info');
    if (banner) {
        if (latestVersion) {
            versionInfo.textContent = 'Latest: v' + latestVersion;
        }
        banner.classList.remove('d-none');
    }
}
</script>
@endpush