@extends('layouts.app')

@section('content')
    <div id="page-container" class="fade page-sidebar-fixed page-header-fixed page-with-wide-sidebar">
        @include('partials.header')
        @include('partials.sidebar')

        <div id="content" class="content">
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
                <li class="breadcrumb-item"><a href="javascript:;">Marketing</a></li>
                <li class="breadcrumb-item"><a href="{{ route('promotions.index') }}">Promotions</a></li>
                <li class="breadcrumb-item active">Edit</li>
            </ol>
            <h1 class="page-header">Edit Promotion</h1>
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Edit Promotion</h4>
                </div>
                <div class="panel-body">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('promotions.update', $promotion->id) }}" method="POST"
                        enctype="multipart/form-data" id="editPromotionForm">
                        @csrf
                        @method('PUT')

                        <div class="form-group row">
                            <label class="col-form-label col-md-3">Basic Information</label>
                            <div class="col-md-9">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="title">Title <span class="text-danger">*</span></label>
                                            <input type="text" name="title" id="title" class="form-control"
                                                value="{{ $promotion->title }}" maxlength="255">
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="mode">Mode <span class="text-danger">*</span></label>
                                            <select name="mode" id="mode" class="form-control" required>
                                                <option value="">Select Mode</option>
                                                <option value="image" {{ $promotion->mode == 'image' ? 'selected' : '' }}>
                                                    Image
                                                    Mode</option>
                                                <option value="video" {{ $promotion->mode == 'video' ? 'selected' : '' }}>
                                                    Video
                                                    Mode</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="description">Description <span class="text-danger">*</span></label>
                                    <textarea name="description" id="description" class="form-control" rows="4" maxlength="2000">{{ $promotion->description }}</textarea>
                                    <small class="form-text text-muted">Maximum 2000 characters</small>
                                </div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-form-label col-md-3">Thumbnail</label>
                            <div class="col-md-9">
                                <p class="text-muted">Upload a thumbnail image that will be displayed in lists and previews.
                                </p>

                                @if ($promotion->thumbnail && $promotion->thumbnailExists())
                                    <div class="current-thumbnail mb-3">
                                        <label class="d-block font-weight-bold">Current Thumbnail:</label>
                                        <img src="{{ $promotion->thumbnail_url }}" class="img-thumbnail"
                                            style="width: 150px; height: 100px; object-fit: cover;" alt="Current thumbnail">
                                    </div>
                                @endif

                                <div class="form-group">
                                    <label
                                        for="thumbnail">{{ $promotion->thumbnail ? 'Replace Thumbnail' : 'Thumbnail Image' }}</label>
                                    <input type="file" name="thumbnail" id="thumbnail" class="form-control-file"
                                        accept="image/*" {{ !$promotion->thumbnail ? 'required' : '' }}>
                                    <small class="form-text text-muted">
                                        Accepted formats: JPG, PNG, GIF, WebP (max size: 1MB).
                                        Image will be automatically resized to 300x200px.
                                    </small>
                                    <div id="thumbnail-preview" class="mt-2"></div>
                                </div>
                            </div>
                        </div>

                        <div id="image-mode-content" class="mode-content">
                            <div class="form-group row">
                                <label class="col-form-label col-md-3">Image</label>
                                <div class="col-md-9">
                                    <p class="text-muted">
                                        Upload a single image for your promotion. The image must be:
                                        <br>• Maximum 2MB file size
                                        <br>• Maximum resolution: 1920 × 1080 (Full HD)
                                        <br>• Please upload image with 16:9 ratio
                                        <br>• Supported formats: JPG, PNG, GIF, WebP
                                    </p>

                                    @if ($promotion->images->count() > 0)
                                        <div class="card mb-3">
                                            <div class="card-header">
                                                <h6 class="card-title mb-0">Current Image</h6>
                                            </div>
                                            <div class="card-body">
                                                @php $firstImage = $promotion->images->first(); @endphp
                                                <div id="current-image">
                                                    <div class="text-center current-image-item"
                                                        data-image-id="{{ $firstImage->id }}">
                                                        <div class="position-relative d-inline-block">
                                                            @if ($firstImage->imageExists())
                                                                <img src="{{ $firstImage->image_url }}"
                                                                    class="img-thumbnail"
                                                                    style="width: 300px; height: 200px; object-fit: cover;"
                                                                    alt="{{ $firstImage->original_filename }}">
                                                            @else
                                                                <div class="bg-light d-flex align-items-center justify-content-center"
                                                                    style="width: 300px; height: 200px;">
                                                                    <i class="fa fa-exclamation-triangle text-warning"></i>
                                                                </div>
                                                            @endif
                                                            <button type="button"
                                                                class="btn btn-danger btn-sm position-absolute delete-existing-image"
                                                                style="top: 5px; right: 5px; width: 24px; height: 24px; padding: 0; border-radius: 50%;"
                                                                data-image-id="{{ $firstImage->id }}">×</button>
                                                        </div>
                                                        <div class="mt-2">
                                                            <small
                                                                class="text-muted d-block">{{ $firstImage->original_filename ?: $firstImage->image_path }}</small>
                                                            <small class="text-muted">{{ $firstImage->human_file_size }} •
                                                                {{ $firstImage->resolution }}</small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <input type="hidden" name="delete_images" id="delete_images" value="">
                                    @endif

                                    <div class="form-group">
                                        <label
                                            for="images">{{ $promotion->images->count() > 0 ? 'Replace Image' : 'Add Image' }}</label>
                                        <input type="file" name="images[]" id="images" class="form-control-file"
                                            accept="image/*">
                                        <small class="form-text text-muted">
                                            Select a single image file for the promotion.
                                        </small>
                                    </div>

                                    <div id="images-preview-container" class="mt-3">
                                        <div id="images-preview"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="video-mode-content" class="mode-content">
                            <div class="form-group row">
                                <label class="col-form-label col-md-3">YouTube Video</label>
                                <div class="col-md-9">
                                    <p class="text-muted">Enter a YouTube video URL for your promotion.</p>

                                    @if ($promotion->mode == 'video' && $promotion->youtube_url)
                                        <div class="current-video mb-3">
                                            <label class="d-block font-weight-bold">Current Video:</label>
                                            <div class="embed-responsive embed-responsive-16by9"
                                                style="max-width: 400px;">
                                                <iframe class="embed-responsive-item"
                                                    src="{{ $promotion->youtube_embed_url }}" allowfullscreen></iframe>
                                            </div>
                                        </div>
                                    @endif

                                    <div class="form-group">
                                        <label for="youtube_url">YouTube URL @if ($promotion->mode == 'video')
                                                <span class="text-danger">*</span>
                                            @endif
                                        </label>
                                        <input type="url" name="youtube_url" id="youtube_url" class="form-control"
                                            value="{{ $promotion->youtube_url }}"
                                            placeholder="https://www.youtube.com/watch?v=...">
                                        <small class="form-text text-muted">
                                            Enter a valid YouTube video URL. Supported formats:
                                            youtube.com/watch?v=..., youtu.be/..., youtube.com/embed/...
                                        </small>
                                        <div id="youtube-preview" class="mt-2"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-form-label col-md-3">Status</label>
                            <div class="col-md-9">
                                <div class="form-check">
                                    <input type="checkbox" name="is_active" id="is_active" class="form-check-input"
                                        value="1" {{ $promotion->is_active ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_active">
                                        Active
                                    </label>
                                    <small class="form-text text-muted d-block">
                                        If checked, this promotion will be active and any other active promotion will be
                                        deactivated.
                                    </small>
                                </div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-9 offset-md-3">
                                <button type="submit" class="btn btn-custom">
                                    <i class="fa fa-save"></i> Update Promotion
                                </button>
                                <a href="{{ route('promotions.index') }}" class="btn btn-custom ml-2">
                                    <i class="fa fa-arrow-left"></i> Back To List
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <style>
        .mode-content {
            display: none;
        }

        .mode-content.active {
            display: block;
        }

        .image-preview {
            width: 300px;
            height: 200px;
            object-fit: cover;
            margin: 10px 0;
            border-radius: 4px;
            border: 2px solid #dee2e6;
        }

        .thumbnail-preview {
            width: 150px;
            height: 100px;
            object-fit: cover;
            margin: 10px 0;
            border-radius: 4px;
        }

        .youtube-preview {
            width: 100%;
            height: 200px;
            margin: 10px 0;
            border-radius: 4px;
        }

        .current-image-item.to-delete {
            opacity: 0.5;
            filter: grayscale(1);
        }

        .current-image-item.to-delete::after {
            content: "MARKED FOR DELETION";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(220, 53, 69, 0.9);
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
            z-index: 5;
        }

        .image-info {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let imagesToDelete = [];
            const form = document.getElementById('editPromotionForm');
            const modeSelect = document.getElementById('mode');
            const imagesInput = document.getElementById('images');
            const youtubeInput = document.getElementById('youtube_url');
            const thumbnailInput = document.getElementById('thumbnail');

            // Handle mode change
            modeSelect.addEventListener('change', function() {
                const selectedMode = this.value;

                // Hide all mode content
                document.querySelectorAll('.mode-content').forEach(function(el) {
                    el.classList.remove('active');
                });

                // Show selected mode content and update required fields
                if (selectedMode === 'image') {
                    document.getElementById('image-mode-content').classList.add('active');
                    youtubeInput.required = false;
                } else if (selectedMode === 'video') {
                    document.getElementById('video-mode-content').classList.add('active');
                    youtubeInput.required = true;
                }
            });

            // Trigger on page load
            modeSelect.dispatchEvent(new Event('change'));

            // Handle delete existing image button
            document.querySelectorAll('.delete-existing-image').forEach(function(button) {
                button.addEventListener('click', function() {
                    const imageId = this.dataset.imageId;
                    const container = this.closest('.current-image-item');

                    if (confirm('Are you sure you want to delete this image?')) {
                        imagesToDelete.push(imageId);
                        document.getElementById('delete_images').value = JSON.stringify(
                            imagesToDelete);
                        container.classList.add('to-delete');
                        container.style.display = 'none';
                    }
                });
            });

            // Handle thumbnail preview
            thumbnailInput.addEventListener('change', function() {
                previewSingleImage(this, 'thumbnail-preview', 'img-thumbnail',
                    'width: 150px; height: 100px; object-fit: cover;');
            });

            // Handle single image preview
            imagesInput.addEventListener('change', function() {
                previewPromotionImage(this.files[0]);
            });

            // Handle YouTube URL preview
            youtubeInput.addEventListener('input', function() {
                const url = this.value;
                const videoId = extractYouTubeVideoId(url);

                if (videoId) {
                    const embedUrl = 'https://www.youtube.com/embed/' + videoId;
                    document.getElementById('youtube-preview').innerHTML =
                        '<div class="embed-responsive embed-responsive-16by9" style="max-width: 400px;"><iframe class="embed-responsive-item" src="' +
                        embedUrl + '" allowfullscreen></iframe></div>';
                } else {
                    document.getElementById('youtube-preview').innerHTML = '';
                }
            });

            // Preview single image function
            function previewSingleImage(input, containerId, className, style) {
                const previewContainer = document.getElementById(containerId);
                previewContainer.innerHTML = '';

                if (input.files && input.files[0]) {
                    const file = input.files[0];

                    // Validate file type
                    if (!file.type.match(/image\/(jpeg|jpg|png|gif|webp)/)) {
                        showError('Invalid file type. Please select an image file.');
                        input.value = '';
                        return;
                    }

                    // Validate file size (1MB for thumbnail)
                    const maxSize = 1048576; // 1MB
                    if (file.size > maxSize) {
                        showError('Thumbnail file too large. Maximum size: 1MB');
                        input.value = '';
                        return;
                    }

                    const reader = new FileReader();
                    reader.onload = function(e) {
                        previewContainer.innerHTML = '<img src="' + e.target.result + '" class="' + className +
                            '" style="' + style + '">';
                    };
                    reader.readAsDataURL(file);
                }
            }

            // Preview promotion image function
            function previewPromotionImage(file) {
                const container = document.getElementById('images-preview');
                container.innerHTML = '';

                if (file) {
                    // Validate file size (2MB = 2,097,152 bytes)
                    if (file.size > 2097152) {
                        showImageError(file.name, 'File too large (max 2MB)');
                        imagesInput.value = '';
                        return;
                    }

                    // Validate file type
                    if (!file.type.match(/image\/(jpeg|jpg|png|gif|webp)/)) {
                        showImageError(file.name, 'Invalid file type');
                        imagesInput.value = '';
                        return;
                    }

                    const reader = new FileReader();
                    reader.onload = function(e) {
                        // Create image element to check dimensions
                        const img = new Image();
                        img.onload = function() {
                            if (this.width > 1920 || this.height > 1080) {
                                showImageError(file.name, 'Resolution too high (max 1920×1080)');
                                imagesInput.value = '';
                                return;
                            }

                            const imageHtml = `
                                <div class="text-center">
                                    <img src="${e.target.result}" class="image-preview" alt="Preview">
                                    <div class="image-info">
                                        <div>${file.name}</div>
                                        <div>${(file.size / 1024 / 1024).toFixed(2)}MB • ${this.width}×${this.height}</div>
                                    </div>
                                </div>
                            `;
                            container.innerHTML = imageHtml;
                        };
                        img.src = e.target.result;
                    };
                    reader.readAsDataURL(file);
                }
            }

            // Show image error function
            function showImageError(filename, error) {
                const errorHtml = `
                    <div class="alert alert-warning alert-dismissible fade show" role="alert">
                        <strong>${filename}:</strong> ${error}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                `;
                document.getElementById('images-preview').innerHTML = errorHtml;
            }

            // Show general error function
            function showError(message) {
                const errorDiv = document.createElement('div');
                errorDiv.className = 'alert alert-danger alert-dismissible fade show mt-2';
                errorDiv.innerHTML = `
                    ${message}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                `;
                form.insertBefore(errorDiv, form.firstChild);

                // Auto-remove after 5 seconds
                setTimeout(() => {
                    if (errorDiv.parentNode) {
                        errorDiv.remove();
                    }
                }, 5000);
            }

            // Extract YouTube video ID
            function extractYouTubeVideoId(url) {
                const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
                const match = url.match(regExp);
                return (match && match[7].length === 11) ? match[7] : false;
            }

            // Form validation
            form.addEventListener('submit', function(e) {
                let isValid = true;
                const mode = modeSelect.value;
                const hasExistingImages = document.querySelectorAll(
                    '.current-image-item:not([style*="display: none"])').length > 0;
                const hasNewImages = imagesInput.files && imagesInput.files.length > 0;

                // Clear previous validation
                form.classList.remove('was-validated');

                if (mode === 'image') {
                    // For image mode, ensure at least one image exists (current or new)
                    if (!hasExistingImages && !hasNewImages) {
                        showError('Please upload an image for image mode or keep existing image.');
                        isValid = false;
                    }

                    // Validate new image if any
                    if (hasNewImages) {
                        const file = imagesInput.files[0];
                        if (file.size > 2097152) { // 2MB
                            showError(`Image "${file.name}" is too large (max 2MB).`);
                            isValid = false;
                        }
                        if (!file.type.match(/image\/(jpeg|jpg|png|gif|webp)/)) {
                            showError(`Image "${file.name}" has invalid file type.`);
                            isValid = false;
                        }
                    }
                } else if (mode === 'video') {
                    const youtubeUrl = youtubeInput.value;
                    if (!youtubeUrl || !extractYouTubeVideoId(youtubeUrl)) {
                        showError('Please enter a valid YouTube URL for video mode.');
                        isValid = false;
                    }
                }

                // Validate thumbnail if new one is uploaded
                if (thumbnailInput.files && thumbnailInput.files.length > 0) {
                    const thumbnailFile = thumbnailInput.files[0];
                    if (thumbnailFile.size > 1048576) { // 1MB
                        showError('Thumbnail file is too large (max 1MB).');
                        isValid = false;
                    }
                    if (!thumbnailFile.type.match(/image\/(jpeg|jpg|png|gif|webp)/)) {
                        showError('Thumbnail has invalid file type.');
                        isValid = false;
                    }
                }

                if (!isValid) {
                    e.preventDefault();
                    return false;
                }

                // Update delete_images field with current list
                document.getElementById('delete_images').value = JSON.stringify(imagesToDelete);
                form.classList.add('was-validated');
            });
        });
    </script>
@endsection