@extends('layout.layout')
@section('content')
<form id ="visualReportForm" method="POST" action="{{ route('generate.visual.report') }}" onsubmit="return false;">
    @csrf
<div class="row mx-2 mb-3"> <!-- Main Container -->
    <div class="container-fluid py-0 ">
        <div class="col-md-16 mt-0"> <!-- Filter Section -->
            <div class=" mb-1 g-1">
                    <!-- Skeleton Loading for Filters - visible on load -->
                    <div id="filterSkeleton" class="filter-skeleton ">
                        <div class="row mb-1 g-1">
                            <div class="col-md-4">
                                <div class="skeleton-item"></div>
                            </div>
                            <div class="col-md-4">
                                <div class="skeleton-item"></div>
                            </div>
                            <div class="col-md-4">
                                <div class="skeleton-item"></div>
                            </div>
                        </div>
                        <div class="row mb-1 g-1">
                            <div class="col-md-3">
                                <div class="skeleton-item"></div>
                            </div>
                            <div class="col-md-3">
                                <div class="skeleton-item"></div>
                            </div>
                            <div class="col-md-3">
                                <div class="skeleton-item"></div>
                            </div>
                            <div class="col-md-3">
                                <div class="skeleton-item"></div>
                            </div>
                        </div>
                        
                        <!-- Skeleton for chart area -->
                        <div id="chartSkeleton" class="card mt-0 chart-card-container">
                   <div class="card-body d-flex flex-column justify-content-center align-items-center" style="min-height: 400px;">
                                <div role="status" class="w-100 p-4">
                                    <!-- Title skeleton -->
                                    <div class="skeleton-title mb-4"></div>
                                    <!-- Subtitle skeleton -->
                                    <div class="skeleton-subtitle mb-5"></div>
                                    <!-- Animated Bar Chart skeleton -->
                                    <div class="skeleton-chart-container">
                                        <div class="skeleton-chart" style="display: flex; align-items: flex-end; justify-content: space-around; height: 280px; gap: 16px; padding: 20px 0;">
                                            <div class="skeleton-chart-bar" style="animation-delay: 0s;"></div>
                                            <div class="skeleton-chart-bar" style="animation-delay: 0.1s;"></div>
                                            <div class="skeleton-chart-bar" style="animation-delay: 0.2s;"></div>
                                            <div class="skeleton-chart-bar" style="animation-delay: 0.3s;"></div>
                                            <div class="skeleton-chart-bar" style="animation-delay: 0.4s;"></div>
                                            <div class="skeleton-chart-bar" style="animation-delay: 0.5s;"></div>
                                            <div class="skeleton-chart-bar" style="animation-delay: 0.6s;"></div>
                                            <div class="skeleton-chart-bar" style="animation-delay: 0.7s;"></div>
                                        </div>
                                        <!-- X-axis labels -->
                                        <div class="skeleton-chart-labels" style="display: flex; justify-content: space-around; gap: 16px; padding: 16px 20px 0;">
                                            <div class="skeleton-chart-label"></div>
                                            <div class="skeleton-chart-label"></div>
                                            <div class="skeleton-chart-label"></div>
                                            <div class="skeleton-chart-label"></div>
                                            <div class="skeleton-chart-label"></div>
                                            <div class="skeleton-chart-label"></div>
                                            <div class="skeleton-chart-label"></div>
                                            <div class="skeleton-chart-label"></div>
                                        </div>
                                    </div>
                                    <span class="sr-only">Loading chart...</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Real Filters -->
                    <div id="realFilters" style="display: none;"> <!-- Hidden initially, shown after skeleton -->
                    <div class="row mb-1 g-1">
                        <div class="form-floating col-md-4"> <!-- Report Type Select -->
                            <select class="form-select" id="reportTypeSelect" data-element="reportType"> >
                                <option value="" selected disabled>Select Report Type</option>
                                <option value="received-lr-type-chart">Received Learning Resource Type</option>
                                <!-- <option value="ratio-of-learners-vs-lrs">Ratio of Learners vs LRs</option> -->
            
                            </select>
                            <label for="reportTypeSelect">Report Type</label>
                        </div>
                        <div class="form-floating col-md-4" id="schoolYearContainer" style="display: none;"> <!-- School Year Select -->
                            <select class="form-select" id="schoolYearSelect">
                                @foreach ($schoolYears as $schoolYear)
                                    <option value="{{ $schoolYear->id }}">
                                        {{ $schoolYear->from }} - {{ $schoolYear->to }}
                                    </option>
                                @endforeach
                            </select>
                            <label for="schoolYearSelect">School Year</label>
                        </div>
                        <div class="form-floating col-md-4" id="fromDateContainer"> <!-- From Date Select -->
                            <input type="date" class="form-control" id="fromDate" placeholder="From Date" disabled style="opacity: 0.5;">
                            <label for="fromDate">From Date</label>
                        </div>
                        <div class="form-floating col-md-4" id="toDateContainer"> <!-- To Date Select -->
                            <input type="date" class="form-control" id="toDate" placeholder="To Date" disabled style="opacity: 0.5;">
                            <label for="toDate">To Date</label>
                        </div>
                    </div>
                    <div class="row mb-1 g-1">
                        <!-- Region Select -->
                        <div class="form-floating col-md-3">
                            <div class="loading-region" style="display: none; position:absolute; z-index: 5; top:1rem; right:2rem;">
                                <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_7mtw{transform-origin:center;animation:spinner_jgYN .6s linear infinite}@keyframes spinner_jgYN{100%{transform:rotate(360deg)}}</style><path class="spinner_7mtw" d="M2,12A11.2,11.2,0,0,1,13,1.05C12.67,1,12.34,1,12,1a11,11,0,0,0,0,22c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"/></svg>
                            </div>
                            <select class="form-select" id="regionSelect" data-element="region-filter" aria-label="Choose Region" data-authority="2" disabled style="opacity: 0.5;">
                                @if ($dropdowns['regions']->count() > 1)
                                    <option value="all" selected>All Regions</option>
                                @endif

                                @foreach ($dropdowns['regions'] as $region)
                                    <option value="{{ $region->id }}">{{ $region->name }}</option>
                                @endforeach
                            </select>
                            <label for="regionSelect">Region</label>
                        </div>

                        <!-- Division Select -->
                        <div class="form-floating col-md-3">
                            <div class="loading-division" style="display: none; position:absolute; z-index: 5; top:1rem; right:2rem;">
                                <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_7mtw{transform-origin:center;animation:spinner_jgYN .6s linear infinite}@keyframes spinner_jgYN{100%{transform:rotate(360deg)}}</style><path class="spinner_7mtw" d="M2,12A11.2,11.2,0,0,1,13,1.05C12.67,1,12.34,1,12,1a11,11,0,0,0,0,22c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"/></svg>
                            </div>
                            <select class="form-select" id="divisionSelect" data-element="division-filter" aria-label="Choose Division" data-authority="3" disabled style="opacity: 0.5;">
                                @if ($dropdowns['divisions'] && $dropdowns['divisions'][0]->id === null)
                                    <!-- If the first division is "Choose Division", show it as the default option -->
                                    <option value="" selected disabled >{{ $dropdowns['divisions'][0]->name }}</option>
                                @else
                                        @if ($dropdowns['divisions']->count() > 1)
                                        <option value="all">All Divisions</option>
                                    @endif

                                    @foreach ($dropdowns['divisions'] as $division)
                                        <!-- Display each division -->
                                        <option value="{{ $division->id }}">{{ $division->name }}</option>
                                    @endforeach
                                @endif
                            </select>
                            <label for="divisionSelect">Schools Division</label>
                        </div>

                        <!-- District Select -->
                        <div class="form-floating col-md-3">
                            <div class="loading-district" style="display: none; position:absolute; z-index: 5; top:1rem; right:2rem;">
                                <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_7mtw{transform-origin:center;animation:spinner_jgYN .6s linear infinite}@keyframes spinner_jgYN{100%{transform:rotate(360deg)}}</style><path class="spinner_7mtw" d="M2,12A11.2,11.2,0,0,1,13,1.05C12.67,1,12.34,1,12,1a11,11,0,0,0,0,22c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"/></svg>
                            </div>
                            <select class="form-select" id="districtSelect" data-element="district-filter" aria-label="Choose District" data-authority="4" disabled  style="opacity: 0.5;">
                                @if ($dropdowns['districts'] && $dropdowns['districts'][0]->id === null)
                                    <!-- If the first division is "Choose Division", show it as the default option -->
                                    <option value="" selected disabled>{{ $dropdowns['districts'][0]->name }}</option>
                                @else
                                    @if ($dropdowns['districts']->count() > 1)
                                        <option value="all">All Districts</option>
                                    @endif

                                    @foreach ($dropdowns['districts'] as $district)
                                        <!-- Display each division -->
                                        <option value="{{ $district->id }}">{{ $district->name }}</option>
                                    @endforeach
                                @endif
                            </select>
                            <label for="districtSelect">District</label>
                        </div>

                        <!-- School Select -->
                        <div class="form-floating col-md-3">
                            <div class="loading-school" style="display: none; position:absolute; z-index: 5; top:1rem; right:2rem;">
                                <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_7mtw{transform-origin:center;animation:spinner_jgYN .6s linear infinite}@keyframes spinner_jgYN{100%{transform:rotate(360deg)}}</style><path class="spinner_7mtw" d="M2,12A11.2,11.2,0,0,1,13,1.05C12.67,1,12.34,1,12,1a11,11,0,0,0,0,22c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"/></svg>
                            </div>
                            <select class="form-select" id="schoolSelect" data-element="school-filter" aria-label="Choose School" data-authority="5" disabled style="opacity: 0.5;">
                                @if ($dropdowns['schools'] && $dropdowns['schools'][0]->id === null)
                                    <!-- If the first division is "Choose Division", show it as the default option -->
                                    <option value="" selected disabled>{{ $dropdowns['schools'][0]->name }}</option>
                                @else
                                    @if ($dropdowns['schools']->count() > 1)
                                        <option value="all">All Schools</option>
                                    @endif

                                    @foreach ($dropdowns['schools'] as $school)
                                        <!-- Display each division -->
                                        <option value="{{ $school->id }}">{{ $school->name }}</option>
                                    @endforeach
                                @endif
                            </select>
                            <label for="schoolSelect">School</label>
                        </div>
                        
                    </div>
            
                   <div class="card mt-0 chart-card-container">
                            <div class="card-body p-3" style="max-height: 120vh; overflow-y: auto;">
   
                            <!-- Placeholder for charts -->
                            <div id="charts-container" style="display: none; width: 100%; flex-grow: 1;">

                                <!-- Include all charts, hidden by default -->
                                <div id="received-lr-type-chart" style="display: none;">
                                    @include('pages.charts.visual-charts.received-lr-type-gradeLevelLearningArea')
                                </div>

                                <div id="ratio-of-learners-vs-lrs" style="display: none;">

                                    <div class="text-center p-5">
                                        <i class="fas fa-chart-bar fa-3x text-muted mb-3"></i>
                                        <h4 class="text-muted">Ratio of Learners vs LRs</h4>
                                        <p class="text-muted">Generate Chart button is now functional for Ratio of Learners vs LRs chart type.</p>
                                        <p class="text-muted small">School Year filter and chart generation logic activated.</p>
                                    </div>
                                </div>
                            </div>      
                        
                        <!-- Instruction Text - Horizontal Timeline -->
                            <div class="instruction-timeline instruction-timeline_animate mb-4 " style=" border-radius: 8px;" id="instructionTimeline">
                                <div class="timeline-container" style="display: flex; align-items: flex-start; gap: 30px; overflow-x: auto; padding-bottom: 8px;">
                                    <div class="timeline-item" style="flex-shrink: 0; text-align: center;">
                                        <div class="timeline-circle" style="width: 40px; height: 40px; background:  border-color: #0d6efd; border: 2px solid; color: #0d6efd; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; margin: 0 auto 8px;">1</div>
                                        <div style="font-size: 14px; color: #495057; max-width: 200px;">Select a <b>Report Type</b></div>
                                    </div>
                                    <div class="timeline-arrow" style="flex-shrink: 0; color: #ccc; align-self: center; font-size: 30px;">→</div>
                                    
                                    <div class="timeline-item" style="flex-shrink: 0; text-align: center;">
                                        <div class="timeline-circle" style="width: 40px; height: 40px; background: white;  border-color: #0d6efd; border: 2px solid; color: #0d6efd; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; margin: 0 auto 8px;">2</div>
                                        <div style="font-size: 14px; color: #495057; max-width: 200px;">Choose<br><b>Date Range / School Year</b></div>
                                    </div>
                                    <div class="timeline-arrow" style="flex-shrink: 0; color: #ccc; align-self: center; font-size: 30px;">→</div>
                                    
                                    <div class="timeline-item " style="flex-shrink: 0; text-align: center;">
                                        <div class="timeline-circle" style="width: 40px; height: 40px; background: white; border-color: #0d6efd; border: 2px solid; color: #0d6efd; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; margin: 0 auto 8px;">3</div>
                                        <div style="font-size: 14px; color: #495057; max-width: 200px;">Press <b>Generate Chart</b> button</div>
                                    </div>
                                    <div class="timeline-arrow" style="flex-shrink: 0; color: #ccc; align-self: center; font-size: 30px;">→</div>
                                    
                                    <div class="timeline-item" style="flex-shrink: 0; text-align: center;">
                                        <div class="timeline-circle" style="width: 40px; height: 40px; background: white; border-color: #0d6efd; border: 2px solid; color: #0d6efd; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; margin: 0 auto 8px;">4</div>
                                        <div style="font-size: 14px; color: #495057; max-width: 200px;">
                                            @if (session('authority_level') === 1) <!-- CENTRAL OFFICE -->
                                                Choose <b>Filters -</b><br>View Regions / Divisions / Districts / Schools 
                                            @elseif (session('authority_level') === 2) <!-- REGIONAL OFFICE -->
                                                Choose <b>Filters -</b><br>View Divisions / Districts / Schools
                                            @elseif (session('authority_level') === 3) <!-- SCHOOL DIVISION OFFICE -->
                                                Choose <b>Filters -</b><br>View Districts / Schools
                                            @elseif (session('authority_level') === 4) <!-- DISTRICT OFFICE -->
                                                Choose <b>Filters -</b><br>View Schools
                                            @elseif (session('authority_level') === 5) <!-- SCHOOL -->
                                                Choose <b>Filters -</b><br>View School Data
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Buttons Container (hidden initially, shown after generate) -->
                            <div id="buttons-container" class=" d-flex w-100 mt-2" style=" justify-content: center;">
                                <button type="button" class="generate-chart-animate btn btn-primary d-flex align-items-center " id="generateChart" disabled>
                                    <i class="fas fa-chart-bar me-2"></i>Generate Chart
                                </button>
                            </div>

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

</form>

{{-- store user information --}}
<script>
    window.userSession = {
        authorityLevel: {{ session('authority_level') ?? 1 }},
        region: "{{ session('region_id') ?? '' }}",
        division: "{{ session('division_id') ?? '' }}",
        district: "{{ session('district_id') ?? '' }}",
        school: "{{ session('station_id') ?? '' }}"
    };
</script>

{{-- Visual Reports CSS --}}
<link rel="stylesheet" href="{{ asset('assets/css/visual-reports-css/visual-reports.css') }}">

{{-- Load necessary scripts --}}
<script>
var appRoutes = {
    totalLearnersByYear: "{{ route('total.learners.by.year') }}",
    totalLr: "{{ route('total.lr.by.filter') }}",
    visualReportChartData: "{{ route('get.visual.report.chart.data') }}",
};
</script>
<script type="module" src="{{ asset('assets/js/dashboard/main.js') }}"></script>
<script type="module" src="{{ asset('assets/js/dashboardtwo.js') }}"></script>
<script type="module" src="{{ asset('assets/js/dashboard/charts/main.js') }}"></script>

<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
{{-- scripts for handling chart display logic --}}
<!-- ===============================================
     SCRIPT WITH AUTHORITY-LEVEL RESTRICTIONS
     =============================================== -->
<!-- User session data -->

{{-- Visual Reports CSS --}}
<link rel="stylesheet" href="{{ asset('assets/css/visual-reports-css/visual-reports.css') }}">

{{-- Session Data --}}
<script>
    window.userSession = {
        authorityLevel: {{ session('authority_level') ?? 1 }},
        region: "{{ session('region_id') ?? '' }}",
        division: "{{ session('division_id') ?? '' }}",
        district: "{{ session('district_id') ?? '' }}",
        school: "{{ session('station_id') ?? '' }}"
    };
    
    var appRoutes = {
        totalLearnersByYear: "{{ route('total.learners.by.year') }}",
        totalLr: "{{ route('total.lr.by.filter') }}",
        visualReportChartData: "{{ route('get.visual.report.chart.data') }}",
    };
</script>
{{-- App Initialization --}}
<script type="module" src="{{ asset('assets\js\visual-reports\app.js') }}"></script>


@endsection