@extends('layouts.base')

@section('title', 'Gestion des carousels')

@section('content')
<style>
.sortable-row {
    transition: all 0.3s ease;
}

.sortable-row.sortable-ghost {
    opacity: 0.4;
}

.sortable-row.sortable-chosen {
    background-color: #f8f9fa;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.drag-handle:hover {
    color: #007bff !important;
}

.sortable-row.sortable-drag {
    background-color: #e3f2fd;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: rotate(2deg);
}
</style>
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-images"></i> Gestion des carousels
                    </h3>
                    <div class="card-tools">
                        <a href="{{ route('partner.application.carousels.create', $application) }}" class="btn btn-primary">
                            <i class="fas fa-plus"></i> Créer un carousel
                        </a>
                    </div>
                </div>

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

                    @if($carousels->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th style="width: 30px;">
                                            <i class="fas fa-grip-vertical text-muted"></i>
                                        </th>
                                        <th>Titre</th>
                                        <th>Type</th>
                                        <th>Slug</th>
                                        <th>Ordre</th>
                                        <th>Statut</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="sortable-carousels">
                                    @foreach($carousels as $carousel)
                                        <tr data-carousel-id="{{ $carousel->id }}" class="sortable-row">
                                            <td class="drag-handle" style="cursor: move;">
                                                <i class="fas fa-grip-vertical text-muted"></i>
                                            </td>
                                            <td>
                                                <strong>{{ $carousel->title }}</strong>
                                                @if($carousel->rule)
                                                    <br><small class="text-muted">{{ Str::limit($carousel->rule, 50) }}</small>
                                                @endif
                                            </td>
                                            <td>
                                                <span class="badge bg-info">{{ $carousel->type->getLabel() }}</span>
                                            </td>
                                            <td>
                                                <code>{{ $carousel->slug }}</code>
                                            </td>
                                            <td>
                                                <span class="badge bg-secondary carousel-order">{{ $carousel->order }}</span>
                                            </td>
                                            <td>
                                                @if($carousel->is_active)
                                                    <span class="badge bg-success">Actif</span>
                                                @else
                                                    <span class="badge bg-secondary">Inactif</span>
                                                @endif
                                            </td>
                                            <td>
                                                <div class="btn-group" role="group">
                                                    <a href="{{ route('partner.application.carousels.show', [$application, $carousel]) }}" class="btn btn-sm btn-outline-info" title="Voir">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                    <a href="{{ route('partner.application.carousels.edit', [$application, $carousel]) }}" class="btn btn-sm btn-outline-primary" title="Modifier">
                                                        <i class="fas fa-edit"></i>
                                                    </a>

                                                    <!-- <a href="{{ route('partner.application.carousels.destroy', [$application, $carousel]) }}" 
                                                       class="d-inline"
                                                       title="Supprimer">
                                                        <i class="fas fa-trash"></i>
                                                    </a> -->
                                                    <form action="{{ route('partner.application.carousels.destroy', [$application, $carousel]) }}" 
                                                          method="POST" 
                                                          class="d-inline"
                                                          onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce carousel ?')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" 
                                                                class="btn btn-sm btn-outline-danger" 
                                                                title="Supprimer">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-images fa-3x text-muted mb-3"></i>
                            <h4 class="text-muted">Aucun carousel trouvé</h4>
                            <p class="text-muted">Commencez par créer votre premier carousel.</p>
                            <a href="{{ route('partner.application.carousels.create', $application) }}" class="btn btn-primary">
                                <i class="fas fa-plus"></i> Créer un carousel
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const sortableElement = document.getElementById('sortable-carousels');
    
    if (sortableElement) {
        const sortable = Sortable.create(sortableElement, {
            handle: '.drag-handle',
            animation: 150,
            ghostClass: 'sortable-ghost',
            chosenClass: 'sortable-chosen',
            dragClass: 'sortable-drag',
            onEnd: function(evt) {
                updateCarouselOrder();
            }
        });
    }
    
    function updateCarouselOrder() {
        const rows = document.querySelectorAll('#sortable-carousels tr[data-carousel-id]');
        const carouselIds = Array.from(rows).map(row => parseInt(row.dataset.carouselId));
        
        // Mettre à jour les numéros d'ordre visuellement
        rows.forEach((row, index) => {
            const orderBadge = row.querySelector('.carousel-order');
            if (orderBadge) {
                orderBadge.textContent = index + 1;
            }
        });
        
        // Envoyer la requête au serveur
        fetch('{{ route("partner.application.carousels.reorder", $application) }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                carousel_ids: carouselIds
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Optionnel: afficher une notification de succès
                console.log('Ordre des carousels mis à jour avec succès');
            }
        })
        .catch(error => {
            console.error('Erreur lors de la mise à jour de l\'ordre:', error);
            // Optionnel: afficher une notification d'erreur
            alert('Erreur lors de la mise à jour de l\'ordre des carousels');
        });
    }
});
</script>
@endsection