@extends('layouts.admin')
@section('title', $event->exists ? 'Edit Event' : 'Event Baru')
@section('page-title', $event->exists ? 'Edit Event' : 'Tambah Event')

@section('content')
<div class="mx-auto max-w-2xl" x-data="{ type: '{{ old('type', $event->type ?? 'online') }}' }">
<form method="POST" enctype="multipart/form-data" action="{{ $event->exists ? route('admin.events.update', $event) : route('admin.events.store') }}" class="space-y-5">
    @csrf @if($event->exists) @method('PUT') @endif

    {{-- Info dasar --}}
    <div class="card space-y-4 p-6">
        <h3 class="text-h4">Info Event</h3>
        <div><label class="label">Judul</label><input name="title" value="{{ old('title', $event->title) }}" required class="field"></div>
        <div><label class="label">Deskripsi</label><textarea name="description" rows="3" class="field">{{ old('description', $event->description) }}</textarea></div>
        <div class="grid grid-cols-2 gap-3">
            <div><label class="label">Narasumber</label><input name="speaker" value="{{ old('speaker', $event->speaker) }}" class="field" placeholder="Ustadz Fulan"></div>
            <div><label class="label">Jabatan/Kredensial</label><input name="speaker_title" value="{{ old('speaker_title', $event->speaker_title) }}" class="field" placeholder="Lc., M.A."></div>
        </div>
        <x-admin.media-field name="cover" label="Cover (opsional)" :current="$event->cover" :preview="$event->coverUrl()" />
    </div>

    {{-- Tipe & lokasi --}}
    <div class="card space-y-4 p-6">
        <h3 class="text-h4">Tipe & Lokasi</h3>
        <div>
            <label class="label">Tipe Event</label>
            <div class="flex gap-2">
                <label class="flex-1 cursor-pointer">
                    <input type="radio" name="type" value="online" x-model="type" class="peer sr-only">
                    <span class="block rounded-xl border border-outline px-4 py-3 text-center text-sm font-semibold peer-checked:border-primary peer-checked:bg-primary/10 peer-checked:text-primary">🌐 Online</span>
                </label>
                <label class="flex-1 cursor-pointer">
                    <input type="radio" name="type" value="offline" x-model="type" class="peer sr-only">
                    <span class="block rounded-xl border border-outline px-4 py-3 text-center text-sm font-semibold peer-checked:border-primary peer-checked:bg-primary/10 peer-checked:text-primary">📍 Offline</span>
                </label>
            </div>
        </div>

        {{-- Online --}}
        <div x-show="type==='online'" x-cloak class="space-y-4">
            <div><label class="label">Platform</label>
                <select name="online_platform" class="field">
                    @foreach(['Zoom','Google Meet','YouTube Live','Lainnya'] as $pf)
                    <option @selected(old('online_platform',$event->online_platform)===$pf)>{{ $pf }}</option>
                    @endforeach
                </select>
            </div>
            <div><label class="label">Link Join (dikirim ke pendaftar)</label><input name="online_url" value="{{ old('online_url', $event->online_url) }}" class="field" placeholder="https://zoom.us/j/..."></div>
        </div>

        {{-- Offline --}}
        <div x-show="type==='offline'" x-cloak class="space-y-4">
            <div><label class="label">Alamat / Venue</label><input name="location" value="{{ old('location', $event->location) }}" class="field" placeholder="Masjid Jami, Jl. ..."></div>
            <div><label class="label">Link Google Maps</label><input name="map_url" value="{{ old('map_url', $event->map_url) }}" class="field" placeholder="https://maps.app.goo.gl/...">
                <p class="mt-1 text-xs text-muted">Pengunjung dapat tombol "Buka di Maps" untuk navigasi.</p></div>
        </div>
    </div>

    {{-- Waktu & pendaftaran --}}
    <div class="card space-y-4 p-6">
        <h3 class="text-h4">Waktu & Pendaftaran</h3>
        <div class="grid grid-cols-2 gap-3">
            <div><label class="label">Mulai</label><input type="datetime-local" name="starts_at" value="{{ old('starts_at', $event->starts_at?->format('Y-m-d\TH:i')) }}" class="field"></div>
            <div><label class="label">Selesai</label><input type="datetime-local" name="ends_at" value="{{ old('ends_at', $event->ends_at?->format('Y-m-d\TH:i')) }}" class="field"></div>
        </div>
        <div class="grid grid-cols-3 gap-3">
            <div><label class="label">Batas Daftar</label><input type="datetime-local" name="registration_deadline" value="{{ old('registration_deadline', $event->registration_deadline?->format('Y-m-d\TH:i')) }}" class="field"></div>
            <div><label class="label">Harga (0=gratis)</label><input type="number" name="price" value="{{ old('price', $event->price ?? 0) }}" class="field"></div>
            <div><label class="label">Kuota</label><input type="number" name="quota" value="{{ old('quota', $event->quota) }}" class="field"></div>
        </div>
        <div class="grid grid-cols-2 gap-3">
            <div><label class="label">Kontak WhatsApp (CP)</label><input name="contact_whatsapp" value="{{ old('contact_whatsapp', $event->contact_whatsapp) }}" class="field" placeholder="6281234567890"></div>
        </div>
        <div><label class="label">Catatan / Persyaratan</label><textarea name="notes" rows="2" class="field" placeholder="Bawa Al-Quran, dapat e-sertifikat, dll">{{ old('notes', $event->notes) }}</textarea></div>
        <div class="flex gap-6">
            <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="is_published" value="1" @checked(old('is_published',$event->is_published)) class="rounded bg-surface-2 border-outline text-primary"> Publish</label>
            <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="members_only" value="1" @checked(old('members_only',$event->members_only)) class="rounded bg-surface-2 border-outline text-primary"> Khusus member</label>
        </div>
    </div>

    <div class="flex gap-2"><button class="btn-filled flex-1">Simpan</button><a href="{{ route('admin.events.index') }}" class="btn-outline">Batal</a></div>
</form>
</div>
@endsection