@extends('layouts.admin-simple')

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

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

@section('content')
<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">Create New Video</h4>
            <div class="card-subtitle text-muted">Add a new video to your library</div>
        </div>
    </div>
    
    <form method="POST" action="{{ route('admin.videos.store') }}" enctype="multipart/form-data">
        @csrf
        <div class="card-body">
            <div class="row">
                <div class="col-md-8">
                    <!-- Basic Information -->
                    <div class="form-group">
                        <label for="title">Video 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') }}" required>
                        @error('title')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="form-group">
                        <label for="description">Description</label>
                        <textarea class="form-control @error('description') is-invalid @enderror" 
                                  id="description" name="description" rows="4">{{ old('description') }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <!-- Video Settings -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="video_type">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 onchange="updateVideoTypeFields()">
                                    <option value="">Select Video Type</option>
                                    @foreach($videoTypes as $key => $label)
                                        <option value="{{ $key }}" {{ old('video_type') == $key ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('video_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="category">Category</label>
                                <select class="form-control @error('category') is-invalid @enderror" 
                                        id="category" name="category">
                                    <option value="">Select Category</option>
                                    @foreach($categories as $key => $label)
                                        <option value="{{ $key }}" {{ old('category') == $key ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('category')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="video_url">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') }}" required
                               placeholder="e.g., https://www.youtube.com/watch?v=...">
                        @error('video_url')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="form-text text-muted" id="video_url_help">
                            Enter the full URL of your video (YouTube, Vimeo, or direct video file)
                        </small>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="duration">Duration</label>
                                <input type="text" class="form-control @error('duration') is-invalid @enderror" 
                                       id="duration" name="duration" value="{{ old('duration') }}" 
                                       placeholder="e.g., 5:42">
                                @error('duration')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">Format: MM:SS (e.g., 5:42)</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="thumbnail_url">Custom 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') }}">
                                @error('thumbnail_url')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">Optional: Override default thumbnail</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="thumbnail_file">Upload Custom Thumbnail</label>
                        <input type="file" class="form-control-file @error('thumbnail_file') is-invalid @enderror" 
                               id="thumbnail_file" name="thumbnail_file" accept="image/*">
                        @error('thumbnail_file')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="form-text text-muted">Upload a custom thumbnail image (JPEG, PNG, GIF, max 2MB). This will override the thumbnail URL and auto-generated thumbnails.</small>
                    </div>
                    
                    <div class="form-group">
                        <label for="tags">Tags</label>
                        <input type="text" class="form-control @error('tags') is-invalid @enderror" 
                               id="tags" name="tags" value="{{ old('tags') }}" 
                               placeholder="company, innovation, technology">
                        @error('tags')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="form-text text-muted">Separate tags with commas</small>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <!-- Publishing Settings -->
                    <div class="card">
                        <div class="card-header">
                            <h6 class="card-title mb-0">Publishing Settings</h6>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label for="published_at">Publish Date</label>
                                <input type="datetime-local" class="form-control @error('published_at') is-invalid @enderror" 
                                       id="published_at" name="published_at" value="{{ old('published_at', now()->format('Y-m-d\TH:i')) }}">
                                @error('published_at')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="form-group">
                                <label for="sort_order">Sort Order</label>
                                <input type="number" class="form-control @error('sort_order') is-invalid @enderror" 
                                       id="sort_order" name="sort_order" value="{{ old('sort_order', 0) }}" min="0">
                                @error('sort_order')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">Lower numbers appear first</small>
                            </div>
                            
                            <div class="form-group">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" 
                                           id="is_featured" name="is_featured" value="1" {{ old('is_featured') ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="is_featured">Featured Video</label>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" 
                                           id="is_active" name="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="is_active">Active</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- SEO Settings -->
                    <div class="card">
                        <div class="card-header">
                            <h6 class="card-title mb-0">SEO Settings</h6>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label for="meta_title">Meta Title</label>
                                <input type="text" class="form-control @error('meta_title') is-invalid @enderror" 
                                       id="meta_title" name="meta_title" value="{{ old('meta_title') }}" maxlength="255">
                                @error('meta_title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="form-group">
                                <label for="meta_description">Meta Description</label>
                                <textarea class="form-control @error('meta_description') is-invalid @enderror" 
                                          id="meta_description" name="meta_description" rows="3" maxlength="500">{{ old('meta_description') }}</textarea>
                                @error('meta_description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="card-footer">
            <div class="d-flex justify-content-between">
                <a href="{{ route('admin.videos') }}" class="btn btn-secondary">
                    <i class="material-icons mr-2">arrow_back</i> Back to Videos
                </a>
                <button type="submit" class="btn btn-primary">
                    <i class="material-icons mr-2">save</i> Create Video
                </button>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
function updateVideoTypeFields() {
    const videoType = document.getElementById('video_type').value;
    const helpText = document.getElementById('video_url_help');
    
    switch(videoType) {
        case 'youtube':
            helpText.textContent = 'Enter YouTube URL (e.g., https://www.youtube.com/watch?v=VIDEO_ID)';
            break;
        case 'vimeo':
            helpText.textContent = 'Enter Vimeo URL (e.g., https://vimeo.com/VIDEO_ID)';
            break;
        case 'file':
            helpText.textContent = 'Enter direct video file URL (e.g., https://example.com/video.mp4)';
            break;
        case 'embed':
            helpText.textContent = 'Enter embeddable video URL';
            break;
        default:
            helpText.textContent = 'Enter the full URL of your video (YouTube, Vimeo, or direct video file)';
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    updateVideoTypeFields();
});
</script>
@endpush