<div class="card border-0 shadow-sm h-100" style="overflow-y: auto;">
    <div class="card-body">
        <div class="accordion" id="configAccordion">

            
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#secFilters">
                        {{ __('admin/reports.section_filters') }} <span id="filterCount" class="badge bg-secondary ms-2">0</span>
                    </button>
                </h2>
                <div id="secFilters" class="accordion-collapse collapse show">
                    <div class="accordion-body">
                        <ul class="list-unstyled" id="filterList"></ul>
                        <button type="button" class="btn btn-sm btn-outline-primary" id="btnAddFilter">
                            <i class="fas fa-plus"></i> {{ __('admin/reports.add_filter_btn') }}
                        </button>
                    </div>
                </div>
            </div>

            
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#secGroupBy">
                        {{ __('admin/reports.section_group_by') }} <span id="groupByCount" class="badge bg-secondary ms-2">0</span>
                    </button>
                </h2>
                <div id="secGroupBy" class="accordion-collapse collapse">
                    <div class="accordion-body">
                        <ul class="list-unstyled" id="groupByList"></ul>
                        <button type="button" class="btn btn-sm btn-outline-primary" id="btnAddGroupBy">
                            <i class="fas fa-plus"></i> {{ __('admin/reports.add_group_by_btn') }}
                        </button>
                    </div>
                </div>
            </div>

            
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#secSort">
                        {{ __('admin/reports.section_sort') }} <span id="sortCount" class="badge bg-secondary ms-2">0</span>
                    </button>
                </h2>
                <div id="secSort" class="accordion-collapse collapse">
                    <div class="accordion-body">
                        <ul class="list-unstyled" id="sortList"></ul>
                        <button type="button" class="btn btn-sm btn-outline-primary" id="btnAddSort">
                            <i class="fas fa-plus"></i> {{ __('admin/reports.add_sort_btn') }}
                        </button>
                    </div>
                </div>
            </div>

            
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#secDisplay">
                        {{ __('admin/reports.section_display') }}
                    </button>
                </h2>
                <div id="secDisplay" class="accordion-collapse collapse">
                    <div class="accordion-body">
                        <div class="form-check"><input class="form-check-input" type="radio" name="display_type" value="table" id="dt_table" checked><label class="form-check-label" for="dt_table">Table</label></div>
                        <div class="form-check"><input class="form-check-input" type="radio" name="display_type" value="bar" id="dt_bar"><label class="form-check-label" for="dt_bar">Bar Chart</label></div>
                        <div class="form-check"><input class="form-check-input" type="radio" name="display_type" value="line" id="dt_line"><label class="form-check-label" for="dt_line">Line Chart</label></div>
                        <div class="form-check mb-2"><input class="form-check-input" type="radio" name="display_type" value="pie" id="dt_pie"><label class="form-check-label" for="dt_pie">Pie Chart</label></div>

                        <div id="chartConfig" style="display:none;">
                            <div class="mb-2">
                                <label class="form-label small">{{ __('admin/reports.field_category_column') }}</label>
                                <select id="categoryColumn" class="form-select form-select-sm"></select>
                            </div>
                            <div class="mb-2">
                                <label class="form-label small">{{ __('admin/reports.field_value_column') }}</label>
                                <select id="valueColumn" class="form-select form-select-sm"></select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#secSave">
                        {{ __('admin/reports.section_save') }}
                    </button>
                </h2>
                <div id="secSave" class="accordion-collapse collapse show">
                    <div class="accordion-body">
                        <div class="mb-2">
                            <label class="form-label small">{{ __('admin/reports.field_name') }} <span class="text-danger">*</span></label>
                            <input type="text" id="reportName" class="form-control form-control-sm" value="{{ $report->name ?? '' }}" required>
                        </div>
                        <div class="mb-2">
                            <label class="form-label small">{{ __('admin/reports.field_description') }}</label>
                            <textarea id="reportDescription" class="form-control form-control-sm" rows="2">{{ $report->description ?? '' }}</textarea>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="reportIsPublic" {{ ($report->is_public ?? false) ? 'checked' : '' }}>
                            <label class="form-check-label small" for="reportIsPublic">{{ __('admin/reports.field_is_public') }}</label>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
