@extends('layouts.state')

@section('title', 'State Dashboard')

@push('styles')
<style>
    .stats-slider-wrapper { position: relative; }
    .stats-slider { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
    .stats-slider::-webkit-scrollbar { height: 8px; }
    .stats-slider::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 8px; }
    .stats-slide-item { scroll-snap-align: start; flex: 0 0 auto; width: 220px; }
    .stats-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
    .stats-nav-btn.prev { left: -8px; }
    .stats-nav-btn.next { right: -8px; }
    @media (min-width: 1400px) { .stats-slide-item { width: 240px; } }
    @media (max-width: 576px) { .stats-slide-item { width: 72%; } }
    .card-phoenix { background: var(--phoenix-primary-subtle, #f2f6ff); border: 0; }
    .text-ellipsis-1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .opacity-0-5 { opacity: .5; }
    .opacity-1 { opacity: 1; }
    .transition-opacity { transition: opacity .2s ease; }
    .pointer-events-none { pointer-events: none; }
</style>
@endpush

@php
    $summary = [
        [ 'label' => 'Athletes',        'count' => $members->athletes_all ?? 0,       'today' => $members->athletes_today ?? 0,         'icon' => 'fa-person-running', 'color' => 'primary' ],
        [ 'label' => 'Coach',           'count' => $members->coach_all ?? 0,          'today' => $members->coach_today ?? 0,             'icon' => 'fa-user-graduate', 'color' => 'info' ],
        [ 'label' => 'Referee',         'count' => $members->referee_all ?? 0,        'today' => $members->referee_today ?? 0,           'icon' => 'fa-award', 'color' => 'success' ],
        [ 'label' => 'Doctor',          'count' => $members->doctor_all ?? 0,         'today' => $members->doctor_today ?? 0,            'icon' => 'fa-user-md', 'color' => 'danger' ],
        [ 'label' => 'Physiotherapist', 'count' => $members->physiotherapist_all ?? 0,'today' => $members->physiotherapist_today ?? 0,    'icon' => 'fa-dumbbell', 'color' => 'secondary' ],
        [ 'label' => 'Manager',         'count' => $members->manager_all ?? 0,        'today' => $members->manager_today ?? 0,           'icon' => 'fa-user-tie', 'color' => 'dark' ],
        [ 'label' => 'Media',           'count' => $members->media_all ?? 0,          'today' => $members->media_today ?? 0,             'icon' => 'fa-bullhorn', 'color' => 'primary' ],
        [ 'label' => 'Fan',             'count' => $members->fan_all ?? 0,            'today' => $members->fan_today ?? 0,               'icon' => 'fa-heart', 'color' => 'info' ],
        [ 'label' => 'Official',        'count' => $members->official_all ?? 0,       'today' => $members->official_today ?? 0,           'icon' => 'fa-clipboard-check', 'color' => 'warning' ],
        [ 'label' => 'Other',           'count' => $members->other_all ?? 0,          'today' => $members->other_today ?? 0,             'icon' => 'fa-users', 'color' => 'secondary' ],
    ];
@endphp

@section('content')
<div class="mb-3">
    <div class="stats-slider-wrapper">
    <button class="btn btn-sm btn-outline-primary shadow stats-nav-btn prev opacity-0-5 transition-opacity pointer-events-none" id="statsPrev">
            <i class="fas fa-chevron-left"></i>
        </button>
        <div class="stats-slider" id="statsSlider" aria-label="Profile statistics carousel">
            @foreach($summary as $card)
            <div class="stats-slide-item" id="card_block_{{ $loop->index }}">
                <div class="card card-phoenix h-100 shadow-sm rounded-3">
                    <div class="card-body p-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="me-2">
                                <div class="text-body-secondary fw-semibold text-ellipsis-1">{{ $card['label'] }}</div>
                                <div class="fs-2 text-body-emphasis">{{ $card['count'] }}</div>
                                <div class=" text-muted" style="font-size: 0.875rem;">
                                    <span class="text-{{ ($card['today'] ?? 0) > 0 ? 'success' : 'danger' }} fw-bold">{{ $card['today'] }}</span>
                                    today
                                </div>
                            </div>
                            <div class="rounded-circle d-flex align-items-center justify-content-center text-white bg-{{ $card['color'] }}" style="width:40px; height:40px;">
                                <span class="fa {{ $card['icon'] }} fa-lg"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        <button class="btn btn-sm btn-outline-primary shadow stats-nav-btn next opacity-1 transition-opacity" id="statsNext">
            <i class="fas fa-chevron-right"></i>
        </button>
    </div>
</div>

<div class="row g-3">
   <!-- <div class="col-xl-8">
        <div class="card h-100">
            <div class="card-header bg-white border-bottom-0 pb-2 d-flex justify-content-between align-items-center">
                <span class="">Pending top 10 applications (State)</span>
                <a href="" class="btn btn-primary btn-sm">All-Applications</a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive scrollbar">
                 
                    <div class="phoenix-table-sticky-wrapper" style="position:relative; max-height:calc(100vh - 156px); overflow:auto;">
                        <table class="table table-sm fs-9 mb-0 text-center">
                            <thead style="position:sticky; top:0; z-index:2; background:#fff;">
                                <tr>
                                     <th class="sort border-top border-translucent ps-3" >#</th>
                                <th class="sort border-top border-translucent">Application ID</th>
                                <th class="sort border-top border-translucent">Name</th>
                                <th class="sort border-top border-translucent">Profile</th>
                                <th class="sort border-top border-translucent">State</th>
                                <th class="sort border-top border-translucent">District</th>
                                <th class="sort bordertop border-translucent pe-3">Action</th>
                                </tr>
                            </thead>
                            <tbody id="dashAllApplicationsTbody" class="">
                                
                            </tbody>
                        </table>
                    </div>
                </div>


                
            </div>
        </div>
    </div>-->
    <div class="col-xl-4">
        <div class="card h-100">
            <div class="card-header bg-white border-bottom-0 pb-2 d-flex justify-content-between align-items-center">
                <span class="fw-semibold">Profile Ratio</span>
                <div>
                    <button class="btn btn-link btn-sm p-0" id="stateProfileRatioRefresh"><span class="fa fa-sync-alt"></span></button>
                    <button class="btn btn-link btn-sm p-0"><span class="fa fa-ellipsis-v"></span></button>
                </div>
            </div>
            <div class="card-body d-flex flex-column align-items-center justify-content-center" id="doughnutRoundedChart">
                <div class="position-relative w-100" style="height:220px;">
                    <canvas id="profileRatioChart" width="220" height="220"></canvas>
                    <div class="position-absolute top-50 start-50 translate-middle text-center">
                        <span class="fw-bold fs-4" id="profileRatioTotal"></span>
                        <div class="fs-10 text-muted">Total Profiles</div>
                    </div>
                </div>
                <div class="mt-3 w-100" id="profileRatioLegend">
                    <!-- Legend will be rendered by JS -->
                </div>
            </div>
               
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('vendors/chart/chart.umd.js') }}"></script>
<script>
    window.chart_data = @json($chart_data ?? []);
    window.state_dashboard_mode = true;
    window.state_pending_endpoint = '{{ url('/state/dashAllApplications') }}';
</script>
@endpush

@push('scripts')
<script>
    (function(){
        const slider = document.getElementById('statsSlider');
        const prev = document.getElementById('statsPrev');
        const next = document.getElementById('statsNext');
        if(!slider || !prev || !next) return;
        const updateNav = () => {
            const atStart = slider.scrollLeft <= 0;
            const atEnd = Math.ceil(slider.scrollLeft + slider.clientWidth) >= slider.scrollWidth;
            prev.classList.toggle('pointer-events-none', atStart);
            prev.classList.toggle('opacity-0-5', atStart);
            next.classList.toggle('pointer-events-none', atEnd);
            next.classList.toggle('opacity-0-5', atEnd);
        };
        const scrollByAmount = () => Math.max(240, Math.round(slider.clientWidth * 0.8));
        prev.addEventListener('click', () => slider.scrollBy({ left: -scrollByAmount(), behavior: 'smooth' }));
        next.addEventListener('click', () => slider.scrollBy({ left: scrollByAmount(), behavior: 'smooth' }));
        slider.addEventListener('scroll', updateNav, { passive: true });
        window.addEventListener('resize', updateNav);
        setTimeout(updateNav, 0);
    })();
</script>
<script src="/js/pages/state/dashboard_state_port.js?v={{ time() }}"></script>
@endpush