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

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])

<div class="container w-95">
 <form method="POST" action="{{ route('audio.transcript.update', $audio->id) }}">
    @csrf
    @method('PUT')
 <div class="card">
  <div class="card-header d-flex justify-content-between w-100">
  <h3>Edit Transcript for: {{ $audio->title }}</h3>

 
  </div>
        <div class="card-body">
    <table class="table table-bordered">
      <thead class="table-light">
        <tr>
          <th>Tamil Text</th>
          <th>Start Time</th>
          <th>End Time</th>
          <th>Action</th>
        </tr>
      </thead>

      <tbody id="editTranscriptTable">
        @foreach($audio->transcripts as $index => $transcript)
        <tr>
          <td>
            <textarea name="transcripts[{{ $index }}][text]" class="form-control" required>{{ $transcript->text }}</textarea>
          </td>
          <td>
            <input type="text" name="transcripts[{{ $index }}][start_time]" class="form-control" value="{{ $transcript->start_time }}" required>
          </td>
          <td>
            <input type="text" name="transcripts[{{ $index }}][end_time]" class="form-control" value="{{ $transcript->end_time }}" required>
          </td>
          <td>
            <button type="button" class="btn btn-danger removeRow">X</button>
          </td>
        </tr>
        @endforeach
      </tbody>
    </table>
</div>
    <button type="submit" class="btn btn-success">Save Changes</button>
  </form>
</div>
</div>
<script>
document.addEventListener('click', function (e) {
  if (e.target.classList.contains('removeRow')) {
    e.target.closest('tr').remove();
  }
});
</script>
@endsection