@extends('layouts.admin-simple')

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

@section('breadcrumb')
    <li class="breadcrumb-item active" aria-current="page">Video Settings</li>
@endsection


@section('content')
<!-- Video Settings Table -->
<div class="card">
    <!-- Filters -->
    <div class="card-body border-bottom">
        <div class="row align-items-end">
            <div class="col-md-3">
                <label class="form-label">Search</label>
                <input type="text" class="form-control" placeholder="Search videos..." id="search-input">
            </div>
            <div class="col-md-2">
                <label class="form-label">Status</label>
                <select class="form-control" id="status-filter">
                    <option value="">All Status</option>
                    <option value="enabled">Enabled</option>
                    <option value="disabled">Disabled</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">Type</label>
                <select class="form-control" id="type-filter">
                    <option value="">All Types</option>
                    <option value="youtube">YouTube</option>
                    <option value="vimeo">Vimeo</option>
                    <option value="mp4">MP4</option>
                </select>
            </div>
        </div>
    </div>

    <div class="table-responsive">
        <table class="table mb-0">
            <thead>
                <tr>
                    <th>Video</th>
                    <th>Key</th>
                    <th>Type</th>
                    <th>Status</th>
                    <th>Settings</th>
                    <th>Preload</th>
                    <th>Updated</th>
                    <th style="width: 130px;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($videoSettings as $video)
                <tr>
                    <td>
                        <div class="media align-items-center">
                            @if($video->thumbnail_url)
                                <div class="avatar avatar-sm mr-3">
                                    <img alt="Video Thumbnail" src="{{ $video->thumbnail_url }}" class="avatar-img rounded">
                                </div>
                            @else
                                <div class="avatar avatar-sm mr-3 bg-secondary d-flex align-items-center justify-content-center">
                                    <i class="material-icons text-white">video_library</i>
                                </div>
                            @endif
                            <div class="media-body">
                                <strong>{{ $video->title }}</strong>
                                @if($video->description)
                                    <div class="text-muted small">{{ Str::limit($video->description, 50) }}</div>
                                @endif
                                @if($video->video_id)
                                    <div class="text-muted small mt-1">
                                        <code>{{ $video->video_id }}</code>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </td>
                    <td>
                        <span class="badge badge-soft-info">{{ $video->key }}</span>
                    </td>
                    <td>
                        @switch($video->video_type)
                            @case('youtube')
                                <span class="badge badge-soft-danger">
                                    <i class="fab fa-youtube"></i> YouTube
                                </span>
                                @break
                            @case('vimeo')
                                <span class="badge badge-soft-primary">
                                    <i class="fab fa-vimeo"></i> Vimeo
                                </span>
                                @break
                            @case('mp4')
                                <span class="badge badge-soft-secondary">
                                    <i class="fas fa-file-video"></i> MP4
                                </span>
                                @break
                        @endswitch
                    </td>
                    <td>
                        <span class="badge {{ $video->is_enabled ? 'badge-soft-success' : 'badge-soft-danger' }} btn-toggle-status" 
                              data-video-id="{{ $video->id }}" 
                              style="cursor: pointer;"
                              title="Click to {{ $video->is_enabled ? 'disable' : 'enable' }}">
                            <i class="material-icons" style="font-size: 14px; vertical-align: middle;">{{ $video->is_enabled ? 'play_circle' : 'pause_circle' }}</i>
                            {{ $video->is_enabled ? 'Enabled' : 'Disabled' }}
                        </span>
                    </td>
                    <td>
                        <div class="d-flex gap-1">
                            @if(isset($video->settings['autoplay']) && $video->settings['autoplay'])
                                <span class="badge badge-light" title="Autoplay">
                                    <i class="fas fa-play"></i>
                                </span>
                            @endif
                            @if(isset($video->settings['mute']) && $video->settings['mute'])
                                <span class="badge badge-light" title="Muted">
                                    <i class="fas fa-volume-mute"></i>
                                </span>
                            @endif
                            @if(isset($video->settings['loop']) && $video->settings['loop'])
                                <span class="badge badge-light" title="Loop">
                                    <i class="fas fa-redo"></i>
                                </span>
                            @endif
                            @if(isset($video->settings['controls']) && $video->settings['controls'])
                                <span class="badge badge-light" title="Show Controls">
                                    <i class="fas fa-sliders-h"></i>
                                </span>
                            @endif
                        </div>
                    </td>
                    <td>
                        @if($video->preload_at)
                            <span class="badge badge-soft-success" title="Preloaded at {{ $video->preload_at->format('M j, Y g:i A') }}">
                                <i class="fas fa-check"></i> Preloaded
                            </span>
                        @else
                            <button class="btn btn-sm btn-outline-info btn-preload" data-video-id="{{ $video->id }}">
                                <i class="fas fa-download"></i> Preload
                            </button>
                        @endif
                    </td>
                    <td>
                        <small class="text-muted">{{ $video->updated_at->format('M j, Y') }}</small>
                    </td>
                    <td>
                        <div class="dropdown">
                            <a href="#" class="dropdown-toggle text-muted" data-toggle="dropdown" data-caret="false">
                                <i class="material-icons">more_vert</i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="{{ route('admin.video-settings.edit', $video) }}">
                                    <i class="fas fa-edit"></i> Edit Settings
                                </a>
                                @if($video->video_type === 'youtube' && $video->video_id)
                                    <a class="dropdown-item" href="https://www.youtube.com/watch?v={{ $video->video_id }}" target="_blank">
                                        <i class="fab fa-youtube"></i> View on YouTube
                                    </a>
                                @endif
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#" onclick="preloadVideo({{ $video->id }}); return false;">
                                    <i class="fas fa-download"></i> Preload Video
                                </a>
                            </div>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="text-center py-4">
                        <div class="text-muted">
                            <i class="material-icons" style="font-size: 48px;">video_library</i>
                            <p class="mt-2">No video settings found. <a href="{{ route('admin.video-settings.create') }}">Create your first video setting</a></p>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@endsection

@push('scripts')
<script>
// Toggle video status
document.querySelectorAll('.btn-toggle-status').forEach(button => {
    button.addEventListener('click', function() {
        const videoId = this.dataset.videoId;
        const button = this;
        
        fetch(`/admin/video-settings/${videoId}/toggle-status`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Update badge appearance
                if (data.is_enabled) {
                    button.className = 'badge badge-soft-success btn-toggle-status';
                    button.innerHTML = '<i class="material-icons" style="font-size: 14px; vertical-align: middle;">play_circle</i> Enabled';
                    button.title = 'Click to disable';
                } else {
                    button.className = 'badge badge-soft-danger btn-toggle-status';
                    button.innerHTML = '<i class="material-icons" style="font-size: 14px; vertical-align: middle;">pause_circle</i> Disabled';
                    button.title = 'Click to enable';
                }
                button.style.cursor = 'pointer';
                
                // Show success message
                showAlert('success', data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('danger', 'Error updating video status.');
        });
    });
});

// Preload video
document.querySelectorAll('.btn-preload').forEach(button => {
    button.addEventListener('click', function() {
        const videoId = this.dataset.videoId;
        preloadVideo(videoId);
    });
});

function preloadVideo(videoId) {
    fetch(`/admin/video-settings/${videoId}/preload`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('success', data.message);
            setTimeout(() => window.location.reload(), 1000);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('danger', 'Error preloading video.');
    });
}


// Show alert
function showAlert(type, message) {
    const alert = document.createElement('div');
    alert.className = `alert alert-${type} alert-dismissible fade show`;
    alert.innerHTML = `
        ${message}
        <button type="button" class="close" data-dismiss="alert">
            <span>&times;</span>
        </button>
    `;
    
    const container = document.querySelector('.container-fluid');
    container.insertBefore(alert, container.firstChild);
    
    setTimeout(() => {
        alert.remove();
    }, 5000);
}

// Simple search filtering
document.getElementById('search-input').addEventListener('input', function() {
    filterTable();
});

document.getElementById('status-filter').addEventListener('change', function() {
    filterTable();
});

document.getElementById('type-filter').addEventListener('change', function() {
    filterTable();
});

function filterTable() {
    const search = document.getElementById('search-input').value.toLowerCase();
    const status = document.getElementById('status-filter').value;
    const type = document.getElementById('type-filter').value;
    
    const rows = document.querySelectorAll('tbody tr');
    
    rows.forEach(row => {
        const title = row.querySelector('strong')?.textContent.toLowerCase() || '';
        const statusBadge = row.querySelector('.btn-toggle-status')?.textContent.toLowerCase() || '';
        const typeBadge = row.querySelector('td:nth-child(3) .badge')?.textContent.toLowerCase() || '';
        
        const matchesSearch = title.includes(search);
        const matchesStatus = !status || statusBadge.includes(status);
        const matchesType = !type || typeBadge.includes(type);
        
        if (matchesSearch && matchesStatus && matchesType) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
}
</script>
@endpush