@extends('layouts.admin-simple')

@section('title', 'Video Management')
@section('page-title', 'Video Management')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item active" aria-current="page">Videos</li>
@endsection

@section('page-actions')
    <div class="ml-auto">
        <a href="{{ route('admin.videos.create') }}" class="btn btn-primary">
            <i class="material-icons">add</i> Add Video
        </a>
    </div>
@endsection

@section('content')
    <!-- Videos Table -->
    <div class="card">
        <div class="card-header card-header-large bg-white d-flex align-items-center">
            <div class="flex">
                <h4 class="card-header__title">Videos</h4>
                <div class="card-subtitle text-muted">Manage video content</div>
            </div>
            <div class="ml-auto">
                <span class="badge badge-light">{{ $videos->total() }} videos</span>
            </div>
        </div>
        
        <div class="table-responsive">
            <table class="table mb-0">
                <thead>
                    <tr>
                        <th>Video</th>
                        <th>Type</th>
                        <th>Category</th>
                        <th>Duration</th>
                        <th>Views</th>
                        <th>Status</th>
                        <th>Published</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($videos as $video)
                    <tr>
                        <td>
                            <div class="media align-items-center">
                                <div class="mr-3">
                                    <img src="{{ $video->thumbnail_url ?: asset('assets/default-video-thumbnail.jpg') }}" 
                                         alt="{{ $video->title }}" 
                                         class="rounded"
                                         style="width: 64px; height: 36px; object-fit: cover;">
                                </div>
                                <div class="media-body">
                                    <strong>{{ $video->title }}</strong>
                                    <div class="text-muted small">
                                        {{ Str::limit($video->description, 50) }}
                                    </div>
                                    <div class="text-muted small">
                                        <code>{{ $video->slug }}</code>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="badge badge-soft-info">{{ ucfirst($video->video_type) }}</span>
                        </td>
                        <td>
                            <span class="text-muted">{{ $video->category_name }}</span>
                        </td>
                        <td>
                            <span class="text-muted">{{ $video->formatted_duration ?: '-' }}</span>
                        </td>
                        <td>
                            <span class="badge badge-soft-secondary">{{ number_format($video->views_count) }}</span>
                        </td>
                        <td>
                            <div class="d-flex flex-column">
                                @if($video->is_active)
                                    <span class="badge badge-soft-success mb-1">Active</span>
                                @else
                                    <span class="badge badge-soft-danger mb-1">Inactive</span>
                                @endif
                                @if($video->is_featured)
                                    <span class="badge badge-soft-warning">Featured</span>
                                @endif
                            </div>
                        </td>
                        <td>
                            <span class="text-muted">{{ $video->published_at ? $video->published_at->format('M d, Y') : '-' }}</span>
                        </td>
                        <td>
                            <div class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-caret="false">
                                    <i class="material-icons">more_vert</i>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a href="{{ $video->watch_url }}" target="_blank" class="dropdown-item">
                                        <i class="material-icons mr-2">play_arrow</i> Watch Video
                                    </a>
                                    <a href="{{ route('admin.videos.edit', $video) }}" class="dropdown-item">
                                        <i class="material-icons mr-2">edit</i> Edit Video
                                    </a>
                                    <div class="dropdown-divider"></div>
                                    <a href="#" class="dropdown-item" onclick="toggleVideoFeatured({{ $video->id }})">
                                        <i class="material-icons mr-2">{{ $video->is_featured ? 'star_border' : 'star' }}</i>
                                        {{ $video->is_featured ? 'Unfeature' : 'Feature' }}
                                    </a>
                                    <a href="#" class="dropdown-item" onclick="toggleVideoStatus({{ $video->id }})">
                                        <i class="material-icons mr-2">{{ $video->is_active ? 'visibility_off' : 'visibility' }}</i>
                                        {{ $video->is_active ? 'Deactivate' : 'Activate' }}
                                    </a>
                                    <div class="dropdown-divider"></div>
                                    <a href="#" class="dropdown-item text-danger" data-toggle="modal" data-target="#deleteVideoModal{{ $video->id }}">
                                        <i class="material-icons mr-2">delete</i> Delete Video
                                    </a>
                                </div>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="text-center py-4">
                            <div class="empty-state">
                                <i class="material-icons mb-3" style="font-size: 48px; color: #ddd;">video_library</i>
                                <h5 class="text-muted">No videos found</h5>
                                <p class="text-muted">Create your first video to get started.</p>
                                <a href="{{ route('admin.videos.create') }}" class="btn btn-primary">
                                    <i class="material-icons">add</i> Add Video
                                </a>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        @if($videos->hasPages())
        <div class="card-footer">
            {{ $videos->links() }}
        </div>
        @endif
    </div>
@endsection

@section('modals')
    <!-- Delete Video Confirmation Modals -->
    @foreach($videos as $video)
    <div class="modal fade" id="deleteVideoModal{{ $video->id }}" tabindex="-1" role="dialog" aria-labelledby="deleteVideoModalLabel{{ $video->id }}" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteVideoModalLabel{{ $video->id }}">Delete Video</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="text-center">
                        <i class="material-icons mb-3 text-danger" style="font-size: 48px;">warning</i>
                        <h5>Are you sure?</h5>
                        <p class="text-muted">You are about to delete the video:</p>
                        <div class="card border-left-danger shadow-sm mb-3">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <img src="{{ $video->thumbnail_url ?: asset('assets/default-video-thumbnail.jpg') }}" 
                                         alt="{{ $video->title }}" 
                                         class="rounded mr-3"
                                         style="width: 64px; height: 36px; object-fit: cover;">
                                    <div>
                                        <strong>{{ $video->title }}</strong>
                                        <div class="text-muted small">{{ $video->category_name }} • {{ $video->formatted_duration }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <p class="text-muted">This action cannot be undone.</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <form method="POST" action="{{ route('admin.videos.delete', $video) }}" style="display: inline;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">
                            <i class="material-icons mr-2">delete</i>
                            Delete Video
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @endforeach
@endsection

@push('scripts')
<script>
function toggleVideoFeatured(videoId) {
    fetch(`/admin/videos/${videoId}/toggle-featured`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Error: ' + (data.message || 'An error occurred'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred');
    });
}

function toggleVideoStatus(videoId) {
    fetch(`/admin/videos/${videoId}/toggle-active`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Error: ' + (data.message || 'An error occurred'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred');
    });
}
</script>
@endpush