@extends('layouts.base')

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

@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 active" aria-current="page">Gestion des carousels</li>
        </ol>
    </nav>
@endsection

<div class="container-fluid py-0">
    <div class="container">
        <div class="row mb-4">
            <div class="col-md-1">
                <div class="big-icon-badge d-flex align-items-center justify-content-center mx-auto">
                    <span class="icon-images icon icon-54 text-primary"></span>
                </div>
            </div>
            <div class="col-md-8">
                <h1 class="h3 mb-2 text-primary">
                    @if($carousels->count() > 0)
                        {{ $carousels->count() }} carousel{{ $carousels->count() > 1 ? 's' : '' }}
                    @else
                        Gestion des carousels
                    @endif
                </h1>
                <div class="text-grey text-16">
                    Configurez l'affichage des carrousels d'images sur votre application
                </div>
            </div>
            <div class="col-md-3 text-end">
                <a href="{{ route('partner.carousels.create') }}" class="btn btn-success text-white">
                    <span class="icon-circle-plus icon icon-18 text-white align-items-center justify-content-center mx-auto me-1"></span> Ajouter
                </a>
                <a href="{{ route('partner.display-parameters') }}" class="btn btn-outline-secondary me-2">
                    <i class="fas fa-arrow-left me-2"></i>Retour
                </a>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid container-fluid-bordered">
    <div class="container">
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fas fa-check-circle me-2"></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-personnalisee table-hover">
                    <thead class="table-light">
                        <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 class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="sortable-carousels">
                        @foreach($carousels as $carousel)
                            <tr data-carousel-id="{{ $carousel->id }}" class="sortable-row cursor-pointer carousel-row" data-href="{{ route('partner.carousels.show', [$carousel]) }}">
                                <td class="drag-handle" style="cursor: move;" onclick="event.stopPropagation();">
                                    <i class="fas fa-grip-vertical text-muted"></i>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        @php
                                            $initials = $carousel->title ? strtoupper(substr($carousel->title, 0, 2)) : '';
                                        @endphp
                                        @if($initials)
                                            <span class="client-avatar me-2">{{ $initials }}</span>
                                        @endif
                                        <div>
                                            <a href="{{ route('partner.carousels.show', [$carousel]) }}" class="text-decoration-none text-navigo" onclick="event.stopPropagation();">
                                                {{ $carousel->title }}
                                            </a>
                                            @if($carousel->rule)
                                                <br><small class="text-muted">{{ Str::limit($carousel->rule, 50) }}</small>
                                            @endif
                                        </div>
                                    </div>
                                </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 class="text-center">
                                    <div class="d-flex gap-1 justify-content-center flex-nowrap">
                                        <a href="{{ route('partner.carousels.show', [$carousel]) }}" class="btn btn-action btn-outline-secondary" title="Voir" onclick="event.stopPropagation();">
                                            <img src="{{ asset('images/pictos/eye.svg') }}" alt="Voir">
                                        </a>
                                        <a href="{{ route('partner.carousels.edit', [$carousel]) }}" class="btn btn-action btn-outline-secondary" title="Modifier" onclick="event.stopPropagation();">
                                            <img src="{{ asset('images/pictos/edit.svg') }}" alt="Modifier">
                                        </a>
                                        @if(Auth::user()->canDeletePartnerDisplayParameters())
                                        <form action="{{ route('partner.carousels.destroy', [$carousel]) }}" method="POST" class="d-inline" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce carousel ?')" onclick="event.stopPropagation();">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-action btn-outline-secondary" title="Supprimer">
                                                <img src="{{ asset('images/pictos/trash.svg') }}" alt="Supprimer">
                                            </button>
                                        </form>
                                        @endif
                                    </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 d-block"></i>
                <h5 class="mb-1">Aucun carousel trouvé</h5>
                <p class="text-muted mb-4">Commencez par créer votre premier carousel.</p>
                <a href="{{ route('partner.carousels.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i>Créer un carousel
                </a>
            </div>
        @endif
    </div>
</div>
@endsection

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

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('tr.carousel-row[data-href]').forEach(function(row) {
        row.addEventListener('click', function(event) {
            if (event.target.closest('.drag-handle, a, button, form')) {
                return;
            }
            const href = this.getAttribute('data-href');
            if (href) {
                window.location.href = href;
            }
        });
    });

    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));

        rows.forEach((row, index) => {
            const orderBadge = row.querySelector('.carousel-order');
            if (orderBadge) {
                orderBadge.textContent = index + 1;
            }
        });

        fetch('{{ route("partner.carousels.reorder") }}', {
            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) {
                console.log('Ordre des carousels mis à jour avec succès');
            }
        })
        .catch(error => {
            console.error('Erreur lors de la mise à jour de l\'ordre:', error);
            alert('Erreur lors de la mise à jour de l\'ordre des carousels');
        });
    }
});
</script>
@endpush