@use('App\Services\Date')
@extends('reports::layouts.master')

@section('title', __('reports::reports.customer_aging.title'))

@section('extra_styles')
<style>
    /* Expand/Collapse Button Styles */
    .expand-btn {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
        max-width: 28px;
        max-height: 28px;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        background: #10b981;
        transition: all 0.2s;
        padding: 0;
        box-sizing: border-box;
        line-height: 1;
        flex-shrink: 0;
    }
    
    .expand-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    }
    
    .expand-btn.collapsed {
        background: #ef4444;
    }
    
    .expand-btn.loading {
        background: #6b7280;
        cursor: wait;
    }
    
    /* Ensure expand button column doesn't stretch the button */
    #customer_aging_table td:first-child {
        text-align: center;
        vertical-align: middle;
        padding: 8px 4px;
        width: 40px;
    }
    
    /* Detail Row Styles */
    .detail-row {
        background: #f1f5f9 !important;
    }
    
    .detail-row:hover {
        background: #f1f5f9 !important;
    }
    
    .detail-table {
        width: 100%;
        border-collapse: collapse;
        background: #fff;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    
    .detail-table th {
        background: #e2e8f0;
        padding: 10px 12px;
        text-align: left;
        font-weight: 600;
        color: #475569;
        font-size: 12px;
        border-bottom: 1px solid #cbd5e1;
    }
    
    .detail-table td {
        padding: 10px 12px;
        border-bottom: 1px solid #f0f0f0;
        font-size: 13px;
    }
    
    .detail-table tbody tr:last-child td {
        border-bottom: none;
    }
    
    .detail-table tbody tr:hover {
        background: #f8fafc;
    }

    /* Nested DataTable overrides */
    .detail-row .dataTables_wrapper {
        padding: 0;
    }
    
    .detail-length-and-actions {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 95%;
    }

    .detail-row .dataTables_wrapper .dataTables_length {
        padding: 8px 12px;
        font-size: 12px;
        color: #64748b;
        float: none;
        text-align: left;
        margin: 0;
    }

    .detail-row .dataTables_wrapper .dataTables_info {
        padding: 8px 12px;
        font-size: 12px;
        color: #64748b;
    }
    
    .detail-row .dataTables_wrapper .dataTables_paginate {
        padding: 8px 12px;
        float: right;
    }
    
    .detail-row .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 4px 10px;
        font-size: 12px;
    }
    
    .detail-row .dataTables_wrapper .dataTables_processing {
        border: 10px solid #11b99f12 !important;
        border-radius: 50% !important;
        border-top: 10px solid #11B99F !important;
        width: 80px !important;
        height: 80px !important;
        padding: 0 !important;
        margin: 0 !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        background: none !important;
        box-sizing: border-box !important;
        animation: spin 2s linear infinite !important;
        color: transparent !important;
        z-index: 1;
    }
    
    /* Transaction Type Badge */
    .type-badge {
        padding: 3px 10px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 600;
        display: inline-block;
    }
    
    .type-badge.invoice {
        background: #dbeafe;
        color: #1d4ed8;
    }
    
    .type-badge.debit-note {
        background: #fef3c7;
        color: #d97706;
    }
    
    .type-badge.credit-note {
        background: #ede9fe;
        color: #7c3aed;
    }
    
    /* Aging Badge */
    .aging-badge {
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 600;
        display: inline-block;
    }
    
    .aging-badge.current {
        background: #d1fae5;
        color: #059669;
    }
    
    .aging-badge.period-1 {
        background: #fef3c7;
        color: #d97706;
    }
    
    .aging-badge.period-2 {
        background: #ffedd5;
        color: #ea580c;
    }
    
    .aging-badge.period-3 {
        background: #fee2e2;
        color: #dc2626;
    }
    
    .aging-badge.period-4 {
        background: #dc2626;
        color: #fff;
    }
    
    .aging-badge.period-5 {
        background: #991b1b;
        color: #fff;
    }
    
    .aging-badge.period-6 {
        background: #7f1d1d;
        color: #fff;
    }
    
    /* Fallback for period 7+ */
    .aging-badge.period-severe {
        background: #450a0a;
        color: #fff;
    }
    
    .aging-badge.credit {
        background: #ede9fe;
        color: #7c3aed;
        margin-top: 0px!important;
    }
    
    /* Amount Colors */
    .amount-current {
        color: #10b981;
        font-weight: 500;
    }
    
    .amount-warning {
        color: #f59e0b;
        font-weight: 500;
    }
    
    .amount-danger {
        color: #f97316;
        font-weight: 500;
    }
    
    .amount-critical {
        color: #ef4444;
        font-weight: 500;
    }
    
    .amount-severe {
        color: #dc2626;
        font-weight: 600;
    }
    
    .amount-zero {
        color: #9ca3af;
    }
    
    .amount-total {
        font-weight: 600;
        color: #333;
    }
    
    .amount-negative {
        color: #7c3aed;
        font-weight: 500;
    }

    .overdue-days {
        font-weight: 500;
    }

    .overdue-days.color-current {
        color: #059669;
    }

    .overdue-days.color-yellow {
        color: #d97706;
    }

    .overdue-days.color-orange {
        color: #ea580c;
    }

    .overdue-days.color-red {
        color: #dc2626;
    }

    .overdue-days.color-credit {
        color: #7c3aed;
    }
    
    /* Customer Sub-total Row */
    .customer-subtotal {
        background: #fafafa;
        font-weight: 500;
    }
    
    .customer-subtotal td {
        border-top: 1px dashed #d0d0d0;
        padding-top: 12px !important;
    }
    
    /* Totals Row */
    .totals-row {
        background: #f0fdf4 !important;
        font-weight: 600;
    }
    
    .totals-row td {
        border-top: 2px solid #10b981;
        border-bottom: none;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
    
    .totals-row:hover {
        background: #f0fdf4 !important;
    }
    
    /* Link Style */
    .link {
        color: #14b8a6;
        text-decoration: none;
        font-weight: 500;
    }
    
    .link:hover {
        text-decoration: underline;
    }
    
    /* Dynamic Column Header */
    .dynamic-col .col-hint {
        font-size: 10px;
        color: #9ca3af;
        font-weight: 400;
        display: block;
    }
    
    /* Loading Spinner (inside expand button) */
    .spinner {
        border: 2px solid #f3f3f3;
        border-top: 2px solid #fff;
        border-radius: 50%;
        width: 14px;
        height: 14px;
        min-width: 14px;
        min-height: 14px;
        max-width: 14px;
        max-height: 14px;
        animation: spin 1s linear infinite;
        display: inline-block;
        box-sizing: border-box;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>
@endsection

@section('page-link')
<li class="breadcrumb-item active">
    <a href="#" class="active">@lang('reports::reports.customer_aging.title')</a>
</li>
@endsection

@section('action_buttons')
<div class="headBtns mx-1 fixed-btns">
    <div class="pull-left">
        <a class="text-green pull-left" href="{{route('company.reports.index', $subdomain)}}" title="{{__('Back')}}">
            @if(LaravelLocalization::getCurrentLocale() === 'en')
            <span class="icon-Previous action-icon back-btnIcon"></span>
            @else
            <span class="icon-Next action-icon back-btnIcon"></span>
            @endif
        </a>
        @if($data['hasData'])
        @can('reports.customer-aging.export')
        <a href="javascript:void(0)" id="export-excel-btn" class="pull-left" title="@lang('reports::reports.download_excel')">
            <span class="icon-Excel action-icon"></span>
        </a>
        <a href="javascript:void(0)" id="export-pdf-btn" class="pull-left" title="@lang('reports::reports.Download_Pdf')">
            <span class="icon-Pdf action-icon"></span>
        </a>
        <a href="javascript:void(0)" id="print-summary-btn" class="pull-left" title="@lang('reports::reports.print')">
            <span class="icon-Print action-icon"></span>
        </a>
        @endcan
        @endif
    </div>
</div>
@endsection

@section('section_title')
@lang('reports::reports.customer_aging.title')
@endsection

@section('form-open-tag')
    <form action="{{ route('company.reports.customer-aging.index', ['subdomain' => $subdomain]) }}" method="GET" class="form form-horizontal mt-20" novalidate>
        <input id="default_indicator" type="hidden" name="is_dates" value="{{ request('is_dates') ? request('is_dates') : 0 }}">
        <div class="row">
            <div class="col-xs-12">
                <div class="card report-filter-wrapper">
                    <div class="report-filter-header">
                        <span>@lang('Filter')</span>
                    </div>
                    <div class="card-block card-dashboard" style="padding: 0;">
                        <div class="report-filter-panel">
                            <div class="report-filter-grid">
                                <!-- Customer Multi-Select -->
                                <div class="report-filter-group">
                                    <label for="customer_id" class="report-filter-label">
                                        @lang('reports::reports.customers_list')
                                    </label>
                                    <customers-dropdown-component
                                        :selected="{{ json_encode(\Modules\Sales\Models\Customer::getForDropdown(request('customer_ids', []))) }}"
                                        :create-new="false"
                                        :lang="'{{ app()->getLocale() }}'"
                                        :multi-select="true"
                                        input-name="customer_ids"
                                        :translations="{
                                            placeholder: '{{ __('reports::reports.customer_aging.all_customers') }}',
                                            searchPlaceholder: '{{ __('sales::customers.search_customers') }}',
                                            noResultsText: '{{ __('sales::customers.no_customers_found') }}',
                                        }"
                                        class="w-100"
                                    />
                                    @error('customer_ids')
                                        <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                            <p>{{ $message }}</p>
                                        </div>
                                    @enderror
                                </div>

                                <!-- Cost Center Multi-Select -->
                                <div class="report-filter-group">
                                    <label for="cost_center_id" class="report-filter-label">
                                        @lang('reports::reports.cost_center')
                                    </label>
                                    @php
                                        $selectedCostCenters = (array) request('cost_center_ids', []);
                                    @endphp
                                    <select name="cost_center_ids[]" id="cost_center_id" class="report-filter-select selectReport" multiple>
                                        @if(count($data['costCenters']) > 1 || (count($data['costCenters']) == 1 && auth()->user()->can('cost-center.main-center.view')))
                                            <option value="" @if(empty($selectedCostCenters) || in_array('', $selectedCostCenters, true) || in_array(null, $selectedCostCenters, true)) selected @endif>{{ __('All') }}</option>
                                        @endif
                                        @can('cost-center.main-center.view')
                                            <option value="0" @if(in_array('0', $selectedCostCenters, true)) selected @endif>
                                                {{ __('products::cost_center.main center') }}
                                            </option>
                                        @endcan
                                        @foreach($data['costCenters'] as $costCenterId => $costCenterName)
                                            <option value="{{ $costCenterId }}" @if(in_array($costCenterId, $selectedCostCenters)) selected @endif>
                                                {{ $costCenterName }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('cost_center_ids')
                                        <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                            <p>{{ $message }}</p>
                                        </div>
                                    @enderror
                                </div>

                                <!-- Fiscal Year / As-of Date -->
                                <div class="report-filter-group">
                                    <label for="fiscal_year_id" class="report-filter-label">
                                        @lang('reports::reports.customer_aging.as_of_date')
                                    </label>
                                    <select name="fiscal_year_id" id="fiscal_year_id" class="report-filter-select selectReport">
                                        @if ($data['currentFiscalYear'])
                                            <option id="current_fiscal_year_id"
                                                value="{{ $data['currentFiscalYear']->id }}"
                                                data-closing-date="{{ Date::format($data['currentFiscalYear']->closing_date) }}"
                                                @if (!request('is_dates') && (!request()->filled('fiscal_year_id') || (int) request('fiscal_year_id') === $data['currentFiscalYear']->id)) selected @endif>
                                                @lang('reports::reports.current')
                                            </option>
                                        @endif
                                        @foreach ($data['fiscalYears'] as $fiscalYear)
                                            @if (!$data['currentFiscalYear'] || ($data['currentFiscalYear'] && $data['currentFiscalYear']->id != $fiscalYear->id))
                                                <option value="{{ $fiscalYear->id }}"
                                                    data-closing-date="{{ Date::format($fiscalYear->closing_date) }}"
                                                    @if ($fiscalYear->id == request('fiscal_year_id')) selected @endif>
                                                    @lang('from')
                                                    <span dir="ltr">{{ Date::format($fiscalYear->year . '-' . $fiscalYear->month . '-' . $fiscalYear->day) }}</span>
                                                    -
                                                    @lang('to')
                                                    <span dir="ltr">{{ Date::format($fiscalYear->closing_date) }}</span>
                                                </option>
                                            @endif
                                        @endforeach
                                        <option @if (request('is_dates')) selected @endif value="">
                                            @lang('reports::reports.customer_aging.custom_date')
                                        </option>
                                    </select>
                                    @error('fiscal_year_id')
                                        <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                            <p>{{ $message }}</p>
                                        </div>
                                    @enderror

                                    <div id="custom_duration_section" style="display: @if(request('is_dates')) block @else none @endif;">
                                            <x-date-picker 
                                                mode="single"
                                                name="as_of_date"
                                                input-id="as_of_date_picker"
                                                :value="request('is_dates') ? request('as_of_date', Date::now('date')) : Date::now('date')"
                                                placeholder="{{ __('reports::reports.customer_aging.select_date') }}"
                                                input-class="report-filter-input"
                                                :maxDate="Date::format(now())"
                                            />
                                        <a href="javascript:void(0)" id="back_to_fiscal_year" style="font-size: 0.85rem; margin-top: 4px; display: inline-block; color: #11B99F; cursor: pointer;">
                                            <i class="fa fa-undo"></i> @lang('reports::reports.use_fiscal_year')
                                        </a>
                                    </div>
                                    @error('as_of_date')
                                        <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                            <p>{{ $message }}</p>
                                        </div>
                                    @enderror

                                    <!-- Resolved as_of_date for AJAX requests -->
                                    <input type="hidden" id="as_of_date" value="{{ $data['filters']['as_of_date'] }}">
                                    <!-- Dummy from/to hidden inputs for master layout JS compatibility -->
                                    <input type="hidden" id="from_date" disabled>
                                    <input type="hidden" id="to_date" disabled>
                                </div>
                            </div>

                            <div class="report-filter-grid">
                                <!-- Aging Method -->
                                <div class="report-filter-group">
                                    <label for="aging_method" class="report-filter-label">
                                        @lang('reports::reports.customer_aging.aging_method')
                                    </label>
                                    <select name="aging_method" id="aging_method" class="report-filter-select selectReport">
                                        <option value="due_date" @if(request('aging_method', 'due_date') === 'due_date') selected @endif>
                                            @lang('reports::reports.customer_aging.by_due_date')
                                        </option>
                                        <option value="transaction_date" @if(request('aging_method') === 'transaction_date') selected @endif>
                                            @lang('reports::reports.customer_aging.by_transaction_date')
                                        </option>
                                    </select>
                                    @error('aging_method')
                                        <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                            <p>{{ $message }}</p>
                                        </div>
                                    @enderror
                                </div>

                                <!-- Days per Period -->
                                <div class="report-filter-group">
                                    <label for="days_per_period" class="report-filter-label">
                                        @lang('reports::reports.customer_aging.days_per_period')
                                    </label>
                                    <select name="days_per_period" id="days_per_period" class="report-filter-select selectReport">
                                        <option value="15" @if(request('days_per_period') == 15) selected @endif>15 @lang('reports::reports.customer_aging.days')</option>
                                        <option value="30" @if(request('days_per_period', 30) == 30) selected @endif>30 @lang('reports::reports.customer_aging.days')</option>
                                        <option value="60" @if(request('days_per_period') == 60) selected @endif>60 @lang('reports::reports.customer_aging.days')</option>
                                        <option value="90" @if(request('days_per_period') == 90) selected @endif>90 @lang('reports::reports.customer_aging.days')</option>
                                    </select>
                                    @error('days_per_period')
                                        <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                            <p>{{ $message }}</p>
                                        </div>
                                    @enderror
                                </div>

                                <!-- Number of Periods -->
                                <div class="report-filter-group">
                                    <label for="num_periods" class="report-filter-label">
                                        @lang('reports::reports.customer_aging.num_periods')
                                    </label>
                                    <select name="num_periods" id="num_periods" class="report-filter-select selectReport">
                                        <option value="3" @if(request('num_periods') == 3) selected @endif>3 @lang('reports::reports.customer_aging.periods')</option>
                                        <option value="4" @if(request('num_periods', 4) == 4) selected @endif>4 @lang('reports::reports.customer_aging.periods')</option>
                                        <option value="5" @if(request('num_periods') == 5) selected @endif>5 @lang('reports::reports.customer_aging.periods')</option>
                                        <option value="6" @if(request('num_periods') == 6) selected @endif>6 @lang('reports::reports.customer_aging.periods')</option>
                                    </select>
                                    @error('num_periods')
                                        <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                            <p>{{ $message }}</p>
                                        </div>
                                    @enderror
                                </div>
                            </div>

                            <div class="report-filter-button-container">
                                <button type="button" id="reset" class="report-filter-button report-filter-button-secondary">
                                    <i class="fa fa-undo"></i> @lang('reports::reports.reset_filters')
                                </button>
                                <button type="submit" class="report-filter-button">
                                    @lang('reports::reports.filter_report')
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
@endsection

@section('koolreport')
<section id="configuration" class="summ_report">
    <div class="row">
        <div class="col-xs-12">
            <div class="card">
                <div class="card-body collapse in">
                    <div class="report-features">
                    </div>
                    <div>
                        <h2>@lang('reports::reports.customer_aging.title')</h2>
                        <h4><b>{{ $data['companyName'] }}</b></h4>
                        @if($data['hasData'])
                        <h4>@lang('reports::reports.customer_aging.as_of') <span dir="ltr">{{ Date::format($data['filters']['as_of_date']) }}</span></h4>
                        @endif
                        
                        @if($data['hasData'])
                        <div class="table-responsive">
                            <table id="customer_aging_table" class="table table-striped table-sm">
                                <thead>
                                    <tr>
                                        <th style="width: 40px;"></th>
                                        <th>@lang('reports::reports.customer_aging.customer')</th>
                                        <th class="text-right">@lang('reports::reports.customer_aging.total')</th>
                                        <th class="text-right dynamic-col">
                                            {{ $data['periodLabels']['current'] ?? __('reports::reports.customer_aging.current') }}
                                            <span class="col-hint">@lang('reports::reports.customer_aging.not_due')</span>
                                        </th>
                                        @for($i = 1; $i <= request('num_periods', 4); $i++)
                                        <th class="text-right dynamic-col">
                                            {{ $data['periodLabels']['period_' . $i] ?? '' }}
                                            <span class="col-hint">@lang('reports::reports.customer_aging.overdue')</span>
                                        </th>
                                        @endfor
                                        <th class="text-center">@lang('reports::reports.customer_aging.transactions')</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <!-- Grand Totals Row -->
                                    <tr class="totals-row">
                                        <td></td>
                                        <td><strong>@lang('reports::reports.customer_aging.total')</strong></td>
                                        <td class="text-right"><strong id="grand_total_outstanding">{{ number_format($data['grandTotals']['total_outstanding'] ?? 0, 2) }}</strong></td>
                                        <td class="text-right amount-current"><strong id="grand_total_current">{{ number_format($data['grandTotals']['current'] ?? 0, 2) }}</strong></td>
                                        @for($i = 1; $i <= request('num_periods', 4); $i++)
                                        @php
                                            $amount = $data['grandTotals']['period_' . $i] ?? 0;
                                            $colorClass = 'amount-zero';
                                            if ($amount > 0) {
                                                if ($i == 1) $colorClass = 'amount-warning';
                                                elseif ($i == 2) $colorClass = 'amount-danger';
                                                elseif ($i == 3) $colorClass = 'amount-critical';
                                                else $colorClass = 'amount-severe';
                                            }
                                        @endphp
                                        <td class="text-right {{ $colorClass }}"><strong id="grand_total_period_{{ $i }}">{{ number_format($amount, 2) }}</strong></td>
                                        @endfor
                                        <td class="text-center"><strong id="grand_total_transactions">{{ $data['grandTotals']['total_transactions'] ?? 0 }}</strong></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        
                        @else
                        <div class="alert alert-info mt-3">
                            <i class="fa fa-info-circle"></i> 
                            @lang('reports::reports.customer_aging.select_filters')
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('extra_scripts_filter_by_date')
<style>
    .select2-selection__choice {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .select2-container--default .select2-selection--multiple {
        max-height: 200px;
        overflow-y: auto;
    }
    .select2-selection__rendered {
        max-height: 200px;
        overflow-y: auto;
    }
</style>
<script>
    document.addEventListener('DOMContentLoaded', () => {


        // Handle fiscal year change for aging report
        // Override the master layout behavior for this report's specific needs
        $('#fiscal_year_id').off('change').on('change', function() {
            const selectedValue = $(this).val();
            if (selectedValue === '') {
                // Custom date selected - hide dropdown, show date picker
                $(this).next('.select2-container').hide();
                $('#custom_duration_section').show();
                $('#default_indicator').val(1);
                $('#custom_duration_section').find('input').removeAttr('disabled');
            } else {
                // Fiscal year selected - show dropdown, hide date picker
                $('#custom_duration_section').hide();
                $(this).next('.select2-container').show();
                $('#default_indicator').val(0);
                $('#custom_duration_section').find('input').attr('disabled', true);
                // Update resolved date from fiscal year's closing date
                const closingDate = $(this).find('option:selected').data('closing-date');
                if (closingDate) {
                    $('#as_of_date').val(closingDate);
                }
            }
        });

        // Handle back to fiscal year link
        $('#back_to_fiscal_year').off('click').on('click', function() {
            $('#custom_duration_section').hide();
            $('#fiscal_year_id').next('.select2-container').show();
            $('#default_indicator').val(0);
            $('#custom_duration_section').find('input').attr('disabled', true);
            // Restore resolved date from currently selected fiscal year
            const closingDate = $('#fiscal_year_id option:selected').data('closing-date');
            if (closingDate) {
                $('#as_of_date').val(closingDate);
            }
            // Restore the select to the current fiscal year
            @if($data['currentFiscalYear'])
                $('#fiscal_year_id').val('{{ $data['currentFiscalYear']->id }}').trigger('change.select2');
            @endif
        });
        
        // Initialize Select2 for cost center dropdown
        if (typeof $.fn.select2 !== 'undefined') {
            $('#cost_center_id').select2({
                width: '100%',
                language: {
                    noResults: function () {
                        return '{{ __("reports::reports.no result found") }}';
                    }
                },
                escapeMarkup: function (markup) { return markup; }
            });
        }
        
        // Initialize cost center normalization
        const hasAccessToAllCostCenters = {{ $hasAccessToAllCostCenters ? 'true' : 'false' }};
        if (typeof window.initializeCostCenterNormalization === 'function') {
            window.initializeCostCenterNormalization(hasAccessToAllCostCenters);
        }
        
        // Reset filters button
        $('#reset').on('click', function(e) {
            e.preventDefault();
            window.location.href = '{{ route('company.reports.customer-aging.index', ['subdomain' => $subdomain]) }}';
        });

        @if($data['hasData'])
        // Helper: build export query string from current filters
        function buildExportParams() {
            const params = new URLSearchParams();
            // Fiscal year / custom date
            const fiscalYearVal = $('#fiscal_year_id').val();
            if (fiscalYearVal) {
                params.set('fiscal_year_id', fiscalYearVal);
            }
            const isDateVal = $('#default_indicator').val();
            if (isDateVal === '1') {
                params.set('is_dates', '1');
                params.set('as_of_date', $('input[name="as_of_date"]').val());
            } else {
                params.set('as_of_date', $('#as_of_date').val());
            }
            // Aging config
            params.set('aging_method', $('#aging_method').val());
            params.set('days_per_period', $('#days_per_period').val());
            params.set('num_periods', $('#num_periods').val());
            // Customer filter
            $('input[name="customer_ids[]"]').each(function() {
                if ($(this).val()) params.append('customer_ids[]', $(this).val());
            });
            // Cost center filter
            const costCenterVals = $('#cost_center_id').val();
            if (costCenterVals && costCenterVals.length > 0) {
                costCenterVals.filter(v => v !== '' && v !== null).forEach(v => params.append('cost_center_ids[]', v));
            }
            return params.toString();
        }

        // Excel export
        $('#export-excel-btn').on('click', function() {
            const params = buildExportParams();
            window.location.href = '{{ route('company.reports.customer-aging.export-excel', ['subdomain' => $subdomain]) }}?' + params;
        });

        // PDF export (download)
        $('#export-pdf-btn').on('click', function() {
            const params = buildExportParams();
            window.location.href = '{{ route('company.reports.customer-aging.export-pdf', ['subdomain' => $subdomain]) }}?' + params;
        });

        // Print summary (opens new tab)
        $('#print-summary-btn').on('click', function() {
            const params = buildExportParams();
            window.open('{{ route('company.reports.customer-aging.print', ['subdomain' => $subdomain]) }}?' + params, '_blank');
        });
        @endif
        
        @if($data['hasData'])
        // Initialize DataTables
        var agingTable = $('#customer_aging_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('company.reports.customer-aging.index', ['subdomain' => $subdomain]) }}",
                data: function(d) {
                    // Always include the current cost center selection in AJAX requests
                    d.cost_center_ids = $('#cost_center_id').val();
                    // Include other filter parameters
                    d.customer_ids = $('input[name="customer_ids[]"]').map(function() { return $(this).val(); }).get();
                    d.fiscal_year_id = $('#fiscal_year_id').val();
                    d.as_of_date = $('#default_indicator').val() === '1' ? $('input[name="as_of_date"]').val() : $('#as_of_date').val();
                    d.aging_method = $('#aging_method').val();
                    d.days_per_period = $('#days_per_period').val();
                    d.num_periods = $('#num_periods').val();
                    return d;
                },
                responsive: true,
                ordering: true,
                paging: true,
                dataSrc: function ( json ) {
                    // Update grand totals in footer
                    if (json.grandTotals) {
                        $('#grand_total_outstanding').text(parseFloat(json.grandTotals.total_outstanding || 0).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ','));
                        $('#grand_total_current').text(parseFloat(json.grandTotals.current || 0).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ','));
                        
                        // Update period columns dynamically
                        const numPeriods = parseInt($('#num_periods').val()) || 4;
                        for (let i = 1; i <= numPeriods; i++) {
                            const amount = json.grandTotals['period_' + i] || 0;
                            $('#grand_total_period_' + i).text(parseFloat(amount).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ','));
                        }
                        
                        $('#grand_total_transactions').text(json.grandTotals.total_transactions || 0);
                    }
                    return json.data;
                }
            },
            columns: [
                {
                    "class": function(data, type, row, meta) {
                        if (row && data && data.customer_id) {
                            return 'details-control';
                        }
                        return '';
                    },
                    "orderable": false,
                    "data": null,
                    "defaultContent": '<button type="button" class="expand-btn">+</button>',
                    "width": "40px"
                },
                {
                    "data": "customer_name",
                    "orderable": true,
                    "render": function(data, type, row) {
                        return '<a href="' + row.customer_url + '" class="link" target="_blank">' + data + '</a>';
                    }
                },
                {
                    "data": "total_outstanding",
                    "orderable": true,
                    "className": "text-right amount-total",
                    "render": function(data) {
                        return parseFloat(data).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                    }
                },
                {
                    "data": "aging_buckets.current",
                    "orderable": false,
                    "className": "text-right",
                    "render": function(data) {
                        const className = data > 0 ? 'amount-current' : 'amount-zero';
                        return '<span class="' + className + '" title="' + buildOverdueTooltip('current') + '">' + parseFloat(data).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</span>';
                    }
                },
                @for($i = 1; $i <= request('num_periods', 4); $i++)
                {
                    "data": "aging_buckets.period_{{ $i }}",
                    "orderable": false,
                    "className": "text-right",
                    "render": function(data) {
                        let className = 'amount-zero';
                        const amount = parseFloat(data || 0);
                        if (amount > 0) {
                            @if($i == 1) className = 'amount-warning'; @endif
                            @if($i == 2) className = 'amount-danger'; @endif
                            @if($i == 3) className = 'amount-critical'; @endif
                            @if($i >= 4) className = 'amount-severe'; @endif
                        } else if (amount < 0) {
                            className = 'amount-negative';
                        }
                        const tooltipKey = @if($i == 1) 'slightlyOverdue' @elseif($i == 2) 'overdue' @else 'critical' @endif;
                        return '<span class="' + className + '" title="' + buildOverdueTooltip(tooltipKey) + '">' + amount.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</span>';
                    }
                },
                @endfor
                {
                    "data": "transaction_count",
                    "orderable": false,
                    "className": "text-center"
                }
            ],
            @if (App::isLocale('ar'))
            language: {
                "url": "https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Arabic.json"
            },
            @endif
            order: [[1, 'asc']], // Default sort by customer name
            "drawCallback": function() {
                // Re-attach expand/collapse event handlers after each draw
                initializeExpandCollapse();
            }
        });
        
        // Translation maps for detail DataTable rendering
        const typeLabels = {
            'invoice': @json(__('reports::reports.customer_aging.invoice')),
            'debit_note': @json(__('reports::reports.customer_aging.debit_note')),
            'invoice_return': @json(__('reports::reports.customer_aging.credit_note'))
        };
        const typeBadgeClasses = {
            'invoice': 'invoice',
            'debit_note': 'debit-note',
            'invoice_return': 'credit-note'
        };
        // Build aging badge class map dynamically based on configured periods
        const agingBadgeClassMap = { 'current': 'current' };
        const numPeriodsConfig = parseInt($('#num_periods').val()) || 4;
        for (let p = 1; p <= Math.max(numPeriodsConfig, 6); p++) {
            if (p <= 6) {
                agingBadgeClassMap['period_' + p] = 'period-' + p;
            } else {
                agingBadgeClassMap['period_' + p] = 'period-severe';
            }
        }
        const creditLabel = @json(__('reports::reports.customer_aging.credit'));
        const mainCenterLabel = @json(__('products::cost_center.main center'));
        const overdueInfoLabels = {
            current: @json(__('reports::reports.customer_aging.overdue_info_current')),
            slightlyOverdue: @json(__('reports::reports.customer_aging.overdue_info_slightly_overdue')),
            overdue: @json(__('reports::reports.customer_aging.overdue_info_overdue')),
            critical: @json(__('reports::reports.customer_aging.overdue_info_critical'))
        };

        function buildOverdueTooltip(levelKey) {
            return overdueInfoLabels[levelKey];
        }

        function resolveAgingMeta(row) {
            if (parseFloat(row.balance) < 0) {
                return {
                    badgeClass: 'credit',
                    label: creditLabel,
                    daysColorClass: 'color-credit',
                    tooltip: buildOverdueTooltip('current')
                };
            }

            const bucket = row.aging_bucket;
            const badgeClass = agingBadgeClassMap[bucket] || 'period-severe';
            let daysColorClass = 'color-red';
            let tooltip = buildOverdueTooltip('critical');

            if (badgeClass === 'current') {
                daysColorClass = 'color-current';
                tooltip = buildOverdueTooltip('current');
            } else if (badgeClass === 'period-1') {
                daysColorClass = 'color-yellow';
                tooltip = buildOverdueTooltip('slightlyOverdue');
            } else if (badgeClass === 'period-2') {
                daysColorClass = 'color-orange';
                tooltip = buildOverdueTooltip('overdue');
            }

            return {
                badgeClass: badgeClass,
                label: row.aging_bucket_label || bucket,
                daysColorClass: daysColorClass,
                tooltip: tooltip
            };
        }

        // Helper to build filter query params for detail requests
        function buildDetailParams(customerId) {
            const params = new URLSearchParams({
                customer_id: customerId,
                fiscal_year_id: $('#fiscal_year_id').val(),
                as_of_date: $('#default_indicator').val() === '1' ? $('input[name="as_of_date"]').val() : $('#as_of_date').val(),
                aging_method: $('#aging_method').val(),
                days_per_period: $('#days_per_period').val(),
                num_periods: $('#num_periods').val(),
            });
            const costCenterValues = $('#cost_center_id').val();
            if (costCenterValues && costCenterValues.length > 0) {
                const validValues = costCenterValues.filter(val => val !== '' && val !== null);
                validValues.forEach(val => params.append('cost_center_ids[]', val));
            }
            return params;
        }

        // Format number with commas and 2 decimal places
        function formatAmount(value) {
            return parseFloat(value || 0).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }

        // Initialize a detail DataTable for a customer
        function initDetailDataTable(customerId, showCostCenter) {
            const tableId = '#detail_table_' + customerId;
            const params = buildDetailParams(customerId);

            // Build columns array
            const columns = [
                {
                    data: 'transaction_type',
                    orderable: false,
                    className: 'text-center align-middle',
                    render: function(data) {
                        const badgeClass = typeBadgeClasses[data] || 'invoice';
                        const label = typeLabels[data] || data;
                        return '<span class="type-badge ' + badgeClass + '">' + label + '</span>';
                    }
                },
                {
                    data: 'reference',
                    orderable: false,
                    className: 'text-center align-middle',
                    render: function(data, type, row) {
                        if (row.transaction_url) {
                            return '<a href="' + row.transaction_url + '" class="link" target="_blank">' + data + '</a>';
                        }
                        return data;
                    }
                },
                {
                    data: 'transaction_date',
                    orderable: false,
                    className: 'text-center align-middle',
                    render: function(data) {
                        return data ? data.substring(0, 10) : '';
                    }
                },
                {
                    data: 'transaction_due_date',
                    orderable: false,
                    className: 'text-center align-middle',
                    render: function(data, type, row) {
                        if (row.transaction_type === 'invoice_return') {
                            return '-';
                        }
                        return data ? data.substring(0, 10) : '';
                    }
                },
                {
                    data: 'amount',
                    orderable: false,
                    className: 'text-right align-middle',
                    render: function(data) {
                        const cls = parseFloat(data) < 0 ? 'amount-negative' : '';
                        return '<span class="' + cls + '">' + formatAmount(data) + '</span>';
                    }
                },
                {
                    data: 'paid_amount',
                    orderable: false,
                    className: 'text-right align-middle',
                    render: function(data) {
                        const cls = parseFloat(data) < 0 ? 'amount-negative' : '';
                        return '<span class="' + cls + '">' + formatAmount(data) + '</span>';
                    }
                },
                {
                    data: 'balance',
                    orderable: false,
                    className: 'text-right align-middle',
                    render: function(data) {
                        const val = parseFloat(data);
                        const cls = val < 0 ? 'amount-negative amount-total' : 'amount-total';
                        return '<span class="' + cls + '">' + formatAmount(data) + '</span>';
                    }
                },
                {
                    data: 'days_overdue',
                    orderable: false,
                    className: 'text-center align-middle',
                    render: function(data,type,row) {
                        if (row.transaction_type === 'invoice_return') {
                            return '-';
                        }
                        const agingMeta = resolveAgingMeta(row);
                        const days = parseInt(data);
                        if (days > 0) {
                            return '<span class="overdue-days ' + agingMeta.daysColorClass + '" title="' + agingMeta.tooltip + '">' + days + '</span>';
                        } else if (days < 0) {
                            return '<span class="overdue-days ' + agingMeta.daysColorClass + '" title="' + agingMeta.tooltip + '">' + Math.abs(days) + '</span>';
                        }
                        return '-';
                    }
                },
                {
                    data: 'aging_bucket',
                    orderable: false,
                    className: 'text-center align-middle',
                    render: function(data, type, row) {
                        const agingMeta = resolveAgingMeta(row);
                        return '<span class="aging-badge ' + agingMeta.badgeClass + '" title="' + agingMeta.tooltip + '">' + agingMeta.label + '</span>';
                    }
                }
            ];

            // Add cost center column if needed
            if (showCostCenter) {
                columns.push({
                    data: 'cost_center_name',
                    orderable: false,
                    className: 'text-center align-middle',
                    render: function(data) {
                        return data || mainCenterLabel;
                    }
                });
            }

            $(tableId).DataTable({
                processing: true,
                serverSide: true,
                searching: false,
                ordering: false,
                pageLength: 10,
                lengthMenu: [10, 25, 50],
                dom: '<"row"<"col-sm-6 detail-length-and-actions"l><"col-sm-6"f>>rtip',
                ajax: {
                    url: '{{ route('company.reports.customer-aging.details', ['subdomain' => $subdomain]) }}?' + params.toString(),
                    data: function(d) {
                        // draw, start, length are automatically added by DataTables
                        return d;
                    },
                    dataSrc: function(json) {
                        // Update footer totals from customerBalance
                        if (json.customerBalance) {
                            const totalAmount = json.customerBalance.total_amount || 0;
                            const totalPaid = json.customerBalance.total_paid || 0;
                            const netBalance = json.customerBalance.net_balance || 0;
                            $('#detail_total_amount_' + customerId).text(formatAmount(totalAmount));
                            $('#detail_total_paid_' + customerId).text(formatAmount(totalPaid));
                            $('#detail_total_balance_' + customerId).text(formatAmount(netBalance));
                        }
                        return json.data;
                    }
                },
                columns: columns,
                @if (App::isLocale('ar'))
                language: {
                    "url": "https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Arabic.json"
                },
                @endif
                initComplete: function() {
                    const exportParams = buildDetailParams(customerId).toString();
                    const basePrintUrl = @json(route('company.reports.customer-aging.print-customer', ['subdomain' => $subdomain]));
                    const printTitle = @json(__('reports::reports.customer_aging.print_customer'));
                    const $lengthCell = $(tableId + '_wrapper').find('.detail-length-and-actions');
                    $lengthCell.append(
                        $('<a>', {
                            href: basePrintUrl + '?' + exportParams,
                            target: '_blank',
                            title: printTitle,
                            style: 'margin-{{ app()->isLocale("ar") ? "right" : "left" }}:12px; color:#10b981; text-decoration:none; display:inline-flex; align-items:center; vertical-align:middle; margin-bottom: 5px'
                        }).append($('<span>', { class: 'icon-Print action-icon'}))
                    );
                }
            });
        }

        // Function to handle expand/collapse
        function initializeExpandCollapse() {
            $('#customer_aging_table tbody').off('click', '.expand-btn').on('click', '.expand-btn', function() {
                const $btn = $(this);
                const $tr = $btn.closest('tr');
                const row = agingTable.row($tr);
                const rowData = row.data();
                
                if (!rowData) return;
                
                const customerId = rowData.customer_id;
                
                // Check if details row already exists
                const $existingDetailRow = $tr.next('.detail-row[data-customer-id="' + customerId + '"]');
                
                if ($existingDetailRow.length > 0) {
                    // Collapse: destroy DataTable instance and remove the row
                    const detailTable = $('#detail_table_' + customerId);
                    if ($.fn.DataTable.isDataTable(detailTable)) {
                        detailTable.DataTable().destroy();
                    }
                    $existingDetailRow.remove();
                    $btn.text('+').removeClass('collapsed');
                } else {
                    // Expand - Load HTML skeleton via AJAX, then initialize DataTable
                    $btn.text('').addClass('loading').append('<span class="spinner"></span>');
                    
                    const params = buildDetailParams(customerId);
                    
                    $.ajax({
                        url: '{{ route('company.reports.customer-aging.details', ['subdomain' => $subdomain]) }}?' + params.toString(),
                        method: 'GET',
                        success: function(response) {
                            if (response.success && response.html) {
                                const $detailRow = $(response.html);
                                $tr.after($detailRow);
                                $btn.text('−').removeClass('loading').addClass('collapsed');

                                // Initialize DataTable on the detail row
                                initDetailDataTable(customerId, response.showCostCenter);
                            } else {
                                alert('{{ __('reports::reports.customer_aging.failed_to_load') }}');
                                $btn.text('+').removeClass('loading');
                            }
                        },
                        error: function() {
                            alert('{{ __('reports::reports.customer_aging.error_loading') }}');
                            $btn.text('+').removeClass('loading');
                        }
                    });
                }
            });
        }
        
        // Initial call
        initializeExpandCollapse();
        @endif
    });
</script>
@endsection