@extends('layouts.app')

@section('title', $selectedAccount ? "Dashboard: {$selectedAccount->name}" : 'Select Account - ResMan Sync')

@section('extra_head')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/dark.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
@endsection

@section('extra_css')
        .account-card {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 1.5rem;
            padding: 2.5rem 2rem;
            text-align: center;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.5rem;
            position: relative;
            overflow: hidden;
        }

        .account-card:hover {
            transform: translateY(-10px);
            border-color: var(--primary);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
        }

        .account-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, transparent, var(--primary), transparent);
            transform: translateX(-100%);
            transition: transform 0.6s;
        }

        .account-card:hover::before {
            transform: translateX(100%);
        }

        .account-icon {
            width: 64px;
            height: 64px;
            background: rgba(56, 189, 248, 0.1);
            border-radius: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-size: 1.5rem;
            font-weight: 700;
        }

        .account-card h3 {
            margin: 0;
            font-size: 1.2rem;
            font-weight: 600;
        }

        .account-stats {
            display: flex;
            gap: 1rem;
            font-size: 0.8rem;
            color: var(--text-dim);
        }

        .btn-select {
            background: var(--primary);
            color: #0f172a;
            padding: 0.6rem 1.5rem;
            border-radius: 0.8rem;
            font-weight: 700;
            text-decoration: none;
            font-size: 0.9rem;
            margin-top: 1rem;
        }

        /* Progress Overlay Style (Restored) */
        #sync-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(15, 23, 42, 0.85);
            backdrop-filter: blur(8px);
            z-index: 9999;
            display: none;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            color: white;
            text-align: center;
        }

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

        @keyframes pulse {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(56, 189, 248, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
        }

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

        .pulse-dot {
            width: 8px;
            height: 8px;
            background: var(--primary);
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        .progress-bar-glow {
            background: linear-gradient(90deg, var(--primary), #7dd3fc, var(--primary));
            background-size: 200% 100%;
            animation: shimmer 2s infinite linear;
            box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
        }

        .sync-card {
            background: rgba(30, 41, 59, 0.7);
            padding: 3rem;
            border-radius: 1.5rem;
            border: 1px solid var(--border);
            width: 90%;
            max-width: 500px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        }

        .progress-bar {
            width: 0%;
            height: 100%;
            background: var(--primary);
            box-shadow: 0 0 15px var(--primary);
            border-radius: 4px;
            transition: width 0.3s ease;
        }

        #sync-status-text {
            font-size: 1.1rem;
            font-weight: 500;
            margin-bottom: 0.5rem;
            color: var(--primary);
        }

        #copy-toast {
            position: fixed;
            bottom: 1rem;
            right: 2rem;
            background: var(--primary);
            color: #0f172a;
            padding: 0.6rem 1.2rem;
            border-radius: 0.5rem;
            font-weight: 700;
            font-size: 0.85rem;
            transform: translateY(150%);
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            z-index: 9999;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        }

        /* --- Comprehensive UI Overhaul Styles --- */

        .content-section {
            background: rgba(15, 23, 42, 0.4);
            border: 1px solid var(--border);
            border-radius: 1.5rem;
            overflow: hidden;
            margin-bottom: 3rem;
        }

        .dashboard-page-header {
            padding: 2.5rem 2.5rem 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: transparent;
        }

        .dashboard-toolbar {
            padding: 0 2.5rem 2rem;
            background: transparent;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            flex-wrap: wrap;
            gap: 1.5rem;
        }

        /* Input & Button Standardization */
        .toolbar-input-group {
            display: flex;
            align-items: center;
            background: rgba(15, 23, 42, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 0.75rem;
            height: 44px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .toolbar-input-group:focus-within {
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
            background: rgba(15, 23, 42, 0.9);
        }

        .toolbar-input-group:focus-within {
            border-color: var(--primary);
            background: rgba(0, 0, 0, 0.3);
            box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.1);
        }

        .toolbar-btn {
            height: 44px;
            padding: 0 1.5rem;
            border-radius: 0.75rem;
            font-weight: 700;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 0.6rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            border: none;
            white-space: nowrap;
        }

        .toolbar-btn:hover {
            transform: translateY(-2px);
            filter: brightness(1.1);
            box-shadow: 0 8px 20px rgba(56, 189, 248, 0.2);
        }

        /* Stat Card Premium Styling */
        .stat-card {
            background: rgba(30, 41, 59, 0.4);
            backdrop-filter: blur(10px);
            padding: 1.5rem;
            border-radius: 1.25rem;
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .stat-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(56, 189, 248, 0.1), transparent);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .stat-card:hover {
            border-color: rgba(56, 189, 248, 0.3);
            transform: translateY(-4px);
            background: rgba(30, 41, 59, 0.6);
        }

        .stat-card:hover::after {
            opacity: 1;
        }

        .stat-card .value {
            font-size: 2rem;
            font-weight: 800;
            color: var(--primary);
            display: flex;
            align-items: baseline;
            gap: 0.5rem;
            position: relative;
            z-index: 1;
        }

        /* Custom Checkbox Styling */
        .custom-checkbox {
            display: block;
            position: relative;
            cursor: pointer;
            width: 20px;
            height: 20px;
            user-select: none;
        }

        .custom-checkbox input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 20px;
            width: 20px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border);
            border-radius: 6px;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .custom-checkbox:hover input~.checkmark {
            border-color: var(--primary);
            background: rgba(56, 189, 248, 0.05);
        }

        .custom-checkbox input:checked~.checkmark {
            background: var(--primary);
            border-color: var(--primary);
            box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
        }

        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
            left: 7px;
            top: 3px;
            width: 4px;
            height: 8px;
            border: solid #0f172a;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        .custom-checkbox input:checked~.checkmark:after {
            display: block;
        }

        /* Action Bar Styling */
        #bulk-action-bar {
            position: fixed;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%) translateY(200%);
            background: rgba(15, 23, 42, 0.8);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(56, 189, 248, 0.2);
            padding: 0.75rem 2rem;
            border-radius: 1.25rem;
            display: flex;
            align-items: center;
            gap: 2rem;
            z-index: 10000;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        #bulk-action-bar.visible {
            transform: translateX(-50%) translateY(0);
        }

        /* --- Responsive View Toggling Logic --- */
        .property-grid {
            padding: 0 2.5rem 2.5rem;
        }

        .property-card {
            background: rgba(15, 23, 42, 0.3);
            border: 1px solid var(--border);
            border-radius: 1.25rem;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
            margin-bottom: 1.25rem;
        }

        .property-card:hover {
            border-color: var(--primary);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
        }

        /* DEFAULT (List View / Rows) */
        .property-grid.list-view .property-card {
            padding: 1.5rem 2.5rem;
            display: grid;
            grid-template-columns: 50px 380px 1fr 320px;
            align-items: center;
            gap: 1rem;
        }

        /* ALTERNATE (Grid View / Squares) */
        .property-grid:not(.list-view) {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 1.5rem;
        }

        .property-grid:not(.list-view) .property-card {
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
            margin-bottom: 0;
            background: rgba(15, 23, 42, 0.5);
        }

        /* Repositioning inner UI for Grid View */
        .property-grid:not(.list-view) .property-card>div:nth-child(1) {
            /* Checkbox */
            position: absolute;
            right: 1.5rem;
            top: 1.5rem;
        }

        .property-grid:not(.list-view) .property-card>div.metrics-container {
            /* Metrics block */
            border-left: none !important;
            border-right: none !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            padding: 1rem 0 !important;
            height: auto !important;
        }

        .property-grid:not(.list-view) .property-card>div.identity-container {
            padding-right: 30px;
            /* Leave space for absolute checkbox */
            min-height: 85px;
            /* Alignment */
        }

        /* Status Toggle Switch UI */
        .status-switch {
            position: relative;
            display: inline-block;
            width: 38px;
            height: 20px;
            margin: 0;
            flex-shrink: 0;
        }
        .status-switch input { 
            opacity: 0;
            width: 0;
            height: 0;
        }
        .status-slider {
            position: absolute;
            cursor: pointer;
            top: 0; left: 0; right: 0; bottom: 0;
            background-color: rgba(255,255,255,0.1);
            transition: .4s;
            border-radius: 34px;
            border: 1px solid rgba(255,255,255,0.1);
        }
        .status-slider:before {
            position: absolute;
            content: "";
            height: 14px;
            width: 14px;
            left: 2px;
            bottom: 2px;
            background-color: #f8fafc;
            transition: .4s;
            border-radius: 50%;
        }
        .status-switch input:checked + .status-slider {
            background-color: var(--primary);
            border-color: var(--primary);
        }
        .status-switch input:checked + .status-slider:before {
            transform: translateX(18px);
            background-color: #0f172a;
        }
        .status-switch input:focus + .status-slider {
            box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
        }
@endsection

@section('content')

    @include('partials.action-bar')

    <!-- Sync Progress Overlay -->
    <div id="sync-overlay">
        <div class="sync-card">
            <div id="sync-status-text">Synchronizing...</div>
            <div id="sync-percentage-text"
                style="font-size: 2.5rem; font-weight: 800; color: var(--primary); margin: 1rem 0;">0%</div>
            <div class="progress-container"
                style="width: 100%; height: 8px; background: #0f172a; border-radius: 4px; overflow: hidden; margin: 1.5rem 0;">
                <div class="progress-bar" id="sync-progress"></div>
            </div>
            <div id="sync-details-text" style="font-size: 0.85rem; color: var(--text-dim);">Initializing connection...</div>
        </div>
    </div>

    @if(!$selectedAccount)
        <!-- Account Selection Gallery -->
        <div style="text-align: center; margin-top: 2rem; margin-bottom: 4rem;">
            <h1 style="font-size: 2.2rem; font-weight: 700; margin-bottom: 0.75rem; letter-spacing: -0.02rem;">Welcome back!
            </h1>
            <p style="color: var(--text-dim); font-size: 1.05rem;">Please select a ResMan account to manage properties.</p>
        </div>

        <div style="display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin-bottom: 4rem;">
            @forelse($accounts as $acc)
                <div class="account-card"
                    onclick="window.location.href='?account_id={{ \Illuminate\Support\Facades\Crypt::encryptString($acc->id) }}'"
                    style="width: 100%; max-width: 340px; background: var(--card-bg); border-radius: 1.5rem; padding: 2.5rem; border: 1px solid var(--border); cursor: pointer; transition: all 0.3s ease; text-align: center;">
                    <div class="account-icon"
                        style="width: 88px; height: 88px; background: rgba(56, 189, 248, 0.1); border-radius: 1.25rem; display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 2.2rem; font-weight: 700; margin: 0 auto 1.5rem;">
                        {{ substr($acc->name, 0, 1) }}
                    </div>
                    <h3 style="margin: 0; font-size: 1.3rem; font-weight: 600; margin-bottom: 0.5rem;">{{ $acc->name }}</h3>
                    <div class="account-stats" style="margin-bottom: 2rem;">
                        <span
                            style="font-weight: 600; color: var(--primary); display: block; margin-bottom: 0.25rem;">{{ $acc->properties_count ?? 0 }}
                            Properties</span>
                        <span style="font-size: 0.8rem; color: var(--text-dim);">{{ $acc->subdomain }}</span>
                    </div>
                    <a href="?account_id={{ \Illuminate\Support\Facades\Crypt::encryptString($acc->id) }}" class="btn-select"
                        style="width: 100%; text-align: center; box-sizing: border-box; display: block; padding: 0.75rem; border-radius: 0.75rem;">Enter
                        Portal</a>
                </div>
            @empty
                <div
                    style="text-align: center; padding: 5rem 2rem; background: var(--card-bg); border-radius: 1.5rem; border: 1px dashed var(--border); width: 100%; max-width: 640px;">
                    <p style="color: var(--text-dim); margin-bottom: 2rem; font-size: 1.1rem;">No active ResMan accounts found.</p>
                    <a href="{{ route('accounts.index') }}" class="btn-select"
                        style="padding: 1rem 2.5rem; text-decoration: none;">+ Create First Account</a>
                </div>
            @endforelse
        </div>
    @else
        <!-- Dashboard for Selected Account -->
        <div style="margin-bottom: 2.5rem; display: flex; justify-content: space-between; align-items: flex-end;">
            <div>
                <div
                    style="display: flex; align-items: center; gap: 0.6rem; color: var(--text-dim); font-size: 0.85rem; margin-bottom: 0.75rem; font-weight: 500;">
                    <a href="{{ route('dashboard') }}"
                        style="color: var(--text-dim); text-decoration: none; border-bottom: 1px solid transparent; transition: border 0.2s;"
                        onmouseover="this.style.borderBottomColor='var(--text-dim)'"
                        onmouseout="this.style.borderBottomColor='transparent'">Dashboard</a>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                        <polyline points="9 18 15 12 9 6"></polyline>
                    </svg>
                    <span style="color: var(--primary);">{{ $selectedAccount->name }}</span>
                </div>
                <h1 style="margin: 0; font-size: 2rem; font-weight: 700; letter-spacing: -0.02rem;">Property Overview</h1>
            </div>

            <div style="display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem;">
                <div style="background: var(--card-bg); border: 1px solid var(--border); padding: 0.5rem; border-radius: 1rem; display: flex; flex-direction: column; gap: 0.5rem; box-shadow: var(--shadow); min-width: 340px; transition: all 0.3s ease;">
                    
                    <!-- Integrated Progress Bar (Hidden by default) -->
                    <div id="batch-progress-container" style="display: none; padding: 0.5rem 0.75rem 0.25rem;">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
                            <div style="display: flex; align-items: center; gap: 0.5rem;">
                                <div class="pulse-dot"></div>
                                <span style="font-size: 0.7rem; font-weight: 800; color: var(--primary); letter-spacing: 0.05rem;">SYNC IN PROGRESS</span>
                            </div>
                            <span id="batch-progress-percent" style="font-size: 0.8rem; font-weight: 900; color: white;">0%</span>
                        </div>
                        <div style="width: 100%; height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden; border: 1px solid rgba(255,255,255,0.05);">
                            <div id="batch-progress-bar" class="progress-bar-glow" style="width: 0%; height: 100%; background: var(--primary); transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);"></div>
                        </div>
                        <div id="batch-progress-status" style="font-size: 0.65rem; color: var(--text-dim); margin-top: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic;">Preparing synchronization...</div>
                        <div style="height: 1px; background: var(--border); margin: 0.75rem -0.75rem 0.25rem; opacity: 0.5;"></div>
                    </div>

                    <div style="display: flex; align-items: center; gap: 1rem; padding: 0.25rem 0.5rem;">
                        <button id="sync-all-btn" onclick="syncAccount({{ $selectedAccount->id }})" class="tag"
                            style="background: var(--primary); color: #0f172a; border: none; cursor: pointer; padding: 0.5rem 1rem; border-radius: 0.7rem; font-weight: 800; display: flex; align-items: center; gap: 0.6rem; transition: all 0.2s; box-shadow: 0 4px 12px rgba(56, 189, 248, 0.2);">
                            <svg id="sync-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                                <path d="M23 4v6h-6"></path>
                                <path d="M1 20v-6h6"></path>
                                <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
                            </svg>
                            <span id="sync-btn-text">Sync All</span>
                        </button>
                        
                        <a href="{{ route('reports') }}" class="tag"
                            style="background: transparent; color: var(--primary); border: 1px solid var(--primary); text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.7rem; font-weight: 800; display: flex; align-items: center; gap: 0.6rem; transition: all 0.2s;">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                                <line x1="18" y1="20" x2="18" y2="10"></line>
                                <line x1="12" y1="20" x2="12" y2="4"></line>
                                <line x1="6" y1="20" x2="6" y2="14"></line>
                            </svg>
                            <span>Reports</span>
                        </a>
                        
                        <div style="width: 1px; height: 1.5rem; background: var(--border);"></div>
                        
                        <div style="display: flex; flex-direction: column; gap: 0.1rem;">
                            <span style="font-size: 0.6rem; color: var(--text-dim); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03rem;">Active Portal</span>
                            <select onchange="window.location.href='?account_id='+this.value"
                                style="background: transparent; border: none; color: var(--primary); font-weight: 800; outline: none; cursor: pointer; font-size: 0.95rem; padding: 0; margin-left: -2px;">
                                @foreach($accounts as $acc)
                                    <option value="{{ \Illuminate\Support\Facades\Crypt::encryptString($acc->id) }}" {{ $selectedAccount->id == $acc->id ? 'selected' : '' }}>{{ $acc->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Stats Grid -->
        <div class="stats-grid">
            <div class="stat-card">
                <h3>Account Properties</h3>
                <div class="value">{{ $propertyCount }}<span
                        style="font-size: 1.2rem; font-weight: 500; opacity: 0.5; margin-left: 0.5rem;">Synced</span></div>
            </div>
            <div class="stat-card">
                <h3>Floorplans</h3>
                <div class="value">{{ $floorplanCount }}<span
                        style="font-size: 1.2rem; font-weight: 500; opacity: 0.5; margin-left: 0.5rem;">Assets</span></div>
            </div>
            <div class="stat-card">
                <h3>API Hits {{ (request('date_from') || request('date_to')) ? '(Period)' : '(Life)' }}</h3>
                <div class="value">{{ number_format($totalApiHits) }}</div>
            </div>
        </div>

        <!-- Properties Dashboard Container -->
        <div class="content-section">

            <!-- Row 1: Page Header -->
            <div class="dashboard-page-header">
                <div>
                    <h2 style="font-size: 1.4rem; font-weight: 800; color: white;">Synced Properties</h2>
                    <p style="font-size: 0.8rem; color: var(--text-dim); margin-top: 0.2rem;">Manage and synchronize your ResMan
                        property portfolios.</p>
                </div>

                <div
                    style="display: flex; gap: 0.75rem; align-items: center; background: rgba(0,0,0,0.2); padding: 0.4rem 0.6rem 0.4rem 1rem; border-radius: 0.8rem; border: 1px solid var(--border);">
                    <div
                        style="display: flex; align-items: center; gap: 0.6rem; border-right: 1px solid rgba(255,255,255,0.1); padding-right: 1rem; margin-right: 0.25rem;">
                        <label class="custom-checkbox">
                            <input type="checkbox" id="select-all-toggle" onchange="selectAll(this.checked)">
                            <span class="checkmark"></span>
                        </label>
                        <span
                            style="font-size: 0.7rem; font-weight: 800; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.02rem;">All</span>
                    </div>

                    <button onclick="setView('grid')" id="grid-view-btn" class="view-toggle-btn active"
                        style="width: 38px; height: 38px;" title="Grid View">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                            <rect x="3" y="3" width="7" height="7"></rect>
                            <rect x="14" y="3" width="7" height="7"></rect>
                            <rect x="14" y="14" width="7" height="7"></rect>
                            <rect x="3" y="14" width="7" height="7"></rect>
                        </svg>
                    </button>
                    <button onclick="setView('list')" id="list-view-btn" class="view-toggle-btn"
                        style="width: 38px; height: 38px;" title="List View">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                            <line x1="8" y1="6" x2="21" y2="6"></line>
                            <line x1="8" y1="12" x2="21" y2="12"></line>
                            <line x1="8" y1="18" x2="21" y2="18"></line>
                            <line x1="3" y1="6" x2="3.01" y2="6"></line>
                            <line x1="3" y1="12" x2="3.01" y2="12"></line>
                            <line x1="3" y1="18" x2="3.01" y2="18"></line>
                        </svg>
                    </button>
                </div>
            </div>

            <!-- Row 2: Secondary Toolbar (Search, Filter, Add) -->
            <div class="dashboard-toolbar">
                <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; flex-grow: 1;">
                    <!-- Find Input -->
                    <div class="toolbar-input-group"
                        style="width: 280px; padding: 0 0.85rem; position: relative; gap: 0.25rem;">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
                            style="color: var(--text-dim); flex-shrink: 0;">
                            <circle cx="11" cy="11" r="8"></circle>
                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                        </svg>
                        <input type="text" id="quick-find" placeholder="Find by name or ID..."
                            style="background: transparent; border: none; color: white; padding: 0 0.75rem; font-size: 0.9rem; width: 100%; outline: none;"
                            onkeyup="filterCards(this.value)">
                        <svg onclick="clearQuickFind()" id="clear-quick-search" width="16" height="16" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="3"
                            style="color: var(--text-dim); cursor: pointer; display: none; flex-shrink: 0; background: rgba(255,255,255,0.05); padding: 3px; border-radius: 50%;">
                            <line x1="18" y1="6" x2="6" y2="18"></line>
                            <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
                    </div>
                </div>

                <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
                    <form id="add-property-form" style="margin: 0;">
                        @csrf
                        <input type="hidden" id="account_selector" value="{{ $selectedAccount->id }}">
                        <div class="toolbar-input-group"
                            style="width: 400px; padding: 0 0 0 1rem; justify-content: space-between; overflow: hidden;">
                            <input type="text" id="property_id_input" placeholder="Property ID..." required
                                style="background: transparent; border: none; color: white; padding: 0; font-size: 0.9rem; flex-grow: 1; outline: none;">
                            <button type="submit" class="toolbar-btn"
                                style="background: var(--primary); color: #0f172a; height: 100%; padding: 0 1.25rem; margin: 0; border-radius: 0; border-left: 1px solid var(--border); font-size: 0.8rem; box-shadow: none; justify-content: center;">
                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="4">
                                    <line x1="12" y1="5" x2="12" y2="19"></line>
                                    <line x1="5" y1="12" x2="19" y2="12"></line>
                                </svg>
                                Sync New
                            </button>
                        </div>
                    </form>
                </div>

                <div
                    style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap; margin-top: 0.75rem; width: 100%; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 1rem; overflow-x: auto; padding-bottom: 0.5rem;">
                    <!-- Jump Select -->
                    <div class="toolbar-input-group" style="padding: 0; overflow: hidden; position: relative; height: 36px;">
                        <span
                            style="font-size: 0.6rem; font-weight: 800; color: var(--text-dim); text-transform: uppercase; padding: 0 0.6rem; border-right: 1px solid var(--border); height: 100%; display: flex; align-items: center; background: rgba(255,255,255,0.02); white-space: nowrap; flex-shrink: 0;">Property:</span>
                        <div
                            style="position: relative; display: flex; align-items: center; padding-right: 0.5rem; flex-grow: 1; height: 100%;">
                            <select id="property-filter"
                                style="background: transparent; border: none; color: white; font-size: 0.8rem; outline: none; cursor: pointer; width: 100%; height: 100%; padding: 0 2rem 0 0.6rem; appearance: none; -webkit-appearance: none; min-width: 140px; line-height: 1; color-scheme: dark;">
                                <option value="" style="background: #0f172a; color: #f8fafc;">Select Property</option>
                                @foreach($allProperties as $ap)
                                    <option value="{{ $ap->property_id }}" {{ request('search') == $ap->property_id ? 'selected' : '' }} style="background: #0f172a; color: #f8fafc;">{{ $ap->name }}</option>
                                @endforeach
                            </select>
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
                                style="position: absolute; right: 0.5rem; pointer-events: none; color: var(--text-dim);">
                                <polyline points="6 9 12 15 18 9"></polyline>
                            </svg>
                        </div>
                    </div>

                    <!-- Date Range Picker -->
                    <div class="toolbar-input-group" style="padding: 0 0.75rem; overflow: hidden; position: relative; height: 36px; display: flex; align-items: center; gap: 0.5rem; background: rgba(56, 189, 248, 0.05); border: 1px solid rgba(56, 189, 248, 0.2); min-width: 240px; border-radius: 0.75rem; transition: all 0.3s ease;">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" style="color: var(--primary); opacity: 0.8; flex-shrink: 0;">
                            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                            <line x1="16" y1="2" x2="16" y2="6"></line>
                            <line x1="8" y1="2" x2="8" y2="6"></line>
                            <line x1="3" y1="10" x2="21" y2="10"></line>
                        </svg>
                        <input type="text" id="date-range-picker" placeholder="Filter by date range..." 
                            value="{{ (request('date_from') && request('date_to')) ? request('date_from').' to '.request('date_to') : '' }}"
                            style="background: transparent; border: none; color: white; font-size: 0.85rem; outline: none; cursor: pointer; padding: 0; height: 100%; width: 100%; font-weight: 600; letter-spacing: 0.01rem;">
                        @if(request('date_from') || request('date_to'))
                            <svg id="clear-date-filter" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" style="color: var(--text-dim); cursor: pointer; flex-shrink: 0; transition: color 0.2s;" onmouseover="this.style.color='#f87171'" onmouseout="this.style.color='var(--text-dim)'">
                                <line x1="18" y1="6" x2="6" y2="18"></line>
                                <line x1="6" y1="6" x2="18" y2="18"></line>
                            </svg>
                        @endif
                    </div>

                    <!-- Status Filter -->
                    <div class="toolbar-input-group"
                        style="padding: 0; overflow: hidden; position: relative; height: 36px; display: flex; align-items: center;">
                        <span
                            style="font-size: 0.65rem; font-weight: 800; color: var(--text-dim); text-transform: uppercase; padding: 0 0.75rem; border-right: 1px solid var(--border); height: 100%; display: flex; align-items: center; background: rgba(255,255,255,0.02); white-space: nowrap; flex-shrink: 0;">Status:</span>
                        <select onchange="updateFilter('filter', this.value)"
                            style="background: transparent; border: none; color: white; font-size: 0.8rem; outline: none; cursor: pointer; padding: 0 1.5rem 0 0.75rem; appearance: none; -webkit-appearance: none; min-width: 100px; height: 100%; line-height: 1; color-scheme: dark;">
                            <option value="all" {{ request('filter') == 'all' ? 'selected' : '' }}
                                style="background: #0f172a; color: #f8fafc;">All</option>
                            <option value="active" {{ request('filter') == 'active' ? 'selected' : '' }}
                                style="background: #0f172a; color: #f8fafc;">Active</option>
                            <option value="stale" {{ request('filter') == 'stale' ? 'selected' : '' }}
                                style="background: #0f172a; color: #f8fafc;">Stale</option>
                            <option value="inactive" {{ request('filter') == 'inactive' ? 'selected' : '' }}
                                style="background: #0f172a; color: #f8fafc;">Inactive</option>
                        </select>
                    </div>

                    <!-- Sort By -->
                    <div class="toolbar-input-group"
                        style="padding: 0; overflow: hidden; position: relative; height: 36px; display: flex; align-items: center;">
                        <span
                            style="font-size: 0.65rem; font-weight: 800; color: var(--text-dim); text-transform: uppercase; padding: 0 0.75rem; border-right: 1px solid var(--border); height: 100%; display: flex; align-items: center; background: rgba(255,255,255,0.02); white-space: nowrap; flex-shrink: 0;">Sort:</span>
                        <select onchange="updateFilter('sort', this.value)"
                            style="background: transparent; border: none; color: white; font-size: 0.8rem; outline: none; cursor: pointer; padding: 0 1.5rem 0 0.75rem; appearance: none; -webkit-appearance: none; min-width: 130px; height: 100%; line-height: 1; color-scheme: dark;">
                            <option value="name_asc" {{ request('sort') == 'name_asc' ? 'selected' : '' }}
                                style="background: #0f172a; color: #f8fafc;">Name (A-Z)</option>
                            <option value="name_desc" {{ request('sort') == 'name_desc' ? 'selected' : '' }}
                                style="background: #0f172a; color: #f8fafc;">Name (Z-A)</option>
                            <option value="hits_desc" {{ request('sort') == 'hits_desc' ? 'selected' : '' }}
                                style="background: #0f172a; color: #f8fafc;">API Activity</option>
                            <option value="updated_desc" {{ request('sort') == 'updated_desc' ? 'selected' : '' }}
                                style="background: #0f172a; color: #f8fafc;">Updated</option>
                        </select>
                    </div>

                    @if(request()->has('filter') || request()->has('sort') || request()->has('search') || request()->has('date_from') || request()->has('date_to'))
                        <a href="{{ url()->current() }}?account_id={{ $selectedAccount ? \Illuminate\Support\Facades\Crypt::encryptString($selectedAccount->id) : '' }}" 
                            class="toolbar-btn" 
                            style="background: rgba(239, 68, 68, 0.1); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.2); padding: 0 0.85rem; height: 36px; border-radius: 0.75rem; text-decoration: none; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02rem; display: flex; align-items: center; gap: 0.4rem; transition: all 0.2s; white-space: nowrap; flex-shrink: 0;"
                            onmouseover="this.style.background='rgba(239, 68, 68, 0.2)'"
                            onmouseout="this.style.background='rgba(239, 68, 68, 0.1)'"
                            title="Clear all active filters and search">
                            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4">
                                <path d="M23 4v6h-6"></path>
                                <path d="M1 20v-6h6"></path>
                                <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
                            </svg>
                            Reset
                        </a>
                    @endif
                </div>
            </div>

            <!-- Properties List -->
            <div class="property-grid" id="properties-list">
                @include('partials.property-rows', ['properties' => $properties])
            </div>

            <!-- Pagination Navigation -->
            @if($properties->hasPages())
                <div class="pagination-footer"
                    style="padding: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; border-top: 1px solid var(--border); background: rgba(15, 23, 42, 0.2);">
                    <div style="display: flex; gap: 1rem;">
                        @if($properties->onFirstPage())
                            <span class="toolbar-btn"
                                style="background: rgba(255,255,255,0.02); color: var(--text-dim); border: 1px solid var(--border); cursor: not-allowed; opacity: 0.5; height: 48px; min-width: 140px; justify-content: center;">&laquo;
                                Previous</span>
                        @else
                            <a href="{{ $properties->previousPageUrl() }}" class="toolbar-btn"
                                style="background: rgba(255,255,255,0.05); color: white; border: 1px solid var(--border); text-decoration: none; height: 48px; min-width: 140px; justify-content: center; transition: all 0.2s;">&laquo;
                                Previous</a>
                        @endif

                        @if($properties->hasMorePages())
                            <a href="{{ $properties->nextPageUrl() }}" class="toolbar-btn"
                                style="background: var(--primary); color: #0f172a; text-decoration: none; height: 48px; min-width: 140px; justify-content: center; font-weight: 800; transition: all 0.2s;">Next
                                Page &raquo;</a>
                        @else
                            <span class="toolbar-btn"
                                style="background: rgba(255,255,255,0.02); color: var(--text-dim); border: 1px solid var(--border); cursor: not-allowed; opacity: 0.5; height: 48px; min-width: 140px; justify-content: center;">Next
                                Page &raquo;</span>
                        @endif
                    </div>
                    <div class="pagination-info"
                        style="font-size: 0.85rem; color: var(--text-dim); font-weight: 600; letter-spacing: 0.02rem;">
                        Showing <span style="color: var(--primary); font-weight: 800;">{{ $properties->firstItem() ?? 0 }}</span> -
                        <span style="color: var(--primary); font-weight: 800;">{{ $properties->lastItem() ?? 0 }}</span> of <span
                            style="color: white; font-weight: 800;">{{ $properties->total() }}</span> synchronized properties
                    </div>
                </div>
            @endif
        </div> <!-- End Properties Content Section -->

        <!-- Portal Activity Log Section -->
        <!-- <h2 style="font-size: 1.25rem; font-weight: 800; color: white; margin: 3rem 0 1rem; padding-left: 0.5rem; letter-spacing: 0.02rem;">System Activity</h2> -->
        <div class="content-section">
            <div
                style="background: rgba(255, 255, 255, 0.02); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 1.5rem 2.5rem;">
                <div style="display: flex; align-items: center; gap: 0.75rem; color: var(--text-dim);">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                        <polyline points="14 2 14 8 20 8"></polyline>
                        <line x1="16" y1="13" x2="8" y2="13"></line>
                        <line x1="16" y1="17" x2="8" y2="17"></line>
                        <polyline points="10 9 9 9 8 9"></polyline>
                    </svg>
                    <span
                        style="font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08rem; color: var(--primary);">Portal
                        Activity Log</span>
                </div>
            </div>

            <div id="log-list-container" class="log-list" style="padding: 1.5rem 2.5rem;">
                @include('partials.log-rows', ['syncLogs' => $syncLogs])
            </div>
        </div> <!-- End Activity Log Section -->
    @endif

    <div id="copy-toast">ID Copied to Clipboard!</div>

@endsection

@section('extra_js')
    <script>
        // --- Selection & Bulk Actions ---
        let selectedProperties = [];

        window.toggleCardSelection = function (id, isChecked) {
            const card = document.getElementById('card-' + id);
            if (isChecked) {
                if (!selectedProperties.includes(id)) selectedProperties.push(id);
                if (card) card.style.borderColor = 'var(--primary)';
            } else {
                selectedProperties = selectedProperties.filter(i => i !== id);
                if (card) card.style.borderColor = '';
            }
            updateSelectionUI();
        };

        window.selectAll = function (isChecked) {
            const checkboxes = document.querySelectorAll('.property-checkbox');
            checkboxes.forEach(cb => {
                cb.checked = isChecked;
                window.toggleCardSelection(cb.value, isChecked);
            });
        };

        window.clearSelection = function () {
            selectedProperties = [];
            const checkboxes = document.querySelectorAll('.property-checkbox');
            checkboxes.forEach(cb => cb.checked = false);
            const cards = document.querySelectorAll('.property-card');
            cards.forEach(c => c.style.borderColor = '');
            document.getElementById('select-all-toggle').checked = false;
            updateSelectionUI();
        };

        function updateSelectionUI() {
            const bar = document.getElementById('bulk-action-bar');
            const counter = document.getElementById('selection-counter');

            if (selectedProperties.length > 0) {
                bar.classList.add('visible');
                counter.innerText = selectedProperties.length;
            } else {
                bar.classList.remove('visible');
            }
        }

        window.bulkSync = function () {
            if (selectedProperties.length === 0) return;
            const ids = [...selectedProperties]; // Clone to avoid mutation issues during loop
            ids.forEach(id => window.triggerSync(id));
            clearSelection();
        };

        window.bulkDelete = function () {
            if (selectedProperties.length === 0) return;
            const count = selectedProperties.length;

            Swal.fire({
                title: `Delete ${count} Properties?`,
                text: "This will permanently remove all synced data for the selected items.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#ef4444',
                confirmButtonText: 'Yes, delete all',
                background: '#1e293b',
                color: '#f8fafc'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({ title: 'Deleting...', allowOutsideClick: false, didOpen: () => Swal.showLoading() });

                    // Logic to delete one by one or via a batch endpoint
                    const promises = selectedProperties.map(id => {
                        return fetch("{{ url('/property') }}/" + id, {
                            method: 'DELETE',
                            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' }
                        }).then(res => res.json());
                    });

                    Promise.all(promises).then(() => {
                        Swal.fire('Deleted!', `${count} properties have been removed.`, 'success')
                            .then(() => window.location.reload());
                    });
                }
            });
        };

        // --- Filtering & Sorting ---
        window.updateFilter = function (key, value) {
            const url = new URL(window.location.href);
            url.searchParams.set(key, value);
            // Ensure pagination is reset when filter/sort changes
            url.searchParams.delete('page');
            window.location.href = url.toString();
        };

        // --- Activity Log Polling ---
        let logPollingInterval;

        function pollActivityLogs() {
            @if($selectedAccount)
                const container = document.getElementById('log-list-container');
                if (!container) return;

                let logsUrl = "{{ url('/dashboard/logs') }}?account_id={{ $selectedAccount ? \Illuminate\Support\Facades\Crypt::encryptString($selectedAccount->id) : '' }}";
                const currentParams = new URLSearchParams(window.location.search);
                currentParams.forEach((val, key) => {
                    if (key !== 'account_id') {
                        logsUrl += "&" + key + "=" + encodeURIComponent(val);
                    }
                });

                fetch(logsUrl, {
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                })
                    .then(res => res.json())
                    .then(data => {
                        if (data.html) {
                            // We only update if the content has changed to avoid unnecessary re-renders
                            if (container.dataset.lastHash !== data.hash) {
                                container.innerHTML = data.html;
                                container.dataset.lastHash = data.hash;
                            }
                        }
                    })
                    .catch(err => console.error("Polling error:", err));
            @endif
        }

        // --- View Toggling ---
        window.setView = function (mode) {
            const list = document.getElementById('properties-list');
            const gridBtn = document.getElementById('grid-view-btn');
            const listBtn = document.getElementById('list-view-btn');

            if (!list) return;

            if (mode === 'list') {
                list.classList.add('list-view');
                if (listBtn) listBtn.classList.add('active');
                if (gridBtn) gridBtn.classList.remove('active');
            } else {
                list.classList.remove('list-view');
                if (gridBtn) gridBtn.classList.add('active');
                if (listBtn) listBtn.classList.remove('active');
            }
            localStorage.setItem('property_view_mode', mode);
        };

        // --- Quick Find ---
        window.filterCards = function (query) {
            const cards = document.querySelectorAll('.property-card');
            const clearBtn = document.getElementById('clear-quick-search');
            query = query.toLowerCase();

            if (clearBtn) {
                clearBtn.style.display = query ? 'block' : 'none';
            }

            cards.forEach(card => {
                const name = card.querySelector('h3').innerText.toLowerCase();
                const id = card.dataset.propertyId.toLowerCase();
                if (name.includes(query) || id.includes(query)) {
                    card.style.display = 'flex';
                } else {
                    card.style.display = 'none';
                }
            });
        };

        window.clearQuickFind = function () {
            const input = document.getElementById('quick-find');
            if (input) {
                input.value = '';
                filterCards('');
            }
        };

        // --- Clipboard ---
        window.copyID = function (text, btn) {
            navigator.clipboard.writeText(text).then(() => {
                const toast = document.getElementById('copy-toast');
                toast.style.transform = 'translateY(0)';
                const originalColor = btn.style.color;
                btn.style.color = 'var(--primary)';
                setTimeout(() => {
                    toast.style.transform = 'translateY(150%)';
                    btn.style.color = originalColor;
                }, 2000);
            });
        };

        // --- Initializers ---
        document.addEventListener('DOMContentLoaded', () => {
            const savedMode = localStorage.getItem('property_view_mode') || 'grid';
            setView(savedMode);

            @if($selectedAccount)
                // Initialize Polling
                pollActivityLogs();
                logPollingInterval = setInterval(pollActivityLogs, 8000);

                // Jump to Property Dropdown handler
                const propertyFilter = document.getElementById('property-filter');
                if (propertyFilter) {
                    propertyFilter.addEventListener('change', function () {
                        const val = this.value;
                        if (val) {
                            window.location.href = window.location.pathname + '?account_id={{ $selectedAccount ? \Illuminate\Support\Facades\Crypt::encryptString($selectedAccount->id) : '' }}&search=' + val;
                        } else {
                            window.location.href = window.location.pathname + '?account_id={{ $selectedAccount ? \Illuminate\Support\Facades\Crypt::encryptString($selectedAccount->id) : '' }}';
                        }
                    });
                }
            @endif

        @if($selectedAccount)
            // --- Property Sync, Delete & Toggle Logic ---

            window.togglePropertyStatus = function (propId, isChecked) {
                const newStatus = isChecked ? 1 : 0;
                fetch("{{ url('/property') }}/" + propId + "/toggle-status", {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({ is_status: newStatus })
                })
                .then(res => res.json())
                .then(data => {
                    if (data.status === 'success') {
                        // The UI will be handled via the toggle switch directly, but if they deactivated it
                        // we may potentially want to fade out the card or reload it
                        const card = document.getElementById('card-' + propId);
                        if (card) {
                            card.style.opacity = newStatus === 1 ? '1' : '0.5';
                        }
                    } else {
                        Swal.fire('Error', data.message || 'Failed to update status.', 'error');
                        // Revert switch if failed
                        const checkbox = document.querySelector(`#card-${propId} .status-toggle-switch`);
                        if (checkbox) checkbox.checked = !isChecked;
                    }
                })
                .catch(err => {
                    console.error(err);
                    Swal.fire('Error', 'Network error while attempting to toggle status.', 'error');
                });
            };

            window.confirmDeleteProperty = function (propId) {
                Swal.fire({
                    title: 'Delete Property?',
                    text: "This will remove all synced history and data for #" + propId,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#ef4444',
                    cancelButtonColor: '#334155',
                    confirmButtonText: 'Yes, delete it',
                    background: '#1e293b',
                    color: '#f8fafc'
                }).then((result) => {
                    if (result.isConfirmed) {
                        fetch("{{ url('/property') }}/" + propId, {
                            method: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'Accept': 'application/json'
                            }
                        })
                            .then(res => res.json())
                            .then(data => {
                                if (data.status === 'success') {
                                    Swal.fire('Deleted!', data.message, 'success').then(() => window.location.reload());
                                } else {
                                    Swal.fire('Error', data.message || 'Failed to delete.', 'error');
                                }
                            });
                    }
                });
            };

            const addPropertyForm = document.getElementById('add-property-form');
            if (addPropertyForm) {
                addPropertyForm.addEventListener('submit', function (e) {
                    e.preventDefault();
                    const propInput = document.getElementById('property_id_input');
                    const propId = propInput.value;
                    if (propId) {
                        window.triggerSync(propId, true);
                        propInput.value = '';
                    }
                });
            }

            window.triggerSync = function (propId, isNewAdd = false) {
                // Show SweetAlert popup immediately
                Swal.fire({
                    title: 'Syncing Property #' + propId,
                    html: `
                                                                        <div style="margin-top: 1rem; text-align: left; background: rgba(0,0,0,0.2); padding: 1rem; border-radius: 0.5rem; border: 1px solid var(--border);">
                                                                            <div style="font-size: 0.85rem; color: var(--text-dim); margin-bottom: 0.5rem;">Current Actions:</div>
                                                                            <b id="swal-sync-status" style="color: var(--primary);">Initializing Sync Pipeline...</b>
                                                                        </div>
                                                                    `,
                    allowOutsideClick: false,
                    background: '#1e293b',
                    color: '#f8fafc',
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                let pollInterval;

                const startPolling = (id) => {
                    pollInterval = setInterval(() => {
                        fetch("{{ url('/sync-status') }}/" + id + "?t=" + new Date().getTime())
                            .then(res => res.json())
                            .then(data => {
                                const status = data.status || "";
                                const statusEl = document.getElementById('swal-sync-status');
                                if (statusEl) statusEl.innerText = status;

                                if (status.includes('complete') || status.toLowerCase().includes('success')) {
                                    clearInterval(pollInterval);
                                    Swal.fire({
                                        title: 'Sync Complete',
                                        text: 'Property data has been perfectly synchronized.',
                                        icon: 'success',
                                        background: '#1e293b',
                                        color: '#f8fafc'
                                    }).then(() => {
                                        window.location.reload();
                                    });
                                }
                                if (status.includes('Error')) {
                                    clearInterval(pollInterval);
                                    Swal.fire('Sync Failed', status, 'error');
                                }
                            });
                    }, 2000);
                };

                const formData = new FormData();
                formData.append('property_id', propId);
                formData.append('resman_account_id', "{{ $selectedAccount->id ?? '' }}");
                formData.append('_token', '{{ csrf_token() }}');
                if (isNewAdd) {
                    formData.append('is_new_add', '1');
                }

                startPolling(propId);

                fetch("{{ route('property.add') }}", {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    }
                })
                    .then(async res => {
                        const data = await res.json();
                        if (!res.ok) throw new Error(data.message || 'Validation failed');
                        if (data.status === 'error') throw new Error(data.message || 'Sync failed');
                        // Polling catches the success states!
                        return data;
                    })
                    .catch(error => {
                        clearInterval(pollInterval);
                        Swal.fire('Error', error.message, 'error');
                    });
            };

            window.startBatchPolling = function (accountId) {
                const container = document.getElementById('batch-progress-container');
                const btn = document.getElementById('sync-all-btn');
                const btnText = document.getElementById('sync-btn-text');
                const icon = document.getElementById('sync-icon');

                if (container) container.style.display = 'block';
                if (btn) {
                    btn.style.opacity = '0.7';
                    btn.style.pointerEvents = 'none';
                    if (btnText) btnText.innerText = 'Syncing...';
                    if (icon) icon.style.animation = 'spin 2s linear infinite';
                }

                let pollInterval = setInterval(() => {
                    fetch("{{ url('/accounts') }}/" + accountId + "/sync-status?t=" + new Date().getTime())
                        .then(res => res.json())
                        .then(data => {
                            const statusEl = document.getElementById('batch-progress-status');
                            const barEl = document.getElementById('batch-progress-bar');
                            const percentEl = document.getElementById('batch-progress-percent');
                            
                            if (data.status && statusEl) statusEl.innerText = data.status;
                            if (data.total > 0) {
                                const percent = Math.round((data.current / data.total) * 100);
                                if (barEl) barEl.style.width = percent + '%';
                                if (percentEl) percentEl.innerText = percent + '%';
                            }

                            if (data.completed === true) {
                                clearInterval(pollInterval);
                                // Reset UI
                                if (container) container.style.display = 'none';
                                if (btn) {
                                    btn.style.opacity = '1';
                                    btn.style.pointerEvents = 'auto';
                                    if (btnText) btnText.innerText = 'Sync All';
                                    if (icon) icon.style.animation = 'none';
                                }
                                
                                if (data.status !== 'Idle') {
                                    Swal.fire({
                                        title: 'All Properties Synced!',
                                        text: 'Your entire account portfolio has been perfectly synchronized.',
                                        icon: 'success',
                                        background: '#1e293b',
                                        color: '#f8fafc'
                                    }).then(() => window.location.reload());
                                }
                            }
                        })
                        .catch(err => {
                            console.error("Polling error:", err);
                            clearInterval(pollInterval);
                        });
                }, 3000);
            };

            window.syncAccount = function (accountId) {
                // Just trigger the sync and start polling
                fetch("{{ url('/accounts') }}/" + accountId + "/sync", {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    }
                })
                .then(res => res.json())
                .catch(err => console.error("Sync trigger error:", err));

                // Start UI polling
                window.startBatchPolling(accountId);
            };

                // Auto-check on page load
                @if($selectedAccount)
                    fetch("{{ url('/accounts') }}/{{ $selectedAccount->id }}/sync-status")
                        .then(res => res.json())
                        .then(data => {
                            if (data.completed === false) {
                                window.startBatchPolling({{ $selectedAccount->id }});
                            }
                        });
                @endif
            @endif

            // --- Date Range Picker (Flatpickr) ---
            const datePickerEl = document.getElementById('date-range-picker');
            if (datePickerEl) {
                flatpickr(datePickerEl, {
                    mode: "range",
                    dateFormat: "Y-m-d",
                    theme: "dark",
                    defaultDate: [
                        "{{ request('date_from') }}",
                        "{{ request('date_to') }}"
                    ],
                    prevArrow: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="15 18 9 12 15 6"></polyline></svg>',
                    nextArrow: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="9 18 15 12 9 6"></polyline></svg>',
                    onChange: function (selectedDates, dateStr, instance) {
                        if (selectedDates.length === 2) {
                            const from = instance.formatDate(selectedDates[0], "Y-m-d");
                            const to = instance.formatDate(selectedDates[1], "Y-m-d");

                            const url = new URL(window.location.href);
                            url.searchParams.set('date_from', from);
                            url.searchParams.set('date_to', to);
                            url.searchParams.delete('page');
                            window.location.href = url.toString();
                        }
                    },
                    onClose: function (selectedDates, dateStr, instance) {
                        if (selectedDates.length === 1) {
                            const date = instance.formatDate(selectedDates[0], "Y-m-d");
                            const url = new URL(window.location.href);
                            url.searchParams.set('date_from', date);
                            url.searchParams.set('date_to', date);
                            url.searchParams.delete('page');
                            window.location.href = url.toString();
                        }
                    }
                });
            }

            const clearDateBtn = document.getElementById('clear-date-filter');
            if (clearDateBtn) {
                clearDateBtn.addEventListener('click', function (e) {
                    e.stopPropagation();
                    const url = new URL(window.location.href);
                    url.searchParams.delete('date_from');
                    url.searchParams.delete('date_to');
                    window.location.href = url.toString();
                });
            }
        });
    </script>
@endsection