@extends('layouts.demo10.base')

@section('content')
<style>
    .tenant-screen { display: grid; gap: 1.25rem; }
    .tenant-topbar { display: flex; flex-direction: column; gap: 1rem; }
    .tenant-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
    .tenant-search {
        display: flex; align-items: center; gap: 0.55rem; min-width: 300px; padding: 0 0.9rem; height: 44px;
        border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .tenant-search i { color: #94a3b8; font-size: 0.95rem; transition: color 0.2s ease; }
    .tenant-search:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
    .tenant-search:focus-within i { color: #2563eb; }
    .tenant-search input { width: 100%; border: 0; outline: 0; background: transparent; color: #0f172a; font-size: 0.875rem; }
    .tenant-search input:focus { outline: none; box-shadow: none; }
    .tenant-search input::placeholder { color: #94a3b8; }
    .tenant-add-btn { height: 44px; border-radius: 10px !important; padding-inline: 1rem !important; font-weight: 600; }
    .tenant-panel { border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; overflow: hidden; }
    .tenant-table { border-collapse: separate; border-spacing: 0; }
    .tenant-table thead th { padding: 0.9rem 1rem; font-size: 0.75rem; font-weight: 600; color: #64748b; background: #f8fafc; border-bottom: 1px solid #e2e8f0; border-right: 1px solid #dbe3ee; text-transform: none; }
    .tenant-table tbody td { padding: 0.9rem 1rem; vertical-align: middle; border-bottom: 1px solid #edf2f7; border-right: 1px solid #dbe3ee; }
    .tenant-table tbody tr:last-child td { border-bottom: 0; }
    .tenant-table thead th:first-child, .tenant-table tbody td:first-child { border-left: 1px solid #dbe3ee; }
    .tenant-table thead th:last-child, .tenant-table tbody td:last-child { min-width: 84px; width: 84px; white-space: nowrap; }
    .tenant-name { font-size: 0.875rem; color: #0f172a; }
    .tenant-desc { font-size: 0.875rem; color: #64748b; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tenant-chip-db { display: inline-flex; align-items: center; justify-content: center; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; color: #475569; background: #e2e8f0; }
    .tenant-chip-status { display: inline-flex; align-items: center; justify-content: center; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
    .tenant-chip-status.active { color: #15803d; background: #dcfce7; }
    .tenant-chip-status.inactive { color: #b91c1c; background: #fee2e2; }
    .tenant-action-links { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.65rem; }
    .tenant-action-link { display: inline-flex; align-items: center; justify-content: center; color: #64748b; transition: color 0.2s ease; }
    .tenant-action-link:hover { color: #0f172a; }
    .tenant-action-link.delete:hover { color: #dc2626; }
    .project-flow {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    .project-step-panel {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    .project-flow-card-title {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .project-flow-card-title h3 {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 600;
        color: #1f2937;
    }

    .project-flow-card-icon {
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: #2f66e8;
        color: #ffffff;
        flex-shrink: 0;
    }
    .project-flow-field {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }
    .project-flow-field label {
        font-size: 0.75rem;
        font-weight: 500;
        color: #374151;
    }
    .project-flow-input {
        width: 100%;
        height: 42px;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        background: #f3f4f6;
        color: #111827;
        font-size: 0.8125rem;
        padding: 0 12px;
        outline: none;
        transition: border-color 0.2s ease, background-color 0.2s ease;
    }
    .project-flow-input:focus {
        border-color: #2f66e8;
        background: #ffffff;
    }
    .project-flow-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding-top: 0.75rem;
    }
    .project-flow-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        color: #6b7280;
    }
</style>
@can('view.tenant')
<div class="tenant-screen">
    <!-- begin: Toolbar -->
    <div class="flex flex-wrap items-center justify-between gap-5">
        <div class="flex flex-col gap-1">
            <h1 class="font-semibold text-[30px] leading-none text-mono">
                Tenants
            </h1>
            <div class="flex items-center gap-1 text-sm font-normal text-secondary-foreground">
                <span class="text-mono">Home</span>
                <span class="text-muted-foreground">/</span>
                <span class="text-mono">Tenants</span>
            </div>
        </div>
    </div>
    <!-- end: Toolbar -->


    {{-- ✅ STEP 1: BANNER goes HERE — above the card/table
                @if(false && $activeProjectId)
                    @php $activeTenant = $projects->firstWhere('id', $activeProjectId); @endphp
                    @if($activeTenant)
                    <div class="flex items-center justify-between gap-4 px-4 py-3 mb-4 rounded-lg border border-success/30 bg-success/10" id="active-tenant-banner">
                        <div class="flex items-center gap-3">
                            <span class="relative flex h-3 w-3">
                                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-success opacity-75"></span>
                                <span class="relative inline-flex rounded-full h-3 w-3 bg-success"></span>
                            </span>
                            <div class="flex flex-col">
                                <span class="text-sm font-semibold text-success">Active Tenant Connected</span>
                                <span class="text-xs text-muted-foreground">
                                    <span class="font-medium text-foreground">{{ $activeTenant->name }}</span>
            &nbsp;·&nbsp; DB: <span class="font-mono text-xs">{{ $activeTenant->dynamic_database ?? 'N/A' }}</span>
            &nbsp;·&nbsp; User: {{ $activeTenant->user->name ?? 'N/A' }}
            </span>
        </div>
        </div>
        <button class="kt-btn kt-btn-sm kt-btn-danger tenant-disconnect-btn" data-id="{{ $activeTenant->id }}">
            <i class="ki-filled ki-disconnect text-sm"></i> Disconnect
        </button>
        </div>
        @endif
        @else
        <div class="hidden flex items-center gap-3 px-4 py-3 mb-4 rounded-lg border border-warning/30 bg-warning/10">
            <i class="ki-filled ki-information-2 text-warning text-lg"></i>
            <span class="text-sm text-muted-foreground">
                No tenant connected. Connect a project below to access its ODK and services.
            </span>
        </div>
        @endif
        --}}
<!-- begin: Card -->
<div class="tenant-toolbar">
    <div class="tenant-search">
        <i class="ki-filled ki-magnifier"></i>
        <input
            data-kt-datatable-search="#kt_datatable_1"
            placeholder="Search Organization"
            type="text" />
    </div>

    <button class="kt-btn common-secondary-btn tenant-add-btn" data-kt-modal-toggle="#add_project_modal">
        <i class="ki-filled ki-plus"></i>
        Add Tenant
    </button>
    @endcan
</div>

        <div class="kt-card-table">
            <div id="projects_datatable_wrapper" class="p-0">
                <div class="kt-scrollable-x-auto">
                    <table class="kt-table tenant-table w-full" id="kt_datatable_1">
                        <thead>
                            <tr>
                                <th class="min-w-[40px]">Id</th>
                                <th class="min-w-[200px]">Email</th>
                                <th class="min-w-[180px]">Organization Name</th>
                                <th class="min-w-[220px]">Domain Progress Link</th>
                                <th class="min-w-[110px]">Industry Type</th>
                                <th class="min-w-[100px]">Time Zone</th>
                                <th class="min-w-[100px]">Created At</th>
                                {{-- <th class="min-w-[140px]">Updated At</th> --}}
                                @canany(['edit.projects', 'delete.projects'])
                                <th class="w-[84px] text-right"></th>
                                @endcanany
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($projects as $project)
                            @php
                                $isActive = $activeProjectId == $project->id;
                                $domainProgressUrl = null;
                                if (filled($project->custom_domain)) {
                                    $domainBase = preg_match('#^https?://#i', $project->custom_domain)
                                        ? $project->custom_domain
                                        : (($project->custom_domain_scheme ?? 'https') . '://' . $project->custom_domain);
                                    $domainProgressUrl = rtrim($domainBase, '/') . '/progress';
                                }
                            @endphp
                            <tr id="project-row-{{ $project->id }}">
                                <td>
                                    <span class="tenant-name">{{ $project->id }}</span>
                                </td>
                                <td>
                                    <span class="text-sm text-mono">{{ $project->user->email ?? 'N/A' }}</span>
                                </td>
                                <td>
                                    <span class="tenant-name">{{ $project->organization->name ?? 'N/A' }}</span>
                                </td>
                                <td>
                                    @if($domainProgressUrl)
                                        <a
                                            href="{{ $domainProgressUrl }}"
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            class="text-xs text-primary hover:underline break-all"
                                            title="Open tenant domain progress"
                                        >
                                            {{ $domainProgressUrl }}
                                        </a>
                                    @else
                                        <span class="text-xs text-muted-foreground">No domain assigned</span>
                                    @endif
                                </td>
                                <td>
                                    <span class="text-sm text-mono">{{ $project->organization->industry_type ?? 'N/A' }}</span>
                                </td>
                                <td>
                                    <span class="text-sm text-mono">{{ $project->organization->timezone ?? 'N/A' }}</span>
                                </td>
                                <td>
                                    <span class="text-sm text-secondary-foreground">
                                        {{ optional($project?->updated_at)->format('M d, Y') ?? 'N/A' }}
                            </span>
                            </td>
                            {{-- TENANT CONNECT/DISCONNECT BUTTON
                                <td class="text-center">
                                    @if($isActive)
                                    <button
                                        class="kt-btn kt-btn-sm kt-btn-danger tenant-disconnect-btn"
                                        data-id="{{ $project->id }}"
                            title="Disconnect this tenant">
                            <i class="ki-filled ki-disconnect text-sm"></i>
                            Disconnect
                            </button>
                            @else
                            <button
                                class="kt-btn kt-btn-sm kt-btn-light tenant-connect-btn"
                                data-id="{{ $project->id }}"
                                title="Connect to this tenant">
                                <i class="ki-filled ki-connect text-sm"></i>
                                Connect
                            </button>
                            @endif
                            </td>
                            --}}


                            <td class="text-right">
                                <div class="tenant-action-links">

                                    <a class="tenant-action-link edit-project-btn" href="javascript:void(0)" data-id="{{ $project->id }}" aria-label="Edit tenant">
                                        <i class="ki-filled ki-notepad-edit text-base"></i>
                                    </a>

                                    <a class="tenant-action-link delete delete-project-btn" href="javascript:void(0)" data-id="{{ $project->id }}" aria-label="Delete tenant">
                                        <i class="ki-filled ki-trash text-base"></i>
                                    </a>

                                </div>
                            </td>

                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- end: Card -->
</div>

<!-- Add Project Modal -->
<div class="kt-modal" data-kt-modal="true" id="add_project_modal" data-kt-modal-backdrop-static="true">
    <div class="kt-modal-content max-w-[600px] top-[15%]">
        <div class="kt-modal-header py-4 px-5">
            <h3 class="kt-modal-title text-base font-semibold">Add New Tenant</h3>
            <button onclick="AuditTracker.track({ event_type: 'click', module: 'Projects', section: 'Projects', page: 'Project Create', action: 'Cancel Add Project' })" class="kt-btn kt-btn-sm kt-btn-icon kt-btn-dim shrink-0" data-kt-modal-dismiss="true">
                <i class="ki-filled ki-cross"></i>
            </button>
        </div>
        <div class="kt-modal-body p-5 lg:p-7.5">
            <form action="{{ route('organization.store') }}" method="POST" enctype="multipart/form-data" class="flex flex-col gap-6" id="add_project_form">
                @csrf

                <!-- Project Name -->
                <div class="flex flex-col gap-2">
                    <label for="organization_name" class="text-sm font-semibold text-foreground">Organization Name</label>
                    <div class="kt-input">
                        <input type="text" name="organization_name" id="organization_name" placeholder="Organization Name" required />
                    </div>
                </div>

                <div class="flex flex-col gap-2">
                    <label for="package_id" class="text-sm font-semibold text-foreground">Packages</label>
                    <div class="kt-input">
                        <select name="package_id" id="package_id" class="kt-input w-full h-10" required>
                            <option value="">Select Packages</option>
                            @foreach(($packages ?? collect()) as $packages)
                            <option value="{{ $packages->id }}">{{ $packages->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="flex flex-col gap-2">
                    <label for="custom_domain" class="text-sm font-semibold text-foreground">Tenant Domain</label>
                    <div class="flex items-center gap-2">
                        <input type="text" name="custom_domain" id="custom_domain" class="kt-input" placeholder="tenant.example.com" />
                        <select name="custom_domain_scheme" id="custom_domain_scheme" class="kt-input" style="max-width:110px;">
                            <option value="https">https</option>
                            <option value="http">http</option>
                        </select>
                        <button type="button" class="kt-btn kt-btn-outline domain-check-btn" data-target-input="#custom_domain" data-target-result="#add_project_domain_result">Check Domain</button>
                    </div>
                    <div id="add_project_domain_result" class="text-xs rounded-lg border border-input bg-background px-3 py-2 text-secondary-foreground" style="display:none;"></div>
                </div>

                <!-- Date Format -->
                <div class="flex flex-col gap-2">
                    <label for="user_name" class="text-sm font-semibold text-foreground">User Name</label>
                    <div class="kt-input">
                        <input type="text" name="user_name" id="user_name" placeholder="User Name" required />
                    </div>
                </div>
                <div class="flex flex-col gap-2">
                    <label for="email" class="text-sm font-semibold text-foreground">Email</label>
                    <div class="kt-input">
                        <input type="text" name="email" id="email" placeholder="User Email" required />
                    </div>
                </div>
                <div class="flex flex-col gap-2">
                    <label for="password" class="text-sm font-semibold text-foreground">Password</label>
                    <div class="kt-input">
                        <input type="password" name="password" id="password" placeholder="Password" required />
                    </div>
                </div>
                <div class="flex flex-col gap-2">
                    <label for="timezone" class="text-sm font-semibold text-foreground">Time Zone(optional)</label>
                    <div class="kt-input">
                        <select name="timezone" id="timezone" class="kt-input w-full h-10">
                            <option value="">Select TimeZone</option>
                            <option value="Asia/Karachi">Asia/Karachi</option>
                            <option value="UTC">UTC</option>
                            <option value="America/New_York">America/New_York</option>
                        </select>
                    </div>
                </div>
                <div class="flex flex-col gap-2">
                    <label for="industry_type" class="text-sm font-semibold text-foreground">Industry Type*</label>
                    <div class="kt-input">
                        <select name="industry_type" id="industry_type" class="kt-input w-full h-10">
                            <option value="">Select Industry Type</option>
                            <option value="technology">Technology</option>
                            <option value="healthcare">Healthcare</option>
                            <option value="education">Education</option>
                            <option value="finance">Finance</option>
                        </select>
                    </div>
                </div>

                <div class="flex flex-col gap-2">
                    <label for="logo_path" class="text-sm font-semibold text-foreground">Upload Logo</label>
                    <div class="kt-input">
                        <input class="border border-gray-300 rounded-md p-2 w-full" type="file" name="logo_path" id="logo_path" placeholder="upload logo" accept="image/*" />
                    </div>
                </div>


                <!-- Submit Button -->
                <div class="flex justify-end gap-3 pt-3 modal-btns">
                    <button onclick="AuditTracker.track({ event_type: 'click', module: 'Projects', section: 'Projects', page: 'Project Create', action: 'Cancel Add Project' })" type="button" class="kt-btn cancel min-w-[80px]" data-kt-modal-dismiss="true">Cancel</button>
                    <button type="submit" class="kt-btn save min-w-[90px]" id="create_project_btn">
                        Create
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const dataSourceSelect = document.getElementById('data_source_type');
        const csvUploadSection = document.getElementById('csv_upload_section');
        const createProjectBtn = document.getElementById('create_project_btn');

        // Handle data source type change
        dataSourceSelect.addEventListener('change', function() {
            if (this.value === 'csv') {
                csvUploadSection.style.display = 'block';
                // Make CSV file required when CSV is selected
                document.getElementById('csv_file').setAttribute('required', 'required');
            } else {
                csvUploadSection.style.display = 'none';
                // Remove required attribute when not CSV
                document.getElementById('csv_file').removeAttribute('required');
            }
        });

        // Handle form submission
        document.getElementById('add_project_form').addEventListener('submit', function(e) {
            const selectedDataSource = dataSourceSelect.value;
            const csvFile = document.getElementById('csv_file').files[0];

            if (selectedDataSource === 'csv' && !csvFile) {
                e.preventDefault();
                alert('Please select a CSV file when choosing CSV as data source.');
                return false;
            }

            // Show loading state
            createProjectBtn.disabled = true;
            createProjectBtn.textContent = 'Creating...';
        });
    });
</script>

<!-- Edit Project Modal -->
<div class="kt-modal" data-kt-modal="true" id="edit_project_modal" data-kt-modal-backdrop-static="true">
    <div class="kt-modal-content max-w-[560px] top-[5%] max-h-[90vh]">
        <div class="kt-modal-header py-4 px-5">
            <h3 class="kt-modal-title text-base font-semibold">Edit Tenant</h3>
            <button onclick="AuditTracker.track({ event_type: 'click', module: 'Projects', section: 'Projects', page: 'Project Edit', action: 'Cancel Edit Project' })" class="kt-btn kt-btn-sm kt-btn-icon kt-btn-dim shrink-0" data-kt-modal-dismiss="true">
                <i class="ki-filled ki-cross"></i>
            </button>
        </div>
        <div class="kt-modal-body p-5 lg:p-7.5">
            <form action="" method="POST" class="project-flow" id="edit_project_form">
                @csrf
                <input type="hidden" name="id" id="edit_project_id">
                <input type="hidden" name="name" id="edit_name">
                <input type="hidden" name="description" id="edit_description">

                <section class="project-step-panel">
                    <div class="project-flow-card-title">
                        <span class="project-flow-card-icon">
                            <i class="ki-filled ki-document text-lg"></i>
                        </span>
                        <h3>Edit Organization</h3>
                    </div>

                    <div class="project-flow-field">
                        <label for="edit_organization_name">Organization Name*</label>
                        <input
                            type="text"
                            name="organization_name"
                            id="edit_organization_name"
                            class="project-flow-input"
                            placeholder="" />
                    </div>

                    <div class="flex flex-col gap-2">
                        <label for="edit_user_name" class="text-sm font-semibold text-foreground">User Name</label>
                        <div class="kt-input">
                            <input type="text" name="user_name" id="edit_user_name" placeholder="User Name" required />
                        </div>
                    </div>
                    <div class="flex flex-col gap-2">
                        <label for="edit_email" class="text-sm font-semibold text-foreground">Email</label>
                        <div class="kt-input">
                            <input type="text" name="email" id="edit_email" placeholder="User Email" required />
                        </div>
                    </div>
                    <div class="flex flex-col gap-2">
                        <label for="edit_password" class="text-sm font-semibold text-foreground">Password</label>
                        <div class="kt-input">
                            <input type="password" name="password" id="edit_password" placeholder="Password" required />
                        </div>
                    </div>

                    <div class="project-flow-field">
                        <label for="edit_industry_type">Industry Type (optional)</label>
                        <input
                            type="text"
                            name="industry_type"
                            id="edit_industry_type"
                            class="project-flow-input"
                            placeholder="" />
                    </div>

                <div class="project-flow-field">
                    <label for="edit_custom_domain">Tenant Domain (optional)</label>
                    <div class="flex items-center gap-2">
                        <input
                            type="text"
                            name="custom_domain"
                            id="edit_custom_domain"
                            class="project-flow-input"
                            placeholder="tenant.example.com"
                        />
                        <select name="custom_domain_scheme" id="edit_custom_domain_scheme" class="project-flow-input" style="max-width:110px;">
                            <option value="https">https</option>
                            <option value="http">http</option>
                        </select>
                        <button type="button" class="kt-btn kt-btn-outline domain-check-btn" data-target-input="#edit_custom_domain" data-target-result="#edit_project_domain_result" data-project-id-input="#edit_project_id">Check Domain</button>
                    </div>
                    <div id="edit_project_domain_result" class="text-xs rounded-lg border border-input bg-background px-3 py-2 text-secondary-foreground" style="display:none;"></div>
                </div>

                <div class="flex justify-end gap-3 pt-3 modal-btns">
                    <button onclick="AuditTracker.track({ event_type: 'click', module: 'Projects', section: 'Projects', page: 'Project Edit', action: 'Cancel Edit Project' })" type="button" class="kt-btn kt-btn-light cancel min-w-[80px]" data-kt-modal-dismiss="true">
                        Cancel
                    </button>
                    <button type="submit" class="kt-btn common-secondary-btn  min-w-[80px] save">
                        Update
                    </button>
                </div>
                </section>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
@vite('resources/js/pages/projects.js')
<style>
    /* Prevent table clipping for dropdowns */
    .kt-scrollable-x-auto,
    .kt-card-table,
    #kt_datatable_1,
    td {
        overflow: visible !important;
    }

    /* Style adjustments for default DataTables elements */
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        border: none !important;
        background: none !important;
        padding: 0.5rem 0.75rem !important;
        margin: 0 2px !important;
        border-radius: 0.375rem !important;
        color: var(--secondary-foreground) !important;
        cursor: pointer !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background-color: var(--primary) !important;
        color: white !important;
    }

    .dataTables_wrapper .dataTables_info {
        color: var(--secondary-foreground) !important;
        font-size: 0.875rem !important;
        padding-top: 0 !important;
    }

    .dataTables_wrapper .dataTables_length select {
        border: 1px solid var(--border) !important;
        border-radius: 0.375rem !important;
        padding: 0.25rem 2rem 0.25rem 0.5rem !important;
        background-color: transparent !important;
        color: var(--foreground) !important;
        margin: 0 0.5rem !important;
    }

    .dataTables_wrapper .dataTables_length {
        color: var(--secondary-foreground) !important;
        font-size: 0.875rem !important;
    }

    .dataTables_wrapper .dataTables_paginate {
        padding-top: 0 !important;
    }

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

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>
<script>
    $(document).ready(function() {

        //  CONNECT
        $(document).on('click', '.tenant-connect-btn', function() {
            const $btn = $(this);
            const projectId = $btn.data('id');

            AuditTracker.track({
                event_type: 'click',
                module: 'Projects',
                section: 'Projects',
                page: 'Project List',
                action: 'Click Connect Tenant',
                target_type: 'App\\Models\\ProjectDetail',
                target_id: projectId
            });

            $btn.prop('disabled', true)
                .html('<span class="spinner-border spinner-border-sm"></span> Connecting...');

            $.ajax({
                url: '{{ route("tenants.connect") }}',
                method: 'POST',
                contentType: 'application/json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Accept': 'application/json',
                },
                data: JSON.stringify({
                    project_id: projectId
                }),
                success: function(data) {
                    if (data.success) {
                        toastr.success('Tenant ' + data.project_name + ' connected successfully.');

                        // ── 1. Remove active styling from ALL rows ────────────────
                        $('tr[id^="project-row-"]').each(function() {
                            $(this)
                                .removeClass('bg-success/5 border-l-2 border-success')
                                .find('.active-badge').remove();

                            // Switch any disconnect btn back to connect btn
                            const rowProjectId = $(this).attr('id').replace('project-row-', '');
                            const $cell = $(this).find('.tenant-disconnect-btn').closest('td');
                            if ($cell.length) {
                                $cell.html(`
                                    <button class="kt-btn kt-btn-sm kt-btn-light tenant-connect-btn"
                                            data-id="${rowProjectId}"
                                            title="Connect to this tenant">
                                        <i class="ki-filled ki-connect text-sm"></i>
                                        Connect
                                    </button>
                                `);
                            }
                        });

                        // ── 2. Highlight the newly connected row ──────────────────
                        const $row = $(`#project-row-${projectId}`);
                        $row.addClass('bg-success/5 border-l-2 border-success');

                        // Add Active badge next to project name
                        $row.find('td:nth-child(2) .text-sm').append(`
                            <span class="active-badge inline-flex items-center gap-1 text-[10px] font-semibold text-success uppercase tracking-wide ms-2">
                                <span class="w-1.5 h-1.5 rounded-full bg-success animate-pulse"></span>
                                Active
                            </span>
                        `);

                        // ── 3. Swap connect btn → disconnect btn in the row ───────
                        $row.find('.tenant-connect-btn').closest('td').html(`
                            <button class="kt-btn kt-btn-sm kt-btn-danger tenant-disconnect-btn"
                                    data-id="${projectId}"
                                    title="Disconnect this tenant">
                                <i class="ki-filled ki-disconnect text-sm"></i>
                                Disconnect
                            </button>
                        `);

                        // ── 4. Update top banner ──────────────────────────────────
                        const projectName = data.project_name;

                        $('#active-tenant-banner').remove(); // remove old banner if any

                        const $banner = $(`
                            <div class="flex items-center justify-between gap-4 px-4 py-3 mb-4 rounded-lg border border-success/30 bg-success/10"
                                id="active-tenant-banner">
                                <div class="flex items-center gap-3">
                                    <span class="relative flex h-3 w-3">
                                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-success opacity-75"></span>
                                        <span class="relative inline-flex rounded-full h-3 w-3 bg-success"></span>
                                    </span>
                                    <div class="flex flex-col">
                                        <span class="text-sm font-semibold text-success">Active Tenant Connected</span>
                                        <span class="text-xs text-muted-foreground">
                                            <span class="font-medium text-foreground">${projectName}</span>
                                        </span>
                                    </div>
                                </div>
                                <button class="kt-btn kt-btn-sm kt-btn-danger tenant-disconnect-btn"
                                        data-id="${projectId}">
                                    <i class="ki-filled ki-disconnect text-sm"></i> Disconnect
                                </button>
                            </div>
                        `);

                        // Replace the "no tenant" warning banner or insert before card
                        const $warningBanner = $('.border-warning\\/30');
                        if ($warningBanner.length) {
                            $warningBanner.replaceWith($banner);
                        } else {
                            $('.grid.gap-1').prepend($banner);
                        }

                    } else {
                        toastr.error(data.message || 'Failed to connect tenant.');
                        $btn.prop('disabled', false)
                            .html('<i class="ki-filled ki-connect text-sm"></i> Connect');
                    }
                },
                error: function() {
                    toastr.error('An error occurred. Please try again.');
                    $btn.prop('disabled', false)
                        .html('<i class="ki-filled ki-connect text-sm"></i> Connect');
                }
            });
        });

        // DISCONNECT
        $(document).on('click', '.tenant-disconnect-btn', function() {
            const $btn = $(this);
            const projectId = $btn.data('id');

            AuditTracker.track({
                event_type: 'click',
                module: 'Projects',
                section: 'Projects',
                page: 'Project List',
                action: 'Click Disconnect Tenant',
                target_type: 'App\\Models\\ProjectDetail',
                target_id: projectId
            });

            Swal.fire({
                title: 'Disconnect Tenant?',
                text: 'You will lose active session access to this tenant.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, Disconnect',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#dc3545',
            }).then((result) => {
                if (!result.isConfirmed) {
                    AuditTracker.track({
                        event_type: 'click',
                        module: 'Projects',
                        section: 'Projects',
                        page: 'Project List',
                        action: 'Cancel Disconnect Tenant',
                        target_type: 'App\\Models\\ProjectDetail',
                        target_id: projectId
                    });
                    return;
                }

                $btn.prop('disabled', true).html('Disconnecting...');

                $.ajax({
                    url: '{{ route("tenants.disconnect") }}',
                    method: 'POST',
                    contentType: 'application/json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                        'Accept': 'application/json',
                    },
                    data: JSON.stringify({
                        project_id: projectId
                    }),
                    success: function(data) {
                        if (data.success) {
                            toastr.warning('Tenant disconnected.');

                            // ── 1. Remove active styling from the row ─────────────
                            const $row = $(`#project-row-${projectId}`);
                            $row.removeClass('bg-success/5 border-l-2 border-success');

                            // Remove Active badge from project name cell
                            $row.find('.active-badge').remove();

                            // ── 2. Swap disconnect btn → connect btn in the row ───
                            $row.find('.tenant-disconnect-btn').closest('td').html(`
                                <button class="kt-btn kt-btn-sm kt-btn-light tenant-connect-btn"
                                        data-id="${projectId}"
                                        title="Connect to this tenant">
                                    <i class="ki-filled ki-connect text-sm"></i>
                                    Connect
                                </button>
                            `);

                            // ── 3. Remove top active tenant banner ────────────────
                            $('#active-tenant-banner').remove();

                            // ── 4. Show "no tenant" warning banner ────────────────
                            const $warningBanner = $(`
                                <div class="flex items-center gap-3 px-4 py-3 mb-4 rounded-lg border border-warning/30 bg-warning/10">
                                    <i class="ki-filled ki-information-2 text-warning text-lg"></i>
                                    <span class="text-sm text-muted-foreground">
                                        No tenant connected. Connect a project below to access its ODK and services.
                                    </span>
                                </div>
                            `);

                            // Insert before the card
                            $('.kt-card.kt-card-grid').before($warningBanner);

                        } else {
                            toastr.error('Failed to disconnect.');
                            $btn.prop('disabled', false)
                                .html('<i class="ki-filled ki-disconnect text-sm"></i> Disconnect');
                        }
                    },
                    error: function() {
                        toastr.error('An error occurred. Please try again.');
                        $btn.prop('disabled', false)
                            .html('<i class="ki-filled ki-disconnect text-sm"></i> Disconnect');
                    }
                });
            });
        });

        //     // Toast helper
        //     function showToast(type, message) {
        //         const bgMap = {
        //             success: 'background:#198754; color:#fff;',
        //             danger:  'background:#dc3545; color:#fff;',
        //             warning: 'background:#ffc107; color:#000;',
        //         };
        //         const $toast = $(`
        //             <div style="
        //                 position:fixed; bottom:24px; right:24px; z-index:9999;
        //                 display:flex; align-items:center; gap:10px;
        //                 padding:12px 18px; border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,.15);
        //                 min-width:280px; font-size:14px; font-weight:500;
        //                 animation: slideUp .3s ease;
        //                 ${bgMap[type]}
        //             ">${message}</div>
        //         `);
        //         $('body').append($toast);
        //         setTimeout(() => $toast.fadeOut(400, () => $toast.remove()), 3500);
        //     }

    });
</script>
@endsection