@extends('admin.layout')
@php($editing = $event->exists)
@section('title', $editing ? 'Etkinliği Düzenle' : 'Yeni Etkinlik')
@section('content')
<div class="page-head">
    <div>
        <h1>{{ $editing ? 'Etkinliği Düzenle' : 'Yeni Etkinlik' }}</h1>
        <div class="muted">Etkinlik bilgilerini ve kapak görselini yönetin.</div>
    </div>
    <a class="btn ghost" href="{{ route('admin.events') }}">← Listeye Dön</a>
</div>

<div class="card form-card">
    <form id="event-form" method="post" action="{{ $editing ? route('admin.events.update', $event) : route('admin.events.store') }}" enctype="multipart/form-data">
        @csrf
        @if($editing) @method('PUT') @endif
        <input type="hidden" name="cover_base64" id="cover_base64" value="">
        <div class="form-grid">
            <div>
                <label>Başlık</label>
                <input name="title" required value="{{ old('title', $event->title) }}">
            </div>
            <div>
                <label>Kategori</label>
                <input name="category" value="{{ old('category', $event->category) }}" placeholder="Networking / Workshop / Konferans">
            </div>
            <div>
                <label>Konum</label>
                <input name="location" value="{{ old('location', $event->location) }}">
            </div>
            <div>
                <label>Başlangıç</label>
                <input type="datetime-local" lang="tr-TR" name="starts_at" value="{{ old('starts_at', $event->starts_at?->format('Y-m-d\TH:i')) }}">
            </div>
            <div>
                <label>Kapasite</label>
                <input type="number" name="capacity" min="1" value="{{ old('capacity', $event->capacity) }}">
            </div>
            <div>
                <label>Katılım Ücreti (₺)</label>
                <input type="number" name="entry_fee" min="0" step="0.01" value="{{ old('entry_fee', $event->entry_fee ?? 0) }}">
            </div>
            <div>
                <label>Kapak Görseli</label>
                <input id="cover-input" type="file" name="cover" accept="image/*">
                <div class="muted" style="margin-top:-6px;margin-bottom:12px">Boyut fark etmez — gönderilmeden önce tarayıcıda otomatik küçültülür.</div>
                <img id="cover-live-preview" class="cover-preview" alt="" style="display:none">
            </div>
        </div>

        @if($event->cover_path)
            <img class="cover-preview" src="{{ url('storage/'.$event->cover_path) }}" alt="{{ $event->title }}">
        @endif

        <label>Açıklama</label>
        <textarea name="description" rows="5">{{ old('description', $event->description) }}</textarea>

        @if(!$editing)
            <label class="check"><input type="checkbox" name="publish" value="1" @checked(old('publish'))> Hemen yayınla (duvara düşer)</label>
        @else
            <div class="muted">Durum: <span class="badge">{{ $event->status }}</span></div>
        @endif

        <div class="form-actions">
            <button class="btn" type="submit" id="event-submit">{{ $editing ? 'Değişiklikleri Kaydet' : 'Etkinliği Oluştur' }}</button>
            <a class="btn ghost" href="{{ route('admin.events') }}">Vazgeç</a>
        </div>
    </form>
</div>

<script>
(() => {
    const form = document.getElementById('event-form');
    const input = document.getElementById('cover-input');
    const hidden = document.getElementById('cover_base64');
    const preview = document.getElementById('cover-live-preview');
    const submitBtn = document.getElementById('event-submit');
    if (!form || !input || !hidden) return;

    const readAsDataURL = (file) => new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(String(reader.result || ''));
        reader.onerror = reject;
        reader.readAsDataURL(file);
    });

    const loadImage = (src) => new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => resolve(img);
        img.onerror = reject;
        img.src = src;
    });

    async function compressFile(file) {
        const dataUrl = await readAsDataURL(file);
        const img = await loadImage(dataUrl);
        const maxEdge = 1280;
        const scale = Math.min(1, maxEdge / Math.max(img.width, img.height, 1));
        const w = Math.max(1, Math.round(img.width * scale));
        const h = Math.max(1, Math.round(img.height * scale));
        const canvas = document.createElement('canvas');
        canvas.width = w;
        canvas.height = h;
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = '#fff';
        ctx.fillRect(0, 0, w, h);
        ctx.drawImage(img, 0, 0, w, h);

        let quality = 0.72;
        let out = canvas.toDataURL('image/jpeg', quality);
        while (out.length > 900000 && quality > 0.28) {
            quality -= 0.12;
            out = canvas.toDataURL('image/jpeg', quality);
        }
        return out;
    }

    input.addEventListener('change', async () => {
        const file = input.files && input.files[0];
        hidden.value = '';
        if (!file) {
            preview.style.display = 'none';
            return;
        }
        try {
            submitBtn.disabled = true;
            submitBtn.textContent = 'Görsel hazırlanıyor...';
            const dataUrl = await compressFile(file);
            hidden.value = dataUrl;
            preview.src = dataUrl;
            preview.style.display = 'block';
            // Clear file input so oversized original is never posted.
            input.value = '';
        } catch (e) {
            alert('Görsel hazırlanamadı. Başka bir fotoğraf deneyin.');
            hidden.value = '';
        } finally {
            submitBtn.disabled = false;
            submitBtn.textContent = @json($editing ? 'Değişiklikleri Kaydet' : 'Etkinliği Oluştur');
        }
    });

    form.addEventListener('submit', async (event) => {
        if (input.files && input.files[0] && !hidden.value) {
            event.preventDefault();
            try {
                submitBtn.disabled = true;
                submitBtn.textContent = 'Görsel hazırlanıyor...';
                hidden.value = await compressFile(input.files[0]);
                input.value = '';
                form.submit();
            } catch (e) {
                alert('Görsel hazırlanamadı.');
                submitBtn.disabled = false;
            }
        }
    });
})();
</script>
@endsection