@extends('layouts.site')

@section('title', 'ODO - Dashboard')

@section('content')
    @php
        $dashboardDatePl = \Carbon\Carbon::now()->locale('pl')->translatedFormat('l, d F');

        $tiles = [
            [
                'label' => 'PROCESY AKTYWNE',
                'value' => (int) ($stats['procesy_aktywne'] ?? 0),
                'icon' => 'fas fa-project-diagram',
                'class' => 'odo-kpi-blue',
                'color' => 'blue',
                'href' => url('/m_odo_proces_lista_index_filter_status/1?from_dashboard=1'),
            ],
            [
                'label' => 'PROCESY NIEAKTYWNE',
                'value' => (int) ($stats['procesy_nieaktywne'] ?? 0),
                'icon' => 'fas fa-pause-circle',
                'class' => 'odo-kpi-rose',
                'color' => 'rose',
                'href' => url('/m_odo_proces_lista_index_filter_status/2?from_dashboard=1'),
            ],
            [
                'label' => 'ANALIZY ROBOCZE',
                'value' => (int) ($stats['analizy_robocze'] ?? 0),
                'icon' => 'fas fa-recycle',
                'class' => 'odo-kpi-sand',
                'color' => 'sand',
                'href' => url('/m_odo_analiza_ryzyka_index_filter_status/1'),
            ],
            [
                'label' => 'ANALIZY ZAPISANE',
                'value' => (int) ($stats['analizy_zapisane'] ?? 0),
                'icon' => 'fas fa-save',
                'class' => 'odo-kpi-mint',
                'color' => 'mint',
                'href' => url('/m_odo_analiza_ryzyka_index_filter_status/2'),
            ],
            [
                'label' => 'DPIA ROBOCZE',
                'value' => (int) ($stats['dpia_robocze'] ?? 0),
                'icon' => 'fas fa-exclamation-circle',
                'class' => 'odo-kpi-violet',
                'color' => 'lilac',
                'href' => url('/m_odo_ocena_skutkow_index_filter_status/1'),
            ],
            [
                'label' => 'DPIA ZAPISANE',
                'value' => (int) ($stats['dpia_zapisane'] ?? 0),
                'icon' => 'fas fa-check-circle',
                'class' => 'odo-kpi-peach',
                'color' => 'apricot',
                'href' => url('/m_odo_ocena_skutkow_index_filter_status/2'),
            ],
        ];
    @endphp

    <style>
        .odo-dashboard {
            --odo-text: #364f6a;
            --odo-muted: #72869f;
            --odo-border: #d8e3ef;
            --odo-shadow: 0 10px 26px rgba(86, 109, 137, 0.12);
            --odo-radius-lg: 24px;
            --odo-radius-md: 18px;
            --odo-radius-sm: 14px;
            border: 1px solid var(--odo-border);
            border-radius: var(--odo-radius-lg);
            background: linear-gradient(145deg, #f5f8fc 0%, #f8fbff 55%, #f6faf8 100%);
            padding: 22px !important;
            color: var(--odo-text);
            overflow-y: auto;
        }

        .odo-title {
            margin-bottom: 2px;
            color: #0f2e50;
            font-weight: 700;
        }

        .odo-subtitle {
            margin: 0;
            color: #5f7793;
            font-size: 22px;
            line-height: 1.2;
        }

        .odo-badge-date {
            padding: 10px 16px;
            border-radius: 16px;
            border: 1px solid #d5dfeb;
            background: #f8fbff;
            color: #355473;
            font-weight: 700;
            box-shadow: 0 2px 8px rgba(85, 109, 138, 0.1);
        }

        .odo-badge-date i { color: #5355e9; }

        .odo-main-link {
            width: 42px;
            height: 42px;
            line-height: 42px;
            text-align: center;
            text-decoration: none !important;
            border-radius: 14px;
            background: #5355e9;
            color: #fff !important;
            font-size: 20px;
        }

        .odo-kpi-link {
            display: block;
            color: inherit !important;
            text-decoration: none !important;
            transition: transform 0.18s ease;
        }

        .odo-kpi-link:hover { transform: translateY(-2px); }

        .odo-card {
            border: 1px solid var(--odo-border);
            border-radius: var(--odo-radius-md);
            box-shadow: var(--odo-shadow);
            overflow: hidden;
            background: #fff;
        }

        .odo-card .card-header {
            background: #f7fafd;
            border-bottom: 1px solid #e5edf5;
            color: #1d3f63;
            font-weight: 700;
        }

        .odo-kpi .card-body {
            min-height: 126px;
            border-radius: var(--odo-radius-md);
            padding-top: 13px;
            padding-bottom: 11px;
        }

        .odo-kpi-blue .card-body { background: #e6eefb; }
        .odo-kpi-rose .card-body { background: #f6e6ec; }
        .odo-kpi-sand .card-body { background: #f8f0df; }
        .odo-kpi-mint .card-body { background: #e4f2ea; }
        .odo-kpi-violet .card-body { background: #ece8f7; }
        .odo-kpi-peach .card-body { background: #fcefe3; }

        .odo-kpi-icon {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 9px;
            background: rgba(255, 255, 255, 0.65);
            color: #3a5d80;
        }

        .odo-kpi-label {
            min-height: 34px;
            margin-bottom: 4px;
            color: #7388a0;
            font-size: 12px;
            letter-spacing: 0.5px;
            font-weight: 700;
        }

        .odo-kpi-value {
            color: #113152;
            font-size: 44px;
            font-weight: 700;
            line-height: 1;
        }

        .odo-table thead th {
            background: #e6f0fb;
            border-bottom: 0;
            color: #2d4d6d;
        }

        .odo-table tbody td {
            border-color: #e8eff6;
        }
        .odo-table tbody tr.odo-process-row {
            cursor: pointer;
        }
        .odo-table tbody tr.odo-process-row:hover {
            background: #f5f9ff;
        }
        .odo-progress-wrap {
            min-width: 110px;
        }
        .odo-progress-wrap .progress {
            height: 6px;
            background: #e7edf4;
        }
        .odo-progress-wrap .progress-bar {
            background: #57b788;
        }
        .odo-progress-text {
            font-size: 11px;
            color: #3c5a79;
            margin-top: 2px;
            text-align: right;
            font-weight: 600;
        }

        .odo-pill {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 8px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.2px;
        }

        .odo-pill-active { background: #d9f0e4; color: #2f6c4d; }
        .odo-pill-inactive { background: #efe5ec; color: #7a4760; }
        .odo-status-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            font-size: 16px;
            line-height: 1;
        }
        .odo-status-icon.is-active {
            color: #67b98a;
        }
        .odo-status-icon.is-inactive {
            color: #9aa8b8;
        }

        .odo-row {
            border: 1px solid #e3ebf4;
            border-radius: var(--odo-radius-sm);
            background: #f8fbff;
            padding: 10px 12px;
        }

        .odo-row-badge {
            min-width: 34px;
            padding: 2px 9px;
            border-radius: 10px;
            border: 1px solid #cfdcec;
            background: #e6eff9;
            color: #35506f;
            font-weight: 700;
            text-align: center;
        }

        .odo-quick-btn {
            border-radius: 5px !important;
            border-color: #c9d9ea !important;
            background: #f5f9fe !important;
            color: #3e5b79 !important;
            font-weight: 600;
        }
    </style>

    <div class="tab-content_2 p-3 odo-dashboard">
        <div class="d-flex justify-content-between align-items-start mb-4">
            <div>
                <p class="odo-subtitle">Centrum monitoringu procesow i rejestrow ochrony danych.</p>
                <p class="small text-muted mb-0">Zakres danych: {{ (string) ($permissionsScopeLabel ?? 'Wszystkie procesy') }}</p>
            </div>
            <div class="d-flex align-items-center">
                <div class="odo-badge-date mr-2">
                    <i class="far fa-clock mr-1"></i>{{ $dashboardDatePl }}
                </div>
            </div>
        </div>

        <div class="row mb-3">
            @foreach($tiles as $tileIndex => $tile)
                <div class="col-xl-2 col-md-4 col-6 mb-2">
                    <x-dashboard.kpi-tile
                        :label="$tile['label']"
                        :value="(int) $tile['value']"
                        :icon="$tile['icon']"
                        :href="$tile['href']"
                        :index="$tileIndex"
                        :color="$tile['color'] ?? null"
                        title="Przejdz do widoku z filtrem"
                    />
                </div>
            @endforeach
        </div>

        <div class="row" style="margin-top: 2rem;">
            <div class="col-lg-7 mb-3">
                <div class="h-100 odo-card">
                    <div class="card-header py-2 d-flex justify-content-between align-items-center">
                        <strong>Najnowsze procesy</strong>
                        <a href="{{ url('/m_odo_proces_lista_index') }}" class="small">Wszystkie procesy</a>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive mb-0">
                            <table class="table table-sm mb-0 odo-table">
                                <thead>
                                    <tr>
                                        <th style="padding-left: 2rem;">ID</th>
                                        <th>Nazwa procesu</th>
                                        <th>Kompletnosc</th>
                                        <th>Status</th>
                                        <th>Aktualizacja</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($latestProcesses as $process)
                                        <tr class="odo-process-row" data-href="{{ (string) ($process->details_url ?? '#') }}">
                                            <td style="padding-left: 2rem;">{{ (int) ($process->id ?? 0) }}</td>
                                            <td>{{ (string) ($process->nazwa_procesu ?? '-') }}</td>
                                            <td>
                                                @php $completenessPercent = (int) ($process->completeness_percent ?? 0); @endphp
                                                <div class="odo-progress-wrap">
                                                    <div class="progress">
                                                        <div class="progress-bar" role="progressbar" style="width: {{ $completenessPercent }}%;" aria-valuenow="{{ $completenessPercent }}" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                    <div class="odo-progress-text">{{ $completenessPercent }}%</div>
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                @if((int) ($process->status_aktywny ?? 0) === 1)
                                                    <span class="odo-status-icon is-active" title="Aktywny">
                                                        <i class="fas fa-check"></i>
                                                    </span>
                                                @else
                                                    <span class="odo-status-icon is-inactive" title="Nieaktywny">
                                                        <i class="far fa-times-circle"></i>
                                                    </span>
                                                @endif
                                            </td>
                                            <td>{{ (string) ($process->updated_at ?? '-') }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center text-muted py-3">Brak danych do wyswietlenia.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-5 mb-3">
                <div class="h-100 odo-card">
                    <div class="card-header py-2"><strong>Rejestry ODO</strong></div>
                    <div class="card-body">
                        <a class="d-flex justify-content-between align-items-center mb-2 odo-row text-decoration-none text-dark" href="{{ url('/m_odo_proces_umowy_powierzenia_rejestr_filter_status/1') }}">
                            <span>Umowy obowiazujace</span>
                            <span class="odo-row-badge">{{ (int) ($stats['umowy_obowiazujace'] ?? 0) }}</span>
                        </a>
                        <a class="d-flex justify-content-between align-items-center mb-2 odo-row text-decoration-none text-dark" href="{{ url('/m_odo_proces_upowaznienia_rejestr_filter_status/1') }}">
                            <span>Upowaznienia obowiazujace</span>
                            <span class="odo-row-badge">{{ (int) ($stats['upowaznienia_obowiazujace'] ?? 0) }}</span>
                        </a>
                        <a class="d-flex justify-content-between align-items-center mb-2 odo-row text-decoration-none text-dark" href="{{ url('/m_odo_proces_udostepnienia_danych_rejestr_filter_status/0') }}">
                            <span>Udostepnienia oczekujace</span>
                            <span class="odo-row-badge">{{ (int) ($stats['udostepnienia_oczekuje'] ?? 0) }}</span>
                        </a>
                        <a class="d-flex justify-content-between align-items-center mb-2 odo-row text-decoration-none text-dark" href="{{ url('/m_odo_zgl_rejestr_zgloszen_filter_status/0') }}">
                            <span>Zgloszenia otwarte</span>
                            <span class="odo-row-badge">{{ (int) ($stats['zgloszenia_otwarte'] ?? 0) }}</span>
                        </a>

                        <hr>

                        <div class="row d-flex flex-wrap justify-content-between m-0">
                            <div class="small text-muted mb-2">Linki</div>
                            <div class="d-flex flex-wrap">
                                <a class="btn btn-sm odo-quick-btn mr-2 mb-2" href="{{ url('/m_odo_proces_lista_index') }}">Procesy</a>
                                <a class="btn btn-sm odo-quick-btn mr-2 mb-2" href="{{ url('/m_odo_analiza_ryzyka_index') }}">Analizy ryzyka</a>
                                <a class="btn btn-sm odo-quick-btn mr-2 mb-2" href="{{ url('/m_odo_ocena_skutkow_index') }}">Oceny skutkow</a>
                                <a class="btn btn-sm odo-quick-btn mr-2 mb-2" href="{{ url('/m_odo_proces_umowy_powierzenia_rejestr') }}">Umowy</a>
                                <a class="btn btn-sm odo-quick-btn mr-2 mb-2" href="{{ url('/m_odo_proces_udostepnienia_danych_rejestr') }}">Udostepnienia</a>
                                <a class="btn btn-sm odo-quick-btn mr-2 mb-2" href="{{ url('/m_odo_proces_upowaznienia_rejestr') }}">Upowaznienia</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        (function () {
            var rows = document.querySelectorAll('.odo-process-row[data-href]');
            rows.forEach(function (row) {
                row.addEventListener('click', function (event) {
                    var target = event.target;
                    if (target && target.closest('a, button, input, select, textarea, label')) {
                        return;
                    }
                    var href = row.getAttribute('data-href');
                    if (href && href !== '#') {
                        window.location.href = href;
                    }
                });
            });
        })();
    </script>
@endsection

@section('menu')
    @include('sites.odo.menu_odo')
@endsection

@section('navbar')
    @include('sites.odo._navbar_odo')
    <i class="fas fa-chevron-right separator"></i>
    <span class="navbar_navigate" title="Aktywna Strona">Dashboard ODO</span>
@endsection