@extends('layouts.admin-simple')

@section('title', 'Edit Video Setting')
@section('page-title', 'Edit Video Setting')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="{{ route('admin.video-settings.index') }}">Video Settings</a></li>
    <li class="breadcrumb-item active" aria-current="page">Edit {{ $videoSetting->title }}</li>
@endsection

@section('content')
<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Video Information</h5>
            </div>
            <div class="card-body">
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <h6>Please correct the following errors:</h6>
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form action="{{ route('admin.video-settings.update', $videoSetting) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    
                    <div class="form-group">
                        <label for="key" class="form-label">Video Key <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('key') is-invalid @enderror" 
                               id="key" name="key" value="{{ old('key', $videoSetting->key) }}" required>
                        <small class="form-text text-muted">Unique identifier for this video (e.g., hero_video, about_video)</small>
                        @error('key')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="title" class="form-label">Title <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('title') is-invalid @enderror" 
                               id="title" name="title" value="{{ old('title', $videoSetting->title) }}" required>
                        @error('title')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="description" class="form-label">Description</label>
                        <textarea class="form-control @error('description') is-invalid @enderror" 
                                  id="description" name="description" rows="3">{{ old('description', $videoSetting->description) }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="video_type" class="form-label">Video Type <span class="text-danger">*</span></label>
                        <select class="form-control @error('video_type') is-invalid @enderror" 
                                id="video_type" name="video_type" required>
                            @foreach($videoTypes as $value => $label)
                                <option value="{{ $value }}" {{ old('video_type', $videoSetting->video_type) === $value ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                        @error('video_type')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Video URL Section -->
                    <div class="form-group" id="video_url_section">
                        <label for="video_url" class="form-label">Video URL <span class="text-danger">*</span></label>
                        <input type="url" class="form-control @error('video_url') is-invalid @enderror" 
                               id="video_url" name="video_url" value="{{ old('video_url', $videoSetting->video_url) }}">
                        <small class="form-text text-muted">Full URL to the video (YouTube, Vimeo, or direct MP4 link)</small>
                        @error('video_url')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Video File Upload Section -->
                    <div class="form-group" id="video_file_section" style="display: none;">
                        <label for="video_file" class="form-label">Upload Video File <span class="text-danger">*</span></label>
                        <input type="file" class="form-control @error('video_file') is-invalid @enderror" 
                               id="video_file" name="video_file" accept="video/*">
                        <small class="form-text text-muted">Upload an MP4, WebM, or other video file (max 100MB)</small>
                        @if($videoSetting->video_file_path)
                            <div class="mt-2">
                                <small class="text-success">
                                    <i class="fas fa-check-circle"></i> Current file: {{ basename($videoSetting->video_file_path) }}
                                </small>
                            </div>
                        @endif
                        @error('video_file')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Thumbnail URL Section -->
                    <div class="form-group" id="thumbnail_url_section">
                        <label for="thumbnail_url" class="form-label">Thumbnail URL</label>
                        <input type="url" class="form-control @error('thumbnail_url') is-invalid @enderror" 
                               id="thumbnail_url" name="thumbnail_url" value="{{ old('thumbnail_url', $videoSetting->thumbnail_url) }}">
                        <small class="form-text text-muted">Leave empty to auto-generate from video (YouTube only)</small>
                        @error('thumbnail_url')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Thumbnail File Upload Section -->
                    <div class="form-group" id="thumbnail_file_section" style="display: none;">
                        <label for="thumbnail_file" class="form-label">Upload Thumbnail Image</label>
                        <input type="file" class="form-control @error('thumbnail_file') is-invalid @enderror" 
                               id="thumbnail_file" name="thumbnail_file" accept="image/*">
                        <small class="form-text text-muted">Upload a thumbnail image (JPG, PNG, WebP - max 5MB)</small>
                        @if($videoSetting->thumbnail_file_path)
                            <div class="mt-2">
                                <small class="text-success">
                                    <i class="fas fa-check-circle"></i> Current image: {{ basename($videoSetting->thumbnail_file_path) }}
                                </small>
                            </div>
                        @endif
                        @error('thumbnail_file')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group">
                        <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="is_enabled" name="is_enabled" 
                                   {{ old('is_enabled', $videoSetting->is_enabled) ? 'checked' : '' }}>
                            <label class="custom-control-label" for="is_enabled">Enabled</label>
                        </div>
                        <small class="form-text text-muted">When disabled, this video will not be used on the website</small>
                    </div>

                    <!-- Video Settings -->
                    <div class="form-group">
                        <label class="form-label">Playback Options</label>
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="autoplay" name="autoplay" 
                                   {{ old('autoplay', $videoSetting->settings['autoplay'] ?? false) ? 'checked' : '' }}>
                            <label class="custom-control-label" for="autoplay">
                                <i class="fas fa-play text-primary"></i> Autoplay
                            </label>
                        </div>
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="mute" name="mute" 
                                   {{ old('mute', $videoSetting->settings['mute'] ?? false) ? 'checked' : '' }}>
                            <label class="custom-control-label" for="mute">
                                <i class="fas fa-volume-mute text-warning"></i> Start Muted
                            </label>
                        </div>
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="loop" name="loop" 
                                   {{ old('loop', $videoSetting->settings['loop'] ?? false) ? 'checked' : '' }}>
                            <label class="custom-control-label" for="loop">
                                <i class="fas fa-redo text-info"></i> Loop Video
                            </label>
                        </div>
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="controls" name="controls" 
                                   {{ old('controls', $videoSetting->settings['controls'] ?? false) ? 'checked' : '' }}>
                            <label class="custom-control-label" for="controls">
                                <i class="fas fa-sliders-h text-secondary"></i> Show Controls
                            </label>
                        </div>
                    </div>

                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Update Video Setting
                        </button>
                        <a href="{{ route('admin.video-settings.index') }}" class="btn btn-secondary">
                            <i class="fas fa-times"></i> Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-lg-4">

        <!-- Video Preview -->
        @if($videoSetting->getVideoSource())
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Video Preview</h5>
            </div>
            <div class="card-body p-0">
                <div class="video-preview" style="position: relative; width: 100%; height: 200px; overflow: hidden;">
                    @if($videoSetting->getThumbnailSource())
                        <img src="{{ $videoSetting->getThumbnailSource() }}" alt="Video Thumbnail" 
                             style="width: 100%; height: 100%; object-fit: cover;">
                        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
                            @if($videoSetting->video_type === 'youtube')
                                <i class="fab fa-youtube text-white" style="font-size: 48px; text-shadow: 0 2px 4px rgba(0,0,0,0.5);"></i>
                            @elseif($videoSetting->video_type === 'vimeo')
                                <i class="fab fa-vimeo text-white" style="font-size: 48px; text-shadow: 0 2px 4px rgba(0,0,0,0.5);"></i>
                            @else
                                <i class="fas fa-play text-white" style="font-size: 48px; text-shadow: 0 2px 4px rgba(0,0,0,0.5);"></i>
                            @endif
                        </div>
                    @else
                        <div class="d-flex align-items-center justify-content-center h-100 bg-light">
                            @if($videoSetting->video_type === 'youtube')
                                <i class="fab fa-youtube text-danger" style="font-size: 48px;"></i>
                            @elseif($videoSetting->video_type === 'vimeo')
                                <i class="fab fa-vimeo text-primary" style="font-size: 48px;"></i>
                            @else
                                <i class="fas fa-video text-secondary" style="font-size: 48px;"></i>
                            @endif
                        </div>
                    @endif
                </div>
                <div class="card-body">
                    <small class="text-muted">
                        @if($videoSetting->video_id)
                            <strong>Video ID:</strong> {{ $videoSetting->video_id }}<br>
                        @endif
                        @if($videoSetting->video_url && !$videoSetting->isUploadedVideo())
                            <strong>URL:</strong> <a href="{{ $videoSetting->video_url }}" target="_blank" class="text-primary">
                                @if($videoSetting->video_type === 'youtube')
                                    View on YouTube
                                @elseif($videoSetting->video_type === 'vimeo')
                                    View on Vimeo
                                @else
                                    View Video
                                @endif
                            </a>
                        @endif
                        @if($videoSetting->isUploadedVideo())
                            <strong>Type:</strong> Uploaded Video<br>
                            <strong>File:</strong> {{ basename($videoSetting->video_file_path) }}
                        @endif
                    </small>
                </div>
            </div>
        </div>
        @endif

        <!-- Current Usage -->
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Usage Information</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <strong>Key:</strong> <code>{{ $videoSetting->key }}</code>
                </div>
                <div class="mb-3">
                    <strong>Status:</strong>
                    <span class="badge {{ $videoSetting->is_enabled ? 'badge-success' : 'badge-danger' }}">
                        {{ $videoSetting->is_enabled ? 'Enabled' : 'Disabled' }}
                    </span>
                </div>
                @if($videoSetting->preload_at)
                <div class="mb-3">
                    <strong>Preloaded:</strong> <br>
                    <small class="text-muted">{{ $videoSetting->preload_at->format('M j, Y g:i A') }}</small>
                </div>
                @endif
                <div class="mb-3">
                    <strong>Last Updated:</strong> <br>
                    <small class="text-muted">{{ $videoSetting->updated_at->format('M j, Y g:i A') }}</small>
                </div>
                
                <div class="mt-3">
                    <button type="button" class="btn btn-outline-info btn-sm btn-block" onclick="preloadVideo()">
                        <i class="fas fa-download"></i> Preload Video
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function preloadVideo() {
    fetch(`/admin/video-settings/{{ $videoSetting->id }}/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.');
    });
}

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);
}

// Handle video type changes
function handleVideoTypeChange() {
    const videoType = document.getElementById('video_type').value;
    const videoUrlSection = document.getElementById('video_url_section');
    const videoFileSection = document.getElementById('video_file_section');
    const thumbnailUrlSection = document.getElementById('thumbnail_url_section');
    const thumbnailFileSection = document.getElementById('thumbnail_file_section');
    const videoUrlInput = document.getElementById('video_url');
    const videoFileInput = document.getElementById('video_file');
    
    if (videoType === 'uploaded') {
        // Show upload sections, hide URL sections
        videoUrlSection.style.display = 'none';
        videoFileSection.style.display = 'block';
        thumbnailUrlSection.style.display = 'none';
        thumbnailFileSection.style.display = 'block';
        
        // Remove required from URL, add to file
        videoUrlInput.removeAttribute('required');
        videoFileInput.setAttribute('required', 'required');
    } else {
        // Show URL sections, hide upload sections
        videoUrlSection.style.display = 'block';
        videoFileSection.style.display = 'none';
        thumbnailUrlSection.style.display = 'block';
        thumbnailFileSection.style.display = 'none';
        
        // Remove required from file, add to URL (unless we have existing uploaded file)
        videoFileInput.removeAttribute('required');
        if (!document.querySelector('[data-has-video-file]')) {
            videoUrlInput.setAttribute('required', 'required');
        }
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    handleVideoTypeChange();
    
    // Listen for video type changes
    document.getElementById('video_type').addEventListener('change', handleVideoTypeChange);
});

// Auto-extract video ID when URL changes
document.getElementById('video_url').addEventListener('input', function() {
    const url = this.value;
    const videoType = document.getElementById('video_type').value;
    
    if (videoType === 'youtube' && url.includes('youtube.com')) {
        // Show that we're processing
        const feedback = document.createElement('small');
        feedback.className = 'form-text text-info';
        feedback.textContent = 'Video ID will be automatically extracted when saved';
        
        const existingFeedback = this.parentNode.querySelector('.text-info');
        if (existingFeedback) {
            existingFeedback.remove();
        }
        this.parentNode.appendChild(feedback);
    }
});
</script>
@endpush