@push('styles')
<style>
    /* Full-page loader */
    .full-page-loader {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 9999 !important;
        backdrop-filter: blur(4px) !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Hide loader by default - will be shown by JavaScript when needed */
    .full-page-loader {
        display: none !important;
    }
    
    /* Show loader when display: flex is set inline (for export loader) */
    .full-page-loader[style*="display: flex"] {
        display: flex !important;
    }
    
    /* Hide loader when display: none is set inline */
    .full-page-loader[style*="display: none"] {
        display: none !important;
    }
    
    /* Show loader when show-loader class is added (for AJAX loading) */
    .full-page-loader.show-loader {
        display: flex !important;
    }
    
    /* Show loader when it has the show-loader class (added by JavaScript as fallback) */
    .full-page-loader.show-loader {
        display: flex !important;
    }
    
    .loader-content {
        background: white;
        padding: 2rem;
        border-radius: 0.5rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .spinner {
        border: 4px solid #f3f4f6;
        border-top: 4px solid #3b82f6;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    /* AJAX Dashboard Loader Styles */
    .ajax-loader-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        display: none;
        justify-content: center;
        align-items: center;
    }
    
    .ajax-loader-content {
        background: white;
        padding: 2rem;
        border-radius: 0.5rem;
        text-align: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .ajax-loader-content .spinner {
        border: 4px solid #f3f4f6;
        border-top: 4px solid #3b82f6;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
        margin: 0 auto 1rem;
    }
    
    .ajax-loader-content p {
        margin: 0;
        color: #374151;
        font-size: 0.875rem;
    }
    
    .py-8 {
        padding-bottom: 0rem;
        padding-top: 0rem;
    }

    .gap-y-8 {
        row-gap: 1rem !important;
    }
    
    .dashboard-content-wrapper {
        padding: 1rem; /* Standardized padding */
    }
    
    /* Billing Page Style Filters */
    .filters-horizontal {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 1rem;
        margin-bottom: 16px;
        display: flex;
        flex-wrap: nowrap;
        gap: 12px;
        align-items: flex-start;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
        overflow-x: auto;
    }
    
    .filter-section {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 210px;
        flex: 0 0 auto;
        flex-shrink: 0;
    }
    
    .filter-label {
        font-size: 0.875rem;
        font-weight: 500;
        color: #000000;
        margin-bottom: 0.5rem;
        white-space: nowrap;
        line-height: 0.5rem;
        row-gap: 0.5rem;
    }
    
    .filter-input {
        width: 100%;
        min-width: 200px;
    }
    
    .date-range-section {
        min-width: 400px;
    }
    
    .date-range-inputs {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .date-input {
        flex: 1;
        min-width: 180px;
    }
    
    .date-separator {
        font-size: 12px;
        color: #6b7280;
        white-space: nowrap;
    }
    
    .filter-buttons {
        align-items: flex-end;
        margin-left: auto;
    }
    
    .filter-actions {
        display: flex;
        gap: 8px;
        align-items: center;
    }
    
    .btn-filter {
        padding: 0.5rem 1rem;
        border-radius: 8px;
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        border: 1px solid transparent;
        transition: all 0.2s;
    }
    
    .btn-search {
        background: #111827;
        color: #fff;
        border-color: #111827;
    }
    
    .btn-search:hover {
        background: #374151;
        border-color: #374151;
    }
    
    .btn-reset {
        background: #fff;
        color: #374151;
        border-color: #d1d5db;
    }
    
    .btn-reset:hover {
        background: #f9fafb;
        border-color: #9ca3af;
    }
    
    .input {
        border-radius: 0.375rem !important;
        border: 1px solid #d1d5db !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 45px !important;
        min-height: 45px !important;
        max-height: 45px !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        box-sizing: border-box !important;
    }
    
    select.input {
        background-color: #fff;
        cursor: pointer;
    }
    
    /* Filter section spacing and alignment */
    .fi-section-content-ctn {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .fi-fo-field-wrp-label {
        margin-bottom: 0 !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
    }
    
    .fi-fo-field-wrp-label-content {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Make form fields compact and inline */
    .fi-fo-field-wrp {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }
    
    .fi-input-wrp {
        margin: 0 !important;
    }
    
    /* Ensure filter section elements are in single row */
    .fi-section-content-ctn > div {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Filter section container */
    .filter-section-container {
        display: flex !important;
        align-items: center !important;
        gap: 1.5rem !important;
        width: 100% !important;
    }
    
    /* Filter form container */
    .filter-form-container {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    /* Grid layout for filter fields - 12 columns with proper spacing */
    .mb-2.bg-white.rounded-lg .fi-section .fi-grid,
    .filter-form-container .fi-section .fi-grid {
        gap: 0 !important;
        column-gap: 1.25rem !important;
        row-gap: 0 !important;
        align-items: center !important;
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }
    
    /* Ensure all filter field containers align inline with consistent spacing */
    .mb-2.bg-white.rounded-lg .fi-section .fi-grid > div,
    .filter-form-container .fi-section .fi-grid > div {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    
    /* Hide the hidden date picker fields from layout */
    .mb-2.bg-white.rounded-lg .fi-section .fi-grid > div[class*="hidden"],
    .filter-form-container .fi-section .fi-grid > div[class*="hidden"],
    .mb-2.bg-white.rounded-lg .fi-section .fi-grid > div[style*="display: none"],
    .filter-form-container .fi-section .fi-grid > div[style*="display: none"] {
        display: none !important;
    }
    
    
    /* Show labels inline (horizontal) with inputs */
    .mb-2.bg-white.rounded-lg .fi-fo-field-wrp-label,
    .filter-form-container .fi-fo-field-wrp-label {
        display: inline-flex !important;
        align-items: center !important;
        margin-bottom: 0 !important;
        margin-right: 0.625rem !important;
        white-space: nowrap !important;
        font-weight: 500 !important;
        color: #374151 !important;
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        flex-shrink: 0 !important;
    }
    
    /* Ensure form field wrappers display labels inline with inputs */
    .mb-2.bg-white.rounded-lg .fi-fo-field-wrapper,
    .filter-form-container .fi-fo-field-wrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 0 !important;
    }
    
    /* Ensure form fields are properly aligned inline */
    .mb-2.bg-white.rounded-lg .fi-fo-field-wrp,
    .filter-form-container .fi-fo-field-wrp {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        gap: 0 !important;
    }
    
    /* Ensure inline label styles are maintained */
    .mb-2.bg-white.rounded-lg .fi-fo-field-wrapper.fi-inline,
    .filter-form-container .fi-fo-field-wrapper.fi-inline {
        flex-direction: row !important;
    }
    
    .mb-2.bg-white.rounded-lg .fi-fo-field-wrapper.fi-inline .fi-fo-field-wrp-label,
    .filter-form-container .fi-fo-field-wrapper.fi-inline .fi-fo-field-wrp-label {
        display: inline-flex !important;
        align-items: center !important;
        margin-bottom: 0 !important;
        margin-right: 0.625rem !important;
    }
    
    /* Ensure select inputs have proper styling - consistent sizing */
    .mb-2.bg-white.rounded-lg select,
    .filter-form-container select,
    .filter-form-container .fi-select select,
    .filter-form-container .fi-input-wrapper select,
    .filter-form-container .date-range-select select,
    .filter-form-container .fi-select-wrapper select,
    .filter-form-container .date-range-select .fi-select select,
    .filter-form-container .date-range-select .fi-select-input {
        border-radius: 0.375rem !important;
        border: 1px solid #d1d5db !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 45px !important;
        min-height: 45px !important;
        max-height: 45px !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure select wrapper containers are consistent and take remaining space */
    .filter-form-container .fi-select-wrapper,
    .filter-form-container .fi-input-wrapper,
    .filter-form-container .date-range-select .fi-select-wrapper,
    .filter-form-container .fi-fo-field-wrp > div:not(.fi-fo-field-wrp-label),
    .filter-form-container .fi-fo-field-wrapper > div:not(.fi-fo-field-wrp-label) {
        flex: 1 !important;
        min-width: 0 !important;
        width: auto !important;
    }
    
    /* Ensure inputs within wrappers take full width */
    .filter-form-container .fi-select-wrapper select,
    .filter-form-container .fi-input-wrapper input,
    .filter-form-container .fi-select-wrapper .fi-select-input {
        width: 100% !important;
    }
    
    /* Override date-range-select specific styles to match other fields */
    .filter-form-container .date-range-select select,
    .filter-form-container .date-range-select .fi-select-input {
        height: 45px !important;
        min-height: 45px !important;
        max-height: 45px !important;
        padding: 0.5rem 0.75rem !important;
        border-radius: 0.375rem !important;
    }
    
    /* Package select - allow expansion based on content - make it bigger than others */
    /* Target Package field using data attribute or class added by JavaScript */
    .package-field-wrapper .fi-select-wrapper,
    .package-field-wrapper .fi-select-input-wrapper {
        width: auto !important;
        min-width: 300px !important;
        max-width: none !important;
        flex: 0 1 auto !important;
    }
    
    .package-field-wrapper .fi-select-input,
    .package-field-wrapper select {
        width: auto !important;
        min-width: 300px !important;
        max-width: none !important;
    }
    
    /* Target by name attribute - more specific */
    select[name="pendingFilters.product_plan"],
    input[name="pendingFilters.product_plan"],
    [name*="product_plan"][type="text"],
    [name*="product_plan"] select {
        width: auto !important;
        min-width: 300px !important;
        max-width: none !important;
    }
    
    /* Target wrapper containing product_plan field */
    .fi-fo-field-wrapper:has([name*="product_plan"]) .fi-select-wrapper,
    .fi-fo-field-wrapper:has([name*="product_plan"]) .fi-select-input-wrapper {
        width: auto !important;
        min-width: 300px !important;
        max-width: none !important;
        flex: 0 1 auto !important;
    }
    
    /* Ensure Package field wrapper takes more space */
    .fi-fo-field-wrapper:has([name*="product_plan"]) {
        flex: 1 1 auto !important;
        min-width: 300px !important;
    }
    
    /* Ensure Filament select dropdowns are clickable and visible
    .fi-select-dropdown,
    .fi-select-option,
    [role="listbox"],
    [role="option"] {
        pointer-events: auto !important;
        z-index: 9999 !important;
        position: relative !important;
    } */
    
    /* Ensure select input triggers are clickable
    .fi-select-input,
    .fi-select-trigger,
    .fi-select-wrapper,
    select[name*="region"],
    select[name*="product_plan"],
    input[name*="region"],
    input[name*="product_plan"] {
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 1 !important;
    }
    
    /* Ensure dropdown container has high z-index */
    .fi-select-dropdown-panel,
    .fi-select-dropdown-content,
    .fi-dropdown-panel,
    [role="listbox"] {
        z-index: 10000 !important;
        pointer-events: auto !important;
        position: absolute !important;
    } */
    
    /* Ensure select wrapper allows interactions */
    .fi-select-wrapper,
    .fi-select-input-wrapper {
        position: relative !important;
    }
    
    /* Prevent any overlay from blocking selects */
    .filter-form-container,
    .filter-section-container {
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Date range fields styling */
    .date-range-start,
    .date-range-end {
        position: relative;
    }
    
    /* Hide date fields when not visible (when custom is not selected) */
    .date-range-start[style*="display: none"],
    .date-range-end[style*="display: none"],
    .date-range-start .fi-fo-field-wrapper[style*="display: none"],
    .date-range-end .fi-fo-field-wrapper[style*="display: none"] {
        display: none !important;
    }
    
    /* Show labels inline with date fields */
    .date-range-start .fi-fo-field-wrp-label,
    .date-range-end .fi-fo-field-wrp-label {
        display: inline-flex !important;
        align-items: center !important;
        margin-bottom: 0 !important;
        margin-right: 0.625rem !important;
        font-weight: 500 !important;
        color: #374151 !important;
        font-size: 0.875rem !important;
        white-space: nowrap !important;
        line-height: 1.5 !important;
        flex-shrink: 0 !important;
    }
    
    /* Style date inputs to match screenshot - consistent sizing with selects */
    .date-range-start input[type="text"],
    .date-range-end input[type="text"],
    .date-range-start .fi-input input,
    .date-range-end .fi-input input,
    .date-range-start .fi-input-wrapper input,
    .date-range-end .fi-input-wrapper input {
        border-radius: 0.375rem !important;
        border: 1px solid #d1d5db !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
        width: 100% !important;
        min-width: 0 !important;
        background-color: #ffffff !important;
        color: #111827 !important;
        height: 45px !important;
        min-height: 45px !important;
        max-height: 45px !important;
        line-height: 1.5 !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure date field wrappers display labels inline with inputs */
    .date-range-start .fi-fo-field-wrapper,
    .date-range-end .fi-fo-field-wrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
    }
    
    /* Remove "to" separator - not needed with labels above */
    
    /* Filter buttons container - align with filter fields */
    .filter-buttons {
        display: flex !important;
        align-items: center !important;
        gap: 0rem !important;
        flex-shrink: 0 !important;
        align-self: center !important;
        margin-left: 0 !important;
    }
    
    /* Ensure buttons align with input fields - consistent sizing */
    .filter-buttons button {
        height: 45px !important;
        min-height: 45px !important;
        max-height: 45px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        border-radius: 0.375rem !important;
        box-sizing: border-box !important;
    }
    
    /* Submit button styling - black background, white text */
    button[type="submit"].bg-black,
    .filter-buttons button.btn-search,
    .filter-buttons button.bg-black {
        background-color: black !important;
        background: black !important;
        color: white !important;
        color: rgb(255, 255, 255) !important;
        --tw-text-opacity: 1 !important;
        border-color: black !important;
    }
    
    /* Ensure submit button text and spans are white */
    .filter-buttons button.btn-search span,
    .filter-buttons button.bg-black span {
        color: white !important;
        color: rgb(255, 255, 255) !important;
    }
    
    button[type="submit"].bg-black:hover,
    .filter-buttons button.btn-search:hover,
    .filter-buttons button.bg-black:hover {
        background-color: rgb(17, 24, 39) !important; /* gray-900 */
        background: rgb(17, 24, 39) !important;
        border-color: rgb(17, 24, 39) !important;
    }
    
    .dashboard-grid .grid > div {
        max-width: 100% !important;
        width: 100% !important;
    }
    .dashboard-grid .grid > div > div {
        max-width: 100% !important;
        width: 100% !important;
    }
    .dashboard-grid .fi-wi-widget {
        max-width: 100% !important;
        width: 100% !important;
    }
    .dashboard-grid .fi-section {
        max-width: 100% !important;
        width: 100% !important;
    }
    .dashboard-grid .fi-section > div {
        max-width: 100% !important;
        width: 100% !important;
    }
    .side-by-side-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1.5rem !important;
    }
    @media (max-width: 1024px) {
        .side-by-side-container {
            grid-template-columns: 1fr !important;
        }
    }
    .three-column-container {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1rem !important;
        align-items: stretch !important;
    }
    @media (max-width: 1400px) {
        .three-column-container {
            grid-template-columns: repeat(2, 1fr) !important;
        }
    }
    @media (max-width: 1024px) {
        .three-column-container {
            grid-template-columns: 1fr !important;
        }
    }
    .three-column-container > div {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .three-column-container .fi-wi-widget {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    /* Ensure Payment Health widget matches other cards */
    .three-column-container .payment-health-chart {
        background: white !important;
        border-radius: 0.5rem !important;
        box-shadow: none !important;
        border: none !important;
        padding: 1rem !important;
        display: flex !important;
        flex-direction: column !important;
    }
    /* Ensure Conversion vs Retention Rate widget matches other cards */
    .three-column-container .conversion-retention-chart {
    background: white;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    padding: 1rem;

    display: flex;
    flex-direction: column;

    /* 🔑 LOCK HEIGHT */
    height: 350px;
}
.three-column-container .conversion-retention-chart canvas {
    flex: 1;
    max-width: 100%;
    height: auto !important;
    display: block;
}

    /* Remove shadow-sm and ring-related classes from Payment Health by Gateway section only */
    .three-column-container > div:nth-child(1) [class*="shadow"],
    .three-column-container > div:nth-child(1) [class*="ring"],
    .three-column-container .payment-health-chart [class*="shadow"],
    .three-column-container .payment-health-chart [class*="ring"],
    .three-column-container .conversion-retention-chart [class*="shadow"],
    .three-column-container .conversion-retention-chart [class*="ring"] {
        box-shadow: none !important;
        --tw-ring-shadow: none !important;
        --tw-ring-offset-shadow: none !important;
        --tw-ring-offset-width: 0 !important;
        --tw-ring-width: 0 !important;
    }
    /* Remove default widget card styling to use parent card */
    .three-column-container .payment-health-chart .fi-wi-widget,
    .three-column-container .conversion-retention-chart .fi-wi-widget {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .three-column-container .payment-health-chart .fi-wi-widget > div,
    .three-column-container .conversion-retention-chart .fi-wi-widget > div {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    /* Consistent title styling for all three charts */
    .three-column-container h3,
    .three-column-container .fi-wi-heading,
    .three-column-container .fi-wi-heading > div,
    .subscriber-timeline-container h3,
    .cohort-retention-chart h3,
    .payment-health-chart h3 {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #111827 !important;
        margin-bottom: 0.5rem !important;
        margin-top: 0 !important;
        line-height: 1.5rem !important;
    }
    /* Consistent chart container styling */
    .three-column-container .chart-container {
        flex: 1 !important;
        min-height: 350px !important;
        position: relative !important;
        width: 100% !important;
    }
    /* Chart container for Conversion vs Retention Rate - match other charts exactly */
    .three-column-container .conversion-retention-chart {
        height: 100% !important;
    }
    .three-column-container .conversion-retention-chart .fi-section-content-ctn {
        height: 400px !important;
        min-height: 400px !important;
        max-height: 400px !important;
        position: relative !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .three-column-container .conversion-retention-chart .fi-section-content-ctn > div {
        height: 100% !important;
        width: 100% !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
    }
    .three-column-container .conversion-retention-chart canvas {
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        flex: 1 !important;
    }
    /* Specific canvas height for Conversion vs Retention Rate */
    .three-column-container .conversion-retention-chart .fi-wi-widget canvas {
        height: 415px !important;
    }
    /* Ensure all three columns have equal height and alignment */
    .three-column-container > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    /* Ensure charts fill their containers properly */
    .three-column-container canvas {
        max-width: 100% !important;
        height: auto !important;
    }

   
    .chart-containerretention {
    position: relative;
    width: 100%;
    height: 350px;
    max-height: 350px;
    min-height: 350px;
    overflow: hidden;
}

/* 🚨 FORCE CANVAS SIZE */
#conversionRetentionChart {
    width: 100% !important;
    height: 350px !important;
    max-height: 350px !important;
    min-height: 350px !important;
    display: block !important;
}
    /* Remove border-t from Payment Success vs Failure Trends and Payment Gateway Distribution sections */
    .three-column-container .fi-section-content-ctn.border-t,
    .three-column-container .fi-section-content-ctn[class*="border-t"],
    .three-column-container .border-t.border-gray-200,
    .three-column-container [class*="border-t"][class*="border-gray-200"] {
        border-top: none !important;
    }
    /* Remove border-t from all elements within the payment chart containers */
    .three-column-container > div .fi-section-content-ctn,
    .three-column-container > div [class*="border-t"] {
        border-top: none !important;
    }
    /* Remove shadow-sm and ring-related classes from Payment Success vs Failure Trends and Payment Gateway Distribution */
    .three-column-container > div:nth-child(2),
    .three-column-container > div:nth-child(3) {
        box-shadow: none !important;
    }
    .three-column-container > div:nth-child(2) [class*="shadow"],
    .three-column-container > div:nth-child(3) [class*="shadow"],
    .three-column-container > div:nth-child(2) [class*="ring"],
    .three-column-container > div:nth-child(3) [class*="ring"] {
        box-shadow: none !important;
        --tw-ring-shadow: none !important;
        --tw-ring-offset-shadow: none !important;
    }
    /* Remove px-6 py-4 from headers in all three payment chart sections */
    .three-column-container > div:nth-child(1) .fi-section-header,
    .three-column-container > div:nth-child(2) .fi-section-header,
    .three-column-container > div:nth-child(3) .fi-section-header {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .three-column-container > div:nth-child(1) [class*="px-6"],
    .three-column-container > div:nth-child(2) [class*="px-6"],
    .three-column-container > div:nth-child(3) [class*="px-6"],
    .three-column-container > div:nth-child(1) [class*="py-4"],
    .three-column-container > div:nth-child(2) [class*="py-4"],
    .three-column-container > div:nth-child(3) [class*="py-4"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .col-4-8-container {
        display: grid !important;
        grid-template-columns: 1fr 2fr !important;
        gap: 1.5rem !important;
    }
    @media (max-width: 1024px) {
        .col-4-8-container {
            grid-template-columns: 1fr !important;
        }
    }
    .col-8-4-container {
        display: grid !important;
        grid-template-columns: 2fr 1fr !important;
        gap: 1.5rem !important;
    }
    @media (max-width: 1024px) {
        .col-8-4-container {
            grid-template-columns: 1fr !important;
        }
    }
    .col-8-4-container > div {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .col-8-4-container .fi-wi-widget {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .side-by-side-container > div,
    .col-4-8-container > div {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .side-by-side-container .fi-wi-widget,
    .col-4-8-container .fi-wi-widget {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .side-by-side-container .fi-wi-widget canvas {
        max-width: 100% !important;
        height: auto !important;
    }
    /* Churned Customers widget - Enable vertical scrolling and responsive */
    .side-by-side-container > div:first-child .fi-wi-widget,
    .side-by-side-container > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        max-height: 600px !important;
        overflow-y: auto !important;
    }
    .side-by-side-container > div:first-child .fi-wi-widget > div,
    .side-by-side-container > div:first-child > div {
        max-height: 100% !important;
        overflow-y: auto !important;
    }
    /* Target the Churned Customers widget table container */
    .side-by-side-container > div:first-child .overflow-x-auto {
        max-height: 500px !important;
        overflow-y: auto !important;
        overflow-x: auto !important;
    }
    /* Churned Customers table - make responsive */
    .side-by-side-container > div:first-child table {
        table-layout: auto !important;
        width: 100% !important;
    }
    .fi-wi-stats-overview {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 1rem !important;
    }
    .fi-wi-stats-overview > div {
        width: 100% !important;
        max-width: 100% !important;
    }
    @media (max-width: 1200px) {
        .fi-wi-stats-overview {
            grid-template-columns: repeat(3, 1fr) !important;
        }
    }
    @media (max-width: 768px) {
        .fi-wi-stats-overview {
            grid-template-columns: repeat(2, 1fr) !important;
        }
    }
    @media (max-width: 480px) {
        .fi-wi-stats-overview {
            grid-template-columns: 1fr !important;
        }
    }
    .kpi-cards-container {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 1rem !important;
        margin-top: 1rem;
    }
    @media (max-width: 1200px) {
        .kpi-cards-container {
            grid-template-columns: repeat(3, 1fr) !important;
        }
    }
    @media (max-width: 768px) {
        .kpi-cards-container {
            grid-template-columns: repeat(2, 1fr) !important;
        }
    }
    @media (max-width: 480px) {
        .kpi-cards-container {
            grid-template-columns: 1fr !important;
        }
    }
    .kpi-cards-container .text-green-600 {
        color: #059669 !important;
    }
    .kpi-cards-container .text-red-600 {
        color: #dc2626 !important;
    }
    .kpi-cards-container .text-green-600 svg {
        color: #059669 !important;
    }
    .kpi-cards-container .text-red-600 svg {
        color: #dc2626 !important;
    }
    /* KPI card title font size */
    .kpi-cards-container h4 {
        font-size: 0.775rem !important;
    }
    /* KPI description text size */
    .kpi-cards-container .kpi-description {
        font-size: 12px !important;
    }
    .fi-wi-widget canvas {
        height: 400px !important;
    }
    .payment-health-chart .fi-wi-widget {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        border-top: none !important;
    }
    .payment-health-chart .fi-wi-widget canvas {
        max-width: 100% !important;
        height: 400px !important;
    }
    .cohort-retention-chart .fi-wi-widget {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        border-top: none !important;
    }
    .cohort-retention-chart .fi-wi-widget canvas {
        max-width: 100% !important;
        height: 400px !important;
    }
    /* Remove border-t from Subscriber Timeline widget */
    .subscriber-timeline-container .fi-wi-widget {
        border-top: none !important;
    }
    /* Ensure proper spacing between sections - don't remove padding/margin */
    .side-by-side-container {
        margin-bottom: 2rem !important;
    }
    /* Ensure widgets maintain proper bottom spacing */
    .fi-wi-widget,
    .fi-section {
        margin-bottom: 1rem !important;
        /* padding-bottom: 0.5rem !important; */
    }
    /* Ensure sections have proper spacing */
    [class*="mb-8"] {
        margin-bottom: 1rem !important;
    }
    
    /* Simple fix: Label on left, dropdown on right */
    .date-range-select .fi-fo-field-wrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.75rem !important;
    }
    
    .date-range-select label {
        margin: 0 !important;
        margin-right: 0.75rem !important;
        font-weight: 500 !important;
        color: #374151 !important;
        white-space: nowrap !important;
    }
    
    .date-range-select select {
        border: 1px solid #d1d5db !important;
        border-radius: 0.375rem !important;
        padding: 0.5rem 0.75rem !important;
        height: 45px !important;
        min-height: 45px !important;
        max-height: 45px !important;
        box-sizing: border-box !important;
    }
    
    /* Hide the empty date picker fields that shouldn't be visible */
    .date-range-select + .fi-fo-field-wrapper input[type="date"],
    .date-range-select ~ .fi-fo-field-wrapper input[type="date"],
    input[name="custom_start_date"]:not([style*="display: none"]),
    input[name="custom_end_date"]:not([style*="display: none"]) {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Remove ALL borders from wrapper and container elements to prevent double borders */
    .date-range-select .fi-input-wrp > div,
    .date-range-select .fi-input-wrp > *,
    .date-range-select [class*="wrapper"]:not(.fi-fo-field-wrapper),
    .date-range-select .fi-select-input-wrapper,
    .date-range-select div[class*="select"] {
        border: none !important;
        border-width: 0 !important;
        box-shadow: none !important;
        outline: none !important;
    }
    
    /* Apply border ONLY to the actual native select element or Filament's select input */
    .date-range-select select {
        border: 1px solid #d1d5db !important;
        border-radius: 0.375rem !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
        background-color: #ffffff !important;
        color: #111827 !important;
        transition: all 0.2s ease !important;
        height: 45px !important;
        min-height: 45px !important;
        max-height: 45px !important;
        width: 100% !important;
        cursor: pointer !important;
        box-shadow: none !important;
        outline: none !important;
        box-sizing: border-box !important;
    }
    
    /* If Filament uses a custom select input, apply border there too */
    .date-range-select .fi-select-input[type="text"],
    .date-range-select .fi-select-input[role="combobox"] {
        border: 1px solid #d1d5db !important;
        border-radius: 0.375rem !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
        background-color: #ffffff !important;
        color: #111827 !important;
        transition: all 0.2s ease !important;
        height: 45px !important;
        min-height: 45px !important;
        max-height: 45px !important;
        width: 100% !important;
        cursor: pointer !important;
        box-shadow: none !important;
        outline: none !important;
        box-sizing: border-box !important;
    }
    .date-range-select select:hover,
    .date-range-select .fi-select-input:hover {
        border-color: #d1d5db !important;
        background-color: #f9fafb !important;
    }
    .date-range-select select:focus,
    .date-range-select .fi-select-input:focus {
        outline: none !important;
        border-color: #3b82f6 !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    }
    select option:hover {
        background-color: #f3f4f6 !important;
    }
    /* Text 3xl styling for dashboard */
    .text-3xl {
        font-size: 1.255rem !important;
        line-height: 2.25rem !important;
    }
    
    /* Responsive styles for filter section - Dashboard page only */
    @media (max-width: 1024px) {
        /* Adjust filter form grid for tablet */
        .filter-form-container .fi-section .fi-grid {
            grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        }
        
        /* Make buttons wrap on tablet if needed */
        .filter-buttons {
            flex-wrap: wrap !important;
        }
    }
    
    @media (max-width: 768px) {
        /* Stack filter section vertically on mobile */
        .filter-section-container {
            flex-direction: column !important;
            align-items: stretch !important;
            gap: 1rem !important;
        }
        
        /* Make filter form container full width on mobile */
        .filter-form-container {
            width: 100% !important;
            flex: none !important;
        }
        
        /* Change grid to single column on mobile - keep inline labels */
        .filter-form-container .fi-section .fi-grid {
            grid-template-columns: 1fr !important;
            row-gap: 1rem !important;
            align-items: center !important;
        }
        
        /* Ensure field containers maintain inline layout on mobile */
        .filter-form-container .fi-section .fi-grid > div {
            flex-direction: row !important;
            align-items: center !important;
        }
        
        /* Make filter buttons full width and stack on mobile */
        .filter-buttons {
            width: 100% !important;
            flex-direction: column !important;
            align-items: stretch !important;
            margin-left: 0 !important;
        }
        
        /* Make buttons full width on mobile */
        .filter-buttons button {
            width: 100% !important;
        }
    }
    
    @media (max-width: 640px) {
        /* Extra small screens - ensure proper spacing */
        .mb-2.bg-white.rounded-lg {
            padding: 0.75rem !important;
        }
        
        .filter-form-container .fi-section .fi-grid {
            column-gap: 0.75rem !important;
            row-gap: 0.75rem !important;
        }
        
        /* Adjust button height on very small screens */
        .filter-buttons button {
            height: 42px !important;
            min-height: 42px !important;
            max-height: 42px !important;
            font-size: 0.8125rem !important;
        }
        
        /* Adjust select height to match buttons */
        .filter-form-container select,
        .filter-form-container .fi-select select,
        .filter-form-container .fi-input-wrapper select {
            height: 42px !important;
            min-height: 42px !important;
            max-height: 42px !important;
        }
        
        /* Adjust date input height to match */
        .date-range-start input[type="text"],
        .date-range-end input[type="text"],
        .date-range-start .fi-input input,
        .date-range-end .fi-input input,
        .date-range-start .fi-input-wrapper input,
        .date-range-end .fi-input-wrapper input {
            height: 42px !important;
            min-height: 42px !important;
            max-height: 42px !important;
        }
    }
    .exportbtn{display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background-color: rgb(0, 0, 0); color: white; border: medium; border-radius: 0.5rem; font-size: 1rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s;}
</style>
@endpush

@push('scripts')
<script>
    // REMOVED: All Filament form-related JavaScript
    // Form removed - custom HTML inputs don't need Filament-specific styling or event listeners
    document.addEventListener('DOMContentLoaded', function() {
        // Form removed - no Filament form initialization needed
    });

    // Payment Charts Initialization
    let paymentTrendsChartInstance = null;
    let paymentMethodChartInstance = null;

    function updatePaymentTrendsChart(ajaxData = null) {
        const chartCtx = document.getElementById('paymentTrendsChart');
        if (!chartCtx) return;
        
        let trendsData = {};
        
        // Priority 1: Use AJAX data if provided
        if (ajaxData && typeof ajaxData === 'object') {
            trendsData = ajaxData;
        } else {
            // Priority 2: Get data from parent div
        const parentContainer = chartCtx.closest('.bg-white.rounded-lg');
        const trendsDataStr = parentContainer ? parentContainer.getAttribute('data-trends-data') : '{}';
            trendsData = JSON.parse(trendsDataStr || '{}');
        }
        
            const labels = trendsData.labels || [];
            const successData = trendsData.success || [];
            const failedData = trendsData.failed || [];
            
            // Check if data is empty - must have labels and at least one non-zero value
            const hasData = labels.length > 0 && (
                (successData.length > 0 && successData.some(val => val !== null && val !== undefined && val !== 0)) ||
                (failedData.length > 0 && failedData.some(val => val !== null && val !== undefined && val !== 0))
            );
            
            // Remove existing no-data message if present
            const existingMessage = chartCtx.parentElement.querySelector('.no-data-message');
            if (existingMessage) {
                existingMessage.remove();
            }
            
            if (!hasData) {
                // Destroy existing chart if present
                if (paymentTrendsChartInstance) {
                    paymentTrendsChartInstance.destroy();
                    paymentTrendsChartInstance = null;
                }
                // Hide canvas and show no-data message
                chartCtx.style.display = 'none';
                const noDataMessage = document.createElement('div');
                noDataMessage.className = 'no-data-message';
                noDataMessage.style.cssText = 'display: flex; align-items: center; justify-content: center; height: 100%; color: #6b7280; font-size: 14px; font-weight: 500;';
                noDataMessage.textContent = 'No payment trends data found';
                chartCtx.parentElement.appendChild(noDataMessage);
                return;
            }
            
            chartCtx.style.display = 'block';
            
            const maxValue = Math.max(...successData, ...failedData, 0);
            const yAxisMax = maxValue > 0 ? Math.ceil(maxValue * 1.2) : 340;
            const stepSize = Math.ceil(yAxisMax / 4);
            
        if (paymentTrendsChartInstance) {
            // Update existing chart - only update data, not options directly (avoids circular ref errors)
            paymentTrendsChartInstance.data.labels = labels.length > 0 ? labels : [];
            paymentTrendsChartInstance.data.datasets[0].data = successData.length > 0 ? successData : [];
            paymentTrendsChartInstance.data.datasets[1].data = failedData.length > 0 ? failedData : [];
            // Don't modify options directly - Chart.js manages options internally
            paymentTrendsChartInstance.update('none');
        } else {
            // Create new chart
            paymentTrendsChartInstance = new Chart(chartCtx, {
                type: 'bar',
                data: {
                    labels: labels.length > 0 ? labels : [],
                    datasets: [
                        {
                            label: 'Success',
                            data: successData.length > 0 ? successData : [],
                            backgroundColor: '#10b981',
                            borderColor: '#10b981',
                            borderWidth: 0,
                            borderRadius: 4,
                        },
                        {
                            label: 'Failed',
                            data: failedData.length > 0 ? failedData : [],
                            backgroundColor: '#f59e0b',
                            borderColor: '#f59e0b',
                            borderWidth: 0,
                            borderRadius: 4,
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            backgroundColor: '#fff',
                            titleColor: '#111827',
                            bodyColor: '#111827',
                            borderColor: '#e5e7eb',
                            borderWidth: 1,
                            padding: 12,
                            displayColors: false,
                            callbacks: {
                                title: function(context) {
                                    return context[0].label;
                                },
                                label: function(context) {
                                    const label = context.dataset.label || '';
                                    const value = context.parsed.y;
                                    return label + ' : ' + value;
                                },
                                labelColor: function(context) {
                                    return {
                                        borderColor: context.dataset.backgroundColor,
                                        backgroundColor: context.dataset.backgroundColor,
                                        borderWidth: 2,
                                        borderRadius: 2
                                    };
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                color: '#6b7280',
                                font: {
                                    size: 11
                                },
                                maxRotation: 45,
                            }
                        },
                        y: {
                            beginAtZero: true,
                            max: yAxisMax,
                            ticks: {
                                stepSize: stepSize,
                                color: '#6b7280',
                                font: {
                                    size: 11
                                }
                            },
                            grid: {
                                color: '#f3f4f6'
                            }
                        }
                    },
                    interaction: {
                        mode: 'index',
                        intersect: false
                    }
                }
            });
        }
        }

    function updatePaymentMethodChart(ajaxData = null) {
        const methodChartCtx = document.getElementById('paymentMethodChart');
        if (!methodChartCtx) return;
        
        let gatewayData = [];
        
        // Priority 1: Use AJAX data if provided
        if (ajaxData && Array.isArray(ajaxData)) {
            gatewayData = ajaxData;
        } else {
            // Priority 2: Get data from parent div
        const parentContainer = methodChartCtx.closest('.bg-white.rounded-lg');
        const gatewayDataStr = parentContainer ? parentContainer.getAttribute('data-gateway-distribution') : '[]';
            gatewayData = JSON.parse(gatewayDataStr || '[]');
        }
            const labels = gatewayData.map(item => item.label);
            const percentages = gatewayData.map(item => item.percent);
        
        // Remove existing no-data message if present
        const existingMessage = methodChartCtx.parentElement.querySelector('.no-data-message');
        if (existingMessage) {
            existingMessage.remove();
        }
            
            if (gatewayData.length === 0 || !gatewayData.some(item => item.percent > 0)) {
            // Destroy existing chart if present
            if (paymentMethodChartInstance) {
                paymentMethodChartInstance.destroy();
                paymentMethodChartInstance = null;
            }
            // Hide canvas
            methodChartCtx.style.display = 'none';
                const noDataMessage = document.createElement('div');
                noDataMessage.className = 'no-data-message';
                noDataMessage.style.cssText = 'display: flex; align-items: center; justify-content: center; height: 100%; color: #6b7280; font-size: 14px; font-weight: 500;';
                noDataMessage.textContent = 'No gateway data found';
                methodChartCtx.parentElement.appendChild(noDataMessage);
                return;
            }
            
            // Show canvas if data exists
            methodChartCtx.style.display = 'block';
            
            // Color palette for gateways - matching billing page
            const colors = [
                '#6366f1', // Purple
                '#14b8a6', // Teal
                '#f59e0b', // Orange
                '#fbbf24', // Yellow/Orange
                '#ef4444', // Red
                '#8b5cf6', // Violet
                '#06b6d4', // Cyan
                '#84cc16', // Lime
            ];
            
        if (paymentMethodChartInstance) {
            // Update existing chart - only update data, not options directly
            paymentMethodChartInstance.data.labels = labels;
            paymentMethodChartInstance.data.datasets[0].data = percentages;
            paymentMethodChartInstance.data.datasets[0].backgroundColor = colors.slice(0, labels.length);
            paymentMethodChartInstance.update('none'); // 'none' mode for smoother updates
        } else {
            // Create new chart - matching billing page UI
            paymentMethodChartInstance = new Chart(methodChartCtx, {
                type: 'doughnut',
                data: {
                    labels: labels,
                    datasets: [{
                        data: percentages,
                        backgroundColor: colors.slice(0, labels.length),
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: true,
                            position: 'bottom',
                            labels: {
                                padding: 12,
                                usePointStyle: false,
                                font: {
                                    size: 12
                                },
                                color: '#6b7280',
                                generateLabels: function(chart) {
                                    const data = chart.data;
                                    if (data.labels.length && data.datasets.length) {
                                        return data.labels.map((label, i) => {
                                            const value = data.datasets[0].data[i];
                                            return {
                                                text: label + ' ' + value + '%',
                                                fillStyle: data.datasets[0].backgroundColor[i],
                                                strokeStyle: data.datasets[0].backgroundColor[i],
                                                lineWidth: 0,
                                                hidden: false,
                                                index: i
                                            };
                                        });
                                    }
                                    return [];
                                }
                            }
                        },
                        tooltip: {
                            backgroundColor: '#fff',
                            titleColor: '#111827',
                            bodyColor: '#111827',
                            borderColor: '#e5e7eb',
                            borderWidth: 1,
                            padding: 12,
                            displayColors: true,
                            callbacks: {
                                label: function(context) {
                                    return context.label + ': ' + context.parsed + '%';
                                }
                            }
                        }
                    }
                }
            });
        }
    }

    function initializePaymentCharts() {
        updatePaymentTrendsChart();
        updatePaymentMethodChart();
    }

    // Initialize payment charts on page load
    document.addEventListener('DOMContentLoaded', function() {
        // Wait for Chart.js to be loaded
        if (typeof Chart !== 'undefined') {
            initializePaymentCharts();
        } else {
            // Retry after a short delay if Chart.js isn't loaded yet
            setTimeout(function() {
                if (typeof Chart !== 'undefined') {
                    initializePaymentCharts();
                }
            }, 100);
        }
    });

    // Charts will be updated via AJAX when filters change
    // No Livewire hooks needed - charts update through updateDashboardWithData()
    
    // Watch for changes to data attributes on chart containers
    function watchChartDataChanges() {
        const trendsContainer = document.querySelector('[data-trends-data]');
        const gatewayContainer = document.querySelector('[data-gateway-distribution]');
        
        if (trendsContainer || gatewayContainer) {
            const observer = new MutationObserver(function(mutations) {
                let shouldUpdate = false;
                mutations.forEach(function(mutation) {
                    if (mutation.type === 'attributes' && 
                        (mutation.attributeName === 'data-trends-data' || 
                         mutation.attributeName === 'data-gateway-distribution')) {
                        shouldUpdate = true;
                    }
                });
                if (shouldUpdate) {
                    setTimeout(function() {
                        if (typeof Chart !== 'undefined') {
                            updatePaymentTrendsChart();
                            updatePaymentMethodChart();
                        }
                    }, 100);
                }
            });
            
            if (trendsContainer) {
                observer.observe(trendsContainer, {
                    attributes: true,
                    attributeFilter: ['data-trends-data']
                });
            }
            
            if (gatewayContainer) {
                observer.observe(gatewayContainer, {
                    attributes: true,
                    attributeFilter: ['data-gateway-distribution']
                });
            }
        }
    }
    
    // Initialize watcher after DOM is ready
    document.addEventListener('DOMContentLoaded', function() {
        setTimeout(watchChartDataChanges, 500);
    });
    
    // Initialize charts on page load
    document.addEventListener('DOMContentLoaded', function() {
        setTimeout(watchChartDataChanges, 500);
    });
</script>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
@php
    // Ensure session app_id is set from authenticated user before retrieving it
    if (Auth::check()) {
        $user = Auth::user();
        if ($user && isset($user->app_id) && $user->app_id) {
            session(['app_id' => $user->app_id]);
        } else {
            session()->forget('app_id');
            }
    } else {
        session()->forget('app_id');
    }
    $currentAppId = \App\Helpers\QueryHelper::getAppId();
    $encryptedAppIdForExport = $currentAppId ? \App\Services\AppIdEncryptionService::encryptForUrl($currentAppId) : '';
@endphp
<script>
    // Helper function to show Filament-style notifications
    function showNotification(type, title, message) {
        // Use console for notifications (can be enhanced with toast library if needed)
        console[type === 'success' ? 'log' : 'error'](`${title}: ${message}`);
    }

    // Get encryptedAppId from server (for export functionality)
    const encryptedAppId = JSON.parse('{!! json_encode($encryptedAppIdForExport) !!}');

    // Export Dashboard Report - Replicate User Admin export flow
    (function() {
        // Ensure loaders are hidden on page load
        function hideLoaders() {
            // Hide export loader
            const exportLoader = document.getElementById('export-loader');
            if (exportLoader) {
                exportLoader.style.display = 'none';
            }
            
            // Ensure filter loader is hidden on page load
            const filterLoader = document.getElementById('filter-loader');
            if (filterLoader) {
                filterLoader.style.display = 'none';
                filterLoader.classList.remove('show-loader');
            }
            
            // Loader is controlled by AJAX functions
            setTimeout(function() {
                const filterLoader = document.getElementById('filter-loader');
                if (filterLoader) {
                    // Ensure it's hidden initially
                    filterLoader.style.display = 'none';
                    filterLoader.classList.remove('show-loader');
                    
                    // Loader is controlled by showAjaxLoader() and hideAjaxLoader() functions
                    // No need for MutationObserver - AJAX functions handle it directly
                }
            }, 200);
        }
        
        // Ensure Insights & Actions sections are always visible
        function ensureWidgetsVisible() {
            // Find and ensure visibility of exclude-from-export elements
            const widgets = document.querySelectorAll('.exclude-from-export, .col-4-8-container.exclude-from-export');
            widgets.forEach(widget => {
                // Remove any inline styles that might hide them
                if (widget.style.display === 'none' || widget.style.visibility === 'hidden') {
                    widget.style.removeProperty('display');
                    widget.style.removeProperty('visibility');
                    widget.style.removeProperty('opacity');
                    widget.style.removeProperty('height');
                }
            });
            
            // Ensure all widget containers are visible
            const widgetContainers = document.querySelectorAll('.kpi-cards-container, .chart-container, [data-widget-lazy]');
            [...widgetContainers].forEach(el => {
                el.style.display = 'block';
                el.style.visibility = 'visible';
            });
        }
        
        // Watch for DOM changes to ensure widgets remain visible
        const widgetVisibilityObserver = new MutationObserver(function(mutations) {
                setTimeout(ensureWidgetsVisible, 100);
            mutations.forEach(function(mutation) {
                mutation.addedNodes.forEach(function(node) {
                    if (node.nodeType === 1) { // Element node
                        // Widget visibility handling
                        setTimeout(ensureWidgetsVisible, 50);
                    }
                });
            });
        });
        
        // Start observing the dashboard content area
        setTimeout(function() {
            const dashboardContent = document.querySelector('.dashboard-content-wrapper');
            if (dashboardContent && widgetVisibilityObserver) {
                widgetVisibilityObserver.observe(dashboardContent, {
                    childList: true,
                    subtree: true
                });
            }
        }, 500);
        
        // Also ensure visibility when loader hides
        const originalHideLoaders = hideLoaders;
        hideLoaders = function() {
            originalHideLoaders();
            // Ensure widgets are visible when loader hides
            setTimeout(ensureWidgetsVisible, 100);
        };
        
        // OPTIMIZED: Lazy load widgets when they come into viewport
        // This improves initial page load performance for large datasets
        function initLazyWidgetLoading() {
            const lazyWidgets = document.querySelectorAll('[data-widget-lazy]');
            
            if ('IntersectionObserver' in window) {
                const widgetObserver = new IntersectionObserver(function(entries) {
                    entries.forEach(function(entry) {
                        if (entry.isIntersecting) {
                            const widget = entry.target;
                            const widgetType = widget.getAttribute('data-widget-lazy');
                            
                            // Mark widget as loaded
                            widget.setAttribute('data-widget-loaded', 'true');
                            
                            // Widgets are loaded via AJAX - no Livewire components needed
                            // Dispatch custom event if needed for other listeners
                                widget.dispatchEvent(new CustomEvent('widget-visible', {
                                    detail: { widgetType: widgetType }
                                }));
                            
                            // Stop observing this widget
                            widgetObserver.unobserve(widget);
                        }
                    });
                }, {
                    rootMargin: '50px' // Start loading 50px before widget enters viewport
                });
                
                lazyWidgets.forEach(function(widget) {
                    widgetObserver.observe(widget);
                });
            } else {
                // Fallback for browsers without IntersectionObserver
                lazyWidgets.forEach(function(widget) {
                    widget.setAttribute('data-widget-loaded', 'true');
                });
            }
        }
        
        // Wait for DOM to be ready
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', function() {
                hideLoaders();
                initExport();
                initLazyWidgetLoading();
            });
        } else {
            hideLoaders();
            initExport();
            initLazyWidgetLoading();
        }

        function initExport() {
            // Find export button - look for button containing "Export Report" text
            const buttons = document.querySelectorAll('button');
            let exportBtn = null;
            for (let btn of buttons) {
                if (btn.textContent && btn.textContent.includes('Export Report')) {
                    exportBtn = btn;
                    break;
                }
            }
            if (exportBtn) {
                // Remove onclick attribute if it exists and add event listener
                exportBtn.removeAttribute('onclick');
                exportBtn.addEventListener('click', async function() {
                    // Get loader element
                    const exportLoader = document.getElementById('export-loader');
                    
                    // Disable button during export
                    exportBtn.disabled = true;
                    exportBtn.style.opacity = '0.6';
                    exportBtn.style.cursor = 'not-allowed';
                    
                    // Show loader
                    if (exportLoader) {
                        exportLoader.style.display = 'flex';
                    }
                    
                    const originalText = exportBtn.innerHTML;
                    exportBtn.innerHTML = '<svg class="animate-spin h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Exporting...';

                    // Get current filters
                    const currentFilters = getCurrentFilters();
                    
                    // Build export URL with filters
                    let exportUrl = '{{ route("dashboard.widgets.export-csv") }}';
                    const urlParams = new URLSearchParams();
                    
                    // Add filters to URL
                    Object.keys(currentFilters).forEach(key => {
                        if (currentFilters[key] !== null && currentFilters[key] !== undefined && currentFilters[key] !== '') {
                            urlParams.append(key, currentFilters[key]);
            }
                    });
                    
                    // Add app_id if available
                    if (encryptedAppId) {
                        urlParams.append('app_id', encryptedAppId);
                    }
                    
                    if (urlParams.toString()) {
                        exportUrl += '?' + urlParams.toString();
            }

                    // Add Authorization header if bearer token is available
                    const headers = {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'text/csv',
                    };
                    
                    const bearerToken = window.API_BEARER_TOKEN || sessionStorage.getItem('api_bearer_token');
                    if (encryptedAppId && bearerToken) {
                        headers['Authorization'] = `Bearer ${bearerToken}`;
                                    }
                                    
                    try {
                        // Fetch CSV file
                        const response = await fetch(exportUrl, {
                            method: 'GET',
                            headers: headers,
                            credentials: 'same-origin',
                        });
                        
                        if (!response.ok) {
                            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                        }
                        
                        // Get CSV content
                        const csvContent = await response.text();
                        
                        // Create blob and download
                        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
                        const link = document.createElement('a');
                        const url = URL.createObjectURL(blob);
                        
                        // Generate filename with timestamp
                        const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5);
                        link.setAttribute('href', url);
                        link.setAttribute('download', `dashboard-report-${timestamp}.csv`);
                        link.style.visibility = 'hidden';
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                        
                        // Hide loader on success
                                        if (exportLoader) {
                                            exportLoader.style.display = 'none';
                                        }
                        
                                    // Re-enable button
                                    exportBtn.disabled = false;
                                    exportBtn.style.opacity = '1';
                                    exportBtn.style.cursor = 'pointer';
                                    exportBtn.innerHTML = originalText;
                        
                        showNotification('success', 'Export Successful', 'Dashboard report downloaded as CSV successfully!');
        } catch (error) {
                        console.error('Export error:', error);
                        
                            // Hide loader on error
                            if (exportLoader) {
                                exportLoader.style.display = 'none';
                            }
                            
                        // Re-enable button
                            exportBtn.disabled = false;
                            exportBtn.style.opacity = '1';
                            exportBtn.style.cursor = 'pointer';
                            exportBtn.innerHTML = originalText;
                        
                        showNotification('danger', 'Export Error', 'Failed to export dashboard data. Please try again.');
        }
                });
            }
        }
    })();
</script>
@endpush

<x-filament-panels::page>
    {{-- Breadcrumbs Navigation - Hidden on Dashboard --}}
    {{-- <x-breadcrumbs :breadcrumbs="$breadcrumbs ?? null" /> --}}
    
    {{-- Full-page loader for filters and AJAX data loading --}}
    <div id="filter-loader" class="full-page-loader" style="display: none;">
        <div class="loader-content">
            <div class="spinner"></div>
            <p class="text-gray-700 font-medium">Loading dashboard...</p>
        </div>
    </div>
    
    {{-- Full-page loader for export
    <div id="export-loader" class="full-page-loader" style="display: none;">
        <div class="loader-content">
            <div class="spinner"></div>
            <p class="text-gray-700 font-medium">Exporting dashboard report...</p>
        </div>
    </div>
    --}}
    
    <section class="flex flex-col gap-y-8 py-8">
        <div class="dashboard-content-wrapper">
        {{-- Export Report Button --}}
        <div class="flex justify-between items-center mb-2" style="margin-bottom: 1rem !important;">
            <h1 class="text-2xl font-bold">{{ $this->getTitle() }}</h1>
            <button type="button" class="exportbtn">
                <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"></path>
                </svg> Export Report
            </button>
        </div>
    
    {{-- Header Filters Section - Billing Page Style --}}
    <div class="filters-horizontal">
        <div class="filter-section">
            <label class="filter-label">Date Range:</label>
            <select class="input filter-input" name="pendingFilters.date_range" id="dashboard-date-range">
                <option value="today">Today</option>
                <option value="7_days">Last 7 days</option>
                <option value="mtd">This Month</option>
                <option value="30_days">Last 30 days</option>
                <option value="quarterly">Last 3 months</option>
                <option value="half_yearly" selected>Last 6 months</option>
                <option value="last_year">Last Year</option>
                <option value="ytd">Current Year</option>
                <option value="custom">Custom</option>
            </select>
            </div>
            
        <div class="filter-section date-range-section" id="custom-date-section" style="display: none;">
            <label class="filter-label">Custom Date Range:</label>
            <div class="date-range-inputs">
                <input 
                    type="date" 
                    class="input filter-input date-input" 
                    name="pendingFilters.start_date"
                    id="dashboard-start-date"
                    placeholder="From Date"
                />
                <span class="date-separator">to</span>
                <input 
                    type="date" 
                    class="input filter-input date-input" 
                    name="pendingFilters.end_date"
                    id="dashboard-end-date"
                    placeholder="To Date"
                />
            </div>
        </div>
        
        <div class="filter-section">
            <label class="filter-label">Regions:</label>
            <select class="input filter-input" name="pendingFilters.region" id="dashboard-region">
                <option value="all">All Regions</option>
            </select>
        </div>
        
        <div class="filter-section">
            <label class="filter-label">Package:</label>
            <select class="input filter-input" name="pendingFilters.product_plan" id="dashboard-product-plan">
                <option value="all">All Packages</option>
            </select>
        </div>
        
        <div class="filter-section filter-buttons">
            <label class="filter-label" style="visibility:hidden;">Actions</label>
            <div class="filter-actions">
                <button type="button" class="btn-filter btn-search" id="submit-filters-btn">Search</button>
                <button type="button" class="btn-filter btn-reset" id="reset-filters-btn">Reset</button>
            </div>
        </div>
    </div>
    
    {{-- Form removed - using custom HTML inputs with direct JavaScript handling --}}

    {{-- Row 1: KPI Cards - All 6 in single row --}}
    <div class="mb-8">
        <div class="kpi-cards-container">
            {{-- KPI cards will be loaded via AJAX --}}
        </div>
    </div>

    {{-- Row 1: Conversion vs Retention Rate, Payment Gateway Distribution, and Payment Success vs Failure Trends - Three columns --}}
    <div class="three-column-container mb-8">
        <div class="bg-white rounded-lg border border-gray-200 p-4 conversion-retention-chart" data-widget-lazy="conversion-retention">
            <h3 class="text-lg font-semibold text-gray-900 mb-2">Conversion vs Retention Rate</h3>
            <div class="chart-container chart-containerretention" style="position: relative; height: 350px; width: 100%;">
                <canvas id="conversionRetentionChart"></canvas>
        </div>
        </div>
        <div class="bg-white rounded-lg border border-gray-200 p-4">
            <h3 class="text-lg font-semibold text-gray-900 mb-2">Payment Gateway Distribution</h3>
            <div class="chart-container" style="position: relative; height: 350px; width: 100%;">
                <canvas id="paymentMethodChart"></canvas>
            </div>
        </div>
        <div class="bg-white rounded-lg border border-gray-200 p-4">
            <h3 class="text-lg font-semibold text-gray-900 mb-2">Payment Success vs Failure Trends</h3>
            <div class="chart-container" style="position: relative; height: 350px; width: 100%;">
                <canvas id="paymentTrendsChart"></canvas>
            </div>
        </div>
    </div>

    {{-- Row 2: Subscriber Timeline Chart - Single row --}}
    <div class="mb-8 subscriber-timeline-container" data-widget-lazy="subscriber-timeline">
        <div class="bg-white rounded-lg border border-gray-200 p-4">
            <h3 class="text-lg font-semibold text-gray-900 mb-2">Subscriber Timeline</h3>
            <div class="chart-container" style="position: relative; height: 400px; width: 100%;">
                <canvas id="subscriberTimelineChart"></canvas>
            </div>
        </div>
    </div>

    {{-- Row 3: Active Subscriber Movement Chart - Single row --}}
    {{-- Removed: Livewire component replaced with AJAX-based chart loading --}}

    
    {{-- Row 4: Cohort Retention and Payment Health by Gateway - 8:4 split --}}
    <div class="col-8-4-container mb-8">
        <div class="bg-white rounded-lg border border-gray-200 p-4 cohort-retention-chart" data-widget-lazy="cohort-retention">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Cohort Retention</h3>
            <div class="chart-container" style="position: relative; height: 400px; width: 100%;">
                <canvas id="cohortRetentionChart"></canvas>
        </div>
        </div>
        <div class="bg-white rounded-lg border border-gray-200 p-4 payment-health-chart" data-widget-lazy="payment-health">
            <h3 class="text-lg font-semibold text-gray-900 mb-2">Payment Health by Gateway</h3>
            <div class="chart-container" style="position: relative; height: 400px; width: 100%;">
                <canvas id="paymentHealthChart"></canvas>
            </div>
        </div>
    </div>

    {{-- Row 6: Churned Customers and Payment Failures - Side by side --}}
    {{-- Removed: Livewire components replaced with AJAX-based widget loading --}}
        </div>
    </section>
</x-filament-panels::page>

@push('scripts')
@php
    // Ensure session app_id is set from authenticated user before retrieving it
    if (Auth::check()) {
        $user = Auth::user();
        if ($user && isset($user->app_id) && $user->app_id) {
            session(['app_id' => $user->app_id]);
        } else {
            session()->forget('app_id');
        }
    } else {
        session()->forget('app_id');
    }
    $currentAppId = \App\Helpers\QueryHelper::getAppId();
    $currentRoleId = auth()->user()?->role_id ?? null;
    // Encrypt app_id for URL (same pattern as billing page)
    $encryptedAppId = $currentAppId ? \App\Services\AppIdEncryptionService::encryptForUrl($currentAppId) : '';
@endphp
<script>
   // const startDateInput = document.getElementById('dashboard-start-date');
//const endDateInput   = document.getElementById('dashboard-end-date');

// When start date changes
/*startDateInput.addEventListener('change', function () {
    const startDate = this.value;

    if (startDate) {
        // Prevent end date before start date
        endDateInput.min = startDate;

        // Auto-reset invalid end date
        if (endDateInput.value && endDateInput.value < startDate) {
            endDateInput.value = '';
        }
    } else {
        endDateInput.removeAttribute('min');
    }
});*/
//const startDateInput = document.getElementById('dashboard-start-date');
//const endDateInput   = document.getElementById('dashboard-end-date');

// When start date changes
const startDateInput = document.getElementById('dashboard-start-date');
const endDateInput   = document.getElementById('dashboard-end-date');

// Get today's date in YYYY-MM-DD format
const today = new Date().toISOString().split('T')[0];

// 🔹 Set max = today for both inputs
startDateInput.max = today;
endDateInput.max   = today;

// 🔹 Start Date change
startDateInput.addEventListener('change', () => {
    const startDate = startDateInput.value;

    // Reset end date constraints if start date cleared
    if (!startDate) {
        endDateInput.removeAttribute('min');
        return;
    }

    // End date cannot be before start date
    endDateInput.min = startDate;

    // If end date is invalid, reset it
    if (endDateInput.value && endDateInput.value < startDate) {
        endDateInput.value = '';
    }
});

// 🔹 End Date change
endDateInput.addEventListener('change', () => {
    const startDate = startDateInput.value;
    const endDate   = endDateInput.value;

    // Prevent end date before start date
    if (startDate && endDate < startDate) {
        endDateInput.value = '';
    }
});


// ============================================
// CDN-CACHED AJAX DASHBOARD DATA LOADING
// ============================================
(function() {
    'use strict';
    
    // Get app_id and role_id from server (for tenant-scoped API)
    const appId = JSON.parse('{!! json_encode($currentAppId) !!}');
    const roleId = JSON.parse('{!! json_encode($currentRoleId) !!}');
    const encryptedAppId = JSON.parse('{!! json_encode($encryptedAppId) !!}');
    
    let dashboardDataCache = {};
    let isLoading = false;
    let lastFiltersHash = null;
    let debounceTimer = null;
    
    /**
     * Build tenant-scoped API URL
     * Uses tenant-scoped endpoint if app_id is available, otherwise falls back to legacy endpoint
     * Sends encrypted app_id and role_id as query parameters (both removed from URI)
     */
    function buildApiUrl(filters) {
        const params = new URLSearchParams();
        Object.keys(filters).forEach(key => {
            // Include all filter values except null and empty strings
            // Include 'all' for region/product_plan as backend may need it
            // Always include custom_start_date and custom_end_date
            if (filters[key] !== null && filters[key] !== '') {
                params.append(key, filters[key]);
            }
        });
        
        // Add encrypted app_id as query parameter (required)
        if (encryptedAppId) {
            params.append('app_id', encryptedAppId);
        }
        
        // Add role_id as query parameter (optional)
        if (roleId) {
            params.append('role_id', roleId);
        }
        
        // Use tenant-scoped API if encrypted app_id is available AND bearer token is available
        // Otherwise, use the regular endpoint which uses session authentication
        const bearerToken = window.API_BEARER_TOKEN || sessionStorage.getItem('api_bearer_token');
        if (encryptedAppId && bearerToken) {
            // Single endpoint: /admin/api/dashboard/data?app_id={encrypted}&role_id={role_id}
            return `/admin/api/dashboard/data?${params.toString()}`;
        }
        
        // Fallback to legacy endpoint (uses session authentication)
        return '{{ route("dashboard.widgets.all-data") }}?' + params.toString();
    }
    
    /**
     * Load dashboard data via AJAX (CDN cached)
     * Uses async/await for better readability and error handling
     */
    async function loadDashboardDataViaAjax(filters, forceReload = false) {
        if (isLoading) {
            return; // Prevent concurrent requests
        }
        
        // Calculate cache key suffix early (used in multiple places)
        const cacheKeySuffix = encryptedAppId ? `_${encryptedAppId}${roleId ? `_${roleId}` : ''}` : '';
        
        // Check if filters actually changed
        const filtersHash = md5(JSON.stringify(filters));
        const filtersChanged = filtersHash !== lastFiltersHash;
        
        if (!forceReload && !filtersChanged) {
            console.log('⏭️ Filters unchanged, skipping AJAX request');
            return; // Filters haven't changed, skip request
        }
        
        // If filters changed, clear old ETag cache to force fresh data
        if (filtersChanged && lastFiltersHash) {
            const oldCacheKey = 'dashboard_etag_' + lastFiltersHash + cacheKeySuffix;
            sessionStorage.removeItem(oldCacheKey);
            console.log('🔄 Filters changed, cleared old ETag cache');
        }
        
        lastFiltersHash = filtersHash;
        isLoading = true;
        showAjaxLoader();
        
        try {
            // Get bearer token first to determine which endpoint to use
            const bearerToken = window.API_BEARER_TOKEN || sessionStorage.getItem('api_bearer_token');
            
            // Build URL - use tenant API only if both encryptedAppId and bearerToken are available
            let url;
            let useTenantApi = false;
            if (encryptedAppId && bearerToken) {
                // Use tenant-scoped API endpoint
                url = buildApiUrl(filters);
                useTenantApi = true;
            } else {
                // Use regular endpoint (session-based authentication)
                const params = new URLSearchParams();
                Object.keys(filters).forEach(key => {
                    // Include all filter values except null and empty strings
                    // Include 'all' for region/product_plan as backend needs it
                    // Always include custom_start_date and custom_end_date
                    if (filters[key] !== null && filters[key] !== '') {
                        params.append(key, filters[key]);
                    }
                });
            
                // Add encrypted app_id as query parameter (required) - like billing page
                if (encryptedAppId) {
                    params.append('app_id', encryptedAppId);
                }
                
                // Add role_id as query parameter (optional)
                if (roleId) {
                    params.append('role_id', roleId);
                }
                
                url = '{{ route("dashboard.widgets.all-data") }}?' + params.toString();
                useTenantApi = false;
            }
            
            // Get previous ETag from cache if available (tenant-scoped cache key)
            const cacheKey = 'dashboard_etag_' + md5(JSON.stringify(filters)) + cacheKeySuffix;
            
            // Build headers
            const headers = {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
            };
            
            // Only add Authorization header if using tenant API endpoint
            if (useTenantApi && bearerToken) {
                headers['Authorization'] = 'Bearer ' + bearerToken;
            }
            
            // Only use ETag caching if NOT forcing a reload (when filters change, always fetch fresh data)
            let previousEtag = null;
            if (!forceReload) {
                previousEtag = sessionStorage.getItem(cacheKey);
            if (previousEtag) {
                headers['If-None-Match'] = previousEtag;
                }
            } else {
                // Clear ETag cache for new filters to force fresh data
                console.log('🔄 Force reload: Clearing ETag cache and fetching fresh data');
                sessionStorage.removeItem(cacheKey);
            }
            
            // Make the initial request
            let response = await fetch(url, {
                method: 'GET',
                headers: headers,
                credentials: 'same-origin',
            });
            
            // If we get 401 and were using tenant API, fallback to regular endpoint
            if (response.status === 401 && useTenantApi) {
                console.warn('⚠️ Tenant API returned 401, falling back to regular endpoint');
                // Build regular endpoint URL
                const params = new URLSearchParams();
                Object.keys(filters).forEach(key => {
                    // Include all filter values except null and empty strings
                    // Include 'all' for region/product_plan as backend may need it
                    if (filters[key] !== null && filters[key] !== '') {
                        params.append(key, filters[key]);
                    }
                });
                
                // Add encrypted app_id as query parameter (required) - like billing page
                if (encryptedAppId) {
                    params.append('app_id', encryptedAppId);
                }
                
                // Add role_id as query parameter (optional)
                if (roleId) {
                    params.append('role_id', roleId);
                }
                
                url = '{{ route("dashboard.widgets.all-data") }}?' + params.toString();
                
                // Remove Authorization header and retry with regular endpoint
                const fallbackHeaders = {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                };
                if (previousEtag) {
                    fallbackHeaders['If-None-Match'] = previousEtag;
                }
                
                response = await fetch(url, {
                    method: 'GET',
                    headers: fallbackHeaders,
                    credentials: 'same-origin',
                });
                useTenantApi = false;
            }
            
            let data = null;
            let fromCache = false;
            
            // Check if cached (304 Not Modified) - only use cache if NOT forcing reload
            if (response.status === 304 && !forceReload) {
                console.log('✅ Dashboard data served from CDN cache (304 Not Modified)');
                
                // Use cached data if available (tenant-scoped cache key)
                const cachedDataKey = 'dashboard_data_' + md5(JSON.stringify(filters)) + cacheKeySuffix;
                const cachedData = sessionStorage.getItem(cachedDataKey);
                if (cachedData) {
                    data = JSON.parse(cachedData);
                    fromCache = true;
                } else {
                    // Fallback: no cached data present, refetch without ETag to get fresh data
                    console.warn('ℹ️ No cached data found for 304 response. Refetching without If-None-Match.');
                    const fallbackHeaders = {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json',
                    };
                    if (useTenantApi && bearerToken) {
                        fallbackHeaders['Authorization'] = 'Bearer ' + bearerToken;
                    }
                    
                    response = await fetch(url, {
                        method: 'GET',
                        headers: fallbackHeaders,
                        credentials: 'same-origin',
                    });
                    
                    if (!response.ok) {
                        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                    }
                    
                    const etagFresh = response.headers.get('ETag');
                    if (etagFresh) {
                        sessionStorage.setItem(cacheKey, etagFresh);
                    }
                    
                    const freshData = await response.json();
                    data = freshData;
                    fromCache = false;
                }
            } else {
                // Normal response (200 OK)
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }
                
                // Get ETag from response
                const etag = response.headers.get('ETag');
                if (etag) {
                    sessionStorage.setItem(cacheKey, etag);
                }
                
                const responseData = await response.json();
                data = responseData;
                fromCache = false;
            }
            
            // Process the data
            if (data && data.success) {
                console.log(fromCache ? '✅ Dashboard data loaded from cache' : '✅ Dashboard data loaded from API');
                
                // Cache data in sessionStorage (tenant-scoped cache key)
                const cachedDataKey = 'dashboard_data_' + md5(JSON.stringify(filters)) + cacheKeySuffix;
                sessionStorage.setItem(cachedDataKey, JSON.stringify(data.data));
                
                // Update dashboard with new data
                updateDashboardWithData(data.data);
            }
        } catch (error) {
            console.error('❌ Error loading dashboard data:', error);
            showAjaxError('Failed to load dashboard data. Please try again.');
        } finally {
            hideAjaxLoader();
            isLoading = false;
        }
    }
    
    /**
     * Icon mapping function - converts heroicon names to SVG paths
     * Defined outside updateKpiCards so it can be reused
     */
    function getIconSvg(iconName) {
                // Debug: log the icon name to see what we're receiving
                if (!iconName) {
                    console.warn('Icon name is empty or undefined');
                    return '';
                }
                
                console.log('Icon name received:', iconName, 'Type:', typeof iconName);
                
                // Trim whitespace and normalize
                const normalizedIconName = String(iconName).trim();
                
                const iconMap = {
                    // New icon names (from updated PHP)
                    'heroicon-o-clipboard-document-check': '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15a2.25 2.25 0 0 1 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h7.5c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z"></path>',
                    'heroicon-o-arrow-right-circle': '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12.75 15l3-3m0 0l-3-3m3 3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path>',
                    'heroicon-o-user-group': '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"></path>',
                    'heroicon-o-x-circle': '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path>',
                    'heroicon-o-presentation-chart-line': '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5M9 11.25v1.5M12 9v3.75m3-3.75v3.75m0-3.75h-3m3 0h3"></path>',
                    'heroicon-o-shield-check': '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"></path>',
                    // Old icon names (currently in JSON - map to new icons)
                    'heroicon-o-users': '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15a2.25 2.25 0 0 1 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h7.5c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z"></path>',
                    'heroicon-o-check-circle': '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12.75 15l3-3m0 0l-3-3m3 3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path>',
                    'heroicon-o-user-plus': '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"></path>',
                    'heroicon-o-arrow-trending-down': '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path>',
                    'heroicon-o-arrow-trending-up': '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5M9 11.25v1.5M12 9v3.75m3-3.75v3.75m0-3.75h-3m3 0h3"></path>',
                    'heroicon-o-arrow-path-rounded-square': '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"></path>',
                    'heroicon-o-user-x-mark': `
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M15 19.128A9.38 9.38 0 0 1 12 19.5
c-2.17 0-4.207-.576-5.963-1.584
A6.062 6.062 0 0 1 6 18.719
c0-1.291.412-2.513 1.109-3.515
A5.995 5.995 0 0 1 12 12.75
a5.995 5.995 0 0 1 3.891 1.454" />

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M15 6.75a3 3 0 1 1-6 0
3 3 0 0 1 6 0Z" />

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="m17.25 14.25 4.5 4.5m0-4.5-4.5 4.5" />
`

                };
                
                // Try exact match first
                let svgPath = iconMap[normalizedIconName];
                
                // If not found, try case-insensitive match
                if (!svgPath) {
                    const lowerIconName = normalizedIconName.toLowerCase();
                    for (const key in iconMap) {
                        if (key.toLowerCase() === lowerIconName) {
                            svgPath = iconMap[key];
                            console.log('Icon found with case-insensitive match:', key);
                            break;
                        }
                    }
                }
                
                if (svgPath) {
                    console.log('Icon found in map:', normalizedIconName);
                    return `<div class="text-gray-400"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">${svgPath}</svg></div>`;
                }
                console.warn('Icon not found in map, using fallback. Received:', normalizedIconName, 'Available keys:', Object.keys(iconMap));
                // Fallback to a default icon if not found
                return '<div class="text-gray-400"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg></div>';
    }
    
    /**
     * Update KPI Cards widget with AJAX data
     */
    function updateKpiCards(kpiData) {
        if (!kpiData || !Array.isArray(kpiData)) {
            console.warn('updateKpiCards: Invalid data received', kpiData);
            return;
        }
        
        console.log('updateKpiCards: Received KPI data:', kpiData);
        
        const container = document.querySelector('.kpi-cards-container');
        if (!container) return;
        
        // Clear existing cards
        container.innerHTML = '';
        
        // Create new cards from data
        kpiData.forEach((stat, index) => {
            console.log(`KPI Card ${index}:`, stat);
            console.log(`  Title: ${stat.title}, Icon: ${stat.icon}, Icon type: ${typeof stat.icon}`);
            const card = document.createElement('div');
            card.className = 'bg-white rounded-lg border border-gray-200 p-6 hover:shadow-md transition-shadow';
            
            const trendIcon = stat.trend_icon === 'up' 
                ? '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4 mr-1"><polyline points="23,6 13.5,15.5 8.5,10.5 1,18"></polyline><polyline points="17,6 23,6 23,12"></polyline></svg>'
                : '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4 mr-1"><polyline points="1,18 10.5,8.5 15.5,13.5 23,6"></polyline><polyline points="7,18 1,18 1,12"></polyline></svg>';
            
            const colorClass = stat.color === 'green' ? 'text-green-600' : 'text-red-600';
            
            // Icon handling - render actual icon based on icon name
            // Also map old icon names to new ones based on card title if needed
            let iconToUse = stat.icon;
            if (iconToUse) {
                // Map old icon names to new ones based on card title
                const iconMapping = {
                    'Registrations': 'heroicon-o-clipboard-document-check',
                    'Conversions': 'heroicon-o-arrow-right-circle',
                    'Retained Subscribers': 'heroicon-o-user-group',
                    'Churned Rate': 'heroicon-o-user-x-mark',
                    'Conversion Rate': 'heroicon-o-presentation-chart-line',
                    'Retention Rate': 'heroicon-o-shield-check'
                };
                
                // If we have a mapping for this title, use it (overrides the icon from JSON)
                if (iconMapping[stat.title]) {
                    iconToUse = iconMapping[stat.title];
                    console.log(`Mapped icon for "${stat.title}": ${stat.icon} → ${iconToUse}`);
                }
            }
            const iconHtml = iconToUse ? getIconSvg(iconToUse) : '';
            
            card.innerHTML = `
                <div class="flex items-center justify-between mb-3">
                    <h4 class="text-sm font-medium text-gray-600">${stat.title || ''}</h4>
                    ${iconHtml}
                </div>
                <div class="text-3xl font-bold text-gray-900 mb-2">${stat.value || ''}</div>
                <div class="flex items-center mb-3 kpi-description">
                    <span class="flex items-center ${colorClass}">
                        ${trendIcon}
                        ${stat.description || ''}
                    </span>
                </div>
                ${stat.chart ? '<div class="h-2 bg-gray-200 rounded-full overflow-hidden"><div class="h-full bg-gradient-to-r from-gray-300 to-gray-400 rounded-full" style="width: ' + (Math.random() * 30 + 60) + '%"></div></div>' : ''}
            `;
            
            container.appendChild(card);
        });
    }
    
    /**
     * Update Subscriber Timeline Chart with AJAX data
     */
    function updateTimelineChart(chartData) {
        // Find the timeline chart container
        const chartContainer = document.querySelector('.subscriber-timeline-container');
        if (!chartContainer) return;
        
        // Find canvas element
        const canvas = chartContainer.querySelector('canvas');
        if (!canvas) return;
        
        // Handle null/empty data
        if (!chartData || (typeof chartData === 'object' && Object.keys(chartData).length === 0)) {
            if (canvas.chartInstance) {
                canvas.chartInstance.destroy();
                canvas.chartInstance = null;
            }
            const existingMessage = canvas.parentElement.querySelector('.no-data-message');
            if (existingMessage) existingMessage.remove();
            canvas.style.display = 'none';
            const noDataMessage = document.createElement('div');
            noDataMessage.className = 'no-data-message';
            noDataMessage.style.cssText = 'display: flex; align-items: center; justify-content: center; height: 100%; color: #6b7280; font-size: 14px; font-weight: 500;';
            noDataMessage.textContent = 'No subscriber timeline data found';
            canvas.parentElement.appendChild(noDataMessage);
            return;
        }
        
        // Handle nested data structure (data.data.labels vs data.labels)
        const actualData = chartData?.data || chartData;
        const labels = actualData?.labels || [];
        const datasets = actualData?.datasets || [];
        
        // Check if data is empty or invalid
        const hasData = labels.length > 0 && datasets.length > 0 && 
                       datasets.some(ds => ds.data && ds.data.length > 0 && ds.data.some(val => val !== null && val !== undefined && val !== 0));
        
        // Destroy existing chart if present
        if (canvas.chartInstance) {
            canvas.chartInstance.destroy();
            canvas.chartInstance = null;
        }
        
        // Remove existing no-data message if present
        const existingMessage = canvas.parentElement.querySelector('.no-data-message');
        if (existingMessage) {
            existingMessage.remove();
        }
        
        if (!hasData) {
            // Hide canvas and show no-data message
            canvas.style.display = 'none';
            const noDataMessage = document.createElement('div');
            noDataMessage.className = 'no-data-message';
            noDataMessage.style.cssText = 'display: flex; align-items: center; justify-content: center; height: 100%; color: #6b7280; font-size: 14px; font-weight: 500;';
            noDataMessage.textContent = 'No subscriber timeline data found';
            canvas.parentElement.appendChild(noDataMessage);
            return;
        }
        
        // Show canvas and use the actual data structure
        canvas.style.display = 'block';
        chartData = actualData;
        
        // Get or create chart instance
        let chartInstance = canvas.chartInstance;
        
        if (chartInstance) {
            // Update existing chart - only update data, not options
            // Modifying options directly causes circular reference errors
            chartInstance.data.labels = labels;
            chartInstance.data.datasets = datasets;
            // If we need to change yAxisMax, destroy and recreate the chart
            if (chartData.yAxisMax && (!chartInstance.options.scales || !chartInstance.options.scales.y || chartInstance.options.scales.y.max !== chartData.yAxisMax)) {
                chartInstance.destroy();
                chartInstance = null;
            } else {
                chartInstance.update('none');
            }
        }
        
        if (!chartInstance) {
            // Create new chart if Chart.js is available
            if (typeof Chart !== 'undefined') {
                const ctx = canvas.getContext('2d');
                chartInstance = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: datasets
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        interaction: {
                            mode: 'index',
                            intersect: false,
                        },
                        plugins: {
                            tooltip: {
                                backgroundColor: '#fff',
                                titleColor: '#111827',
                                bodyColor: '#111827',
                                borderColor: '#e5e7eb',
                                borderWidth: 1,
                                padding: 12,
                                displayColors: false,
                                callbacks: {
                                    title: function(context) {
                                        return context[0].label;
                                    },
                                    label: function(context) {
                                        const label = context.dataset.label || '';
                                        const value = context.parsed.y;
                                        return label + ' : ' + value;
                                    },
                                    labelTextColor: function(context) {
                                        // Match text color to the dataset line color
                                        return context.dataset.borderColor || context.dataset.backgroundColor;
                                    },
                                    labelColor: function(context) {
                                        return {
                                            borderColor: context.dataset.backgroundColor,
                                            backgroundColor: context.dataset.backgroundColor,
                                            borderWidth: 2,
                                            borderRadius: 2
                                        };
                                    }
                                }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                max: chartData.yAxisMax || 100
                            }
                        }
                    }
                });
                canvas.chartInstance = chartInstance;
            }
        }
    }
    
    /**
     * Update Cohort Retention Chart with AJAX data
     */
    function updateCohortChart(chartData) {
        const canvas = document.getElementById('cohortRetentionChart');
        if (!canvas) {
            console.warn('Cohort retention chart canvas not found');
            return;
        }
        
        // Handle null/empty data
        if (!chartData || (typeof chartData === 'object' && Object.keys(chartData).length === 0)) {
            if (canvas.chartInstance) {
                canvas.chartInstance.destroy();
                canvas.chartInstance = null;
            }
            const existingMessage = canvas.parentElement.querySelector('.no-data-message');
            if (existingMessage) existingMessage.remove();
            canvas.style.display = 'none';
            const noDataMessage = document.createElement('div');
            noDataMessage.className = 'no-data-message';
            noDataMessage.style.cssText = 'display: flex; align-items: center; justify-content: center; height: 100%; color: #6b7280; font-size: 14px; font-weight: 500;';
            noDataMessage.textContent = 'No cohort retention data found';
            canvas.parentElement.appendChild(noDataMessage);
            return;
        }
        
        // Handle nested data structure (data.data.labels vs data.labels)
        const actualData = chartData?.data || chartData;
        const labels = actualData?.labels || [];
        const datasets = actualData?.datasets || [];
        
        // Check if data is empty or invalid
        const hasData = labels.length > 0 && datasets.length > 0 && 
                       datasets.some(ds => ds.data && ds.data.length > 0 && ds.data.some(val => val !== null && val !== undefined && val !== 0));
        
        // Destroy existing chart if present
        if (canvas.chartInstance) {
            canvas.chartInstance.destroy();
            canvas.chartInstance = null;
        }
        
        // Remove existing no-data message if present
        const existingMessage = canvas.parentElement.querySelector('.no-data-message');
        if (existingMessage) {
            existingMessage.remove();
        }
        
        if (!hasData) {
            // Hide canvas and show no-data message
            canvas.style.display = 'none';
            const noDataMessage = document.createElement('div');
            noDataMessage.className = 'no-data-message';
            noDataMessage.style.cssText = 'display: flex; align-items: center; justify-content: center; height: 100%; color: #6b7280; font-size: 14px; font-weight: 500;';
            noDataMessage.textContent = 'No cohort retention data found';
            canvas.parentElement.appendChild(noDataMessage);
            return;
        }
        
        // Show canvas and use the actual data structure
        canvas.style.display = 'block';
        chartData = actualData;
        
        if (typeof Chart === 'undefined') {
            console.error('Chart.js is not loaded');
            return;
        }
        
        let chartInstance = canvas.chartInstance;
        
        // Default options matching the screenshot style
        const defaultOptions = {
            responsive: true,
            maintainAspectRatio: false,
            interaction: {
                mode: 'index',
                intersect: false,
            },
            plugins: {
                legend: {
                    display: true,
                    position: 'top',
                },
                tooltip: {
                    enabled: true,
                    backgroundColor: 'rgba(255, 255, 255, 0.95)',
                    titleColor: '#111827',
                    bodyColor: '#111827',
                    borderColor: 'rgba(0, 0, 0, 0.1)',
                    borderWidth: 1,
                    padding: 12,
                    displayColors: true,
                },
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        color: '#6b7280',
                        font: {
                            size: 11,
                        },
                        precision: 0,
                    },
                    grid: {
                        color: 'rgba(0, 0, 0, 0.1)',
                        borderDash: [5, 5],
                        drawBorder: true,
                        borderColor: '#000000',
                        borderWidth: 1,
                    },
                },
                x: {
                    ticks: {
                        color: '#6b7280',
                        font: {
                            size: 11,
                        },
                        maxRotation: 45,
                        minRotation: 0,
                    },
                    grid: {
                        display: true,
                        color: 'rgba(0, 0, 0, 0.1)',
                        borderDash: [5, 5],
                        lineWidth: 1,
                        drawOnChartArea: true,
                        drawBorder: true,
                        borderColor: '#000000',
                        borderWidth: 1,
                    },
                },
            },
        };
        
        if (chartInstance) {
            // Update existing chart
            chartInstance.data.labels = labels;
            chartInstance.data.datasets = datasets;
            // Don't merge Chart.js internal options - just update data
            // Chart.js manages options internally and merging causes circular reference errors
            chartInstance.update('none'); // 'none' mode for smoother updates
        } else {
            // Create new chart
            const ctx = canvas.getContext('2d');
            
            // Destroy any existing chart instance on this canvas
            if (canvas.chartInstance) {
                canvas.chartInstance.destroy();
            }
            
            // Use provided options if available, otherwise use defaults
            // Only merge if chartData.options is a plain object from backend (not Chart.js internal)
            let finalOptions = defaultOptions;
            if (chartData.options && typeof chartData.options === 'object') {
                try {
                    // Try to stringify first - this will fail if there are circular refs
                    const optionsStr = JSON.stringify(chartData.options);
                    const parsedOptions = JSON.parse(optionsStr);
                    // If we got here, it's a plain object - safe to merge
                    finalOptions = mergeChartOptions(defaultOptions, parsedOptions);
                } catch (e) {
                    // If JSON fails (circular refs or getters), it's a Chart.js internal object
                    // Just use defaults
                    console.warn('Skipping Chart.js internal options object, using defaults');
                    finalOptions = defaultOptions;
                }
            }
            
            chartInstance = new Chart(ctx, {
                type: chartData.type || 'line',
                data: {
                    labels: labels,
                    datasets: datasets
                },
                options: finalOptions
            });
            canvas.chartInstance = chartInstance;
        }
    }
    
    /**
     * Deep merge chart options (safe for Chart.js objects)
     */
    function mergeChartOptions(defaultOpts, providedOpts) {
        // Don't merge if providedOpts is a Chart.js internal object (has circular refs)
        if (!providedOpts || typeof providedOpts !== 'object') {
            return defaultOpts;
        }
        
        // Check if it's a Chart.js internal object (has _cache or similar internal properties)
        if (providedOpts._cache || providedOpts._proxy || providedOpts._chartjs) {
            // Return default options, don't try to merge Chart.js internals
            return defaultOpts;
        }
        
        try {
            const merged = JSON.parse(JSON.stringify(defaultOpts || {}));
            const provided = JSON.parse(JSON.stringify(providedOpts || {}));
            
            function deepMerge(target, source) {
                for (const key in source) {
                    if (source.hasOwnProperty(key)) {
                        if (typeof source[key] === 'object' && source[key] !== null && !Array.isArray(source[key])) {
                            target[key] = target[key] || {};
                            deepMerge(target[key], source[key]);
                        } else {
                            target[key] = source[key];
                        }
                    }
                }
                return target;
            }
            
            return deepMerge(merged, provided);
        } catch (e) {
            // If JSON parsing fails (circular refs), just return defaults
            console.warn('Could not merge chart options, using defaults:', e);
            return defaultOpts;
        }
    }
    
    /**
     * Update Cohort Retention Table with raw data (DEPRECATED - kept for reference)
     * Transforms raw data structure into HTML table
     */
    function updateCohortRetentionTable(cohortData) {
        const container = document.querySelector('#cohort-retention-container');
        if (!container) return;
        
        const timeline = cohortData.timeline || [];
        const cohorts = cohortData.cohorts || {};
        
        if (timeline.length === 0 || Object.keys(cohorts).length === 0) {
            container.innerHTML = '<div class="text-center py-8 text-gray-500"><p>No cohort retention data available</p></div>';
            return;
        }
        
        // Calculate max months (number of timeline points)
        const maxMonths = timeline.length;
        
        // Build table HTML
        let tableHTML = '<div class="overflow-x-auto overflow-y-auto flex-1" style="max-height: 600px;">';
        tableHTML += '<table class="w-full divide-y divide-gray-200" style="table-layout: auto;">';
        
        // Table header
        tableHTML += '<thead class="bg-gray-50 sticky top-0"><tr>';
        tableHTML += '<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cohort</th>';
        tableHTML += '<th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Size</th>';
        for (let i = 0; i < maxMonths; i++) {
            tableHTML += `<th class="px-3 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">M${i}</th>`;
        }
        tableHTML += '</tr></thead>';
        
        // Table body - create rows for each timeline point (cohort month)
        tableHTML += '<tbody class="bg-white divide-y divide-gray-200">';
        
        timeline.forEach((timelinePoint, index) => {
            const rowClass = index % 2 === 0 ? 'bg-white' : 'bg-gray-50';
            tableHTML += `<tr class="hover:bg-gray-50 transition-colors duration-150 ${rowClass}">`;
            
            // Cohort Month (format the timeline point)
            let cohortMonthDisplay = timelinePoint;
            if (timelinePoint.includes('-') && timelinePoint.length === 10) {
                // Date format: YYYY-MM-DD
                const date = new Date(timelinePoint + 'T00:00:00');
                cohortMonthDisplay = date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
            } else if (timelinePoint.includes('-') && timelinePoint.length === 7) {
                // Month format: YYYY-MM
                const [year, month] = timelinePoint.split('-');
                const date = new Date(parseInt(year), parseInt(month) - 1);
                cohortMonthDisplay = date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
            }
            
            tableHTML += `<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">${cohortMonthDisplay}</td>`;
            
            // Calculate cohort size (sum of all cohorts for this timeline point)
            let cohortSize = 0;
            Object.keys(cohorts).forEach(cohortName => {
                if (cohorts[cohortName] && cohorts[cohortName][index] !== undefined) {
                    cohortSize += cohorts[cohortName][index] || 0;
                }
            });
            
            tableHTML += `<td class="px-4 py-3 whitespace-nowrap text-sm text-center text-gray-700 font-semibold">${cohortSize.toLocaleString()}</td>`;
            
            // Retention months (M0, M1, M2, ...)
            for (let i = 0; i < maxMonths; i++) {
                const monthIndex = index + i;
                if (monthIndex < timeline.length) {
                    // Calculate retention: active users at month i / initial cohort size
                    let activeCount = 0;
                    Object.keys(cohorts).forEach(cohortName => {
                        if (cohorts[cohortName] && cohorts[cohortName][monthIndex] !== undefined) {
                            activeCount += cohorts[cohortName][monthIndex] || 0;
                        }
                    });
                    
                    const percentage = cohortSize > 0 ? ((activeCount / cohortSize) * 100) : null;
                    
                    if (percentage !== null && !isNaN(percentage)) {
                        const colorClass = percentage >= 80 ? 'text-green-600' : (percentage >= 50 ? 'text-yellow-600' : 'text-red-600');
                        tableHTML += `<td class="px-3 py-3 whitespace-nowrap text-sm text-center">`;
                        tableHTML += `<div class="flex flex-col items-center">`;
                        tableHTML += `<span class="font-semibold ${colorClass}">${percentage.toFixed(1)}%</span>`;
                        tableHTML += `<span class="text-xs text-gray-500 mt-0.5">(${activeCount.toLocaleString()})</span>`;
                        tableHTML += `</div></td>`;
                    } else {
                        tableHTML += '<td class="px-3 py-3 whitespace-nowrap text-sm text-center"><span class="text-gray-300">-</span></td>';
                    }
                } else {
                    tableHTML += '<td class="px-3 py-3 whitespace-nowrap text-sm text-center"><span class="text-gray-300">-</span></td>';
                }
            }
            
            tableHTML += '</tr>';
        });
        
        tableHTML += '</tbody></table></div>';
        
        // Add legend
        tableHTML += '<div class="mt-4 pt-4 border-t border-gray-200">';
        tableHTML += '<div class="flex flex-wrap gap-4 text-xs text-gray-600">';
        tableHTML += '<div class="flex items-center gap-2"><span class="w-3 h-3 rounded bg-green-100 border border-green-300"></span><span>≥80% Retention</span></div>';
        tableHTML += '<div class="flex items-center gap-2"><span class="w-3 h-3 rounded bg-yellow-100 border border-yellow-300"></span><span>50-79% Retention</span></div>';
        tableHTML += '<div class="flex items-center gap-2"><span class="w-3 h-3 rounded bg-red-100 border border-red-300"></span><span>&lt;50% Retention</span></div>';
        tableHTML += '<div class="ml-auto text-gray-500">M0 = Signup Month, M1+ = Subsequent Months</div>';
        tableHTML += '</div></div>';
        
        container.innerHTML = tableHTML;
    }
    
    /**
     * Update Conversion vs Retention Chart with AJAX data
     */
    function updateConversionChart(chartData) {
        const chartContainer = document.querySelector('.conversion-retention-chart');
        if (!chartContainer) {
            console.warn('Conversion chart container not found');
            return;
        }
        
        // Try to find canvas by ID first, then by querySelector
        let canvas = document.getElementById('conversionRetentionChart');
        if (!canvas) {
            canvas = chartContainer.querySelector('canvas');
        }
        
        if (!canvas) {
            console.warn('Conversion chart canvas not found');
            return;
        }
        
        // Handle null/empty data
        if (!chartData || (typeof chartData === 'object' && Object.keys(chartData).length === 0)) {
            if (canvas.chartInstance) {
                canvas.chartInstance.destroy();
                canvas.chartInstance = null;
            }
            const existingMessage = canvas.parentElement.querySelector('.no-data-message');
            if (existingMessage) existingMessage.remove();
            canvas.style.display = 'none';
            const noDataMessage = document.createElement('div');
            noDataMessage.className = 'no-data-message';
            noDataMessage.style.cssText = 'display: flex; align-items: center; justify-content: center; height: 100%; color: #6b7280; font-size: 14px; font-weight: 500;';
            noDataMessage.textContent = 'No conversion retention data found';
            canvas.parentElement.appendChild(noDataMessage);
            return;
        }
        
        // Handle nested data structure (data.data.labels vs data.labels)
        const actualData = chartData?.data || chartData;
        const labels = actualData?.labels || [];
        const datasets = actualData?.datasets || [];
        
        // Check if data is empty or invalid
        const hasData = labels.length > 0 && datasets.length > 0 && 
                       datasets.some(ds => ds.data && ds.data.length > 0 && ds.data.some(val => val !== null && val !== undefined && val !== 0));
        
        // Destroy existing chart if present
        if (canvas.chartInstance) {
            canvas.chartInstance.destroy();
            canvas.chartInstance = null;
        }
        
        // Remove existing no-data message if present
        const existingMessage = canvas.parentElement.querySelector('.no-data-message');
        if (existingMessage) {
            existingMessage.remove();
        }
        
        if (!hasData) {
            // Hide canvas and show no-data message
            canvas.style.display = 'none';
            const noDataMessage = document.createElement('div');
            noDataMessage.className = 'no-data-message';
            noDataMessage.style.cssText = 'display: flex; align-items: center; justify-content: center; height: 100%; color: #6b7280; font-size: 14px; font-weight: 500;';
            noDataMessage.textContent = 'No conversion retention data found';
            canvas.parentElement.appendChild(noDataMessage);
            return;
        }
        
        // Show canvas and use the actual data structure
        canvas.style.display = 'block';
        chartData = actualData;
        
        if (typeof Chart === 'undefined') {
            console.error('Chart.js is not loaded');
            return;
        }
        
        let chartInstance = canvas.chartInstance;
        
        if (chartInstance) {
            // Update existing chart - ensure it's a bar chart
            if (chartInstance.config.type !== 'bar') {
                // Destroy and recreate if wrong type
                chartInstance.destroy();
                chartInstance = null;
            } else {
                // Update data only - don't modify options directly (causes circular ref errors)
                chartInstance.data.labels = labels;
                chartInstance.data.datasets = datasets.map(dataset => ({
                    ...dataset,
                    barThickness: 'flex',
                    maxBarThickness: 50,
                }));
                chartInstance.update('none'); // 'none' mode for smoother updates
            }
        }
        
        if (!chartInstance) {
            // Create new chart
            const ctx = canvas.getContext('2d');
            
            // Destroy any existing chart instance on this canvas
            if (canvas.chartInstance) {
                canvas.chartInstance.destroy();
            }
            
            // Default options for grouped bar chart matching screenshot
            const defaultOptions = {
                responsive: true,
                maintainAspectRatio: false,
                resizeDelay: 0,   // 🚨 stops resize jitter
        animation: false, // 🚨 prevents reflow on inspect
                interaction: {
                    mode: 'index',
                    intersect: false,
                },
                plugins: {
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            usePointStyle: true,
                            padding: 15,
                            font: {
                                size: 12
                            }
                        }
                    },
                    tooltip: {
                        enabled: true,
                        backgroundColor: 'rgba(255, 255, 255, 0.95)',
                        titleColor: '#111827',
                        bodyColor: '#111827',
                        borderColor: 'rgba(0, 0, 0, 0.1)',
                        borderWidth: 1,
                        padding: 12,
                        displayColors: true,
                        callbacks: {
                            label: function(context) {
                                return context.dataset.label + ': ' + context.parsed.y;
                            }
                        }
                    }
                },
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 100,
                            ticks: {
                                stepSize: 10,
                                color: '#6b7280',
                                font: {
                                    size: 11
                                },
                                callback: function(value) {
                                    return value;
                                }
                            },
                            grid: {
                                color: 'rgba(0, 0, 0, 0.1)',
                                borderDash: [5, 5],
                                drawBorder: true,
                                borderColor: '#000000',
                                borderWidth: 1,
                            }
                        },
                    x: {
                        ticks: {
                            color: '#6b7280',
                            font: {
                                size: 11
                            },
                            maxRotation: 45,
                            minRotation: 0,
                        },
                        grid: {
                            display: true,
                            color: 'rgba(0, 0, 0, 0.1)',
                            borderDash: [5, 5],
                            lineWidth: 1,
                            drawOnChartArea: true,
                            drawBorder: true,
                            borderColor: '#000000',
                            borderWidth: 1,
                        }
                    }
                }
            };
            
            // Use provided options if available, otherwise use defaults
            // Only merge if chartData.options is a plain object from backend (not Chart.js internal)
            let finalOptions = defaultOptions;
            if (chartData.options && typeof chartData.options === 'object') {
                try {
                    // Try to stringify first - this will fail if there are circular refs
                    const optionsStr = JSON.stringify(chartData.options);
                    const parsedOptions = JSON.parse(optionsStr);
                    // If we got here, it's a plain object - safe to merge
                    finalOptions = mergeChartOptions(defaultOptions, parsedOptions);
                } catch (e) {
                    // If JSON fails (circular refs or getters), it's a Chart.js internal object
                    // Just use defaults
                    console.warn('Skipping Chart.js internal options object for conversion chart, using defaults');
                    finalOptions = defaultOptions;
                }
            }
            
            chartInstance = new Chart(ctx, {
                type: chartData.type || 'bar',
                data: {
                    labels: labels,
                    datasets: datasets.map(dataset => ({
                        ...dataset,
                        // Ensure bar chart styling
                        barThickness: 'flex',
                        maxBarThickness: 50,
                    }))
                },
                options: finalOptions
            });
            canvas.chartInstance = chartInstance;
        }
    }
    
    /**
     * Update Payment Health Chart with AJAX data
     */
    function updatePaymentHealthChart(chartData) {
        const chartContainer = document.querySelector('.payment-health-chart');
        if (!chartContainer) return;
        
        const canvas = chartContainer.querySelector('canvas');
        if (!canvas) return;
        
        // Handle null/empty data
        if (!chartData || (typeof chartData === 'object' && Object.keys(chartData).length === 0)) {
            if (canvas.chartInstance) {
                canvas.chartInstance.destroy();
                canvas.chartInstance = null;
            }
            const existingMessage = canvas.parentElement.querySelector('.no-data-message');
            if (existingMessage) existingMessage.remove();
            canvas.style.display = 'none';
            const noDataMessage = document.createElement('div');
            noDataMessage.className = 'no-data-message';
            noDataMessage.style.cssText = 'display: flex; align-items: center; justify-content: center; height: 100%; color: #6b7280; font-size: 14px; font-weight: 500;';
            noDataMessage.textContent = 'No payment health data found';
            canvas.parentElement.appendChild(noDataMessage);
            return;
        }
        
        // Handle nested data structure (data.data.labels vs data.labels)
        const actualData = chartData?.data || chartData;
        const labels = actualData?.labels || [];
        const datasets = actualData?.datasets || [];
        
        // Check if data is empty or invalid
        const hasData = labels.length > 0 && datasets.length > 0 && 
                       datasets.some(ds => ds.data && ds.data.length > 0 && ds.data.some(val => val !== null && val !== undefined && val !== 0));
        
        // Destroy existing chart if present
        if (canvas.chartInstance) {
            canvas.chartInstance.destroy();
            canvas.chartInstance = null;
        }
        
        // Remove existing no-data message if present
        const existingMessage = canvas.parentElement.querySelector('.no-data-message');
        if (existingMessage) {
            existingMessage.remove();
        }
        
        if (!hasData) {
            // Hide canvas and show no-data message
            canvas.style.display = 'none';
            const noDataMessage = document.createElement('div');
            noDataMessage.className = 'no-data-message';
            noDataMessage.style.cssText = 'display: flex; align-items: center; justify-content: center; height: 100%; color: #6b7280; font-size: 14px; font-weight: 500;';
            noDataMessage.textContent = 'No payment health data found';
            canvas.parentElement.appendChild(noDataMessage);
            return;
        }
        
        // Show canvas and use the actual data structure
        canvas.style.display = 'block';
        chartData = actualData;
        
        let chartInstance = canvas.chartInstance;
        
        if (chartInstance) {
            chartInstance.data.labels = labels;
            chartInstance.data.datasets = datasets;
            chartInstance.update();
        } else if (typeof Chart !== 'undefined') {
            const ctx = canvas.getContext('2d');
            chartInstance = new Chart(ctx, {
                type: chartData.type || 'bar',
                data: {
                    labels: labels,
                    datasets: datasets
                },
                options: chartData.options || {
                    responsive: true,
                    maintainAspectRatio: false
                }
            });
            canvas.chartInstance = chartInstance;
        }
    }
    
    /**
     * Update Churned Customers Widget with AJAX data
     */
    function updateChurnedCustomers(customersData) {
        if (!customersData || !customersData.customers) return;
        
        const container = document.querySelector('.churned-customers-container');
        if (!container) {
            // Create container if it doesn't exist
            const parent = document.querySelector('.side-by-side-container') || document.body;
            const newContainer = document.createElement('div');
            newContainer.className = 'bg-white rounded-lg shadow-sm border border-gray-200 p-6 flex flex-col h-full churned-customers-container';
            newContainer.innerHTML = '<h3 class="text-lg font-semibold text-gray-900 mb-4 flex-shrink-0">Recent Churned Customers</h3><div class="overflow-x-auto overflow-y-auto flex-1" style="max-height: 500px;"><table class="w-full divide-y divide-gray-200"><thead class="bg-gray-50"><tr><th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th><th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Plan</th><th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Churn Date</th><th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Reason</th></tr></thead><tbody class="bg-white divide-y divide-gray-200"></tbody></table></div>';
            parent.appendChild(newContainer);
            return updateChurnedCustomers(customersData);
        }
        
        const tbody = container.querySelector('tbody');
        if (!tbody) return;
        
        // Clear existing rows
        tbody.innerHTML = '';
        
        // Add new rows
        customersData.customers.forEach((customer, index) => {
            const row = document.createElement('tr');
            row.className = `hover:bg-gray-50 transition-colors duration-150 ${index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}`;
            
            const planClass = customer.plan === 'Premium' ? 'bg-green-100 text-green-800' :
                             customer.plan === 'Basic' ? 'bg-yellow-100 text-yellow-800' :
                             customer.plan === 'Enterprise' ? 'bg-blue-100 text-blue-800' :
                             'bg-gray-100 text-gray-800';
            
            const churnDate = new Date(customer.churn_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
            
            row.innerHTML = `
                <td class="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">${customer.customer || ''}</td>
                <td class="px-4 py-2 whitespace-nowrap">
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${planClass}">
                        ${customer.plan || 'Unknown'}
                    </span>
                </td>
                <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">${churnDate}</td>
                <td class="px-4 py-2 text-sm text-gray-500">${customer.reason || ''}</td>
            `;
            
            tbody.appendChild(row);
        });
    }
    
    /**
     * Update At-Risk Customers Widget with AJAX data
     */
    function updateAtRiskCustomers(customersData) {
        if (!customersData || !customersData.customers) return;
        
        const container = document.querySelector('[data-widget-container="at-risk-customers"]') ||
                         document.querySelector('.at-risk-customers-container');
        if (!container) return;
        
        const tbody = container.querySelector('tbody');
        if (!tbody) return;
        
        // Update total count badge
        const totalBadge = container.querySelector('.bg-red-100');
        if (totalBadge && customersData.total !== undefined) {
            const badgeText = totalBadge.textContent.trim();
            totalBadge.textContent = `${customersData.total} total`;
        }
        
        // Clear existing rows
        tbody.innerHTML = '';
        
        // Add new rows
        customersData.customers.forEach((customer, index) => {
            const row = document.createElement('tr');
            row.className = 'hover:bg-blue-50/50 transition-all duration-200 border-l-4 border-transparent hover:border-blue-400';
            
            const planClass = customer.plan?.toLowerCase() === 'enterprise' ? 'plan-enterprise' :
                             customer.plan?.toLowerCase() === 'premium' ? 'plan-premium' :
                             customer.plan?.toLowerCase() === 'basic' ? 'plan-basic' :
                             'plan-default';
            
            const riskLevelClass = customer.risk_level?.toLowerCase() === 'high' ? 'risk-high' :
                                  customer.risk_level?.toLowerCase() === 'medium' ? 'risk-medium' :
                                  'risk-low';
            
            const riskScoreRaw = parseInt(customer.risk_score?.replace('%', '') || '0');
            const riskScoreClass = riskScoreRaw >= 80 ? 'score-critical' :
                                  riskScoreRaw >= 60 ? 'score-high' :
                                  riskScoreRaw >= 40 ? 'score-medium' :
                                  'score-low';
            
            const lastPayment = customer.last_payment === 'Never' 
                ? '<div class="flex items-center"><svg class="w-3.5 h-3.5 text-gray-400 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><span class="text-xs text-gray-500 italic font-semibold">Never</span></div>'
                : `<div class="flex items-center"><svg class="w-3.5 h-3.5 text-green-500 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><span class="text-sm text-gray-700 font-semibold">${customer.last_payment}</span></div>`;
            
            row.innerHTML = `
                <td class="px-2 py-2 whitespace-nowrap">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 h-8 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center text-white text-xs mr-2 shadow-md">
                            ${(customer.customer || '').charAt(0).toUpperCase()}
                        </div>
                        <div>
                            <div class="text-sm text-gray-900">${customer.customer || ''}</div>
                            <div class="text-xs text-gray-500 mt-0.5">ID: ${customer.id || ''}</div>
                        </div>
                    </div>
                </td>
                <td class="px-2 py-2 whitespace-nowrap">
                    <span class="pill rounded-full ${planClass}">${customer.plan || 'Unknown'}</span>
                </td>
                <td class="px-2 py-2 whitespace-nowrap">
                    <span class="pill ${riskLevelClass}">${customer.risk_level || 'Low'}</span>
                </td>
                <td class="px-2 py-2 whitespace-nowrap">${lastPayment}</td>
                <td class="px-2 py-2 whitespace-nowrap">
                    <span class="pill ${riskScoreClass}">${customer.risk_score || '0%'}</span>
                </td>
                <td class="px-2 py-2 whitespace-nowrap text-sm font-medium text-center">
                    <button class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-md hover:scale-110 hover:shadow-lg" title="Contact Customer">
                        <svg class="w-4 h-4 text-gray-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                        </svg>
                    </button>
                </td>
            `;
            
            tbody.appendChild(row);
        });
    }
    
    /**
     * Update Payment Failures Widget with AJAX data
     */
    function updatePaymentFailures(failuresData) {
        if (!failuresData || !failuresData.failures) return;
        
        const container = document.querySelector('.payment-failures-container');
        if (!container) {
            // Create container if it doesn't exist
            const parent = document.querySelector('.side-by-side-container') || document.body;
            const newContainer = document.createElement('div');
            newContainer.className = 'bg-white rounded-lg shadow-sm border border-gray-200 p-6 payment-failures-container';
            newContainer.innerHTML = '<h3 class="text-lg font-semibold text-gray-900 mb-4">Payment Failures (24h)</h3><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4"></div>';
            parent.appendChild(newContainer);
            return updatePaymentFailures(failuresData);
        }
        
        const grid = container.querySelector('.grid');
        if (!grid) return;
        
        // Clear existing cards
        grid.innerHTML = '';
        
        // Add new failure cards
        failuresData.failures.forEach(failure => {
            const colorMap = {
                'red': { bg: 'bg-red-50', icon: 'text-red-500', text: 'text-red-600', button: 'bg-red-600 hover:bg-red-700 focus:ring-red-500' },
                'orange': { bg: 'bg-orange-50', icon: 'text-orange-500', text: 'text-orange-600', button: 'bg-orange-600 hover:bg-orange-700 focus:ring-orange-500' },
                'yellow': { bg: 'bg-yellow-50', icon: 'text-yellow-500', text: 'text-yellow-600', button: 'bg-yellow-600 hover:bg-yellow-700 focus:ring-yellow-500' },
                'blue': { bg: 'bg-blue-50', icon: 'text-blue-500', text: 'text-blue-600', button: 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-500' },
                'gray': { bg: 'bg-gray-50', icon: 'text-gray-500', text: 'text-gray-600', button: 'bg-gray-600 hover:bg-gray-700 focus:ring-gray-500' }
            };
            
            const colors = colorMap[failure.color] || colorMap.gray;
            
            const card = document.createElement('div');
            card.className = `${colors.bg} rounded-lg border border-gray-200 p-4 hover:shadow-md transition-shadow`;
            
            card.innerHTML = `
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center gap-2">
                        <span class="${colors.icon}">${failure.icon || '📊'}</span>
                        <span class="text-sm font-medium text-gray-900">${failure.type || ''}</span>
                    </div>
                    <span class="text-2xl font-bold ${colors.text}">${failure.count || 0}</span>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-xs text-gray-500">Action:</span>
                    <button class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-white ${colors.button} focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors">
                        ${failure.action || 'Retry'}
                    </button>
                </div>
            `;
            
            grid.appendChild(card);
        });
    }
    
    /**
     * Update dashboard widgets with loaded data
     */
    function updateDashboardWithData(data) {
        console.log('🔄 Updating dashboard with data:', Object.keys(data));
        
        // Update KPI cards if available (6 cards: Registrations, Conversions, Retained Subscribers, Churned Rate, Conversion Rate, Retention Rate)
        if (data.kpis && window.updateKpiCards) {
            console.log('✅ Updating KPI Cards');
            window.updateKpiCards(data.kpis);
        } else {
            console.warn('⚠️ KPI data missing or updateKpiCards not available');
        }
        
        // Update charts if available
        if (data.timeline && window.updateTimelineChart) {
            console.log('✅ Updating Timeline Chart');
            window.updateTimelineChart(data.timeline);
        } else {
            console.warn('⚠️ Timeline data missing or updateTimelineChart not available');
        }
        
        if (data.cohort && window.updateCohortChart) {
            console.log('✅ Updating Cohort Chart');
            window.updateCohortChart(data.cohort);
        } else {
            console.warn('⚠️ Cohort data missing or updateCohortChart not available');
        }
        
        if (data.conversion && window.updateConversionChart) {
            console.log('✅ Updating Conversion Chart');
            window.updateConversionChart(data.conversion);
        } else {
            console.warn('⚠️ Conversion data missing or updateConversionChart not available');
        }
        
        if (data.payment_health && window.updatePaymentHealthChart) {
            console.log('✅ Updating Payment Health Chart');
            window.updatePaymentHealthChart(data.payment_health);
        } else {
            console.warn('⚠️ Payment Health data missing or updatePaymentHealthChart not available');
        }
        
        // Update Payment Success vs Failure Trends chart
        if (data.payment_trends && window.updatePaymentTrendsChart) {
            console.log('✅ Updating Payment Trends Chart');
            window.updatePaymentTrendsChart(data.payment_trends);
        } else {
            console.warn('⚠️ Payment Trends data missing or updatePaymentTrendsChart not available');
        }
        
        // Update Payment Gateway Distribution chart
        if (data.payment_gateway_distribution && window.updatePaymentMethodChart) {
            console.log('✅ Updating Payment Gateway Distribution Chart');
            window.updatePaymentMethodChart(data.payment_gateway_distribution);
        } else {
            console.warn('⚠️ Payment Gateway Distribution data missing or updatePaymentMethodChart not available');
        }
        
        // Update widget tables (commented out widgets - only update if data is present and widget is enabled)
        if (data.churned_customers && window.updateChurnedCustomers) {
            console.log('✅ Updating Churned Customers');
            window.updateChurnedCustomers(data.churned_customers);
        }
        // Note: Churned Customers widget is currently commented out in the template
        
        if (data.at_risk_customers && window.updateAtRiskCustomers) {
            console.log('✅ Updating At Risk Customers');
            window.updateAtRiskCustomers(data.at_risk_customers);
        }
        // Note: At Risk Customers widget is currently commented out in the template
        
        if (data.payment_failures && window.updatePaymentFailures) {
            console.log('✅ Updating Payment Failures');
            window.updatePaymentFailures(data.payment_failures);
        }
        // Note: Payment Failures widget is currently commented out in the template
        
        console.log('✅ Dashboard update complete');
        // All widgets are now updated via AJAX - no Livewire needed
    }
    
    /**
     * Show AJAX loader (uses the same filter-loader)
     */
    function showAjaxLoader() {
        const loader = document.getElementById('filter-loader');
        if (loader) {
            loader.style.display = 'flex';
            loader.classList.add('show-loader');
        }
    }
    
    /**
     * Hide AJAX loader (uses the same filter-loader)
     */
    function hideAjaxLoader() {
        const loader = document.getElementById('filter-loader');
        if (loader) {
            loader.style.display = 'none';
            loader.classList.remove('show-loader');
        }
    }
    
    /**
     * Show AJAX error
     */
    function showAjaxError(message) {
        console.error(message);
        // You can integrate with Filament notifications here
        // @this.dispatch('notify', { type: 'danger', message: message });
    }
    
    /**
     * Get current filters from form
     */
    /**
     * Calculate custom_start_date and custom_end_date based on date_range
     */
    function calculateDateRange(dateRange, startDate, endDate) {
        const now = new Date();
        let customStartDate = null;
        let customEndDate = null;
        
        if (dateRange === 'custom') {
            // Use custom dates from form fields
            if (startDate && endDate) {
                customStartDate = startDate;
                customEndDate = endDate;
            }
        } else {
            // Calculate dates based on date_range
            switch (dateRange) {
                case 'today':
                    customStartDate = now.toISOString().split('T')[0];
                    customEndDate = now.toISOString().split('T')[0];
                    break;
                case '7_days':
                    const sevenDaysAgo = new Date(now);
                    sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 6);
                    customStartDate = sevenDaysAgo.toISOString().split('T')[0];
                    customEndDate = now.toISOString().split('T')[0];
                    break;
                case 'mtd':
                    const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
                    customStartDate = startOfMonth.toISOString().split('T')[0];
                    customEndDate = now.toISOString().split('T')[0];
                    break;
                case '30_days':
                    const thirtyDaysAgo = new Date(now);
                    thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 29);
                    customStartDate = thirtyDaysAgo.toISOString().split('T')[0];
                    customEndDate = now.toISOString().split('T')[0];
                    break;
                case 'quarterly':
                    const threeMonthsAgo = new Date(now);
                    threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
                    customStartDate = threeMonthsAgo.toISOString().split('T')[0];
                    customEndDate = now.toISOString().split('T')[0];
                    break;
                case 'half_yearly':
                default:
                    const sixMonthsAgo = new Date(now);
                    sixMonthsAgo.setMonth(sixMonthsAgo.getMonth() - 6);
                    customStartDate = sixMonthsAgo.toISOString().split('T')[0];
                    customEndDate = now.toISOString().split('T')[0];
                    break;
                case 'last_year':
                    const lastYear = new Date(now);
                    lastYear.setFullYear(lastYear.getFullYear() - 1);
                    customStartDate = new Date(lastYear.getFullYear(), 0, 1).toISOString().split('T')[0];
                    customEndDate = new Date(lastYear.getFullYear(), 11, 31).toISOString().split('T')[0];
                    break;
                case 'ytd':
                    const startOfYear = new Date(now.getFullYear(), 0, 1);
                    customStartDate = startOfYear.toISOString().split('T')[0];
                    customEndDate = now.toISOString().split('T')[0];
                    break;
            }
        }
        
        return { customStartDate, customEndDate };
    }
    
    function getCurrentFilters() {
        // Simple sanitization to strip potentially dangerous characters
        const sanitize = (value) => {
            if (typeof value !== 'string') return value;
            return value.replace(/[<>\"']/g, '').trim();
        };

        // Read from new Billing-style filter inputs
        const dateRangeSelect = document.getElementById('dashboard-date-range');
        const dateRange = sanitize(dateRangeSelect?.value || 'half_yearly');
        
        // Get date values from custom HTML inputs
        let startDate = sanitize(document.getElementById('dashboard-start-date')?.value || null);
        let endDate = sanitize(document.getElementById('dashboard-end-date')?.value || null);
        
        // Convert date format from d/m/Y to Y-m-d if needed (Filament displays d/m/Y but stores Y-m-d)
        // Check if date is in d/m/Y format and convert it
        function convertDateFormat(dateStr) {
            if (!dateStr) return null;
            // If already in Y-m-d format, return as is
            if (/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) {
                return dateStr;
            }
            // If in d/m/Y format, convert to Y-m-d
            if (/^\d{2}\/\d{2}\/\d{4}$/.test(dateStr)) {
                const parts = dateStr.split('/');
                return `${parts[2]}-${parts[1]}-${parts[0]}`;
            }
            // Try to parse as date and format as Y-m-d
            try {
                const date = new Date(dateStr);
                if (!isNaN(date.getTime())) {
                    return date.toISOString().split('T')[0];
                }
            } catch (e) {
                console.warn('Could not parse date:', dateStr);
            }
            return dateStr;
        }
        
        startDate = convertDateFormat(startDate);
        endDate = convertDateFormat(endDate);
        // Read from new Billing-style filter inputs
        const regionSelect = document.getElementById('dashboard-region');
        const productPlanSelect = document.getElementById('dashboard-product-plan');
        const region = sanitize(regionSelect?.value || 'all');
        const productPlan = sanitize(productPlanSelect?.value || 'all');
        
        // Compare previous not implemented in custom inputs
        let comparePrevious = false;
        
        // Calculate custom dates
        const { customStartDate, customEndDate } = calculateDateRange(dateRange, startDate, endDate);
        
        // Build filters object - only include relevant fields based on date_range
        const filters = {
            date_range: dateRange,
            region: region,
            product_plan: productPlan,
            compare_previous: comparePrevious,
        };
        
        // Handle date fields based on date_range
        if (dateRange === 'custom') {
            // For custom date range, use the dates from the form fields
            if (startDate && endDate) {
                filters.start_date = startDate;
                filters.end_date = endDate;
                filters.custom_start_date = startDate;
                filters.custom_end_date = endDate;
                console.log('✅ Custom date range: Using dates from form', { startDate, endDate });
            } else {
                // If custom is selected but dates are not filled, warn user
                console.warn('⚠️ Custom date range selected but dates are missing:', { startDate, endDate });
                // Still send custom_start_date and custom_end_date as fallback
                filters.custom_start_date = customStartDate;
                filters.custom_end_date = customEndDate;
            }
        } else {
            // For non-custom date ranges, only send custom_start_date and custom_end_date
            filters.custom_start_date = customStartDate;
            filters.custom_end_date = customEndDate;
        }
        
        console.log('📋 Current filters:', filters);
        return filters;
    }
    
    /**
     * Simple MD5 hash function (for cache keys)
     */
    function md5(string) {
        // Simple hash function for cache keys (not cryptographically secure)
        let hash = 0;
        for (let i = 0; i < string.length; i++) {
            const char = string.charCodeAt(i);
            hash = ((hash << 5) - hash) + char;
            hash = hash & hash; // Convert to 32bit integer
        }
        return Math.abs(hash).toString(36);
    }
    
    /**
     * Debounced filter change handler
     */
    function debouncedLoadData(filters, delay = 500) {
        // Clear existing timer
        if (debounceTimer) {
            clearTimeout(debounceTimer);
        }
        
        // Set new timer
        debounceTimer = setTimeout(() => {
            loadDashboardDataViaAjax(filters);
        }, delay);
    }
    
    /**
     * Handle filter submission (replaces Livewire wire:click="submitFilters")
     */
    function handleSubmitFilters() {
        const submitBtn = document.getElementById('submit-filters-btn');
        
        if (submitBtn) {
            submitBtn.disabled = true;
        }
        
        // Get current filters from form
        const filters = getCurrentFilters();
        console.log('🔍 Submitting filters:', filters);
        
        // Load dashboard data via AJAX (uses single full-page loader)
        loadDashboardDataViaAjax(filters, true).finally(() => {
            if (submitBtn) {
                submitBtn.disabled = false;
            }
        });
    }
    
    /**
     * Update date picker visibility based on date range selection
     * Made global so it can be called from anywhere
     */
    function updateDatePickerVisibility() {
        const dateRangeSelectNew = document.getElementById('dashboard-date-range');
        const customDateSection = document.getElementById('custom-date-section');
        
        if (!dateRangeSelectNew) {
            console.warn('⚠️ Date range select not found');
            return;
        }
        
        const dateRange = dateRangeSelectNew.value;
        console.log('🔄 Date range changed to:', dateRange);
        
        if (dateRange === 'custom') {
            // Show custom date section - use flex to match parent container
            if (customDateSection) {
                customDateSection.style.display = 'flex';
                customDateSection.style.visibility = 'visible';
                customDateSection.removeAttribute('hidden');
                customDateSection.classList.remove('hidden');
                console.log('✅ Custom date range: Showing date pickers');
            } else {
                console.warn('⚠️ Custom date section not found');
            }
        } else {
            // Hide custom date section and clear values
            if (customDateSection) {
                customDateSection.style.display = 'none';
                customDateSection.style.visibility = 'hidden';
                customDateSection.setAttribute('hidden', 'true');
            }
            const startDateInput = document.getElementById('dashboard-start-date');
            const endDateInput = document.getElementById('dashboard-end-date');
            if (startDateInput) startDateInput.value = '';
            if (endDateInput) endDateInput.value = '';
            console.log('ℹ️ Custom date range hidden');
        }
    }
    
    /**
     * Handle filter reset (replaces Livewire wire:click="resetFilters")
     */
    function handleResetFilters() {
        const resetBtn = document.getElementById('reset-filters-btn');
        
        if (resetBtn) {
            resetBtn.disabled = true;
        }
        
        // Reset new Billing-style filter inputs
        const dateRangeSelectNew = document.getElementById('dashboard-date-range');
        const regionSelectNew = document.getElementById('dashboard-region');
        const productPlanSelectNew = document.getElementById('dashboard-product-plan');
        const startDateInputNew = document.getElementById('dashboard-start-date');
        const endDateInputNew = document.getElementById('dashboard-end-date');
        
        // Also reset Filament form fields (fallback)
        // Reset custom HTML inputs
        if (dateRangeSelectNew) dateRangeSelectNew.value = 'half_yearly';
        if (regionSelectNew) regionSelectNew.value = 'all';
        if (productPlanSelectNew) productPlanSelectNew.value = 'all';
        if (startDateInputNew) startDateInputNew.value = '';
        if (endDateInputNew) endDateInputNew.value = '';
        
        // Form removed - no Filament form fields to reset
        
        // Update date picker visibility
        updateDatePickerVisibility();
        
        // Calculate date range for default (last 6 months)
        const { customStartDate, customEndDate } = calculateDateRange('half_yearly', null, null);
        
        const defaultFilters = {
            date_range: 'half_yearly',
            compare_previous: false,
            region: 'all',
            product_plan: 'all',
            start_date: null,
            end_date: null,
            custom_start_date: customStartDate,
            custom_end_date: customEndDate,
        };
        
        // Load dashboard data with reset filters (uses single full-page loader)
        loadDashboardDataViaAjax(defaultFilters, true).finally(() => {
            if (resetBtn) {
                resetBtn.disabled = false;
            }
        });
    }
    
    // Initialize on page load
    document.addEventListener('DOMContentLoaded', function() {
        // Get references to custom HTML inputs (define early in DOMContentLoaded scope)
        const dateRangeSelectNew = document.getElementById('dashboard-date-range');
        const regionSelectNew = document.getElementById('dashboard-region');
        const productPlanSelectNew = document.getElementById('dashboard-product-plan');
        const startDateInputNew = document.getElementById('dashboard-start-date');
        const endDateInputNew = document.getElementById('dashboard-end-date');
        
        // Attach event listeners to filter buttons
        const submitBtn = document.getElementById('submit-filters-btn');
        const resetBtn = document.getElementById('reset-filters-btn');
        
        if (submitBtn) {
            submitBtn.addEventListener('click', handleSubmitFilters);
        }
        
        if (resetBtn) {
            resetBtn.addEventListener('click', handleResetFilters);
        }
        
        // Populate region and product_plan dropdowns via AJAX
        async function populateDropdowns() {
            try {
                const regionSelect = document.getElementById('dashboard-region');
                const productPlanSelect = document.getElementById('dashboard-product-plan');
                
                if (!regionSelect || !productPlanSelect) {
                    console.warn('⚠️ Filter dropdowns not found');
                    return;
                }
                
                // Get app_id and bearer token for tenant-scoped API
                const bearerToken = window.API_BEARER_TOKEN || sessionStorage.getItem('api_bearer_token');
                
                // Build URL with app_id if available
                let url = '{{ route("dashboard.widgets.filter-options") }}';
                const urlParams = new URLSearchParams();
                if (encryptedAppId) {
                    urlParams.append('app_id', encryptedAppId);
                }
                if (urlParams.toString()) {
                    url += '?' + urlParams.toString();
                }
                
                // Fetch options from AJAX endpoint
                const headers = {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                };
                
                // Add Authorization header if bearer token is available
                if (encryptedAppId && bearerToken) {
                    headers['Authorization'] = `Bearer ${bearerToken}`;
                }
                
                const response = await fetch(url, {
                    method: 'GET',
                    headers: headers,
                    credentials: 'same-origin',
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }
                
                const result = await response.json();
                
                // Handle both nested and flat response structures
                const regions = result.data?.regions || result.regions || {};
                const packages = result.data?.packages || result.packages || {};
                
                if (result.success && (regions || packages)) {
                    // Populate region dropdown
                    regionSelect.innerHTML = '<option value="all">All Regions</option>';
                    if (regions && typeof regions === 'object') {
                        Object.keys(regions).forEach(key => {
                            if (key !== 'all') {
                                const option = document.createElement('option');
                                option.value = key;
                                option.textContent = regions[key];
                                regionSelect.appendChild(option);
                            }
                        });
                    }
                    
                    // Populate package dropdown
                    productPlanSelect.innerHTML = '<option value="all">All Packages</option>';
                    if (packages && typeof packages === 'object') {
                        Object.keys(packages).forEach(key => {
                            if (key !== 'all') {
                                const option = document.createElement('option');
                                option.value = key;
                                option.textContent = packages[key];
                                productPlanSelect.appendChild(option);
                            }
                        });
                    }
                    
                    // Set current values from initial filters if available
        const initialFilters = JSON.parse('{!! json_encode($this->filters ?? []) !!}');
        if (initialFilters && Object.keys(initialFilters).length > 0) {
                        if (initialFilters.region && regionSelect.querySelector(`option[value="${initialFilters.region}"]`)) {
                            regionSelect.value = initialFilters.region;
                        }
                        if (initialFilters.product_plan && productPlanSelect.querySelector(`option[value="${initialFilters.product_plan}"]`)) {
                            productPlanSelect.value = initialFilters.product_plan;
                        }
                    }
                    
                    console.log('✅ Filter options loaded via AJAX:', {
                        regions: Object.keys(regions || {}).length,
                        packages: Object.keys(packages || {}).length,
                        response: result
                    });
                } else {
                    throw new Error('Invalid response format');
                }
            } catch (error) {
                console.error('❌ Error loading filter options:', error);
                // Form removed - no fallback to Filament form
                // Dropdowns will remain empty if AJAX fails
            }
        }
        
        // REMOVED: syncToFilamentForm() and all form syncing - Form removed
        
        // Variables are already defined at the top of DOMContentLoaded scope
        
        // Update visibility on date range change
        if (dateRangeSelectNew) {
            dateRangeSelectNew.addEventListener('change', function() {
                console.log('📅 Date range dropdown changed to:', dateRangeSelectNew.value);
                updateDatePickerVisibility();
            });
            
            // Also listen for input event (for programmatic changes)
            dateRangeSelectNew.addEventListener('input', function() {
                updateDatePickerVisibility();
            });
        } else {
            console.warn('⚠️ Date range select element not found');
        }
        
        // Initialize filter values from server
        const initialFilters = JSON.parse('{!! json_encode($this->filters ?? []) !!}');
        
        // Populate dropdowns first, then set initial values
        populateDropdowns().then(() => {
            // After dropdowns are populated, set initial values
            if (initialFilters && Object.keys(initialFilters).length > 0) {
                if (dateRangeSelectNew && initialFilters.date_range) {
                    dateRangeSelectNew.value = initialFilters.date_range;
                }
                if (regionSelectNew && initialFilters.region) {
                    // Wait a bit for options to be populated
                    setTimeout(() => {
                        if (regionSelectNew.querySelector(`option[value="${initialFilters.region}"]`)) {
                            regionSelectNew.value = initialFilters.region;
                        }
                    }, 100);
                }
                if (productPlanSelectNew && initialFilters.product_plan) {
                    // Wait a bit for options to be populated
                    setTimeout(() => {
                        if (productPlanSelectNew.querySelector(`option[value="${initialFilters.product_plan}"]`)) {
                            productPlanSelectNew.value = initialFilters.product_plan;
                        }
                    }, 100);
                }
                
                // Update date picker visibility based on initial date_range
                updateDatePickerVisibility();
                
                // Load dashboard data after filters are initialized
                setTimeout(() => {
                    loadDashboardDataViaAjax(initialFilters, true); // Force reload on initial load
                }, 200);
            } else {
                // If no initial filters, just update visibility
                updateDatePickerVisibility();
            }
        }).catch(error => {
            console.error('Error initializing filters:', error);
            // Still update visibility even if dropdowns fail
            updateDatePickerVisibility();
        });
        
        // Note: Filters only apply when "Search" or "Reset" buttons are clicked
        // We do NOT auto-update on form field changes to prevent dashboard from going blank
        // Users must explicitly click "Search" to apply filters
        // Livewire reactivity has been disabled to prevent /livewire/update requests
    });
    
    // Expose functions globally for manual refresh and AJAX updates
    window.loadDashboardDataViaAjax = loadDashboardDataViaAjax;
    window.getCurrentFilters = getCurrentFilters;
    window.handleSubmitFilters = handleSubmitFilters;
    window.handleResetFilters = handleResetFilters;
    window.updateDatePickerVisibility = updateDatePickerVisibility;
    window.updatePaymentTrendsChart = updatePaymentTrendsChart;
    window.updatePaymentMethodChart = updatePaymentMethodChart;
    window.updateKpiCards = updateKpiCards;
    window.updateTimelineChart = updateTimelineChart;
    window.updateCohortChart = updateCohortChart;
    window.updateConversionChart = updateConversionChart;
    window.updatePaymentHealthChart = updatePaymentHealthChart;
    window.updateChurnedCustomers = updateChurnedCustomers;
    window.updateAtRiskCustomers = updateAtRiskCustomers;
    window.updatePaymentFailures = updatePaymentFailures;
})();
</script>
@endpush