@extends('layouts.app')

@section('title', 'SEF Solution | Business Growth Chat')

@section('content')
<div class="chat-page">
    <div class="chat-shell">
        <header class="chat-header">
            <div>
                <span class="brand-badge">SEF Solution</span>
                <h1>Business Growth Chat</h1>
                <p>কম কথায় সমস্যার দিক বলব, তারপর audit form নেব।</p>
            </div>
            <a href="{{ route('admin.login') }}" class="admin-link">Admin Login</a>
        </header>

        <section class="phone-bar">
            <div class="phone-bar-copy">
                <strong>ফোন নম্বর দিন</strong>
                <span>একই নম্বরে আগের chat restore করা যাবে</span>
            </div>
            <div class="phone-bar-form">
                <input type="text" id="visitorPhone" placeholder="01XXXXXXXXX">
                <button type="button" id="savePhoneBtn" class="send-btn">Start / Restore</button>
            </div>
        </section>

        <main class="chat-main" id="chatMain">
            <div class="msg-row bot">
                <div class="avatar avatar-bot">S</div>
                <div class="msg-bubble">
                    <p>আসসালামু আলাইকুম। আপনার business problem টি ১-২ লাইনে লিখুন। আমি বলব আমরা কী কী কাজ করতে পারি।</p>
                </div>
            </div>
        </main>

        <section class="lead-form-wrap hidden" id="leadFormWrap">
            <div class="lead-card">
                <h3>Free Audit Request Form</h3>
                <p>ফর্মটি পূরণ করলে আমাদের প্রতিনিধি আপনার page/business audit করে final meeting-এ join হবে।</p>
                <form id="leadForm" class="lead-grid">
                    <input type="text" name="name" placeholder="Name *" required>
                    <input type="text" name="phone" placeholder="Phone Number *" required>
                    <input type="text" name="facebook_page" placeholder="Facebook Page (Jodi thake)">
                    <input type="text" name="website" placeholder="Website (Jodi thake)">
                    <textarea name="pain_point" placeholder="Problem Box - apnar business er obostha o somossa likhun" required></textarea>
                    <button type="submit" class="send-btn form-submit-btn">Submit For Audit</button>
                </form>
            </div>
        </section>

        <section class="suggestion-wrap" id="suggestionWrap">
            <button type="button" class="suggestion-btn" data-text="আমার Facebook Ads এ sales আসছে না">Sales আসছে না</button>
            <button type="button" class="suggestion-btn" data-text="আমার page audit দরকার">Page Audit</button>
            <button type="button" class="suggestion-btn" data-text="Lead generation improve করতে চাই">Lead Improve</button>
            <button type="button" class="suggestion-btn" data-text="Pixel tracking ঠিক আছে কি না বুঝতে পারছি না">Tracking Problem</button>
            <button type="button" class="suggestion-btn" data-text="আমার website আছে কিন্তু conversion কম">Website Conversion কম</button>
        </section>

        <form class="chat-input-bar" id="chatForm">
            <button type="button" class="icon-btn plus-btn" aria-label="More options">+</button>
            <input type="text" id="chatMessage" name="message" placeholder="আপনার সমস্যাটা লিখুন..." autocomplete="off">
            <button type="button" class="icon-btn mic-btn" id="voiceBtn" aria-label="Voice input">🎙</button>
            <button type="submit" class="send-btn">Send</button>
        </form>

        <div class="mini-note" id="activityNote">
            Bot সংক্ষেপে reply দেবে এবং দরকার হলে audit form দেখাবে।
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    window.chatbotConfig = {
        identifyUrl: '{{ route('chat.identify') }}',
        sendUrl: '{{ route('chat.send') }}',
        trackUrl: '{{ route('chat.track') }}',
        leadUrl: '{{ route('lead.save') }}',
        csrf: '{{ csrf_token() }}'
    };
</script>
<script src="{{ asset('assets/js/chatbot.js') }}"></script>
@endpush