@php $exdefData = $exdefData ?? []; @endphp

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


<div class="container-fluid">

    <canvas id="exdefDataCanvas" class="d-none"
        data-chart='@json($exdefData)'>
    </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' => 'exdef_type_filter', 'mode' => 'group'])
            <input type="hidden" name="targetId" id="exdef_type_filter" 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">Grade – Subject Overview</p>
                <h5 class="mb-0">Excess and Deficiency Report</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="exdef_gradeLevel" 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="ellipsisMenuExcess" data-bs-toggle="dropdown" aria-expanded="false">
                                &hellip;
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end p-2" aria-labelledby="ellipsisMenuExcess">
                                <li>
                                    <button id="toggleExdefBtn" class="btn btn-primary btn-sm d-flex align-items-center w-100">
                                        <span id="toggleExdefIcon">
                                            <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="toggleExdefText" 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="downloadChartExdef">
                                        <span class="material-icons-round me-2">download</span> Download
                                    </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 --}}

                <div class="stats-grid">
                        <!-- Total Excess -->
                        <div class="stat-card-ratio green">
                            <div class="stat-content">
                                <div class="stat-label">Total Excess</div>
                                <div class="stat-value" id="totalExcess">0</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="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                            </svg>
                        </div>

                        <!-- Total Deficiency -->
                        <div class="stat-card-ratio red">
                            <div class="stat-content">
                                <div class="stat-label">Total Deficiency</div>
                                <div class="stat-value" id="totalDeficiency">0</div>
                            </div>
                            <svg class="stat-icon red" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="transform: scaleY(-1) ;">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                           
                            </svg>
                        </div>

                        <!-- Total Learning Areas -->
                        <div class="stat-card-ratio blue">
                            <div class="stat-content">
                                <div class="stat-label">Total Learning Area</div>
                                <div class="stat-value" id="criticalAreas">0</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>

                        <!-- Areas with No Deficiency -->
                        <div class="stat-card-ratio yellow">
                            <div class="stat-content">
                                <div class="stat-label">Areas with No Deficiency</div>
                                <div class="stat-value" id="netBalance">0</div>
                            </div>
                                <svg xmlns="http://www.w3.org/2000/svg" 
                                    fill="none" 
                                    viewBox="0 0 24 24" 
                                    stroke="#FFE00F" 
                                    stroke-width="2.5" 
                                    width="36" 
                                    height="36" 
                                    class="stat-icon yellow">
                                <circle cx="12" cy="12" r="9" />
                                <path stroke-linecap="round" stroke-linejoin="round" d="M8 12l3 3 5-5" />
                                </svg>

                               

                        </div>
                    </div>


                {{-- Chart or Table View --}}
                <div class="chart-or-table">
                    <div id="exdefChartContainer" 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 class="chart-wrapper">
                                <canvas id="exdefChart"></canvas>
                            </div>

                            <div id="exdefpagination" class="pagination mt-4"></div>

                        </div>
                    </div>

                    <div id="exdefTableContainer" class="chart-wrapper position-relative hidden" style="overflow-x: hidden;" >
                        <table id="exdefTable" class="stat-table table table-striped table-bordered"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<style>

        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            margin: 10px 10px 0 10px;
        }
        .stat-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 10px;
            border-radius: 10px;
            text-align: center;
        }
        .stat-card h3 {
            margin: 0 0 10px 0;
            font-size: 14px;
            opacity: 0.9;
        }
        .stat-card .value {
            font-size: 24px;
            font-weight: bold;
            margin: 0;
        }
        .page-info {
            font-weight: 600;
            color: #2c3e50;
            font-size: 16px;
            padding: 0 20px;
        }
        .chart-title {
            text-align: center;
            color: #2c3e50;
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
        }
    </style>