@extends('admin.index')

@section('title', 'Edit 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;">Edit Movie</h1>
        <p class="text-muted" style="max-width: 600px; margin: 0 auto; float: left;">
            Update the movie details below.
        </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="editMovieForm" action="{{ route('movie.update', $movie->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <!-- 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"
                                value="{{ old('name', $movie->name) }}" 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"
                                    value="{{ old('year', $movie->year) }}" 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"
                                    value="{{ old('duration', $movie->duration) }}">
                            </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"
                                    value="{{ old('rating', $movie->rating) }}">
                            </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 }}" {{ $movie->category_id == $category->id ? 'selected' : '' }}>
                                            {{ $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 }}" {{ $movie->language_id == $language->id ? 'selected' : '' }}>
                                            {{ $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">{{ old('description', $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">
                                    @if($movie->thumbnail_image)
                                        <img src="{{ asset('uploads/thumbnail/' . $movie->thumbnail_image) }}" 
                                             style="max-width:100%; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.2);">
                                    @endif
                                </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">
                                    @if($movie->movie_url)
                                        <video src="{{ asset('uploads/movies/' . $movie->movie_url) }}" controls
                                            style="max-width:100%; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.2);">
                                        </video>
                                    @endif
                                </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" {{ $movie->status == 'active' ? 'selected' : '' }}>Active</option>
                                <option value="inactive" {{ $movie->status == 'inactive' ? 'selected' : '' }}>Inactive</option>
                                <option value="draft" {{ $movie->status == 'draft' ? 'selected' : '' }}>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> Update 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>

    <!-- 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