@extends('layouts.app')

@section('title', 'Dashboard - ISP ERP System')

@section('styles')
<style>
/* Database Backup Button Styling */
.btn-outline-success {
    border-color: #28a745;
    color: #28a745;
    transition: all 0.3s ease;
}

.btn-outline-success:hover {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

.btn-outline-success.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Database Management Section */
.border-top {
    border-top: 1px solid #e9ecef !important;
}

.text-muted {
    color: #6c757d !important;
}

/* Toast Notifications */
.position-fixed {
    position: fixed !important;
}

.alert-dismissible .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 1.25rem 1rem;
}
</style>
@endsection

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

@section('content')
<div class="container-fluid">
    <!-- Welcome Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-body">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h2 class="mb-2">
                                <i class="fas fa-sun text-warning me-2"></i>
                                Welcome back, {{ Auth::user()->name ?? 'Admin' }}!
                            </h2>
                            <p class="mb-0 text-muted">
                                Here's what's happening with <strong class="text-primary">{{ Auth::user()->company_name ?? Auth::user()->branch->name ?? 'your ISP' }}</strong> business today. 
                                <span class="text-primary">{{ date('l, F j, Y') }}</span>
                            </p>
                        </div>
                        <div class="col-md-4 text-md-end">
                            <div class="d-flex gap-2 justify-content-md-end">
                                <button class="btn btn-outline-primary btn-custom" onclick="refreshDashboard()">
                                    <i class="fas fa-sync-alt me-2"></i>Refresh
                                </button>
                                <div class="notification-button-container">
                                    @php
                                        $upcomingPaymentsQuery = \App\Models\SalesPaymentSchedule::whereHas('salesInvoice');
                                        
                                        // If user is a reseller, filter by their invoices only
                                        if (Auth::user() && Auth::user()->role === 'reseller') {
                                            $upcomingPaymentsQuery->whereHas('salesInvoice', function($query) {
                                                $query->where('customer_id', Auth::id());
                                            });
                                        }
                                        
                                        $upcomingPaymentsCount = $upcomingPaymentsQuery
                                            ->where('expected_payment_date', '>=', now())
                                            ->where('expected_payment_date', '<=', now()->addDays(7))
                                            ->whereNull('paid_on')
                                            ->count();
                                    @endphp
                                    @if($upcomingPaymentsCount > 0)
                                        <span class="notification-count-badge">{{ $upcomingPaymentsCount }}</span>
                                    @endif
                                    <button class="btn btn-info btn-custom" onclick="viewPaymentScheduleReminders()">
                                        <i class="fas fa-calendar-check me-2"></i>Payment Schedule Reminder
                                    </button>
                                </div>
                                <div class="notification-button-container">
                                    @php
                                        $pendingRequestsCount = \App\Models\ClientRequest::where('status', '!=', 'completed')->count();
                                    @endphp
                                    @if($pendingRequestsCount > 0)
                                        <span class="notification-count-badge">{{ $pendingRequestsCount }}</span>
                                    @endif
                                    <button class="btn btn-warning btn-custom" onclick="viewNewRequests()">
                                        <i class="fas fa-bell me-2"></i>New Request Notification
                                    </button>
                                </div>
                                @php
                                    $currentUser = Auth::user();
                                    $isEmployee = !($isSuperAdmin ?? false) && $currentUser->role !== 'admin' && $currentUser->role !== 'reseller';
                                    $isAdmin = $currentUser->role === 'admin';
                                    $showAssignedTicketButton = $isEmployee || $isAdmin || ($isSuperAdmin ?? false);
                                @endphp
                                @if($showAssignedTicketButton)
                                <div class="notification-button-container">
                                    @if(isset($assignedTicketsCount) && $assignedTicketsCount > 0)
                                        <span class="notification-count-badge">{{ $assignedTicketsCount }}</span>
                                    @endif
                                    <button class="btn btn-success btn-custom" onclick="viewAssignedTickets()">
                                        <i class="fas fa-ticket-alt me-2"></i>
                                            Assigned Ticket
                                    </button>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards Row 1 -->
    @if(in_array('client_stats', $dashboardContains) || empty($dashboardContains))
    <div class="row mb-4">
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="custom-card h-100">
                <div class="custom-card-body">
                    <div class="d-flex align-items-center">
                        <div class="rounded-circle p-3 me-3">
                            <span class="text-info" style="font-size: 2rem;">🏢</span>
                        </div>
                        <div>
                            <h3 class="mb-1 text-info">{{ ($activeBranches ?? 0) + ($activeUsers ?? 0) }}</h3>
                            <p class="mb-0 text-muted">Active Branch & User</p>
                            <small class="text-success">
                                <span style="font-size: 0.8rem;">✅</span>
                                {{ $activeBranches ?? 0 }} branches, {{ $activeUsers ?? 0 }} users
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="custom-card h-100">
                <div class="custom-card-body">
                    <div class="d-flex align-items-center">
                        <div class="rounded-circle p-3 me-3">
                            <span class="text-primary" style="font-size: 2rem;">👥</span>
                        </div>
                        <div>
                            <h3 class="mb-1 text-primary">{{ $totalClients ?? 0 }}</h3>
                            <p class="mb-0 text-muted">Total Clients</p>
                            <small class="text-success">
                                <span style="font-size: 0.8rem;">📈</span>
                                {{ $totalClients ?? 0 }} total clients
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="custom-card h-100">
                <div class="custom-card-body">
                    <div class="d-flex align-items-center">
                        <div class="rounded-circle p-3 me-3">
                            <span class="text-success" style="font-size: 2rem;">✅</span>
                        </div>
                        <div>
                            <h3 class="mb-1 text-success">{{ $activeClients ?? 0 }}</h3>
                            <p class="mb-0 text-muted">Active Clients</p>
                            <small class="text-success">
                                <span style="font-size: 0.8rem;">✅</span>
                                {{ $activeClients ?? 0 }} active clients
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="custom-card h-100">
                <div class="custom-card-body">
                    <div class="d-flex align-items-center">
                        <div class="rounded-circle p-3 me-3">
                            <span class="text-info" style="font-size: 2rem;">📶</span>
                        </div>
                        <div>
                            <h3 class="mb-1 text-info">{{ $onlineClients ?? 0 }}</h3>
                            <p class="mb-0 text-muted">Online Clients</p>
                            <small class="text-success">
                                <span style="font-size: 0.8rem;">📶</span>
                                {{ $onlineClients ?? 0 }} clients connected
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Statistics Cards Row 2 -->
    @if(in_array('revenue_stats', $dashboardContains) || empty($dashboardContains))
    <div class="row mb-4">
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="custom-card h-100">
                <div class="custom-card-body">
                    <div class="d-flex align-items-center">
                        <div class="rounded-circle p-3 me-3">
                            <span class="text-secondary" style="font-size: 2rem;">🖥️</span>
                        </div>
                        <div>
                            <h3 class="mb-1 text-secondary">{{ $activeServers ?? 0 }}</h3>
                            <p class="mb-0 text-muted">Active Servers</p>
                            <small class="text-success">
                                <span style="font-size: 0.8rem;">🖥️</span>
                                {{ $activeServers ?? 0 }} routers online
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="custom-card h-100">
                <div class="custom-card-body">
                    <div class="d-flex align-items-center">
                        <div class="rounded-circle p-3 me-3">
                            <span class="text-warning" style="font-size: 2rem;">⏸️</span>
                        </div>
                        <div>
                            <h3 class="mb-1 text-warning">{{ $suspendedClients ?? 0 }}</h3>
                            <p class="mb-0 text-muted">Suspended Clients</p>
                            <small class="text-warning">
                                <span style="font-size: 0.8rem;">⏸️</span>
                                {{ $suspendedClients ?? 0 }} clients suspended
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="custom-card h-100">
                <div class="custom-card-body">
                    <div class="d-flex align-items-center">
                        <div class="rounded-circle p-3 me-3">
                            <span class="text-success" style="font-size: 2rem;">💰</span>
                        </div>
                        <div>
                            <h3 class="mb-1 text-success">${{ number_format($monthlyRevenue ?? 0, 2) }}</h3>
                            <p class="mb-0 text-muted">Monthly Revenue</p>
                            <small class="text-success">
                                <span style="font-size: 0.8rem;">💰</span>
                                ${{ number_format($monthlyRevenue ?? 0, 2) }} monthly revenue
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="custom-card h-100">
                <div class="custom-card-body">
                    <div class="d-flex align-items-center">
                        <div class="rounded-circle p-3 me-3">
                            <span class="text-danger" style="font-size: 2rem;">⏰</span>
                        </div>
                        <div>
                            <h3 class="mb-1 text-danger">{{ $pendingBills ?? 0 }}</h3>
                            <p class="mb-0 text-muted">Pending Bills</p>
                            <small class="text-danger">
                                <span style="font-size: 0.8rem;">📄</span>
                                {{ $pendingBills ?? 0 }} pending bills
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- New Clients Block -->
    @if(in_array('new_clients', $dashboardContains) || empty($dashboardContains))
    <div class="row mb-4">
        <div class="col-12">
            <div class="custom-card h-100">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-user-plus text-success me-2"></i>
                        New Clients (Last 7 Days)
                    </h5>
                </div>
                <div class="custom-card-body">
                    @if($newClients->count() > 0)
                        <div class="table-responsive">
                            <table class="table custom-table">
                                <thead>
                                    <tr>
                                        <th>Client Name</th>
                                        <th>Username</th>
                                        <th>Package</th>
                                        <th>Branch</th>
                                        <th>Status</th>
                                        <th>Joined Date</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($newClients as $client)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="bg-success bg-opacity-10 rounded-circle p-2 me-3">
                                                    <i class="fas fa-user text-success"></i>
                                                </div>
                                                <div>
                                                    <strong>{{ $client->name }}</strong>
                                                    <br>
                                                    <small class="text-muted">{{ $client->phone ?? 'No phone' }}</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge bg-primary custom-badge">{{ $client->username }}</span>
                                        </td>
                                        <td>
                                            @if($client->package_name)
                                                <span class="badge bg-info custom-badge">{{ $client->package_name }}</span>
                                                <br>
                                                <small class="text-muted">${{ number_format($client->package_price, 2) }}</small>
                                            @else
                                                <span class="text-muted">No package</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($client->branch)
                                                <span class="text-primary">{{ $client->branch->name }}</span>
                                            @else
                                                <span class="text-muted">No branch</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($client->status === 'active')
                                                <span class="badge bg-success custom-badge">
                                                    <i class="fas fa-check-circle me-1"></i>Active
                                                </span>
                                            @elseif($client->status === 'suspended')
                                                <span class="badge bg-warning custom-badge">
                                                    <i class="fas fa-pause me-1"></i>Suspended
                                                </span>
                                            @else
                                                <span class="badge bg-secondary custom-badge">
                                                    <i class="fas fa-times-circle me-1"></i>{{ ucfirst($client->status) }}
                                                </span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-calendar text-primary me-2"></i>
                                                <div>
                                                    <strong>{{ $client->created_at->format('M d, Y') }}</strong>
                                                    <br>
                                                    <small class="text-muted">{{ $client->created_at->format('h:i A') }}</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <a href="{{ route('clients.show', $client->id) }}" class="btn btn-sm btn-outline-primary" title="View Details">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a href="{{ route('clients.edit', $client->id) }}" class="btn btn-sm btn-outline-success" title="Edit">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- View All Button -->
                        <div class="text-center mt-3">
                            <a href="{{ route('clients.index') }}" class="btn btn-primary btn-custom">
                                <i class="fas fa-list me-2"></i>View All Clients
                            </a>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <div class="mb-4">
                                <i class="fas fa-user-plus text-muted" style="font-size: 4rem;"></i>
                            </div>
                            <h5 class="text-muted mb-2">No New Clients</h5>
                            <p class="text-muted mb-4">No new clients have been added in the last 7 days.</p>
                            <a href="{{ route('clients.create') }}" class="btn btn-primary btn-custom">
                                <i class="fas fa-user-plus me-2"></i>Add New Client
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Charts Row -->
    @if(in_array('revenue_stats', $dashboardContains) || empty($dashboardContains))
    <div class="row mb-4">
        <div class="col-lg-8 mb-3">
            <div class="custom-card h-100">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-line me-2"></i>
                        Revenue Trend (Last 12 Months)
                    </h5>
                </div>
                <div class="custom-card-body">
                    <canvas id="revenueChart" height="300"></canvas>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4 mb-3">
            <div class="custom-card h-100">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-pie me-2"></i>
                        Client Distribution
                    </h5>
                </div>
                <div class="custom-card-body">
                    <canvas id="clientChart" height="300"></canvas>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Quick Actions & Recent Activity -->
    <div class="row mb-4">
        @if(in_array('quick_actions', $dashboardContains) || empty($dashboardContains))
        <div class="col-lg-4 mb-3">
            <div class="custom-card h-100">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-bolt me-2"></i>
                        Quick Actions
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('clients.create') }}" class="btn btn-primary btn-custom">
                            <i class="fas fa-user-plus me-2"></i>Add New Customer
                        </a>
                        <a href="{{ route('mikrotik.index') }}" class="btn btn-success btn-custom">
                            <i class="fas fa-server me-2"></i>Manage Servers
                        </a>
                        <a href="#" class="btn btn-warning btn-custom">
                            <i class="fas fa-file-invoice-dollar me-2"></i>Generate Bills
                        </a>
                        <a href="#" class="btn btn-info btn-custom">
                            <i class="fas fa-chart-line me-2"></i>View Reports
                        </a>
                    </div>
                </div>
            </div>
        </div>
        @endif
        
        @if(in_array('recent_activities', $dashboardContains) || empty($dashboardContains))
        <div class="col-lg-8 mb-3">
            <div class="custom-card h-100">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-history me-2"></i>
                        Recent Activity
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div class="table-responsive">
                        <table class="table custom-table">
                            <thead>
                                <tr>
                                    <th>Activity</th>
                                    <th>User</th>
                                    <th>Time</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-user-plus text-success me-2"></i>
                                            New client registered
                                        </div>
                                    </td>
                                    <td>John Doe</td>
                                    <td>2 minutes ago</td>
                                    <td><span class="badge bg-success custom-badge">Completed</span></td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-credit-card text-primary me-2"></i>
                                            Payment received
                                        </div>
                                    </td>
                                    <td>Jane Smith</td>
                                    <td>15 minutes ago</td>
                                    <td><span class="badge bg-success custom-badge">Completed</span></td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-exclamation-triangle text-warning me-2"></i>
                                            Server maintenance
                                        </div>
                                    </td>
                                    <td>System</td>
                                    <td>1 hour ago</td>
                                    <td><span class="badge bg-warning custom-badge">In Progress</span></td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-sync-alt text-info me-2"></i>
                                            Client sync completed
                                        </div>
                                    </td>
                                    <td>Admin</td>
                                    <td>2 hours ago</td>
                                    <td><span class="badge bg-success custom-badge">Completed</span></td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-file-invoice-dollar text-primary me-2"></i>
                                            Monthly bills generated
                                        </div>
                                    </td>
                                    <td>System</td>
                                    <td>3 hours ago</td>
                                    <td><span class="badge bg-success custom-badge">Completed</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>

    <!-- System Status & Alerts -->
    <div class="row mb-4">
        <div class="col-lg-6 mb-3">
            <div class="custom-card h-100">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-heartbeat me-2"></i>
                        System Status
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div class="row">
                        <div class="col-6 mb-3">
                            <div class="d-flex align-items-center">
                                <div class="bg-success rounded-circle me-2" style="width: 12px; height: 12px;"></div>
                                <span>Web Server</span>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="d-flex align-items-center">
                                <div class="bg-success rounded-circle me-2" style="width: 12px; height: 12px;"></div>
                                <span>Database</span>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="d-flex align-items-center">
                                <div class="bg-success rounded-circle me-2" style="width: 12px; height: 12px;"></div>
                                <span>MikroTik API</span>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="d-flex align-items-center">
                                <div class="bg-success rounded-circle me-2" style="width: 12px; height: 12px;"></div>
                                <span>Email Service</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Database Backup Section -->
                    <div class="mt-3 pt-3 border-top">
                        <h6 class="mb-3">
                            <i class="fas fa-database me-2"></i>
                            Database Management
                        </h6>
                        <div class="d-grid">
                            <a href="{{ route('database.backup') }}" class="btn btn-outline-success btn-sm" onclick="downloadBackup(event)">
                                <i class="fas fa-download me-2"></i>
                                Download Database Backup
                            </a>
                        </div>
                        <small class="text-muted mt-2 d-block">
                            <i class="fas fa-info-circle me-1"></i>
                            Downloads a complete backup of the laravel_app database as ZIP file
                        </small>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-6 mb-3">
            <div class="custom-card h-100">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-bell me-2"></i>
                        Recent Alerts
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div class="alert alert-info custom-alert">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>System Update:</strong> New features have been deployed successfully.
                    </div>
                    <div class="alert alert-warning custom-alert">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>Maintenance:</strong> Scheduled maintenance in 2 hours.
                    </div>
                    <div class="alert alert-success custom-alert">
                        <i class="fas fa-database me-2"></i>
                        <strong>Backup:</strong> Daily backup completed successfully.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
/* iPhone-style Notification Badge */
.admin-name-container {
    position: relative;
    display: inline-block;
}

.notification-badge {
    position: absolute;
    top: -8px;
    right: -15px;
    background: #ff3b30;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 2px solid white;
    animation: pulse-badge 2s infinite;
    z-index: 10;
}

.notification-badge::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: #ff3b30;
    border-radius: 50%;
    opacity: 0.3;
    animation: pulse-ring 2s infinite;
}

@keyframes pulse-badge {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* Notification Button Container */
.notification-button-container {
    position: relative;
    display: inline-block;
}

.notification-count-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ff3b30;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 2px solid white;
    animation: pulse-badge 2s infinite;
    z-index: 10;
}

.notification-count-badge::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: #ff3b30;
    border-radius: 50%;
    opacity: 0.3;
    animation: pulse-ring 2s infinite;
}

/* Button Size Adjustments */
.btn-custom {
    padding: 5px 10px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    border: none !important;
    white-space: nowrap !important;
}

.btn-custom:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.btn-custom i {
    font-size: 10px !important;
    margin-right: 4px !important;
}

.notification-button-container {
    margin-right: 8px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .notification-badge {
        width: 16px;
        height: 16px;
        font-size: 9px;
        top: -5px;
        right: -10px;
    }
    
    .notification-count-badge {
        width: 16px;
        height: 16px;
        font-size: 9px;
        top: -5px;
        right: -5px;
    }
    
    .btn-custom {
        padding: 4px 8px !important;
        font-size: 10px !important;
    }
    
    .btn-custom i {
        font-size: 9px !important;
        margin-right: 3px !important;
    }
    
    .notification-button-container {
        margin-right: 6px !important;
    }
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    initializeCharts();
    initializeTooltips();
});

function initializeCharts() {
    // Revenue Chart
    const revenueCtx = document.getElementById('revenueChart').getContext('2d');
    new Chart(revenueCtx, {
        type: 'line',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            datasets: [{
                label: 'Revenue',
                data: [12000, 19000, 15000, 25000, 22000, 30000, 28000, 35000, 32000, 40000, 38000, 45000],
                borderColor: 'rgb(59, 130, 246)',
                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                tension: 0.4,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return '$' + value.toLocaleString();
                        }
                    }
                }
            }
        }
    });

    // Client Distribution Chart
    const clientCtx = document.getElementById('clientChart').getContext('2d');
    const clientDistribution = @json($clientDistribution);
    
    // Define labels, data, and colors in a consistent order
    const chartLabels = ['Active', 'Suspended', 'Inactive', 'Expired'];
    const chartColors = [
        'rgb(34, 197, 94)',   // Active - Green
        'rgb(251, 191, 36)',  // Suspended - Yellow
        'rgb(239, 68, 68)',    // Inactive - Red
        'rgb(156, 163, 175)'   // Expired - Gray
    ];
    
    const chartData = [
        clientDistribution.active || 0,
        clientDistribution.suspended || 0,
        clientDistribution.inactive || 0,
        clientDistribution.expired || 0
    ];
    
    new Chart(clientCtx, {
        type: 'doughnut',
        data: {
            labels: chartLabels,
            datasets: [{
                data: chartData,
                backgroundColor: chartColors,
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const total = chartData.reduce((a, b) => a + b, 0);
                            const percentage = total > 0 ? ((context.parsed * 100) / total).toFixed(1) : '0';
                            return context.label + ': ' + context.parsed + ' (' + percentage + '%)';
                        }
                    }
                }
            }
        }
    });
}

function refreshDashboard() {
    const button = event.target;
    const originalText = button.innerHTML;
    button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Refreshing...';
    
    // Simulate refresh
    setTimeout(() => {
        button.innerHTML = originalText;
        location.reload();
    }, 1000);
}

function generateReport() {
    alert('Report generation functionality will be implemented here');
}

function viewNewRequests() {
    window.location.href = '/client-requests';
}

function viewPaymentScheduleReminders() {
    window.location.href = '{{ route("reseller.payment-schedule-reminders") }}';
}

function viewAssignedTickets() {
    window.location.href = '{{ route("reseller-tickets.index") }}';
}

function initializeTooltips() {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
}

function downloadBackup(event) {
    event.preventDefault();
    
    const button = event.target.closest('a');
    const originalContent = button.innerHTML;
    
    // Show loading state
    button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Preparing Backup...';
    button.classList.add('disabled');
    
    // Create a temporary link to trigger download
    const link = document.createElement('a');
    link.href = button.href;
    link.download = '';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    
    // Reset button state after a delay
    setTimeout(() => {
        button.innerHTML = originalContent;
        button.classList.remove('disabled');
        
        // Show success message
        showToast('success', 'Database backup ZIP download started!');
    }, 2000);
}

function showToast(type, message) {
    // Create toast element
    const toast = document.createElement('div');
    toast.className = `alert alert-${type === 'success' ? 'success' : 'danger'} alert-dismissible fade show position-fixed`;
    toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
    toast.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    document.body.appendChild(toast);
    
    // Auto remove after 5 seconds
    setTimeout(() => {
        if (toast.parentNode) {
            toast.parentNode.removeChild(toast);
        }
    }, 5000);
}
</script>
@endsection