@extends('admin.index')

@section('title', 'Add New Movie')

@section('content')
    <div class="content-area">
        <!-- Header Section -->
        <div class="flex-column align-items-center" style="margin-bottom: 5%;">
            <h1 class="mb-2" style="font-weight: 700;">Add New Movie</h1>
            <p class="text-muted" style="max-width: 600px; margin: 0 auto; float: left;">
                Fill out the form below to add a new movie to your platform.
            </p>
        </div>

        <!-- Centered Form Card -->
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card shadow-sm border-0">
                    <div class="card-body p-4">
                        <form id="addMovieForm" action="{{ route('movie.store') }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf

                            <!-- Movie Title -->
                            <div class="form-group mb-3">
                                <label class="form-label">Movie Title *</label>
                                <input type="text" name="name" class="form-control" placeholder="Enter movie title"
                                    required>
                            </div>

                            <!-- Year, Duration, Rating -->
                            <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem;">
                                <div class="form-group mb-3">
                                    <label class="form-label">Release Year *</label>
                                    <input type="number" name="year" class="form-control" placeholder="2024"
                                        min="1900" max="2030" required>
                                </div>

                                <div class="form-group mb-3">
                                    <label class="form-label">Duration (minutes)</label>
                                    <input type="number" name="duration" class="form-control" placeholder="120"
                                        min="1">
                                </div>

                                <div class="form-group mb-3">
                                    <label class="form-label">Rating</label>
                                    <input type="number" name="rating" class="form-control" placeholder="8.5"
                                        min="0" max="10" step="0.1">
                                </div>
                            </div>

                            <!-- Category & Language -->
                            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                                <div class="form-group mb-3">
                                    <label class="form-label">Genre *</label>
                                    <select name="category_id" class="form-control" required>
                                        <option value="">Select Genre</option>
                                        @foreach ($categories as $category)
                                            <option value="{{ $category->id }}">{{ $category->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group mb-3">
                                    <label class="form-label">Language *</label>
                                    <select name="language_id" class="form-control" required>
                                        <option value="">Select Language</option>
                                        @foreach ($languages as $language)
                                            <option value="{{ $language->id }}">{{ $language->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <!-- Description -->
                            <div class="form-group mb-3">
                                <label class="form-label">Description</label>
                                <textarea name="description" class="form-control form-textarea" rows="4" placeholder="Enter movie description"></textarea>
                            </div>

                            <!-- Thumbnail & Video Upload -->
                            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                                <div class="form-group mb-3">
                                    <label class="form-label">Thumbnail Image</label>
                                    <input type="file" name="thumbnail_image" class="form-control file-upload"
                                        data-type="image" accept="image/*">
                                    <div class="preview-container mt-2"></div>
                                </div>

                                <div class="form-group mb-3">
                                    <label class="form-label">Video File</label>
                                    <input type="file" name="movie_url" class="form-control file-upload"
                                        data-type="video" accept="video/*">
                                    <div class="preview-container mt-2"></div>
                                </div>
                            </div>

                            <!-- Status -->
                            <div class="form-group mb-4">
                                <label class="form-label">Status</label>
                                <select name="status" class="form-control">
                                    <option value="active">Active</option>
                                    <option value="inactive">Inactive</option>
                                    <option value="draft">Draft</option>
                                </select>
                            </div>

                            <!-- Buttons -->
                            <div class="d-flex justify-content-between align-items-center">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-1"></i> Save Movie
                                </button>
                                <a href="{{ route('movie.list') }}" class="btn btn-outline-secondary">
                                    <i class="fas fa-arrow-left me-1"></i> Back to List
                                </a>
                            </div>
                        </form>

                        <!-- Errors & Success -->
                        @if ($errors->any())
                            <div class="alert alert-danger mt-3">
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        @if (session('success'))
                            <div class="alert alert-success mt-3">{{ session('success') }}</div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- File Preview JS -->
    <script>
        class FilePreviewer {
            constructor(selector) {
                this.inputs = document.querySelectorAll(selector);
                this.init();
            }

            init() {
                this.inputs.forEach(input => {
                    input.addEventListener('change', e => this.handleFileChange(e));
                });
            }

            handleFileChange(event) {
                const input = event.target;
                const file = input.files[0];
                const type = input.dataset.type;
                const previewContainer = input.closest('.form-group').querySelector('.preview-container');

                previewContainer.innerHTML = '';
                if (!file) return;

                const url = URL.createObjectURL(file);

                if (type === 'image' && file.type.startsWith('image/')) {
                    const img = document.createElement('img');
                    img.src = url;
                    img.style.maxWidth = '100%';
                    img.style.borderRadius = '8px';
                    img.style.boxShadow = '0 2px 6px rgba(0,0,0,0.2)';
                    previewContainer.appendChild(img);
                } else if (type === 'video' && file.type.startsWith('video/')) {
                    const video = document.createElement('video');
                    video.src = url;
                    video.controls = true;
                    video.style.maxWidth = '100%';
                    video.style.borderRadius = '8px';
                    video.style.boxShadow = '0 2px 6px rgba(0,0,0,0.2)';
                    previewContainer.appendChild(video);
                } else {
                    previewContainer.innerHTML = `<p style="color:red;">Invalid file type!</p>`;
                }
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            new FilePreviewer('.file-upload');
        });
    </script>
@endsection