@extends('layouts.app')

@section('title', 'Dashboard Super Admin')
@section('page_title', 'Dashboard Super Admin')
@section('page_subtitle', 'Ruang kerja pengelolaan modul, data master, proyek, keuangan, dan kontrol sistem')

@section('content')
@php
    $pelanggan     = $stats['pelanggan'] ?? 0;
    $proyek        = $stats['proyek'] ?? 0;
    $karyawan      = $stats['karyawan'] ?? 0;
    $mitra         = $stats['mitra'] ?? 0;
    $kasbon        = $stats['kasbon'] ?? 0;
    $anggaran      = $stats['anggaran'] ?? 0;
    $nilaiKontrak  = $stats['nilai_kontrak'] ?? 0;
    $invoice       = $stats['invoice'] ?? 0;

    $systemEvents = [
        ['icon' => '📁', 'title' => 'Data proyek tersedia', 'desc' => number_format($proyek, 0, ',', '.') . ' proyek tercatat di sistem', 'tag' => 'Proyek'],
        ['icon' => '🏢', 'title' => 'Data pelanggan tersedia', 'desc' => number_format($pelanggan, 0, ',', '.') . ' pelanggan tercatat di sistem', 'tag' => 'Pelanggan'],
        ['icon' => '🤝', 'title' => 'Data mitra tersedia', 'desc' => number_format($mitra, 0, ',', '.') . ' mitra tercatat di sistem', 'tag' => 'Mitra'],
        ['icon' => '💳', 'title' => 'Kasbon tercatat', 'desc' => number_format($kasbon, 0, ',', '.') . ' data kasbon tersedia untuk dipantau', 'tag' => 'Keuangan'],
        ['icon' => '🧾', 'title' => 'Pengajuan anggaran tercatat', 'desc' => number_format($anggaran, 0, ',', '.') . ' pengajuan anggaran tersedia', 'tag' => 'Anggaran'],
    ];
@endphp

<div class="sa-dashboard">

    <section class="sa-stats-grid">
        <div class="sa-stat-card">
            <span>Pelanggan</span>
            <strong>{{ number_format($pelanggan, 0, ',', '.') }}</strong>
        </div>

        <div class="sa-stat-card">
            <span>Proyek</span>
            <strong>{{ number_format($proyek, 0, ',', '.') }}</strong>
        </div>

        <div class="sa-stat-card">
            <span>Karyawan</span>
            <strong>{{ number_format($karyawan, 0, ',', '.') }}</strong>
        </div>

        <div class="sa-stat-card">
            <span>Mitra</span>
            <strong>{{ number_format($mitra, 0, ',', '.') }}</strong>
        </div>

        <div class="sa-stat-card">
            <span>Kasbon</span>
            <strong>{{ number_format($kasbon, 0, ',', '.') }}</strong>
        </div>

        <div class="sa-stat-card">
            <span>Pengajuan Anggaran</span>
            <strong>{{ number_format($anggaran, 0, ',', '.') }}</strong>
        </div>

        <div class="sa-stat-card">
            <span>Nilai Kontrak</span>
            <strong>Rp {{ number_format($nilaiKontrak, 0, ',', '.') }}</strong>
        </div>

        <div class="sa-stat-card">
            <span>Total Invoice</span>
            <strong>Rp {{ number_format($invoice, 0, ',', '.') }}</strong>
        </div>
    </section>

    <section class="sa-main-grid">
        <div class="sa-panel">
            <div class="sa-panel-header">
                <div>
                    <h2>Daftar Modul</h2>
                    <p>{{ count($modules) }} modul tersedia</p>
                </div>

                <input
                    type="text"
                    id="moduleSearch"
                    class="sa-search"
                    placeholder="Cari modul..."
                    autocomplete="off"
                >
            </div>

            <div class="sa-module-grid" id="moduleGrid">
                @foreach ($modules as $module)
                    <a
                        href="{{ $module['url'] }}"
                        class="sa-module-card"
                        data-search="{{ strtolower(($module['title'] ?? '') . ' ' . ($module['desc'] ?? '')) }}"
                    >
                        <div class="sa-module-icon">{{ $module['icon'] ?? '📌' }}</div>

                        <div class="sa-module-text">
                            <strong>{{ $module['title'] ?? '-' }}</strong>
                            <span>{{ $module['desc'] ?? '-' }}</span>
                        </div>
                    </a>
                @endforeach
            </div>

            <div id="moduleEmpty" class="sa-empty" style="display:none;">
                <strong>Modul tidak ditemukan</strong>
                <span>Coba gunakan kata kunci lain.</span>
            </div>
        </div>

        <div class="sa-panel sa-events-panel">
            <div class="sa-panel-header compact">
                <div>
                    <h2>Ringkasan Perubahan</h2>
                    <p>5 kejadian terakhir</p>
                </div>
            </div>

            <div class="sa-event-list">
                @foreach ($systemEvents as $event)
                    <div class="sa-event-row">
                        <div class="sa-event-icon">{{ $event['icon'] }}</div>

                        <div class="sa-event-text">
                            <strong>{{ $event['title'] }}</strong>
                            <span>{{ $event['desc'] }}</span>
                        </div>

                        <em>{{ $event['tag'] }}</em>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

</div>
@endsection

@push('styles')
<style>
.sa-dashboard {
    max-width: 1280px;
    margin: 0 auto;
}

.sa-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.sa-stat-card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
    min-height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sa-stat-card span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.sa-stat-card strong {
    color: var(--primary-dark);
    font-size: 25px;
    line-height: 1.15;
}

.sa-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 20px;
}

.sa-panel {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 22px;
    padding: 20px;
    box-shadow: var(--shadow-soft);
}

.sa-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border-soft);
}

.sa-panel-header.compact {
    margin-bottom: 14px;
}

.sa-panel-header h2 {
    margin: 0;
    font-size: 20px;
    color: var(--text-main);
}

.sa-panel-header p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.sa-search {
    width: 100%;
    max-width: 330px;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 12px 14px;
    font: inherit;
    outline: none;
    background: var(--surface);
    color: var(--text-main);
}

.sa-search:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-soft);
}

.sa-module-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.sa-module-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    min-height: 118px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    transition: .18s ease;
}

.sa-module-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .07);
}

.sa-module-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--primary-soft);
    font-size: 22px;
}

.sa-module-text {
    min-width: 0;
}

.sa-module-text strong {
    display: block;
    font-size: 15px;
    color: var(--text-main);
    margin-bottom: 6px;
}

.sa-module-text span {
    display: block;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
}

.sa-event-list {
    display: grid;
    gap: 10px;
}

.sa-event-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    padding: 13px;
    border-radius: 16px;
    background: var(--surface-soft);
    border: 1px solid var(--border-soft);
    position: relative;
}

.sa-event-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--surface);
}

.sa-event-text {
    min-width: 0;
    padding-right: 64px;
}

.sa-event-text strong {
    display: block;
    font-size: 13px;
    color: var(--text-main);
    margin-bottom: 4px;
}

.sa-event-text span {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.sa-event-row em {
    position: absolute;
    right: 12px;
    top: 12px;
    font-style: normal;
    font-size: 10px;
    font-weight: 800;
    color: var(--primary-dark);
    background: var(--primary-soft);
    padding: 5px 8px;
    border-radius: 999px;
}

.sa-empty {
    text-align: center;
    padding: 28px;
    color: var(--text-muted);
}

.sa-empty strong {
    display: block;
    color: var(--text-main);
    margin-bottom: 4px;
}

@media (max-width: 1180px) {
    .sa-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sa-main-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .sa-stats-grid,
    .sa-module-grid {
        grid-template-columns: 1fr;
    }

    .sa-panel-header {
        flex-direction: column;
        align-items: stretch;
    }

    .sa-search {
        max-width: none;
    }
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const moduleSearch = document.getElementById('moduleSearch');
    const moduleGrid = document.getElementById('moduleGrid');
    const moduleEmpty = document.getElementById('moduleEmpty');

    if (!moduleSearch || !moduleGrid) return;

    moduleSearch.addEventListener('input', function () {
        const keyword = this.value.toLowerCase().trim();
        let visible = 0;

        moduleGrid.querySelectorAll('.sa-module-card').forEach(function (item) {
            const text = item.getAttribute('data-search') || '';
            const match = text.includes(keyword);

            item.style.display = match ? '' : 'none';
            if (match) visible++;
        });

        if (moduleEmpty) {
            moduleEmpty.style.display = visible === 0 ? 'block' : 'none';
        }
    });
});
</script>
@endpush