{{! report/adeptus_insights/templates/builder.mustache }}
<div class="container py-5 animate__animated animate__fadeIn">
    <div class="text-center mb-4">
        <h2 class="fw-bold">Custom Report Builder</h2>
        <p class="text-muted">Select filters and build your own report from scratch</p>
    </div>

    <form id="builder-form">
        <div class="card mb-4">
            <div class="card-body d-flex flex-wrap gap-3">
                <div class="flex-fill">
                    <label for="builder-category">Category</label>
                    <select id="builder-category" class="form-control">
                        <option value="">All Categories</option>
                        {{#categories}}
                        <option value="{{id}}">{{name}}</option>
                        {{/categories}}
                    </select>
                </div>
                <div class="flex-fill">
                    <label for="builder-courses">Courses</label>
                    <select id="builder-courses" class="form-control" multiple>
                        {{#courses}}
                        <option value="{{id}}" data-category="{{categoryid}}">{{fullname}}</option>
                        {{/courses}}
                    </select>
                </div>
                <div class="flex-fill">
                    <label for="builder-students">Students</label>
                    <select id="builder-students" class="form-control" multiple>
                        {{#students}}
                        <option value="{{id}}" data-courseids="{{courseids_csv}}">{{fullname}}</option>
                        {{/students}}
                    </select>
                </div>
            </div>
        </div>

        <div class="text-center">
            <button type="button" id="preview-button" class="btn btn-primary">Preview Report</button>
        </div>
    </form>

    <div id="builder-report-preview" class="mt-5 d-none">
        <h4 class="fw-bold">Report Preview</h4>
        <div id="builder-report-table"></div>
    </div>
</div>

<script>
    require(["report_adeptus_insights/builder"], function(builder) {
        builder.init();
    });
</script>
