@extends('admin.layouts.app')

@section('title', 'Demo Video Details')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ url('admin/dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.demo-videos.index') }}">Demo Videos</a></li>
                        <li class="breadcrumb-item active">View</li>
                    </ol>
                </div>
                <h4 class="page-title">Demo Video Details</h4>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <h5 class="card-title">{{ $demo_video->title }}</h5>
                        <div>
                            <a href="{{ route('admin.demo-videos.edit', $demo_video->id) }}" class="btn btn-primary btn-sm">
                                <i class="mdi mdi-pencil"></i> Edit
                            </a>
                            @if($demo_video->provider === 'vimeo' && !empty($demo_video->provider_id))
                                <button type="button" class="btn btn-info btn-sm" onclick="syncVideoLinks({{ $demo_video->id }})">
                                    <i class="mdi mdi-sync"></i> Sync Links
                                </button>
                            @endif
                        </div>
                    </div>

                    @if($demo_video->description)
                        <p class="text-muted">{{ $demo_video->description }}</p>
                    @endif

                    <div class="row">
                        <div class="col-md-6">
                            <h6>Video Information</h6>
                            <table class="table table-sm">
                                <tr>
                                    <td><strong>Provider:</strong></td>
                                    <td>
                                        <span class="badge bg-{{ $demo_video->provider === 'vimeo' ? 'primary' : ($demo_video->provider === 'youtube' ? 'danger' : 'secondary') }}">
                                            {{ ucfirst($demo_video->provider) }}
                                        </span>
                                    </td>
                                </tr>
                                @if($demo_video->provider_id)
                                    <tr>
                                        <td><strong>Video URL:</strong></td>
                                        <td>
                                            @if(str_starts_with($demo_video->provider_id, 'http'))
                                                <a href="{{ $demo_video->provider_id }}" target="_blank" class="text-primary">
                                                    {{ $demo_video->provider_id }}
                                                </a>
                                            @else
                                                {{ $demo_video->provider_id }}
                                            @endif
                                        </td>
                                    </tr>
                                @endif
                                <tr>
                                    <td><strong>Status:</strong></td>
                                    <td>
                                        <span class="badge bg-{{ $demo_video->status ? 'success' : 'danger' }}">
                                            {{ $demo_video->status ? 'Active' : 'Inactive' }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Sort Order:</strong></td>
                                    <td>{{ $demo_video->sort_order ?? 0 }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <h6>Course Information</h6>
                            <table class="table table-sm">
                                @if($demo_video->course)
                                    <tr>
                                        <td><strong>Course:</strong></td>
                                        <td>{{ $demo_video->course->title }}</td>
                                    </tr>
                                @endif
                                @if($demo_video->unit)
                                    <tr>
                                        <td><strong>Unit:</strong></td>
                                        <td>{{ $demo_video->unit->title }}</td>
                                    </tr>
                                @endif
                                @if(!$demo_video->course && !$demo_video->unit)
                                    <tr>
                                        <td colspan="2" class="text-muted">No course/unit assigned</td>
                                    </tr>
                                @endif
                            </table>
                        </div>
                    </div>

                    @if($demo_video->videoLinks && $demo_video->videoLinks->count() > 0)
                        <h6 class="mt-4">Video Links</h6>
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>Quality</th>
                                        <th>Type</th>
                                        <th>URL</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($demo_video->videoLinks as $link)
                                        <tr>
                                            <td>{{ $link->quality_label }}</td>
                                            <td>
                                                @if($link->is_downloadable)
                                                    <span class="badge bg-info">Download</span>
                                                @else
                                                    <span class="badge bg-primary">Stream</span>
                                                @endif
                                            </td>
                                            <td>
                                                <a href="{{ $link->url }}" target="_blank" class="text-truncate d-inline-block" style="max-width: 200px;">
                                                    {{ $link->url }}
                                                </a>
                                            </td>
                                            <td>
                                                <span class="badge bg-{{ $link->status ? 'success' : 'danger' }}">
                                                    {{ $link->status ? 'Active' : 'Inactive' }}
                                                </span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="alert alert-info">
                            <i class="mdi mdi-information"></i>
                            No video links available. 
                            @if($demo_video->provider === 'vimeo' && !empty($demo_video->provider_id))
                                <button type="button" class="btn btn-sm btn-info ms-2" onclick="syncVideoLinks({{ $demo_video->id }})">
                                    Sync Video Links
                                </button>
                            @endif
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Thumbnail</h5>
                    @if($demo_video->thumbnail_url && isset($demo_video->thumbnail_url['thumb']))
                        <img src="{{ $demo_video->thumbnail_url['thumb'] }}" alt="{{ $demo_video->title }}" 
                             class="img-fluid rounded">
                    @else
                        <div class="bg-light rounded d-flex align-items-center justify-content-center" style="height: 200px;">
                            <i class="mdi mdi-video text-muted" style="font-size: 3rem;"></i>
                        </div>
                    @endif
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Timestamps</h5>
                    <table class="table table-sm">
                        <tr>
                            <td><strong>Created:</strong></td>
                            <td>{{ $demo_video->created_at->format('M d, Y H:i') }}</td>
                        </tr>
                        <tr>
                            <td><strong>Updated:</strong></td>
                            <td>{{ $demo_video->updated_at->format('M d, Y H:i') }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function syncVideoLinks(demoVideoId) {
    if (confirm('Are you sure you want to sync video links? This will update existing links.')) {
        $.ajax({
            url: '{{ url("admin/demo-videos") }}/' + demoVideoId + '/sync-links',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.status === 'success') {
                    toastr.success(response.message);
                    location.reload();
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr) {
                toastr.error('Failed to sync video links');
            }
        });
    }
}
</script>
@endsection