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

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

    <div class="container w-95">
        <form id="transcriptForm" method="POST" action="{{ route('audio.transcript.save', $audio->id) }}">
            @csrf
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center w-100">
                    <h6>Manage Transcript for: {{ $audio->title }}</h6>
                    
                    <div class="d-flex gap-2">
                        <a href="{{ route('audio.index') }}" class="btn btn-secondary btn-sm">Back</a>
                        <button type="button" class="btn btn-success btn-sm" onclick="addTranscriptRow()">Add Row</button>
                        <button type="submit" class="btn btn-primary btn-sm">Save Transcript</button>
                    </div>
                </div>

                <div class="card-body">
                    <table class="table table-bordered mt-3">
                        <thead class="table-light">
                            <tr>
                                <th>Tamil Text</th>
                                <th style="width: 120px;">Start Time</th>
                                <th style="width: 120px;">End Time</th>
                                <th style="width: 50px;">Action</th>
                            </tr>
                        </thead>
                        <tbody id="transcriptTable">
                            @forelse($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 form-control-sm"
                                            value="{{ $transcript->start_time }}"
                                            required
                                            placeholder="minute.second"
                                        >
                                    </td>
                                    <td>
                                        <input
                                            type="text"
                                            name="transcripts[{{ $index }}][end_time]"
                                            class="form-control form-control-sm"
                                            value="{{ $transcript->end_time }}"
                                            required
                                            placeholder="minute.second"
                                        >
                                    </td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-link text-danger p-0 removeRow">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td><textarea name="transcripts[0][text]" class="form-control" required></textarea></td>
                                    <td><input type="text" name="transcripts[0][start_time]" class="form-control form-control-sm" required placeholder="minute.second"></td>
                                    <td><input type="text" name="transcripts[0][end_time]" class="form-control form-control-sm" required placeholder="minute.second"></td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-link text-danger p-0 removeRow">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>

                </div>
            </div>
        </form>
    </div>
@endsection

@push('styles')
    {{-- SweetAlert2 --}}
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
    {{-- FontAwesome for icons --}}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
@endpush

@push('scripts')
    {{-- SweetAlert2 --}}
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        function addTranscriptRow() {
            const table = document.getElementById('transcriptTable'),
                  count = table.rows.length,
                  row = table.insertRow();
            row.innerHTML = `
                <td><textarea name="transcripts[${count}][text]" class="form-control" required></textarea></td>
                <td><input type="text" name="transcripts[${count}][start_time]" class="form-control form-control-sm" required placeholder="minute.second"></td>
                <td><input type="text" name="transcripts[${count}][end_time]" class="form-control form-control-sm" required placeholder="minute.second"></td>
                <td class="text-center">
                    <button type="button" class="btn btn-link text-danger p-0 removeRow">
                        <i class="fas fa-trash"></i>
                    </button>
                </td>
            `;
        }

        document.addEventListener('DOMContentLoaded', () => {
            document.addEventListener('click', function(e) {
                if (e.target.closest('.removeRow')) {
                    Swal.fire({
                        title: 'Remove this row?',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Yes, remove',
                        cancelButtonText: 'Cancel'
                    }).then(result => {
                        if (result.isConfirmed) {
                            e.target.closest('tr').remove();
                        }
                    });
                }
            });
        });

        @if(session('success'))
            Swal.fire({
                icon: 'success',
                title: 'Saved!',
                text: '{{ session('success') }}',
                confirmButtonColor: '#3085d6'
            });
        @endif
    </script>
@endpush