@extends('layouts.admin')

@section('title', 'Edit Video')

@section('content')
<div class="container">
    <div class="mb-4">
        <a href="{{ route('admin.videos.index') }}" class="btn btn-secondary">← Back to Videos</a>
    </div>

    <h1>Edit Video: {{ $video->title }}</h1>

    <div class="card">
        <div class="card-body">
            <form action="{{ route('admin.videos.update', $video) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="title" class="form-label">Title *</label>
                            <input type="text" class="form-control @error('title') is-invalid @enderror" 
                                   id="title" name="title" value="{{ old('title', $video->title) }}" required>
                            @error('title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="type" class="form-label">Type *</label>
                            <select class="form-select @error('type') is-invalid @enderror" 
                                    id="type" name="type" required>
                                <option value="">Select type</option>
                                <option value="Cartoon Style" {{ old('type', $video->type) == 'Cartoon Style' ? 'selected' : '' }}>Cartoon Style</option>
                                <option value="Documentary" {{ old('type', $video->type) == 'Documentary' ? 'selected' : '' }}>Documentary</option>
                                <option value="Short Story" {{ old('type', $video->type) == 'Short Story' ? 'selected' : '' }}>Short Story</option>
                            </select>
                            @error('type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <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', $video->description) }}</textarea>
                    @error('description')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Video Source Section -->
                <div class="card mb-3">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">Video Source (Choose one)</h5>
                    </div>
                    <div class="card-body">
                        @if($video->player_code || $video->video_file_path || $video->getRawVideoUrl() || $video->video_hash)
                            <div class="alert alert-info mb-3">
                                <strong>Current Video:</strong><br>
                                @if($video->player_code)
                                    <span class="badge bg-info">🎬 Player Code</span>
                                    <span class="text-muted">Custom interactive player code is set</span>
                                    <br><small class="text-muted">Code preview: {{ Str::limit(strip_tags($video->player_code), 100) }}</small>
                                @elseif($video->video_hash)
                                    <span class="badge bg-info">🎬 Interactive Player</span>
                                    <span class="text-muted">Hash: {{ $video->video_hash }}</span>
                                @elseif($video->video_file_path)
                                    <span class="badge bg-success">📁 File Uploaded</span>
                                    <span class="text-muted">{{ basename($video->video_file_path) }}</span>
                                    <br><a href="{{ asset('storage/' . $video->video_file_path) }}" target="_blank" class="small">View/Download</a>
                                @elseif($video->getRawVideoUrl())
                                    <span class="badge bg-warning">🔗 URL: </span>
                                    <a href="{{ $video->getRawVideoUrl() }}" target="_blank" class="text-break">{{ $video->getRawVideoUrl() }}</a>
                                @endif
                            </div>
                        @endif
                        <!-- Player Code Option (Highest Priority) -->
                        <div class="mb-3">
                            <label for="player_code" class="form-label">🎬 Interactive Video Player Code</label>
                            <textarea class="form-control @error('player_code') is-invalid @enderror" 
                                      id="player_code" name="player_code" rows="8" 
                                      placeholder='<div class="iv-player_responsive_padding" style="padding:56.25% 0 0 0;position:relative;" data-hash="694d72ed74f49">
    <div class="iv-player_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
        <div class="iv-player_embed iv-player_async_p2z7746nud videoFoam=true" style="height:100%;position:relative;width:100%">
            <div class="iv-player_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;width:100%;">
                <img src="https://i-fast.b-cdn.net/live/23553_694d7b62bde48.jpg" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" />
            </div>
        </div>
    </div>
</div>'>{{ old('player_code', $video->player_code) }}</textarea>
                            <small class="form-text text-muted">
                                <strong>Important:</strong> Paste ONLY the HTML div structure (the div with <code>data-hash</code> attribute). 
                                <strong>DO NOT include the &lt;script&gt; tag</strong> - it's already loaded globally in the layout.
                            </small>
                            @error('player_code')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="text-center my-3">
                            <strong class="text-muted">OR</strong>
                        </div>
                        <div class="mb-3">
                            <label for="player_code_file" class="form-label">📄 Upload Player Code File</label>
                            <input type="file" class="form-control @error('player_code_file') is-invalid @enderror" 
                                   id="player_code_file" name="player_code_file" accept=".html,.htm,.txt">
                            <small class="form-text text-muted">Upload an HTML file containing the player code. Max size: 10MB</small>
                            @error('player_code_file')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="text-center my-3">
                            <strong class="text-muted">OR</strong>
                        </div>
                        <!-- Video Hash Option -->
                        <div class="mb-3">
                            <label for="video_hash" class="form-label">Interactive Video Hash</label>
                            <input type="text" class="form-control @error('video_hash') is-invalid @enderror" 
                                   id="video_hash" name="video_hash" value="{{ old('video_hash', $video->video_hash) }}" 
                                   placeholder="e.g., 694d72ed74f49">
                            <small class="form-text text-muted">Video hash for interactive player (from videosuite-player-wrapper)</small>
                            @error('video_hash')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="text-center my-3">
                            <strong class="text-muted">OR</strong>
                        </div>
                        <div id="video_url_section" class="mb-3" style="{{ $video->video_file_path || $video->video_hash || $video->player_code ? 'display:none;' : '' }}">
                            <label for="video_url" class="form-label">Video URL</label>
                            <input type="url" class="form-control @error('video_url') is-invalid @enderror" 
                                   id="video_url" name="video_url" value="{{ old('video_url', $video->getRawVideoUrl()) }}" 
                                   placeholder="https://www.youtube.com/watch?v=... or https://vimeo.com/...">
                            <small class="form-text text-muted">YouTube, Vimeo, or direct video URL</small>
                            @error('video_url')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="text-center my-3" id="video_or_div" style="{{ $video->video_file_path || $video->video_hash || $video->player_code ? 'display:none;' : '' }}">
                            <strong class="text-muted">OR</strong>
                        </div>
                        <div class="mb-3">
                            <label for="video_file" class="form-label">Upload New Video File (to replace existing)</label>
                            <input type="file" class="form-control @error('video_file') is-invalid @enderror" 
                                   id="video_file" name="video_file" accept="video/mp4,video/webm,video/ogg,video/avi,video/quicktime">
                            <small class="form-text text-muted">Max size: 100MB. Supported formats: MP4, WebM, OGG, AVI, MOV</small>
                            @error('video_file')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Thumbnail Section -->
                <div class="card mb-3">
                    <div class="card-header bg-secondary text-white">
                        <h5 class="mb-0">Thumbnail (Optional)</h5>
                    </div>
                    <div class="card-body">
                        @if($video->thumbnail_file_path || $video->getRawThumbnailUrl())
                            <div class="mb-3">
                                <strong>Current Thumbnail:</strong><br>
                                @if($video->thumbnail_file_path)
                                    <img src="{{ asset('storage/' . $video->thumbnail_file_path) }}" alt="Current thumbnail" 
                                         class="img-thumbnail mt-2" style="max-width: 200px; max-height: 150px;">
                                    <div class="form-check mt-2">
                                        <input class="form-check-input" type="checkbox" id="remove_thumbnail_file" 
                                               name="remove_thumbnail_file" value="1" onchange="toggleThumbnailSource(this.checked)">
                                        <label class="form-check-label" for="remove_thumbnail_file">
                                            Remove current image and use URL instead
                                        </label>
                                    </div>
                                @elseif($video->getRawThumbnailUrl())
                                    <img src="{{ $video->getRawThumbnailUrl() }}" alt="Current thumbnail" 
                                         class="img-thumbnail mt-2" style="max-width: 200px; max-height: 150px;">
                                    <div class="form-check mt-2">
                                        <input class="form-check-input" type="checkbox" id="remove_thumbnail_file" 
                                               name="remove_thumbnail_file" value="1" onchange="toggleThumbnailSource(this.checked)">
                                        <label class="form-check-label" for="remove_thumbnail_file">
                                            Remove current URL and upload file instead
                                        </label>
                                    </div>
                                @endif
                            </div>
                        @endif
                        <div id="thumbnail_url_section" class="mb-3" style="{{ $video->thumbnail_file_path ? 'display:none;' : '' }}">
                            <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', $video->getRawThumbnailUrl()) }}" 
                                   placeholder="https://example.com/thumbnail.jpg">
                            @error('thumbnail_url')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="text-center my-3" id="thumbnail_or_div" style="{{ $video->thumbnail_file_path ? 'display:none;' : '' }}">
                            <strong class="text-muted">OR</strong>
                        </div>
                        <div class="mb-3">
                            <label for="thumbnail_file" class="form-label">Upload New Thumbnail Image (to replace existing)</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">Max size: 5MB. Supported formats: JPEG, PNG, GIF, WebP</small>
                            @error('thumbnail_file')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="class_id" class="form-label">Class</label>
                            <select class="form-select @error('class_id') is-invalid @enderror" 
                                    id="class_id" name="class_id">
                                <option value="">Select a class (optional)</option>
                                @foreach($classes as $class)
                                    <option value="{{ $class->id }}" {{ old('class_id', $video->class_id) == $class->id ? 'selected' : '' }}>
                                        {{ $class->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('class_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="subject_id" class="form-label">Subject</label>
                            <select class="form-select @error('subject_id') is-invalid @enderror" 
                                    id="subject_id" name="subject_id">
                                <option value="">Select a subject (optional)</option>
                                @foreach($subjects as $subject)
                                    <option value="{{ $subject->id }}" 
                                            data-class-id="{{ $subject->class_id }}"
                                            {{ old('subject_id', $video->subject_id) == $subject->id ? 'selected' : '' }}>
                                        {{ $subject->classModel->name }} - {{ $subject->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('subject_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="topic" class="form-label">Topic</label>
                            <input type="text" class="form-control @error('topic') is-invalid @enderror" 
                                   id="topic" name="topic" value="{{ old('topic', $video->topic) }}" 
                                   placeholder="e.g., Numbers & Counting">
                            @error('topic')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="genre" class="form-label">Genre</label>
                            <input type="text" class="form-control @error('genre') is-invalid @enderror" 
                                   id="genre" name="genre" value="{{ old('genre', $video->genre) }}" 
                                   placeholder="e.g., Lesson, Moral, Sci-fi">
                            @error('genre')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="duration" class="form-label">Duration</label>
                            <select class="form-select @error('duration') is-invalid @enderror" 
                                    id="duration" name="duration">
                                <option value="">Select duration</option>
                                <option value="Short (< 5 minutes)" {{ old('duration', $video->duration) == 'Short (< 5 minutes)' ? 'selected' : '' }}>Short (< 5 minutes)</option>
                                <option value="Medium (5-10 minutes)" {{ old('duration', $video->duration) == 'Medium (5-10 minutes)' ? 'selected' : '' }}>Medium (5-10 minutes)</option>
                                <option value="Long (> 10 minutes)" {{ old('duration', $video->duration) == 'Long (> 10 minutes)' ? 'selected' : '' }}>Long (> 10 minutes)</option>
                            </select>
                            @error('duration')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="duration_seconds" class="form-label">Duration (Seconds)</label>
                            <input type="number" class="form-control @error('duration_seconds') is-invalid @enderror" 
                                   id="duration_seconds" name="duration_seconds" value="{{ old('duration_seconds', $video->duration_seconds) }}" 
                                   min="0" placeholder="e.g., 300">
                            @error('duration_seconds')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="rating" class="form-label">Rating (0-5)</label>
                            <input type="number" step="0.1" class="form-control @error('rating') is-invalid @enderror" 
                                   id="rating" name="rating" value="{{ old('rating', $video->rating) }}" 
                                   min="0" max="5">
                            @error('rating')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="age_group" class="form-label">Age Group</label>
                            <input type="text" class="form-control @error('age_group') is-invalid @enderror" 
                                   id="age_group" name="age_group" value="{{ old('age_group', $video->age_group) }}" 
                                   placeholder="e.g., 4+, 6+">
                            @error('age_group')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="order" class="form-label">Order</label>
                            <input type="number" class="form-control @error('order') is-invalid @enderror" 
                                   id="order" name="order" value="{{ old('order', $video->order) }}" min="0">
                            <small class="form-text text-muted">Lower numbers appear first</small>
                            @error('order')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4">
                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="is_featured" name="is_featured" 
                                   value="1" {{ old('is_featured', $video->is_featured) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_featured">
                                ⭐ Featured Video
                            </label>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="is_premium" name="is_premium" 
                                   value="1" {{ old('is_premium', $video->is_premium) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_premium">
                                🔒 Premium (Locked for free users)
                            </label>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="is_active" name="is_active" 
                                   value="1" {{ old('is_active', $video->is_active) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_active">
                                ✅ Active
                            </label>
                        </div>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary">Update Video</button>
                <a href="{{ route('admin.videos.index') }}" class="btn btn-secondary">Cancel</a>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Toggle video source section when remove checkbox is checked
function toggleVideoSource(checked) {
    const urlSection = document.getElementById('video_url_section');
    const orDiv = document.getElementById('video_or_div');
    if (checked) {
        urlSection.style.display = 'block';
        orDiv.style.display = 'block';
        document.getElementById('video_url').required = true;
    } else {
        urlSection.style.display = '';
        orDiv.style.display = '';
        document.getElementById('video_url').required = false;
    }
}

// Toggle thumbnail source section when remove checkbox is checked
function toggleThumbnailSource(checked) {
    const urlSection = document.getElementById('thumbnail_url_section');
    const orDiv = document.getElementById('thumbnail_or_div');
    if (checked) {
        urlSection.style.display = 'block';
        orDiv.style.display = 'block';
    } else {
        urlSection.style.display = '';
        orDiv.style.display = '';
    }
}

// Filter subjects based on selected class
document.getElementById('class_id')?.addEventListener('change', function() {
    const classId = this.value;
    const subjectSelect = document.getElementById('subject_id');
    const options = subjectSelect.querySelectorAll('option');
    
    options.forEach(option => {
        if (option.value === '' || option.getAttribute('data-class-id') == classId) {
            option.style.display = '';
        } else {
            option.style.display = 'none';
        }
    });
    
    // Reset subject if it doesn't match the selected class
    if (subjectSelect.value && subjectSelect.options[subjectSelect.selectedIndex].getAttribute('data-class-id') != classId) {
        subjectSelect.value = '';
    }
});

// Initial filter on page load
document.addEventListener('DOMContentLoaded', function() {
    const classId = document.getElementById('class_id')?.value;
    if (classId) {
        document.getElementById('class_id').dispatchEvent(new Event('change'));
    }
});
</script>
@endpush
@endsection