@extends($_layout . 'home')
@section('content')
    <div class="ai-page-content">

        @include($_template . 'navbg')

        <div class="about-area-two topic-page">
            <div class="container-fluid">
                <div class="container-max">
                    <div class="about-content-two">
                        {{-- <p id="topic-page-description" class=" text-center mb-30 d-none d-md-block">{{ $topic && $topic->description ? $topic->description : 'Chuyên gia AI sẻ giúp bạn tạo nội dung trong tất cả các lĩnh vực bạn muốn một cách dể dàng. Hãy bắt đầu bằng việc chọn một lĩnh vực' }}</p> --}}
                        <div class="prompt-search-container">
                            <div class="seo-form">
                                {{-- <h2>What is My SEO Score?</h2> --}}
                                <div class="seo-form-area">
                                    <form class="seo-form-option" method="GET" action="{{route('web.ai.tools.search')}}" id="tool-search-form">
                                        <div class="row">
                                            <div class="col-lg-4 col-sm-6 col-md-4 col-topic">
                                                <div class="form-group">
                                                    <i class="bx bx-purchase-tag"></i>
                                                    {{-- <input class="form-control form-border" type="text" placeholder="Your Website URL"> --}}
                                                    @include($_lib . 'form.crazyselect', [
                                                        'input' => html_input([
                                                            'type' => 'crazyselect',
                                                            'label' => 'Chuyên đề',
                                                            'name' => 'topic_id',
                                                            'id' => 'topic_id',
                                                            'call' => 'get_topic_options',
                                                            'params' => [[], 'Tất cả'],
                                                            '@label-type' => 'value',
                                                            'data-show-children-address' => 'false',
                                                            'class' => 'd-block',
                                                        ]),
                                                    ])
                                                </div>
                                            </div>
                                            <div class="col-lg-8 col-sm-6 col-md-8 col-search">
                                                <div class="form-group">
                                                    <i class="bx bx-search-alt"></i>
                                                    <input class="form-control" type="text" name="search" id="tool-search-input" placeholder="Nhập từ khoá...">
                                                </div>
                                            </div>
                                            <div class="text-center buttons">
                                                <button type="submit" class="default-btn">
                                                    Tìm
                                                    <i class="bx bx-search"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="nav-wrapper">
                            <p id="topic-page-description" class=" text-center mb-30 d-none d-md-block">{{ $topic && $topic->description ? $topic->description : 'Chuyên gia AI sẽ giúp bạn tạo nội dung trong tất cả các lĩnh vực bạn muốn một cách dể dàng. Hãy bắt đầu bằng việc chọn một lĩnh vực' }}</p>
                            <div class="topic-nav">
                            </div>
                            <div class="topic-children ">
                                <div class="list-header">

                                </div>
                                <div class="list-body">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="ai-loader-block">

        </div>

        <div class="service-another topic-prompts pb-70" style="display: none">
            <div class="container">
                <div class="section-title text-center">
                    <span class="sp-before sp-after">Công cụ</span>
                    {{-- <h2>We Offer Professional Solutions For Your Business</h2> --}}
                </div>
                <div class="row pt-45 topic-prompt-list">

                </div>
            </div>
            <div class="service-another-shape">
                <div class="shape-1">
                    <img src="{{ ai_startup_asset('img/shape/shape13.png') }}" alt="Images">
                </div>
                <div class="shape-2">
                    <img src="{{ ai_startup_asset('img/shape/shape11.png') }}" alt="Images">
                </div>
                <div class="shape-3">
                    <img src="{{ ai_startup_asset('img/shape/shape10.png') }}" alt="Images">
                </div>
                <div class="shape-4">
                    <img src="{{ ai_startup_asset('img/shape/shape9.png') }}" alt="Images">
                </div>
                <div class="shape-5">
                    <img src="{{ ai_startup_asset('img/shape/shape7.png') }}" alt="Images">
                </div>
                <div class="shape-6">
                    <img src="{{ ai_startup_asset('img/shape/shape12.png') }}" alt="Images">
                </div>
            </div>
        </div>

    </div>
    <div class="chat-area">
        <div class="chat-header">
            <a href="#back" class="chat-btn-back"><i class="bx bx-chevron-left"></i></a>
            <h4 id="chat-area-title">Trợ lý</h4>
            <a href="#close" class="chat-btn-close"><i class="bx bx-x"></i></a>
        </div>
        <div class="chat-body">
            <div class="chat-sidebar chat-history">
                <div class="chat-sidebar-header">
                    <h4>Lịch xử</h4>
                </div>
                <div class="chat-sidebar-body">
                    <div class="chat-sidebar-body-content">

                    </div>
                </div>
            </div>
            <div class=" chat-main-content">
                <div class="chat-messages">

                </div>
                <div class="chat-form-section">

                </div>

            </div>
        </div>
    </div>

    <div class="chat-area chat-iframe">
        <div class="chat-frame-container">
            <a href="#back" class="chat-btn-back"><i class="bx bx-chevron-left"></i></a>

            <div class="chat-preloader">
                <div class="loader rspin">
                    <span class="c"></span>
                    <span class="d spin"><span class="e"></span></span>
                    <span class="r r1"></span>
                    <span class="r r2"></span>
                    <span class="r r3"></span>
                    <span class="r r4"></span>
                </div>
            </div>

            <div class="chat-frame-wrapper">

            </div>
        </div>
    </div>
    <script type="text/template" role="topicNavItem">
        <div class="topic-item-wrapper">
            <div class="topic-item topic-nav-item {className}" data-id="{id}">
                <p>{name}</p>
            </div>
        </div>
    </script>
    <script type="text/template" role="topicNavBack">
        <div class="topic-item-wrapper">
            <div class="topic-item topic-nav-item active" data-id="{id}">
                <p>
                    <i class="bx bx-chevron-left"></i>
                </p>
            </div>
        </div>
    </script>

    <script type="text/template" role="topicBreadcrumbItem">
        <li class="breadcrumb-item">
            <i class="bx bx-chevron-right"></i>
        </li>
        <li class="breadcrumb-item topic-breadcrumb-item"><a class="btn-topic-breadcrumb-item" title="{name}" href="#id={id}" data-id="{id}">{name}</a></li>
    </script>

    <script type="text/template" role="promptItem">
        <div class="col-lg-4 col-md-6 mb-4">
            <div class="service-another-card prompt-item" data-id="{id}" data-topic-id="{topic_id}">
                <!-- {{-- <a href="javascript:void(0);"><i class="flaticon-research service-icon service-icon-bg1"></i></a> --}} -->
                <h3><a href="javascript:void(0);">{name}</a></h3>
                <p>{description}</p>
                <a href="javascript:void(0);" class="learn-btn">
                    Dùng ngay
                    <i class="bx bx-plus"></i>
                </a>
            </div>
        </div>
    </script>

    <script type="text/template" role="AlertBlock">
        <div class="col-lg-12">
            <div class="alert alert-{type} text-center">{message}</div>
        </div>
    </script>

    <script type="text/template" role="PaginationBlock">
        <div class="col-lg-12">
            <div class="pagination-area text-center">
                {buttons}
            </div>
        </div>
    </script>

    <script type="text/template" role="PaginationFirstButton">
        <a href="{url}" title="{label}" class="prev page-numbers">
            <i class="bx bx-chevron-left"></i>
        </a>
    </script>
    <script type="text/template" role="PaginationLastButton">
        <a href="{url}" title="{label}" class="prev page-numbers">
            <i class="bx bx-chevron-right"></i>
        </a>
    </script>
    <script type="text/template" role="PaginationLinkButton">
        <a href="{url}" title="{label}" class="page-numbers">{label}</a>
    </script>
    <script type="text/template" role="PaginationActiveButton">
        <span class="page-numbers current" aria-current="page">{label}</span>
    </script>
    <script type="text/template" role="PaginationDotButton">
        <span class="page-numbers" aria-current="page">...</span>
    </script>




    <script type="text/template" role="chatFrame">
        <iframe src="{chat_url}" frameborder="0" id="chatBoxFrame"></iframe>
    </script>

    <script type="text/template" role="SpinLoader">
        <div class="ai-spin">
            <div class="loader rspin">
                <span class="c"></span>
                <span class="d spin"><span class="e"></span></span>
                <span class="r r1"></span>
                <span class="r r2"></span>
                <span class="r r3"></span>
                <span class="r r4"></span>
            </div>
            <div class="label">{text}</div>
        </div>
    </script>
@endsection

@section('js')
    <script>
        window.__IS_LOGIN__ = {{auth()->user()?'true':'false'}};
        window.__LOGIN_URL__ = "{{route('web.account.login', ['next' => $current_url])}}";

        window.__TOPIC_DATA__ = @json($topics->toArray());

        window.__CHAT_URL__ = "{{ route('web.ai.chat.box') }}?p={prompt_id}&t={topic_id}";
        window.__TOPIC_URL__ = "{{ route('web.ai.topic', ['id' => 'TOPIC_ID']) }}";
        window.__TOOL_SEARCH__ = "{{ route('web.ai.tools.search') }}";
        window.__PAY_OPTION_URL__ = "{{ route('web.payments.options') }}";

        window.__EXPIRED_AT__ = "{{ ($u = get_user_login()) ? $u->getServiceExpiredInfo('d/m/Y') : '' }}";
    </script>
    <script src="{{ asset('static/app/js/sh.min.js') }}"></script>
    <script src="{{ ai_startup_asset('js/topic.js') }}"></script>
@endsection