@extends('layouts.base')

@section('title', 'Aperçu du carousel')

@section('content')
<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-eye"></i> Aperçu du carousel : {{ $carousel->title }}
                    </h3>
                    <div class="card-tools">
                        <a href="{{ route('partner.application.carousels.index', $application) }}" class="btn btn-warning btn-outline-primary">
                            <i class="fas fa-arrow-left"></i> Retour à la liste
                        </a>
                        <a href="{{ route('partner.application.carousels.edit', [$application, $carousel]) }}" class="btn btn-primary">
                            <i class="fas fa-edit"></i> Modifier
                        </a>
                    </div>
                </div>

                <div class="card-body">
                    <!-- Informations du carousel -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h5>Informations du carousel</h5>
                            <table class="table table-sm">
                                <tr>
                                    <td><strong>Titre :</strong></td>
                                    <td>{{ $carousel->title }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Type :</strong></td>
                                    <td>
                                        @if($carousel->type)
                                            <span class="badge bg-info">{{ $carousel->type->getLabel() }}</span>
                                        @else
                                            <span class="badge bg-secondary">Non défini</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Slug :</strong></td>
                                    <td><code>{{ $carousel->slug }}</code></td>
                                </tr>
                                <tr>
                                    <td><strong>Ordre :</strong></td>
                                    <td><span class="badge bg-secondary">{{ $carousel->order }}</span></td>
                                </tr>
                                <tr>
                                    <td><strong>Statut :</strong></td>
                                    <td>
                                        @if($carousel->is_active)
                                            <span class="badge bg-success">Actif</span>
                                        @else
                                            <span class="badge bg-secondary">Inactif</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Créé le :</strong></td>
                                    <td>{{ \Carbon\Carbon::parse($carousel->created_at)->format('d/m/Y H:i') }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Modifié le :</strong></td>
                                    <td>{{ \Carbon\Carbon::parse($carousel->updated_at)->format('d/m/Y H:i') }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Nombre de programmes :</strong></td>
                                    <td>{{ $programs->count() }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <h5>Règle de sélection</h5>
                            @if($carousel->rule)
                                @php
                                    $rule = json_decode($carousel->rule, true);
                                @endphp
                                @if(isset($rule['type']))
                                    @switch($rule['type'])
                                        @case('programmes')
                                            @if(isset($rule['programs']) && is_array($rule['programs']))
                                                <p class="text-muted">
                                                    <i class="fas fa-list"></i> 
                                                    {{ count($rule['programs']) }} programme(s) sélectionné(s)
                                                </p>
                                            @else
                                                <p class="text-muted">
                                                    <i class="fas fa-exclamation-triangle"></i> 
                                                    Aucun programme sélectionné
                                                </p>
                                            @endif
                                            @break
                                        @case('criteres')
                                            <p class="text-muted">
                                                <i class="fas fa-filter"></i> 
                                                Critères avancés configurés
                                            </p>
                                            @break
                                        @default
                                            <p class="text-muted">
                                                <i class="fas fa-exclamation-triangle"></i> 
                                                Type de règle non reconnu
                                            </p>
                                    @endswitch
                                    @if(isset($rule['created_at']))
                                        <small class="text-muted d-block mt-2">
                                            Créé le : {{ \Carbon\Carbon::parse($rule['created_at'])->format('d/m/Y H:i') }}
                                        </small>
                                    @endif
                                @else
                                    <!-- Ancien format (rétrocompatibilité) -->
                                    @if(isset($rule['programs']) && is_array($rule['programs']))
                                        <p class="text-muted">
                                            <i class="fas fa-info-circle"></i> 
                                            {{ count($rule['programs']) }} programme(s) sélectionné(s)
                                        </p>
                                        @if(isset($rule['created_at']))
                                            <small class="text-muted">
                                                Créé le : {{ \Carbon\Carbon::parse($rule['created_at'])->format('d/m/Y H:i') }}
                                            </small>
                                        @endif
                                    @else
                                        <p class="text-muted">
                                            <i class="fas fa-exclamation-triangle"></i> 
                                            Aucune règle de sélection définie
                                        </p>
                                    @endif
                                @endif
                            @else
                                <p class="text-muted">
                                    <i class="fas fa-exclamation-triangle"></i> 
                                    Aucune règle de sélection définie
                                </p>
                            @endif
                        </div>
                    </div>

                    <!-- Aperçu du carousel -->
                    <div class="row">
                        <div class="col-12">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h5 class="mb-0">Aperçu du carousel</h5>
                                <div class="carousel-controls">
                                    <button id="pauseBtn" class="btn btn-sm btn-outline-secondary me-2" title="Pause/Play">
                                        <i class="fas fa-pause"></i>
                                    </button>
                                    <div class="btn-group" role="group">
                                        <button class="btn btn-sm btn-outline-info" onclick="changeSpeed(1000)" title="Rapide">1s</button>
                                        <button class="btn btn-sm btn-outline-info" onclick="changeSpeed(3000)" title="Normal">3s</button>
                                        <button class="btn btn-sm btn-outline-info" onclick="changeSpeed(5000)" title="Lent">5s</button>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-preview">
                                @if($carousel->rule)
                                    @php
                                        $rule = json_decode($carousel->rule, true);
                                    @endphp
                                    
                                    @if($programs->count() > 0)
                                        <div id="carouselPreview" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
                                            <!-- Indicateurs -->
                                            <div class="carousel-indicators">
                                                @for($i = 0; $i < ceil($programs->count() / 3); $i++)
                                                    <button type="button" 
                                                            data-bs-target="#carouselPreview" 
                                                            data-bs-slide-to="{{ $i }}" 
                                                            class="{{ $i === 0 ? 'active' : '' }}"
                                                            aria-current="{{ $i === 0 ? 'true' : 'false' }}"
                                                            aria-label="Slide {{ $i + 1 }}"></button>
                                                @endfor
                                            </div>

                                            <!-- Contenu du carousel -->
                                            <div class="carousel-inner">
                                                @for($i = 0; $i < $programs->count(); $i += 3)
                                                    <div class="carousel-item {{ $i === 0 ? 'active' : '' }}">
                                                        <div class="row">
                                                            @for($j = $i; $j < min($i + 3, $programs->count()); $j++)
                                                                @php $program = $programs[$j]; @endphp
                                                                <div class="col-md-4 mb-4">
                                                                    <div class="card h-100 program-card">
                                                                        @if($program->getFirstMediaUrl('images', 'medium'))
                                                                            <img src="{{ $program->getFirstMediaUrl('images', 'medium') }}" 
                                                                                 class="card-img-top" 
                                                                                 alt="{{ $program->name }}"
                                                                                 style="height: 200px; object-fit: cover;">
                                                                        @else
                                                                            <div class="card-img-top bg-light d-flex align-items-center justify-content-center" 
                                                                                 style="height: 200px;">
                                                                                <i class="fas fa-building fa-3x text-muted"></i>
                                                                            </div>
                                                                        @endif

                                                                        <div class="pastille_marketing">
                                                                            @foreach($program->marketingTags as $tag)
                                                                                @if($tag->type)
                                                                                <span class="badge {{ $tag->type->bgColor() }} fs-8 py-2 px-3" title="{{ $tag->type->description() }}">
                                                                                    <i class="fas {{ $tag->type->icon() }} me-1"></i>{{ $tag->type->label() }}
                                                                                </span>
                                                                                @endif
                                                                            @endforeach
                                                                        </div>
                                                                        
                                                                        <div class="card-body d-flex flex-column">
                                                                            <h6 class="card-title">{{ $program->name }}</h6>
                                                                            <!-- <p class="card-text text-muted small flex-grow-1">
                                                                                <code>{{ $program->slug }}</code>
                                                                            </p> -->
                                                                            
                                                                            <p class="card-text text-muted small">
                                                                                <i class="fas fa-euro-sign"></i> 
                                                                                @if($program->fiscalites->first() && $program->fiscalites->first()->type)
                                                                                    {{ $program->fiscalites->first()->type->label() }}
                                                                                @else
                                                                                    <span class="text-muted">Aucune fiscalité</span>
                                                                                @endif
                                                                            </p>

                                                                            <div class="mt-auto">
                                                                                @if($program->is_active)
                                                                                    <span class="badge bg-success">Actif</span>
                                                                                @else
                                                                                    <span class="badge bg-secondary">Inactif</span>
                                                                                @endif
                                                                                
                                                                                @if($program->getFirstMediaUrl('images'))
                                                                                    <span class="badge bg-info">Avec image</span>
                                                                                @endif
                                                                            </div>
                                                                        </div>
                                                                        
                                                                        <div class="card-footer bg-transparent">
                                                                            <a href="{{ route('partner.program.show', [$application, $program]) }}" 
                                                                               class="btn btn-sm btn-outline-primary w-100">
                                                                                <i class="fas fa-eye"></i> Voir le programme
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            @endfor
                                                        </div>
                                                    </div>
                                                @endfor
                                            </div>

                                            <!-- Boutons de navigation -->
                                            <button class="carousel-control-prev" type="button" data-bs-target="#carouselPreview" data-bs-slide="prev">
                                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                                <span class="visually-hidden">Précédent</span>
                                            </button>
                                            <button class="carousel-control-next" type="button" data-bs-target="#carouselPreview" data-bs-slide="next">
                                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                <span class="visually-hidden">Suivant</span>
                                            </button>
                                        </div>
                                    @else
                                        @if(isset($rule['type']))
                                            @switch($rule['type'])
                                                @case('criteres')
                                                    <div class="alert alert-info">
                                                        <i class="fas fa-filter"></i>
                                                        <strong>Critères avancés configurés</strong>
                                                        <br><small class="mt-2 d-block">Aucun programme actif trouvé avec ces critères.</small>
                                                    </div>
                                                    @break
                                                @default
                                                    <div class="alert alert-warning">
                                                        <i class="fas fa-exclamation-triangle"></i>
                                                        Aucun programme actif trouvé pour ce carousel. 
                                                        <a href="{{ route('partner.application.carousels.edit', [$application, $carousel]) }}" class="alert-link">
                                                            Modifiez le carousel
                                                        </a> pour configurer le contenu.
                                                    </div>
                                            @endswitch
                                        @else
                                            <div class="alert alert-warning">
                                                <i class="fas fa-exclamation-triangle"></i>
                                                Aucun programme actif trouvé pour ce carousel. 
                                                <a href="{{ route('partner.application.carousels.edit', [$application, $carousel]) }}" class="alert-link">
                                                    Modifiez le carousel
                                                </a> pour sélectionner des programmes.
                                            </div>
                                        @endif
                                    @endif
                                @else
                                    <div class="alert alert-info">
                                        <i class="fas fa-info-circle"></i>
                                        Aucune règle de sélection définie pour ce carousel. 
                                        <a href="{{ route('partner.application.carousels.edit', [$application, $carousel]) }}" class="alert-link">
                                            Modifiez le carousel
                                        </a> pour définir les programmes à afficher.
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.program-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border: 1px solid #dee2e6;
    position: relative; /* nécessaire pour positionner les pastilles */
}

.program-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.carousel-preview {
    background-color: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 20px;
    min-height: 400px;
}

.card-img-top {
    border-radius: 8px 8px 0 0;
}

/* Pastilles marketing positionnées en haut à droite de l'image */
.pastille_marketing {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    z-index: 2;
    justify-content: flex-end;
}

.pastille_marketing .badge {
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.program-card .card-body {
    padding: 1rem;
}

.program-card .card-footer {
    border-top: 1px solid #dee2e6;
    padding: 0.75rem 1rem;
}

/* Styles personnalisés pour le carousel */
#carouselPreview {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.carousel-indicators {
    bottom: -50px;
}

.carousel-indicators button {
    background-color: #007bff;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    margin: 0 5px;
}

.carousel-indicators button.active {
    background-color: #0056b3;
}

.carousel-control-prev,
.carousel-control-next {
    width: 50px;
    height: 50px;
    background-color: rgba(0, 123, 255, 0.8);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
}

.carousel-control-prev {
    left: -25px;
}

.carousel-control-next {
    right: -25px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 20px;
    height: 20px;
}

/* Animation de transition fluide */
.carousel-item {
    transition: transform 0.6s ease-in-out;
}

/* Responsive */
@media (max-width: 768px) {
    .carousel-control-prev {
        left: 10px;
    }
    
    .carousel-control-next {
        right: 10px;
    }
    
    .carousel-indicators {
        bottom: -40px;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const carousel = document.getElementById('carouselPreview');
    const pauseBtn = document.getElementById('pauseBtn');
    let isPaused = false;
    
    if (carousel && pauseBtn) {
        // Gestion du bouton pause/play
        pauseBtn.addEventListener('click', function() {
            if (isPaused) {
                // Reprendre le carousel
                carousel.carousel('cycle');
                pauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
                pauseBtn.title = 'Pause';
                isPaused = false;
            } else {
                // Pause le carousel
                carousel.carousel('pause');
                pauseBtn.innerHTML = '<i class="fas fa-play"></i>';
                pauseBtn.title = 'Play';
                isPaused = true;
            }
        });
        
        // Pause automatique au survol
        carousel.addEventListener('mouseenter', function() {
            if (!isPaused) {
                carousel.carousel('pause');
            }
        });
        
        // Reprendre automatiquement quand on quitte le survol
        carousel.addEventListener('mouseleave', function() {
            if (!isPaused) {
                carousel.carousel('cycle');
            }
        });
    }
});

// Fonction pour changer la vitesse du carousel
function changeSpeed(interval) {
    const carousel = document.getElementById('carouselPreview');
    if (carousel) {
        // Arrêter le carousel actuel
        carousel.carousel('pause');
        
        // Changer l'intervalle
        carousel.setAttribute('data-bs-interval', interval);
        
        // Redémarrer avec la nouvelle vitesse
        carousel.carousel('cycle');
        
        // Mettre à jour l'état du bouton pause
        const pauseBtn = document.getElementById('pauseBtn');
        if (pauseBtn) {
            pauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
            pauseBtn.title = 'Pause';
        }
    }
}
</script>
@endsection