@extends('layouts.admin')

@section('content')
    <!-- Bootstrap Links -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        :root {
            --primary-color: #4839F5;
            --secondary-color: #6247FF;
            --accent-color: #FF6B5B;
            --text-color: #2D2D3F;
            --light-bg: #f8f9ff;
            --card-bg: #ffffff;
            --border-radius: 12px;
            --shadow: 0 4px 20px rgba(72, 57, 245, 0.1);
        }

        body {
            background-color: var(--light-bg);
            color: var(--text-color);
            font-family: 'Poppins', sans-serif;
        }

        .user-details-container {
            background: linear-gradient(135deg, #f8f9ff 0%, #eff0ff 100%);
            min-height: 100vh;
            padding: 2rem;
        }

        .page-title {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 1.5rem;
        }

        .custom-card {
            background: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 2rem;
            border: none;
            margin-bottom: 2rem;
        }

        .user-profile-header {
            display: flex;
            align-items: center;
            margin-bottom: 2rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid rgba(72, 57, 245, 0.1);
        }

        .user-avatar {
            width: 100px;
            height: 100px;
            background-color: var(--primary-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2.5rem;
            margin-right: 2rem;
        }

        .user-info-header h3 {
            margin-bottom: 0.25rem;
            color: var(--primary-color);
            font-weight: 600;
        }

        .role-badge {
            font-size: 0.75rem;
            padding: 0.5rem 0.75rem;
            border-radius: 50px;
            font-weight: 500;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            display: inline-block;
            margin-top: 0.5rem;
        }

        .info-section {
            margin-bottom: 1.5rem;
        }

        .info-section h4 {
            color: var(--primary-color);
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
        }

        .info-section h4 i {
            margin-right: 0.5rem;
        }

        .info-item {
            display: flex;
            margin-bottom: 1rem;
            padding: 0.75rem;
            background-color: var(--light-bg);
            border-radius: var(--border-radius);
        }

        .info-item .info-label {
            font-weight: 600;
            min-width: 150px;
            color: var(--text-color);
        }

        .info-item .info-value {
            flex-grow: 1;
        }

        .plan-info {
            padding: 1.5rem;
            border-radius: var(--border-radius);
            background-color: var(--light-bg);
            margin-bottom: 1.5rem;
        }

        .plan-info.active {
            background: linear-gradient(135deg, #e4f9ef 0%, #d0f4e6 100%);
            border-left: 4px solid #28C76F;
        }

        .plan-info.inactive {
            background: linear-gradient(135deg, #fdeee9 0%, #fde0d9 100%);
            border-left: 4px solid var(--accent-color);
        }

        .plan-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .monitoring-card {
            margin-bottom: 1rem;
            padding: 1rem;
            border-radius: var(--border-radius);
            background-color: var(--light-bg);
            border-left: 4px solid var(--secondary-color);
        }

        .monitoring-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;
        }

        .monitoring-details {
            font-size: 0.9rem;
            color: #666;
        }

        .btn-primary {
            background-color: var(--primary-color);
            border: none;
        }

        .btn-primary:hover {
            background-color: var(--secondary-color);
        }

        .btn-outline-primary {
            color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .btn-outline-primary:hover {
            background-color: var(--primary-color);
            color: white;
        }

        .form-control {
            border-radius: var(--border-radius);
            padding: 0.75rem 1.25rem;
            border: 2px solid #e0e0ff;
            transition: all 0.3s ease;
            background-color: #f8f9ff;
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.25rem rgba(72, 57, 245, 0.25);
        }

        .plan-options {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-top: 1rem;
        }

        .plan-option {
            background-color: white;
            border: 2px solid #e0e0ff;
            border-radius: var(--border-radius);
            padding: 1rem;
            width: calc(33.333% - 0.67rem);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .plan-option:hover {
            border-color: var(--primary-color);
            box-shadow: 0 5px 15px rgba(72, 57, 245, 0.1);
        }

        .plan-option.selected {
            border-color: var(--primary-color);
            background-color: rgba(72, 57, 245, 0.05);
        }

        .plan-option h5 {
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }

        .plan-price {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 0.5rem;
        }

        .plan-duration {
            font-size: 0.9rem;
            color: #666;
        }

        .back-link {
            display: inline-flex;
            align-items: center;
            color: var(--primary-color);
            margin-bottom: 1rem;
            font-weight: 500;
        }

        .back-link:hover {
            text-decoration: underline;
        }

        .back-link i {
            margin-right: 0.5rem;
        }
        .table-responsive {
    border-radius: var(--border-radius);
    background: var(--card-bg);
    box-shadow: var(--shadow);
}

.table {
    margin-bottom: 0;
}

.table th {
    background-color: var(--light-bg);
    color: var(--primary-color);
    font-weight: 600;
    border-bottom: 2px solid rgba(72, 57, 245, 0.1);
}

.table td {
    vertical-align: middle;
    border-bottom: 1px solid rgba(72, 57, 245, 0.1);
}

.table-hover tbody tr:hover {
    background-color: rgba(72, 57, 245, 0.05);
}

.monitor-icon {
    font-size: 1.2rem;
}

.url-link {
    color: var(--primary-color);
}

.url-link:hover {
    text-decoration: underline;
}

.monitoring-badge {
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 500;
}

.bg-purple {
    background-color: #6f42c1;
    color: white;
}
.edit{
    justify-content: end;
    display: flex;
    align-items: center;
}
    </style>

<div class="user-details-container">
        <div class="container">
            <!-- Back Link -->
            <a href="{{ route('admin.users.index') }}" class="back-link">
                <i class="fas fa-arrow-left"></i> Back to Users List
            </a>

            <!-- Header Section -->
            <div class="row mb-4">
                <div class="col-12">
                    <h2 class="page-title"><i class="fas fa-user-circle me-2"></i>User Details</h2>
                </div>
            </div>

            <!-- User Profile Card -->
            <div class="custom-card">
                <div class="container d-flex">
                    <div class="user-profile-header">
                        <div class="user-avatar">
                            <i class="fas fa-user"></i>
                        </div>
                        <div class="user-info-header">
                            <h3>{{ $user->name }}</h3>
                            <div class="text-muted">{{ $user->email }}</div>
                            <span class="role-badge
                                {{ $user->role === 'admin' ? 'bg-danger' :
                                ($user->role === 'sub_admin' ? 'bg-warning' : 'bg-info') }}">
                                {{ ucfirst($user->role) }}
                            </span>
                        </div>
                    </div>
                    @if (auth()->user()->isAdmin())
                        <div class="container edit">
                            <a href="{{ route('admin.users.edit', $user) }}" class="btn btn-warning"
                                data-bs-toggle="tooltip" title="Edit User">
                                <i class="fas fa-edit"></i>
                            </a>
                        </div>
                    @endif
                </div>

                <!-- Basic Information -->
                <div class="info-section">
                    <h4><i class="fas fa-info-circle"></i> Basic Information</h4>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">User ID:</div>
                                <div class="info-value">{{ $user->id }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Username:</div>
                                <div class="info-value">{{ $user->username ?? 'Not set' }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Phone Number:</div>
                                <div class="info-value">{{ $user->phone_number ?? 'Not set' }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">Created On:</div>
                                <div class="info-value">{{ $user->created_at->format('F j, Y, g:i a') }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Last Updated:</div>
                                <div class="info-value">{{ $user->updated_at->format('F j, Y, g:i a') }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Last Login:</div>
                                <div class="info-value">{{ $user->last_login_at ? $user->last_login_at->format('F j, Y, g:i a') : 'Never' }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Subscription Plan Information -->
                <div class="info-section">
                    <h4><i class="fas fa-crown"></i> Subscription Plan</h4>

                    @if(isset($user->subscription) && $user->subscription->isActive())
                        <div class="plan-info active">
                            <div class="plan-header">
                                <h5 class="mb-0">{{ $user->subscription->plan->name }}</h5>
                                <span class="badge bg-success">Active</span>
                            </div>
                            <div class="row mt-3">
                                <div class="col-md-6">
                                    <div class="info-item">
                                        <div class="info-label">Start Date:</div>
                                        <div class="info-value">{{ $user->subscription->starts_at->format('F j, Y') }}</div>
                                    </div>
                                    <div class="info-item">
                                        <div class="info-label">End Date:</div>
                                        <div class="info-value">{{ $user->subscription->ends_at->format('F j, Y') }}</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="info-item">
                                        <div class="info-label">Price:</div>
                                        <div class="info-value">
                                            ${{ $user->subscription->amount ?? $user->subscription->plan->price }} / {{ $user->subscription->billing_cycle }}
                                        </div>
                                    </div>
                                    <div class="info-item">
                                        <div class="info-label">Status:</div>
                                        <div class="info-value">
                                            @if($user->subscription->ends_at->isPast())
                                                <span class="text-danger">Expired</span>
                                            @else
                                                <span class="text-success">Active ({{ $user->subscription->ends_at->diffForHumans() }})</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mt-3">
                                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#changePlanModal">
                                    <i class="fas fa-sync-alt me-2"></i>Change Plan
                                </button>
                                <button class="btn btn-outline-danger ms-2" data-bs-toggle="modal" data-bs-target="#cancelSubscriptionModal">
                                    <i class="fas fa-ban me-2"></i>Cancel Subscription
                                </button>
                            </div>
                        </div>
                    @else
                        <div class="plan-info inactive">
                            <div class="plan-header">
                                <h5 class="mb-0">No Active Subscription</h5>
                                <span class="badge bg-danger">Inactive</span>
                            </div>
                            <p class="mt-3">This user does not have an active subscription plan.</p>
                            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#assignPlanModal">
                                <i class="fas fa-plus me-2"></i>Assign a Plan
                            </button>
                        </div>
                    @endif
                </div>

                <!-- User Monitoring Information -->
                <div class="info-section">
                    <h4><i class="fas fa-chart-line"></i> User Monitoring</h4>

                    @if(isset($user->monitorings) && $user->monitorings->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover" id="userMonitoringTable">
                                <thead>
                                    <tr>
                                        <th>Website</th>
                                        <th>URL/Domain</th>
                                        <th class="text-center">Type</th>
                                        <th class="text-center">Status</th>
                                        <th class="text-center">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($user->monitorings as $monitor)
                                        @php
                                            $isEmailHealth = $monitor->monitoring_type === 'email_health';
                                            $isSSLMonitoring = $monitor->monitoring_type === 'ssl';
                                            $isKeywordMonitoring = $monitor->monitoring_type === 'keyword';
                                            $isElementMonitoring = $monitor->monitoring_type === 'element';
                                            $isServerMonitoring = $monitor->monitoring_type === 'server';
                                            $isFullPage = $monitor->monitoring_type === 'full_page';
                                            $latestResponse = $monitor->websiteStats->last();
                                            $statusClass = $latestResponse && $latestResponse->response_time < 3 ? 'status-good' : 'status-bad';
                                        @endphp
                                        <tr class="monitor-row" data-monitor-type="{{ $monitor->monitoring_type }}"
                                            data-status="{{ $latestResponse ? ($latestResponse->response_time < 3 ? 'up' : 'down') : 'unknown' }}">
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <i class="fas @if ($isEmailHealth) fa-envelope @elseif ($isSSLMonitoring) fa-lock
                                                        @elseif ($isKeywordMonitoring) fa-key @elseif ($isElementMonitoring) fa-code
                                                        @elseif ($isServerMonitoring) fa-server @else fa-globe @endif monitor-icon
                                                        text-{{ $isEmailHealth ? 'purple' : ($isSSLMonitoring ? 'info' :
                                                        ($isKeywordMonitoring ? 'warning' : ($isElementMonitoring ? 'success' :
                                                        ($isServerMonitoring ? 'danger' : 'primary')))) }} me-2"></i>
                                                    <strong>{{ $monitor->name }}</strong>
                                                </div>
                                            </td>
                                            <td>
                                                @if($isEmailHealth)
                                                    <span class="text-primary">{{ $monitor->domain_to_monitor }}</span>
                                                @else
                                                    <a href="{{ $monitor->url }}" target="_blank" class="url-link text-decoration-none">
                                                        {{ parse_url($monitor->url, PHP_URL_HOST) }}
                                                        <i class="fas fa-external-link-alt ms-1"></i>
                                                    </a>
                                                @endif
                                            </td>
                                            <td class="text-center">
                                                <span class="badge @if ($isEmailHealth) bg-purple @elseif ($isSSLMonitoring) bg-info
                                                    @elseif ($isKeywordMonitoring) bg-warning @elseif ($isElementMonitoring) bg-success
                                                    @elseif ($isServerMonitoring) bg-danger @else bg-primary @endif">
                                                    {{ match ($monitor->monitoring_type) {
                                                        'email_health' => 'Email Health',
                                                        'ssl' => 'SSL',
                                                        'keyword' => 'Keyword',
                                                        'element' => 'Element',
                                                        'server' => 'Server',
                                                        default => 'Full Page'
                                                    } }}
                                                </span>
                                            </td>
                                            <td class="text-center">
                                                <span class="badge {{ $latestResponse && $latestResponse->response_time < 3 ? 'bg-success' : 'bg-danger' }}">
                                                    {{ $latestResponse ? ($latestResponse->response_time < 3 ? 'Up' : 'Down') : 'Unknown' }}
                                                </span>
                                            </td>
                                            <td class="text-center">
                                                <div class="d-flex justify-content-center gap-2">
                                                    <button type="button" class="btn btn-sm btn-info" data-bs-toggle="modal"
                                                        data-bs-target="#detailsModal{{ $monitor->id }}" title="View Details">
                                                        <i class="fas fa-eye"></i>
                                                    </button>
                                                    <a href="{{ route('admin.monitors.changelogs', $monitor) }}"
                                                        class="btn btn-sm btn-primary" title="View Change Log">
                                                        <i class="fas fa-history"></i>
                                                    </a>
                                                    @if ($isServerMonitoring)
                                                        <a href="{{ route('admin.monitors.reports', $monitor) }}"
                                                            class="btn btn-sm btn-info" title="View Reports">
                                                            <i class="fas fa-chart-bar"></i>
                                                        </a>
                                                    @endif
                                                </div>
                                            </td>
                                        </tr>

                                        <!-- Modal for Details -->
                                        <div class="modal fade" id="detailsModal{{ $monitor->id }}" tabindex="-1"
                                            aria-labelledby="detailsModalLabel{{ $monitor->id }}" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="detailsModalLabel{{ $monitor->id }}">Monitor Details</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <p><strong>Website/Email:</strong> {{ $monitor->name }}</p>
                                                        <p><strong>URL/Domain:</strong>
                                                            @if($isEmailHealth)
                                                                {{ $monitor->domain_to_monitor }}
                                                            @else
                                                                {{ parse_url($monitor->url, PHP_URL_HOST) }}
                                                            @endif
                                                        </p>
                                                        <p><strong>Date of Register:</strong> {{ $monitor->created_at->format('d M Y') }}</p>
                                                        <p><strong>Type:</strong>
                                                            {{ match ($monitor->monitoring_type) {
                                                                'email_health' => 'Email Health',
                                                                'ssl' => 'SSL',
                                                                'keyword' => 'Keyword',
                                                                'element' => 'Element',
                                                                'server' => 'Server',
                                                                default => 'Full Page'
                                                            } }}
                                                        </p>
                                                        <p><strong>Response Time:</strong>
                                                            @if($isEmailHealth)
                                                                N/A
                                                            @elseif($latestResponse)
                                                                {{ number_format($latestResponse->response_time, 2) }}s
                                                            @else
                                                                N/A
                                                            @endif
                                                        </p>
                                                        <p><strong>Target:</strong>
                                                            @if ($isEmailHealth)
                                                                SPF: {{ $monitor->spf_record ? 'Yes' : 'No' }},
                                                                DKIM: {{ $monitor->dkim_record ? 'Yes' : 'No' }},
                                                                DMARC: {{ $monitor->dmarc_record ? 'Yes' : 'No' }}
                                                            @elseif ($isSSLMonitoring)
                                                                SSL Certification
                                                            @elseif ($isKeywordMonitoring)
                                                                {{ implode(', ', $monitor->keywords ?? []) }}
                                                            @elseif ($isElementMonitoring)
                                                                <code>{{ $monitor->xpath }}</code>
                                                            @elseif ($isServerMonitoring)
                                                                Server Uptime
                                                            @else
                                                                Full Page
                                                            @endif
                                                        </p>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-chart-area fa-3x text-muted mb-3"></i>
                            <p>No monitoring data available for this user.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Assign Plan Modal -->
    <div class="modal fade" id="assignPlanModal" tabindex="-1" aria-labelledby="assignPlanModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="assignPlanModalLabel">Assign Subscription Plan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="assignPlanForm" action="{{ route('admin.users.assign-plan', $user) }}" method="POST">
                        @csrf
                        @method('POST')
                        <div class="mb-4">
                            <label class="form-label">Select a Plan</label>
                            <div class="plan-options">
                                @foreach($plans as $plan)
                                <div class="plan-option" data-plan-id="{{ $plan->id }}">
                                    <h5>{{ $plan->name }}</h5>
                                    <div class="plan-price">${{ $plan->price }}</div>
                                    <div class="plan-duration">{{ $plan->billing_cycle }}</div>
                                    <div class="mt-2">{{ $plan->description }}</div>
                                </div>
                                @endforeach
                            </div>
                            <input type="hidden" name="plan_id" id="selectedPlanId">
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="startDate" class="form-label">Start Date</label>
                                <input type="date" class="form-control" id="startDate" name="starts_at" value="{{ date('Y-m-d') }}" required>
                            </div>
                            <div class="col-md-6">
                                <label for="endDate" class="form-label">End Date</label>
                                <input type="date" class="form-control" id="endDate" name="ends_at" value="{{ date('Y-m-d', strtotime('+30 days')) }}" required>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="notes" class="form-label">Notes (Optional)</label>
                            <textarea class="form-control" id="notes" name="notes" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="confirmAssignPlan">Assign Plan</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Change Plan Modal -->
    <div class="modal fade" id="changePlanModal" tabindex="-1" aria-labelledby="changePlanModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="changePlanModalLabel">Change Subscription Plan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="changePlanForm" action="{{ route('admin.users.change-plan', $user) }}" method="POST">
                        @csrf
                        @method('POST')
                        <div class="mb-4">
                            <p>Current Plan: <strong>{{ $user->subscription->plan->name ?? 'None' }}</strong></p>
                            <label class="form-label">Select New Plan</label>
                            <div class="plan-options">
                                @foreach($plans as $plan)
                                <div class="plan-option" data-plan-id="{{ $plan->id }}">
                                    <h5>{{ $plan->name }}</h5>
                                    <div class="plan-price">${{ $plan->price }}</div>
                                    <div class="plan-duration">{{ $plan->billing_cycle }}</div>
                                    <div class="mt-2">{{ $plan->description }}</div>
                                </div>
                                @endforeach
                            </div>
                            <input type="hidden" name="plan_id" id="newSelectedPlanId">
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="newEndDate" class="form-label">New End Date</label>
                                <input type="date" class="form-control" id="newEndDate" name="ends_at"
                                    value="{{ $user->subscription ? $user->subscription->ends_at->format('Y-m-d') : date('Y-m-d', strtotime('+30 days')) }}" required>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check mt-4">
                                    <input class="form-check-input" type="checkbox" id="applyImmediately" name="apply_immediately" value="1" checked>
                                    <label class="form-check-label" for="applyImmediately">
                                        Apply changes immediately
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="changeNotes" class="form-label">Notes (Optional)</label>
                            <textarea class="form-control" id="changeNotes" name="notes" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn2btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="confirmChangePlan">Change Plan</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Cancel Subscription Modal -->
    <div class="modal fade" id="cancelSubscriptionModal" tabindex="-1" aria-labelledby="cancelSubscriptionModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="cancelSubscriptionModalLabel">Cancel Subscription</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="cancelSubscriptionForm" action="{{ route('admin.users.cancel-subscription', $user) }}" method="POST">
                        @csrf
                        @method('POST')
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            Are you sure you want to cancel this user's subscription? This action may impact their access to premium features.
                        </div>
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="cancelImmediately" name="cancel_immediately" value="1">
                                <label class="form-check-label" for="cancelImmediately">
                                    Cancel immediately (Otherwise, subscription will remain active until the end date)
                                </label>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="cancelReason" class="form-label">Reason for Cancellation (Optional)</label>
                            <textarea class="form-control" id="cancelReason" name="reason" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No, Keep Subscription</button>
                    <button type="button" class="btn btn-danger" id="confirmCancelSubscription">Yes, Cancel Subscription</button>
                </div>
            </div>
        </div>

    <script>
(function(window, document, $) {
    var $j = jQuery.noConflict();

    document.addEventListener('DOMContentLoaded', function () {
        try {
            if (window.planManagementInitialized) return;
            window.planManagementInitialized = true;

            if (
                !$j('.plan-option').length ||
                !$j('#selectedPlanId').length ||
                !$j('#newSelectedPlanId').length ||
                !$j('#confirmAssignPlan').length ||
                !$j('#confirmChangePlan').length ||
                !$j('#confirmCancelSubscription').length ||
                !$j('#assignPlanForm').length ||
                !$j('#changePlanForm').length ||
                !$j('#cancelSubscriptionForm').length
            ) {
                console.error("Missing required DOM elements for plan management.");
                return;
            }

            initializeTooltips();
            initializeEventListeners();

            function initializeTooltips() {
                try {
                    let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                    tooltipTriggerList.map(function (tooltipTriggerEl) {
                        return new bootstrap.Tooltip(tooltipTriggerEl);
                    });
                } catch (e) {
                    console.error("Error initializing tooltips:", e);
                }
            }

            function initializeEventListeners() {
                try {
                    // Plan selection
                    $j('.plan-option').on('click', function () {
                        try {
                            $j('.plan-option').removeClass('selected');
                            $j(this).addClass('selected');
                            const planId = $j(this).data('plan-id');
                            $j('#selectedPlanId').val(planId);
                            $j('#newSelectedPlanId').val(planId);
                        } catch (e) {
                            console.error("Error handling plan option click:", e);
                        }
                    });

                    // Assign Plan Form Submission
                    $j('#confirmAssignPlan').on('click', function () {
                        try {
                            if (!$j('#selectedPlanId').val()) {
                                Swal.fire('Error', 'Please select a plan first', 'error');
                                return;
                            }
                            $j('#assignPlanForm').submit();
                        } catch (e) {
                            console.error("Error handling assign plan confirmation:", e);
                        }
                    });

                    // Change Plan Form Submission
                    $j('#confirmChangePlan').on('click', function () {
                        try {
                            if (!$j('#newSelectedPlanId').val()) {
                                Swal.fire('Error', 'Please select a plan first', 'error');
                                return;
                            }
                            $j('#changePlanForm').submit();
                        } catch (e) {
                            console.error("Error handling change plan confirmation:", e);
                        }
                    });

                    // Cancel Subscription Form Submission
                    $j('#confirmCancelSubscription').on('click', function () {
                        try {
                            Swal.fire({
                                title: 'Are you sure?',
                                text: "This will cancel the user's subscription!",
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonColor: '#d33',
                                cancelButtonColor: '#3085d6',
                                confirmButtonText: 'Yes, cancel it!'
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    $j('#cancelSubscriptionForm').submit();
                                }
                            });
                        } catch (e) {
                            console.error("Error handling cancel subscription confirmation:", e);
                        }
                    });

                    // Handle form submission errors
                    $j('form').on('submit', function (e) {
                        try {
                            e.preventDefault();
                            const form = $j(this);
                            $j.ajax({
                                url: form.attr('action'),
                                method: 'POST',
                                data: form.serialize(),
                                success: function (response) {
                                    window.location.reload();
                                },
                                error: function (xhr) {
                                    Swal.fire('Error', xhr.responseJSON.message || 'Something went wrong', 'error');
                                }
                            });
                        } catch (e) {
                            console.error("Error handling form submission:", e);
                        }
                    });
                } catch (e) {
                    console.error("Error initializing event listeners:", e);
                }
            }

            // Initial load with fallback retry
            setTimeout(function () {
                try {
                    if ($j('.plan-option').length > 0) {
                        initializeEventListeners();
                    } else {
                        console.warn("No .plan-option elements found yet, retrying...");
                        setTimeout(() => initializeEventListeners(), 500);
                    }
                } catch (e) {
                    console.error("Error during initial load:", e);
                }
            }, 100);

        } catch (e) {
            console.error("Top-level plan management script error:", e);
        }
    });

})(window, document, jQuery);
        @if(session('success'))
            Swal.fire({
                icon: 'success',
                title: 'Success!',
                text: '{{ session('success') }}',
                timer: 3000,
                showConfirmButton: false,
                position: 'top-end',
                background: '#fff',
                iconColor: '#4839F5'
            });
        @endif

        @if(session('error'))
            Swal.fire({
                icon: 'error',
                title: 'Error!',
                text: '{{ session('error') }}',
                timer: 3000,
                showConfirmButton: false,
                position: 'top-end'
            });
        @endif
    </script>
@endsection