@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.projects')
<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>
        {{-- @can('create.projects')
            <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 Project
            </button>
        @endcan --}}
    </div>
    <div class="tenant-panel">

       {{-- Pass activeProjectId from controller --}}
        @php $activeProjectId = $activeProjectId ?? null; @endphp

        <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-[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; @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>
                                    <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->organization?->created_at)->format('M d, Y') ?? 'N/A' }}
                                    </span>
                                </td>
                                {{-- <td>
                                    <span class="text-sm text-secondary-foreground">
                                        {{ optional($project->organization?->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>
                                --}}

                                @canany(['edit.projects', 'delete.projects'])
                                <td class="text-right">
                                    <div class="tenant-action-links">
                                        @can('edit.projects')
                                        <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>
                                        @endcan
                                        @can('delete.projects')
                                        <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>
                                        @endcan
                                    </div>
                                </td>
                                @endcanany
                            </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 Project</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('projects.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="name" class="text-sm font-semibold text-foreground">Project Name</label>
                    <div class="kt-input">
                        <input type="text"
                            name="name"
                            id="name"
                            placeholder="e.g. Health Survey"
                            required />
                    </div>
                    <p class="text-xs text-muted-foreground">Enter a unique and descriptive name for your project.</p>
                </div>

                <div class="flex flex-col gap-2">
                    <label for="description" class="text-sm font-semibold text-foreground">Comment</label>
                    <textarea name="description" id="description" rows="3" class="kt-input p-3" placeholder="Write a short project comment"></textarea>
                </div>

                <!-- Date Format -->
                <div class="flex flex-col gap-2">
                    <label for="date_format" class="text-sm font-semibold text-foreground">Date Format</label>
                    <select name="date_format" id="date_format" class="kt-input" required>
                        <option value="d/m/Y">DD/MM/YYYY</option>
                        <option value="m/d/Y">MM/DD/YYYY</option>
                        <option value="Y-m-d">YYYY-MM-DD</option>
                    </select>
                </div>

                <!-- Project Status -->
                <div class="flex flex-col gap-2">
                    <label for="project_status" class="text-sm font-semibold text-foreground">Status</label>
                    <select name="project_status" id="project_status" class="kt-input">
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                    </select>
                </div>

                <!-- Data Source Type -->
                <div class="flex flex-col gap-2">
                    <label for="data_source_type" class="text-sm font-semibold text-foreground">Data Source Type</label>
                    <select name="data_source_type" id="data_source_type" class="kt-input" required>
                        <option value="">Select Data Source</option>
                        <option value="odk">ODK Central</option>
                        <option value="api">API Server</option>
                        <option value="csv">CSV File</option>
                    </select>
                </div>

                <!-- CSV File Upload (hidden by default) -->
                <div id="csv_upload_section" class="flex flex-col gap-2" style="display: none;">
                    <label for="csv_file" class="text-sm font-semibold text-foreground">Upload CSV File</label>
                    <input type="file" name="csv_file" id="csv_file" accept=".csv,text/csv" class="kt-input">
                    <p class="text-xs text-muted-foreground">Upload a CSV file to automatically generate database schema.</p>
                </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-[80px]" id="create_project_btn">
                        Create Project
                    </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="project_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="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_timezone">Time Zone (optional)</label>
                    <input
                        type="text"
                        name="timezone"
                        id="edit_timezone"
                        class="project-flow-input"
                        placeholder=""
                    />
                </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>
@else
<div class="flex items-center justify-center min-h-[400px]">
    <div class="text-center">
        <i class="ki-filled ki-lock text-4xl text-danger mb-4"></i>
        <h3 class="text-lg font-semibold text-foreground">Access Denied</h3>
        <p class="text-sm text-secondary-foreground">You do not have permission to view this page.</p>
    </div>
</div>
@endcan
@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