@extends('layouts.public.app')

@section('title', 'AI Search | Chemical Wholesale')

@section('description', 'Search Chemicalwholesale using the power of AI')
@section('keywords', 'AI Search')
@section('metaimage', asset('img/logo-lg2.png'))

@section('content')

    <div class="">

        <div id="mainAiContainer" class="">

            <div class="home-hero">
                <div class="video-container d-flex align-items-center justify-content-center">
                    <video src="{{ asset('assets/img/aisearch/bgvideo.mp4') }}" autoplay muted loop playsinline>
                        Your browser does not support the video tag.
                    </video>
                    <div class="background-tint"></div>
                    <div class="home-hero-text">
                        <div class="d-flex justify-content-center mb-3">
                            <div class="text-container">
                                <h1 class="heading">Chemical Wholesale AI</h1>
                            </div>
                        </div>
                        <form action="{{ route('public.aisearch') }}" method="POST" autocomplete="off" id="aiSearchForm">
                            @csrf
                            <div class="d-flex justify-content-center w-100">
                                <div class="home-hero-search mb-3">
                                    <div class="autocomplete">
                                        <input type="text" name="aiprompt" id="aiprompt" class="form-control keyword"
                                            placeholder="Search" style="border-radius: 50px 0 0 50px"
                                            value="{{ $hasPrompt }}">
                                    </div>
                                    <button class="hero-search-btn ai-search-btn" type="submit" aria-label="Search"
                                        style="border-radius: 0 50px 50px 0;">
                                        <div class="d-block">
                                            <div class="d-flex align-items-center flex-row">
                                                <img src="{{ asset('assets/img/aisearch/search.png') }}" alt="icon"
                                                    style="width:35px;height:35px;position: relative;object-fit:cover;">
                                                <div class="ms-2 aisearchbtntext">AI Search</div>
                                            </div>
                                        </div>
                                    </button>

                                </div>
                            </div>

                            <div class="textscroll-container">
                                <div class="scroll-texts" id="scrollTexts">
                                    <span>What do you want to search?</span>
                                    <span>Chemicals for making paint</span>
                                    <span>Chemicals for cleaning pool</span>
                                    <span>Chemicals required for your agricultural work</span>
                                </div>
                            </div>
                        </form>

                    </div>


                </div>
            </div>

            <div class="container-fluid">
                <div id="aiResult" class="airesult"></div>
            </div>
        </div>
    </div>
@endsection
@push('css')
    <style>
        .ai-search-btn {
            position: relative;
            padding: 15px 30px 15px 12px;
            height: 65px;
            font-size: 1.2rem;
            font-weight: bold;
            color: #fff;
            background: linear-gradient(115deg, #4169e1 60%, #71b4ff 100%);
            border: none;
            border-radius: 50px;
            cursor: pointer;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 242, 254, 0.3);
            display: flex;
            align-items: center;
            transition: all 0.5s ease-in-out;
        }

        .home-hero-search input {
            box-shadow: 0 4px 15px rgba(0, 242, 254, 0.8) !important;
        }

        .ai-search-btn:hover {
            box-shadow: 0 4px 15px rgba(0, 242, 254, 0.8);
        }

        .ai-search-btn::before {
            content: "";
            position: absolute;
            top: 0;
            left: -75%;
            width: 50%;
            height: 100%;
            background: linear-gradient(120deg,
                    rgba(255, 255, 255, 0.2) 0%,
                    rgba(255, 255, 255, 0.6) 50%,
                    rgba(255, 255, 255, 0.2) 100%);
            transform: skewX(-20deg);
            animation: glance 2.5s infinite;
        }

        @keyframes glance {
            0% {
                left: -75%;
            }

            50% {
                left: 125%;
            }

            100% {
                left: 125%;
            }
        }

        .home-hero .text-container .heading {
            transition: all 0.5s ease-in-out;
            opacity: 1;
            line-height: 0;
            margin-bottom: 20px;
        }

        .video-container .home-hero-text {
            width: 100%;
        }

        .home-hero .home-hero-text .home-hero-search {
            transition: all 0.5s ease-in-out;
        }

        .aisearchresult .home-hero .home-hero-text .home-hero-search {
            width: 100%;
        }

        .aisearchresult .home-hero-search input {
            box-shadow: none !important;
        }

        .aisearchresult .home-hero .text-container .heading {
            opacity: 0;
            font-size: 28px !important;
            line-height: 0;
            margin-bottom: 0px;
        }

        .home-hero .video-container {
            height: calc(100vh - 250px);
            transition: all 0.5s ease-in-out;
            background: linear-gradient(to bottom, #000, #4169e1);
        }

        .aisearchresult .home-hero .video-container {
            height: 240px;
        }

        .aisearchresult .video-container .background-tint {
            background: linear-gradient(to bottom,
                    rgba(0, 0, 0, 0.4) 0%,
                    rgba(0, 0, 0, 0.4) 92%,
                    rgba(247, 247, 247, 1) 100%);
        }

        .aisearchresult .airesult {
            padding-top: 20px;
        }

        .airesponse {
            padding: 8px 15px;
            border-radius: 10px;
            border: 2px solid #ddd;
            color: #000;
            background: #eee;
            background: linear-gradient(115deg, rgba(238, 238, 238, 0.5) 80%, rgba(255, 255, 255, 0.8) 100%);
            display: block;
            width: auto;
            transition: all 0.6s ease-in-out;
        }

        .loading-block .airesponse {
            background: #fff;
            transition: all 0.6s ease-in-out;
        }

        .prompt {
            color: #000;
            margin-bottom: 5px;
        }

        .airesponse-loading {
            max-width: 100px;
            width: 100%;
            object-fit: contain;
            height: auto;
        }

        @media only screen and (max-width:600px) {
            .aisearchbtntext {
                display: none;
            }

            .home-hero .home-hero-text .home-hero-search .autocomplete {
                width: 100%;
            }

            .home-hero .video-container {
                height: calc(100vh - 100px);
            }
        }
    </style>

    <style>
        .textscroll-container {
            width: 100%;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: auto;
            color: #fff;
            margin-top: 15px;
            position: relative;
            height: 50px;
        }

        .scroll-texts {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .scroll-texts span {
            opacity: 0;
            position: absolute;
            white-space: nowrap;
            font-size: 16px;
            color: rgba(255, 255, 255, 0.8);
            animation: showText linear infinite;
        }

        @keyframes showText {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }

            10% {
                opacity: 1;
                transform: translateY(0);
            }

            30% {
                opacity: 1;
                transform: translateY(-15px);
            }

            40% {
                opacity: 0;
                transform: translateY(-20px);
            }

        }
    </style>
@endpush
@push('js')
    <script>
        $(document).ready(function() {
            $('#aiSearchForm').on('submit', function(e) {
                e.preventDefault();

                const prompt = $('#aiprompt').val().trim();
                const aiResult = $('#aiResult');

                if (!prompt) return;
                $('#mainAiContainer').addClass('aisearchresult');
                const loadingBlock = $(`
                    <div class="ai-block mb-4 loading-block">
                        <p class="prompt"><strong>AI Search Results:</strong> ${prompt}</p>
                        <p class="airesponse">
                            <span class="d-flex justify-content-center flex-column align-items-center py-4">
                                <img src="{{ asset('assets/img/aisearch/ai-loading.gif') }}" class="airesponse-loading">
                                <span class="fw-bold mt-3">Loading...</span>
                            </span>
                        </p>
                    </div>
                `);
                aiResult.html(loadingBlock);

                $.ajax({
                    url: "{{ route('ajax.aisearch') }}",
                    method: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        aiprompt: prompt
                    },
                    success: function(response) {
                        loadingBlock.removeClass('loading-block');
                        loadingBlock.find('.airesponse').html(`${response}`);
                    },
                    error: function(xhr) {
                        const errorMsg = xhr.responseJSON?.error ?? "An error occurred.";
                        loadingBlock.removeClass('loading-block');
                        loadingBlock.find('.airesponse').html(
                            `<span class="text-danger">${errorMsg}</span>`);
                    }
                });
            });
        });
    </script>

    <script>
        const spans = document.querySelectorAll('#scrollTexts span');
        const totalSearchText = spans.length;
        const durationPerText = 3;
        const totalDuration = totalSearchText * durationPerText;

        spans.forEach((span, index) => {
            span.style.animationDuration = `${totalDuration}s`;
            span.style.animationDelay = `${index * durationPerText}s`;
        });
    </script>
@endpush