@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4>AI Business Automation Dashboard</h4>
                </div>
                <div class="card-body">
                    
                    <!-- Quick Actions -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <button class="btn btn-primary btn-block" onclick="processAllCustomers()">
                                Process All Customers
                            </button>
                        </div>
                        <div class="col-md-3">
                            <button class="btn btn-success btn-block" onclick="runFollowUps()">
                                Run Follow-ups
                            </button>
                        </div>
                        <div class="col-md-3">
                            <button class="btn btn-info btn-block" data-toggle="modal" data-target="#aiInstructionsModal">
                                AI Instructions
                            </button>
                        </div>
                        <div class="col-md-3">
                            <button class="btn btn-warning btn-block" onclick="viewPendingQuotes()">
                                Pending Quotes
                            </button>
                        </div>
                    </div>

                    <!-- Statistics -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="card bg-primary text-white">
                                <div class="card-body">
                                    <h5>Customers Processed Today</h5>
                                    <h2 id="customersProcessed">0</h2>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-success text-white">
                                <div class="card-body">
                                    <h5>AI Calls Made</h5>
                                    <h2 id="callsMade">0</h2>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-info text-white">
                                <div class="card-body">
                                    <h5>Messages Sent</h5>
                                    <h2 id="messagesSent">0</h2>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-warning text-white">
                                <div class="card-body">
                                    <h5>Quotes Generated</h5>
                                    <h2 id="quotesGenerated">0</h2>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Recent Activity -->
                    <div class="card">
                        <div class="card-header">
                            <h5>Recent AI Activity</h5>
                        </div>
                        <div class="card-body">
                            <div id="recentActivity">
                                <p class="text-muted">No recent activity</p>
                            </div>
                        </div>
                    </div>

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

<!-- AI Instructions Modal -->
<div class="modal fade" id="aiInstructionsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">AI Instructions</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="aiInstructionsForm">
                    <div class="form-group">
                        <label>Conversation Guidelines</label>
                        <textarea class="form-control" name="conversation" rows="3" placeholder="How AI should conduct conversations..."></textarea>
                    </div>
                    <div class="form-group">
                        <label>Service Information</label>
                        <textarea class="form-control" name="services" rows="3" placeholder="Information about Novatta services..."></textarea>
                    </div>
                    <div class="form-group">
                        <label>Pricing Guidelines</label>
                        <textarea class="form-control" name="pricing" rows="3" placeholder="Pricing information and guidelines..."></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="saveAIInstructions()">Save Instructions</button>
            </div>
        </div>
    </div>
</div>

<script>
function processAllCustomers() {
    alert('Processing all customers...');
}

function runFollowUps() {
    fetch('/automation/business:daily-followups', {method: 'POST'})
        .then(response => response.json())
        .then(data => {
            alert('Follow-ups completed: ' + data.messages_sent + ' messages sent');
        });
}

function saveAIInstructions() {
    const form = document.getElementById('aiInstructionsForm');
    const formData = new FormData(form);
    
    const instructions = [];
    for (let [key, value] of formData.entries()) {
        instructions.push({type: key, content: value});
    }
    
    fetch('/automation/ai-instructions', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify({instructions: instructions})
    })
    .then(response => response.json())
    .then(data => {
        alert('AI instructions updated successfully');
        $('#aiInstructionsModal').modal('hide');
    });
}

function viewPendingQuotes() {
    window.location.href = '/admin/quotes?status=draft';
}
</script>
@endsection