@extends('crm.layouts.app')

@section('title', 'Marketing Automation')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-2">Marketing Automation</h1>
        <p class="text-gray-600">Automate your marketing campaigns and client communications</p>
    </div>

    <!-- Marketing Stats -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center">
                <div class="p-3 bg-blue-100 rounded-full">
                    <i class="fas fa-paper-plane text-blue-600 text-xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm text-gray-600">Messages Sent (30d)</p>
                    <p class="text-2xl font-bold text-gray-900">{{ number_format($stats['messages_sent_30d']) }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center">
                <div class="p-3 bg-green-100 rounded-full">
                    <i class="fas fa-envelope-open text-green-600 text-xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm text-gray-600">Open Rate (30d)</p>
                    <p class="text-2xl font-bold text-gray-900">{{ $stats['open_rate_30d'] }}%</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center">
                <div class="p-3 bg-purple-100 rounded-full">
                    <i class="fas fa-mouse-pointer text-purple-600 text-xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm text-gray-600">Click Rate (30d)</p>
                    <p class="text-2xl font-bold text-gray-900">{{ $stats['click_rate_30d'] }}%</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center">
                <div class="p-3 bg-orange-100 rounded-full">
                    <i class="fas fa-chart-line text-orange-600 text-xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm text-gray-600">Conversion Rate (30d)</p>
                    <p class="text-2xl font-bold text-gray-900">{{ $stats['conversion_rate_30d'] }}%</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="bg-white rounded-lg shadow-sm p-6 mb-8">
        <h2 class="text-xl font-bold text-gray-900 mb-4">Quick Actions</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <button onclick="showCreateCampaignModal()" class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors">
                <i class="fas fa-plus mr-2"></i>New Campaign
            </button>
            <button onclick="showCreateAutomationModal()" class="bg-green-600 text-white px-6 py-3 rounded-lg hover:bg-green-700 transition-colors">
                <i class="fas fa-robot mr-2"></i>New Automation
            </button>
            <button onclick="showCreateTemplateModal()" class="bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 transition-colors">
                <i class="fas fa-file-alt mr-2"></i>New Template
            </button>
        </div>
    </div>

    <!-- Tabs -->
    <div class="bg-white rounded-lg shadow-sm mb-8">
        <div class="border-b border-gray-200">
            <nav class="flex space-x-8 px-6" aria-label="Tabs">
                <button onclick="showTab('campaigns')" class="tab-button active" data-tab="campaigns">
                    <i class="fas fa-bullhorn mr-2"></i>Campaigns
                </button>
                <button onclick="showTab('automations')" class="tab-button" data-tab="automations">
                    <i class="fas fa-robot mr-2"></i>Automations
                </button>
                <button onclick="showTab('templates')" class="tab-button" data-tab="templates">
                    <i class="fas fa-file-alt mr-2"></i>Templates
                </button>
                <button onclick="showTab('analytics')" class="tab-button" data-tab="analytics">
                    <i class="fas fa-chart-bar mr-2"></i>Analytics
                </button>
            </nav>
        </div>

        <!-- Campaigns Tab -->
        <div id="campaigns-tab" class="tab-content">
            <div class="p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Recent Campaigns</h3>

                @if($campaigns->count() > 0)
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Campaign</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Sent</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Open Rate</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @foreach($campaigns as $campaign)
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <i class="fas fa-bullhorn text-gray-400 mr-3"></i>
                                                <div>
                                                    <div class="text-sm font-medium text-gray-900">{{ $campaign->name }}</div>
                                                    <div class="text-sm text-gray-500">{{ $campaign->target_audience }}</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">
                                                {{ ucfirst($campaign->type) }}
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 py-1 text-xs font-medium rounded-full bg-{{ $campaign->status_color }}-100 text-{{ $campaign->status_color }}-800">
                                                {{ $campaign->status_label }}
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                            {{ number_format($campaign->total_sent) }}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                            {{ $campaign->open_rate }}%
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <div class="flex space-x-2">
                                                <button onclick="viewCampaign({{ $campaign->id }})" class="text-blue-600 hover:text-blue-900">
                                                    <i class="fas fa-eye"></i>
                                                </button>
                                                <button onclick="duplicateCampaign({{ $campaign->id }})" class="text-green-600 hover:text-green-900">
                                                    <i class="fas fa-copy"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="text-center py-12">
                        <i class="fas fa-bullhorn text-gray-400 text-6xl mb-4"></i>
                        <h3 class="text-lg font-semibold text-gray-900 mb-2">No campaigns yet</h3>
                        <p class="text-gray-600 mb-4">Create your first marketing campaign to get started</p>
                        <button onclick="showCreateCampaignModal()" class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors">
                            <i class="fas fa-plus mr-2"></i>Create Campaign
                        </button>
                    </div>
                @endif
            </div>
        </div>

        <!-- Automations Tab -->
        <div id="automations-tab" class="tab-content hidden">
            <div class="p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Active Automations</h3>

                @if($automations->count() > 0)
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        @foreach($automations as $automation)
                            <div class="bg-gray-50 rounded-lg p-6">
                                <div class="flex items-center justify-between mb-4">
                                    <h4 class="font-semibold text-gray-900">{{ $automation->name }}</h4>
                                    <span class="px-2 py-1 text-xs font-medium rounded-full bg-{{ $automation->status_color }}-100 text-{{ $automation->status_color }}-800">
                                        {{ $automation->status_label }}
                                    </span>
                                </div>

                                <div class="space-y-3">
                                    <div class="flex items-center text-sm">
                                        <i class="fas fa-bolt text-gray-400 mr-3"></i>
                                        <span class="text-gray-600">{{ $automation->trigger_description }}</span>
                                    </div>

                                    <div class="flex items-center text-sm">
                                        <i class="fas fa-clock text-gray-400 mr-3"></i>
                                        <span class="text-gray-600">{{ $automation->delay_description }}</span>
                                    </div>

                                    <div class="flex items-center text-sm">
                                        <i class="fas fa-paper-plane text-gray-400 mr-3"></i>
                                        <span class="text-gray-600">{{ $automation->total_sent }} sent</span>
                                    </div>

                                    <div class="flex items-center text-sm">
                                        <i class="fas fa-percentage text-gray-400 mr-3"></i>
                                        <span class="text-gray-600">{{ $automation->open_rate }}% open rate</span>
                                    </div>
                                </div>

                                <div class="flex justify-end space-x-2 mt-4">
                                    @if($automation->is_active)
                                        <button onclick="pauseAutomation({{ $automation->id }})" class="text-orange-600 hover:text-orange-900">
                                            <i class="fas fa-pause"></i>
                                        </button>
                                    @else
                                        <button onclick="resumeAutomation({{ $automation->id }})" class="text-green-600 hover:text-green-900">
                                            <i class="fas fa-play"></i>
                                        </button>
                                    @endif
                                    <button onclick="editAutomation({{ $automation->id }})" class="text-blue-600 hover:text-blue-900">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-12">
                        <i class="fas fa-robot text-gray-400 text-6xl mb-4"></i>
                        <h3 class="text-lg font-semibold text-gray-900 mb-2">No automations yet</h3>
                        <p class="text-gray-600 mb-4">Create your first marketing automation to get started</p>
                        <button onclick="showCreateAutomationModal()" class="bg-green-600 text-white px-6 py-3 rounded-lg hover:bg-green-700 transition-colors">
                            <i class="fas fa-plus mr-2"></i>Create Automation
                        </button>
                    </div>
                @endif
            </div>
        </div>

        <!-- Templates Tab -->
        <div id="templates-tab" class="tab-content hidden">
            <div class="p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Message Templates</h3>

                @if($templates->count() > 0)
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        @foreach($templates as $template)
                            <div class="bg-gray-50 rounded-lg p-6">
                                <div class="flex items-center justify-between mb-4">
                                    <h4 class="font-semibold text-gray-900">{{ $template->name }}</h4>
                                    <i class="{{ $template->type_icon }} text-gray-400"></i>
                                </div>

                                <div class="space-y-3">
                                    <div class="flex items-center text-sm">
                                        <span class="px-2 py-1 text-xs font-medium rounded-full {{ $template->category_color }}">
                                            {{ ucfirst($template->category) }}
                                        </span>
                                    </div>

                                    <p class="text-sm text-gray-600">{{ $template->preview_content }}</p>

                                    <div class="flex items-center text-sm">
                                        <i class="fas fa-chart-line text-gray-400 mr-2"></i>
                                        <span class="text-gray-600">{{ $template->performance_grade }} Grade</span>
                                    </div>

                                    <div class="flex items-center text-sm">
                                        <i class="fas fa-paper-plane text-gray-400 mr-2"></i>
                                        <span class="text-gray-600">{{ $template->usage_count }} uses</span>
                                    </div>
                                </div>

                                <div class="flex justify-end space-x-2 mt-4">
                                    <button onclick="testTemplate({{ $template->id }})" class="text-blue-600 hover:text-blue-900">
                                        <i class="fas fa-paper-plane"></i>
                                    </button>
                                    <button onclick="editTemplate({{ $template->id }})" class="text-green-600 hover:text-green-900">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button onclick="duplicateTemplate({{ $template->id }})" class="text-purple-600 hover:text-purple-900">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-12">
                        <i class="fas fa-file-alt text-gray-400 text-6xl mb-4"></i>
                        <h3 class="text-lg font-semibold text-gray-900 mb-2">No templates yet</h3>
                        <p class="text-gray-600 mb-4">Create your first message template to get started</p>
                        <button onclick="showCreateTemplateModal()" class="bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 transition-colors">
                            <i class="fas fa-plus mr-2"></i>Create Template
                        </button>
                    </div>
                @endif
            </div>
        </div>

        <!-- Analytics Tab -->
        <div id="analytics-tab" class="tab-content hidden">
            <div class="p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Marketing Analytics</h3>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="bg-gray-50 rounded-lg p-6">
                        <h4 class="font-semibold text-gray-900 mb-4">Campaign Performance</h4>
                        <div class="space-y-3">
                            <div class="flex justify-between">
                                <span class="text-gray-600">Total Campaigns</span>
                                <span class="font-semibold">{{ $stats['total_campaigns'] }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">Active Campaigns</span>
                                <span class="font-semibold">{{ $stats['active_campaigns'] }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">Total Messages Sent</span>
                                <span class="font-semibold">{{ number_format($stats['messages_sent_30d']) }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="bg-gray-50 rounded-lg p-6">
                        <h4 class="font-semibold text-gray-900 mb-4">Automation Performance</h4>
                        <div class="space-y-3">
                            <div class="flex justify-between">
                                <span class="text-gray-600">Total Automations</span>
                                <span class="font-semibold">{{ $stats['total_automations'] }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">Active Automations</span>
                                <span class="font-semibold">{{ $stats['active_automations'] }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">Avg. Open Rate</span>
                                <span class="font-semibold">{{ $stats['open_rate_30d'] }}%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modals will be added here -->
<div id="modals-container"></div>

@push('scripts')
<script>
// Tab functionality
function showTab(tabName) {
    // Hide all tab contents
    document.querySelectorAll('.tab-content').forEach(content => {
        content.classList.add('hidden');
    });

    // Remove active class from all tab buttons
    document.querySelectorAll('.tab-button').forEach(button => {
        button.classList.remove('active');
    });

    // Show selected tab content
    document.getElementById(tabName + '-tab').classList.remove('hidden');

    // Add active class to selected tab button
    document.querySelector(`[data-tab="${tabName}"]`).classList.add('active');
}

// Modal functions
function showCreateCampaignModal() {
    alert('Create Campaign modal would open here');
}

function showCreateAutomationModal() {
    alert('Create Automation modal would open here');
}

function showCreateTemplateModal() {
    alert('Create Template modal would open here');
}

function viewCampaign(campaignId) {
    window.location.href = `/crm/marketing-automation/campaigns/${campaignId}`;
}

function duplicateCampaign(campaignId) {
    if (confirm('Are you sure you want to duplicate this campaign?')) {
        fetch(`/crm/marketing-automation/campaigns/${campaignId}/duplicate`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while duplicating the campaign.');
        });
    }
}

function pauseAutomation(automationId) {
    fetch(`/crm/marketing-automation/automations/${automationId}/pause`, {
        method: 'PATCH',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Error: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while pausing the automation.');
    });
}

function resumeAutomation(automationId) {
    fetch(`/crm/marketing-automation/automations/${automationId}/resume`, {
        method: 'PATCH',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Error: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while resuming the automation.');
    });
}

function testTemplate(templateId) {
    const email = prompt('Enter email address to send test:');
    if (email) {
        fetch('/crm/marketing-automation/templates/test', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                template_id: templateId,
                test_email: email
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Test message sent successfully!');
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while sending the test message.');
        });
    }
}

function editTemplate(templateId) {
    alert('Edit template modal would open here');
}

function duplicateTemplate(templateId) {
    alert('Duplicate template functionality would be implemented here');
}

function editAutomation(automationId) {
    alert('Edit automation modal would open here');
}
</script>

<style>
.tab-button {
    @apply py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition-colors;
}

.tab-button.active {
    @apply border-blue-500 text-blue-600;
}
</style>
@endpush
@endsection