@push('scripts')
{{-- script for ratio chart in dashboard --}}
<script type = "module" src="{{ asset('assets/js/dashboard/charts/ratio-lr-vs-pop.js') }}"></script>
@endpush

<div class="container-fluid">

    <canvas id="RatioLrDataCanvas" class="d-none"
        data-chart='@json($totalLrData)'>
    </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' => 'ratio_lr_vs_pop', 'mode' => 'group'])
            <input type="hidden" name="targetId" id="ratio_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">Learning Resources To Learner Ratio</p>
                <h5 class="mb-0" id="chartname-ratio-lr-vs-pop">Ratio of Learning Resources Per Grade Level</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">Learning Area:
                            <select id="ratio_lrvspop_learningArea" 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>

                    {{-- Dropdown with 3 dots button --}}
                    <div class="d-flex justify-content-end align-items-center mb-2 mt-1 position-relative" style="height: 30px;">
                        <div class="dropdown">
                            <button class="chart-ellipsis-btn" type="button" id="ellipsisMenuRatio" data-bs-toggle="dropdown" aria-expanded="false">
                                &hellip;
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end p-2" aria-labelledby="ellipsisMenuRatio">
                                <li>
                                    <button id="toggleRatioBtn" class="btn btn-primary btn-sm d-flex align-items-center w-100">
                                        <span id="toggleRatioIcon">
                                            <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="toggleRatioText" 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="downloadChartRatio">
                                        <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>

                </div>


                    <!-- Stats Cards Grid -->
                    <div class="stats-grid">
                        <!-- Total Population -->
                        <div class="stat-card-ratio green">
                            <div class="stat-content">
                                <div class="stat-label">Total Population</div>
                                <div class="stat-value" id="total-population">0</div>
                                <div class="stat-subtext" id="total-population-grade-level"><!-- learners across all grades --></div>
                            </div>
                            <svg class="stat-icon green" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                            </svg>
                        </div>

                        <!-- Total Resources -->
                        <div class="stat-card-ratio blue">
                            <div class="stat-content">
                                <div class="stat-label">Total Available Resources</div>
                                <div class="stat-value" id="total-resources">0</div>
                                <div class="stat-subtext"><!-- Grades 1-3 only --></div>
                            </div>
                            <svg class="stat-icon blue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
                            </svg>
                        </div>

                        <!-- Critical Gap -->
                        <div class="stat-card-ratio red">
                            <div class="stat-content">
                                <div class="stat-label">Critical Gap</div>
                                <div class="stat-value" id="critical-gap">0</div>
                                <div class="stat-subtext"><!-- students with 0 resources --></div>
                            </div>
                            <svg class="stat-icon red" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                            </svg>
                        </div>

                        <!-- Grades with Resources -->
                        <div class="stat-card-ratio purple">
                            <div class="stat-content">
                                <div class="stat-label">Resource Ratio</div>
                                <div class="stat-value" id="grades-with-resources">0</div>
                                <div class="stat-subtext"><!-- Best (Grades 1-3) vs 0:1 --></div>
                            </div>
                            <svg class="stat-icon purple" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                            </svg>
                        </div>
                    </div>

                {{-- Chart or Table View --}}
                <div class="chart-or-table">
                    <div id="ratioChartContainer" class="chart-wrapper position-relative" style="overflow-x: hidden;">
                        <div id="primaryContainer" style="height: 100%;">
                            <canvas id="lrChart"></canvas>
                            <div id="primary" style="width: 100%; height: 500px; margin-top: 10px" class="hidden"></div>
                        </div>
                    </div>

                    <div id="ratioTableContainer" class="hidden">
                        <table id="ratioTable" class="stat-table table table-striped table-bordered"></table>
                    </div>
                </div>

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





  <style>


        /* Stats Grid */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 16px;
            margin-bottom: 24px;
        }

        @media (min-width: 768px) {
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (min-width: 1024px) {
            .stats-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        .stat-card-ratio {
            background: white;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .stat-card-ratio.blue {
            border-left: 4px solid #3b82f6;
        }

        .stat-card-ratio.green {
            border-left: 4px solid #22c55e;
        }

        .stat-card-ratio.red {
            border-left: 4px solid #ef4444;
        }

        .stat-card-ratio.purple {
            border-left: 4px solid #a855f7;
        }

        .stat-card-ratio.yellow {
            border-left: 4px solid #FFE00F;
        }

        .stat-content {
            flex: 1;
        }

        .stat-label {
            font-size: 12px;
            font-weight: 500;
            margin-bottom: 8px;
            color: #6b7280;
        }

        .stat-value {
            font-size: 24px;
            font-weight: 700;
            line-height: 1;
            color: #1f2937;
        }

        .stat-subtext {
            font-size: 12px;
            color: #9ca3af;
            margin-top: 4px;
        }

        .stat-icon {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
        }

        .stat-icon.blue {
            color: #3b82f6;
        }

        .stat-icon.green {
            color: #22c55e;
        }

        .stat-icon.red {
            color: #ef4444;
        }

        .stat-icon.purple {
            color: #a855f7;
        }

        /* Insight Banner */
        .insight-banner {
            background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
            border-left: 4px solid #f59e0b;
            border-radius: 8px;
            padding: 5px;
            margin-bottom: 10px;
            display: flex;
            align-items: flex-start;
        }

        .insight-icon {
            width: 24px;
            height: 24px;
            color: #d97706;
            margin-right: 12px;
            flex-shrink: 0;
        }

        .insight-content h4 {
            font-weight: 600;
            color: #78350f;
            margin-bottom: 4px;
        }

        .insight-content p {
            font-size: 12px;
            color: #92400e;
            padding-bottom: 0;
        }


        /* Ratio Labels */
        .ratio-labels {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
            margin-top: 16px;
            padding: 0;
            gap: 0;
        }

        .ratio-label {
            text-align: center;
            font-size: 14px;
            font-weight: 600;
        }

        .ratio-label.green {
            color: #16a34a;
        }

        .ratio-label.red {
            color: #dc2626;
        }
    </style>