@extends('dashboard.layouts.app')

@section('title', 'Gestion des Sondages - UAC eservices')

@section('page-title', 'Gestion des Sondages')

@section('breadcrumb')
    <li class="breadcrumb-item active" aria-current="page">Sondages</li>
@endsection

@push('styles')
<meta name="csrf-token" content="{{ csrf_token() }}">
@endpush

{{-- @section('page-actions')

@endsection --}}

@section('content')
<!-- -------------------------------------------------------------- -->
<!-- Start Page Content -->
<!-- -------------------------------------------------------------- -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <a href="{{ route('surveys.create') }}" class="btn btn-primary">
                <i class="mdi mdi-plus"></i> Créer un sondage
            </a>
            <div class="card-body">
                <h4 class="card-title">Liste des Sondages</h4>

                <!-- Filters and Search -->
                <div class="row mb-4">
                    <div class="col-md-12">
                        <form method="GET" action="{{ route('surveys.index') }}" class="row g-3">
                            <div class="col-md-3">
                                <input type="text" name="search" class="form-control"
                                    placeholder="Rechercher par titre..."
                                    value="{{ request('search') }}">
                            </div>

                            <div class="col-md-2">
                                <select name="status" class="form-select">
                                    <option value="">Tous les statuts</option>
                                    <option value="actif" {{ request('status') === 'actif' ? 'selected' : '' }}>Actif</option>
                                    <option value="inactif" {{ request('status') === 'inactif' ? 'selected' : '' }}>Inactif</option>
                                </select>
                            </div>

                            <div class="col-md-2">
                                <input type="date" name="date_from" class="form-control"
                                    value="{{ request('date_from') }}">
                            </div>

                            <div class="col-md-2">
                                <input type="date" name="date_to" class="form-control"
                                    value="{{ request('date_to') }}">
                            </div>

                            <div class="col-md-2">
                                <select name="has_responses" class="form-select">
                                    <option value="">Toutes les enquêtes</option>
                                    <option value="yes" {{ request('has_responses') === 'yes' ? 'selected' : '' }}>Avec réponses</option>
                                    <option value="no" {{ request('has_responses') === 'no' ? 'selected' : '' }}>Sans réponses</option>
                                </select>
                            </div>

                            <div class="col-md-1">
                                <button type="submit" class="btn btn-primary w-100">
                                    <i class="mdi mdi-magnify"></i>
                                </button>
                            </div>

                            @if(request()->hasAny(['search', 'status', 'date_from', 'date_to', 'has_responses']))
                                <div class="col-md-12">
                                    <a href="{{ route('surveys.index') }}" class="btn btn-outline-secondary">
                                        <i class="mdi mdi-refresh"></i> Réinitialiser les filtres
                                    </a>
                                </div>
                            @endif
                        </form>
                    </div>
                </div>

                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <i class="mdi mdi-check-circle"></i> {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="mdi mdi-alert-circle"></i> {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Titre</th>
                                <th>Statut</th>
                                <th>Date début</th>
                                <th>Date fin</th>
                                <th>Créateur</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($sondages as $sondage)
                                <tr>
                                    <td>
                                        <strong>{{ $sondage->titre }}</strong>
                                        <br>
                                        <small class="text-muted">{{ Str::limit($sondage->description, 50) }}</small>
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ $sondage->statut === 'actif' ? 'success' : 'secondary' }}">
                                            {{ ucfirst($sondage->statut) }}
                                        </span>
                                    </td>
                                    <td>{{ $sondage->date_debut->format('d/m/Y') }}</td>
                                    <td>{{ $sondage->date_fin->format('d/m/Y') }}</td>
                                    <td>{{ $sondage->createur->name }}</td>
                                    <td>
                                        <div class="btn-group" role="group">
                                                @can('view', $sondage)
                                                    <a href="{{ route('surveys.show', $sondage) }}" class="btn btn-sm btn-info" title="Voir">
                                                        <i class="mdi mdi-eye"></i>
                                                    </a>
                                                @endcan
                                                @can('update', $sondage)
                                                    <button type="button" class="btn btn-sm btn-success" title="Partager"
                                                            onclick="shareSurvey({{ $sondage->id }}, {{ json_encode($sondage->titre) }})">
                                                        <i class="mdi mdi-share-variant"></i>
                                                    </button>
                                                    <a href="{{ route('surveys.edit', $sondage) }}" class="btn btn-sm btn-warning" title="Modifier">
                                                        <i class="mdi mdi-pencil"></i>
                                                    </a>
                                                @endcan
                                                @can('analyze', $sondage)
                                                    <a href="{{ route('surveys.analyze', $sondage) }}" class="btn btn-sm btn-primary" title="Analyser">
                                                        <i class="mdi mdi-chart-bar"></i>
                                                    </a>
                                                @endcan
                                                @can('delete', $sondage)
                                                    <form action="{{ route('surveys.destroy', $sondage) }}" method="POST" class="d-inline"
                                                        onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce sondage ? Cette action est irréversible.')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-sm btn-danger" title="Supprimer">
                                                            <i class="mdi mdi-delete"></i>
                                                        </button>
                                                    </form>
                                                @endcan
                                            </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center py-4">
                                        <i class="mdi mdi-file-document-outline fs-1 text-muted"></i>
                                        <p class="mt-2 text-muted">Aucun sondage trouvé.</p>
                                        <a href="{{ route('surveys.create') }}" class="btn btn-primary">
                                            Créer le premier sondage
                                        </a>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <x-pagination :paginator="$sondages" />
            </div>
        </div>
    </div>
</div>
<!-- -------------------------------------------------------------- -->
<!-- End PAge Content -->
<!-- -------------------------------------------------------------- -->

<!-- Modal de partage -->
<div class="modal fade" id="shareModal" tabindex="-1" aria-labelledby="shareModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="shareModalLabel">Partager le sondage</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="shareContent">
                    <div class="text-center">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Chargement...</span>
                        </div>
                        <p class="mt-2">Génération du lien de partage...</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                <button type="button" class="btn btn-primary" id="copyLinkBtn" style="display: none;">Copier le lien</button>
            </div>
        </div>
    </div>
</div>

<script>
function shareSurvey(surveyId, surveyTitle) {
    const modal = new bootstrap.Modal(document.getElementById('shareModal'));
    const shareContent = document.getElementById('shareContent');
    const copyBtn = document.getElementById('copyLinkBtn');

    // Affiche le modal avec le spinner
    shareContent.innerHTML = `
        <div class="text-center">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Chargement...</span>
            </div>
            <p class="mt-2">Génération du lien de partage...</p>
        </div>
    `;
    copyBtn.style.display = 'none';
    modal.show();

    // Faire la requête AJAX pour générer le lien
    fetch(`/dashboard/surveys/${surveyId}/share`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            shareContent.innerHTML = `
                <div class="alert alert-success">
                    <i class="mdi mdi-check-circle me-2"></i>
                    Lien de partage généré avec succès !
                </div>
                <div class="mb-3">
                    <label class="form-label">Lien de partage :</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="shareUrl" value="${data.share_url}" readonly>
                        <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard()">
                            <i class="mdi mdi-content-copy"></i>
                        </button>
                    </div>
                </div>
                <div class="alert alert-info">
                    <i class="mdi mdi-information me-2"></i>
                    <strong>Comment partager :</strong><br>
                    Copiez ce lien et envoyez-le aux personnes que vous souhaitez interroger.
                    Elles pourront répondre au sondage sans avoir besoin de compte utilisateur.
                </div>
            `;
            copyBtn.style.display = 'inline-block';
            copyBtn.onclick = () => copyToClipboard();
        } else {
            shareContent.innerHTML = `
                <div class="alert alert-danger">
                    <i class="mdi mdi-alert-circle me-2"></i>
                    Erreur lors de la génération du lien : ${data.message || 'Erreur inconnue'}
                </div>
            `;
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        shareContent.innerHTML = `
            <div class="alert alert-danger">
                <i class="mdi mdi-alert-circle me-2"></i>
                Erreur lors de la génération du lien. Veuillez réessayer.
            </div>
        `;
    });
}

function copyToClipboard() {
    const shareUrl = document.getElementById('shareUrl');
    shareUrl.select();
    shareUrl.setSelectionRange(0, 99999);

    try {
        document.execCommand('copy');
        const copyBtn = document.getElementById('copyLinkBtn');
        const originalText = copyBtn.innerHTML;
        copyBtn.innerHTML = '<i class="mdi mdi-check"></i> Copié !';
        copyBtn.classList.remove('btn-primary');
        copyBtn.classList.add('btn-success');

        setTimeout(() => {
            copyBtn.innerHTML = originalText;
            copyBtn.classList.remove('btn-success');
            copyBtn.classList.add('btn-primary');
        }, 2000);
    } catch (err) {
        console.error('Erreur lors de la copie:', err);
        alert('Erreur lors de la copie. Veuillez copier manuellement le lien.');
    }
}
</script>
@endsection