@extends('layouts.main')

@section('title')
    {{ __('campaigns.campaign_processing') }}
@endsection

@section('page_title')
    {{ __('campaigns.campaign_processing') }}
@endsection

@php
    $breadcrumbs = [
        ['url' => route('events.index'), 'label' => __('events.title')],
        ['url' => route('campaigns.index', $campaign->event_id), 'label' => __('campaigns.title')],
        ['url' => '', 'label' => __('campaigns.processing')],
    ];
@endphp

@push('custom_styles')
    <style>
        .processing-container {
            max-width: 800px;
            margin: 0 auto;
        }
        .progress-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 15px;
            padding: 2rem;
            margin-bottom: 2rem;
        }
        .status-item {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 1rem;
            margin: 0.5rem 0;
        }
        .progress-bar {
            height: 20px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.2);
            overflow: hidden;
        }
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #4CAF50, #8BC34A);
            transition: width 0.3s ease;
            border-radius: 10px;
        }
        .details-table {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .status-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.875rem;
            font-weight: 500;
        }
        .status-completed { background: #d4edda; color: #155724; }
        .status-processing { background: #fff3cd; color: #856404; }
        .status-failed { background: #f8d7da; color: #721c24; }
        .status-pending { background: #e2e3e5; color: #383d41; }
    </style>
@endpush

@section('content')
    <div class="content-wrapper container-xxl p-0">
        <div class="content-body">
            <div class="processing-container">
                <!-- Campaign Info -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h4 class="card-title mb-0">
                            <i data-feather="send" class="me-2"></i>
                            Campaign: {{ $campaign->name }}
                        </h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <strong>{{ __('campaigns.event_label') }}</strong> {{ $campaign->event->name }}
                            </div>
                            <div class="col-md-6">
                                <strong>{{ __('campaigns.started') }}</strong> {{ $campaign->created_at->format('Y-m-d H:i:s') }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Progress Card -->
                <div class="progress-card">
                    <div class="text-center mb-3">
                        <h3 class="mb-2">{{ __('campaigns.campaign_processing') }}</h3>
                        <p class="mb-0">{{ __('campaigns.sending_whatsapp_invitations') }}</p>
                    </div>
                    
                    <div class="progress-bar mb-3">
                        <div class="progress-fill" id="progressFill" style="width: 0%"></div>
                    </div>
                    
                    <div class="text-center">
                        <span id="progressText">0%</span>
                        <span class="ms-2">(<span id="processedCount">0</span> / <span id="totalCount">0</span>)</span>
                    </div>
                </div>

                <!-- Status Overview -->
                <div class="row mb-4">
                    <div class="col-md-3">
                        <div class="status-item text-center">
                            <div class="h4 mb-1" id="completedCount">0</div>
                            <div class="small">{{ __('campaigns.completed') }}</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="status-item text-center">
                            <div class="h4 mb-1" id="processingCount">0</div>
                            <div class="small">{{ __('campaigns.processing') }}</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="status-item text-center">
                            <div class="h4 mb-1" id="failedCount">0</div>
                            <div class="small">{{ __('campaigns.failed') }}</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="status-item text-center">
                            <div class="h4 mb-1" id="pendingCount">0</div>
                            <div class="small">{{ __('campaigns.pending') }}</div>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="text-center mb-4">
                    <button class="btn btn-outline-primary me-2" onclick="refreshStatus()">
                        <i data-feather="refresh-cw" class="me-1"></i>
                        {{ __('campaigns.refresh') }}
                    </button>
                    <button class="btn btn-outline-info me-2" onclick="showDetails()">
                        <i data-feather="list" class="me-1"></i>
                        {{ __('campaigns.view_details') }}
                    </button>
                    <a href="{{ route('campaigns.report', $campaign->id) }}" class="btn btn-success" id="viewReportBtn" style="display: none;">
                        <i data-feather="bar-chart-2" class="me-1"></i>
                        {{ __('campaigns.view_report') }}
                    </a>
                </div>

                <!-- Details Table -->
                <div class="details-table" id="detailsTable" style="display: none;">
                    <!-- Desktop Table View -->
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>{{ __('campaigns.contact') }}</th>
                                    <th>{{ __('campaigns.mobile_number') }}</th>
                                    <th>{{ __('campaigns.status') }}</th>
                                    <th>{{ __('campaigns.error') }}</th>
                                    <th>{{ __('campaigns.time') }}</th>
                                </tr>
                            </thead>
                            <tbody id="detailsTableBody">
                                <!-- Details will be loaded here -->
                            </tbody>
                        </table>
                    </div>

                    <!-- Mobile/Tablet Card View -->
                    <div class="mobile-cards-container" id="mobileDetailsContainer">
                        <!-- Mobile cards will be loaded here -->
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('custom_scripts')
    <script>
        const campaignId = {{ $campaign->id }};
        const statusUrl = '{{ route("campaigns.processing.status", $campaign->id) }}';
        const detailsUrl = '{{ route("campaigns.processing.details", $campaign->id) }}';
        const reportUrl = '{{ route("campaigns.report", $campaign->id) }}';
        
        let statusInterval;
        let isProcessing = true;

        // Start status polling
        function startStatusPolling() {
            statusInterval = setInterval(updateStatus, 2000); // Update every 2 seconds
            updateStatus(); // Initial update
        }

        // Update status
        async function updateStatus() {
            try {
                const response = await fetch(statusUrl);
                const data = await response.json();
                
                if (data.success) {
                    updateProgress(data.data);
                    
                    // Check if processing is complete
                    if (data.data.campaign_status === 'completed' || data.data.campaign_status === 'failed') {
                        isProcessing = false;
                        clearInterval(statusInterval);
                        
                        if (data.data.campaign_status === 'completed') {
                            document.getElementById('viewReportBtn').style.display = 'inline-block';
                        }
                    }
                }
            } catch (error) {
                console.error('Error updating status:', error);
            }
        }

        // Update progress display
        function updateProgress(data) {
            // Update progress bar
            const progressFill = document.getElementById('progressFill');
            const progressText = document.getElementById('progressText');
            progressFill.style.width = data.percentage + '%';
            progressText.textContent = data.percentage + '%';
            
            // Update counts
            document.getElementById('processedCount').textContent = data.processed;
            document.getElementById('totalCount').textContent = data.total;
            document.getElementById('completedCount').textContent = data.success;
            document.getElementById('processingCount').textContent = data.processing;
            document.getElementById('failedCount').textContent = data.failed;
            document.getElementById('pendingCount').textContent = data.total - data.processed;
        }

        // Refresh status manually
        function refreshStatus() {
            updateStatus();
        }

        // Show details
        async function showDetails() {
            const detailsTable = document.getElementById('detailsTable');
            const tableBody = document.getElementById('detailsTableBody');
            const mobileContainer = document.getElementById('mobileDetailsContainer');
            
            if (detailsTable.style.display === 'none') {
                try {
                    const response = await fetch(detailsUrl);
                    const data = await response.json();
                    
                    if (data.success) {
                        // Populate desktop table
                        tableBody.innerHTML = data.data.map(item => `
                            <tr>
                                <td>${item.name}</td>
                                <td>${item.mobile_number}</td>
                                <td>
                                    <span class="status-badge status-${item.status.toLowerCase()}">
                                        ${item.status}
                                    </span>
                                </td>
                                <td>${item.failed_reason || '-'}</td>
                                <td>${item.created_at}</td>
                            </tr>
                        `).join('');
                        
                        // Populate mobile cards
                        mobileContainer.innerHTML = data.data.map(item => {
                            const statusClass = getMobileStatusClass(item.status);
                            const statusIcon = getMobileStatusIcon(item.status);
                            
                            return `
                                <div class="mobile-card">
                                    <div class="mobile-card-header">
                                        <div class="flex items-center space-x-3">
                                            <div class="mobile-card-icon mobile-card-icon-primary">
                                                <i class="fas fa-user"></i>
                                            </div>
                                            <div class="flex-1 min-w-0">
                                                <h3 class="mobile-card-title">${item.name}</h3>
                                                <p class="mobile-card-subtitle">${item.mobile_number}</p>
                                            </div>
                                        </div>
                                        <span class="mobile-status-badge ${statusClass}">
                                            <i class="${statusIcon} text-xs mr-1"></i>
                                            ${item.status}
                                        </span>
                                    </div>
                                    
                                    <div class="mobile-card-body">
                                        <div class="mobile-card-row">
                                            <div class="mobile-card-label">
                                                <i class="fas fa-phone text-green-600"></i>
                                                <span>Mobile</span>
                                            </div>
                                            <div class="mobile-card-value">${item.mobile_number}</div>
                                        </div>
                                        
                                        <div class="mobile-card-row">
                                            <div class="mobile-card-label">
                                                <i class="fas fa-clock text-blue-600"></i>
                                                <span>Time</span>
                                            </div>
                                            <div class="mobile-card-value">${item.created_at}</div>
                                        </div>
                                        
                                        ${item.failed_reason ? `
                                            <div class="mobile-card-row">
                                                <div class="mobile-card-label">
                                                    <i class="fas fa-exclamation-triangle text-red-600"></i>
                                                    <span>Error</span>
                                                </div>
                                                <div class="mobile-card-value text-red-600">${item.failed_reason}</div>
                                            </div>
                                        ` : ''}
                                    </div>
                                </div>
                            `;
                        }).join('');
                        
                        detailsTable.style.display = 'block';
                    }
                } catch (error) {
                    console.error('Error loading details:', error);
                }
            } else {
                detailsTable.style.display = 'none';
            }
        }

        // Helper functions for mobile status styling
        function getMobileStatusClass(status) {
            switch(status.toLowerCase()) {
                case 'delivered':
                case 'completed':
                    return 'mobile-status-delivered';
                case 'failed':
                case 'error':
                    return 'mobile-status-failed';
                case 'processing':
                case 'in progress':
                    return 'mobile-status-progress';
                default:
                    return 'mobile-status-progress';
            }
        }

        function getMobileStatusIcon(status) {
            switch(status.toLowerCase()) {
                case 'delivered':
                case 'completed':
                    return 'fas fa-check-circle';
                case 'failed':
                case 'error':
                    return 'fas fa-times-circle';
                case 'processing':
                case 'in progress':
                    return 'fas fa-clock';
                default:
                    return 'fas fa-clock';
            }
        }

        // Initialize
        document.addEventListener('DOMContentLoaded', function() {
            startStatusPolling();
        });

        // Cleanup on page unload
        window.addEventListener('beforeunload', function() {
            if (statusInterval) {
                clearInterval(statusInterval);
            }
        });
    </script>
@endpush