@extends('layouts.help')

@push('styles')
    <style>
        .header-section {
            position: relative;
            /* background-color: #7A22D5; */
            padding: 60px 20px;
        }

        .header-section h1 {
            color: white;
            display: block;
            font-size: 32px;
            text-align: center;
            margin-bottom: 20px;
        }

        .search-input {
            /* max-width: 500px;
            width: 100%; */
            /* padding: 12px 20px; */
            border: none;
            border-radius: 4px;
            font-size: 16px;
        }

        /* Reset */
        main {margin: 0 !important;}
    </style>
    <script>window.asset_url='{{ asset('')}}';</script>
@endpush

@section('content')

<!-- Header -->
<div class="header-section">
    <h1>How can we help you?</h1>
    <div class="search-wrapper position-relative" style="max-width: 500px; margin: 30px auto;">
        <input type="text" id="search" class="form-control search-input" placeholder="Search Help" autocomplete="off">
        <ul id="suggestions" class="list-group position-absolute w-100 shadow" style="top: 100%; display: none; z-index: 9999;"></ul>
    </div>
    <!-- <input type="text" id="search" class="search-input" placeholder="Search Help" autocomplete="off">
    <ul id="suggestions" class="dropdown-menu"></ul> -->
</div>
<div class="container py-5">
    <div class="row">
        <!-- Help Topics -->
        <div class="col-md-3 mb-4">
            <h3 class="mb-3">HELP TOPICS</h3>
            <ul class="list-unstyled help-topic">
                @if(! empty($topics)) 
                    @foreach ($topics as $topic)
                        <li>
                            <a href="{{ route('front.topics.show', $topic->slug) }}">
                                {{ $topic->name }}
                            </a>
                        </li>
                    @endforeach
                @else
                    <li>No results found</li>
                @endif
            </ul>
        </div>

        <!-- Top Tasks -->
        <div class="col-md-9">
            <h3 class="mb-4">TOP TASKS</h3>
            <div class="row">

                @foreach($topTasks as $task)
                    <div class="col-md-6 col-lg-4 mb-4">
                        <div class="card mb-4">
                            <a href="{{ route('front.topics.show', $task->topic->slug) }}">
                                <div class="card-body text-center">
                                    <div class="display-4 mb-3">
                                        <img class="display-icon" src="{{ asset('storage/' . $task->topic->icon ?? '') }}" alt="{{ $task->topic->name ?? '' }}">
                                    </div>
                                    <h5 class="card-title mb-1">{{ $task->topic->name ?? '' }}</h5>
                                    <p class="card-text">{{ $task->title ?? '' }}</p>
                                </div>
                            </a>
                        </div>
                    </div>
                @endforeach

                {{--
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card mb-4">
                        <div class="card-body text-center">
                            <div class="display-4 mb-3">$</div>
                            <h5 class="card-title mb-1">Missing Cash Back</h5>
                            <p class="card-text">Questions about your Cash Back? We can help.</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card mb-4">
                        <div class="card-body text-center">
                            <div class="display-4 mb-3">✈️</div>
                            <h5 class="card-title mb-1">Track My Big Fat Check</h5>
                            <p class="card-text">See what you’ve earned and when you’ll get paid.</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card mb-4">
                        <div class="card-body text-center">
                            <div class="display-4 mb-3">🔒</div>
                            <h5 class="card-title mb-1">Help Signing In</h5>
                            <p class="card-text">Find out more about how to access your account.</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card mb-4">
                        <div class="card-body text-center">
                            <div class="display-4 mb-3">Ⓡ</div>
                            <h5 class="card-title mb-1">Join Rakuten</h5>
                            <p class="card-text">See how easy it is to create your free, secure account.</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card mb-4">
                        <div class="card-body text-center">
                            <div class="display-4 mb-3">💰</div>
                            <h5 class="card-title mb-1">How to Earn Cash Back</h5>
                            <p class="card-text">Three easy steps to get Cash Back when you shop.</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card mb-4">
                        <div class="card-body text-center">
                            <div class="display-4 mb-3">⚙️</div>
                            <h5 class="card-title mb-1">How It Works</h5>
                            <p class="card-text">See how you can start shopping smarter.</p>
                        </div>
                    </div>
                </div> --}}

            </div>
        </div>

    </div>
</div>

@push('scripts')
    <script>
        // $(function () {
        //     let debounceTimer;

        //     $('#search').on('input', function () {
        //         const query = $(this).val().trim();

        //         clearTimeout(debounceTimer);

        //         if (query.length < 2) {
        //             $('#suggestions').empty();
        //             return;
        //         }

        //         debounceTimer = setTimeout(function () {
        //             $.ajax({
        //                 url: '/knowledge-base/search',
        //                 method: 'GET',
        //                 data: { q: query },
        //                 success: function (data) {
        //                     $('#suggestions').empty();

        //                     if (data.length === 0) {
        //                         $('#suggestions').append(`<li class="list-group-item">No results found</li>`);
        //                         return;
        //                     }

        //                     data.forEach(function (item) {
        //                         $('#suggestions').append(`
        //                             <li class="list-group-item suggestion-item" style="cursor: pointer;" data-url="${item.url}">
        //                                 <strong>[${item.type}]</strong> ${item.title}
        //                             </li>
        //                         `);
        //                     });
        //                 }
        //             });
        //         }, 300); // debounce time in milliseconds
        //     });

        //     // Open in new tab on click
        //     $(document).on('click', '.suggestion-item', function () {
        //         const url = $(this).data('url');
        //         window.open(url, '_blank');
        //     });

        //     // Optional: hide suggestions on click outside
        //     $(document).on('click', function (e) {
        //         if (!$(e.target).closest('#search, #suggestions').length) {
        //             $('#suggestions').empty();
        //         }
        //     });
        // });

        $(function () {
            let debounceTimer;

            $('#search').on('input', function () {
                const query = $(this).val().trim();

                clearTimeout(debounceTimer);

                if (query.length < 2) {
                    $('#suggestions').hide().empty();
                    return;
                }

                debounceTimer = setTimeout(function () {
                    $.ajax({
                        url: "{{ route('front.knowledge.search') }}",
                        method: 'GET',
                        data: { q: query },
                        success: function (data) {
                            $('#suggestions').empty();

                            if (data.length === 0) {
                                $('#suggestions').append(`<li class="list-group-item">No results found</li>`).show();
                                return;
                            }

                            data.forEach(function (item) {
                                $('#suggestions').append(`
                                    <li class="list-group-item suggestion-item" style="cursor: pointer;" data-url="${item.url}">
                                        <a href="${item.url}">
                                            <strong>[${item.type}]</strong> ${item.title}
                                        </a>
                                    </li>
                                `);
                            });

                            $('#suggestions').show();
                        }
                    });
                }, 300);
            });

            $(document).on('click', '.suggestion-item', function () {
                const url = $(this).data('url');
                window.open(url, '_blank');
            });

            $(document).on('click', function (e) {
                if (!$(e.target).closest('.search-wrapper').length) {
                    $('#suggestions').hide();
                }
            });
        });
    </script>
@endpush

{{--
<div class="container">
    <h2>Knowledge Base</h2>
    
    <div class="row">
        @foreach ($categories as $category)
            <div class="col-md-6">
                <div class="card mb-4 p-4">
                    <div class="text-center">
                        <div class="mb-2">
                            {{ -- Optionally show category icon here -- }}
                            <i class="bi bi-folder2-open" style="font-size: 24px;"></i>
                        </div>
                        <h5 class="text-uppercase">{{ $category->name }}</h5>
                        <p>{{ $category->description }}</p>
                    </div>

                    <ul class="list-unstyled">
                        @foreach ($category->articles as $article)
                            <li>
                                <a href="{{ route('front.articles.show', $article->slug) }}">
                                    {{ $article->title }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        @endforeach
    </div>
</div> --}}
@endsection