@extends('admin.layouts.master')
@section('title', __('manage_subtitles'))
@section('content')

<section class="oftions">
    <div class="container-fluid">
        <div class="row">
            <div class="col col-md-12">
                <div class="header-top d-flex justify-content-between align-items-center">
                    <h3 class="section-title">{{ $type == 'movie' ? $video->title : $video->episode_name }} – {{ __('subtitles') }}</h3>
                    <div class="oftions-content-right mb-12">
                        @if ($type == 'movie')
                        <a href="{{ route('admin.movie.upload.downloads', ['movie_id' => $videoId]) }}" class="d-flex align-items-center btn sg-btn-primary gap-2">
                            <i class="las la-arrow-left"></i>
                            <span>{{ __('back_to_list') }}</span>
                        </a>
                        @else
                        <a href="{{ route('admin.episodes') }}" class="d-flex align-items-center btn sg-btn-primary gap-2">
                            <i class="las la-arrow-left"></i>
                            <span>{{ __('back_to_list') }}</span>
                        </a>
                        @endif
                        <a href="javascript:void(0)" class="d-flex align-items-center btn sg-btn-primary gap-2"
                            onclick="ajaxModal('modal-md', '{{ route('admin.subtitle.add', ['type' => $type, 'videoId' => $videoId]) }}', '{{ __('add_subtitle') }}')">
                            <i class="las la-plus"></i>
                            <span>{{ __('add_subtitle') }}</span>
                        </a>

                        <a href="{{ route('admin.download.links', ['type' => $type, 'videoId' => $videoId]) }}" class="d-flex align-items-center btn sg-btn-primary gap-2">
                            <i class="las la-cloud-upload-alt"></i>
                            <span>{{ __('manage_download_links') }}</span>
                        </a>
                    </div>
                </div>
                <div class="default-tab-list default-tab-list-v2 bg-white redious-border p-20 p-sm-30">
                    <p class="text-muted small mb-4">{{ __('subtitles_help') }}</p>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="default-list-table table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>{{ __('label') }}</th>
                                            <th>{{ __('language_code') }}</th>
                                            <th class="text-end" style="width: 100px;">{{ __('action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody id="subtitle-list">
                                        @forelse($subtitles as $index => $sub)
                                        <tr data-id="{{ $sub->id }}">
                                            <td>{{ $index + 1 }}</td>
                                            <td>{{ $sub->label }}</td>
                                            <td>{{ $sub->language_code ?? '-' }}</td>
                                            <td class="text-end">
                                                <a href="javascript:void(0)" class="text-danger" onclick="delete_row('{{ route('admin.subtitle.destroy', $sub->id) }}', '{{ $sub->id }}', true)" title="{{ __('delete') }}"><i class="las la-trash-alt"></i></a>
                                            </td>
                                        </tr>
                                        @empty
                                        <tr id="subtitle-empty-row">
                                            <td colspan="4" class="text-muted text-center">{{ __('no_subtitles_yet') }}</td>
                                        </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection