@extends('frontend.mediknode.layout.mainlayout')
@section('content')
    @component('frontend.mediknode.components.breadcrumb')
        @slot('title')
            Replay 12CIGOB 2026
        @endslot
        @slot('li_1')
            Replay 12CIGOB 2026
        @endslot
    @endcomponent
    <div class="dashboard-content">
        <div class="container">
            @component('frontend.mediknode.components.nav')
            @endcomponent
            <div class="dashboard-details">
                <div class="row dashboard-info">
                    <div class="col-lg-12">
                        <div class="card dash-cards">
                            <div class="card-body">
                                <h4 class="mb-4 bold">Replay 12CIGOB 2026</h4>

                                {{-- Zone de lecture (player injecté dynamiquement) --}}
                                <div id="replay-player-wrapper" class="mb-4" style="display:none;">
                                    <div id="replay-player"
                                        style="position:relative;width:100%;padding-top:56.25%;background:#000;border-radius:8px;overflow:hidden;">
                                    </div>
                                    <div id="replay-player-error" class="mt-2 alert alert-danger" style="display:none;"></div>
                                </div>

                                @if ($videos->isEmpty())
                                    <div class="py-5 text-center">
                                        Aucun replay disponible pour le moment.
                                    </div>
                                @else
                                    <div class="row">
                                        @foreach ($videos as $video)
                                            <div class="mb-3 col-lg-6">
                                                <div class="p-3 border rounded h-100 d-flex flex-column">
                                                    <h6 class="bold">{{ $video->title }}</h6>
                                                    @if ($video->description)
                                                        <p class="mb-3 text-muted small">{{ $video->description }}</p>
                                                    @endif
                                                    <button type="button"
                                                        class="mt-auto btn btn-primary replay-play-btn"
                                                        data-otp-url="{{ route('replay.otp', $video) }}"
                                                        data-title="{{ $video->title }}">
                                                        <i class="fa-solid fa-circle-play"></i> Regarder
                                                    </button>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @component('frontend.mediknode.components.scrolltotop')
    @endcomponent
@endsection

@section('scripts')
    @parent
    <script>
            document.addEventListener('DOMContentLoaded', function () {
                const wrapper = document.getElementById('replay-player-wrapper');
                const player = document.getElementById('replay-player');
                const errorBox = document.getElementById('replay-player-error');
                const csrf = '{{ csrf_token() }}';

                document.querySelectorAll('.replay-play-btn').forEach(function (btn) {
                    btn.addEventListener('click', async function () {
                        const url = btn.dataset.otpUrl;
                        const original = btn.innerHTML;
                        btn.disabled = true;
                        btn.innerHTML = 'Chargement…';
                        errorBox.style.display = 'none';

                        try {
                            const res = await fetch(url, {
                                method: 'POST',
                                headers: {
                                    'X-CSRF-TOKEN': csrf,
                                    'Accept': 'application/json',
                                },
                            });

                            if (!res.ok) {
                                throw new Error('HTTP ' + res.status);
                            }

                            const data = await res.json();
                            if (!data.otp || !data.playbackInfo) {
                                throw new Error('Réponse invalide');
                            }

                            const src = 'https://player.vdocipher.com/v2/?otp=' +
                                encodeURIComponent(data.otp) +
                                '&playbackInfo=' + encodeURIComponent(data.playbackInfo);

                            player.innerHTML = '<iframe src="' + src + '" ' +
                                'style="border:0;position:absolute;top:0;left:0;width:100%;height:100%;" ' +
                                'allowFullScreen="true" allow="encrypted-media"></iframe>';

                            wrapper.style.display = 'block';
                            wrapper.scrollIntoView({ behavior: 'smooth', block: 'start' });
                        } catch (e) {
                            errorBox.textContent = 'Impossible de lancer la lecture. Veuillez réessayer.';
                            errorBox.style.display = 'block';
                            wrapper.style.display = 'block';
                        } finally {
                            btn.disabled = false;
                            btn.innerHTML = original;
                        }
                    });
                });
            });
        </script>
@endsection