@extends('layouts.app-tenant')

@section('content')
<div class="container my-5">

    <!-- Judul -->
    <div class="text-center mb-5">
        <h2 class="fw-bold">Tema Undangan Anda</h2>
        <p class="text-muted">Pilih dan gunakan tema undangan yang sudah Anda beli</p>
    </div>

    <!-- Alert jika belum ada tema -->
    @if(empty($purchasedThemes))
        <div class="alert alert-warning d-flex align-items-center" role="alert">
            <i class="bi bi-exclamation-triangle-fill me-2"></i>
            <div>Anda belum membeli tema undangan.</div>
        </div>
    @else
        <div class="row g-4">
            @foreach($purchasedThemes as $themeId => $theme)
                <div class="col-md-4">
                    <div class="card h-100 shadow-sm border-0">
                        <!-- Preview Gambar -->
                        <div class="position-relative">
                            <img src="{{ $theme['preview'] ?? '' }}" class="card-img-top" alt="Theme Preview" style="height:220px;object-fit:cover;">
                            <span class="badge bg-success position-absolute top-0 end-0 m-2">
                                <i class="bi bi-check-circle"></i> Aktif
                            </span>
                        </div>

                        <!-- Body Card -->
                        <div class="card-body text-center">
                            <h5 class="card-title fw-bold">{{ $theme['name'] ?? 'Tanpa Nama' }}</h5>
                            <p class="text-muted small mb-3">Tema undangan pilihan Anda</p>
                            <a href="{{ route('tenant.themes.show', $themeId) }}" class="btn btn-primary btn-sm px-3">
                                <i class="bi bi-brush"></i> Gunakan Tema
                            </a>
                        </div>

                        <!-- Footer Card -->
                        <div class="card-footer bg-light text-center">
                            <button class="btn btn-outline-secondary btn-sm">
                                <i class="bi bi-eye"></i> Preview
                            </button>
                            <button class="btn btn-outline-danger btn-sm">
                                <i class="bi bi-trash"></i> Hapus
                            </button>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>
@endsection