@extends('front.layouts.app')

@section('content')
    <div class="container-lg pt-3">
        <div class="mb-3">
            @include('front.partials.breadcrumbs')
            <h1 class="fw-bold mb-0">{{ $ai_tool->tool_name }}</h1>
            <h2 class="text-secondary"><span class="h6">{{ $ai_tool->tagline }}</span></h2>
        </div>
        <div class="row mb-3 g-3">
            <div class="col-12 col-sm-7 col-md-8 col-lg-8 col-xl-9">
                <div class="mb-3">
                    <ul class="nav nav-underline gap-4 h5">
                        @if (!is_empty($ai_tool->screenshot_img))
                            <li class="nav-item">
                                <a class="text-decoration-none nav-link active instant-scroll" aria-current="page"
                                    href="#screenshot">Screenshot</a>
                            </li>
                        @endif
                        <li class="nav-item">
                            <a title="Details about {{ $ai_tool->category->name }} AI tool: {{ $ai_tool->tool_name }}"
                                class="text-decoration-none nav-link instant-scroll" href="#details">Details</a>
                        </li>
                        <li class="nav-item">
                            <a title="Embed {{ $ai_tool->tool_name }}" class="text-decoration-none nav-link instant-scroll"
                                href="#embed">Embed</a>
                        </li>
                        @if (count($ai_tool->qna) > 0)
                            <li class="nav-item">
                                <a title="Frequently asked questions about the AI tool {{ $ai_tool->tool_name }}"
                                    class="text-decoration-none nav-link instant-scroll" href="#faq">FAQ</a>
                            </li>
                        @endif
                    </ul>
                </div>
                <div>

                    @if (!is_empty($ai_tool->screenshot_img))
                        <div id="screenshot" class="ratio ratio-16x9 mb-5">
                            <figure class="text-center">
                                <img class="img-fluid rounded-3 shadow mb-2" src="{{ $ai_tool->screenshot_img }}"
                                    alt="Screenshot of {{ $ai_tool->tool_name }} website">
                                <figcaption class="small text-secondary">Screenshot of {{ $ai_tool->tool_name }}
                                    ({{ get_domain_from_url($ai_tool->external_url) }}) website
                                </figcaption>
                            </figure>

                        </div>
                    @endif

                    <div id="embed">

                        <div class="card border-2 border-primary mb-4">
                            <div class="card-body text-center">

                                <div class="mb-3">This AI tool, <span
                                        class="fw-semibold">{{ $ai_tool->tool_name }}</span>
                                    was first featured in AiBuddyTool.com
                                    on {{ dmy($ai_tool->created_at) }}.</div>

                                <get-embed-code name="{{ $ai_tool->tool_name }}"
                                    url="{{ route('front.aitool.show', ['ai_tool_slug' => $ai_tool->slug, 'ref' => get_domain_from_url($ai_tool->external_url)]) }}"></get-embed-code>


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


                <div id="details" class="card mb-4">
                    <div class="card-body">
                        <h3 class="mb-2 fw-bold h5 text-primary">{{ $ai_tool->tool_name }} summary by AIToolBuddy</h3>
                        <div>{!! $ai_tool->summary !!}</div>
                        <br>

                        <h3 class="mb-2 fw-bold h5 text-primary">Details</h3>
                        <table class="table">
                            <tbody>
                                <tr>
                                    <th scope="row">Pricing Structure</th>
                                    <td>{{ $ai_tool->pricing_type }}</td>
                                </tr>
                                <tr>
                                    <th scope="row">AI Tool Platform</th>
                                    <td>
                                        @if ($ai_tool->is_app_web_both == 'both')
                                            App & Web
                                        @else
                                            {{ ucwords($ai_tool->is_app_web_both) }} Only
                                        @endif
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <br>
                        <h3 class="mb-2 fw-bold h5 text-primary">{{ $ai_tool->tool_name }} Features</h3>
                        <div class="d-flex flex-wrap gap-1">
                            @foreach ($ai_tool->keywords as $keyword)
                                <a href="{{ get_route_search_result($keyword->value_lowercased) }}"
                                    class="btn btn-outline-dark btn-sm border-2 px-2 py-1 rounded-pill text-decoration-none text-nowrap">{{ $keyword->value }}
                                </a>
                            @endforeach
                        </div>
                    </div>
                </div>

                @if (count($ai_tool->qna) > 0)
                    <div id="faq" class="mb-4">
                        <div class="card">
                            <div class="card-body">
                                <h3 class="mb-2 fw-bold h5 text-primary">Frequently Asked Questions about
                                    {{ $ai_tool->tool_name }}</h3>

                                <div class="accordion" id="accordionAiToolFaq">

                                    @foreach ($ai_tool->qna as $key => $faq)
                                        <div class="accordion-item">
                                            <h2 class="accordion-header">
                                                <button class="accordion-button collapsed fw-semibold" type="button"
                                                    data-bs-toggle="collapse" data-bs-target="#collapse{{ $key }}"
                                                    {{ $key == 0 ? 'aria-expanded="true"' : '' }}
                                                    aria-controls="collapse{{ $key }}">
                                                    {{ $faq->q }}
                                                </button>
                                            </h2>
                                            <div id="collapse{{ $key }}"
                                                class="accordion-collapse collapse {{ $key == 0 ? 'show' : '' }}"
                                                data-bs-parent="#accordionAiToolFaq">
                                                <div class="accordion-body">
                                                    {!! $faq->a !!}
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach

                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
            <div class="col-12 col-sm-5 col-md-4 col-lg-4 col-xl-3">

                <div class="d-grid">
                    <a class="btn btn-primary breathing-effect text-decoration-none px-4 mb-4"
                        href="{{ add_params_to_url($ai_tool->external_url, ['ref' => 'aibuddytool.com']) }}">Visit
                        {{ $ai_tool->tool_name }} page ({{ get_domain_from_url($ai_tool->external_url) }})</a>
                </div>



                @include('front.partials.sidebar')
            </div>
        </div>

    </div>
    </div>
@endsection

@push('top_head')
    {!! $faq_context !!}
@endpush