@extends('layouts.app')

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

@section('content')
<div class="space-y-4 md:space-y-6" x-data="{ showModal: false }" x-cloak>
    <!-- Subscription Expiry Banner -->
    @if($subscriptionData)
        <div class="bg-gradient-to-r from-orange-600/90 to-red-600/90 backdrop-blur-xl border border-orange-500/30 rounded-xl md:rounded-2xl p-4 md:p-6 shadow-2xl text-white">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <i class="ti ti-alert-triangle text-2xl mr-3"></i>
                    <div>
                        <h5 class="text-lg font-semibold mb-1">Subscription Expiring Soon!</h5>
                        <p class="text-white/90 subscription-countdown">
                            Your subscription will expire in
                            <span class="font-bold">{{ $subscriptionData['days'] }} days, {{ $subscriptionData['hours'] }} hours, {{ $subscriptionData['minutes'] }} minutes</span>
                        </p>
                        <p class="text-white/80 text-sm mt-1">Expiry Date: {{ $subscriptionData['expiry_date'] }}</p>
                    </div>
                </div>
                <div class="flex space-x-2">
                    <a href="{{ route('plans.license') }}" class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg text-sm transition-all duration-300 border border-white/30">
                        Renew Now
                    </a>
                </div>
            </div>
        </div>
    @endif
    <!-- Welcome Banner + Quick Actions -->
    <div class="grid grid-cols-1 xl:grid-cols-2 gap-4 md:gap-6">
        {{-- <div class="bg-gradient-to-br from-red-600/80 to-yellow-600/80 backdrop-blur-xl border border-red-500/30 rounded-xl md:rounded-2xl p-4 md:p-6 shadow-2xl text-white">
            <div class="flex items-center mb-4">
                <div class="w-10 h-10 rounded-full overflow-hidden mr-4 bg-white/20">
                    <img src="{{ asset('assets/images/profile/user-1.jpg') }}" alt="" class="w-full h-full object-cover">
                </div>
                <h5 class="text-lg md:text-xl font-semibold">Welcome back {{ auth()->user()->name }}!</h5>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div class="bg-white/10 rounded-lg p-3">
                    <h3 class="text-xl md:text-2xl font-bold flex items-center">
                        {{ $currencySymbol }}{{ number_format($stats['todayRevenue'] ?? 0) }}
                        <i class="ti ti-arrow-up-right text-sm ml-1"></i>
                    </h3>
                    <p class="text-white/80 text-sm">Today's Sales</p>
                </div>
                <div class="bg-white/10 rounded-lg p-3">
                    <h3 class="text-xl md:text-2xl font-bold flex items-center">
                        {{ $stats['incomePercentageChange'] ?? 0 }}%
                        <i class="ti ti-arrow-up-right text-sm ml-1"></i>
                    </h3>
                    <p class="text-white/80 text-sm">Performance</p>
                </div>
            </div>
        </div> --}}

        {{-- <div class="bg-slate-800/90 backdrop-blur-xl border border-slate-700/50 rounded-xl md:rounded-2xl p-4 md:p-6 shadow-2xl">
            <div class="grid grid-cols-2 gap-3">
                <button @click="showModal = true; loadDashboardAccountNumber()" class="bg-gradient-to-r from-red-600 to-yellow-600 hover:from-red-700 hover:to-yellow-700 text-white px-4 py-3 rounded-lg text-sm transition-all">
                    Add Client
                </button>
                <a href="{{ route('reports.period-transactions') }}" class="bg-slate-700/50 hover:bg-slate-600/50 text-white px-4 py-3 rounded-lg text-sm text-center transition-all">
                    Reports
                </a>
                <a href="{{ route('nas.index') }}" class="bg-slate-700/50 hover:bg-slate-600/50 text-white px-4 py-3 rounded-lg text-sm text-center transition-all">
                    Sites
                </a>
                <a href="{{ route('sms.index') }}" class="bg-slate-700/50 hover:bg-slate-600/50 text-white px-4 py-3 rounded-lg text-sm text-center transition-all">
                    Bulk Message
                </a>
                <a href="{{ route('voucher.index') }}" class="bg-slate-700/50 hover:bg-slate-600/50 text-white px-4 py-3 rounded-lg text-sm text-center transition-all">
                    Vouchers
                </a>
                <a href="{{ route('customers.index') }}" class="bg-slate-700/50 hover:bg-slate-600/50 text-white px-4 py-3 rounded-lg text-sm text-center transition-all">
                    CRM
                </a>
            </div>
        </div> --}}
    </div>

    <!-- Client Statistics + Site Statistics -->
    <div class="grid grid-cols-1 xl:grid-cols-3 gap-4 md:gap-6">
        <div class="xl:col-span-2 bg-slate-800/90 backdrop-blur-xl border border-slate-700/50 rounded-xl md:rounded-2xl p-4 md:p-6 shadow-2xl">
            <div class="flex justify-between items-center mb-4">
                <h5 class="text-lg font-semibold text-white">Client Statistics</h5>
                <small class="text-slate-400" id="stats-last-updated">Updated: <span id="stats-timestamp">{{ now()->format('H:i:s') }}</span></small>
            </div>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="bg-slate-700/30 rounded-lg p-3">
                    <div class="flex items-center">
                        <i class="ti ti-users text-blue-400 text-xl mr-2"></i>
                        <div>
                            <h5 class="text-white font-semibold">{{ $stats['totalCustomers'] ?? 0 }}</h5>
                            <small class="text-slate-400">Total Users</small>
                        </div>
                    </div>
                </div>
                <div class="bg-slate-700/30 rounded-lg p-3">
                    <div class="flex items-center">
                        <i class="ti ti-user-check text-green-400 text-xl mr-2"></i>
                        <div>
                            <h5 class="text-white font-semibold">{{ $stats['activeCustomers'] ?? 0 }}</h5>
                            <small class="text-slate-400">Active Users</small>
                        </div>
                    </div>
                </div>
                <div class="bg-slate-700/30 rounded-lg p-3">
                    <div class="flex items-center">
                        <i class="ti ti-user-x text-red-400 text-xl mr-2"></i>
                        <div>
                            <h5 class="text-white font-semibold">{{ $stats['expiredCustomers'] ?? 0 }}</h5>
                            <small class="text-slate-400">Expired Users</small>
                        </div>
                    </div>
                </div>
                <div class="bg-slate-700/30 rounded-lg p-3">
                    <div class="flex items-center">
                        <i class="ti ti-wifi text-green-400 text-xl mr-2"></i>
                        <div>
                            <h5 class="text-white font-semibold" data-stat="onlineCustomers">{{ $stats['onlineCustomers'] ?? 0 }}</h5>
                            <small class="text-slate-400">Total Online</small>
                        </div>
                    </div>
                </div>
                <div class="bg-slate-700/30 rounded-lg p-3">
                    <div class="flex items-center">
                        <i class="ti ti-network text-blue-400 text-xl mr-2"></i>
                        <div>
                            <h5 class="text-white font-semibold" data-stat="onlinePPPoE">{{ $stats['onlinePPPoE'] ?? 0 }}</h5>
                            <small class="text-slate-400">Online PPPoE</small>
                        </div>
                    </div>
                </div>
                <div class="bg-slate-700/30 rounded-lg p-3">
                    <div class="flex items-center">
                        <i class="ti ti-device-mobile text-yellow-400 text-xl mr-2"></i>
                        <div>
                            <h5 class="text-white font-semibold" data-stat="onlineHotspot">{{ $stats['onlineHotspot'] ?? 0 }}</h5>
                            <small class="text-slate-400">Online Hotspot</small>
                        </div>
                    </div>
                </div>
                <div class="bg-slate-700/30 rounded-lg p-3">
                    <div class="flex items-center">
                        <i class="ti ti-router text-orange-400 text-xl mr-2"></i>
                        <div>
                            <h5 class="text-white font-semibold" data-stat="onlineDHCP">{{ $stats['onlineDHCP'] ?? 0 }}</h5>
                            <small class="text-slate-400">Online DHCP</small>
                        </div>
                    </div>
                </div>
                <div class="bg-slate-700/30 rounded-lg p-3">
                    <div class="flex items-center">
                        <i class="ti ti-settings text-purple-400 text-xl mr-2"></i>
                        <div>
                            <h5 class="text-white font-semibold" data-stat="onlineStatic">{{ $stats['onlineStatic'] ?? 0 }}</h5>
                            <small class="text-slate-400">Online Static</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-slate-800/90 backdrop-blur-xl border border-slate-700/50 rounded-xl md:rounded-2xl p-4 md:p-6 shadow-2xl">
            <div class="flex justify-between items-center mb-4">
                <h5 class="text-lg font-semibold text-white">Site Statistics</h5>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div class="bg-slate-700/30 rounded-lg p-3">
                    <div class="flex items-center">
                        <i class="ti ti-server-2 text-blue-400 text-xl mr-2"></i>
                        <div>
                            <h5 class="text-white font-semibold" id="total-sites">{{ $stats['totalSites'] ?? 0 }}</h5>
                            <small class="text-slate-400">Total</small>
                        </div>
                    </div>
                </div>
                <div class="bg-slate-700/30 rounded-lg p-3">
                    <div class="flex items-center">
                        <i class="ti ti-server-off text-yellow-400 text-xl mr-2"></i>
                        <div>
                            <h5 class="text-white font-semibold" id="inactive-sites">0</h5>
                            <small class="text-slate-400">Inactive</small>
                        </div>
                    </div>
                </div>
                <div class="bg-slate-700/30 rounded-lg p-3">
                    <div class="flex items-center">
                        <i class="ti ti-server text-green-400 text-xl mr-2"></i>
                        <div>
                            <h5 class="text-white font-semibold" id="online-nas">{{ $stats['onlineSites'] ?? 0 }}</h5>
                            <small class="text-slate-400">Online</small>
                        </div>
                    </div>
                </div>
                <div class="bg-slate-700/30 rounded-lg p-3">
                    <div class="flex items-center">
                        <i class="ti ti-server-off text-red-400 text-xl mr-2"></i>
                        <div>
                            <h5 class="text-white font-semibold" id="offline-nas">{{ $stats['offlineSites'] ?? 0 }}</h5>
                            <small class="text-slate-400">Offline</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="grid grid-cols-1 xl:grid-cols-3 gap-4 md:gap-6">
        <div class="bg-slate-800/90 backdrop-blur-xl border border-slate-700/50 rounded-xl md:rounded-2xl p-4 md:p-6 shadow-2xl">
            <div class="mb-4">
                <h5 class="text-lg font-semibold text-white">Daily Entries</h5>
            </div>
            <div class="w-full overflow-hidden chart-container">
                <div id="dailyEntries" style="height: 200px; width: 100%;"></div>
            </div>
            <div class="flex justify-between items-center mt-4">
                <h4 class="text-white text-xl font-bold">{{ $stats['todayEntries'] ?? 0 }} Entries</h4>

                @php
                    $entriesChange = $stats['percentageChangeEntries'] ?? 0;
                @endphp

                @if ($entriesChange <= 0)
                    <small class="text-red-400">{{ $entriesChange }}%</small>
                @else
                    <small class="text-green-400">+{{ $entriesChange }}%</small>
                @endif
            </div>
        </div>

        <div class="bg-slate-800/90 backdrop-blur-xl border border-slate-700/50 rounded-xl md:rounded-2xl p-4 md:p-6 shadow-2xl">
            <div class="mb-4">
                <h5 class="text-lg font-semibold text-white">Daily Income</h5>
                <p class="text-slate-400 text-sm">Last 7 days</p>
            </div>
            <div class="w-full overflow-hidden chart-container">
                <div id="dailyIncomeChart" style="height: 220px; width: 100%;"></div>
            </div>
        </div>

        <div class="bg-slate-800/90 backdrop-blur-xl border border-slate-700/50 rounded-xl md:rounded-2xl p-4 md:p-6 shadow-2xl">
            <div class="mb-4">
                <h5 class="text-lg font-semibold text-white">Monthly Earnings</h5>
            </div>
            <div class="w-full overflow-hidden chart-container">
                <div id="monthlyEarnings" style="height: 200px; width: 100%;"></div>
            </div>
            <div class="flex justify-between items-center mt-4">
                <h4 class="text-white text-xl font-bold">{{ $currencySymbol }}{{ number_format($stats['thisMonthIncome'] ?? 0) }}</h4>
                @php
                    $monthlyChange = $stats['monthlyPercentageChange'] ?? 0;
                @endphp

                @if ($monthlyChange <= 0)
                    <small class="text-red-400">{{ $monthlyChange }}%</small>
                @else
                    <small class="text-green-400">+{{ $monthlyChange }}%</small>
                @endif
            </div>
        </div>
    </div>

    <!-- Yearly Report + Recent Transactions -->
    <div class="grid grid-cols-1 xl:grid-cols-3 gap-4 md:gap-6">
        <div class="xl:col-span-2 bg-slate-800/90 backdrop-blur-xl border border-slate-700/50 rounded-xl md:rounded-2xl p-4 md:p-6 shadow-2xl">
            <div class="flex justify-between items-center mb-4">
                <h5 class="text-lg font-semibold text-white">Yearly Report</h5>
                <h4 class="text-red-400 text-xl font-bold">{{ $currencySymbol }}{{ number_format(array_sum($monthlyRevenue ?? [])) }}</h4>
            </div>
            <div class="w-full overflow-hidden chart-container">
                <div id="totalRevenueChart" style="height: 300px; width: 100%;"></div>
            </div>
        </div>

        <div class="bg-slate-800/90 backdrop-blur-xl border border-slate-700/50 rounded-xl md:rounded-2xl p-4 md:p-6 shadow-2xl">
            <div class="mb-4">
                <h5 class="text-lg font-semibold text-white">Recent Transactions</h5>
                <p class="text-slate-400 text-sm">Latest Payment Activities</p>
            </div>
            <div class="space-y-3">
                @forelse(($recentTransactions ?? [])->take(4) as $index => $transaction)
                @php
                    $colors = ['red', 'blue', 'green', 'yellow', 'purple'];
                    $color = $colors[$index % count($colors)];
                @endphp
                <div class="flex items-center justify-between p-3 bg-slate-700/30 rounded-lg">
                    <div class="flex items-center">
                        <div class="w-3 h-3 bg-{{ $color }}-400 rounded-full mr-3"></div>
                        <div>
                            <div class="text-white text-sm font-medium">{{ $transaction->mpesa_code ?? 'MP' . rand(100000, 999999) }}</div>
                            <div class="text-slate-400 text-xs">{{ $transaction->description ?? 'PPPoE Service' }}</div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-white text-sm font-medium">{{ $currencySymbol }}{{ number_format($transaction->amount, 0) }}</div>
                        <div class="text-slate-400 text-xs">{{ $transaction->created_at->format('M d Y H:i:s') }}</div>
                    </div>
                </div>
                @empty
                <div class="text-center py-8">
                    <div class="text-slate-400">No recent transactions</div>
                </div>
                @endforelse
            </div>
        </div>
    </div>

    <!-- Package Table + Top Users -->
    <div class="grid grid-cols-1 xl:grid-cols-3 gap-4 md:gap-6">
        <div class="xl:col-span-2 bg-slate-800/90 backdrop-blur-xl border border-slate-700/50 rounded-xl md:rounded-2xl shadow-2xl">
            <div class="p-4 md:p-6 border-b border-slate-700">
                <h5 class="text-lg font-semibold text-white">Package Subscriptions</h5>
                <p class="text-slate-400 text-sm">Revenue by Package Type</p>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-slate-700/50">
                        <tr>
                            <th class="px-4 md:px-6 py-3 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Package</th>
                            <th class="px-4 md:px-6 py-3 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Service Type</th>
                            <th class="px-4 md:px-6 py-3 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Subscription</th>
                            <th class="px-4 md:px-6 py-3 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Revenue</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-700">
                        @forelse($packageStats ?? [] as $package)
                        <tr class="hover:bg-slate-700/30 transition-colors">
                            <td class="px-4 md:px-6 py-3">
                                <div class="text-white font-medium">{{ $package['package_name'] ?? 'N/A' }}</div>
                            </td>
                            <td class="px-4 md:px-6 py-3">
                                <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-500/20 text-blue-400 border border-blue-500/30">
                                    {{ $package['service_type'] ?? 'N/A' }}
                                </span>
                            </td>
                            <td class="px-4 md:px-6 py-3">
                                <div class="text-white">{{ $package['total'] ?? 0 }}</div>
                            </td>
                            <td class="px-4 md:px-6 py-3">
                                <div class="text-white font-medium">{{ $currencySymbol }}{{ number_format($package['revenue'] ?? 0) }}</div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="px-6 py-8 text-center text-slate-400">No package data available</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="bg-slate-800/90 backdrop-blur-xl border border-slate-700/50 rounded-xl md:rounded-2xl shadow-2xl">
            <div class="p-4 md:p-6 border-b border-slate-700">
                <h5 class="text-lg font-semibold text-white">Top Data Users</h5>
                <p class="text-slate-400 text-sm">Highest Bandwidth Usage</p>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-slate-700/50">
                        <tr>
                            <th class="px-4 md:px-6 py-3 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Account</th>
                            <th class="px-4 md:px-6 py-3 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Usage</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-700">
                        @forelse($topDataUsers ?? [] as $user)
                            <tr class="hover:bg-slate-700/30 transition-colors">
                                <td class="px-4 md:px-6 py-3">
                                    <div class="text-white font-medium">{{ $user->account }}</div>
                                </td>
                                <td class="px-4 md:px-6 py-3">
                                    <div class="text-white">{{ number_format($user->download_gb) }} GB/{{ number_format($user->upload_gb) }} GB</div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="2" class="px-6 py-8 text-center text-slate-400">
                                    No usage data available
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Add Customer Modal -->
    <div x-show="showModal" x-transition class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div class="fixed inset-0 bg-black opacity-50" @click="showModal = false"></div>
            <div class="relative bg-slate-800 rounded-2xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto border border-slate-700">
                <div class="sticky top-0 bg-slate-800 px-6 py-4 border-b border-slate-700 flex justify-between items-center">
                    <h3 class="text-xl font-semibold text-white">Add New Customer</h3>
                    <button @click="showModal = false" class="text-slate-400 hover:text-white">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
                <div class="p-6">
                    <form action="{{ route('customers.store') }}" method="POST" id="dashboardCustomerForm" class="space-y-4">
                        @csrf
                        <input type="hidden" name="account" id="dashboard_account_number">

                        <!-- Service Type Selection -->
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Service Type *</label>
                            <select name="service" id="dashboard_service_type" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500" required>
                                <option value="">Select Service Type</option>
                                <option value="pppoe" selected>PPPoE</option>
                                <option value="dhcp">DHCP</option>
                                <option value="static">Static IP</option>
                            </select>
                        </div>

                        <!-- Account Information -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Account Number</label>
                                <input type="text" id="dashboard_preview_account" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white" readonly placeholder="Auto-generated">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Customer Type</label>
                                <select name="corporate" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500">
                                    <option value="0">Individual</option>
                                    <option value="1">Corporate</option>
                                </select>
                            </div>
                        </div>

                        <!-- Customer Information -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Full Name *</label>
                                <input type="text" name="fullname" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500" required>
                            </div>
                            <div class="dashboard-pppoe-field">
                                <label class="block text-sm font-medium text-slate-300 mb-2">Old Username (Optional)</label>
                                <input type="text" name="username" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500">
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Contact *</label>
                                <input type="text" name="contact" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500" required>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Email</label>
                                <input type="email" name="email" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500">
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Location</label>
                                <input type="text" name="location" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">House Number</label>
                                <input type="text" name="housenumber" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500">
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Apartment</label>
                                <input type="text" name="apartment" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Installation Fee</label>
                                <input type="number" name="charges" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500" step="0.01">
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">ONU Serial Number</label>
                                <input type="text" name="onu_serial_number" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">OLT Port</label>
                                <input type="text" name="olt_port" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500">
                            </div>
                        </div>

                        <!-- Service Specific Fields -->
                        <div id="dashboard_service_fields" style="display: none;" class="border-t border-slate-700 pt-4">
                            <h6 class="text-lg font-semibold text-white mb-4">Service Configuration</h6>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-slate-300 mb-2">Package</label>
                                    <select name="package_id" id="dashboard_package_select" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500">
                                        <option value="">Select Package</option>
                                    </select>
                                </div>
                                <div class="dashboard-pppoe-field hidden">
                                    <label class="block text-sm font-medium text-slate-300 mb-2">Password *</label>
                                    <div class="flex">
                                        <input type="text" name="password" id="dashboard_password" class="flex-1 bg-slate-700/50 border border-slate-600 rounded-l-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500">
                                        <button type="button" class="bg-slate-600 hover:bg-slate-500 text-white px-3 py-2 rounded-r-lg border border-slate-600 border-l-0" onclick="generateDashboardPassword()">Gen</button>
                                    </div>
                                </div>
                                <div class="dashboard-dhcp-field dashboard-static-field hidden">
                                    <label class="block text-sm font-medium text-slate-300 mb-2">MAC Address *</label>
                                    <input type="text" name="mac_address" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500" placeholder="00:11:22:33:44:55">
                                </div>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4 dashboard-static-only hidden">
                                <div>
                                    <label class="block text-sm font-medium text-slate-300 mb-2">Site *</label>
                                    <select name="nas_id" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500">
                                        <option value="">Select Site</option>
                                        @foreach(\App\Models\Nas::where('created_by', auth()->user()->creatorId())->get() as $site)
                                            <option value="{{ $site->id }}">{{ $site->shortname }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-300 mb-2">Assigned IP</label>
                                    <input type="text" name="assigned_ip" id="dashboard_assigned_ip" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-red-500 focus:border-red-500" placeholder="Auto-assigned">
                                </div>
                            </div>
                        </div>

                        <div class="flex justify-end space-x-3 pt-4 border-t border-slate-700">
                            <button type="button" @click="showModal = false" class="px-4 py-2 text-slate-400 hover:text-white transition-colors">
                                Cancel
                            </button>
                            <button type="submit" class="bg-gradient-to-r from-red-600 to-yellow-600 hover:from-red-700 hover:to-yellow-700 text-white px-6 py-2 rounded-lg transition-all duration-300 shadow-lg">
                                Create Customer
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
// Daily Entries Chart
var dailyEntriesOptions = {
    series: [{
        name: 'Daily Entries',
        data: @json($dailyEntries['data'] ?? [])
    }],
    chart: { type: 'line', height: 200, toolbar: { show: false }, zoom: { enabled: false } },
    colors: ['#696cff'],
    stroke: { curve: 'smooth', width: 3 },
    xaxis: {
        categories: @json($dailyEntries['labels'] ?? []),
        labels: { show: true, style: { fontSize: '10px', colors: '#94a3b8' } }
    },
    yaxis: { labels: { show: true, style: { fontSize: '10px', colors: '#94a3b8' } } },
    grid: { show: true, strokeDashArray: 3, borderColor: '#334155' },
    tooltip: { enabled: true, theme: 'dark' }
};
new ApexCharts(document.querySelector("#dailyEntries"), dailyEntriesOptions).render();

// Daily Income Chart
var dailyIncomeOptions = {
    series: [{
        name: 'Daily Income',
        data: @json($dailySales['data'] ?? [])
    }],
    chart: { type: 'bar', height: 220, toolbar: { show: false } },
    colors: ['#ff6384'],
    plotOptions: { bar: { borderRadius: 2, columnWidth: '60%' } },
    dataLabels: { enabled: false },
    xaxis: {
        categories: @json($dailySales['labels'] ?? []),
        labels: { show: true, style: { fontSize: '10px', colors: '#94a3b8' } }
    },
    yaxis: { labels: { show: true, style: { fontSize: '10px', colors: '#94a3b8' } } },
    grid: { show: true, strokeDashArray: 3, borderColor: '#334155' },
    tooltip: { enabled: true, theme: 'dark' }
};
new ApexCharts(document.querySelector("#dailyIncomeChart"), dailyIncomeOptions).render();

// Monthly Earnings Donut Chart
var monthlyEarningsData = @json($serviceIncome['data'] ?? []);
var monthlyEarningsLabels = @json($serviceIncome['labels'] ?? []);

console.log('Service Income Data:', monthlyEarningsData);
console.log('Service Income Labels:', monthlyEarningsLabels);

// Convert string values to numbers for ApexCharts
var numericData = monthlyEarningsData.map(value => parseFloat(value) || 0);

var monthlyEarningsOptions = {
    series: numericData,
    chart: {
        type: 'donut',
        height: 200,
        animations: {
            enabled: true
        }
    },
    labels: monthlyEarningsLabels,
    colors: ['#696cff', '#8592a3', '#ffae1f', '#fa896b'],
    dataLabels: {
        enabled: false
    },
    tooltip: {
        y: {
            formatter: function(val) {
                return '{{ $currencySymbol }}' + val
            }
        },
        theme: 'dark'
    },
    legend: {
        labels: {
            colors: '#94a3b8'
        }
    }
};
new ApexCharts(document.querySelector("#monthlyEarnings"), monthlyEarningsOptions).render();

// Total Revenue Chart
var totalRevenueOptions = {
    series: [{
        name: 'Revenue',
        data: @json($monthlyRevenue ?? [])
    }],
    chart: { type: 'bar', height: 300, toolbar: { show: false } },
    colors: ['#696cff'],
    dataLabels: { enabled: false },
    xaxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        labels: { style: { colors: '#94a3b8' } }
    },
    yaxis: { labels: { style: { colors: '#94a3b8' } } },
    plotOptions: { bar: { borderRadius: 4 } },
    grid: { borderColor: '#334155' },
    tooltip: { theme: 'dark' }
};
new ApexCharts(document.querySelector("#totalRevenueChart"), totalRevenueOptions).render();

// Dashboard Customer Form Logic
function generateDashboardPassword() {
    const chars = 'ABCDEFGHJKMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789';
    let password = '';
    for (let i = 0; i < 8; i++) {
        password += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    document.getElementById('dashboard_password').value = password;
}

document.addEventListener('DOMContentLoaded', function() {
    const dashboardServiceType = document.getElementById('dashboard_service_type');
    const dashboardServiceFields = document.getElementById('dashboard_service_fields');
    const dashboardPackageSelect = document.getElementById('dashboard_package_select');

    dashboardServiceType.addEventListener('change', function() {
        const service = this.value;

        if (service) {
            dashboardServiceFields.style.display = 'block';
            loadDashboardPackages(service);
            configureDashboardFields(service);
        } else {
            dashboardServiceFields.style.display = 'none';
        }
    });

    function configureDashboardFields(service) {
        document.querySelectorAll('.dashboard-pppoe-field, .dashboard-dhcp-field, .dashboard-static-field, .dashboard-static-only').forEach(el => el.classList.add('hidden'));

        if (service === 'pppoe') {
            document.querySelectorAll('.dashboard-pppoe-field').forEach(el => el.classList.remove('hidden'));
            generateDashboardPassword();
        } else if (service === 'dhcp') {
            document.querySelectorAll('.dashboard-dhcp-field').forEach(el => el.classList.remove('hidden'));
        } else if (service === 'static') {
            document.querySelectorAll('.dashboard-static-field, .dashboard-static-only').forEach(el => el.classList.remove('hidden'));
            loadDashboardNextStaticIP();
        }
    }

    function loadDashboardPackages(serviceType) {
        fetch(`/api/packages?type=${serviceType}`)
            .then(response => response.json())
            .then(data => {
                dashboardPackageSelect.innerHTML = '<option value="">Select Package</option>';
                data.forEach(package => {
                    const option = document.createElement('option');
                    option.value = package.id;
                    option.textContent = `${package.name_plan} - ${package.currency}${package.price}`;
                    dashboardPackageSelect.appendChild(option);
                });
            });
    }

    function loadDashboardNextStaticIP() {
        fetch('/api/next-static-ip')
            .then(response => response.json())
            .then(data => {
                if (data.ip) {
                    document.getElementById('dashboard_assigned_ip').value = data.ip;
                }
            });
    }

    // Load account number when modal opens
    window.loadDashboardAccountNumber = function() {
        fetch('/api/preview-account-number')
            .then(response => response.json())
            .then(data => {
                if (data.account_number) {
                    document.getElementById('dashboard_preview_account').value = data.account_number;
                    document.getElementById('dashboard_account_number').value = data.account_number;
                }
            })
            .catch(error => {
                console.error('Error loading account number:', error);
            });
    }

    // Auto-load PPPoE configuration since it's default
    if (dashboardServiceType.value === 'pppoe') {
        dashboardServiceFields.style.display = 'block';
        loadDashboardPackages('pppoe');
        configureDashboardFields('pppoe');
    }

    // Debug form submission
    document.getElementById('dashboardCustomerForm').addEventListener('submit', function(e) {
        const packageId = document.getElementById('dashboard_package_select').value;
        console.log('Package ID being submitted:', packageId);
        if (!packageId) {
            console.warn('No package selected!');
        }
    });

    // Load account number when page loads
    loadDashboardAccountNumber();
});

// Update online statistics every 30 seconds
function updateOnlineStats() {
    fetch('/api/online-stats')
        .then(response => response.json())
        .then(data => {
            // Update online customer statistics
            const onlineCustomersEl = document.querySelector('[data-stat="onlineCustomers"]');
            const onlinePPPoEEl = document.querySelector('[data-stat="onlinePPPoE"]');
            const onlineHotspotEl = document.querySelector('[data-stat="onlineHotspot"]');
            const onlineDHCPEl = document.querySelector('[data-stat="onlineDHCP"]');
            const onlineStaticEl = document.querySelector('[data-stat="onlineStatic"]');

            if (onlineCustomersEl) onlineCustomersEl.textContent = data.total || 0;
            if (onlinePPPoEEl) onlinePPPoEEl.textContent = data.pppoe || 0;
            if (onlineHotspotEl) onlineHotspotEl.textContent = data.hotspot || 0;
            if (onlineDHCPEl) onlineDHCPEl.textContent = data.dhcp || 0;
            if (onlineStaticEl) onlineStaticEl.textContent = data.static || 0;

            // Update timestamp
            const timestampEl = document.getElementById('stats-timestamp');
            if (timestampEl) {
                const now = new Date();
                timestampEl.textContent = now.toLocaleTimeString('en-US', { hour12: false });
            }
        })
        .catch(error => {
            console.log('Error updating online stats:', error);
            // Show error indicator
            const timestampEl = document.getElementById('stats-timestamp');
            if (timestampEl) {
                timestampEl.textContent = 'Error';
                timestampEl.style.color = '#ef4444';
            }
        });
}

// Update site statistics every 30 seconds
function updateSiteStats() {
    fetch('/api/site-stats')
        .then(response => response.json())
        .then(data => {
            document.getElementById('total-sites').textContent = data.totalSites;
            document.getElementById('online-nas').textContent = data.onlineSites;
            document.getElementById('offline-nas').textContent = data.offlineSites;
        })
        .catch(error => console.log('Error updating site stats:', error));
}

// Subscription countdown timer
@if($subscriptionData)
function updateSubscriptionCountdown() {
    const expiryDate = new Date('{{ \Carbon\Carbon::parse(auth()->user()->plan_expire_date)->toISOString() }}');
    const now = new Date();
    const diff = expiryDate - now;

    if (diff > 0) {
        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
        const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));

        const countdownText = document.querySelector('.subscription-countdown');
        if (countdownText) {
            countdownText.innerHTML = `Your subscription will expire in <span class="font-bold">${days} days, ${hours} hours, ${minutes} minutes</span>`;
        }
    }
}

// Update countdown every minute
setInterval(updateSubscriptionCountdown, 60000);
@endif

// Update stats on page load and every 30 seconds
document.addEventListener('DOMContentLoaded', function() {
    updateOnlineStats();
    updateSiteStats();
    setInterval(updateOnlineStats, 30000);
    setInterval(updateSiteStats, 30000);

    @if($subscriptionData)
    updateSubscriptionCountdown();
    @endif
});

</script>
@endpush
@endsection