@extends('admin.layout')

@section('title', $ad->exists ? 'Edit Iklan' : 'Tambah Iklan')

@section('content')
    <div class="row g-4">
        <div class="col-12 col-xl-8">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4 p-xl-5">
                    <div class="mb-4">
                        <span class="badge bg-primary-subtle text-primary rounded-pill px-3 py-2">{{ $ad->exists ? 'Update Ads' : 'Ads Baru' }}</span>
                        <h5 class="mt-3 mb-2">{{ $ad->exists ? 'Perbarui materi iklan' : 'Tambahkan iklan gambar baru' }}</h5>
                        <p class="text-muted mb-0">Isi judul, unggah gambar, tambahkan link tujuan, lalu pilih posisi penayangan iklan.</p>
                    </div>

                    <form method="post" enctype="multipart/form-data" action="{{ $ad->exists ? route('dashboard.ads.update', $ad) : route('dashboard.ads.store') }}" class="vstack gap-4">
                        @csrf
                        @if ($ad->exists)
                            @method('put')
                        @endif

                        <div>
                            <label class="form-label">Judul</label>
                            <input type="text" name="title" value="{{ old('title', $ad->title) }}" class="form-control" placeholder="Contoh: Banner Program Unggulan" required>
                            @error('title')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        </div>

                        <div>
                            <label class="form-label">Link</label>
                            <input type="text" name="link" value="{{ old('link', $ad->link) }}" class="form-control" placeholder="https://example.com/tujuan-iklan">
                            <div class="form-text">Opsional. Bisa diarahkan ke URL internal maupun eksternal.</div>
                            @error('link')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        </div>

                        <div>
                            <label class="form-label">Posisi</label>
                            <select name="position" class="form-select" required>
                                <option value="">Pilih posisi iklan</option>
                                @foreach ($positions as $value => $label)
                                    <option value="{{ $value }}" @selected(old('position', $ad->position) === $value)>{{ $label }}</option>
                                @endforeach
                            </select>
                            @error('position')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        </div>

                        <div>
                            <label class="form-label">Gambar Iklan</label>
                            <input type="file" name="image_file" class="form-control" accept=".jpg,.jpeg,.png,.gif,.webp" {{ $ad->exists ? '' : 'required' }}>
                            <div class="form-text">Format yang didukung: JPG, PNG, GIF, WEBP. Maksimal 4 MB.</div>
                            @error('image_file')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        </div>

                        <div class="d-flex gap-2 flex-wrap">
                            <button type="submit" class="btn btn-primary">Simpan Iklan</button>
                            <a href="{{ route('dashboard.ads.index') }}" class="btn btn-outline-secondary">Kembali</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-12 col-xl-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body p-4">
                    <h6 class="mb-3">Preview Saat Ini</h6>
                    @if ($ad->exists && $ad->image)
                        <div class="ratio ratio-16x9 rounded overflow-hidden border bg-light mb-3">
                            <img src="{{ $ad->imageUrl() }}" alt="{{ $ad->title }}" class="w-100 h-100 object-fit-cover">
                        </div>
                        <div class="small text-muted mb-2">Posisi: {{ $ad->positionLabel() }}</div>
                        <div class="small text-break">{{ $ad->link ?: 'Tanpa link tujuan' }}</div>
                    @else
                        <div class="rounded border bg-light-subtle p-4 text-center text-muted">
                            Preview gambar iklan akan tampil setelah data disimpan.
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection