@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 x-data="window.bitflanImageGrayscaleComponent()" x-init="init()" data-max-size="{{ $maxSizeBytes }}" class="single-page-sec">
    @include( $tool['templates']['header'], [
        'tool' => $tool['name']
    ])

    <x-ads.top-banner />

    <div class="single-page-inner">
        <div class="upload-wrapper">
            <div class="upload-container bg-light dark:bg-dark border border-2 border-dashed border-primary dark:border-primary rounded-3 p-4" 
                :class="{ 'dragover': dragOver }"
                @dragover.prevent="dragOver = true"
                @dragleave.prevent="dragOver = false"
                @drop.prevent="dragOver = false; handleFileSelect($event)"
                @click="$refs.fileInput.click()">
                
                <div class="upload-content text-center">
                    <div class="upload-icon mb-3">
                        <i class="fas fa-cloud-upload-alt fa-3x text-primary"></i>
                    </div>
                    <div class="upload-text">
                        <p class="text-dark dark:text-light mb-2">{{ trans('webtools/tools/image-to-grayscale.text_add_image') }}</p>
                        <p class="text-dark dark:text-light small">{{ trans('webtools/tools/image-to-grayscale.drag_drop_upload') }}</p>
                    </div>

                    <div class="mt-3">
                        <label class="btn btn-primary">
                            {{ trans('webtools/tools/image-to-grayscale.choose_file') }}
                            <input type="file" x-ref="fileInput" @change="handleFileSelect($event)" @click.stop accept="image/png,image/jpeg,image/jpg,image/webp" class="d-none" />
                        </label>
                        <div class="mt-2 text-dark dark:text-light" x-text="$refs.fileInput?.files[0]?.name || '{{ trans('webtools/tools/image-to-grayscale.no_file_chosen') }}'"></div>
                    </div>

                    <div class="mt-3 text-dark dark:text-light">
                        <small>{{ trans('webtools/tools/image-to-grayscale.max_file_size') }}: 2MB</small><br>
                        <small>{{ trans('webtools/tools/image-to-grayscale.supported_formats') }}</small>
                    </div>
                </div>
            </div>

            <div x-show="error" x-text="error" class="alert alert-danger mt-3"></div>

            <template x-if="preview">
                <div class="preview-container mt-4">
                    <div class="row g-4">
                        <div class="col-md-6">
                            <div class="card h-100">
                                <div class="card-body">
                                    <h5 class="card-title text-dark dark:text-light mb-3">{{ trans('webtools/tools/image-to-grayscale.original_image') }}</h5>
                                    <div class="preview-canvas-wrapper bg-light dark:bg-dark rounded-3 p-3">
                                        <canvas x-ref="canvas" class="preview-canvas img-fluid"></canvas>
                                    </div>
                                    <div class="mt-3 text-dark dark:text-light">
                                        <small x-text="'{{ trans('webtools/tools/image-to-grayscale.size') }}: ' + formatSize(originalSize)"></small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card h-100">
                                <div class="card-body">
                                    <h5 class="card-title text-dark dark:text-light mb-3">{{ trans('webtools/tools/image-to-grayscale.grayscale_image') }}</h5>
                                    <div class="preview-canvas-wrapper bg-light dark:bg-dark rounded-3 p-3">
                                        <canvas x-ref="grayscaleCanvas" class="preview-canvas img-fluid"></canvas>
                                    </div>
                                    <div class="mt-3 text-dark dark:text-light">
                                        <small x-text="'{{ trans('webtools/tools/image-to-grayscale.size') }}: ' + formatSize(grayscaleSize)"></small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <template x-if="grayscaleSize && originalSize">
                        <div class="alert alert-info mt-4">
                            <span x-text="grayscaleSize < originalSize ? 
                                '{{ trans('webtools/tools/image-to-grayscale.reduced_by', ['percent' => ':percent']) }}'.replace(':percent', Math.round((1 - grayscaleSize/originalSize) * 100)) : 
                                '{{ trans('webtools/tools/image-to-grayscale.increased_by', ['percent' => ':percent']) }}'.replace(':percent', Math.round((grayscaleSize/originalSize - 1) * 100))">
                            </span>
                        </div>
                    </template>

                    <div class="action-buttons text-center mt-4">
                        <button @click="convertToGrayscale()" :disabled="converting || error" class="btn btn-primary btn-lg">
                            <span x-show="!converting">{{ trans('webtools/tools/image-to-grayscale.text_convert') }}</span>
                            <span x-show="converting">{{ trans('webtools/tools/image-to-grayscale.converting') }}</span>
                        </button>
                        <button x-show="grayscalePreview" @click="downloadGrayscale()" class="btn btn-success btn-lg ms-2">
                            <i class="fas fa-download me-2"></i>{{ trans('webtools/tools/image-to-grayscale.btn_save') }}
                        </button>
                    </div>
                </div>
            </template>
        </div>

        <hr class="small-marg">
        <h2>{{ get_tool_title($tool['name'], $toolSettings->title) }}</h2>
        <p>{!! get_tool_description($tool['name'], $toolSettings->description) !!}</p>
    </div>

    <x-ads.middle-banner />
</div>

<div class="content-sec">
    <div class="content-sec-inner">
        <div class="content-title-sec">
            <div class="content-title-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                    <path id="chart-relationship" d="M29.25,6.75a4.5,4.5,0,0,0-4.34,3.375H20.171A8.995,8.995,0,1,0,10.125,20.171V24.91a4.5,4.5,0,1,0,2.25,0V20.173A8.945,8.945,0,0,0,16.76,18.35l4.128,4.129a4.447,4.447,0,0,0-.638,2.271,4.5,4.5,0,1,0,4.5-4.5,4.446,4.446,0,0,0-2.271.638L18.35,16.759a8.944,8.944,0,0,0,1.823-4.384H24.91A4.492,4.492,0,1,0,29.25,6.75Z" transform="translate(-2.251 -2.251)" fill="#fff"/>
                </svg>
            </div>
            <h3>{{ trans('webtools/general.related') }}</h3>
        </div>

        <div class="content-cats-sec">
            @foreach($related as $toolKey => $relatedTool)
                @if($relatedTool['name'] != $tool['name'])
                    @if($toolOptions['tool-' . $relatedTool['name'] . '.' . 'enabled'][0]->payload != 'false')
                        <div class="content-cats-col">
                            <a href="{{ !can_use($toolKey) ? route('pricing') : route('tool', $toolSlugs->{$toolKey}) }}" class="content-cats-inner {{ !can_use($toolKey) ? 'locked' : '' }}">
                                @include($relatedTool['templates']['selector'], [
                                    'tool'    => $relatedTool['name'],
                                    'title'   => get_tool_title($relatedTool['name'], str_replace('"', '', $toolOptions['tool-' . $relatedTool['name'] . '.' . 'title'][0]->payload)),
                                    'summary' => get_tool_summary($relatedTool['name'], str_replace('"', '', $toolOptions['tool-' . $relatedTool['name'] . '.' . 'summary'][0]->payload)),
                                ])
                            </a>
                        </div>
                    @endif
                @endif
            @endforeach
        </div>
    </div>

    <x-ads.bottom-banner />
</div>

@push('alpine-components')
<script>
    window.bitflanImageGrayscaleComponent = function() {
        return {
            converting: false,
            error: null,
            maxSize: 0,
            preview: null,
            grayscalePreview: null,
            originalSize: 0,
            grayscaleSize: 0,
            img: null,
            dragOver: false,

            init() {
                this.maxSize = parseInt(this.$el.dataset.maxSize);
            },

            validateFile(file) {
                if (!file) {
                    return '{!! trans('webtools/tools/image-to-grayscale.errors.select_file') !!}';
                }

                if (file.size > this.maxSize) {
                    const sizeMB = (file.size / (1024 * 1024)).toFixed(2);
                    const maxSizeMB = (this.maxSize / (1024 * 1024)).toFixed(0);
                    return '{!! trans('webtools/tools/image-to-grayscale.errors.file_size_exceeds', ['size' => ':size', 'max' => ':max']) !!}'.replace(':size', sizeMB).replace(':max', maxSizeMB);
                }

                if (!['image/png', 'image/jpeg', 'image/jpg', 'image/webp'].includes(file.type)) {
                    return '{!! trans('webtools/tools/image-to-grayscale.errors.invalid_format') !!}';
                }

                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 previews
                if (this.preview) {
                    URL.revokeObjectURL(this.preview);
                    this.preview = null;
                }
                if (this.grayscalePreview) {
                    URL.revokeObjectURL(this.grayscalePreview);
                    this.grayscalePreview = null;
                }

                // Reset sizes
                this.originalSize = 0;
                this.grayscaleSize = 0;

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

                    // Load image
                    this.img = new Image();
                    this.img.onload = () => {
                        const canvas = this.$refs.canvas;
                        const ctx = canvas.getContext('2d');

                        // Check memory requirements
                        const memorySizeMB = (this.img.width * this.img.height * 4) / (1024 * 1024);
                        if (memorySizeMB > 100) {
                            this.error = '{!! trans('webtools/tools/image-to-grayscale.errors.image_too_large', ['width' => ':width', 'height' => ':height', 'memory' => ':memory']) !!}'
                                .replace(':width', this.img.width)
                                .replace(':height', this.img.height)
                                .replace(':memory', memorySizeMB.toFixed(1));
                            URL.revokeObjectURL(this.img.src);
                            return;
                        }

                        // Set canvas dimensions
                        canvas.width = this.img.width;
                        canvas.height = this.img.height;

                        // Draw original image
                        ctx.drawImage(this.img, 0, 0);

                        // Auto-convert to grayscale
                        this.convertToGrayscale();
                    };
                    this.img.src = this.preview;
                }
            },

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

                this.converting = true;
                this.error = null;

                try {
                    const canvas = this.$refs.grayscaleCanvas;
                    const ctx = canvas.getContext('2d');

                    // Set canvas dimensions
                    canvas.width = this.img.width;
                    canvas.height = this.img.height;

                    // Draw original image
                    ctx.drawImage(this.img, 0, 0);

                    // Get image data
                    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                    const data = imageData.data;

                    // Convert to grayscale
                    for (let i = 0; i < data.length; i += 4) {
                        const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
                        data[i] = avg;     // red
                        data[i + 1] = avg; // green
                        data[i + 2] = avg; // blue
                    }

                    // Put the grayscale image data back
                    ctx.putImageData(imageData, 0, 0);

                    // Get the original file to determine format
                    const file = this.$refs.fileInput.files[0];
                    const fileType = file.type;
                    
                    // Use the original format with appropriate quality
                    let mimeType = 'image/png';
                    let quality = 1.0;
                    
                    if (fileType === 'image/jpeg' || fileType === 'image/jpg') {
                        mimeType = 'image/jpeg';
                        quality = 0.9; // 90% quality for JPEG
                    } else if (fileType === 'image/webp') {
                        mimeType = 'image/webp';
                        quality = 0.9; // 90% quality for WebP
                    }
                    
                    // Get the grayscale image as data URL with appropriate format
                    this.grayscalePreview = canvas.toDataURL(mimeType, quality);

                    // Calculate grayscale size
                    const response = await fetch(this.grayscalePreview);
                    const blob = await response.blob();
                    this.grayscaleSize = blob.size;
                    
                    // If the grayscale is larger than original, try more compression
                    if (this.grayscaleSize > this.originalSize && (mimeType === 'image/jpeg' || mimeType === 'image/webp')) {
                        quality = 0.8; // Try with 80% quality
                        this.grayscalePreview = canvas.toDataURL(mimeType, quality);
                        
                        const response2 = await fetch(this.grayscalePreview);
                        const blob2 = await response2.blob();
                        this.grayscaleSize = blob2.size;
                        
                        // If still larger, try even more compression
                        if (this.grayscaleSize > this.originalSize) {
                            quality = 0.7; // Try with 70% quality
                            this.grayscalePreview = canvas.toDataURL(mimeType, quality);
                            
                            const response3 = await fetch(this.grayscalePreview);
                            const blob3 = await response3.blob();
                            this.grayscaleSize = blob3.size;
                        }
                    }
                } catch (err) {
                    this.error = 'Failed to convert image to grayscale. Please try again.';
                    console.error(err);
                } finally {
                    this.converting = false;
                }
            },

            async downloadGrayscale() {
                if (!this.grayscalePreview) return;

                try {
                    // Get the file from the input
                    const file = this.$refs.fileInput.files[0];
                    const filename = file.name;
                    const dotIndex = filename.lastIndexOf(".");
                    const name = filename.substring(0, dotIndex);
                    const ext = filename.substring(dotIndex + 1).toLowerCase();
                    
                    // Determine the file type based on the original
                    let fileType = 'image/png';
                    let fileExt = 'png';
                    
                    if (['jpg', 'jpeg'].includes(ext)) {
                        fileType = 'image/jpeg';
                        fileExt = 'jpg';
                    } else if (ext === 'webp') {
                        fileType = 'image/webp';
                        fileExt = 'webp';
                    }
                    
                    // Convert data URL to Blob
                    const response = await fetch(this.grayscalePreview);
                    const blob = await response.blob();
                    
                    // Convert Blob to File
                    const newFile = new File([blob], `${name}_grayscale.${fileExt}`, { type: fileType });
                    
                    // Create download link
                    const a = document.createElement('a');
                    a.href = URL.createObjectURL(newFile);
                    a.download = `${name}_grayscale.${fileExt}`;
                    a.click();
                    
                    // Clean up
                    URL.revokeObjectURL(a.href);
                } catch (err) {
                    this.error = 'Failed to download grayscale image. Please try again.';
                    console.error(err);
                }
            }
        }
    }
</script>

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

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

.preview-canvas-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

.preview-canvas {
    max-width: 100%;
    height: auto;
    display: block;
}

.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 .bg-light {
    background-color: var(--bs-dark) !important;
}

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

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

@endsection