@extends('layout.app')
@php
    use Carbon\Carbon;
@endphp

@push('styles')
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --success-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
            --danger-gradient: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);
            --info-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            --card-shadow-hover: 0 15px 40px rgba(0, 0, 0, 0.15);
        }

        body {
            background: #f5f7fa;
        }

        .modern-card {
            border-radius: 20px;
            border: none;
            box-shadow: var(--card-shadow);
            transition: all 0.3s ease;
            overflow: hidden;
            background: white;
        }

        .modern-card:hover {
            box-shadow: var(--card-shadow-hover);
            transform: translateY(-5px);
        }

        .profile-header {
            background: var(--primary-gradient);
            padding: 40px 30px;
            position: relative;
            overflow: hidden;
        }

        .profile-header::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
            animation: pulse 15s ease-in-out infinite;
        }

        @keyframes pulse {

            0%,
            100% {
                transform: scale(1);
                opacity: 0.5;
            }

            50% {
                transform: scale(1.1);
                opacity: 0.8;
            }
        }

        .profile-avatar {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border: 5px solid white;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            object-fit: cover;
            background: white;
            position: relative;
            z-index: 1;
        }

        .profile-avatar-placeholder {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border: 5px solid white;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 1;
            overflow: hidden;
        }

        .profile-avatar-placeholder::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
            animation: pulse 3s ease-in-out infinite;
        }

        .profile-avatar-placeholder .emoji {
            font-size: 4.5rem;
            line-height: 1;
            position: relative;
            z-index: 1;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
        }

        .status-badge {
            padding: 8px 20px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.85rem;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .status-badge.active {
            background: var(--success-gradient);
            color: white;
        }

        .status-badge.pending {
            background: var(--danger-gradient);
            color: white;
        }

        .info-section {
            background: white;
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 20px;
            border-left: 4px solid;
            transition: all 0.3s ease;
        }

        .info-section:hover {
            transform: translateX(5px);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
        }

        .info-section.service {
            border-left-color: #667eea;
        }

        .info-section.personal {
            border-left-color: #11998e;
        }

        .info-section.address {
            border-left-color: #ee0979;
        }

        .info-section.connection {
            border-left-color: #4facfe;
        }

        .section-title {
            font-size: 1.4rem;
            font-weight: 700;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            color: #2d3748;
        }

        .section-title i {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            font-size: 1.2rem;
        }

        .section-title.service i {
            background: linear-gradient(135deg, #667eea20, #764ba220);
            color: #667eea;
        }

        .section-title.personal i {
            background: linear-gradient(135deg, #11998e20, #38ef7d20);
            color: #11998e;
        }

        .section-title.address i {
            background: linear-gradient(135deg, #ee097920, #ff6a0020);
            color: #ee0979;
        }

        .section-title.connection i {
            background: linear-gradient(135deg, #4facfe20, #00f2fe20);
            color: #4facfe;
        }

        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
        }

        .info-item {
            background: #f8fafc;
            padding: 18px;
            border-radius: 12px;
            transition: all 0.3s ease;
            border: 1px solid #e2e8f0;
        }

        .info-item:hover {
            background: white;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transform: translateY(-2px);
        }

        .info-label {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #718096;
            font-weight: 600;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .info-value {
            font-size: 1rem;
            color: #2d3748;
            font-weight: 500;
        }

        .stat-card {
            background: white;
            border-radius: 15px;
            padding: 25px;
            text-align: center;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--primary-gradient);
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
        }

        .stat-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px;
            font-size: 1.5rem;
            color: white;
        }

        .stat-icon.download {
            background: var(--primary-gradient);
        }

        .stat-icon.upload {
            background: var(--danger-gradient);
        }

        .stat-value {
            font-size: 2rem;
            font-weight: 700;
            color: #2d3748;
            margin-bottom: 5px;
        }

        .stat-label {
            font-size: 0.85rem;
            color: #718096;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 600;
        }

        .action-btn {
            padding: 12px 30px;
            border-radius: 50px;
            font-weight: 600;
            border: none;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        }

        .action-btn.primary {
            background: var(--primary-gradient);
            color: white;
        }

        .action-btn.success {
            background: var(--success-gradient);
            color: white;
        }

        .action-btn.danger {
            background: var(--danger-gradient);
            color: white;
        }

        .action-btn.btn-light {
            background: white;
            color: #2d3748;
            border: 2px solid #e2e8f0;
        }

        .action-btn.btn-light:hover {
            background: #f7fafc;
            border-color: #cbd5e0;
            color: #1a202c;
        }

        .image-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }

        .gallery-item {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .gallery-item:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .gallery-item img {
            width: 100%;
            height: 150px;
            object-fit: cover;
        }

        .gallery-label {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
            color: white;
            padding: 10px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .timeline {
            position: relative;
            padding-left: 30px;
        }

        .timeline::before {
            content: '';
            position: absolute;
            left: 8px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: linear-gradient(to bottom, #667eea, #764ba2);
        }

        .timeline-item {
            position: relative;
            margin-bottom: 25px;
        }

        .timeline-item::before {
            content: '';
            position: absolute;
            left: -26px;
            top: 5px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: white;
            border: 3px solid #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

        .speed-monitor {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .noprint {
            transition: all 0.3s ease;
        }

        @media print {
            .noprint {
                display: none !important;
            }

            .modern-card {
                box-shadow: none;
            }
        }

        .tab-modern {
            background: white;
            border-radius: 15px;
            padding: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            display: inline-flex;
            gap: 5px;
        }

        .tab-modern .nav-link {
            border: none;
            border-radius: 10px;
            padding: 12px 25px;
            font-weight: 600;
            color: #718096;
            transition: all 0.3s ease;
        }

        .tab-modern .nav-link.active {
            background: var(--primary-gradient);
            color: white;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        }

        /* Enhanced Responsive Design */
        @media (max-width: 1200px) {
            .info-grid {
                grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            }
        }

        @media (max-width: 768px) {
            .profile-header {
                padding: 25px 20px;
            }

            .profile-avatar,
            .profile-avatar-placeholder {
                width: 120px;
                height: 120px;
                border-width: 4px;
            }

            .profile-avatar-placeholder .emoji {
                font-size: 3.5rem;
            }

            .section-title {
                font-size: 1.2rem;
            }

            .section-title i {
                width: 35px;
                height: 35px;
                font-size: 1rem;
            }

            .info-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .info-section {
                padding: 20px;
                border-radius: 12px;
            }

            .stat-card {
                padding: 20px;
            }

            .stat-value {
                font-size: 1.5rem;
            }

            .action-btn {
                padding: 10px 20px;
                font-size: 0.9rem;
            }

            .image-gallery {
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
                gap: 10px;
            }

            .gallery-item img {
                height: 120px;
            }

            .modern-card {
                border-radius: 15px;
            }
        }

        @media (max-width: 576px) {
            .profile-header {
                padding: 20px 15px;
            }

            .profile-avatar,
            .profile-avatar-placeholder {
                width: 100px;
                height: 100px;
            }

            .profile-avatar-placeholder .emoji {
                font-size: 3rem;
            }

            .section-title {
                font-size: 1.1rem;
                margin-bottom: 15px;
            }

            .info-item {
                padding: 15px;
            }

            .stat-card {
                padding: 15px;
            }

            .stat-icon {
                width: 50px;
                height: 50px;
                font-size: 1.2rem;
            }

            .stat-value {
                font-size: 1.3rem;
            }
        }

        /* Accessibility Improvements */
        .action-btn:focus,
        .info-item:focus,
        .gallery-item:focus {
            outline: 3px solid rgba(102, 126, 234, 0.5);
            outline-offset: 2px;
        }

        /* Smooth Scrolling */
        html {
            scroll-behavior: smooth;
        }

        /* Loading States */
        .loading-skeleton {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: loading 1.5s ease-in-out infinite;
        }

        @keyframes loading {
            0% {
                background-position: 200% 0;
            }

            100% {
                background-position: -200% 0;
            }
        }

        /* Enhanced Hover Effects */
        .info-item {
            cursor: pointer;
        }

        .info-item:active {
            transform: translateY(0);
        }

        /* Better Typography */
        .info-value {
            line-height: 1.6;
            word-break: break-word;
        }

        .info-label {
            line-height: 1.4;
        }

        /* Print Optimizations */
        @media print {
            .modern-card {
                page-break-inside: avoid;
                break-inside: avoid;
            }

            .info-section {
                page-break-inside: avoid;
                break-inside: avoid;
            }

            .profile-header {
                background: #667eea !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
        }

        /* Dark Mode Support (Optional) */
        @media (prefers-color-scheme: dark) {
            :root {
                --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
                --card-shadow-hover: 0 15px 40px rgba(0, 0, 0, 0.4);
            }

            body {
                background: #1a202c;
            }

            .modern-card,
            .info-section,
            .stat-card {
                background: #2d3748;
                color: #e2e8f0;
            }

            .info-item {
                background: #1a202c;
                border-color: #4a5568;
            }

            .info-item:hover {
                background: #2d3748;
            }

            .info-value {
                color: #e2e8f0;
            }

            .info-label {
                color: #a0aec0;
            }
        }

        /* Animation Performance */
        .modern-card,
        .info-item,
        .stat-card,
        .action-btn {
            will-change: transform;
        }

        /* Better Focus Indicators */
        button:focus-visible,
        a:focus-visible {
            outline: 2px solid #667eea;
            outline-offset: 2px;
            border-radius: 4px;
        }

        /* Improved Spacing */
        .container-fluid {
            padding-left: 20px;
            padding-right: 20px;
        }

        @media (min-width: 1200px) {
            .container-fluid {
                padding-left: 40px;
                padding-right: 40px;
            }
        }

        /* Enhanced Card Transitions */
        .modern-card {
            animation: fadeInUp 0.5s ease-out;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Stagger Animation for Info Items */
        .info-item {
            animation: fadeIn 0.4s ease-out backwards;
        }

        .info-item:nth-child(1) {
            animation-delay: 0.1s;
        }

        .info-item:nth-child(2) {
            animation-delay: 0.2s;
        }

        .info-item:nth-child(3) {
            animation-delay: 0.3s;
        }

        .info-item:nth-child(4) {
            animation-delay: 0.4s;
        }

        .info-item:nth-child(5) {
            animation-delay: 0.5s;
        }

        .info-item:nth-child(6) {
            animation-delay: 0.6s;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        /* Empty State Styling */
        .info-value:empty::before {
            content: 'N/A';
            color: #a0aec0;
            font-style: italic;
        }

        /* Better Badge Styling */
        .badge-light {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(10px);
        }

        /* Improved Profile Header Text */
        .profile-header h2 {
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        /* Enhanced Stat Cards */
        .stat-card.download::before {
            background: var(--primary-gradient);
        }

        .stat-card.upload::before {
            background: var(--danger-gradient);
        }

        /* Better Image Gallery on Mobile */
        @media (max-width: 576px) {
            .image-gallery {
                grid-template-columns: 1fr 1fr;
            }
        }

        /* Smooth Transitions for All Interactive Elements */
        * {
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Improved Scrollbar (Webkit browsers) */
        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
        }

        /* Better Text Selection */
        ::selection {
            background: rgba(102, 126, 234, 0.3);
            color: #1a202c;
        }

        /* Improved Loading States */
        .btn-loading {
            position: relative;
            color: transparent !important;
            pointer-events: none;
        }

        .btn-loading::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            top: 50%;
            left: 50%;
            margin-left: -8px;
            margin-top: -8px;
            border: 2px solid #ffffff;
            border-radius: 50%;
            border-top-color: transparent;
            animation: spin 0.6s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* Enhanced Focus States for Better Accessibility */
        .action-btn:focus-visible {
            outline: 3px solid rgba(102, 126, 234, 0.5);
            outline-offset: 3px;
        }

        /* Better Spacing for Action Buttons on Mobile */
        @media (max-width: 576px) {
            .action-btn {
                flex: 1;
                min-width: calc(50% - 5px);
                justify-content: center;
            }
        }
    </style>
@endpush

@section('content')
    @foreach ($list as $r)
        <div class="container-fluid">
            <!-- Profile Header -->
            <div class="modern-card mb-4">
                <div class="profile-header">
                    <div class="row align-items-center">
                        <div class="col-md-auto text-center text-md-left mb-3 mb-md-0">
                            @if (checkSettings('profilePicture') == 'enable' && $r->customer_profile_picture)
                                @if (checkSettings('store_image_to_s3') == 'enable')
                                    @php
                                        $s3Url = Storage::disk('s3')->url(
                                            'customer_profile_picture/' . $r->customer_profile_picture,
                                        );
                                    @endphp
                                    <img src="{{ $s3Url }}" alt="Profile" class="profile-avatar">
                                @else
                                    <img src="{{ asset('storage/customer_profile_picture/' . $r->customer_profile_picture) }}"
                                        alt="Profile" class="profile-avatar">
                                @endif
                            @else
                                <div class="profile-avatar-placeholder">
                                    <span class="emoji">👤</span>
                                </div>
                            @endif
                        </div>
                        <div class="col-md">
                            <h2 class="text-white font-weight-bold mb-2" style="position: relative; z-index: 1;">
                                {{ $r->clients_name }}
                            </h2>
                            <div class="d-flex flex-wrap gap-2 mb-3" style="position: relative; z-index: 1;">
                                @if ($r->client_approval == 'approved')
                                    <span class="status-badge active">
                                        <i class="fas fa-check-circle"></i> Active
                                    </span>
                                @else
                                    <span class="status-badge pending">
                                        <i class="fas fa-clock"></i> Pending
                                    </span>
                                @endif
                                <span class="badge badge-light px-3 py-2">
                                    <i class="fas fa-network-wired mr-1"></i> {{ $r->userid }} - Marketing Employee: {{ $r->marketing_employee_name ?? 'N/A' }} {{ $r->marketing_employee_phone ?? '' }}
                                </span>
                            </div>
                            <div class="row text-white" style="position: relative; z-index: 1;">
                                <div class="col-md-3 mb-2">
                                    <small class="d-block opacity-75">Package</small>
                                    <strong>{{ $r->package_name }}</strong>
                                </div>
                                <div class="col-md-3 mb-2">
                                    <small class="d-block opacity-75">Expire Date</small>
                                    <strong>{{ $r->expire_date ?? 'N/A' }}</strong>
                                </div>
                                <div class="col-md-3 mb-2">
                                    <small class="d-block opacity-75">Contact</small>
                                    <strong>{{ $r->contact_no }}</strong>
                                </div>
                                <div class="col-md-3 mb-2">
                                    <small class="d-block opacity-75">Pop</small>
                                    <strong>{{ $r->popname }}</strong>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="p-4 bg-light" style="border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;">
                    <div class="d-flex flex-wrap gap-2 align-items-center">
                        <a href="{{ route('clients.index') }}" class="action-btn btn-light"
                            aria-label="Go back to clients list">
                            <i class="fas fa-arrow-left" aria-hidden="true"></i> Back
                        </a>
                        @if (checkSettings('show-traffice') == 'enable' && $r->client_approval != 'pending')
                            <button class="action-btn primary" id="speedshow" aria-label="Show network speed monitor">
                                <i class="fas fa-tachometer-alt" aria-hidden="true"></i> Show Speed
                            </button>
                        @endif
                        <button class="action-btn btn-light noprint" onclick="window.print()" aria-label="Print this page">
                            <i class="fas fa-print" aria-hidden="true"></i> Print
                        </button>
                        @if ($customer_account > 0)
                            @can('mac-customer_destroy')
                                <form method="POST" action="{{ route('clients.destroy', $r->client_id) }}" class="ml-auto">
                                    @method('DELETE')
                                    @csrf
                                    <button onclick="return confirm('Are you sure you want to delete this client?');"
                                        type="submit" class="action-btn danger" aria-label="Delete this client">
                                        <i class="fas fa-trash" aria-hidden="true"></i> Delete
                                    </button>
                                </form>
                            @endcan
                        @endif
                    </div>
                </div>
            </div>

            <!-- Main Content -->
            <div class="row">
                <!-- Left Column - Information Sections -->
                <div class="col-lg-8">
                    @can('show-service-information')
                        <div class="info-section service modern-card mb-4">
                            <h3 class="section-title service">
                                <i class="fas fa-server"></i>
                                Service Information
                            </h3>
                            <div class="info-grid">
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-network-wired"></i> Pop Name
                                    </div>
                                    <div class="info-value">{{ $r->popname }}</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-calendar-alt"></i> Billing Cycle
                                    </div>
                                    <div class="info-value">{{ $r->billing_cycle }}</div>
                                </div>
                                @if (!$r->isStatic)
                                    <div class="info-item">
                                        <div class="info-label">
                                            <i class="fas fa-user"></i> Username
                                        </div>
                                        <div class="info-value">{{ $r->userid }}</div>
                                    </div>
                                    <div class="info-item">
                                        <div class="info-label">
                                            <i class="fas fa-key"></i> Password
                                        </div>
                                        <div class="info-value">{{ $r->password }}</div>
                                    </div>
                                @else
                                    <div class="info-item">
                                        <div class="info-label">
                                            <i class="fas fa-map-marker-alt"></i> IP Address
                                        </div>
                                        <div class="info-value">{{ $r->ip_address }}</div>
                                    </div>
                                @endif
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-box"></i> Package
                                    </div>
                                    <div class="info-value">{{ $r->package_name }}</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-clock"></i> Expire Date
                                    </div>
                                    <div class="info-value">{{ $r->expire_date ?? 'N/A' }}</div>
                                </div>
                                @if (globalPermission('free-day-to-create-customer'))
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-clock"></i> Free Day to Create Customer
                                    </div>
                                    <div class="info-value">{{ $r->free_day_to_create_customer ?? 'N/A' }}</div>
                                </div>
                                @endif
                                @if ($r->mac)
                                    <div class="info-item">
                                        <div class="info-label">
                                            <i class="fas fa-fingerprint"></i> MAC Address
                                        </div>
                                        <div class="info-value">{{ $r->mac }}</div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endcan

                    @can('show-personal-information')
                        <div class="info-section personal modern-card mb-4">
                            <h3 class="section-title personal">
                                <i class="fas fa-user-circle"></i>
                                Personal Information
                            </h3>

                            @if (checkSettings('profilePicture') == 'enable')
                                <div class="image-gallery mb-4">
                                    @if ($r->customer_agrement)
                                        <div class="gallery-item">
                                            @if (checkSettings('store_image_to_s3') == 'enable')
                                                <img src="{{ Storage::disk('s3')->url('customer_agrement/' . $r->customer_agrement) }}"
                                                    alt="Agreement">
                                            @else
                                                <img src="{{ asset('storage/customer_agrement/' . $r->customer_agrement) }}"
                                                    alt="Agreement">
                                            @endif
                                            <div class="gallery-label">Agreement</div>
                                        </div>
                                    @endif
                                    @if ($r->profilePicture)
                                        <div class="gallery-item">
                                            @if (checkSettings('store_image_to_s3') == 'enable')
                                                <img src="{{ Storage::disk('s3')->url('profilePicture/' . $r->profilePicture) }}"
                                                    alt="Form">
                                            @else
                                                <img src="{{ asset('storage/profilePicture/' . $r->profilePicture) }}"
                                                    alt="Form">
                                            @endif
                                            <div class="gallery-label">Form Picture</div>
                                        </div>
                                    @endif
                                </div>
                            @endif

                            <div class="info-grid">
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-user"></i> Full Name
                                    </div>
                                    <div class="info-value">{{ $r->clients_name }}</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-birthday-cake"></i> Date of Birth
                                    </div>
                                    <div class="info-value">
                                        @if ($r->dob)
                                            {{ date('d-M-Y', strtotime($r->dob)) }}
                                        @else
                                            N/A
                                        @endif
                                    </div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-phone"></i> Contact
                                    </div>
                                    <div class="info-value">{{ $r->contact_no ?? 'N/A' }}</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-envelope"></i> Email
                                    </div>
                                    <div class="info-value">{{ $r->email ?? 'N/A' }}</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-briefcase"></i> Occupation
                                    </div>
                                    <div class="info-value">{{ $r->occupation ?? 'N/A' }}</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-building"></i> Company Name
                                    </div>
                                    <div class="info-value">{{ $r->company_name ?? 'N/A' }}</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-user-tie"></i> Designation
                                    </div>
                                    <div class="info-value">{{ $r->designation ?? 'N/A' }}</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-male"></i> Father's Name
                                    </div>
                                    <div class="info-value">{{ $r->father_name ?? 'N/A' }}</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-female"></i> Mother's Name
                                    </div>
                                    <div class="info-value">{{ $r->mother_name ?? 'N/A' }}</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-id-card"></i> National ID
                                    </div>
                                    <div class="info-value">{{ $r->national_id ?? 'N/A' }}</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-passport"></i> Passport No
                                    </div>
                                    <div class="info-value">{{ $r->passport_no ?? 'N/A' }}</div>
                                </div>
                            </div>
                        </div>
                    @endcan

                    @can('show-address-information')
                        <div class="info-section address modern-card mb-4">
                            <h3 class="section-title address">
                                <i class="fas fa-map-marked-alt"></i>
                                Address Information
                            </h3>

                            @if (checkSettings('profilePicture') == 'enable')
                                <div class="image-gallery mb-4">
                                    @if ($r->picture)
                                        <div class="gallery-item">
                                            @if (checkSettings('store_image_to_s3') == 'enable')
                                                <img src="{{ Storage::disk('s3')->url('picture/' . $r->picture) }}"
                                                    alt="Building">
                                            @else
                                                <img src="{{ asset('storage/picture/' . $r->picture) }}" alt="Building">
                                            @endif
                                            <div class="gallery-label">Building Photo</div>
                                        </div>
                                    @endif
                                    @if ($r->client_door)
                                        <div class="gallery-item">
                                            @if (checkSettings('store_image_to_s3') == 'enable')
                                                <img src="{{ Storage::disk('s3')->url('client_door/' . $r->client_door) }}"
                                                    alt="Door">
                                            @else
                                                <img src="{{ asset('storage/client_door/' . $r->client_door) }}"
                                                    alt="Door">
                                            @endif
                                            <div class="gallery-label">Door Picture</div>
                                        </div>
                                    @endif
                                </div>
                            @endif

                            <div class="info-grid">
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-road"></i> Road Name
                                    </div>
                                    <div class="info-value">{{ $r->road_name ?? 'N/A' }}</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-sort-numeric-up"></i> Road No
                                    </div>
                                    <div class="info-value">{{ $r->road_no ?? 'N/A' }}</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-building"></i> Building Name
                                    </div>
                                    <div class="info-value">{{ $r->building_name ?? 'N/A' }}</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-hashtag"></i> Building No
                                    </div>
                                    <div class="info-value">{{ $r->building_no ?? 'N/A' }}</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-home"></i> Flat/Level No
                                    </div>
                                    <div class="info-value">{{ $r->flat_no ?? 'N/A' }}</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-cube"></i> Block/Sector
                                    </div>
                                    <div class="info-value">{{ $r->block_sector ?? 'N/A' }}</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-map-pin"></i> Area
                                    </div>
                                    <div class="info-value">{{ $r->area ?? 'N/A' }}</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-compass"></i> Coordinates
                                    </div>
                                    <div class="info-value">
                                        {{ $r->client_latitude ?? 'N/A' }}, {{ $r->client_longitude ?? 'N/A' }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endcan

                    @can('show-connection-information')
                        <div class="info-section connection modern-card mb-4">
                            <h3 class="section-title connection">
                                <i class="fas fa-plug"></i>
                                Connection Information
                            </h3>
                            <div class="timeline">
                                <div class="timeline-item">
                                    <div class="info-item">
                                        <div class="info-label">
                                            <i class="fas fa-calendar-check"></i> Connection Date
                                        </div>
                                        <div class="info-value">
                                            {{ date('d-M-Y h:i A', strtotime($r->created_at)) }}
                                            @if ($r->joinDate)
                                                <br><small class="text-muted">Join:
                                                    {{ date('d-M-Y', strtotime($r->joinDate)) }}</small>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="timeline-item">
                                    <div class="info-item">
                                        <div class="info-label">
                                            <i class="fas fa-user-tie"></i> Created By
                                        </div>
                                        <div class="info-value">
                                            @php
                                                $user = App\Models\User::withTrashed()->where('id', $r->created_by)->first();
                                            @endphp
                                            {{ $user->name ?? 'N/A' }}
                                            @if ($user)
                                                <br><small class="text-muted">{{ $user->mobile_number ?? '' }}</small>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                            @if ($r->bill_generate == 'yes')
                                <div class="info-grid mt-4">
                                    <div class="info-item">
                                        <div class="info-label">
                                            <i class="fas fa-ethernet"></i> Cable Type
                                        </div>
                                        <div class="info-value">{{ $r->cable_type ?? 'N/A' }}</div>
                                    </div>
                                    <div class="info-item">
                                        <div class="info-label">
                                            <i class="fas fa-ruler"></i> Cable Length
                                        </div>
                                        <div class="info-value">{{ $r->required_cable ?? 'N/A' }} m</div>
                                    </div>
                                    <div class="info-item">
                                        <div class="info-label">
                                            <i class="fas fa-barcode"></i> Cable ID
                                        </div>
                                        <div class="info-value">{{ $r->cable_id ?? 'N/A' }}</div>
                                    </div>
                                    <div class="info-item">
                                        <div class="info-label">
                                            <i class="fas fa-network-wired"></i> ONU Serial
                                        </div>
                                        <div class="info-value">{{ $r->onu_serial ?? 'N/A' }}</div>
                                    </div>
                                    <div class="info-item">
                                        <div class="info-label">
                                            <i class="fas fa-server"></i> OLT No
                                        </div>
                                        <div class="info-value">{{ $r->olt_pon ?? 'N/A' }}</div>
                                    </div>
                                    <div class="info-item">
                                        <div class="info-label">
                                            <i class="fas fa-sim-card"></i> OLT Card Slot
                                        </div>
                                        <div class="info-value">{{ $r->olt_no ?? 'N/A' }}</div>
                                    </div>
                                    <div class="info-item">
                                        <div class="info-label">
                                            <i class="fas fa-plug"></i> PON Port
                                        </div>
                                        <div class="info-value">{{ $r->pon_port ?? 'N/A' }}</div>
                                    </div>
                                </div>
                            @endif

                            <div class="info-grid mt-4">
                                <div class="info-item">
                                    <div class="info-label">
                                        <i class="fas fa-wifi"></i> Remote Access
                                    </div>
                                    <div class="info-value">{{ $r->remote_access == 'Yes' ? 'Enabled' : 'Disabled' }}</div>
                                </div>
                                @if ($r->remote_access == 'Yes')
                                    <div class="info-item">
                                        <div class="info-label">
                                            <i class="fas fa-user-shield"></i> Remote Username
                                        </div>
                                        <div class="info-value">{{ $r->remote_access_username ?? 'N/A' }}</div>
                                    </div>
                                    <div class="info-item">
                                        <div class="info-label">
                                            <i class="fas fa-lock"></i> Remote Password
                                        </div>
                                        <div class="info-value">{{ $r->remote_access_password ?? 'N/A' }}</div>
                                    </div>
                                    <div class="info-item">
                                        <div class="info-label">
                                            <i class="fas fa-door-open"></i> Remote Port
                                        </div>
                                        <div class="info-value">{{ $r->remote_access_port ?? 'N/A' }}</div>
                                    </div>
                                @endif
                                @if ($r->remarks)
                                    <div class="info-item" style="grid-column: 1 / -1;">
                                        <div class="info-label">
                                            <i class="fas fa-comment"></i> Remarks
                                        </div>
                                        <div class="info-value">{{ $r->remarks }}</div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endcan
                </div>

                <!-- Right Column - Stats & Speed Monitor -->
                <div class="col-lg-4">
                    @if (checkSettings('show-traffice') == 'enable' && $r->client_approval != 'pending')
                        <input type="hidden" id="user_Id" name="user_id" value="{{ $r->id }}">
                        <input type="hidden" id="admin_user_Id" name="admin_user_Id" value="{{ $user_id }}">

                        <!-- Speed Chart -->
                        <div class="speed-monitor modern-card mb-4" id="addcsnvaus" style="display: none;">
                            <h5 class="text-center font-weight-bold mb-4">
                                <i class="fas fa-chart-line text-primary mr-2"></i>
                                Real-Time Speed Monitor
                            </h5>
                            <canvas id="myChart" style="max-height: 300px;"></canvas>
                        </div>

                        <!-- Session Details -->
                        <div class="modern-card mb-4">
                            <div class="p-4">
                                <h5 class="font-weight-bold mb-4 d-flex align-items-center">
                                    <div class="stat-icon download mr-3"
                                        style="width: 45px; height: 45px; font-size: 1.2rem;">
                                        <i class="fas fa-network-wired"></i>
                                    </div>
                                    Session Details
                                </h5>

                                <div class="info-item mb-3">
                                    <div class="info-label">
                                        <i class="fas fa-clock"></i> Last Link Up
                                    </div>
                                    <div class="info-value">
                                        {{ $bandwidthUsage ? parseDate($bandwidthUsage['last-link-up-time']) : 'N/A' }}
                                    </div>
                                </div>

                                <div class="info-item mb-3">
                                    <div class="info-label">
                                        <i class="fas fa-sign-out-alt"></i> Last Logout
                                    </div>
                                    <div class="info-value">
                                        {{ $lastLogoutTime ? parseDate($lastLogoutTime) : 'N/A' }}
                                    </div>
                                </div>

                                <div class="info-item mb-3">
                                    <div class="info-label">
                                        <i class="fas fa-fingerprint"></i> Client MAC
                                    </div>
                                    <div class="info-value font-monospace">
                                        {{ $activeClientInfo ? $activeClientInfo['caller-id'] : 'N/A' }}
                                    </div>
                                </div>

                                <div class="info-item mb-3">
                                    <div class="info-label">
                                        <i class="fas fa-industry"></i> Vendor
                                    </div>
                                    <div class="info-value">
                                        {{ $vendorName ?? 'N/A' }}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Usage Stats -->
                        <div class="row">
                            <div class="col-6 mb-4">
                                <div class="stat-card">
                                    <div class="stat-icon download">
                                        <i class="fas fa-download"></i>
                                    </div>
                                    <div class="stat-value">
                                        {{ number_format(($bandwidthUsage ? $bandwidthUsage['tx-byte'] : 0) / 1073741824, 2) }}
                                    </div>
                                    <div class="stat-label">GB Downloaded</div>
                                </div>
                            </div>
                            <div class="col-6 mb-4">
                                <div class="stat-card">
                                    <div class="stat-icon upload">
                                        <i class="fas fa-upload"></i>
                                    </div>
                                    <div class="stat-value">
                                        {{ number_format(($bandwidthUsage ? $bandwidthUsage['rx-byte'] : 0) / 1073741824, 2) }}
                                    </div>
                                    <div class="stat-label">GB Uploaded</div>
                                </div>
                            </div>
                        </div>
                    @endif

                    <!-- Approval Actions -->
                    @php($permissions = userPermissions())
                    @if (checkSettings('local-user-first-approve') == 'enable')
                        @if (in_array('local-user-first-approve', $permissions) && $r->first_approval == 'Pending')
                            <div class="modern-card mb-4">
                                <div class="p-4">
                                    <form action="{{ route('firstApproveAllPending') }}" method="post">
                                        @csrf
                                        <input type="hidden" name="first_client_ids[]" value="{{ $r->client_id }}">
                                        <button class="btn btn-block action-btn success" style="width: 100%;">
                                            <i class="fas fa-check-circle"></i> Final Approve
                                        </button>
                                    </form>
                                </div>
                            </div>
                        @elseif (in_array('new-customer-approve', $permissions) && $r->client_approval == 'pending')
                            <div class="modern-card mb-4">
                                <div class="p-4">
                                    <form action="{{ route('approveAllPending') }}" method="post">
                                        @csrf
                                        <input type="hidden" name="client_ids[]" value="{{ $r->client_id }}">
                                        <button class="btn btn-block action-btn success" style="width: 100%;">
                                            <i class="fas fa-check-circle"></i> Approve Client
                                        </button>
                                    </form>
                                </div>
                            </div>
                        @endif
                    @else
                        @if (in_array('new-customer-approve', $permissions) && $r->client_approval == 'pending')
                            <div class="modern-card mb-4">
                                <div class="p-4">
                                    <form action="{{ route('approveAllPending') }}" method="post">
                                        @csrf
                                        <input type="hidden" name="client_ids[]" value="{{ $r->client_id }}">
                                        <button class="btn btn-block action-btn success" style="width: 100%;">
                                            <i class="fas fa-check-circle"></i> Approve Client
                                        </button>
                                    </form>
                                </div>
                            </div>
                        @endif
                    @endif

                    @if (globalPermission('onu_information_laser'))
                        @can('onu_information_laser')
                            @isset($onuInfo->laser)
                                <div class="modern-card mb-4">
                                    <div class="p-4">
                                        <h5 class="font-weight-bold mb-4 d-flex align-items-center">
                                            <div class="stat-icon"
                                                style="width: 45px; height: 45px; font-size: 1.2rem; background: var(--info-gradient);">
                                                <i class="fas fa-signal"></i>
                                            </div>
                                            ONU Information
                                        </h5>

                                        <div class="info-item mb-3">
                                            <div class="info-label">
                                                <i class="fas fa-server"></i> OLT
                                            </div>
                                            <div class="info-value">{{ $onuInfo->oltaddress ?? 'N/A' }} -
                                                {{ $onuInfo->oltName ?? 'N/A' }}</div>
                                        </div>

                                        <div class="info-item mb-3">
                                            <div class="info-label">
                                                <i class="fas fa-bolt"></i> Power (Laser)
                                            </div>
                                            <div class="info-value text-success font-weight-bold">{{ $onuInfo->laser ?? 'N/A' }}
                                            </div>
                                        </div>

                                        <div class="info-item mb-3">
                                            <div class="info-label">
                                                <i class="fas fa-plug"></i> PON ID / VLAN
                                            </div>
                                            <div class="info-value">{{ $onuInfo->interface ?? 'N/A' }} /
                                                {{ $onuInfo->Vlan ?? 'N/A' }}</div>
                                        </div>

                                        <div class="info-item mb-3">
                                            <div class="info-label">
                                                <i class="fas fa-fingerprint"></i> Device MAC
                                            </div>
                                            <div class="info-value font-monospace">
                                                {{ strtoupper(implode(':', str_split($onuInfo->mac ?? '', 2))) ?: 'N/A' }}
                                            </div>
                                        </div>

                                        <div class="info-item">
                                            <div class="info-label">
                                                <i class="fas fa-sync-alt"></i> Last Update
                                            </div>
                                            <div class="info-value">
                                                {{ isset($onuInfo->updated_at) ? Carbon::parse($onuInfo->updated_at)->format('d-m-Y h:i A') : 'N/A' }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endisset
                        @endcan
                    @endif
                </div>
            </div>
        </div>
    @endforeach

    <!-- Image Modal -->
    <div class="modal fade" id="imageModal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content" style="border-radius: 15px; border: none;">
                <div class="modal-header border-0">
                    <h5 class="modal-title font-weight-bold">Image Preview</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center p-0">
                    <img id="modalImage" src="" alt="Preview"
                        style="max-width: 100%; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;">
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://js.pusher.com/7.0/pusher.min.js"></script>
@endpush

@section('ajax')
    <script>
        // Image gallery click handler
        $(document).ready(function() {
            $('.gallery-item').click(function() {
                const imgSrc = $(this).find('img').attr('src');
                $('#modalImage').attr('src', imgSrc);
                $('#imageModal').modal('show');
            });
        });

        // Speed monitoring functionality
        function create_UUID() {
            var dt = new Date().getTime();
            var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                var r = (dt + Math.random() * 16) % 16 | 0;
                dt = Math.floor(dt / 16);
                return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
            });
            return uuid;
        }

        const data = {
            labels: [],
            datasets: [{
                label: 'Downloads',
                backgroundColor: 'rgba(102, 126, 234, 0.2)',
                borderColor: '#667eea',
                data: [],
                tension: 0.4,
                fill: true,
                borderWidth: 3,
            }, {
                label: 'Uploads',
                backgroundColor: 'rgba(238, 9, 121, 0.2)',
                borderColor: '#ee0979',
                data: [],
                tension: 0.4,
                fill: true,
                borderWidth: 3,
            }]
        };

        const config = {
            type: 'line',
            data: data,
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            usePointStyle: true,
                            padding: 15,
                            font: {
                                size: 12,
                                weight: '600'
                            }
                        }
                    },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
                        padding: 12,
                        borderRadius: 8,
                        titleFont: {
                            size: 14,
                            weight: 'bold'
                        },
                        bodyFont: {
                            size: 13
                        },
                        callbacks: {
                            label: function(context) {
                                let label = context.dataset.label || '';
                                if (label) label += ': ';
                                const value = context.parsed.y;
                                label += value > 1 ? value.toFixed(2) + ' Mbps' : (value * 1024).toFixed(2) +
                                    ' Kbps';
                                return label;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)',
                            drawBorder: false,
                        },
                        ticks: {
                            callback: function(value) {
                                return value > 1 ? value + ' Mb' : (value * 1024).toFixed(0) + ' Kb';
                            },
                            font: {
                                size: 11
                            }
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            font: {
                                size: 10
                            }
                        }
                    }
                }
            }
        };

        const myChart = new Chart(document.getElementById('myChart'), config);

        $('#speedshow').click(function() {
            $(this).prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-2"></i>Loading...');
            $('#addcsnvaus').slideDown();

            const uuid = create_UUID();

            const currentTime = () => {
                const today = new Date();
                return today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
            }

            const addData = (chart, download, upload) => {
                const time = currentTime();
                chart.data.datasets[0].label = download > 1 ?
                    `Download ${download.toFixed(2)} Mbps` :
                    `Download ${(download * 1024).toFixed(2)} Kbps`;
                chart.data.datasets[1].label = upload > 1 ?
                    `Upload ${upload.toFixed(2)} Mbps` :
                    `Upload ${(upload * 1024).toFixed(2)} Kbps`;

                chart.data.labels.push(time);
                chart.data.datasets[0].data.push(download);
                chart.data.datasets[1].data.push(upload);
                chart.update();
            }

            const removeData = (chart) => {
                chart.data.labels.shift();
                chart.data.datasets.forEach((dataset) => {
                    dataset.data.shift();
                });
                chart.update();
            }

            const pusher = new Pusher('{{ config('broadcasting.connections.pusher.key') }}', {
                cluster: '{{ config('broadcasting.connections.pusher.options.cluster') }}'
            });

            const channel = pusher.subscribe(uuid);

            channel.bind('my-event', function(data) {
                const speed = JSON.parse(JSON.parse(JSON.stringify(data)).message)[0];
                const upload = speed["rx-bits-per-second"] / 1048576;
                const download = speed["tx-bits-per-second"] / 1048576;

                if (myChart.data.datasets[0].data.length > 15) {
                    removeData(myChart);
                }
                addData(myChart, download, upload);
            });

            $.ajax({
                type: 'GET',
                url: '{{ route('getSpeed') }}',
                data: {
                    id: $('#user_Id').val(),
                    uuid: uuid,
                },
                success: function(data) {
                    $('#speedshow').prop('disabled', false).html(
                        '<i class="fas fa-tachometer-alt"></i> Show Speed');
                },
                error: function(request, error) {
                    toastr.error(request.responseText);
                    $('#speedshow').prop('disabled', false).html(
                        '<i class="fas fa-tachometer-alt"></i> Show Speed');
                    $('#addcsnvaus').slideUp();
                }
            });
        });
    </script>
@endsection