@extends('layouts.admin')

@section('page-title') Roadmap de développement @endsection

@section('scripts')
<script src="{{ asset('js/pages/admin/roadmap/index.js') }}?v={{ time() }}"></script>
@endsection
@section('page-subtitle') Suivi des fonctionnalités et améliorations de la plateforme @endsection

@section('styles')
<link href="{{ asset('css/layouts/admin.css') }}?v={{ time() }}" rel="stylesheet">
<link href="{{ asset('css/components/modals.css') }}?v={{ time() }}" rel="stylesheet">
<link href="{{ asset('css/pages/admin/roadmap/index.css') }}?v={{ time() }}" rel="stylesheet">
@endsection

@section('content')
<div class="roadmap-page">
    <!-- En-tête épuré -->
    <div class="page-header-row">
        <div class="main-header-navigation">

        </div>
        <div class="main-header-actions">
            <button type="button" class="btn btn-secondary">
                <i class="fas fa-sync-alt"></i>
                <span>Actualiser</span>
            </button>
            <button type="button" class="btn btn-primary" id="openCreateModalBtn">
                <i class="fas fa-plus"></i>
                <span>Nouvel élément</span>
            </button>
        </div>
    </div>

    <!-- Barre de progression globale -->
    <div class="roadmap-progress-section">
        <div class="progress-header">
            <span class="progress-title">Progression globale</span>
            @php
                $completedPercentage = $stats['total'] > 0 ? round(($stats['completed'] / $stats['total']) * 100) : 0;
                $progressStep = max(0, min(100, round($completedPercentage / 5) * 5));
            @endphp
            <span class="progress-percentage">{{ $completedPercentage }}%</span>
        </div>
        <div class="progress-bar-wrapper">
            <div class="progress-bar-track">
                <div class="progress-bar-fill progress-p-{{ $progressStep }}"></div>
            </div>
        </div>
        <div class="progress-stats">
            <span class="progress-stat">{{ $stats['completed'] }} terminé{{ $stats['completed'] > 1 ? 's' : '' }} / {{ $stats['total'] }} élément{{ $stats['total'] > 1 ? 's' : '' }}</span>
        </div>
    </div>

    <!-- Statistiques (cards individuelles) -->
    <div class="stats-grid" id="roadmap-stats">
        <div class="stat-card stat-backlog" data-filter="backlog" role="button" tabindex="0" aria-pressed="false">
            <div class="stat-card__icon"><i class="fas fa-inbox"></i></div>
            <div class="stat-value">{{ $stats['backlog'] ?? 0 }}</div>
            <div class="stat-label">Backlog</div>
        </div>
        <div class="stat-card stat-planned" data-filter="planned" role="button" tabindex="0" aria-pressed="false">
            <div class="stat-card__icon"><i class="fas fa-calendar-alt"></i></div>
            <div class="stat-value">{{ $stats['planned'] }}</div>
            <div class="stat-label">Planifiés</div>
        </div>
        <div class="stat-card stat-in_progress" data-filter="in_progress" role="button" tabindex="0" aria-pressed="false">
            <div class="stat-card__icon"><i class="fas fa-rocket"></i></div>
            <div class="stat-value">{{ $stats['in_progress'] }}</div>
            <div class="stat-label">En cours</div>
        </div>
        <div class="stat-card stat-on_hold" data-filter="on_hold" role="button" tabindex="0" aria-pressed="false">
            <div class="stat-card__icon"><i class="fas fa-pause"></i></div>
            <div class="stat-value">{{ $stats['on_hold'] }}</div>
            <div class="stat-label">En pause</div>
        </div>
        <div class="stat-card stat-completed" data-filter="completed" role="button" tabindex="0" aria-pressed="false">
            <div class="stat-card__icon"><i class="fas fa-check"></i></div>
            <div class="stat-value">{{ $stats['completed'] }}</div>
            <div class="stat-label">Terminés</div>
        </div>
        <div class="stat-card stat-total" data-filter="all" role="button" tabindex="0" aria-pressed="false">
            <div class="stat-card__icon"><i class="fas fa-layer-group"></i></div>
            <div class="stat-value">{{ $stats['total'] }}</div>
            <div class="stat-label">Total</div>
        </div>
    </div>

    <!-- Filtres dans une card homogène -->
    <div class="filters-card">
        <div class="filters-card-content">
            <!-- Barre de recherche -->
            <div class="search-box">
                <i class="fas fa-search search-box__icon"></i>
                <input type="text" class="search-box__input" placeholder="Rechercher un élément..." id="search-input">
            </div>
            
            <!-- Filtres avancés -->
            <div class="filters-row">
                <form method="GET" class="filters-form">
                    <div class="filter-group">
                        @php $curPrio = request('priority'); @endphp
                        <div class="prio-select" data-select-id="filter-priority">
                            <button type="button" class="prio-select__btn" aria-haspopup="listbox" aria-expanded="false">
                                <span class="prio-select__label">
                                @switch($curPrio)
                                    @case('low') <i class="fas fa-arrow-down prio-color-low prio-ico"></i><span>Basse</span> @break
                                    @case('medium') <i class="fas fa-minus prio-color-medium prio-ico"></i><span>Moyenne</span> @break
                                    @case('high') <i class="fas fa-arrow-up prio-color-high prio-ico"></i><span>Haute</span> @break
                                    @default <span>Toutes priorités</span>
                                @endswitch
                                </span>
                                <i class="fas fa-chevron-down prio-caret" aria-hidden="true"></i>
                            </button>
                            <div class="prio-select__menu" role="listbox">
                                <button type="button" class="prio-option" role="option" data-value=""><span>Toutes priorités</span></button>
                                <button type="button" class="prio-option" role="option" data-value="low"><i class="fas fa-arrow-down prio-color-low prio-ico"></i><span>Basse</span></button>
                                <button type="button" class="prio-option" role="option" data-value="medium"><i class="fas fa-minus prio-color-medium prio-ico"></i><span>Moyenne</span></button>
                                <button type="button" class="prio-option" role="option" data-value="high"><i class="fas fa-arrow-up prio-color-high prio-ico"></i><span>Haute</span></button>
                            </div>
                        </div>
                        <select name="priority" class="filter-select u-hidden-select" id="filter-priority">
                            <option value="" {{ $curPrio===''? 'selected' : '' }}>Toutes priorités</option>
                            <option value="low" {{ $curPrio==='low' ? 'selected' : '' }}>Basse</option>
                            <option value="medium" {{ $curPrio==='medium' ? 'selected' : '' }}>Moyenne</option>
                            <option value="high" {{ $curPrio==='high' ? 'selected' : '' }}>Haute</option>
                        </select>
                    </div>

                    <div class="filter-group">
                        @php $curCat = request('category'); @endphp
                        <div class="cat-select" data-select-id="filter-category">
                            <button type="button" class="cat-select__btn" aria-haspopup="listbox" aria-expanded="false">
                                <span class="cat-select__label">
                                @switch($curCat)
                                    @case('frontend') <i class="fas fa-palette cat-ico cat-color-frontend"></i><span>Frontend</span> @break
                                    @case('backend') <i class="fas fa-cogs cat-ico cat-color-backend"></i><span>Backend</span> @break
                                    @case('database') <i class="fas fa-database cat-ico cat-color-database"></i><span>Base de données</span> @break
                                    @case('api') <i class="fas fa-plug cat-ico cat-color-api"></i><span>API</span> @break
                                    @case('infrastructure') <i class="fas fa-server cat-ico cat-color-infrastructure"></i><span>Infrastructure</span> @break
                                    @case('design') <i class="fas fa-pencil-alt cat-ico cat-color-design"></i><span>Design</span> @break
                                    @case('other') <i class="fas fa-clipboard cat-ico cat-color-other"></i><span>Autre</span> @break
                                    @default <span>Toutes catégories</span>
                                @endswitch
                                </span>
                                <i class="fas fa-chevron-down cat-caret" aria-hidden="true"></i>
                            </button>
                            <div class="cat-select__menu" role="listbox">
                                <button type="button" class="cat-option" role="option" data-value=""><span>Toutes catégories</span></button>
                                <button type="button" class="cat-option" role="option" data-value="frontend"><i class="fas fa-palette cat-ico cat-color-frontend"></i><span>Frontend</span></button>
                                <button type="button" class="cat-option" role="option" data-value="backend"><i class="fas fa-cogs cat-ico cat-color-backend"></i><span>Backend</span></button>
                                <button type="button" class="cat-option" role="option" data-value="database"><i class="fas fa-database cat-ico cat-color-database"></i><span>Base de données</span></button>
                                <button type="button" class="cat-option" role="option" data-value="api"><i class="fas fa-plug cat-ico cat-color-api"></i><span>API</span></button>
                                <button type="button" class="cat-option" role="option" data-value="infrastructure"><i class="fas fa-server cat-ico cat-color-infrastructure"></i><span>Infrastructure</span></button>
                                <button type="button" class="cat-option" role="option" data-value="design"><i class="fas fa-pencil-alt cat-ico cat-color-design"></i><span>Design</span></button>
                                <button type="button" class="cat-option" role="option" data-value="other"><i class="fas fa-clipboard cat-ico cat-color-other"></i><span>Autre</span></button>
                            </div>
                        </div>
                        <select name="category" class="filter-select u-hidden-select" id="filter-category">
                            <option value="" {{ $curCat===''? 'selected' : '' }}>Toutes catégories</option>
                            <option value="frontend" {{ $curCat==='frontend' ? 'selected' : '' }}>Frontend</option>
                            <option value="backend" {{ $curCat==='backend' ? 'selected' : '' }}>Backend</option>
                            <option value="database" {{ $curCat==='database' ? 'selected' : '' }}>Base de données</option>
                            <option value="api" {{ $curCat==='api' ? 'selected' : '' }}>API</option>
                            <option value="infrastructure" {{ $curCat==='infrastructure' ? 'selected' : '' }}>Infrastructure</option>
                            <option value="design" {{ $curCat==='design' ? 'selected' : '' }}>Design</option>
                            <option value="other" {{ $curCat==='other' ? 'selected' : '' }}>Autre</option>
                        </select>
                    </div>

                    @if(request()->hasAny(['priority', 'category']))
                        <a href="{{ route('admin.roadmap.index') }}" class="btn btn-secondary">
                            <i class="fas fa-times"></i>
                            <span>Réinitialiser</span>
                        </a>
                    @endif
                </form>
            </div>
        </div>
    </div>

    <!-- Liste des éléments -->
    <div>
        @forelse($items as $item)
            <section class="roadmap-item" data-status="{{ $item->status }}" data-priority="{{ $item->priority }}" data-category="{{ $item->category }}">
                <!-- Indicateur de priorité -->
                <div class="item-priority-indicator priority-{{ $item->priority }}"></div>
                
                <!-- Contenu principal -->
                <div class="item-content">
                    <div class="item-main">
                        <div class="item-header-info">
                            <div class="item-title-row">
                                <h3 class="item-title m-0">{{ $item->title }}</h3>
                                <span class="badge badge-category badge-cat-{{ $item->category }}">
                                    @php
                                        $catEmoji = match($item->category) {
                                            'frontend' => '🎨',
                                            'backend' => '⚙️',
                                            'database' => '🗄️',
                                            'api' => '🔌',
                                            'infrastructure' => '🏗️',
                                            'design' => '✏️',
                                            default => '📋',
                                        };
                                    @endphp
                                    <span class="me-1">{{ $catEmoji }}</span>
                                    @switch($item->category)
                                        @case('frontend') Frontend @break
                                        @case('backend') Backend @break
                                        @case('database') Base de données @break
                                        @case('api') API @break
                                        @case('infrastructure') Infrastructure @break
                                        @case('design') Design @break
                                        @default Autre @break
                                    @endswitch
                                </span>
                            </div>
                            @if($item->description)
                                <p class="item-description">{{ Str::limit($item->description, 120) }}</p>
                            @endif
                            @if($item->related_page && isset($pageLabels[$item->related_page]))
                                <div class="meta-item related-page">
                                    <div class="meta-item-content">
                                        <span class="meta-label">Page liée</span>
                                        <a class="meta-value related-page-link" href="{{ $pageLabels[$item->related_page]['url'] ?? '#' }}">
                                            <i class="fas fa-link"></i>
                                            <span class="page-group">{{ $pageLabels[$item->related_page]['group'] }}</span>
                                            <span class="page-separator">›</span>
                                            <span class="page-name">{{ $pageLabels[$item->related_page]['label'] }}</span>
                                        </a>
                                    </div>
                                </div>
                            @endif

                            @php $mediaItems = is_array($item->media ?? null) ? $item->media : []; @endphp
                            @if(count($mediaItems) > 0)
                                <div class="meta-item roadmap-media">
                                    <div class="meta-item-content">
                                        <span class="meta-label">Médias</span>
                                        <div class="meta-value">
                                            <div class="roadmap-media-gallery" data-item-id="{{ $item->id }}">
                                                @foreach($mediaItems as $index => $media)
                                                    @php $url = $media['url'] ?? null; $mime = $media['mime'] ?? ''; @endphp
                                                    @if($url)
                                                        @if(Str::startsWith($mime, 'image/'))
                                                            <a href="{{ $url }}" class="media-lightbox-trigger" data-mime="{{ $mime }}">
                                                                <img src="{{ $url }}" alt="media" class="media-thumb">
                                                            </a>
                                                        @elseif(Str::startsWith($mime, 'video/'))
                                                            <a href="{{ $url }}" class="media-lightbox-trigger" data-mime="{{ $mime }}">
                                                                <video src="{{ $url }}" muted preload="metadata" class="media-thumb-video"></video>
                                                            </a>
                                                        @else
                                                            <a href="{{ $url }}" target="_blank" class="btn btn-sm btn-outline-secondary media-file-link">
                                                                <i class="fas fa-file"></i>
                                                            </a>
                                                        @endif
                                                    @endif
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                        
                        <div class="item-badges">
                            <span class="badge badge-priority badge-{{ $item->priority }}">
                                @switch($item->priority)
                                    @case('low') <i class="fas fa-arrow-down"></i> Priorité basse @break
                                    @case('medium') <i class="fas fa-minus"></i> Priorité moyenne @break
                                    @case('high') <i class="fas fa-arrow-up"></i> Priorité haute @break
                                    @default <i class="fas fa-arrow-down"></i> Priorité basse
                                @endswitch
                            </span>
                            <span class="badge badge-status badge-{{ $item->status }}">
                                @switch($item->status)
                                    @case('backlog') <i class="fas fa-inbox"></i> Backlog @break
                                    @case('planned') <i class="fas fa-calendar-alt"></i> Planifié @break
                                    @case('in_progress') <i class="fas fa-rocket"></i> En cours @break
                                    @case('on_hold') <i class="fas fa-pause"></i> En pause @break
                                    @case('completed') <i class="fas fa-check"></i> Terminé @break
                                @endswitch
                            </span>
                        </div>

                        <div class="item-meta-info">
                            <!-- 1. Date de création en premier -->
                            <div class="meta-item created-by">
                                <div class="meta-item-content">
                                    <span class="meta-label">Créé le</span>
                                    <span class="meta-value">
                                        <i class="fas fa-plus-circle"></i>
                                        {{ $item->created_at->format('d/m/Y') }}
                                    </span>
                                </div>
                            </div>
                            
                            <!-- 2. Date d'échéance -->
                            @if($item->due_date)
                                <div class="meta-item due-date {{ $item->due_date->isPast() && $item->status !== 'completed' ? 'overdue' : '' }}">
                                    <div class="meta-item-content">
                                        <span class="meta-label">Échéance</span>
                                        <span class="meta-value">
                                            <i class="fas fa-calendar-alt"></i>
                                            {{ $item->due_date->format('d/m/Y') }}
                                        </span>
                                    </div>
                                </div>
                            @endif
                            
                            <!-- 3. Date de fin si terminé -->
                            @if($item->status === 'completed')
                                <div class="meta-item completed-at">
                                    <div class="meta-item-content">
                                        <span class="meta-label">Terminé le</span>
                                        <span class="meta-value">
                                            <i class="fas fa-check-circle"></i>
                                            {{ $item->updated_at->format('d/m/Y') }}
                                        </span>
                                    </div>
                                </div>
                            @endif
                        </div>

                    </div>
                    
                    <div class="item-actions" data-item-id="{{ $item->id }}">
                    <div class="status-actions" data-current-status="{{ $item->status }}">
                        @if($item->status === 'completed')
                            <button class="btn-icon action-change-status" data-role="change_status" title="Changer de statut">
                                <i class="fas fa-arrows-rotate"></i>
                            </button>
                        @else
                            <button class="btn-icon action-toggle {{ $item->status === 'in_progress' ? 'is-pause' : 'is-play' }}" data-role="toggle" title="Basculer En cours / En attente">
                                @if($item->status === 'in_progress')
                                    <i class="fas fa-pause"></i>
                                @else
                                    <i class="fas fa-play"></i>
                                @endif
                            </button>
                            <button class="btn-icon action-postpone" data-role="postpone" title="Décaler (Planifier)">
                                <i class="fas fa-calendar-alt"></i>
                            </button>
                            <button class="btn-icon action-complete" data-role="complete" title="Terminer">
                                <i class="fas fa-check"></i>
                            </button>
                        @endif
                    </div>
                    <div class="quick-actions">
                        <button class="btn-icon btn-edit" title="Modifier">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="btn-icon btn-delete" data-item-id="{{ $item->id }}" title="Supprimer">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
                </div> <!-- fermeture .item-content -->
            </section> <!-- item -->
        @empty
            <div class="empty-state">
                <div class="empty-state-icon">
                    <i class="fas fa-route"></i>
                </div>
                <div class="empty-state-content">
                    <h3>Aucun élément dans la roadmap</h3>
                    <p>Commencez par ajouter votre premier élément de développement.</p>
                    <button type="button" class="btn btn-primary" id="openCreateModalBtnEmpty">
                        <i class="fas fa-plus"></i>
                        <span>Créer le premier élément</span>
                    </button>
                </div>
            </div>
        @endforelse
    </div>
</div>

<!-- Modal de création d'élément -->
<div class="modal-layer" id="createItemModal" data-modal-id="createItemModal">
    <div class="modal-backdrop"></div>
    <div class="modal-container modal-lg">
        <div class="glass-form">
            <div class="glass-filter"></div>
            <div class="glass-overlay"></div>
            <div class="glass-specular"></div>
            <div class="glass-content">
                <div class="glass-header">
                    <h2 class="glass-title">Nouvel élément de roadmap</h2>
                    <button type="button" class="modal-close" data-modal-close>
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <form id="createItemForm">
                @csrf
                <div class="glass-form-fields">
                    <div class="roadmap-field-row">
                        <div class="roadmap-field-full">
                            <label for="modal_title" class="roadmap-label is-required">Titre</label>
                            <input type="text" class="roadmap-input" id="modal_title" name="title" required>
                        </div>
                    </div>
                    
                    <div class="roadmap-field-row">
                        <div class="roadmap-field-half">
                            <label for="modal_priority" class="roadmap-label is-required">Priorité</label>
                            <div class="prio-select" data-select-id="modal_priority">
                                <button type="button" class="prio-select__btn" aria-haspopup="listbox" aria-expanded="false">
                                    <span class="prio-select__label"><i class="fas fa-arrow-down prio-color-low prio-ico"></i><span>Basse</span></span>
                                    <i class="fas fa-chevron-down prio-caret" aria-hidden="true"></i>
                                </button>
                                <div class="prio-select__menu" role="listbox">
                                    <button type="button" class="prio-option" role="option" data-value="low"><i class="fas fa-arrow-down prio-color-low prio-ico"></i><span>Basse</span></button>
                                    <button type="button" class="prio-option" role="option" data-value="medium"><i class="fas fa-minus prio-color-medium prio-ico"></i><span>Moyenne</span></button>
                                    <button type="button" class="prio-option" role="option" data-value="high"><i class="fas fa-arrow-up prio-color-high prio-ico"></i><span>Haute</span></button>
                                </div>
                            </div>
                            <select class="roadmap-input-hidden" id="modal_priority" name="priority" required>
                                <option value="low" selected>Basse</option>
                                <option value="medium">Moyenne</option>
                                <option value="high">Haute</option>
                            </select>
                        </div>
                        <div class="roadmap-field-half">
                            <label for="modal_status" class="roadmap-label is-required">Statut</label>
                            <select class="roadmap-input" id="modal_status" name="status" required>
                                <option value="backlog" selected>📋 Backlog</option>
                                <option value="planned">📅 Planifié</option>
                                <option value="in_progress">🚀 En cours</option>
                                <option value="on_hold">⏸️ En pause</option>
                                <option value="completed">✅ Terminé</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="roadmap-field-row">
                        <div class="roadmap-field-half">
                            <label for="modal_category" class="roadmap-label is-required">Catégorie</label>
                            <div class="cat-select" data-select-id="modal_category">
                                <button type="button" class="cat-select__btn" aria-haspopup="listbox" aria-expanded="false">
                                    <span class="cat-select__label"><i class="fas fa-palette cat-ico"></i><span>Frontend</span></span>
                                    <i class="fas fa-chevron-down cat-caret" aria-hidden="true"></i>
                                </button>
                                <div class="cat-select__menu" role="listbox">
                                    <button type="button" class="cat-option" role="option" data-value="frontend"><i class="fas fa-palette cat-ico"></i><span>Frontend</span></button>
                                    <button type="button" class="cat-option" role="option" data-value="backend"><i class="fas fa-cogs cat-ico"></i><span>Backend</span></button>
                                    <button type="button" class="cat-option" role="option" data-value="database"><i class="fas fa-database cat-ico"></i><span>Base de données</span></button>
                                    <button type="button" class="cat-option" role="option" data-value="api"><i class="fas fa-plug cat-ico"></i><span>API</span></button>
                                    <button type="button" class="cat-option" role="option" data-value="infrastructure"><i class="fas fa-server cat-ico"></i><span>Infrastructure</span></button>
                                    <button type="button" class="cat-option" role="option" data-value="design"><i class="fas fa-pencil-alt cat-ico"></i><span>Design</span></button>
                                    <button type="button" class="cat-option" role="option" data-value="other"><i class="fas fa-clipboard cat-ico"></i><span>Autre</span></button>
                                </div>
                            </div>
                            <select class="roadmap-input-hidden" id="modal_category" name="category" required>
                                <option value="frontend" selected>Frontend</option>
                                <option value="backend">Backend</option>
                                <option value="database">Base de données</option>
                                <option value="api">API</option>
                                <option value="infrastructure">Infrastructure</option>
                                <option value="design">Design</option>
                                <option value="other">Autre</option>
                            </select>
                        </div>
                        <div class="roadmap-field-half">
                            <label for="modal_due_date" class="roadmap-label">Date d'échéance</label>
                            <input type="date" class="roadmap-input" id="modal_due_date" name="due_date">
                        </div>
                    </div>
                    
                    <div class="roadmap-field-full">
                        <label for="modal_related_page" class="roadmap-label">
                            <i class="fas fa-link me-1"></i>
                            Page associée
                        </label>
                        <select class="roadmap-input" id="modal_related_page" name="related_page">
                            <option value="">-- Aucune page spécifique --</option>
                            @foreach($availablePages as $groupName => $pages)
                                <optgroup label="📁 {{ $groupName }}">
                                    @foreach($pages as $page)
                                        <option value="{{ $page['value'] }}" 
                                                title="{{ $page['description'] }}"
                                                data-group="{{ $groupName }}">
                                            {{ $page['label'] }}
                                        </option>
                                    @endforeach
                                </optgroup>
                            @endforeach
                        </select>
                        <small class="roadmap-text-muted">
                            <i class="fas fa-info-circle me-1"></i>
                            Associez cet élément à une page spécifique du site pour un suivi précis
                        </small>
                    </div>
                    
                    <div class="roadmap-field-full">
                        <label for="modal_description" class="roadmap-label">Description</label>
                        <textarea class="roadmap-input" id="modal_description" name="description" rows="4" 
                                  placeholder="Décrivez l'élément de roadmap..."></textarea>
                    </div>

                    <div class="roadmap-field-full">
                        <label class="roadmap-label">
                            <i class="fas fa-photo-video me-1"></i>
                            Médias (images/vidéos)
                        </label>
                        <div class="roadmap-media-upload">
                            <input type="file" id="create_media_input" class="roadmap-input" accept="image/*,video/*" multiple>
                        </div>
                        <small class="roadmap-text-muted">Les fichiers seront envoyés après la création</small>
                        <div class="roadmap-media-gallery" id="create_media_preview" aria-live="polite"></div>
                    </div>
                </div>
                
                <div class="glass-actions">
                    <button type="button" class="button button-secondary" data-modal-close>
                        Annuler
                    </button>
                    <button type="submit" class="button button-primary">
                        <i class="fas fa-plus"></i>
                        Créer l'élément
                    </button>
                </div>
            </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal d'édition d'élément -->
<div class="modal-layer" id="editItemModal" data-modal-id="editItemModal">
    <div class="modal-backdrop"></div>
    <div class="modal-container modal-lg">
        <div class="glass-form">
            <div class="glass-filter"></div>
            <div class="glass-overlay"></div>
            <div class="glass-specular"></div>
            <div class="glass-content">
                <div class="glass-header">
                    <h2 class="glass-title">Modifier l'élément de roadmap</h2>
                    <button type="button" class="modal-close" data-modal-close>
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <form id="editItemForm">
                @csrf
                @method('PUT')
                <input type="hidden" id="edit_item_id" name="item_id">
                <div class="glass-form-fields">
                    <div class="roadmap-field-row">
                        <div class="roadmap-field-full">
                            <label for="edit_title" class="roadmap-label is-required">Titre</label>
                            <input type="text" class="roadmap-input" id="edit_title" name="title" required>
                        </div>
                    </div>
                    
                    <div class="roadmap-field-row">
                        <div class="roadmap-field-half">
                            <label for="edit_priority" class="roadmap-label is-required">Priorité</label>
                            <div class="prio-select" data-select-id="edit_priority">
                                <button type="button" class="prio-select__btn" aria-haspopup="listbox" aria-expanded="false">
                                    <span class="prio-select__label"><i class="fas fa-arrow-down prio-color-low prio-ico"></i><span>Basse</span></span>
                                    <i class="fas fa-chevron-down prio-caret" aria-hidden="true"></i>
                                </button>
                                <div class="prio-select__menu" role="listbox">
                                    <button type="button" class="prio-option" role="option" data-value="low"><i class="fas fa-arrow-down prio-color-low prio-ico"></i><span>Basse</span></button>
                                    <button type="button" class="prio-option" role="option" data-value="medium"><i class="fas fa-minus prio-color-medium prio-ico"></i><span>Moyenne</span></button>
                                    <button type="button" class="prio-option" role="option" data-value="high"><i class="fas fa-arrow-up prio-color-high prio-ico"></i><span>Haute</span></button>
                                </div>
                            </div>
                            <select class="roadmap-input-hidden" id="edit_priority" name="priority" required>
                                <option value="low">Basse</option>
                                <option value="medium">Moyenne</option>
                                <option value="high">Haute</option>
                            </select>
                        </div>
                        <div class="roadmap-field-half">
                            <label for="edit_status" class="roadmap-label is-required">Statut</label>
                            <select class="roadmap-input" id="edit_status" name="status" required>
                                <option value="backlog">📋 Backlog</option>
                                <option value="planned">📅 Planifié</option>
                                <option value="in_progress">🚀 En cours</option>
                                <option value="on_hold">⏸️ En pause</option>
                                <option value="completed">✅ Terminé</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="roadmap-field-row">
                        <div class="roadmap-field-half">
                            <label for="edit_category" class="roadmap-label is-required">Catégorie</label>
                            <div class="cat-select" data-select-id="edit_category">
                                <button type="button" class="cat-select__btn" aria-haspopup="listbox" aria-expanded="false">
                                    <span class="cat-select__label"><i class="fas fa-palette cat-ico"></i><span>Frontend</span></span>
                                    <i class="fas fa-chevron-down cat-caret" aria-hidden="true"></i>
                                </button>
                                <div class="cat-select__menu" role="listbox">
                                    <button type="button" class="cat-option" role="option" data-value="frontend"><i class="fas fa-palette cat-ico"></i><span>Frontend</span></button>
                                    <button type="button" class="cat-option" role="option" data-value="backend"><i class="fas fa-cogs cat-ico"></i><span>Backend</span></button>
                                    <button type="button" class="cat-option" role="option" data-value="database"><i class="fas fa-database cat-ico"></i><span>Base de données</span></button>
                                    <button type="button" class="cat-option" role="option" data-value="api"><i class="fas fa-plug cat-ico"></i><span>API</span></button>
                                    <button type="button" class="cat-option" role="option" data-value="infrastructure"><i class="fas fa-server cat-ico"></i><span>Infrastructure</span></button>
                                    <button type="button" class="cat-option" role="option" data-value="design"><i class="fas fa-pencil-alt cat-ico"></i><span>Design</span></button>
                                    <button type="button" class="cat-option" role="option" data-value="other"><i class="fas fa-clipboard cat-ico"></i><span>Autre</span></button>
                                </div>
                            </div>
                            <select class="roadmap-input-hidden" id="edit_category" name="category" required>
                                <option value="frontend">Frontend</option>
                                <option value="backend">Backend</option>
                                <option value="database">Base de données</option>
                                <option value="api">API</option>
                                <option value="infrastructure">Infrastructure</option>
                                <option value="design">Design</option>
                                <option value="other">Autre</option>
                            </select>
                        </div>
                        <div class="roadmap-field-half">
                            <label for="edit_due_date" class="roadmap-label">Date d'échéance</label>
                            <input type="date" class="roadmap-input" id="edit_due_date" name="due_date">
                        </div>
                    </div>
                    
                    <div class="roadmap-field-full">
                        <label for="edit_related_page" class="roadmap-label">
                            <i class="fas fa-link me-1"></i>
                            Page associée
                        </label>
                        <select class="roadmap-input" id="edit_related_page" name="related_page">
                            <option value="">-- Aucune page spécifique --</option>
                            @foreach($availablePages as $groupName => $pages)
                                <optgroup label="📁 {{ $groupName }}">
                                    @foreach($pages as $page)
                                        <option value="{{ $page['value'] }}" 
                                                title="{{ $page['description'] }}"
                                                data-group="{{ $groupName }}">
                                            {{ $page['label'] }}
                                        </option>
                                    @endforeach
                                </optgroup>
                            @endforeach
                        </select>
                        <small class="roadmap-text-muted">
                            <i class="fas fa-info-circle me-1"></i>
                            Associez cet élément à une page spécifique du site pour un suivi précis
                        </small>
                    </div>
                    
                    <div class="roadmap-field-full">
                        <label for="edit_description" class="roadmap-label">Description</label>
                        <textarea class="roadmap-input" id="edit_description" name="description" rows="4" 
                                  placeholder="Décrivez l'élément de roadmap..."></textarea>
                    </div>

                    <div class="roadmap-field-full">
                        <label class="roadmap-label">
                            <i class="fas fa-photo-video me-1"></i>
                            Médias (images/vidéos)
                        </label>
                        <div class="roadmap-media-upload">
                            <input type="file" class="roadmap-input" id="edit_media_input" accept="image/*,video/*" multiple data-item-id="">
                            <button type="button" class="button button-secondary" id="edit_media_upload_btn" data-item-id="">
                                <i class="fas fa-upload"></i>
                                <span>Uploader</span>
                            </button>
                        </div>
                        <div class="roadmap-media-gallery" id="edit_media_preview" aria-live="polite"></div>
                        <div class="roadmap-media-gallery" id="edit_media_gallery" data-item-id="">
                            <!-- Vignette médias injectées via JS -->
                        </div>
                    </div>
                    
                    <div class="glass-actions">
                        <button type="button" class="button button-secondary" data-modal-close>
                            Annuler
                        </button>
                        <button type="submit" class="button button-primary">
                            <i class="fas fa-save"></i>
                            Enregistrer
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal de suppression -->
<div class="modal-layer" id="deleteModal" data-modal-id="deleteModal">
    <div class="modal-backdrop"></div>
    <div class="modal-container">
        <div class="glass-form">
            <div class="glass-filter"></div>
            <div class="glass-overlay"></div>
            <div class="glass-specular"></div>
            <div class="glass-content">
                <div class="glass-header">
                    <h2 class="glass-title">Confirmer la suppression</h2>
                    <button type="button" class="modal-close" data-modal-close>
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="glass-form-fields">
                    <p>Êtes-vous sûr de vouloir supprimer cet élément de la roadmap ?</p>
                    <p class="roadmap-text-muted">Cette action est irréversible.</p>
                </div>
                <div class="glass-actions">
                    <button type="button" class="button button-secondary" data-modal-close>Annuler</button>
                    <form id="deleteForm" method="POST" class="inline-form">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="button button-danger">
                            <i class="fas fa-trash"></i>
                            Supprimer
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modals et Templates HTML pour clonage via JS (inline pour présence DOM) --}}
<!-- Modal: Changer le statut -->
<div class="modal-layer" id="changeStatusModal" data-modal-id="changeStatusModal">
        <div class="modal-backdrop"></div>
        <div class="modal-container">
            <div class="glass-form">
                <div class="glass-filter"></div>
                <div class="glass-overlay"></div>
                <div class="glass-specular"></div>
                <div class="glass-content">
                    <div class="glass-header">
                        <h2 class="glass-title">Changer le statut</h2>
                        <button type="button" class="modal-close" data-modal-close>
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <form id="changeStatusForm">
                @csrf
                @method('PATCH')
                        <div class="glass-form-fields">
                            <input type="hidden" id="change_item_id" name="item_id" value="">
                            <div class="glass-field">
                                <label for="change_status_select" class="roadmap-label">Nouveau statut</label>
                                <select id="change_status_select" name="status" class="roadmap-input">
                                    <option value="backlog">📋 Backlog</option>
                                    <option value="planned">📅 Planifié</option>
                                    <option value="in_progress">🚀 En cours</option>
                                    <option value="on_hold">⏸️ En pause</option>
                                    <option value="completed">✅ Terminé</option>
                                </select>
                            </div>
                        </div>
                        <div class="glass-actions">
                            <button type="button" class="button button-secondary" data-modal-close>Annuler</button>
                            <button type="submit" class="button button-primary" id="change_status_submit">Changer</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Décaler / Planifier -->
<div class="modal-layer" id="postponeModal" data-modal-id="postponeModal">
        <div class="modal-backdrop"></div>
        <div class="modal-container">
            <div class="glass-form">
                <div class="glass-filter"></div>
                <div class="glass-overlay"></div>
                <div class="glass-specular"></div>
                <div class="glass-content">
                    <div class="glass-header">
                        <h2 class="glass-title">Planifier l'élément</h2>
                        <button type="button" class="modal-close" data-modal-close>
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <form id="postponeForm">
                        @csrf
                        <div class="glass-form-fields">
                            <input type="hidden" id="postpone_item_id" name="item_id" value="">
                            <div class="glass-field">
                                <label for="postpone_date" class="roadmap-label is-required">Nouvelle date</label>
                                <input type="date" class="roadmap-input" id="postpone_date" name="planned_date" required>
                            </div>
                        </div>
                        <div class="glass-actions">
                            <button type="button" class="button button-secondary" data-modal-close>Annuler</button>
                            <button type="submit" class="button button-primary">Planifier</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Confirmation: Toggle Play/Pause --}}
<div class="modal-layer" id="confirmToggleModal" data-modal-id="confirmToggleModal">
        <div class="modal-backdrop"></div>
        <div class="modal-container">
            <div class="glass-form">
                <div class="glass-filter"></div>
                <div class="glass-overlay"></div>
                <div class="glass-specular"></div>
                <div class="glass-content">
                    <div class="glass-header">
                        <h2 class="glass-title" id="confirmToggleTitle">Confirmer l'action</h2>
                        <button type="button" class="modal-close" data-modal-close>
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <form id="toggleStatusForm">
                        @csrf
                        <input type="hidden" name="item_id" id="toggle_item_id">
                        <input type="hidden" name="target_status" id="toggle_target_status">
                        <div class="glass-form-fields">
                            <p id="confirmToggleText">Voulez-vous confirmer cette action ?</p>
                        </div>
                        <div class="glass-actions">
                            <button type="button" class="button button-secondary" data-modal-close>Annuler</button>
                            <button type="submit" class="button button-primary">Confirmer</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Confirmation: Terminer --}}
<div class="modal-layer" id="confirmCompleteModal" data-modal-id="confirmCompleteModal">
        <div class="modal-backdrop"></div>
        <div class="modal-container">
            <div class="glass-form">
                <div class="glass-filter"></div>
                <div class="glass-overlay"></div>
                <div class="glass-specular"></div>
                <div class="glass-content">
                    <div class="glass-header">
                        <h2 class="glass-title">Marquer comme terminé</h2>
                        <button type="button" class="modal-close" data-modal-close>
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <form id="completeStatusForm">
                        @csrf
                        <input type="hidden" name="item_id" id="complete_item_id">
                        <input type="hidden" name="target_status" value="completed">
                        <div class="glass-form-fields">
                            <p>Voulez-vous marquer cet élément comme <strong>Terminé</strong> ?</p>
                        </div>
                        <div class="glass-actions">
                            <button type="button" class="button button-secondary" data-modal-close>Annuler</button>
                            <button type="submit" class="button button-success">Terminer</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Changer de statut (pour éléments terminés) --}}
<div class="modal-layer" id="changeStatusModal2" data-modal-id="changeStatusModal2">
        <div class="modal-backdrop"></div>
        <div class="modal-container">
            <div class="glass-form">
                <div class="glass-filter"></div>
                <div class="glass-overlay"></div>
                <div class="glass-specular"></div>
                <div class="glass-content">
                    <div class="glass-header">
                        <h2 class="glass-title">Changer le statut</h2>
                        <button type="button" class="modal-close" data-modal-close>
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <form id="changeStatusForm2">
                        @csrf
                        <input type="hidden" name="item_id" id="change_item_id2">
                        <div class="glass-form-fields">
                            <div class="glass-field">
                                <label for="change_target_status" class="roadmap-label is-required">Nouveau statut</label>
                                <select class="roadmap-input" id="change_target_status" name="target_status" required>
                                    <option value="backlog">📋 Backlog</option>
                                    <option value="planned">📅 Planifié</option>
                                    <option value="in_progress">🚀 En cours</option>
                                    <option value="on_hold">⏸️ En pause</option>
                                </select>
                            </div>
                        </div>
                        <div class="glass-actions">
                            <button type="button" class="button button-secondary" data-modal-close>Annuler</button>
                            <button type="submit" class="button button-primary">Changer</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="roadmap-templates">
        <template id="tpl-media-image">
            <div class="roadmap-media-item">
                <a href="#" class="media-lightbox-trigger" data-mime="image/*">
                    <img class="media-thumb" src="" alt="media">
                </a>
                <button class="btn btn-sm btn-outline-danger roadmap-media-delete" data-item-id="" data-media-index="">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
        </template>
        <template id="tpl-media-video">
            <div class="roadmap-media-item">
                <a href="#" class="media-lightbox-trigger" data-mime="video/*">
                    <video class="media-thumb-video" controls muted src=""></video>
                </a>
                <button class="btn btn-sm btn-outline-danger roadmap-media-delete" data-item-id="" data-media-index="">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
        </template>
        <template id="tpl-media-file">
            <div class="roadmap-media-item">
                <a href="#" target="_blank" class="btn btn-sm btn-outline-secondary media-file-link">
                    <i class="fas fa-file"></i>
                </a>
                <button class="btn btn-sm btn-outline-danger roadmap-media-delete" data-item-id="" data-media-index="">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
        </template>
        <template id="tpl-notification">
            <div class="notification">
                <div class="notification-content">
                    <i></i>
                    <span></span>
                </div>
                <button class="notification-close" type="button">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </template>
        <template id="tpl-lightbox-image">
            <div class="lightbox-overlay" role="dialog" aria-modal="true">
                <div class="lightbox-backdrop"></div>
                <div class="lightbox-content" tabindex="-1">
                    <div class="lightbox-media">
                        <img class="lightbox-img" src="" alt="media">
                        <button class="roadmap-lightbox-close" type="button" aria-label="Fermer">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
            </div>
        </template>
        <template id="tpl-lightbox-video">
            <div class="lightbox-overlay" role="dialog" aria-modal="true">
                <div class="lightbox-backdrop"></div>
                <div class="lightbox-content" tabindex="-1">
                    <div class="lightbox-media">
                        <video class="lightbox-video" src="" controls autoplay></video>
                        <button class="roadmap-lightbox-close" type="button" aria-label="Fermer">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
            </div>
        </template>
        <template id="tpl-empty-filter">
            <div class="empty-state" id="filter-message">
                <div class="empty-state-icon">
                    <i class="fas fa-filter"></i>
                </div>
                <div class="empty-state-content">
                    <h3 class="empty-title"></h3>
                    <p>Aucun élément ne correspond au filtre sélectionné</p>
                    <button type="button" class="btn btn-secondary btn-clear-status">
                        <i class="fas fa-times"></i>
                        <span>Effacer le filtre</span>
                    </button>
                </div>
            </div>
        </template>
        <template id="tpl-empty-search">
            <div class="empty-state" id="no-results-message">
                <div class="empty-state-icon">
                    <i class="fas fa-search"></i>
                </div>
                <div class="empty-state-content">
                    <h3>Aucun résultat trouvé</h3>
                    <p>Essayez avec d'autres termes de recherche</p>
                </div>
            </div>
        </template>
        <template id="tpl-meta-completed-at">
            <div class="meta-item completed-at">
                <div class="meta-item-content">
                    <span class="meta-label">Terminé le</span>
                    <span class="meta-value">
                        <i class="fas fa-check-circle"></i>
                        <span class="completed-date"></span>
                    </span>
                </div>
            </div>
        </template>
    </div>
{{-- fin Modals & Templates --}}
@endsection