@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 mb-3">
                                <div class="col-md-12">
                                    <a href="/admin/video/create" class="btn btn-primary">افزودن ویدیو جدید</a>
                                </div>
                            </div>

                            <!-- Search and Filter Form -->
                            <form method="GET" action="/admin/video" class="mb-4">
                                <div class="row">
                                    <div class="col-md-3">
                                        <input type="text" name="title" class="form-control" placeholder="جستجو بر اساس عنوان" value="{{ request('title') }}">
                                    </div>
                                    <div class="col-md-2">
                                        <select name="locale" class="form-control">
                                            <option value="">همه زبان‌ها</option>
                                            <option value="fa" {{ request('locale') == 'fa' ? 'selected' : '' }}>فارسی</option>
                                            <option value="en" {{ request('locale') == 'en' ? 'selected' : '' }}>انگلیسی</option>
                                            <option value="ru" {{ request('locale') == 'ru' ? 'selected' : '' }}>روسی</option>
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <select name="type" class="form-control">
                                            <option value="">همه انواع</option>
                                            <option value="embed" {{ request('type') == 'embed' ? 'selected' : '' }}>امبد</option>
                                            <option value="file" {{ request('type') == 'file' ? 'selected' : '' }}>فایل</option>
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <select name="active" class="form-control">
                                            <option value="">همه وضعیت‌ها</option>
                                            <option value="1" {{ request('active') == '1' ? 'selected' : '' }}>فعال</option>
                                            <option value="0" {{ request('active') == '0' ? 'selected' : '' }}>غیرفعال</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <button type="submit" class="btn btn-info">جستجو</button>
                                        <a href="/admin/video" class="btn btn-secondary">پاک کردن فیلترها</a>
                                    </div>
                                </div>
                            </form>

                            <div class="table-responsive">
                                <table class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>شناسه</th>
                                            <th>عنوان</th>
                                            <th>زبان</th>
                                            <th>نوع</th>
                                            <th>منبع</th>
                                            <th>وضعیت</th>
                                            <th>عملیات</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($videos as $video)
                                            <tr>
                                                <td>{{ $video->id }}</td>
                                                <td>{{ $video->title }}</td>
                                                <td>
                                                    @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
                                                </td>
                                                <td>
                                                    @if($video->type == 'embed')
                                                        <span class="badge badge-primary">امبد</span>
                                                    @else
                                                        <span class="badge badge-secondary">فایل</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($video->type == 'embed')
                                                        <button type="button" class="btn btn-sm btn-outline-primary" onclick="showEmbedCode('{{ addslashes($video->src) }}')">مشاهده کد</button>
                                                    @else
                                                        <a href="{{ asset($video->src) }}" target="_blank" class="btn btn-sm btn-outline-success">دانلود فایل</a>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($video->active)
                                                        <span class="badge badge-success">فعال</span>
                                                    @else
                                                        <span class="badge badge-danger">غیرفعال</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <a href="/admin/video/{{ $video->id }}/edit" class="btn btn-sm btn-warning">ویرایش</a>
                                                    <form action="/admin/video/{{ $video->id }}" method="POST" class="d-inline">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('آیا از حذف این ویدیو اطمینان دارید؟')">حذف</button>
                                                    </form>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="7" class="text-center">هیچ ویدیویی یافت نشد</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </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