@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h4>ChatGPT Business Assistant</h4>
                    <select id="customerSelect" class="form-control mt-2">
                        <option value="">Select Customer</option>
                        @foreach(\App\Models\Customer::all() as $customer)
                            <option value="{{$customer->id}}">{{$customer->name}} - {{$customer->company}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="card-body">
                    <div id="chatMessages" style="height: 400px; overflow-y: auto; border: 1px solid #ddd; padding: 15px; margin-bottom: 15px;">
                        <div class="text-muted">Select a customer and start conversation...</div>
                    </div>
                    <div class="input-group">
                        <input type="text" id="messageInput" class="form-control" placeholder="Type your message...">
                        <div class="input-group-append">
                            <button class="btn btn-primary" onclick="sendMessage()">Send</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5>AI Analysis</h5>
                </div>
                <div class="card-body">
                    <div id="analysisResult">
                        <p class="text-muted">Send a message to see AI analysis</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
let currentCustomerId = null;

function sendMessage() {
    const customerId = document.getElementById('customerSelect').value;
    const message = document.getElementById('messageInput').value;
    
    if (!customerId || !message) {
        alert('Please select customer and enter message');
        return;
    }
    
    currentCustomerId = customerId;
    addMessageToChat('You', message, 'user');
    
    fetch('/automation/chat', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify({
            customer_id: customerId,
            message: message
        })
    })
    .then(response => response.json())
    .then(data => {
        addMessageToChat('AI Assistant', data.ai_response, 'ai');
        updateAnalysis(data.response);
        
        if (data.quote_created) alert('Quote generated!');
        if (data.task_created) alert('Task created!');
    });
    
    document.getElementById('messageInput').value = '';
}

function addMessageToChat(sender, message, type) {
    const chatDiv = document.getElementById('chatMessages');
    const messageDiv = document.createElement('div');
    messageDiv.className = `mb-3 ${type === 'user' ? 'text-right' : 'text-left'}`;
    
    messageDiv.innerHTML = `
        <div class="d-inline-block p-2 rounded ${type === 'user' ? 'bg-primary text-white' : 'bg-light'}">
            <strong>${sender}:</strong><br>${message}
        </div>
    `;
    
    chatDiv.appendChild(messageDiv);
    chatDiv.scrollTop = chatDiv.scrollHeight;
}

function updateAnalysis(analysis) {
    document.getElementById('analysisResult').innerHTML = `
        <p><strong>Service:</strong> ${analysis.service_category}</p>
        <p><strong>Stage:</strong> ${analysis.decision_stage}</p>
        <p><strong>Action:</strong> ${analysis.next_action}</p>
        <p><strong>Quote:</strong> ${analysis.requires_quotation ? 'Yes' : 'No'}</p>
    `;
}

document.getElementById('messageInput').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') sendMessage();
});
</script>
@endsection