@extends('layouts.admin')

@section('title', 'Create 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>Create New Video</h1>

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

                <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') }}" 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') == 'Cartoon Style' ? 'selected' : '' }}>Cartoon Style</option>
                                <option value="Documentary" {{ old('type') == 'Documentary' ? 'selected' : '' }}>Documentary</option>
                                <option value="Short Story" {{ old('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') }}</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">
                        <!-- 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') }}</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.
                                <br><strong>Example:</strong> Copy the HTML div structure from your video provider, but remove the script tag.
                            </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') }}" 
                                   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>
                        <!-- Video URL Option -->
                        <div class="mb-3">
                            <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') }}" 
                                   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">
                            <strong class="text-muted">OR</strong>
                        </div>
                        <!-- Video File Upload Option -->
                        <div class="mb-3">
                            <label for="video_file" class="form-label">Upload Video File</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">
                        <div class="mb-3">
                            <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') }}" 
                                   placeholder="https://example.com/thumbnail.jpg">
                            @error('thumbnail_url')
                                <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="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">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') == $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') == $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') }}" 
                                   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') }}" 
                                   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') == 'Short (< 5 minutes)' ? 'selected' : '' }}>Short (< 5 minutes)</option>
                                <option value="Medium (5-10 minutes)" {{ old('duration') == 'Medium (5-10 minutes)' ? 'selected' : '' }}>Medium (5-10 minutes)</option>
                                <option value="Long (> 10 minutes)" {{ old('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') }}" 
                                   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', 0) }}" 
                                   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') }}" 
                                   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', 0) }}" 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') ? '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') ? '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', true) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_active">
                                ✅ Active
                            </label>
                        </div>
                    </div>
                </div>

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

@push('scripts')
<script>
// 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