@extends('layouts.site')

@section('menu')
    @include('sites.admin.menu_admin')
@endsection

@section('title', 'Panel Administratora')

@php
    $stats = $dashboardStats ?? [];
    $sourceReady = (bool) ($stats['source_ready'] ?? false);
    $errorMessage = (string) ($stats['error'] ?? '');

    $totalDb = (int) ($stats['total_db'] ?? 0);
    $activeDb = (int) ($stats['active_db'] ?? 0);
    $proBonoDb = (int) ($stats['pro_bono_db'] ?? 0);
    $inactiveDb = max($totalDb - $activeDb, 0);

    $activePercent = $totalDb > 0 ? round(($activeDb / $totalDb) * 100, 1) : 0.0;
    $proBonoPercent = $totalDb > 0 ? round(($proBonoDb / $totalDb) * 100, 1) : 0.0;

    $areas = $areasStats ?? [];
    $areasReady = (bool) ($areas['source_ready'] ?? false);
    $areasError = (string) ($areas['error'] ?? '');
    $areasModeLabel = (string) ($areas['mode_label'] ?? 'Wszystkie przypisania');
    $areasTotalLinks = (int) ($areas['total_links'] ?? 0);
    $areasDistinct = (int) ($areas['distinct_areas'] ?? 0);
    $areasRows = (array) ($areas['rows'] ?? []);

    $palette = ['#2e6fa9', '#48a36f', '#f4b940', '#d96b4f', '#8a5ed0', '#3db8c2', '#bd4a8e', '#617184'];
    $areasChartTotal = 0;
    foreach ($areasRows as $row) {
        $areasChartTotal += (int) ($row['count'] ?? 0);
    }

    $areaLegend = [];
    foreach ($areasRows as $index => $row) {
        $count = (int) ($row['count'] ?? 0);
        if ($count < 1) {
            continue;
        }

        $color = $palette[$index % count($palette)];
        $percent = $areasChartTotal > 0 ? round(($count / $areasChartTotal) * 100, 2) : 0;

        $areaLegend[] = [
            'lp' => $index + 1,
            'label' => (string) ($row['label'] ?? ('Obszar ID: ' . ($row['obszar_id'] ?? '?'))),
            'count' => $count,
            'percent' => $percent,
            'color' => $color,
        ];
    }

    $donutRadius = 42;
    $donutCircumference = 2 * pi() * $donutRadius;

    $activeStroke = $donutCircumference * ($activePercent / 100);
    $proBonoStroke = $donutCircumference * ($proBonoPercent / 100);

    $areaSegmentsSvg = [];
    $currentOffsetPercent = 0.0;
    foreach ($areaLegend as $legendRow) {
        $segmentPercent = (float) $legendRow['percent'];
        if ($segmentPercent <= 0) {
            continue;
        }

        $segmentLength = $donutCircumference * ($segmentPercent / 100);
        $segmentOffset = $donutCircumference * ($currentOffsetPercent / 100);

        $areaSegmentsSvg[] = [
            'color' => (string) $legendRow['color'],
            'length' => $segmentLength,
            'offset' => $segmentOffset,
        ];

        $currentOffsetPercent += $segmentPercent;
    }
@endphp

@section('content')
<style>
    .admin-dashboard-layout {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(300px, auto));
        gap: 1rem;
    }

    .admin-dashboard-cell {
        min-height: 300px;
    }

    .admin-dashboard-widget {
        width: 96%;
        max-width: 100% !important;
        height: 96%;
    }

    .admin-dashboard-placeholder {
        height: 100%;
        border: 1px dashed #c7d3df;
        border-radius: 0.65rem;
        background: #f8fafc;
        display: grid;
        place-items: center;
        color: #7b8b9c;
        font-size: 0.93rem;
        text-align: center;
        padding: 0.8rem;
    }

    .global-dashboard-tile-icon {
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 50%;
        background: #eef4fb;
        color: #1f4f82;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .db-metric-list {
        display: grid;
        gap: 0.55rem;
    }

    .db-metric-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #e7edf3;
        border-radius: 0.55rem;
        padding: 0.45rem 0.6rem;
        background: #fafcfe;
    }

    .db-metric-label {
        color: #4f5d6b;
        font-size: 0.92rem;
    }

    .db-metric-value {
        font-weight: 700;
        color: #1f2c3a;
    }

    .donut-pair {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
    }

    .donut-card {
        text-align: center;
    }

    .dashboard-donut-svg {
        width: 130px;
        height: 130px;
        display: block;
        margin: 0 auto;
    }

    .dashboard-donut-bg {
        fill: none;
        stroke: #e8edf3;
        stroke-width: 12;
    }

    .dashboard-donut-segment {
        fill: none;
        stroke-width: 12;
        stroke-linecap: butt;
    }

    .donut-value {
        margin-top: -3.1rem;
        margin-bottom: 2.25rem;
        text-align: center;
        font-weight: 700;
        color: #1f2c3a;
        font-size: 0.9rem;
    }

    .areas-widget-layout {
        display: grid;
        grid-template-columns: 160px 1fr;
        gap: 0.7rem;
        align-items: start;
    }

    .areas-donut-wrap {
        text-align: center;
    }

    .areas-table-wrap {
        max-height: 214px;
        overflow-y: auto;
    }

    .areas-table {
        font-size: 0.8rem;
    }

    .legend-color {
        display: inline-block;
        width: 0.58rem;
        height: 0.58rem;
        border-radius: 50%;
        margin-right: 0.3rem;
        vertical-align: middle;
    }

    @media (max-width: 1400px) {
        .admin-dashboard-layout {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-template-rows: auto;
        }
    }

    @media (max-width: 768px) {
        .admin-dashboard-layout {
            grid-template-columns: 1fr;
            grid-template-rows: auto;
        }

        .areas-widget-layout {
            grid-template-columns: 1fr;
        }
    }
</style>

<div class="tab-content_2">
    <div class="row">
        <div class="col-12 admin-dashboard-layout">
            <div class="admin-dashboard-cell">
                <x-global-dashboard-tile
                    class="admin-dashboard-widget"
                    title="Organizacje App"
                    subtitle="DB aktywne i Pro bono"
                    icon="fas fa-database"
                    max-width="100%"
                >
                    @if (!$sourceReady)
                        <div class="alert alert-warning mb-0" role="alert">
                            Brak zrodla danych. {{ $errorMessage !== '' ? $errorMessage : 'Sprawdz polaczenie i tabele.' }}
                        </div>
                    @else
                        <div class="db-metric-list">
                            <div class="db-metric-item">
                                <span class="db-metric-label">DB aktywne</span>
                                <span class="db-metric-value">{{ $activeDb }}</span>
                            </div>
                            <div class="db-metric-item">
                                <span class="db-metric-label">DB Pro bono</span>
                                <span class="db-metric-value">{{ $proBonoDb }}</span>
                            </div>
                        </div>

                        <div class="donut-pair mt-3">
                            <div class="donut-card">
                                <svg viewBox="0 0 100 100" class="dashboard-donut-svg" role="img" aria-label="Aktywne DB">
                                    <circle class="dashboard-donut-bg" cx="50" cy="50" r="{{ $donutRadius }}"></circle>
                                    <circle
                                        class="dashboard-donut-segment"
                                        cx="50"
                                        cy="50"
                                        r="{{ $donutRadius }}"
                                        transform="rotate(-90 50 50)"
                                        stroke="#2e6fa9"
                                        stroke-dasharray="{{ number_format($activeStroke, 3, '.', '') }} {{ number_format(max($donutCircumference - $activeStroke, 0), 3, '.', '') }}"
                                        stroke-dashoffset="0"
                                    ></circle>
                                </svg>
                                <div class="donut-value">{{ $activePercent }}%</div>
                                <small class="text-muted">Aktywne / wszystkie</small>
                            </div>

                            <div class="donut-card">
                                <svg viewBox="0 0 100 100" class="dashboard-donut-svg" role="img" aria-label="Pro bono DB">
                                    <circle class="dashboard-donut-bg" cx="50" cy="50" r="{{ $donutRadius }}"></circle>
                                    <circle
                                        class="dashboard-donut-segment"
                                        cx="50"
                                        cy="50"
                                        r="{{ $donutRadius }}"
                                        transform="rotate(-90 50 50)"
                                        stroke="#48a36f"
                                        stroke-dasharray="{{ number_format($proBonoStroke, 3, '.', '') }} {{ number_format(max($donutCircumference - $proBonoStroke, 0), 3, '.', '') }}"
                                        stroke-dashoffset="0"
                                    ></circle>
                                </svg>
                                <div class="donut-value">{{ $proBonoPercent }}%</div>
                                <small class="text-muted">Pro bono / wszystkie</small>
                            </div>
                        </div>
                    @endif

                    <x-slot name="footer">
                        <small class="text-muted">
                            Lacznie baz: <strong>{{ $totalDb }}</strong>, nieaktywne: <strong>{{ $inactiveDb }}</strong>
                        </small>
                    </x-slot>
                </x-global-dashboard-tile>
            </div>

            <div class="admin-dashboard-cell">
                <x-global-dashboard-tile
                    class="admin-dashboard-widget"
                    title="Uzycie Obszarow"
                    subtitle="a010_organizacje_obszary"
                    icon="fas fa-layer-group"
                    max-width="100%"
                >
                    @if (!$areasReady)
                        <div class="alert alert-warning mb-0" role="alert">
                            Brak zrodla danych. {{ $areasError !== '' ? $areasError : 'Sprawdz polaczenie i tabele.' }}
                        </div>
                    @else
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <small class="text-muted">{{ $areasModeLabel }}</small>
                            <div class="text-right">
                                <div><small class="text-muted">Przypisania: <strong>{{ $areasTotalLinks }}</strong></small></div>
                                <div><small class="text-muted">Obszary uzyte: <strong>{{ $areasDistinct }}</strong></small></div>
                            </div>
                        </div>

                        <div class="areas-widget-layout">
                            <div class="areas-donut-wrap">
                                <svg viewBox="0 0 100 100" class="dashboard-donut-svg" role="img" aria-label="Uzycie obszarow">
                                    <circle class="dashboard-donut-bg" cx="50" cy="50" r="{{ $donutRadius }}"></circle>
                                    @foreach($areaSegmentsSvg as $segment)
                                        <circle
                                            class="dashboard-donut-segment"
                                            cx="50"
                                            cy="50"
                                            r="{{ $donutRadius }}"
                                            transform="rotate(-90 50 50)"
                                            stroke="{{ $segment['color'] }}"
                                            stroke-dasharray="{{ number_format($segment['length'], 3, '.', '') }} {{ number_format(max($donutCircumference - $segment['length'], 0), 3, '.', '') }}"
                                            stroke-dashoffset="{{ number_format(-$segment['offset'], 3, '.', '') }}"
                                        ></circle>
                                    @endforeach
                                </svg>
                                <div class="donut-value">{{ $areasChartTotal }}</div>
                                <small class="text-muted">Suma pokazanych przypisan</small>
                            </div>

                            <div class="areas-table-wrap">
                                <table class="table table-sm table-bordered mb-0 areas-table">
                                    <thead>
                                        <tr>
                                            <th class="text-center" style="width: 2.2rem;">Lp</th>
                                            <th>Obszar</th>
                                            <th class="text-center" style="width: 4.2rem;">Ilosc</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($areaLegend as $row)
                                            <tr>
                                                <td class="text-center">{{ $row['lp'] }}</td>
                                                <td>
                                                    <span class="legend-color" style="background-color: {{ $row['color'] }};"></span>
                                                    {{ $row['label'] }}
                                                </td>
                                                <td class="text-center">{{ $row['count'] }}</td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="3" class="text-center text-muted">Brak danych do wyswietlenia.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    @endif

                    <x-slot name="footer">
                        <small class="text-muted">Widok pokazuje do 8 najczesciej przypisywanych obszarow.</small>
                    </x-slot>
                </x-global-dashboard-tile>
            </div>

            <div class="admin-dashboard-cell">
                <div class="admin-dashboard-placeholder">Pole 3<br>miejsce na kolejny widget</div>
            </div>

            <div class="admin-dashboard-cell">
                <div class="admin-dashboard-placeholder">Pole 4<br>miejsce na kolejny widget</div>
            </div>

            <div class="admin-dashboard-cell">
                <div class="admin-dashboard-placeholder">Pole 5<br>miejsce na kolejny widget</div>
            </div>

            <div class="admin-dashboard-cell">
                <div class="admin-dashboard-placeholder">Pole 6<br>miejsce na kolejny widget</div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('navbar')
    <i class="fas fa-chevron-right separator"></i>
    <span class="navbar_navigate" title="Aktywna Strona">
        ADM - Panel Administratora Lokalnego
    </span>
@endsection