@extends('layouts.admin')
@section('title', 'Médiathèque - ' . getRadioUsers()->name)
@inject('album', 'Modules\Album\Entities\Album')
@section('content')
    <div class="row g-4 mb-4">

        <div class="p-5 bg-linear-gradient mt-0">
            <div class="container-fluid text-white text-center">
                <div class="row justify-content-center">
                    <div class="col-md-10">
                        <h2 class="fw-bold mb-4" style="font-size: clamp(1.1rem, 2.5vw + 0.7rem, 2.1875rem);">Gérer ma Médiathèque</h2>
                    </div>
                </div>
            </div>
        </div>

        <div id="sidebar-wrapper" class="col-lg-3 col-md-4 shadow-sm rounded-4 sidebar-collapse">
            <div class="sidebar-header p-3 border-bottom">
                <h5 class="text-center mb-0">Types d'audio</h5>
            </div>

            <div class="list-group list-group-flush">
                @php $i = 1; @endphp
                @foreach ($genres as $genre)
                    <div class="list-group-item d-flex align-items-center justify-content-between @if (request()->route('audio_genre') == $genre->genre_slug) active @endif"
                        style="cursor: default; transition: all 0.3s ease;">

                        <a href="{{ route('user.mediatheque', $genre->genre_slug) }}"
                            class="flex-grow-1 text-decoration-none text-reset d-flex align-items-center">
                            <span class="span text-truncate">{{ $genre->genre_name }}</span>
                        </a>

                        <div class="d-flex align-items-center">
                            <span
                                class="badge bg-secondary rounded-pill me-3">{{ $audios[$genre->genre_slug]->count() }}</span>

                            @if ($genre->radio_id == $radio->id && count($genre->audios) == 0)
                                <button type="button" class="btn my-auto btn-sm text-danger" data-bs-toggle="modal"
                                    data-bs-target="#deleteAudioTypeModal-{{ $genre->id }}">
                                    <i class="bi bi-trash"></i>
                                </button>
                            @endif
                        </div>
                    </div>

                    <div class="modal fade" id="deleteAudioTypeModal-{{ $genre->id }}" data-bs-backdrop="static"
                        data-bs-keyboard="false" tabindex="-1"
                        aria-labelledby="deleteAudioTypeModalLabel-{{ $genre->id }}" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content shadow rounded-4">
                                <form method="POST"
                                    action="{{ route('user.deleteAudioType', ['audio_type_id' => $genre->id]) }}">
                                    @csrf
                                    @method('DELETE')

                                    <div class="modal-header bg-light rounded-top-4 px-4 py-3">
                                        <h5 class="modal-title mx-auto" id="deleteAudioTypeModalLabel-{{ $genre->id }}">
                                            Suppression d'un type d'audio
                                        </h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Fermer"></button>
                                    </div>

                                    <div class="modal-body text-center">
                                        <p class="mb-0 fw-semibold">Êtes-vous sûr de vouloir supprimer ce type d’audio ?</p>
                                        <p class="text-danger mt-2">
                                            <strong>« {{ $genre->genre_name }} »</strong>
                                        </p>
                                    </div>

                                    <div
                                        class="modal-footer bg-light rounded-bottom-4 d-flex justify-content-between px-4 py-3">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                            Annuler
                                        </button>
                                        <button type="submit" class="btn btn-danger">
                                            Supprimer
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
        <div class="col-lg-9 col-md-8 card-custom px-md-4">
            <div class="bg-white rounded-4 shadow-sm p-4">
                <div class="header-section">
                    <div
                        class="d-flex flex-column flex-md-row justify-content-center justify-content-md-between align-items-center align-items-md-stretch mb-4">
                        <div class="order-md-1 mb-3 mb-md-0">
                            <button class="btn gradient-outline d-md-none" id="sidebarToggleBtn">
                                Menu catégories
                            </button>
                        </div>

                        <div class="d-flex flex-column flex-md-row gap-2 gap-md-3">
                            <div>
                                <button class="btn gradient-btn w-100" data-bs-toggle="modal" data-bs-target="#addAudioType"
                                    type="button">
                                    Ajouter un type
                                </button>
                            </div>
                            <div>
                                <button class="btn gradient-btn w-100" type="button" data-bs-toggle="modal"
                                    data-bs-target="#addAudio">
                                    Ajouter un audio
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                @if (count($audioss) > 0)
                    <div class="bg-white mb-2">
                        <h3 class="text-gradient table-header">
                            {{ optional($genre_)->genre_name ?? 'Tous les audios' }}
                        </h3>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped align-middle w-100" id="datatable-buttons">
                            <thead class="table-white">
                                <tr>
                                    <th>#</th>
                                    <th>Image</th>
                                    <th>Nom</th>
                                    <th>Créé le</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($audioss as $key => $audio)
                                    <tr>
                                        <td>{{ $key + 1 }}</td>
                                        <td>
                                            <div class="position-relative d-inline-block play-btn-wrapper"
                                                style="width: 80px; height: 80px;">
                                                @if ($audio->image)
                                                    <img src="{{ asset($audio->image) }}" alt=""
                                                        class="audio-image img-fluid rounded"
                                                        style="width: 100%; height: 100%; object-fit: cover;">
                                                @else
                                                    <img src="{{ asset('images/audio/audio_genre/audio-image-default.jpeg') }}"
                                                        alt="" class="img-fluid rounded"
                                                        style="width: 100%; height: 100%; object-fit: cover;">
                                                @endif

                                                {{-- bouton play masqué par défaut --}}
                                                <button
                                                    class="btn btn-light rounded-circle bg-linear-gradient align-items-center justify-content-center podcast-btn play-button"
                                                    style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40%; display: flex; align-items: center; justify-content: center;"
                                                    id="play-pause-audio-button-{{ $audio->id }}"
                                                    data-src="{{ $audio->aws_upload ? asset(config('app.aws_url') . 'images/audio/' . $audio->audio) : asset('media/images/audio/' . $audio->audio) }}"
                                                    data-audio_id="{{ $audio->id }}">
                                                    <img src="{{ asset('assets/images/play-icon.svg') }}" alt=""
                                                        style="width: 16px;" />
                                                </button>

                                            </div>
                                        </td>


                                        <td>{{ $audio->audio_title }}</td>
                                        <td>{{ $audio->release_date ?? 'Aucune date définie' }}</td>
                                        <td class="action-col" style="z-index: 9999 !important;">
                                            <div class="dropdown">
                                                <button class="btn p-0 border-0 bg-transparent" type="button"
                                                    id="dropdownMenu{{ $key }}" data-bs-toggle="dropdown"
                                                    aria-expanded="false">
                                                    <i class="bi bi-three-dots-vertical fs-5"></i>
                                                </button>
                                                <ul class="dropdown-menu"
                                                    aria-labelledby="dropdownMenu{{ $key }}">
                                                    <li>
                                                        <a href="javascript:void(0);" class="dropdown-item toggle-audio"
                                                            data-action="play"
                                                            data-src="{{ $audio->aws_upload ? asset(config('app.aws_url') . 'images/audio/' . $audio->audio) : asset('media/images/audio/' . $audio->audio) }}"
                                                            data-audio_id="{{ $audio->id }}">
                                                            Lire
                                                        </a>
                                                    </li>

                                                    <li>
                                                        <a href="javascript:void(0);" type="button"
                                                            data-bs-toggle="modal"
                                                            data-bs-target="#editMediaModal{{ $audio->id }}"
                                                            class="dropdown-item ms_share_music">
                                                            Modifier
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:void(0);" type="button"
                                                            data-bs-toggle="modal"
                                                            data-bs-target="#delete_modal{{ $audio->id }}"
                                                            class="dropdown-item text-danger ms_share_music">
                                                            Supprimer
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>

                                    <div class="modal fade" id="editMediaModal{{ $audio->id }}"
                                        data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
                                        aria-labelledby="editMediaModalLabel" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <form id="updateAudio-{{ $audio->id }}" method="POST"
                                                    action="{{ route('user.editAudio', ['audio' => $audio->id]) }}"
                                                    enctype="multipart/form-data">
                                                    @csrf
                                                    @method('PATCH')
                                                    <div class="modal-header">
                                                        <h1 class="modal-title fs-5" id="editMediaModalLabel">
                                                            {{ isset($audio) ? __('adminWords.update') . ' ' . __('adminWords.audio') : 'Créer un audio' }}
                                                        </h1>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                            aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <div class="mb-3">
                                                            <label for="" class="form-label">Titre de
                                                                l’audio</label>
                                                            <input type="text"
                                                                class="form-control @error('audio_title') is-invalid @enderror"
                                                                name="audio_title" id="audio_title"
                                                                placeholder="{{ __('adminWords.enter') . ' ' . __('adminWords.audio') . ' ' . __('adminWords.title') }}"
                                                                value="{{ $audio->audio_title }}" />
                                                            @error('audio_title')
                                                                <div class="invalid-feedback">{{ $message }}
                                                                </div>
                                                            @enderror
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for=""
                                                                class="form-label">{{ __('adminWords.select') . ' ' . __('adminWords.audio_genre') }}</label>
                                                            <select name="audio_genre_id" id="audio_genre_id"
                                                                class="form-select @error('audio_genre_id') is-invalid @enderror">
                                                                <option value="">Choisir le genre</option>
                                                                @foreach ($audioGenre as $key => $value)
                                                                    <option value="{{ $key }}"
                                                                        @if ($audio->audio_genre_id == $key) selected @endif>
                                                                        {{ $value }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                            @error('audio_genre_id')
                                                                <div class="invalid-feedback">{{ $message }}
                                                                </div>
                                                            @enderror
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="" class="form-label">Date de
                                                                sortie</label>
                                                            <input type="date" name="release_date" id="release_date"
                                                                placeholder="Entrez la date de sortie"
                                                                class="form-control @error('release_date') is-invalid @enderror }}"
                                                                value="{{ $audio->release_date }}" />
                                                            @error('release_date')
                                                                <div class="invalid-feedback">{{ $message }}
                                                                </div>
                                                            @enderror
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="" class="form-label">Audio</label>
                                                            <input type="file" name="audio"
                                                                class="form-control @error('audio') is-invalid @enderror"
                                                                id="audio"
                                                                data-ext="['mp3','mp4','m3a','m4a','wav,'ogg']"
                                                                data-audio-id="audio" data-label="audio_url" />
                                                            <input type="hidden" id="audio_name"
                                                                value="{{ isset($audioData) ? $audioData->audio : '' }}">
                                                            <span class="">Seuls les fichier MP3 sont
                                                                autorisés.*</span>
                                                            @error('audio')
                                                                <div class="invalid-feedback">{{ $message }}
                                                                </div>
                                                            @enderror
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="" class="form-label">Banière du
                                                                fichier audio</label>
                                                            <input type="file" name="banner_image"
                                                                accept=".jpg, .jpeg, .png" data-ext="['jpg','png','jpeg']"
                                                                class="form-control @error('banner_image') is-invalid @enderror"
                                                                id=""
                                                                placeholder="Entrez le nom du type d’audio" />
                                                            <span>Téléverser un fichier de dimension 380 X 200 et de
                                                                taille intérieur à 300 Ko.*</span>
                                                            @error('banner_image')
                                                                <div class="invalid-feedback">{{ $message }}
                                                                </div>
                                                            @enderror
                                                        </div>
                                                        <input type="hidden" id="status" name="status"
                                                            value="1" />
                                                        <input type="hidden" id="is_featured" name="is_featured"
                                                            value="1" />
                                                        <input type="hidden" id="is_trending" name="is_trending"
                                                            value="1" />
                                                        <input type="hidden" id="is_recommended" name="is_recommended"
                                                            value="1" />
                                                        <input type="hidden" id="aws_upload" name="aws_upload"
                                                            value="1" />
                                                        <div class="mb-3">
                                                            <label for="" class="form-label">Description</label>
                                                            <textarea name="description" rows="5" class="form-control  @error('desciption') is-invalid @enderror"
                                                                id="">{{ $audio->description }}</textarea>
                                                            @error('description')
                                                                <div class="invalid-feedback">{{ $message }}
                                                                </div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="reset" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">
                                                            Annuler
                                                        </button>
                                                        <button type="button"
                                                            onclick="submit(this, 'updateAudio-{{ $audio->id }}')"
                                                            class="btn gradient-btn">
                                                            Modifier
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="modal fade" id="delete_modal{{ $audio->id }}"
                                        data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
                                        aria-labelledby="deleteAudioLabel{{ $audio->id }}" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content shadow rounded-4">
                                                <form id="deleteAudio-{{ $audio->id }}" method="POST"
                                                    action="{{ route('user.deleteAudio', ['audio' => $audio->id]) }}">
                                                    @csrf
                                                    @method('DELETE')

                                                    <div class="modal-header bg-light rounded-top-4 px-4 py-3">
                                                        <h5 class="modal-title mx-auto"
                                                            id="deleteAudioLabel{{ $audio->id }}">
                                                            Suppression du fichier audio
                                                        </h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                            aria-label="Fermer"></button>
                                                    </div>

                                                    <div class="modal-body text-center">
                                                        <p class="mb-0 fw-semibold">Êtes-vous sûr de vouloir
                                                            supprimer
                                                            ce fichier audio ?</p>
                                                        <p class="text-danger mt-2">
                                                            <strong>« {{ $audio->audio_title }} »</strong>
                                                        </p>
                                                    </div>

                                                    <div
                                                        class="modal-footer bg-light rounded-bottom-4 d-flex justify-content-between px-4 py-3">
                                                        <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">
                                                            Annuler
                                                        </button>
                                                        <button type="button" class="btn btn-danger"
                                                            onclick="submit(this, 'deleteAudio-{{ $audio->id }}')">
                                                            Supprimer
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach

                                <div class="audio-part">
                                    <audio id="sound" src="" type="audio/mpeg"></audio>
                                </div>
                            </tbody>
                        </table>
                    </div>

                @else
                    <div class="main-content-card">
                        <div>
                            <img src="{{ asset('assets/images/not-content.svg') }}" alt="aucun" />
                        </div>
                        <div>
                            <p class="h5">{{ request()->route('mediat') ? $genre_->genre_name : 'audio' }} non
                                disponible</p>
                        </div>
                    </div>
                @endif

            </div>

            <!-- Modal -->
            <div class="modal fade" id="addAudioType" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
                aria-labelledby="addAudioTypeLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <form id="addAudioType" method="POST" action="{{ route('user.addAudioType') }}"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="modal-header">
                                <h1 class="modal-title fs-5" id="addAudioTypeLabel">
                                    Ajout d’un type d’audio
                                </h1>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="mb-3">
                                    <label for="" class="form-label">Nom du type d’audio</label>
                                    <input type="text" name="audio_type_name" id="audio_type_name"
                                        class="form-control @error('audio_type_name') is-invalid @enderror"
                                        placeholder="Entrez le nom du type d’audio" />
                                    @error('audio_type_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label for="" class="form-label">Image de type audio</label>
                                    <input type="file" name="audio_type_image" accept=".jpg, .jpeg, .png"
                                        data-ext="['jpg','png','jpeg']"
                                        class="form-control @error('audio_type_image') is-invalid @enderror" />
                                    @error('audio_type_image')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="reset" class="btn btn-secondary" data-bs-dismiss="modal">
                                    {{ __('adminWords.reset') }}
                                </button>
                                <button type="submit" class="btn gradient-btn">
                                    Ajouter
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Modal 2 -->
            <div class="modal fade" id="addAudio" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
                aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <form id="addAudio" method="POST" action="{{ route('user.addAudio') }}"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="modal-header">
                                <h1 class="modal-title fs-5" id="staticBackdropLabel">
                                    Créer un audio
                                </h1>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="mb-3">
                                    <label for="" class="form-label">Titre de l’audio</label>
                                    <input type="text" class="form-control @error('audio_title') is-invalid @enderror"
                                        name="audio_title" id="audio_title"
                                        placeholder="{{ __('adminWords.enter') . ' ' . __('adminWords.audio') . ' ' . __('adminWords.title') }}" />
                                    @error('audio_title')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label for=""
                                        class="form-label">{{ __('adminWords.select') . ' ' . __('adminWords.audio_genre') }}</label>
                                    <select name="audio_genre_id"
                                        class="form-select @error('audio_genre_id') is-invalid @enderror">
                                        <option value="">Choisir le genre</option>
                                        @foreach ($audioGenre as $key => $value)
                                            <option value="{{ $key }}">
                                                {{ $value }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('audio_genre_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label for="" class="form-label">Date de sortie</label>
                                    <input type="date" name="release_date" placeholder="Entrez la date de sortie"
                                        class="form-control @error('release_date') is-invalid @enderror }}" />
                                    @error('release_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label for="" class="form-label">Audio</label>
                                    <input type="file" name="audio"
                                        class="form-control @error('audio') is-invalid @enderror" id=""
                                        data-ext="['mp3','mp4','m3a','m4a','wav,'ogg']" data-audio-id="audio"
                                        data-label="audio_url" />
                                    <input type="hidden" id="audio_name"
                                        value="{{ isset($audioData) ? $audioData->audio : '' }}">
                                    <span class="">Seuls les fichier MP3 sont autorisés.*</span>
                                    @error('audio')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                {{-- <div class="mb-3">
                                <label for="" class="form-label">Banière du fichier audio</label>
                                <input type="file" name="banner_image" accept=".jpg, .jpeg, .png"
                                    data-ext="['jpg','png','jpeg']"
                                    class="form-control @error('banner_image') is-invalid @enderror" id=""
                                    placeholder="Entrez le nom du type d’audio" />
                                <span>Téléverser un fichier de dimension 380 X 200 et de
                                    taille intérieur à 300 Ko.*</span>
                                @error('banner_image')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            --}}
                                <input type="hidden" id="status" name="status" value="1" />
                                <input type="hidden" id="is_featured" name="is_featured" value="1" />
                                <input type="hidden" id="is_trending" name="is_trending" value="1" />
                                <input type="hidden" id="is_recommended" name="is_recommended" value="1" />
                                <input type="hidden" id="aws_upload" name="aws_upload" value="1" />
                                <div class="mb-3">
                                    <label for="" class="form-label">Description</label>
                                    <textarea name="description" rows="5" class="form-control  @error('desciption') is-invalid @enderror"
                                        id=""></textarea>
                                    @error('description')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="modal-footer">
                                @if (!isset($audioData))
                                    <button type="reset" class="btn btn-secondary" data-bs-dismiss="modal">
                                        {{ __('adminWords.reset') }}
                                    </button>
                                @endif
                                <button type="button" onclick="submit(this, 'addAudio')" class="btn gradient-btn">
                                    Ajouter
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="{{ asset('assets/js/player-audio.js') }}"></script>
    <script src="{{ asset('assets/extra-libs/toastr/dist/build/toastr.min.js') }}"></script>
    <script>
        function submit(btn, formId) {
            btn.disabled = true;
            $('#' + formId).submit();
        }
    </script>
    @if ($errors->any())
        {{--
        <script>
            window.onload = () => {
                const modal = new bootstrap.Modal(document.getElementById('addAudioType'));
                modal.show();
            }
        </script> --}}
    @endif

    <script>
        if (@json(session()->has('success'), JSON_PRETTY_PRINT)) {
            console.log("{{ session('message') }}");
            if (@json(session('success'), JSON_PRETTY_PRINT)) {
                toastr.success("{{ session('message') }}", 'Opération réussie', {
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut",
                    timeOut: 5000
                })
            }
            if (!@json(session('success'), JSON_PRETTY_PRINT)) {
                toastr.error("{{ session('message') }}", 'Echec de l\'opération', {
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut",
                    timeOut: 5000
                })
            }
        }

        if (@json($errors->any(), JSON_PRETTY_PRINT)) {
            toastr.error('{{ $errors->first() }}', 'Echec de l\'opération', {
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut",
                timeOut: 5000
            })
        }

        if (@json(session('status'), JSON_PRETTY_PRINT)) {
            toastr.success("{{ session('message') }}", 'Mise à jour réussie', {
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut",
                timeOut: 5000
            })
        }
    </script>
    <!--     <script>
        document.querySelectorAll('.play-btn-wrapper').forEach(wrapper => {
            const button = wrapper.querySelector('.play-button');

            wrapper.addEventListener('mouseover', () => {
                button.style.display = 'flex';
            });

            wrapper.addEventListener('mousedown', () => {
                button.style.display = 'none';
            });

            // Optionnel : cacher si la souris sort du bloc
            wrapper.addEventListener('mouseleave', () => {
                button.style.display = 'none';
            });
        });
    </script> -->

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const sidebar = document.getElementById('sidebar-wrapper');
            const sidebarToggleBtn = document.getElementById('sidebarToggleBtn');
            const contentOverlay = document.createElement('div');
            contentOverlay.className = 'content-overlay';
            document.body.appendChild(contentOverlay);

            // Gestion du toggle sur mobile
            sidebarToggleBtn.addEventListener('click', function() {
                sidebar.classList.toggle('show');
                contentOverlay.style.display = sidebar.classList.contains('show') ? 'block' : 'none';
            });

            // Fermer le sidebar quand on clique à l'extérieur
            contentOverlay.addEventListener('click', function() {
                sidebar.classList.remove('show');
                contentOverlay.style.display = 'none';
            });

            // Gestion du redimensionnement de la fenêtre
            function handleResize() {
                if (window.innerWidth > 991.98) {
                    sidebar.classList.remove('show');
                    contentOverlay.style.display = 'none';
                }
            }

            window.addEventListener('resize', handleResize);
            handleResize();
        });
    </script>

@endsection