@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Topic'])
    
    <div class="container w-95">
     <div class="card">
     <div class="card-header d-flex justify-content-between w-100">
                <h4>{{ $audio->title }}</h4>  
         <div class="d-flex gap-2">
                        <a href="{{ route('topics.userindex') }}" class="btn btn-secondary btn-sm">Back</a>
                    </div>
            </div>
  
  <div class="card-body">
    <audio id="audio-player" controls style="width: 100%; margin-bottom: 20px;">
        <source src="{{ asset('storage/' . $audio->audio_file) }}" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>

    <div id="transcript">
        @foreach($audio->transcripts as $line)
            <p data-start="{{ $line->start_time }}" data-end="{{ $line->end_time }}">{{ $line->text }}</p>
        @endforeach
    </div>
    </div>
</div>
<style>
    #transcript p {
        padding: 5px;
        transition: background-color 0.3s ease;
    }
    #transcript p.active {
        background-color: #d1e7dd;
        font-weight: bold;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const audio = document.getElementById('audio-player');
        const lines = document.querySelectorAll('#transcript p');

        audio.addEventListener('timeupdate', () => {
            const current = audio.currentTime;

            lines.forEach(line => {
                const start = parseFloat(line.dataset.start);
                const end = parseFloat(line.dataset.end);

                if (current >= start && current <= end) {
                    line.classList.add('active');
                } else {
                    line.classList.remove('active');
                }
            });
        });
    });
</script>


@endsection