@extends('backEnd.layouts.master')
@section('title', 'Documentation')

@push('styles')
<style>
.doc-wrap { min-height: calc(100vh - 180px); }
.doc-nav-col { max-height: calc(100vh - 160px); overflow-y: auto; position: sticky; top: 70px; }
.doc-nav .nav-link { font-size: 0.82rem; padding: 0.45rem 0.65rem; border-radius: 0.375rem; color: #495057; border: 1px solid transparent; text-align: left; }
.doc-nav .nav-link:hover { background: #f8f9fa; }
.doc-nav .nav-link.active { background: #198754; color: #fff; border-color: #198754; }
.doc-nav .tab-num { display: inline-block; min-width: 1.4rem; font-size: 0.7rem; opacity: 0.85; }
.doc-content-col { min-width: 0; }
.doc-block { border-left: 3px solid #198754; padding-left: 1rem; }
.doc-block h6 { font-weight: 600; margin-bottom: 0.5rem; }
.doc-feature-name { font-weight: 600; min-width: 130px; }
.doc-search-input { font-size: 0.85rem; }
.doc-new-user-box { background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%); border: 1px solid #bbf7d0; }
.doc-intro-card { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 0.5rem; padding: 1rem; }
.doc-tip-list li, .doc-mistake-list li { margin-bottom: 0.35rem; font-size: 0.875rem; }
.doc-faq-q { font-weight: 600; font-size: 0.875rem; margin-bottom: 0.15rem; }
.doc-faq-a { font-size: 0.875rem; color: #6c757d; margin-bottom: 0.75rem; }
.doc-example { font-size: 0.8rem; color: #856404; background: #fff8e1; padding: 0.25rem 0.5rem; border-radius: 0.25rem; }
.doc-onboard-step { border-left: 3px solid #198754; padding-left: 0.75rem; margin-bottom: 0.75rem; }
@media (max-width: 991.98px) { .doc-nav-col { max-height: 220px; position: static; margin-bottom: 1rem; } }
</style>
@endpush

@section('content')
<div class="container-fluid py-3 doc-wrap">
    <div class="d-flex justify-content-between align-items-start flex-wrap gap-2 mb-3">
        <div>
            <h4 class="fw-bold mb-1"><i class="fas fa-book me-2 text-success"></i>Software Documentation</h4>
            <p class="text-muted small mb-0">নতুন user/customer-দের জন্য — প্রতিটি feature কী, কেন, কীভাবে use করবেন (বাংলা + English)</p>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            <a href="{{ storefront_url('/') }}" target="_blank" rel="noopener" class="btn btn-sm btn-outline-success">
                <i class="fas fa-external-link-alt me-1"></i> View Store
            </a>
            <a href="{{ route('admin.roles.index') }}" class="btn btn-sm btn-outline-secondary">
                <i class="fas fa-shield-alt me-1"></i> Roles
            </a>
        </div>
    </div>

    {{-- New user onboarding --}}
    @if(!empty($onboarding['steps']))
    <div class="card shadow-sm border-0 mb-3 doc-new-user-box">
        <div class="card-body">
            <h5 class="fw-bold text-success mb-1">
                <i class="fas fa-seedling me-2"></i>{{ $onboarding['title'] ?? 'নতুন user?' }}
                <small class="text-muted fw-normal fs-6">— {{ $onboarding['title_en'] ?? '' }}</small>
            </h5>
            <p class="small text-muted mb-3">Store প্রথম setup — এই order follow করলে basic confusion হবে না:</p>
            <div class="row">
                <div class="col-lg-8">
                    @foreach($onboarding['steps'] as $step)
                    <div class="doc-onboard-step">
                        <div class="fw-semibold small">{{ $step['num'] }}. {{ $step['title'] }}</div>
                        <p class="small text-muted mb-1">{{ $step['desc'] }}</p>
                        @if(!empty($step['route']) && Route::has($step['route']))
                        <a href="{{ route($step['route'], $step['params'] ?? []) }}" class="btn btn-xs btn-outline-success btn-sm py-0 px-2" style="font-size:0.75rem">
                            <i class="fas fa-arrow-right me-1"></i>যান
                        </a>
                        @endif
                    </div>
                    @endforeach
                </div>
                @if(!empty($onboarding['remember']))
                <div class="col-lg-4">
                    <div class="doc-intro-card h-100">
                        <div class="fw-semibold small mb-2"><i class="fas fa-brain me-1 text-success"></i>মনে রাখুন</div>
                        <ul class="small text-muted mb-0 ps-3 doc-tip-list">
                            @foreach($onboarding['remember'] as $line)
                            <li>{{ $line }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
    @endif

    <div class="row g-3">
        <div class="col-lg-3 doc-nav-col">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header bg-white py-2">
                    <input type="search" class="form-control form-control-sm doc-search-input" id="docTabSearch"
                           placeholder="Section খুঁজুন…" autocomplete="off">
                </div>
                <div class="card-body p-2">
                    <nav class="nav flex-column doc-nav" id="docTabNav" role="tablist">
                        @foreach($tabs as $tab)
                        <button type="button"
                            class="nav-link doc-tab-btn {{ $activeTab === $tab['id'] ? 'active' : '' }}"
                            id="tab-btn-{{ $tab['id'] }}"
                            data-bs-toggle="tab"
                            data-bs-target="#tab-pane-{{ $tab['id'] }}"
                            data-label="{{ strtolower(($tab['label'] ?? '') . ' ' . ($tab['label_bn'] ?? '')) }}"
                            role="tab">
                            <span class="tab-num">{{ $tab['num'] }}.</span>
                            <i class="fas {{ $tab['icon'] }} me-1"></i>{{ $tab['label'] }}
                        </button>
                        @endforeach
                    </nav>
                </div>
            </div>
        </div>

        <div class="col-lg-9 doc-content-col">
            <div class="tab-content" id="docTabContent">
                @foreach($tabs as $tab)
                <div class="tab-pane fade {{ $activeTab === $tab['id'] ? 'show active' : '' }}"
                     id="tab-pane-{{ $tab['id'] }}" role="tabpanel">

                    <div class="card shadow-sm border-0 mb-3">
                        <div class="card-body">
                            <div class="d-flex align-items-start gap-3 flex-wrap">
                                <div class="rounded-circle bg-success bg-opacity-10 text-success d-flex align-items-center justify-content-center flex-shrink-0" style="width:48px;height:48px;">
                                    <i class="fas {{ $tab['icon'] }} fa-lg"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <h5 class="fw-bold mb-0">{{ $tab['num'] }}. {{ $tab['label'] }}</h5>
                                    @if(!empty($tab['label_bn']))
                                    <span class="badge bg-light text-dark border mt-1">{{ $tab['label_bn'] }}</span>
                                    @endif
                                    @if(!empty($tab['menu_path']))
                                    <div class="small text-muted mt-1"><i class="fas fa-map-marker-alt me-1"></i>{{ $tab['menu_path'] }}</div>
                                    @endif
                                    <div class="mt-2">
                                        @if(!empty($tab['module']))
                                        <span class="badge bg-primary">Module: {{ $tab['module'] }}</span>
                                        @endif
                                        @if(!empty($tab['permission']))
                                        <span class="badge bg-secondary">Permission: {{ $tab['permission'] }}</span>
                                        @endif
                                    </div>
                                    <p class="text-muted mt-2 mb-0">{{ $tab['summary'] ?? '' }}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    @if(!empty($tab['for_new_users']))
                    <div class="alert alert-success small mb-3 py-2">
                        <strong><i class="fas fa-user-graduate me-1"></i>নতুন user-দের জন্য:</strong>
                        {{ $tab['for_new_users'] }}
                    </div>
                    @endif

                    @if(!empty($tab['who_should_use']) || !empty($tab['when_to_use']))
                    <div class="row g-2 mb-3">
                        @if(!empty($tab['who_should_use']))
                        <div class="col-md-6">
                            <div class="doc-intro-card h-100">
                                <div class="fw-semibold small text-success mb-1"><i class="fas fa-users me-1"></i>কার জন্য</div>
                                <p class="small mb-0 text-muted">{{ $tab['who_should_use'] }}</p>
                            </div>
                        </div>
                        @endif
                        @if(!empty($tab['when_to_use']))
                        <div class="col-md-6">
                            <div class="doc-intro-card h-100">
                                <div class="fw-semibold small text-primary mb-1"><i class="fas fa-clock me-1"></i>কখন use করবেন</div>
                                <p class="small mb-0 text-muted">{{ $tab['when_to_use'] }}</p>
                            </div>
                        </div>
                        @endif
                    </div>
                    @endif

                    @foreach($tab['blocks'] ?? [] as $block)
                    <div class="card shadow-sm border-0 mb-3">
                        <div class="card-body doc-block">
                            @include('backEnd.documentation.partials.block', ['block' => $block])
                        </div>
                    </div>
                    @endforeach

                    @if(!empty($tab['tips']))
                    <div class="card shadow-sm border-0 mb-3 border-success border-opacity-25">
                        <div class="card-body">
                            <h6 class="text-success mb-2"><i class="fas fa-check-circle me-1"></i>Tips — সঠিক use</h6>
                            <ul class="mb-0 ps-3 doc-tip-list text-muted">
                                @foreach($tab['tips'] as $tip)
                                <li>{{ $tip }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    @endif

                    @if(!empty($tab['mistakes']))
                    <div class="card shadow-sm border-0 mb-3 border-danger border-opacity-25">
                        <div class="card-body">
                            <h6 class="text-danger mb-2"><i class="fas fa-exclamation-triangle me-1"></i>Common Mistakes — এড়িয়ে চলুন</h6>
                            <ul class="mb-0 ps-3 doc-mistake-list text-muted">
                                @foreach($tab['mistakes'] as $m)
                                <li>{{ $m }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    @endif

                    @if(!empty($tab['faqs']))
                    <div class="card shadow-sm border-0 mb-3">
                        <div class="card-body">
                            <h6 class="mb-3"><i class="fas fa-question-circle me-1 text-info"></i>FAQ — সচরাচর জিজ্ঞাসা</h6>
                            @foreach($tab['faqs'] as $faq)
                            <div class="doc-faq-q">প্রশ্ন: {{ $faq['q'] ?? '' }}</div>
                            <div class="doc-faq-a">উত্তর: {{ $faq['a'] ?? '' }}</div>
                            @endforeach
                        </div>
                    </div>
                    @endif
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    const search = document.getElementById('docTabSearch');
    const buttons = document.querySelectorAll('.doc-tab-btn');
    if (search) {
        search.addEventListener('input', function () {
            const q = this.value.trim().toLowerCase();
            buttons.forEach(function (btn) {
                btn.style.display = !q || (btn.getAttribute('data-label') || '').includes(q) ? '' : 'none';
            });
        });
    }
    buttons.forEach(function (btn) {
        btn.addEventListener('shown.bs.tab', function () {
            const id = this.id.replace('tab-btn-', '');
            const url = new URL(window.location.href);
            url.searchParams.set('tab', id);
            history.replaceState(null, '', url.toString());
        });
    });
})();
</script>
@endpush