@extends('layouts.adminlte')

@section('title', 'Guide Program')
@section('page_title', 'Guide Program')

@push('styles')
    <style>
        .guide-toolbar {
            display: flex;
            gap: .5rem;
            flex-wrap: wrap;
            align-items: center;
        }
        .guide-group {
            border: 1px solid var(--bs-border-color);
            border-radius: .5rem;
            background: #f8f9fa;
            padding: .85rem;
            margin-bottom: 1rem;
        }
        .guide-group-title {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: .75rem;
        }
        .guide-section {
            border: 1px solid var(--bs-border-color);
            border-radius: .5rem;
            background: #fff;
            padding: 1rem;
            margin-bottom: .85rem;
        }
        .guide-section:target {
            border-color: #0d6efd;
            box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15);
        }
        .guide-section-title {
            margin-bottom: .75rem;
            display: flex;
            gap: .5rem;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .guide-steps {
            margin-bottom: 0;
            padding-left: 1rem;
        }
        .guide-shot-grid {
            margin-top: .85rem;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: .6rem;
        }
        .guide-shot-card {
            border: 1px solid var(--bs-border-color);
            border-radius: .4rem;
            overflow: hidden;
            background: #fff;
        }
        .guide-shot-card img {
            width: 100%;
            display: block;
            object-fit: cover;
        }
        .guide-shot-caption {
            padding: .45rem .55rem;
            font-size: .8rem;
            color: #6c757d;
        }

        /* Rendered code frames inside guide steps (fenced code blocks). */
        .guide-code {
            background: #0b1020;
            color: #e6edf3;
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: .5rem;
            padding: .65rem .8rem;
            overflow: auto;
            white-space: pre;
            margin: .5rem 0;
        }
        .guide-code code {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: .85rem;
        }
        .guide-inline-code {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: .85em;
            background: rgba(13, 110, 253, .08);
            border: 1px solid rgba(13, 110, 253, .18);
            border-radius: .35rem;
            padding: .05rem .35rem;
        }
    </style>
@endpush

@section('content')
    @php
        if (! function_exists('guide_render_step')) {
            /**
             * Render step text with:
             * - fenced code blocks (```lang ... ```): rendered as <pre><code>...</code></pre>
             * - inline code (`...`): rendered as <code>...</code>
             *
             * We keep rendering strict (escape everything) to avoid accidental HTML injection.
             */
            function guide_render_step($text): string
            {
                $text = (string) $text;
                $pattern = '/```([a-zA-Z0-9_-]+)?\\s*\\R([\\s\\S]*?)\\R```/m';

                $out = '';
                $offset = 0;

                while (preg_match($pattern, $text, $m, PREG_OFFSET_CAPTURE, $offset)) {
                    $full = $m[0][0];
                    $pos = (int) $m[0][1];

                    // Normal text before the fenced block.
                    $before = substr($text, $offset, $pos - $offset);
                    if ($before !== '') {
                        $escaped = e($before);
                        $escaped = preg_replace_callback('/`([^`]+)`/', fn ($mm) => '<code class="guide-inline-code">'.$mm[1].'</code>', $escaped);
                        $out .= nl2br($escaped);
                    }

                    $lang = isset($m[1][0]) ? trim((string) $m[1][0]) : '';
                    $code = (string) ($m[2][0] ?? '');
                    $codeEscaped = e(rtrim($code, "\r\n"));

                    $langClass = $lang !== '' ? ' language-'.preg_replace('/[^a-zA-Z0-9_-]/', '', $lang) : '';
                    $out .= '<pre class="guide-code"><code class="'.$langClass.'">'.$codeEscaped.'</code></pre>';

                    $offset = $pos + strlen($full);
                }

                // Remaining normal text after last fenced block.
                $tail = substr($text, $offset);
                if ($tail !== '') {
                    $escaped = e($tail);
                    $escaped = preg_replace_callback('/`([^`]+)`/', fn ($mm) => '<code class="guide-inline-code">'.$mm[1].'</code>', $escaped);
                    $out .= nl2br($escaped);
                }

                return $out;
            }
        }
    @endphp

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Guide Penggunaan Program</h3>
            <div class="guide-toolbar">
                <input type="text" id="guideSearch" class="form-control form-control-sm" style="width:260px" placeholder="Cari guide..." />
                <div class="btn-group btn-group-sm" role="group" aria-label="Mode Guide">
                    <button type="button" class="btn btn-outline-primary active guide-mode-btn" data-mode="all">Semua</button>
                    <button type="button" class="btn btn-outline-primary guide-mode-btn" data-mode="documentation">Dokumentasi</button>
                    <button type="button" class="btn btn-outline-primary guide-mode-btn" data-mode="project">Project</button>
                    <button type="button" class="btn btn-outline-primary guide-mode-btn" data-mode="hrga">HR&GA</button>
                    <button type="button" class="btn btn-outline-primary guide-mode-btn" data-mode="master-setting">Master/Setting</button>
                    <button type="button" class="btn btn-outline-primary guide-mode-btn" data-mode="accounting">Accounting</button>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="alert alert-success py-2 mb-3">
                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                    <div>
                        <strong>Quick Start:</strong> ikuti urutan implementasi supaya absensi dan payroll cepat jalan.
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <a class="btn btn-sm btn-outline-success" href="#system-generated-docs">Dokumentasi Sistem</a>
                        <a class="btn btn-sm btn-success" href="#quickstart-end-to-end">Buka Quick Start</a>
                        <a class="btn btn-sm btn-outline-success" href="#server-deployment">Server</a>
                        <a class="btn btn-sm btn-outline-success" href="#master-reference">Master Referensi</a>
                        <a class="btn btn-sm btn-outline-success" href="#master-approval-flow">Approval Flow</a>
                        <a class="btn btn-sm btn-outline-success" href="#payroll-profile">Profil Gaji</a>
                        <a class="btn btn-sm btn-outline-success" href="#attendance-review">Attendance Review</a>
                        <a class="btn btn-sm btn-outline-success" href="#penggajian-dinamis">Penggajian</a>
                        <a class="btn btn-sm btn-outline-success" href="#attendance-mobile-api-key">Mobile API</a>
                    </div>
                </div>
            </div>

            <div class="alert alert-info py-2 mb-3">
                Untuk menampilkan screenshot di guide ini, simpan file gambar ke folder:
                <code>{{ $screenshotBaseDir }}</code>
                dengan pola nama:
                <code>{section-id}-01.png</code>, <code>{section-id}-02.png</code>, dst.
            </div>

            <div id="guideSections">
                @foreach ($groups as $group)
                    <div class="guide-group" data-title="{{ strtolower($group['title']) }}" data-group-key="{{ $group['key'] }}">
                        <div class="guide-group-title">{{ $group['title'] }}</div>
                        @foreach ($group['sections'] as $section)
                            <section class="guide-section" id="{{ $section['id'] }}" data-title="{{ $section['keywords'] }}">
                                <div class="guide-section-title">
                                    <h5 class="m-0">{{ $section['title'] }}</h5>
                                    <span class="badge text-bg-light">{{ $section['id'] }}</span>
                                </div>

                                <ol class="guide-steps">
                                    @foreach ($section['steps'] as $step)
                                        <li>{!! guide_render_step($step) !!}</li>
                                    @endforeach
                                </ol>

                                @if (!empty($screenshots[$section['id']]))
                                    <div class="guide-shot-grid">
                                        @foreach ($screenshots[$section['id']] as $idx => $shot)
                                            <a class="guide-shot-card" href="{{ $shot }}" target="_blank" rel="noopener">
                                                <img src="{{ $shot }}" alt="Screenshot {{ $section['id'] }} {{ $idx + 1 }}">
                                                <div class="guide-shot-caption">Screenshot {{ $idx + 1 }}</div>
                                            </a>
                                        @endforeach
                                    </div>
                                @endif
                            </section>
                        @endforeach
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        (function () {
            const searchInput = document.getElementById('guideSearch');
            const sections = Array.from(document.querySelectorAll('#guideSections .guide-section'));
            const groups = Array.from(document.querySelectorAll('#guideSections .guide-group'));
            const modeButtons = Array.from(document.querySelectorAll('.guide-mode-btn'));
            let activeMode = 'all';
            const sectionAliases = {
                user: 'operational-setting',
                users: 'operational-setting',
                department: 'master-reference',
                departement: 'master-reference',
                role_akses: 'operational-setting',
                role-akses: 'operational-setting',
                menu: 'operational-setting',
                menu-management: 'operational-setting',
                session: 'operational-setting',
                session-login: 'operational-setting',
                dashboard: 'master-project-rab',
                dashboard-profile: 'master-project-rab',
                onboarding: 'onboarding-dashboard',
                onboarding-dashboard: 'onboarding-dashboard',
                announcement: 'operational-setting',
                login: 'operational-setting',
                login-settings: 'operational-setting',
                scheduler: 'operational-setting',
                smtp: 'operational-setting',
                smtp-otp-email: 'operational-setting',
                wa: 'operational-setting',
                wa-gateway: 'operational-setting',
                attendance-api: 'attendance-mobile-api-key',
                attendance-api-key: 'attendance-mobile-api-key',
                attendance-mobile-api: 'attendance-mobile-api-key',
                resign: 'karyawan-resign',
                karyawan-resign: 'karyawan-resign',
                employee-resign: 'karyawan-resign',
                termination: 'karyawan-resign',
            };

            const applyFilter = () => {
                const keyword = (searchInput?.value || '').trim().toLowerCase();

                groups.forEach((group) => {
                    const groupKey = (group.dataset.groupKey || '').toLowerCase();
                    const modeVisible = activeMode === 'all' || groupKey === activeMode;
                    group.style.display = modeVisible ? '' : 'none';
                });

                sections.forEach((section) => {
                    const parentGroup = section.closest('.guide-group');
                    if (parentGroup && parentGroup.style.display === 'none') {
                        section.style.display = 'none';
                        return;
                    }
                    const text = `${section.dataset.title || ''} ${section.textContent || ''}`.toLowerCase();
                    section.style.display = keyword === '' || text.includes(keyword) ? '' : 'none';
                });
            };

            if (searchInput) {
                searchInput.addEventListener('input', applyFilter);
            }
            modeButtons.forEach((btn) => {
                btn.addEventListener('click', () => {
                    activeMode = (btn.dataset.mode || 'all').toLowerCase();
                    modeButtons.forEach((x) => x.classList.remove('active'));
                    btn.classList.add('active');
                    applyFilter();
                });
            });

            const params = new URLSearchParams(window.location.search);
            const rawSection = (params.get('section') || '').trim();
            const sectionId = sectionAliases[rawSection] || rawSection;
            if (sectionId) {
                const target = document.getElementById(sectionId);
                if (target) {
                    setTimeout(() => {
                        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                    }, 150);
                }
            }

            const modeParam = (params.get('mode') || '').trim().toLowerCase();
            if (modeParam !== '') {
                const targetBtn = modeButtons.find((x) => (x.dataset.mode || '').toLowerCase() === modeParam);
                if (targetBtn) {
                    targetBtn.click();
                }
            } else {
                applyFilter();
            }
        })();
    </script>
@endpush