@extends('layouts.app')

@section('title', 'Konverter JPG ke WebP - Ubah Gambar Online')
@section('meta_description', 'Ubah gambar JPG Anda menjadi format WebP secara instan, gratis, dan tanpa upload ke server.')
@section('meta_keywords', 'JPG to WebP, Konversi JPG ke WebP, Converter Gambar Online, WebP Converter')

@section('content')
<div class="bg-white w-full max-w-lg p-8 rounded-xl shadow-lg m-4 mx-auto mt-10">
    <!-- Judul Aplikasi -->
    <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-gray-800">Konverter JPG ke WebP</h1>
        <p class="text-gray-500 mt-2">Ubah gambar JPG Anda menjadi format WebP secara instan.</p>
    </div>
    <!-- Area Upload -->
    <div>
        <!-- Input file yang disembunyikan -->
        <input type="file" id="jpgInput" class="hidden" accept=".jpg, .jpeg">
        <!-- Tombol custom untuk memicu input file -->
        <label for="jpgInput" class="w-full bg-primary text-white font-bold py-3 px-6 rounded-lg cursor-pointer hover:bg-primary/90 transition-all duration-300 flex items-center justify-center text-lg">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
            </svg>
            Unggah File JPG
        </label>
    </div>
    <!-- Notifikasi Error (disembunyikan secara default) -->
    <div id="error-notification" class="hidden mt-4 bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded-md" role="alert">
        <p class="font-bold">Gagal!</p>
        <p id="error-message">File yang Anda pilih bukan format JPG atau JPEG.</p>
    </div>
    <!-- Area Hasil Konversi (disembunyikan secara default) -->
    <div id="result-area" class="hidden mt-8 border-t border-gray-200 pt-6 text-center">
        <h2 class="text-xl font-bold text-gray-700 mb-4">Hasil Konversi (WebP)</h2>
        <!-- Preview Gambar -->
        <div class="mb-4 bg-gray-50 p-4 rounded-lg border border-gray-200">
            <img id="webp-preview" src="" alt="Preview Gambar WebP" class="max-w-full h-auto mx-auto rounded-md shadow-sm">
        </div>
        <p class="text-sm text-gray-500 mb-4">Ukuran Asli: <span id="original-size"></span> | Ukuran WebP: <span id="webp-size"></span></p>
        <!-- Tombol Download -->
        <a id="download-link" href="#" download="hasil-konversi.webp" class="w-full bg-primary text-white font-bold py-3 px-6 rounded-lg hover:bg-primary/90 transition-all duration-300 flex items-center justify-center text-lg">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
            </svg>
            Unduh Gambar WebP
        </a>
    </div>
    <!-- Canvas untuk proses konversi (disembunyikan) -->
    <canvas id="converter-canvas" class="hidden"></canvas>
</div>
@endsection

@push('scripts')
<script>
    // --- Mendapatkan elemen-elemen DOM ---
    const jpgInput = document.getElementById('jpgInput');
    const resultArea = document.getElementById('result-area');
    const webpPreview = document.getElementById('webp-preview');
    const downloadLink = document.getElementById('download-link');
    const converterCanvas = document.getElementById('converter-canvas');
    const errorNotification = document.getElementById('error-notification');
    const errorMessage = document.getElementById('error-message');
    const originalSizeSpan = document.getElementById('original-size');
    const webpSizeSpan = document.getElementById('webp-size');

    // --- Event Listener untuk input file ---
    jpgInput.addEventListener('change', (event) => {
        const file = event.target.files[0];
        // Sembunyikan notifikasi dan hasil sebelumnya
        errorNotification.classList.add('hidden');
        resultArea.classList.add('hidden');
        // --- Validasi File ---
        if (!file) {
            return; // Tidak ada file yang dipilih
        }
        if (!file.type.match('image/jpeg')) {
            errorMessage.textContent = 'File yang Anda pilih bukan format JPG atau JPEG.';
            errorNotification.classList.remove('hidden');
            // Reset input file agar bisa upload file yang sama lagi setelah error
            jpgInput.value = ''; 
            return;
        }
        // --- Proses Konversi ---
        const reader = new FileReader();
        // 1. Baca file sebagai Data URL
        reader.readAsDataURL(file);
        reader.onload = (e) => {
            const img = new Image();
            img.src = e.target.result;
            // Tampilkan ukuran file asli
            const originalSize = (file.size / 1024).toFixed(2); // dalam KB
            originalSizeSpan.textContent = `${originalSize} KB`;
            // 2. Setelah gambar dimuat, gambar ke canvas
            img.onload = () => {
                const ctx = converterCanvas.getContext('2d');
                // Set ukuran canvas sesuai gambar
                converterCanvas.width = img.width;
                converterCanvas.height = img.height;
                // Gambar ke canvas
                ctx.drawImage(img, 0, 0);
                // 3. Konversi canvas ke format WebP
                // Angka kedua adalah kualitas gambar (0.0 - 1.0)
                const webpDataUrl = converterCanvas.toDataURL('image/webp', 0.9);
                // Tampilkan preview gambar hasil konversi
                webpPreview.src = webpDataUrl;
                // Set link download
                downloadLink.href = webpDataUrl;
                // Hitung ukuran file WebP
                const webpSize = (webpDataUrl.length * (3/4) / 1024).toFixed(2); // Estimasi ukuran dalam KB
                webpSizeSpan.textContent = `${webpSize} KB`;
                // Tampilkan area hasil
                resultArea.classList.remove('hidden');
            };
            img.onerror = () => {
                 errorMessage.textContent = 'Gagal memuat file gambar. Mungkin file rusak.';
                 errorNotification.classList.remove('hidden');
            };
        };
        reader.onerror = () => {
            errorMessage.textContent = 'Gagal membaca file.';
            errorNotification.classList.remove('hidden');
        };
    });
</script>
@endpush