@extends('admin.layout')

@section('title', __('Campagnes'))

@section('content')
<div class="row">
    <div class="col-12">
        <!-- En-tête -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h1 class="h3 mb-1" style="font-weight: 400;">
                    <i class="bi bi-megaphone text-primary me-2"></i>
                    {{ __('Gestion des Campagnes') }}
                </h1>
                <p class="text-muted mb-0" style="font-size: 0.9rem;">{{ __('Gérez vos campagnes de publipostage') }}</p>
            </div>
            <a href="{{ route('admin.campaigns.create') }}" class="btn btn-primary btn-sm" style="font-weight: 300;">
                <i class="bi bi-plus-circle me-2"></i>
                {{ __('Nouvelle Campagne') }}
            </a>
        </div>

        @if($campaigns->isEmpty())
            <div class="card border-0 shadow text-center" style="border-radius: 8px;">
                <div class="card-body p-5">
                    <i class="bi bi-inbox text-muted" style="font-size: 3rem;"></i>
                    <p class="text-muted mt-3 mb-0" style="font-size: 1rem; font-weight: 300;">{{ __('Aucune campagne disponible.') }}</p>
                    <a href="{{ route('admin.campaigns.create') }}" class="btn btn-primary btn-sm mt-3" style="font-weight: 300;">
                        <i class="bi bi-plus-circle me-2"></i>{{ __('Créer la première campagne') }}
                    </a>
                </div>
            </div>
        @else
            <div class="card border-0 shadow" style="border-radius: 8px;">
                <div class="card-body p-0">
                    <div class="p-3 border-bottom">
                        <div class="input-group input-group-sm" style="max-width: 320px;">
                            <span class="input-group-text bg-white border-end-0" style="font-weight: 300;">
                                <i class="bi bi-search text-muted"></i>
                            </span>
                            <input type="search" id="campaignsSearch" class="form-control border-start-0" placeholder="{{ __('Rechercher une campagne...') }}" style="font-weight: 300;">
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table id="campaignsTable" class="table table-hover mb-0" style="font-size: 0.95rem;">
                            <thead style="background: #f8f9fa; font-weight: 400;">
                                <tr>
                                    <th class="px-3" style="border-bottom: 1px solid #dee2e6; font-size: 0.95rem; font-weight: 300; padding-top: 0.25rem; padding-bottom: 0.25rem;">{{ __('Nom') }}</th>
                                    <th class="px-3" style="border-bottom: 1px solid #dee2e6; font-size: 0.95rem; font-weight: 300; padding-top: 0.25rem; padding-bottom: 0.25rem;">{{ __('Ouverte par') }}</th>
                                    <th class="px-3" style="border-bottom: 1px solid #dee2e6; font-size: 0.95rem; font-weight: 300; padding-top: 0.25rem; padding-bottom: 0.25rem;">{{ __('Liste Excel') }}</th>
                                    <th class="px-3" style="border-bottom: 1px solid #dee2e6; font-size: 0.95rem; font-weight: 300; padding-top: 0.25rem; padding-bottom: 0.25rem;">{{ __('Template') }}</th>
                                    <th class="px-3" style="border-bottom: 1px solid #dee2e6; font-size: 0.95rem; font-weight: 300; padding-top: 0.25rem; padding-bottom: 0.25rem;">{{ __('Statut') }}</th>
                                    <th class="px-3" style="border-bottom: 1px solid #dee2e6; font-size: 0.95rem; font-weight: 300; padding-top: 0.25rem; padding-bottom: 0.25rem;">{{ __('Créé le') }}</th>
                                    <th class="px-3 text-end" style="border-bottom: 1px solid #dee2e6; font-size: 0.95rem; font-weight: 300; padding-top: 0.25rem; padding-bottom: 0.25rem;">{{ __('Actions') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($campaigns as $campaign)
                                <tr>
                                    <td class="px-3" style="border-bottom: 1px solid #f0f0f0; padding-top: 0.25rem; padding-bottom: 0.25rem;">
                                        <div class="d-flex align-items-center">
                                            <div class="bg-primary bg-opacity-10 rounded-circle p-1 me-2" style="width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;">
                                                <i class="bi bi-megaphone text-primary" style="font-size: 0.85rem;"></i>
                                            </div>
                                            <span style="font-weight: 300; font-size: 0.95rem;">{{ $campaign->name }}</span>
                                        </div>
                                    </td>
                                    <td class="px-3" style="border-bottom: 1px solid #f0f0f0; padding-top: 0.25rem; padding-bottom: 0.25rem;">
                                        @if($campaign->user)
                                            <div class="d-flex align-items-center">
                                                <div class="bg-info bg-opacity-10 rounded-circle p-1 me-2" style="width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;">
                                                    <i class="bi bi-person text-info" style="font-size: 0.85rem;"></i>
                                                </div>
                                                <span style="font-weight: 300; font-size: 0.95rem;">{{ $campaign->user->name }}</span>
                                            </div>
                                        @else
                                            <span class="text-muted" style="font-size: 0.9rem; font-weight: 300;">
                                                <i class="bi bi-dash-circle me-1"></i>-
                                            </span>
                                        @endif
                                    </td>
                                    <td class="px-3" style="border-bottom: 1px solid #f0f0f0; padding-top: 0.25rem; padding-bottom: 0.25rem;">
                                        @if($campaign->excelFile)
                                            <span class="badge bg-info" style="font-weight: 300; font-size: 0.85rem;">
                                                <i class="bi bi-file-earmark-spreadsheet me-1"></i>{{ $campaign->excelFile->name }}
                                            </span>
                                            <small class="text-muted ms-2" style="font-size: 0.85rem;">{{ trans_choice('messages.rows', $campaign->excelFile->row_count, ['count' => number_format($campaign->excelFile->row_count, 0, ',', ' ')]) }}</small>
                                        @else
                                            <span class="text-muted" style="font-size: 0.9rem;">
                                                <i class="bi bi-dash-circle me-1"></i>-
                                            </span>
                                        @endif
                                    </td>
                                    <td class="px-3" style="border-bottom: 1px solid #f0f0f0; padding-top: 0.25rem; padding-bottom: 0.25rem;">
                                        @if($campaign->template)
                                            <span class="badge bg-primary" style="font-weight: 300; font-size: 0.85rem;">
                                                <i class="bi bi-file-earmark-text me-1"></i>{{ $campaign->template->name }}
                                            </span>
                                        @else
                                            <span class="text-muted" style="font-size: 0.9rem;">
                                                <i class="bi bi-dash-circle me-1"></i>-
                                            </span>
                                        @endif
                                    </td>
                                    <td class="px-3" style="border-bottom: 1px solid #f0f0f0; padding-top: 0.25rem; padding-bottom: 0.25rem;">
                                        @if($campaign->status === 'draft')
                                            <span class="badge bg-secondary" style="font-weight: 300; font-size: 0.85rem;">
                                                <i class="bi bi-file-earmark me-1"></i>Brouillon
                                            </span>
                                        @elseif($campaign->status === 'active')
                                            <span class="badge bg-success" style="font-weight: 300; font-size: 0.85rem;">
                                                <i class="bi bi-check-circle me-1"></i>Active
                                            </span>
                                        @elseif($campaign->status === 'completed')
                                            <span class="badge bg-info" style="font-weight: 300; font-size: 0.85rem;">
                                                <i class="bi bi-check2-all me-1"></i>Terminée
                                            </span>
                                        @elseif($campaign->status === 'paused')
                                            <span class="badge bg-warning" style="font-weight: 300; font-size: 0.85rem;">
                                                <i class="bi bi-pause-circle me-1"></i>En pause
                                            </span>
                                        @elseif($campaign->status === 'processing')
                                            <span class="badge bg-primary" style="font-weight: 300; font-size: 0.85rem;">
                                                <i class="bi bi-hourglass-split me-1"></i>En cours
                                            </span>
                                        @endif
                                    </td>
                                    <td class="px-3" style="border-bottom: 1px solid #f0f0f0; padding-top: 0.25rem; padding-bottom: 0.25rem;">
                                        <span style="font-size: 0.9rem;">{{ optional($campaign->created_at)->locale(app()->getLocale())->diffForHumans() }}</span>
                                    </td>
                                    <td class="px-3 text-end" style="border-bottom: 1px solid #f0f0f0; padding-top: 0.25rem; padding-bottom: 0.25rem;">
                                        <div class="btn-group" role="group">
                                            @if($campaign->status !== 'processing' && $campaign->status !== 'completed' && $campaign->excelFile && $campaign->template)
                                                <button type="button" 
                                                        class="btn btn-sm btn-outline-success" 
                                                        style="font-weight: 300; font-size: 0.85rem; padding: 0.2rem 0.4rem;" 
                                                        title="Exécuter"
                                                        data-bs-toggle="modal" 
                                                        data-bs-target="#executeModal{{ $campaign->id }}">
                                                    <i class="bi bi-play-circle"></i>
                                                </button>
                                            @endif
                                            <a href="{{ route('admin.campaigns.show', $campaign->id) }}" class="btn btn-sm btn-outline-info" style="font-weight: 300; font-size: 0.85rem; padding: 0.2rem 0.4rem;" title="Voir détails">
                                                <i class="bi bi-eye"></i>
                                            </a>
                                            <a href="{{ route('admin.campaigns.edit', $campaign->id) }}" class="btn btn-sm btn-outline-primary" style="font-weight: 300; font-size: 0.85rem; padding: 0.2rem 0.4rem;" title="Modifier">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                            <button type="button" 
                                                    class="btn btn-sm btn-outline-danger" 
                                                    style="font-weight: 300; font-size: 0.85rem; padding: 0.2rem 0.4rem;" 
                                                    title="Supprimer"
                                                    data-bs-toggle="modal" 
                                                    data-bs-target="#deleteModal{{ $campaign->id }}">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>

<!-- Modals de confirmation -->
@foreach($campaigns as $campaign)
    <!-- Modal Exécuter -->
    @if($campaign->status !== 'processing' && $campaign->status !== 'completed' && $campaign->excelFile && $campaign->template)
    <div class="modal fade" id="executeModal{{ $campaign->id }}" tabindex="-1" aria-labelledby="executeModalLabel{{ $campaign->id }}" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="border-radius: 12px;">
                <div class="modal-header border-0 pb-2">
                    <h5 class="modal-title" id="executeModalLabel{{ $campaign->id }}" style="font-weight: 300;">
                        <i class="bi bi-play-circle text-success me-2"></i>Exécuter la campagne
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="closeBtn{{ $campaign->id }}"></button>
                </div>
                <div class="modal-body" style="font-weight: 300;">
                    <div id="confirmSection{{ $campaign->id }}">
                        <p class="mb-0">{{ __('Êtes-vous sûr de vouloir exécuter la campagne ":name" ?', ['name' => $campaign->name]) }}</p>
                        <p class="text-muted mt-2 mb-0" style="font-size: 0.9rem;">Cette action va envoyer les emails à tous les destinataires de la liste Excel associée.</p>
                    </div>
                    <div id="progressSection{{ $campaign->id }}" style="display: none;">
                        <div class="mb-3">
                            <div class="d-flex justify-content-between mb-2">
                                <span style="font-size: 0.9rem;">Progression</span>
                                <span id="progressText{{ $campaign->id }}" style="font-size: 0.9rem; font-weight: 400;">0%</span>
                            </div>
                            <div class="progress" style="height: 25px; border-radius: 8px;">
                                <div class="progress-bar progress-bar-striped progress-bar-animated" 
                                     role="progressbar" 
                                     id="progressBar{{ $campaign->id }}"
                                     style="width: 0%; font-weight: 300; font-size: 0.85rem; line-height: 25px;">
                                    0%
                                </div>
                            </div>
                        </div>
                        <div class="row text-center mb-2">
                            <div class="col-4">
                                <div style="font-size: 0.85rem; color: #6c757d;">Total</div>
                                <div id="totalCount{{ $campaign->id }}" style="font-size: 1.1rem; font-weight: 400;">0</div>
                            </div>
                            <div class="col-4">
                                <div style="font-size: 0.85rem; color: #28a745;">Envoyés</div>
                                <div id="sentCount{{ $campaign->id }}" style="font-size: 1.1rem; font-weight: 400; color: #28a745;">0</div>
                            </div>
                            <div class="col-4">
                                <div style="font-size: 0.85rem; color: #dc3545;">Échecs</div>
                                <div id="failedCount{{ $campaign->id }}" style="font-size: 1.1rem; font-weight: 400; color: #dc3545;">0</div>
                            </div>
                        </div>
                        <div id="statusMessage{{ $campaign->id }}" class="text-center mt-3" style="font-size: 0.9rem; color: #6c757d;">
                            <i class="bi bi-hourglass-split me-2"></i>En cours d'exécution...
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-2">
                    <form action="{{ route('admin.campaigns.execute', $campaign->id) }}" method="POST" class="d-inline" id="executeForm{{ $campaign->id }}">
                        @csrf
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal" style="font-weight: 300;" id="cancelBtn{{ $campaign->id }}">Annuler</button>
                        <button type="submit" class="btn btn-success" style="font-weight: 300;" id="executeBtn{{ $campaign->id }}">
                            <i class="bi bi-play-circle me-2"></i>Exécuter
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Modal Supprimer -->
    <div class="modal fade" id="deleteModal{{ $campaign->id }}" tabindex="-1" aria-labelledby="deleteModalLabel{{ $campaign->id }}" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="border-radius: 12px;">
                <div class="modal-header border-0 pb-2">
                    <h5 class="modal-title" id="deleteModalLabel{{ $campaign->id }}" style="font-weight: 300;">
                        <i class="bi bi-exclamation-triangle text-danger me-2"></i>Supprimer la campagne
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" style="font-weight: 300;">
                    <p class="mb-0">{{ __('Êtes-vous sûr de vouloir supprimer la campagne ":name" ?', ['name' => $campaign->name]) }}</p>
                    <p class="text-danger mt-2 mb-0" style="font-size: 0.9rem;">Cette action est irréversible.</p>
                </div>
                <div class="modal-footer border-0 pt-2">
                    <form action="{{ route('admin.campaigns.destroy', $campaign->id) }}" method="POST" class="d-inline">
                        @csrf
                        @method('DELETE')
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal" style="font-weight: 300;">Annuler</button>
                        <button type="submit" class="btn btn-danger" style="font-weight: 300;">
                            <i class="bi bi-trash me-2"></i>Supprimer
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endforeach

<script>
document.addEventListener('DOMContentLoaded', function() {
    const campaignSearchInput = document.getElementById('campaignsSearch');
    if (campaignSearchInput) {
        const rows = document.querySelectorAll('#campaignsTable tbody tr');
        campaignSearchInput.addEventListener('input', function () {
            const term = this.value.trim().toLowerCase();
            rows.forEach(row => {
                row.style.display = row.textContent.toLowerCase().includes(term) ? '' : 'none';
            });
        });
    }

    @foreach($campaigns as $campaign)
        @if($campaign->status !== 'processing' && $campaign->status !== 'completed' && $campaign->excelFile && $campaign->template)
        (function() {
            const campaignId = {{ $campaign->id }};
            const form = document.getElementById('executeForm' + campaignId);
            const confirmSection = document.getElementById('confirmSection' + campaignId);
            const progressSection = document.getElementById('progressSection' + campaignId);
            const executeBtn = document.getElementById('executeBtn' + campaignId);
            const cancelBtn = document.getElementById('cancelBtn' + campaignId);
            const closeBtn = document.getElementById('closeBtn' + campaignId);
            let progressInterval = null;

            function startProgressPolling(campaignId) {
                // Arrêter le polling précédent s'il existe
                if (progressInterval) {
                    clearInterval(progressInterval);
                }
                
                progressInterval = setInterval(function() {
                    fetch('{{ route("admin.campaigns.progress", ":id") }}'.replace(':id', campaignId))
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('Erreur HTTP: ' + response.status);
                            }
                            return response.json();
                        })
                        .then(data => {
                            updateProgress(campaignId, data);
                            
                            if (data.status === 'completed' || data.status === 'error') {
                                clearInterval(progressInterval);
                                progressInterval = null;
                                
                                // Attendre 2 secondes puis recharger la page
                                setTimeout(function() {
                                    window.location.reload();
                                }, 2000);
                            }
                        })
                        .catch(error => {
                            console.error('Erreur lors de la récupération de la progression:', error);
                        });
                }, 1000); // Poll toutes les secondes
            }

            if (form) {
                form.addEventListener('submit', function(e) {
                    e.preventDefault();
                    
                    // Afficher la section de progression
                    confirmSection.style.display = 'none';
                    progressSection.style.display = 'block';
                    executeBtn.style.display = 'none';
                    cancelBtn.style.display = 'none';
                    closeBtn.style.display = 'none';
                    
                    // Lancer l'exécution via AJAX
                    const formData = new FormData(form);
                    
                    // S'assurer que le token CSRF est dans le FormData
                    const tokenInput = form.querySelector('input[name="_token"]');
                    if (!tokenInput) {
                        console.error('Token CSRF non trouvé dans le formulaire');
                        updateProgress(campaignId, {
                            status: 'error',
                            error: 'Token CSRF non trouvé. Veuillez recharger la page.'
                        });
                        return;
                    }
                    
                    const token = tokenInput.value;
                    
                    // Démarrer le polling immédiatement (avant même la réponse)
                    startProgressPolling(campaignId);
                    
                    fetch(form.action, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': token,
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        body: formData
                    }).then(response => {
                        // Lire la réponse même si elle n'est pas OK pour obtenir le message d'erreur
                        return response.json().then(data => {
                            if (!response.ok) {
                                throw new Error(data.error || data.message || 'Erreur HTTP: ' + response.status);
                            }
                            return data;
                        }).catch(err => {
                            // Si la réponse n'est pas du JSON, retourner une erreur générique
                            if (err instanceof SyntaxError) {
                                throw new Error('Erreur HTTP: ' + response.status + ' - Réponse invalide du serveur');
                            }
                            throw err;
                        });
                    }).then(data => {
                        // La réponse confirme que l'exécution a été lancée
                        console.log('Exécution lancée:', data);
                    }).catch(error => {
                        console.error('Erreur:', error);
                        if (progressInterval) {
                            clearInterval(progressInterval);
                            progressInterval = null;
                        }
                        updateProgress(campaignId, {
                            status: 'error',
                            error: error.message || 'Erreur lors du lancement de l\'exécution'
                        });
                    });
                });
            }

            function updateProgress(campaignId, data) {
                const progressBar = document.getElementById('progressBar' + campaignId);
                const progressText = document.getElementById('progressText' + campaignId);
                const totalCount = document.getElementById('totalCount' + campaignId);
                const sentCount = document.getElementById('sentCount' + campaignId);
                const failedCount = document.getElementById('failedCount' + campaignId);
                const statusMessage = document.getElementById('statusMessage' + campaignId);

                if (data.status === 'error') {
                    progressBar.style.width = '100%';
                    progressBar.className = 'progress-bar bg-danger';
                    progressBar.textContent = 'Erreur';
                    progressText.textContent = 'Erreur';
                    statusMessage.innerHTML = '<i class="bi bi-x-circle text-danger me-2"></i>Erreur: ' + (data.error || 'Une erreur est survenue');
                    return;
                }

                if (data.status === 'completed') {
                    progressBar.style.width = '100%';
                    progressBar.className = 'progress-bar bg-success';
                    progressBar.textContent = 'Terminé';
                    progressText.textContent = '100%';
                    statusMessage.innerHTML = '<i class="bi bi-check-circle text-success me-2"></i>Exécution terminée avec succès !';
                    return;
                }

                if (data.total && data.total > 0) {
                    const percentage = Math.round((data.processed / data.total) * 100);
                    progressBar.style.width = percentage + '%';
                    progressBar.textContent = percentage + '%';
                    progressText.textContent = percentage + '%';
                    totalCount.textContent = data.total;
                    sentCount.textContent = data.sent || 0;
                    failedCount.textContent = data.failed || 0;
                }
            }
        })();
        @endif
    @endforeach
});
</script>
@endsection