@extends('layouts.admin.index')

@section('content')
<div class="container mt-4">
    <h2>Add New Media</h2>

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

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

        <!-- Title -->
        <div class="mb-3">
            <label for="title" class="form-label">Title</label>
            <input type="text" class="form-control" name="title" id="title" required>
        </div>

        <!-- Media Type -->
        <div class="mb-3">
            <label for="media_type" class="form-label">Media Type</label>
            <select class="form-control" id="media_type" name="media_type" required>
                <option value="">-- Select Media Type --</option>
                <option value="video">Video</option>
                <option value="image">Image</option>
            </select>
        </div>

        <!-- Video Input -->
        <div class="mb-3" id="video_input" style="display:none;">
            <label for="video_file" class="form-label">Upload Video</label>
            <input type="file" class="form-control" name="video_file" id="video_file" accept="video/*">
            <small class="form-text text-muted">Only required if you selected Video.</small>
        </div>

        <!-- Image Input -->
        <div class="mb-3" id="image_input" style="display:none;">
            <label for="image_file" class="form-label">Upload Image</label>
            <input type="file" class="form-control" name="image_file" id="image_file" accept="image/*">
            <small class="form-text text-muted">Only required if you selected Image.</small>
        </div>

        <!-- Thumbnail Input -->
        <div class="mb-3">
            <label for="thumbnail_file" class="form-label">Upload Thumbnail (Optional)</label>
            <input type="file" class="form-control" name="thumbnail_file" id="thumbnail_file" accept="image/*">
            <small class="form-text text-muted">Optional. For videos, helps show a preview.</small>
        </div>

        <button type="submit" class="btn btn-primary">Add Media</button>
    </form>
</div>

<!-- JS to show/hide input based on media type -->
<script>
    const mediaType = document.getElementById('media_type');
    const videoInput = document.getElementById('video_input');
    const imageInput = document.getElementById('image_input');

    mediaType.addEventListener('change', function() {
        if (this.value === 'video') {
            videoInput.style.display = 'block';
            imageInput.style.display = 'none';
        } else if (this.value === 'image') {
            videoInput.style.display = 'none';
            imageInput.style.display = 'block';
        } else {
            videoInput.style.display = 'none';
            imageInput.style.display = 'none';
        }
    });
</script>


@endsection