@extends('layout.layout')
@section('content')
    <!-- TODO: <script src="{{ asset('assets/js/announcements.js') }}"></script> -->

    <div class="container-fluid">
        {{-- FILTERING MECHANISM AND FIGURES --}}
        <div class="row g-1">
            <div class="col-md">
                <div class="row g-1 ">
                    <div class="form-floating">
                            <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">
                        <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="dashboardRegionSelect" aria-label="Choose Region" data-authority="2">
                            @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="dashboardRegionSelect">Region</label>
                    </div>

                    <div class="form-floating">
                        <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="dashboardDivisionSelect" aria-label="Choose Division" data-authority="3">
                            @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="dashboardDivisionSelect">Schools Division</label>
                    </div>

                    <div class="form-floating">
                        <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="dashboardDistrictSelect" aria-label="Choose District" data-authority="4">
                            @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="dashboardDistrictSelect">District</label>
                    </div>

                    <div class="form-floating">
                        <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="dashboardSchoolSelect" aria-label="Choose School" data-authority="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="dashboardSchoolSelect">School</label>
                    </div>
                </div>
            </div>


            {{-- LEARNERS QTY --}}
            <div class="col-md">
                @include('pages.charts.total_learners')
            </div>

            {{-- LEARNING RESOURCES QTY --}}
            <div class="col-md">
                @include('pages.charts.total_learning_resources')
            </div>
        </div>

        {{-- DASHBOARD --}}
        <div class="row mx-auto my-1">
            <div class="cstm-card ">
                @include('pages.charts.dashboard-charts.main-chart')
            </div>
        </div>

        {{-- Static charts section --}}
        <div class="row mb-1 g-1" style="display: flex; align-items: stretch;">
            <div class="col-md-6" style="display: flex;">
                <div class="cstm-card p-1" style="flex: 1; display: flex; flex-direction: column;">
                    @include('pages.charts.dashboard-charts.staticChart-ratio')
                </div>
            </div>
            <div class="col-md-6" style="display: flex;">
                <div class="cstm-card p-1" style="flex: 1; display: flex; flex-direction: column;">
                    @include('pages.charts.dashboard-charts.staticChart-LrStatus')
                </div>
            </div>
        </div>




        {{-- SCHOOL PROFILE AND TRANSACTION SECTION --}}
        <div class="row g-1 mb-4">

            <!-- School Profile -->
            <div class="col-lg-8 col-md-6 mb-md-0 mb-1">
                <div class="card">
                    <div class="card-header pb-0">
                        <div class="row">
                            <div class="col-lg-6 col-7">
                                @if (session('authority_level') === 1)
                                    <h4 class="mb-4">Regional Offices</h4>
                                @elseif (session('authority_level') === 2)
                                    <h4 class="mb-4">Division Offices</h4>
                                @elseif (session('authority_level') === 3)
                                    <h4 class="mb-4">Schools</h4>
                                @elseif (session('authority_level') === 4)
                                    <h4 class="mb-4">Users</h4>
                                @elseif (session('authority_level') === 5)
                                    <h4 class="mb-4">Users</h4>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="card-body px-2 pb-2">
                        <div style="position: relative;">
                            <!-- Overlay -->
                            <div style="
                                position: absolute;
                                top: 0;
                                left: 0;
                                right: 0;
                                bottom: 0;
                                background: rgba(255, 255, 255, 0.85);
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                border-radius: 4px;
                                z-index: 10;
                                backdrop-filter: blur(1px);
                            ">
                                    <div style="font-weight: 600; color: #666;">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-hourglass-split" viewBox="0 0 16 16">
                                            <path d="M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48zm1 0v3.17c2.134.181 3 1.48 3 1.48a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351z"/>
                                        </svg>
                                    </div>
                                    <div style="font-weight: 600; color: #666; font-size: 16px;">Temporarily Unavailable</div>
                                    <div style="font-size: 13px; color: #999; margin-top: 4px;">This section is being updated</div>
                            </div>

                            <div class="table-responsive">
                                <table id="user-profile-table" class="table table-bordered nowrap hover" style="width: 100%;">
                                    <thead>
                                        <tr>
                                            @if (session('authority_level') === 1)
                                                <th>Region Name</th>
                                                <th>Users</th>
                                                <th>%Inventory</th>
                                            @elseif (session('authority_level') === 2)
                                                <th>Division Name</th>
                                                <th>Users</th>
                                                <th>%Inventory</th>
                                            @elseif (session('authority_level') === 3)
                                                <th>School Name</th>
                                                <th>District Name</th>
                                                <th>Users</th>
                                                <th>%Inventory</th>
                                            @elseif (session('authority_level') === 4)
                                                <th>School Name</th>
                                                <th>Users</th>
                                                <th>%Inventory</th>
                                            @else
                                                <th>Username</th>
                                                <th>Users</th>
                                                <!-- <th>%Inventory</th> -->
                                            @endif
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <!-- User Activity -->
            <div class="col-lg-4 col-md-6">
                <div class="card h-100">
                    <div class="card-header pb-0">
                        <div class="row">
                            <div class="col-lg-6 col-7">
                                <h4 class="mb-4">User Activity</h4>
                            </div>
                        </div>
                    </div>

                    <div class="card-body p-3">

                        <!-- Overlay -->
                        <div style="
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            background: rgba(255, 255, 255, 0.85);
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            border-radius: 4px;
                            z-index: 10;
                            backdrop-filter: blur(1px);
                        ">
                                <div style="font-weight: 600; color: #666;">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-hourglass-split" viewBox="0 0 16 16">
                                        <path d="M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48zm1 0v3.17c2.134.181 3 1.48 3 1.48a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351z"/>
                                    </svg>
                                </div>
                                <div style="font-weight: 600; color: #666; font-size: 16px;">Temporarily Unavailable</div>
                                <div style="font-size: 13px; color: #999; margin-top: 4px;">This section is being updated</div>
                        </div>

                        <div class="timeline timeline-one-side" style="max-height: 350px; overflow-y: auto;">
                            {{--
                                @foreach ($transactions as $transaction)
                                    @php
                                        $username = $transaction->user_name ?? 'Unknown';
                                        $hash = crc32($username); // Generate a unique hash number
                                        $color = sprintf('#%06X', $hash & 0xFFFFFF); // Convert to a 6-digit hex color
                                    @endphp
                                    <div class="timeline-block mb-3">
                                        <span class="timeline-step">
                                            <i class="material-symbols-rounded text-success text-gradient">{{ $transaction->icon }}</i>
                                        </span>
                                        <div class="timeline-content">
                                            <h6 class="text-dark text-sm font-weight-bold mb-0">
                                                {{ $transaction->trans_remarks }}
                                            </h6>
                                            <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">
                                                <span style="color: {{ $color }} !important;">{{ $username }}</span> |
                                                {{ \Carbon\Carbon::parse($transaction->trans_date)->setTimezone('Asia/Manila')->format('d M h:i A') }}

                                            </p>
                                        </div>
                                    </div>
                                @endforeach
                            --}}
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <style>
        .timeline {
            max-height: 1000px;
            overflow-y: auto;
        }
        th, td {
            text-align: left;
            font-size: medium;
            padding-left: 30px;
            /* border-bottom: 1px solid #ddd; */
        }
        .skeleton-number {
            height: 24px;
            width: 120px;
            margin: 10px auto;
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: loading 1.5s infinite;
            border-radius: 4px;
        }

        @keyframes loading {
            0% {
                background-position: 200% 0;
            }
            100% {
                background-position: -200% 0;
            }
        }
    </style>


    @include('pages.footer')
    {{-- define routes 1st before sending to dashboardtwo.js --}}
    <script>
        var appRoutes = {
            totalLearnersByYear: "{{ route('total.learners.by.year') }}",
            totalLr: "{{ route('total.lr.by.filter') }}",
        };
    </script>
    {{-- script for dashboard --}}
    <script type="module" src="{{ asset('assets/js/dashboard/main.js') }}"></script>
    <!-- <script src="{{ asset('assets/js/dashboardtwo.js') }}"></script> -->
   <script>
        $(document).ready(function() {
            $('#search').on('keyup', function() {
                let query = $(this).val();

                if (query.length > 1) { // start searching after 2 chars
                    $.ajax({
                        url: "{{ route('search') }}",
                        type: 'GET',
                        data: { query: query },

                        success: function(data) {
                            $('#suggestions').empty();
                            console.log(data)
                            if (data.length > 0) {
                                data.forEach(item => {
                                    $('#suggestions').append(`
                                        <div class="list-group-item list-group-item-action">
                                            ${item.station_name}
                                        </div>
                                    `);
                                });
                            } else {
                                $('#suggestions').html('<div class="list-group-item">No results found</div>');
                            }
                        }
                    });

                } else {
                    $('#suggestions').empty();
                }
            });

            // hide suggestions when clicking outside
            $(document).click(function(e) {
                if (!$(e.target).closest('#search, #suggestions').length) {
                    $('#suggestions').empty();
                }
            });
        });
    </script>
@endsection