@extends('layouts.admin')
@section('title')
    مشاهده ویدیو
@endsection
@section('content')
    <div class="page-wrapper">
        <!-- ============================================================== -->
        <!-- Container fluid  -->
        <!-- ============================================================== -->
        <div class="container-fluid">
            <!-- ============================================================== -->
            <!-- Start Page Content -->
            <!-- ============================================================== -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">مشاهده ویدیو</h4>
                            @include('admin.index.messages')

                            <div class="row">
                                <div class="col-md-8">
                                    <div class="form-group">
                                        <label><strong>عنوان:</strong></label>
                                        <p class="form-control-static">{{ $video->title }}</p>
                                    </div>

                                    <div class="form-group">
                                        <label><strong>زبان:</strong></label>
                                        <p class="form-control-static">
                                            @if($video->locale == 'fa')
                                                <span class="badge badge-success">فارسی</span>
                                            @elseif($video->locale == 'en')
                                                <span class="badge badge-info">انگلیسی</span>
                                            @elseif($video->locale == 'ru')
                                                <span class="badge badge-warning">روسی</span>
                                            @endif
                                        </p>
                                    </div>

                                    <div class="form-group">
                                        <label><strong>نوع:</strong></label>
                                        <p class="form-control-static">
                                            @if($video->type == 'embed')
                                                <span class="badge badge-primary">امبد (لینک)</span>
                                            @else
                                                <span class="badge badge-secondary">فایل</span>
                                            @endif
                                        </p>
                                    </div>

                                    <div class="form-group">
                                        <label><strong>وضعیت:</strong></label>
                                        <p class="form-control-static">
                                            @if($video->active)
                                                <span class="badge badge-success">فعال</span>
                                            @else
                                                <span class="badge badge-danger">غیرفعال</span>
                                            @endif
                                        </p>
                                    </div>

                                    <div class="form-group">
                                        <label><strong>تاریخ ایجاد:</strong></label>
                                        <p class="form-control-static">{{ $video->created_at->format('Y/m/d H:i:s') }}</p>
                                    </div>

                                    <div class="form-group">
                                        <label><strong>آخرین بروزرسانی:</strong></label>
                                        <p class="form-control-static">{{ $video->updated_at->format('Y/m/d H:i:s') }}</p>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label><strong>پیش‌نمایش:</strong></label>
                                        @if($video->type == 'embed')
                                            <div class="embed-responsive embed-responsive-16by9">
                                                {!! $video->src !!}
                                            </div>
                                            <div class="mt-2">
                                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="showEmbedCode('{{ addslashes($video->src) }}')">مشاهده کد</button>
                                            </div>
                                        @else
                                            <div class="text-center">
                                                <video width="100%" controls>
                                                    <source src="{{ asset($video->src) }}" type="video/mp4">
                                                    مرورگر شما از پخش ویدیو پشتیبانی نمی‌کند.
                                                </video>
                                                <div class="mt-2">
                                                    <a href="{{ asset($video->src) }}" target="_blank" class="btn btn-outline-success btn-sm">دانلود فایل</a>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="form-group mt-4">
                                <a href="/admin/video/{{ $video->id }}/edit" class="btn btn-warning">ویرایش</a>
                                <a href="/admin/video" class="btn btn-secondary">بازگشت به لیست</a>
                                <form action="/admin/video/{{ $video->id }}" method="POST" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger" onclick="return confirm('آیا از حذف این ویدیو اطمینان دارید؟')">حذف</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Embed Code Modal -->
    <div class="modal fade" id="embedCodeModal" tabindex="-1" role="dialog" aria-labelledby="embedCodeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="embedCodeModalLabel">کد امبد</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="embedCode">کد iframe:</label>
                        <textarea class="form-control" id="embedCode" rows="6" readonly></textarea>
                    </div>
                    <div class="form-group">
                        <label>پیش‌نمایش:</label>
                        <div id="embedPreview" class="border p-3 bg-light">
                            <!-- Preview will be shown here -->
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">بستن</button>
                    <button type="button" class="btn btn-primary" onclick="copyEmbedCode()">کپی کردن</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        function showEmbedCode(embedCode) {
            document.getElementById('embedCode').value = embedCode;
            document.getElementById('embedPreview').innerHTML = embedCode;
            $('#embedCodeModal').modal('show');
        }

        function copyEmbedCode() {
            const embedCode = document.getElementById('embedCode');
            embedCode.select();
            document.execCommand('copy');

            // Show success message
            const button = event.target;
            const originalText = button.textContent;
            button.textContent = 'کپی شد!';
            button.classList.remove('btn-primary');
            button.classList.add('btn-success');

            setTimeout(() => {
                button.textContent = originalText;
                button.classList.remove('btn-success');
                button.classList.add('btn-primary');
            }, 2000);
        }
    </script>
@endsection