@extends('layouts.base')

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

@section('content')
@section('breadcrumb')
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{{ route('partner.home') }}">Accueil</a></li>
            <li class="breadcrumb-item"><a href="{{ route('partner.display-parameters') }}">Paramètres d'affichage</a></li>
            <li class="breadcrumb-item"><a href="{{ route('partner.carousels.index') }}">Gestion des carousels</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ $carousel->title }}</li>
        </ol>
    </nav>
@endsection

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

<div class="container-fluid py-0">
    <div class="container">
        <div class="row mb-4">
            <div class="col-12">
                <div class="row">
                    <div class="col-md-1">
                        @php
                            $initials = $carousel->title ? strtoupper(substr($carousel->title, 0, 2)) : '';
                        @endphp
                        @if($initials)
                            <span class="client-avatar-large me-3">{{ $initials }}</span>
                        @else
                            <img src="{{ asset('images/pictos/parameters.svg') }}" alt="Carousel">
                        @endif
                    </div>
                    <div class="col-md-8">
                        <h1 class="h3 mb-2 text-primary">{{ $carousel->title }}</h1>
                        <div class="d-flex align-items-center flex-wrap gap-2">
                            @if($carousel->type)
                                <span class="badge bg-info">{{ $carousel->type->getLabel() }}</span>
                            @endif
                            <span class="separator-vertical"></span>
                            @if($carousel->is_active)
                                <span class="badge bg-success"><i class="fas fa-check-circle me-1"></i>Actif</span>
                            @else
                                <span class="badge bg-secondary"><i class="fas fa-pause-circle me-1"></i>Inactif</span>
                            @endif
                            <span class="separator-vertical"></span>
                            <span class="text-grey text-16"><code>{{ $carousel->slug }}</code></span>
                        </div>
                    </div>
                    <div class="col-md-3 d-flex justify-content-end align-items-center gap-2">
                        <a href="{{ route('partner.carousels.index') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left me-2"></i>Retour
                        </a>
                        <div class="dropdown btn m-0 p-0">
                            <button type="button" class="btn btn-md btn-outline-secondary dropdown-toggle dropdown-toggle-no-arrow" data-bs-toggle="dropdown" aria-expanded="false">
                                <img src="{{ asset('images/pictos/dots-vertical.svg') }}" alt="Actions">
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end entity-actions-menu">
                                <li>
                                    <a class="dropdown-item text-dark" href="{{ route('partner.carousels.edit', $carousel) }}">
                                        <span class="icon-square-pen icon icon-16 text-dark align-items-center justify-content-center"></span> Modifier
                                    </a>
                                </li>
                                @if(Auth::user()->canDeletePartnerDisplayParameters())
                                <li>
                                    <form action="{{ route('partner.carousels.destroy', $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="dropdown-item text-danger w-100 text-start border-0 bg-transparent">
                                            <span class="icon-trash icon icon-16 text-danger align-items-center justify-content-center"></span> Supprimer
                                        </button>
                                    </form>
                                </li>
                                @endif
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid container-fluid-bordered">
    <div class="container">
        <div class="card mb-4">
            <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-primary 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->getFirstMedia('images'))
                                                                            <img src="{{ media_url($program->getFirstMedia('images'), 'medium', 60) ?? $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', ['program' => $program->token]) }}"
                                                                               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.carousels.edit', $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.carousels.edit', $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.carousels.edit', $carousel) }}" class="alert-link">
                                            Modifiez le carousel
                                        </a> pour définir les programmes à afficher.
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<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>
@endpush

@push('scripts')
<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>
@endpush
@endsection