@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">
            <!-- begin breadcrumb -->
            <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">Create</li>
            </ol>
            <!-- end breadcrumb -->

            <!-- begin page-header -->
            <h1 class="page-header">Create Promotion</h1>
            <!-- end page-header -->

            <!-- begin panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <h4 class="panel-title">Create Promotion</h4>
                    </div>
                </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.store') }}" method="POST" enctype="multipart/form-data"
                        id="promotionForm">
                        @csrf

                        <!-- Basic Information -->
                        <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 @error('title') is-invalid @enderror"
                                                value="{{ old('title') }}" required 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 @error('mode') is-invalid @enderror" required>
                                                <option value="">Select Mode</option>
                                                <option value="image" {{ old('mode') == 'image' ? 'selected' : '' }}>Image
                                                    Mode</option>
                                                <option value="video" {{ old('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 @error('description') is-invalid @enderror"
                                        rows="4" required maxlength="2000">{{ old('description') }}</textarea>
                                    <small class="form-text text-muted">Maximum 2000 characters</small>
                                </div>
                            </div>
                        </div>

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

                                <div class="form-group">
                                    <input type="file" name="thumbnail" id="thumbnail"
                                        class="form-control-file @error('thumbnail') is-invalid @enderror" accept="image/*"
                                        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>

                        <!-- Image Mode Content -->
                        <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">
                                    <div class="">
                                        <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>
                                    </div>

                                    <div class="">
                                        <div class="form-group">
                                            <label for="images">Select Image <span class="text-danger">*</span></label>
                                            <input type="file" name="images[]" id="images"
                                                class="form-control-file @error('images') is-invalid @enderror @error('images.*') is-invalid @enderror"
                                                accept="image/*">
                                            <small class="form-text text-muted">
                                                Select one image file for the promotion.
                                            </small>
                                            <div id="image-preview" class="mt-2"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Video Mode Content -->
                        <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">
                                    <div class="">
                                        <p class="text-muted">Enter a YouTube video URL for your promotion.</p>

                                    </div>

                                    <div class="form-group">
                                        <label for="youtube_url">YouTube URL <span class="text-danger">*</span></label>
                                        <input type="url" name="youtube_url" id="youtube_url"
                                            class="form-control @error('youtube_url') is-invalid @enderror"
                                            value="{{ old('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>

                        <!-- Status -->
                        <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" {{ old('is_active', false) ? '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>

                        <!-- Submit Buttons -->
                        <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> Create 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>
            <!-- end panel -->
        </div>
        <!-- end content -->
    </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;
        }

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

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Handle mode change
            document.getElementById('mode').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
                if (selectedMode === 'image') {
                    document.getElementById('image-mode-content').classList.add('active');
                    document.getElementById('images').required = true;
                    document.getElementById('youtube_url').required = false;
                } else if (selectedMode === 'video') {
                    document.getElementById('video-mode-content').classList.add('active');
                    document.getElementById('images').required = false;
                    document.getElementById('youtube_url').required = true;
                }
            });

            // Trigger on page load if mode is already selected
            if (document.getElementById('mode').value) {
                document.getElementById('mode').dispatchEvent(new Event('change'));
            }

            // Handle thumbnail preview
            document.getElementById('thumbnail').addEventListener('change', function() {
                previewImage(this, 'thumbnail-preview', 'thumbnail-preview');
            });

            // Handle single image preview
            document.getElementById('images').addEventListener('change', function() {
                previewSingleImage(this.files[0]);
            });

            // Handle YouTube URL preview
            document.getElementById('youtube_url').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 =
                        '<iframe class="youtube-preview" src="' + embedUrl +
                        '" frameborder="0" allowfullscreen></iframe>';
                } else {
                    document.getElementById('youtube-preview').innerHTML = '';
                }
            });

            // Trigger YouTube preview if old value exists
            if (document.getElementById('youtube_url').value) {
                document.getElementById('youtube_url').dispatchEvent(new Event('input'));
            }

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

                if (input.files && input.files[0]) {
                    const reader = new FileReader();

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

                    reader.readAsDataURL(input.files[0]);
                }
            }

            // Preview single image function for promotion image
            function previewSingleImage(file) {
                const container = document.getElementById('image-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)');
                        document.getElementById('images').value = '';
                        return;
                    }

                    // Validate file type
                    if (!file.type.match(/image\/(jpeg|jpg|png|gif|webp)/)) {
                        showImageError(file.name, 'Invalid file type');
                        document.getElementById('images').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)');
                                document.getElementById('images').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 container = document.getElementById('image-preview');
                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">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                `;
                container.innerHTML = errorHtml;
            }

            // 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
            document.getElementById('promotionForm').addEventListener('submit', function(e) {
                const mode = document.getElementById('mode').value;

                if (mode === 'image') {
                    const files = document.getElementById('images').files;
                    if (!files || files.length === 0) {
                        alert('Please upload an image for image mode.');
                        e.preventDefault();
                        return false;
                    }

                    // Validate the single file
                    const file = files[0];

                    // Check file size
                    if (file.size > 2097152) { // 2MB
                        alert(`Image "${file.name}" is too large (max 2MB).`);
                        e.preventDefault();
                        return false;
                    }

                    // Check file type
                    if (!file.type.match(/image\/(jpeg|jpg|png|gif|webp)/)) {
                        alert(`Image "${file.name}" has invalid file type.`);
                        e.preventDefault();
                        return false;
                    }
                } else if (mode === 'video') {
                    const youtubeUrl = document.getElementById('youtube_url').value;
                    if (!youtubeUrl || !extractYouTubeVideoId(youtubeUrl)) {
                        alert('Please enter a valid YouTube URL for video mode.');
                        e.preventDefault();
                        return false;
                    }
                }

                if (!document.getElementById('thumbnail').files[0]) {
                    alert('Please upload a thumbnail image.');
                    e.preventDefault();
                    return false;
                }
            });
        });
    </script>
@endsection