@extends('layouts.main')

@section('content')

<div class="hero-section">
    <h2>{{ trans('webtools/homepage.title') }}</h2>
    <h1>{{ trans('webtools/homepage.heading') }}</h1>
</div>

@include("modules.tools.search-base")

@php
$uploadMaxFilesize = (int)ini_get('upload_max_filesize');
$postMaxSize = (int)ini_get('post_max_size');
$serverMaxSize = min($uploadMaxFilesize, $postMaxSize);
$maxSizeBytes = $serverMaxSize * 1024 * 1024;
@endphp

<div class="single-page-sec">
    @include( $tool['templates']['header'], [
        'tool' => $tool['name']
    ] )

    <x-ads.top-banner />

    <div class="single-page-inner">
        <div x-data="window.bitflanImageRotateComponent()" 
             x-init="init()" 
             x-on:destroy.window="destroy"
             data-max-size="{{ $maxSizeBytes }}"
             @scroll-to-preview.window="$watch('preview', value => value && $el.scrollIntoView({ behavior: 'smooth' }))">
            
        <div class="row">
            <div class="col-md-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title text-dark dark:text-light">{{ __('webtools/tools/image-rotate.title_Add_Image') }}</h5>
                        <div class="upload-container p-4 rounded-3 bg-light dark:bg-dark border border-2 border-dashed border-primary dark:border-primary"
                             :class="{ 'dragover': dragOver }"
                             @dragover="handleDragOver"
                             @dragleave="handleDragLeave"
                             @drop="handleDrop">
                            <div class="text-center">
                                <i class="fas fa-cloud-upload-alt fa-3x mb-3 text-primary"></i>
                                <p class="text-dark dark:text-light">{{ __('webtools/tools/image-rotate.text_Drag_Drop') }}</p>
                                <div class="mt-3">
                                    <label class="btn btn-primary">
                                        {{ __('webtools/tools/image-rotate.button_Choose_File') }}
                                        <input type="file" 
                                               x-ref="upload" 
                                               class="d-none" 
                                               accept="image/png,image/jpeg,image/jpg,image/webp"
                                               @change="handleFileSelect"
                                               @click.stop>
                                    </label>
                                    <div class="mt-2 text-dark dark:text-light" x-text="$refs.upload?.files[0]?.name || '{{ __('webtools/tools/image-rotate.text_No_File_Chosen') }}'"></div>
                                </div>
                                <div class="mt-3 text-dark dark:text-light">
                                    <small>{{ __('webtools/tools/image-rotate.text_Max_File_Size') }}: 2MB</small><br>
                                    <small>{{ __('webtools/tools/image-rotate.text_Supported_Formats') }}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title text-dark dark:text-light">{{ __('webtools/tools/image-rotate.title_Image_Rotate') }}</h5>
                        <div class="canvas-container p-4 rounded-3 bg-light dark:bg-dark border border-2 border-dashed border-primary dark:border-primary"
                             :class="{ 'dragover': dragOver }"
                             @dragover="handleDragOver"
                             @dragleave="handleDragLeave"
                             @drop="handleDrop">
                            <div class="text-center" x-show="!preview">
                                <i class="fas fa-image fa-3x mb-3 text-primary"></i>
                                <p class="text-dark dark:text-light">{{ __('webtools/tools/image-rotate.text_Drag_Drop_Canvas') }}</p>
                            </div>
                            <template x-if="preview">
                                <div class="d-flex flex-column align-items-center">
                                    <canvas x-ref="canvas" class="mb-4"></canvas>
                                    <div class="text-center">
                                        <div class="mt-3">
                                            <button class="btn btn-primary me-2" @click="rotateImage('left')" :disabled="isAnimating">
                                                <i class="fas fa-undo"></i> {{ __('webtools/tools/image-rotate.button_Rotate_Left') }}
                                            </button>
                                            <button class="btn btn-primary" @click="rotateImage('right')" :disabled="isAnimating">
                                                <i class="fas fa-redo"></i> {{ __('webtools/tools/image-rotate.button_Rotate_Right') }}
                                            </button>
                                        </div>
                                        <div class="mt-3">
                                            <button class="btn btn-success" @click="generate()" :disabled="isAnimating">
                                                <i class="fas fa-save"></i> {{ __('webtools/tools/image-rotate.button_Save') }}
                                            </button>
                                        </div>
                                        <div class="mt-3 text-dark dark:text-light">
                                            <small>{{ __('webtools/tools/image-rotate.text_Keyboard_Hint') }}</small>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="d-none">
            <a href="#" x-ref="anchor"></a>
        </div>
    </div>

    <hr class="my-4">
    <h2 class="mb-3">{{ trans('webtools/tools/image-rotate.title_Image_Rotate') }}</h2>
    <p>{{ trans('webtools/tools/image-rotate.text_Description') }}</p>
</div>

<x-ads.middle-banner />

<div class="content-sec">
    <div class="content-sec-inner">
    </div>
</div>

<style>
.upload-container, .canvas-container {
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.3s ease;
}

.upload-container.dragover, .canvas-container.dragover {
    background-color: var(--bs-primary-bg-subtle) !important;
    border-color: var(--bs-primary) !important;
}

#imageCanvas {
    max-width: 100%;
    max-height: 400px;
    margin: 0 auto;
    display: block;
}

.dark .upload-container, .dark .canvas-container {
    background-color: var(--bs-dark) !important;
}

.dark .text-dark {
    color: var(--bs-light) !important;
}

.dark .bg-light {
    background-color: var(--bs-dark) !important;
}

.dark .card {
    background-color: var(--bs-dark) !important;
    border-color: var(--bs-gray-700) !important;
}

.dark .card-body {
    background-color: var(--bs-dark) !important;
}

.dark .card-title {
    color: var(--bs-light) !important;
}

.file-input-label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-icon {
    color: var(--bs-primary);
}

.dark .upload-icon {
    color: var(--bs-primary);
}

.rotation-controls {
    background-color: var(--bs-gray-100);
    padding: 1rem;
    border-radius: 0.5rem;
}

.dark .rotation-controls {
    background-color: var(--bs-gray-800);
}

.keyboard-hint kbd {
    background-color: var(--bs-gray-200);
    color: var(--bs-gray-900);
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
}

.dark .keyboard-hint kbd {
    background-color: var(--bs-gray-700);
    color: var(--bs-gray-100);
}

canvas {
    max-width: 100%;
    max-height: 400px;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

.canvas-container {
    position: relative;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.3s ease;
}
</style>

@push('alpine-components')
<script>
        window.bitflanImageRotateComponent = function() {
            return {
                rotating: false,
                error: null,
                maxSize: 0,
                preview: null,
                currentAngle: 0,
                originalSize: 0,
                dragOver: false,
                originalFormat: null,
                originalDimensions: { width: 0, height: 0 },
                img: null,
                isAnimating: false,
                handleKeydown: null,

                init() {
                    this.maxSize = parseInt(this.$el.dataset.maxSize);
                    
                    // Add keyboard controls
                    this.handleKeydown = (e) => {
                        if (!this.img) return;
                        if (e.key === 'ArrowLeft') {
                            e.preventDefault();
                            this.rotateImage('left');
                        } else if (e.key === 'ArrowRight') {
                            e.preventDefault();
                            this.rotateImage('right');
                        }
                    };
                    
                    window.addEventListener('keydown', this.handleKeydown);
                },

                validateFile(file) {
                    if (!file) {
                        return 'Please select a file.';
                    }

                    if (file.size > this.maxSize) {
                        const sizeMB = (file.size / (1024 * 1024)).toFixed(2);
                        const maxSizeMB = (this.maxSize / (1024 * 1024)).toFixed(0);
                        return `File size (${sizeMB}MB) exceeds the server limit of ${maxSizeMB}MB. For larger images, please use an image compression tool first.`;
                    }

                    if (!['image/png', 'image/jpeg', 'image/jpg', 'image/webp'].includes(file.type)) {
                        return 'Only PNG, JPG, JPEG and WebP files are allowed.';
                    }

                    return null;
                },

                formatSize(bytes) {
                    if (bytes === 0) return '0 Bytes';
                    const k = 1024;
                    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
                    const i = Math.floor(Math.log(bytes) / Math.log(k));
                    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
                },

                handleFileSelect(event) {
                    const file = event.target?.files?.[0] || event.dataTransfer?.files?.[0];
                    if (!file) return;

                    this.error = this.validateFile(file);
                    
                    // Clear previous preview
                    if (this.preview) {
                        URL.revokeObjectURL(this.preview);
                        this.preview = null;
                    }

                    // Reset rotation and format
                    this.currentAngle = 0;
                    this.originalSize = 0;
                    this.originalFormat = file.type;

                    if (!this.error) {
                        // Show preview
                        this.preview = URL.createObjectURL(file);
                        this.originalSize = file.size;

                        // Load image
                        this.img = new Image();
                        this.img.onload = () => {
                            // Check memory requirements
                            const memorySizeMB = (this.img.width * this.img.height * 4) / (1024 * 1024);
                            if (memorySizeMB > 100) {
                                this.error = `Image dimensions (${this.img.width}x${this.img.height}) are too large. This would require approximately ${memorySizeMB.toFixed(1)}MB of memory. Please use a smaller image.`;
                                URL.revokeObjectURL(this.img.src);
                                return;
                            }

                            // Update canvas with initial image
                            this.updateCanvas();

                            // Scroll to preview
                            this.$el.scrollIntoView({ behavior: 'smooth' });
                        };
                        this.img.onerror = () => {
                            this.error = 'Failed to load image. The file might be corrupted.';
                            URL.revokeObjectURL(this.img.src);
                        };
                        this.img.src = this.preview;
                    }

                    // Reset file input if there was an error
                    if (this.error && event.target) {
                        event.target.value = '';
                    }

                    // Prevent event propagation
                    event.stopPropagation();
                },

                async rotateImage(direction = 'right') {
                    if (!this.img || this.isAnimating) return;

                    this.isAnimating = true;
                    const targetAngle = this.currentAngle + (direction === 'right' ? 90 : -90);
                    
                    // Animate rotation
                    const startAngle = this.currentAngle;
                    const startTime = performance.now();
                    const duration = 300; // Animation duration in ms

                    const animate = (currentTime) => {
                        const elapsed = currentTime - startTime;
                        const progress = Math.min(elapsed / duration, 1);
                        
                        // Easing function for smooth animation
                        const easeProgress = 1 - Math.pow(1 - progress, 3);
                        
                        this.currentAngle = startAngle + (targetAngle - startAngle) * easeProgress;
                        this.updateCanvas();

                        if (progress < 1) {
                            requestAnimationFrame(animate);
                        } else {
                            this.currentAngle = targetAngle;
                            if (this.currentAngle < 0) this.currentAngle += 360;
                            this.currentAngle %= 360;
                            this.updateCanvas();
                            this.isAnimating = false;
                        }
                    };

                    requestAnimationFrame(animate);
                },

                updateCanvas() {
                    const canvas = this.$refs.canvas;
                    const ctx = canvas.getContext('2d');
                    const container = canvas.parentElement;
                    const containerWidth = container.clientWidth - 32; // Account for padding
                    const containerHeight = 400; // Max height

                    // Calculate scaling to fit the image within the container
                    let scale = 1;
                    let displayWidth = this.img.width;
                    let displayHeight = this.img.height;

                    // If image is rotated 90 or 270 degrees, swap dimensions
                    const angle = this.currentAngle % 360;
                    if (angle % 180 !== 0) {
                        [displayWidth, displayHeight] = [displayHeight, displayWidth];
                    }

                    // Calculate scale to fit within container
                    const scaleX = containerWidth / displayWidth;
                    const scaleY = containerHeight / displayHeight;
                    scale = Math.min(scaleX, scaleY);

                    // Set canvas size to match scaled dimensions
                    canvas.width = displayWidth * scale;
                    canvas.height = displayHeight * scale;

                    // Clear canvas
                    ctx.clearRect(0, 0, canvas.width, canvas.height);

                    // Move to center and rotate
                    ctx.save();
                    ctx.translate(canvas.width / 2, canvas.height / 2);
                    ctx.rotate((this.currentAngle * Math.PI) / 180);
                    ctx.scale(scale, scale);
                    ctx.drawImage(
                        this.img,
                        -this.img.width / 2,
                        -this.img.height / 2,
                        this.img.width,
                        this.img.height
                    );
                    ctx.restore();
                },

                async generate() {
                    if (!this.img) return;

                    try {
                        const canvas = this.$refs.canvas;
                        const a = this.$refs.anchor;
                        
                        // Get original filename
                        const file = this.$refs.upload.files[0];
                        const filename = file.name;
                        const dotIndex = filename.lastIndexOf('.');
                        const name = filename.substring(0, dotIndex);
                        const ext = filename.substring(dotIndex + 1).toLowerCase();

                        // Set up download with rotation angle in filename
                        a.href = canvas.toDataURL(this.originalFormat);
                        a.setAttribute('download', `${name}_rotated_${Math.round(this.currentAngle)}deg.${ext}`);
                        a.click();
                    } catch (err) {
                        this.error = err.message || 'Failed to save image. Please try again.';
                    }
                },

                handleDragOver(e) {
                    e.preventDefault();
                    this.dragOver = true;
                },

                handleDragLeave(e) {
                    e.preventDefault();
                    this.dragOver = false;
                },

                handleDrop(e) {
                    e.preventDefault();
                    this.dragOver = false;
                    this.handleFileSelect(e);
                },

                // Cleanup on component destroy
                destroy() {
                    if (this.preview) {
                        URL.revokeObjectURL(this.preview);
                    }
                    // Remove keyboard event listener
                    window.removeEventListener('keydown', this.handleKeydown);
                }
            };
        };
</script>
@endpush

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

@endsection