@extends('layouts.demo10.base')

@section('content')
<style>
    .tenant-screen {
        display: grid;
        gap: 1.25rem;
        width: 100%;
        max-width: 100%;
    }

    .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;
        width: 100%;
        margin-left: auto;
    }

    .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;
        flex-shrink: 0;
        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;
        min-width: 0;
    }

    .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;
        width: 100%;
        max-width: 100%;
    }

    /* Table Wrapper */
    .kt-card-table {
        width: 100%;
        overflow-x: auto !important;
    }

    .kt-scrollable-x-auto {
        width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden;
        display: block;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .kt-scrollable-x-auto::-webkit-scrollbar { height: 8px; }
    .kt-scrollable-x-auto::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 20px; }
    .kt-scrollable-x-auto::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 20px; }

    .tenant-table {
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
        min-width: 750px;
    }

    .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;
        white-space: nowrap;
    }

    .tenant-table tbody td {
        padding: 0.9rem 1rem;
        vertical-align: middle;
        border-bottom: 1px solid #edf2f7;
        border-right: 1px solid #dbe3ee;
        white-space: nowrap;
    }

    .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-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; }

    /* Modal styles */
    .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; }

    /* DataTables */
    .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; }

    /* Black space fix */
    html, body { background: #faf9f6 !important; }

    /* ═══════════════════════════════
       MOBILE RESPONSIVE
    ═══════════════════════════════ */
  @media (max-width: 767px) {

    .tenant-screen { gap: 1rem; }

    h1.font-semibold { font-size: 22px !important; }

    .tenant-toolbar {
        flex-direction: row !important;
        align-items: center;
        gap: 0.6rem;
        width: 100%;
    }

    .tenant-search {
        flex: 1;
        min-width: 0;
        width: auto;
    }

    .tenant-add-btn {
        flex-shrink: 0;
        width: auto !important;
        white-space: nowrap;
        padding-inline: 0.85rem !important;
    }

    .kt-card-table {
        width: 100%;
        overflow: hidden !important;
    }

    /* DataTables wrapper overflow visible */
    #projects_datatable_wrapper,
    .dataTables_wrapper {
        overflow: visible !important;
    }

    /* Sirf table wala hissa scroll kare */
    .dataTables_wrapper > .kt-scrollable-x-auto,
    .kt-scrollable-x-auto {
        width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100%;
        /* Scrollbar table ke bilkul neeche */
        margin-bottom: 0 !important;
    }

    .tenant-table {
        min-width: 750px !important;
        width: max-content !important;
    }

    .tenant-table thead th,
    .tenant-table tbody td {
        padding: 0.7rem 0.75rem;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    .tenant-panel { border-radius: 10px; }

    /* Pagination - scrollable wrapper ke bahar */
    .dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    margin-bottom: 0 !important;
}

.dataTables_wrapper .dataTables_paginate {
    width: 100% !important;
    text-align: left !important;
    margin-top: 0.5rem !important;
    display: block !important;
}

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    float: none !important;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 0.45rem 0.55rem !important;
        font-size: 0.78rem !important;
    }
}

    @media (max-width: 480px) {
        .tenant-table { min-width: 700px !important; }

        .tenant-table thead th,
        .tenant-table tbody td {
            padding: 0.6rem 0.6rem;
            white-space: nowrap;
        }

        .tenant-panel,
        .kt-card-table,
        .kt-scrollable-x-auto {
            overflow-x: auto !important;
        }
    }
</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($organizations as $organization)


                    <tr id="org-row-{{ $organization->id }}">

                        <td>{{ $organization->id }}</td>

                        <!-- <td>
                            {{ $organization->owner->email ?? 'N/A' }}
                        </td> -->

                        <td>
                            {{ $organization->name ?? 'N/A' }}
                        </td>

                        <td>
                            @php
                                $tenantHomeMeta = app(\App\Services\TenantDomainService::class)
                                    ->tenantHomeMetaForOrganization($organization);
                                $domainProgressUrl = $tenantHomeMeta['url'];
                                $themeLabel = $tenantHomeMeta['theme_label'];
                            @endphp

                            @if($domainProgressUrl)
                                <div class="flex flex-col gap-2">
                                    <a href="{{ $domainProgressUrl }}" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline break-all">
                                        {{ $domainProgressUrl }}
                                    </a>
                                    @if($themeLabel)
                                        <div>
                                            <span class="inline-flex items-center rounded-full bg-blue-50 px-2.5 py-1 text-xs font-semibold text-blue-700 ring-1 ring-inset ring-blue-200">
                                                {{ $themeLabel }} Theme
                                            </span>
                                        </div>
                                    @endif
                                </div>
                            @else
                                No domain assigned
                            @endif

                        </td>

                        <td>
                            {{ $organization->industry_type ?? 'N/A' }}
                        </td>

                        <td>
                            {{ $organization->timezone ?? 'N/A' }}
                        </td>

                        <td>
                            {{ optional($organization->created_at)->format('M d, Y') ?? 'N/A' }}
                        </td>

                        <td class="text-right">
                            <div class="tenant-action-links">
                                @auth
                                    @if(auth()->user()->isSuperAdmin())
                                    <a class="tenant-action-link view-admin-btn"
                                        href="javascript:void(0)"
                                        data-id="{{ $organization->id }}"
                                        title="View Tenant Admin">
                                        <i class="ki-filled ki-eye"></i>
                                    </a>
                                    @endif
                                @endauth

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

                                <a class="tenant-action-link delete-project-btn"
                                    href="javascript:void(0)"
                                    data-id="{{ $organization->id }}">
                                    <i class="ki-filled ki-trash"></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 $package)
                            <option value="{{ $package->id }}">{{ $package->name }}</option>
                            @endforeach
                        </select>
                    </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 Organization</h3>
            <button type="button" 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 method="POST" id="edit_project_form">
                @csrf

                <!-- Organization ID -->
                <input type="hidden" name="id" id="edit_org_id">

                <section class="project-step-panel">

                    <!-- Title -->
                    <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>

                    <!-- Organization Name -->
                    <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"
                            required />
                    </div>

                    <!-- Owner Email -->
                    <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="email"
                                name="email"
                                id="edit_email"
                                placeholder="User Email"
                                required />
                        </div>
                    </div>

                    <!-- Industry -->
                    <div class="project-flow-field">
                        <label for="edit_industry_type">Industry Type</label>
                        <select name="industry_type" id="edit_industry_type" class="project-flow-input">
                            <option value="">Select Industry</option>
                            <option value="technology">Technology</option>
                            <option value="healthcare">Healthcare</option>
                            <option value="education">Education</option>
                            <option value="finance">Finance</option>
                        </select>
                    </div>

                    <!-- Timezone (MISSING FIX) -->
                    <div class="project-flow-field">
                        <label for="edit_timezone">Time Zone</label>
                        <select name="timezone" id="edit_timezone" class="project-flow-input">
                            <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 class="project-flow-field">
                        <label for="edit_package_id">Packages</label>
                        <select name="package_id" id="edit_package_id" class="project-flow-input" required>
                            <option value="">Select Packages</option>
                            @foreach(($packages ?? collect()) as $package)
                            <option value="{{ $package->id }}">{{ $package->name }}</option>
                            @endforeach
                        </select>
                    </div>


                    <!-- Optional Logo -->
                    <div class="project-flow-field">
                        <label for="edit_logo">Organization Logo</label>
                        <input
                            type="file"
                            name="logo_path"
                            id="edit_logo"
                            class="project-flow-input" />
                    </div>

                    <!-- Actions -->
                    <div class="flex justify-end gap-3 pt-3 modal-btns">
                        <button type="button" class="kt-btn kt-btn-light min-w-[80px]" data-kt-modal-dismiss="true">
                            Cancel
                        </button>

                        <button type="submit" class="kt-btn common-secondary-btn min-w-[80px]">
                            Update
                        </button>
                    </div>

                </section>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
@vite('resources/js/pages/projects.js')
<style>
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        border: none !important;
        background: none !important;
        padding: 0.4rem 0.65rem !important;
        margin: 0 2px !important;
        border-radius: 0.375rem !important;
        color: var(--secondary-foreground) !important;
        cursor: pointer !important;
        min-width: 32px !important;
        text-align: center !important;
    }

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

    .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
    .dataTables_wrapper .dataTables_paginate .paginate_button.next {
        font-weight: 500 !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;
        display: flex !important;
        align-items: center !important;
        gap: 0.25rem !important;
    }

    /* Pagination wrapper */
    .kt-scrollable-x-auto + div {
        padding: 0.75rem 1rem !important;
        border-top: 1px solid #e2e8f0;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !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.');

                        if (data.redirect_url) {
                            setTimeout(() => {
                                window.location.href = data.redirect_url;
                            }, 200);
                            return;
                        }

                        // ── 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);
        //     }

    });
    // Fix SweetAlert2 black backdrop issue
document.addEventListener('swal2-shown', function() {
    document.body.style.overflow = 'hidden';
});
document.addEventListener('swal2-closed', function() {
    document.body.style.overflow = '';
});
</script>
@endsection