@push('scripts')
<script src="{{ asset('assets/js/dashboard/charts/availableLr-vs-population.js') }}"></script>
@endpush

<div class="container-fluid">

    <canvas id="availableSubjectCanvas" class="d-none"
        data-chart='[]'>
    </canvas>

    <!-- Top: Resource Type Dropdown -->
    <div class="row">
        <div class="col-md-5 d-flex justify-content-start">
            @include('components.lr-type-dropdown-selection',
            ['targetId' => 'avail_lr_vs_pop', 'mode' => 'group'])
            <input type="hidden" name="targetId" id="avail_lr_vs_pop" value="ART">
        </div>
        <!-- Text aligned to the right (PUT MARGIN TOP 1) -->
        <div class="col-md-7 d-flex justify-content-end text-end mt-1">
            <div>
                <p class="text-sm mb-0 text-capitalize">Subject Level LR vs Population Availability</p>
                <h5 class="mb-0" id ="availableLRPopulationPerSubjName">Available Learning Resources vs Population Per Subject</h5>
            </div>
        </div>
    </div>

    <!-- Bottom: Chart & Controls -->
    <div class="row mt-3">
        <div class="col-md-12">
            <div class="chart-container">

                <!-- Controls -->
                <div class="d-flex justify-content-between align-items-center mb-2 mt-1 position-relative" style="height: 30px;">
                    <!-- Grade dropdown -->
                    <div class="grade-wrapper">
                        <label class="mb-0 small me-2">Grade Level:
                            <select id="avail_lr_vs_pop_gradeSelect" class="form-select form-select-sm d-inline-block w-auto mb-0"></select>
                            <div id="gradeError" style="color:red; display:none;"></div>
                        </label>
                    </div>

                    <!-- Ellipsis dropdown -->
                    <div class="dropdown">
                        <button class="chart-ellipsis-btn" type="button" id="ellipsisMenuAvailableSubj" data-bs-toggle="dropdown" aria-expanded="false">
                            &hellip;
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end p-2" aria-labelledby="ellipsisMenuAvailableSubj">
                            <li>
                                <button id="avail_lr_vs_pop_toggleBtn" class="btn btn-primary btn-sm d-flex align-items-center w-100">
                                    <span id="avail_lr_vs_pop_toggleIcon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                            viewBox="0 0 24 24">
                                            <path d="M3 3v18h18v-2H5V3H3zm16.59 3L13 12.59l-3-3L5 14l1.41 1.41L10 11.83l3 3L21 7.41 19.59 6z"/>
                                        </svg>
                                    </span>
                                    <span id="avail_lr_vs_pop_toggleText" class="ms-2">Table View</span>
                                </button>
                            </li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <a class="dropdown-item d-flex align-items-center" href="#" id="avail_lr_vs_pop_downloadDataPerSubject">
                                    <span class="material-icons-round me-2">download</span> Export to Excel
                                </a>
                            </li>
                            <!-- <li>
                                <a class="dropdown-item d-flex align-items-center" href="#" id="fullscreenChart">
                                    <span class="material-icons-round me-2">fullscreen</span> Fullscreen
                                </a>
                            </li> -->
                        </ul>
                    </div>

                </div>

                <!-- Chart or Table View -->
                <div class="chart-or-table">
                    <div id="avail_lr_vs_pop_statChartContainer" class="chart-wrapper position-relative" style="overflow-x: hidden;">
                        <canvas id="avail_lr_vs_pop_subjectChart"></canvas>
                        <!-- Pagination -->
                        <div class="pagination mt-3" id="avail_lr_vs_pop_pagination"></div>
                    </div>

                    <div id="avail_lr_vs_pop_statTableContainer" class="hidden ">
                        <div id="avail_lr_vs_pop_miniStatTable" class="table-mini-container"></div>

                        <table id="avail_lr_vs_pop_statTable" class="stat-table table table-striped table-bordered"></table>
                    </div>
                </div>

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