@extends('layouts.adminlte')

@section('title', 'GUIDE MOBILE APP')
@section('page_title', 'GUIDE MOBILE APP')

@push('styles')
    <style>
        .mobile-guide-page .shell {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 320px;
            gap: 16px;
        }
        .mobile-guide-page .cardx {
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
        }
        .mobile-guide-page .cardx .head {
            padding: 18px 20px 0;
        }
        .mobile-guide-page .cardx .head h5 {
            margin: 0;
            font-size: 16px;
            font-weight: 700;
            color: #0f172a;
        }
        .mobile-guide-page .cardx .head p {
            margin: 6px 0 0;
            color: #64748b;
            font-size: 13px;
        }
        .mobile-guide-page .cardx .body {
            padding: 18px 20px 20px;
        }
        .mobile-guide-page .toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 12px;
            border: 1px solid #e5e7eb;
            border-bottom: 0;
            border-radius: 14px 14px 0 0;
            background: #f8fafc;
        }
        .mobile-guide-page .toolbar button {
            border: 1px solid #cbd5e1;
            background: #fff;
            border-radius: 10px;
            padding: 6px 10px;
            font-size: 12px;
            font-weight: 600;
            color: #334155;
        }
        .mobile-guide-page .editor {
            min-height: 380px;
            padding: 16px;
            border: 1px solid #e5e7eb;
            border-radius: 0 0 14px 14px;
            background: #fff;
            overflow: auto;
        }
        .mobile-guide-page .editor:focus {
            outline: 0;
            border-color: #0f766e;
            box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
        }
        .mobile-guide-page .source-area {
            width: 100%;
            min-height: 220px;
            font-family: Consolas, Monaco, monospace;
            font-size: 12px;
        }
        .mobile-guide-page .preview {
            max-height: 70vh;
            overflow: auto;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            padding: 16px;
            background: #fff;
        }
        .mobile-guide-page .preview img {
            max-width: 100%;
            height: auto;
        }
        .mobile-guide-page .side {
            position: sticky;
            top: 14px;
            align-self: start;
        }
        .mobile-guide-page .tip {
            border: 1px dashed #cbd5e1;
            border-radius: 14px;
            padding: 14px 16px;
            background: #f8fafc;
            color: #475569;
            font-size: 13px;
        }
        .mobile-guide-page .stat-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
            margin-bottom: 16px;
        }
        .mobile-guide-page .stat {
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            background: #f8fafc;
            padding: 14px;
        }
        .mobile-guide-page .stat .label {
            font-size: 11px;
            font-weight: 700;
            color: #64748b;
            text-transform: uppercase;
        }
        .mobile-guide-page .stat .value {
            margin-top: 6px;
            font-size: 15px;
            font-weight: 800;
            color: #0f172a;
        }
        .mobile-guide-page .flow {
            display: grid;
            gap: 10px;
        }
        .mobile-guide-page .flow-item {
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            padding: 12px 14px;
            background: #fff;
        }
        .mobile-guide-page .flow-item .step {
            font-size: 11px;
            font-weight: 800;
            color: #0f766e;
            text-transform: uppercase;
        }
        .mobile-guide-page .flow-item .text {
            margin-top: 4px;
            font-size: 13px;
            color: #334155;
        }
        @media (max-width: 1200px) {
            .mobile-guide-page .shell {
                grid-template-columns: minmax(0, 1fr);
            }
            .mobile-guide-page .side {
                position: static;
            }
        }
        @media (max-width: 900px) {
            .mobile-guide-page .stat-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endpush

@section('content')
    <div class="mobile-guide-page">
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        @if($errors->any())
            <div class="alert alert-danger mb-3">
                <div class="fw-semibold mb-1">Ada beberapa input yang perlu diperiksa:</div>
                <ul class="mb-0 ps-3">
                    @foreach($errors->all() as $err)
                        <li>{{ $err }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('attendance_mobile_guides.update') }}" id="mobileGuideForm">
            @csrf

            <div class="shell">
                <div>
                    <div class="cardx">
                        <div class="head">
                            <h5>Kontrol Guide Mobile</h5>
                            <p>Titik ini dipakai administrator untuk mengatur apakah panduan tampil di Android, menulis isi panduan, lalu mengecek preview sebelum disimpan.</p>
                        </div>
                        <div class="body">
                            <div class="stat-grid">
                                <div class="stat">
                                    <div class="label">Status Publish</div>
                                    <div class="value">{{ old('mobile_guide_enabled', $mobile_guide_enabled ? '1' : '0') === '1' ? 'Aktif' : 'Nonaktif' }}</div>
                                </div>
                                <div class="stat">
                                    <div class="label">Judul Aktif</div>
                                    <div class="value">{{ old('mobile_guide_title', $mobile_guide_title) ?: 'Panduan Mobile App' }}</div>
                                </div>
                                <div class="stat">
                                    <div class="label">Action Admin</div>
                                    <div class="value">Tulis, Preview, Simpan</div>
                                </div>
                            </div>

                            <div class="flow mb-3">
                                <div class="flow-item">
                                    <div class="step">Step 1</div>
                                    <div class="text">Tentukan dulu guide ini aktif atau nonaktif untuk mobile.</div>
                                </div>
                                <div class="flow-item">
                                    <div class="step">Step 2</div>
                                    <div class="text">Isi topik penting seperti login, presensi, cuti, SPL, dan aturan operasional.</div>
                                </div>
                                <div class="flow-item">
                                    <div class="step">Step 3</div>
                                    <div class="text">Cek preview di kanan. Kalau sudah jelas untuk karyawan, baru simpan.</div>
                                </div>
                            </div>

                            <div class="row g-3 mb-3">
                                <div class="col-md-8">
                                    <label class="form-label">Judul Guide</label>
                                    <input type="text"
                                           class="form-control"
                                           name="mobile_guide_title"
                                           maxlength="160"
                                           value="{{ old('mobile_guide_title', $mobile_guide_title) }}"
                                           placeholder="Contoh: Panduan Mobile App Karyawan">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label d-block">Status</label>
                                    <div class="form-check form-switch pt-2">
                                        <input class="form-check-input"
                                               type="checkbox"
                                               id="mobileGuideEnabled"
                                               name="mobile_guide_enabled"
                                               value="1"
                                               {{ old('mobile_guide_enabled', $mobile_guide_enabled ? '1' : '0') === '1' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="mobileGuideEnabled">Aktifkan guide di mobile</label>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <label class="form-label mb-0">Konten Guide</label>
                                <button type="button" class="btn btn-outline-secondary btn-sm" id="toggleSourceBtn">
                                    Tampilkan HTML Source
                                </button>
                            </div>

                            <div id="visualEditorWrap">
                                <div class="toolbar">
                                    <button type="button" data-cmd="bold"><b>B</b></button>
                                    <button type="button" data-cmd="italic"><i>I</i></button>
                                    <button type="button" data-cmd="underline"><u>U</u></button>
                                    <button type="button" data-block="p">Paragraf</button>
                                    <button type="button" data-block="h2">H2</button>
                                    <button type="button" data-block="h3">H3</button>
                                    <button type="button" data-cmd="insertUnorderedList">Bullet</button>
                                    <button type="button" data-cmd="insertOrderedList">Number</button>
                                    <button type="button" data-action="link">Link</button>
                                    <button type="button" data-action="clear">Clear Format</button>
                                </div>
                                <div id="mobileGuideEditor" class="editor" contenteditable="true">{!! old('mobile_guide_html', $mobile_guide_html) !!}</div>
                            </div>

                            <div id="sourceEditorWrap" class="d-none">
                                <textarea class="form-control source-area"
                                          id="mobileGuideSource">{{ old('mobile_guide_html', $mobile_guide_html) }}</textarea>
                            </div>

                            <textarea name="mobile_guide_html" id="mobileGuideHtml" class="d-none">{{ old('mobile_guide_html', $mobile_guide_html) }}</textarea>

                            <div class="mt-3 d-flex justify-content-end gap-2">
                                <a href="{{ route('attendance_mobile_notification_settings.index') }}" class="btn btn-outline-secondary">
                                    Kembali ke Setting Mobile
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-1"></i>Simpan Guide
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="side">
                    <div class="cardx">
                        <div class="head">
                            <h5>Preview Cepat</h5>
                            <p>Yang terlihat di sini mendekati tampilan konten di Android.</p>
                        </div>
                        <div class="body">
                            <div id="mobileGuidePreview" class="preview"></div>
                        </div>
                    </div>

                    <div class="cardx mt-3">
                        <div class="head">
                            <h5>Catatan Admin</h5>
                        </div>
                        <div class="body">
                            <div class="tip">
                                <ul class="mb-0 ps-3">
                                    <li>Gunakan heading untuk memisah topik seperti Login, Presensi, Cuti, SPL.</li>
                                    <li>Gunakan bullet untuk langkah-langkah yang harus diikuti karyawan.</li>
                                    <li>Jika memasukkan gambar atau file, gunakan URL absolut atau path server yang memang bisa diakses mobile.</li>
                                    <li>Guide ini bisa diubah kapan saja tanpa build ulang aplikasi.</li>
                                    <li>Kalau guide sedang belum siap, nonaktifkan dulu agar tidak muncul di Android.</li>
                                </ul>
                            </div>
                            <div class="mt-3 d-grid gap-2">
                                <a href="{{ route('attendance_mobile_client_logs.index') }}" class="btn btn-outline-primary btn-sm">
                                    <i class="fas fa-bug me-1"></i>Lihat Log Mobile
                                </a>
                                <a href="{{ route('public.attendance_2fa', ['label' => 'PUBLIC-2FA']) }}" target="_blank" class="btn btn-outline-success btn-sm">
                                    <i class="fas fa-qrcode me-1"></i>Buka Layar QR 2FA
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        (function () {
            const form = document.getElementById('mobileGuideForm');
            const editor = document.getElementById('mobileGuideEditor');
            const preview = document.getElementById('mobileGuidePreview');
            const htmlInput = document.getElementById('mobileGuideHtml');
            const sourceWrap = document.getElementById('sourceEditorWrap');
            const visualWrap = document.getElementById('visualEditorWrap');
            const sourceArea = document.getElementById('mobileGuideSource');
            const toggleBtn = document.getElementById('toggleSourceBtn');
            const toolbar = document.querySelector('.toolbar');

            function syncFromVisual() {
                htmlInput.value = editor.innerHTML.trim();
                sourceArea.value = htmlInput.value;
                preview.innerHTML = htmlInput.value;
            }

            function syncFromSource() {
                htmlInput.value = sourceArea.value;
                editor.innerHTML = htmlInput.value;
                preview.innerHTML = htmlInput.value;
            }

            toolbar?.addEventListener('click', function (event) {
                const button = event.target.closest('button');
                if (!button) return;
                const cmd = button.dataset.cmd || '';
                const block = button.dataset.block || '';
                const action = button.dataset.action || '';
                editor.focus();

                if (cmd) {
                    document.execCommand(cmd, false, null);
                } else if (block) {
                    document.execCommand('formatBlock', false, block);
                } else if (action === 'link') {
                    const url = window.prompt('Masukkan URL link');
                    if (url) {
                        document.execCommand('createLink', false, url);
                    }
                } else if (action === 'clear') {
                    document.execCommand('removeFormat', false, null);
                }
                syncFromVisual();
            });

            toggleBtn?.addEventListener('click', function () {
                const sourceMode = !sourceWrap.classList.contains('d-none');
                if (sourceMode) {
                    syncFromSource();
                    sourceWrap.classList.add('d-none');
                    visualWrap.classList.remove('d-none');
                    toggleBtn.textContent = 'Tampilkan HTML Source';
                } else {
                    syncFromVisual();
                    visualWrap.classList.add('d-none');
                    sourceWrap.classList.remove('d-none');
                    toggleBtn.textContent = 'Kembali ke Visual Editor';
                }
            });

            editor?.addEventListener('input', syncFromVisual);
            sourceArea?.addEventListener('input', syncFromSource);
            form?.addEventListener('submit', function () {
                if (sourceWrap.classList.contains('d-none')) {
                    syncFromVisual();
                } else {
                    syncFromSource();
                }
            });

            syncFromVisual();
        })();
    </script>
@endpush