@extends('admin::layouts.admin')

@section('title', 'Detail Academy')

@section('content')
<div class="academy-detail-page">
    {{-- Page Header --}}
    <div class="page-header-academy">
        <h1 class="page-title-academy">Detail Academy</h1>
        <div class="header-actions">
            <a href="{{ route('admin.academy.index') }}" class="btn-back">
                <i class="fas fa-arrow-left"></i>
                Kembali
            </a>
            <a href="{{ route('admin.academy.edit', $academy->id ?? 1) }}" class="btn-edit">
                <i class="fas fa-edit"></i>
                Edit Data
            </a>
        </div>
    </div>

    {{-- Detail Card --}}
    <div class="academy-detail-card">
        {{-- Image Section --}}
        <div class="detail-image-section">
            <img src="{{ $academy->image ?? 'https://via.placeholder.com/800x400/1a1730/8b5cf6?text=Academy+Image' }}" alt="{{ $academy->title ?? 'Academy' }}" class="detail-image">
        </div>

        {{-- Info Section --}}
        <div class="detail-info-section">
            <div class="detail-group">
                <label class="detail-label">Judul Academy</label>
                <p class="detail-value">{{ $academy->title ?? 'Fase Solusi AsetQu V.2 Untuk Bisnis Anda' }}</p>
            </div>

            <div class="detail-group">
                <label class="detail-label">Deskripsi</label>
                <p class="detail-value description">{{ $academy->description ?? 'Keunggulan Utama AsetQu V.2 Adalah Menghilangkan Perantara Dalam Proses Penggalangan Modal Dan Menciptakan Hubungan Langsung Antara Perusahaan Dan Investor. Dengan Tokenisasi, Setiap Investor Dapat Membeli Token Yang Mewakili Kepemilikan Dalam Proyek Tertentu.' }}</p>
            </div>

            @if(isset($academy->video_url) && $academy->video_url)
            <div class="detail-group">
                <label class="detail-label">Link Video</label>
                <a href="{{ $academy->video_url }}" target="_blank" class="detail-link">{{ $academy->video_url }}</a>
            </div>
            @endif

            <div class="detail-group">
                <label class="detail-label">Status</label>
                <span class="status-badge {{ ($academy->status ?? 'active') == 'active' ? 'active' : 'inactive' }}">
                    {{ ($academy->status ?? 'active') == 'active' ? 'Aktif' : 'Tidak Aktif' }}
                </span>
            </div>

            <div class="detail-group">
                <label class="detail-label">Tanggal Dibuat</label>
                <p class="detail-value">{{ $academy->created_at ?? now()->format('d F Y, H:i') }}</p>
            </div>
        </div>
    </div>
</div>

<style>
/* Academy Detail Page */
.academy-detail-page {
    max-width: 1400px;
}

/* Page Header */
.page-header-academy {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.page-title-academy {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--purple-primary);
    margin: 0;
}

.header-actions {
    display: flex;
    gap: 12px;
}

.btn-back {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: transparent;
    border: 2px solid var(--purple-primary);
    border-radius: 25px;
    color: var(--purple-primary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-back:hover {
    background: rgba(139, 92, 246, 0.1);
    color: var(--purple-primary);
}

.btn-edit {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-edit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
    color: white;
}

/* Detail Card */
.academy-detail-card {
    background: rgba(26, 23, 48, 0.6);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(139, 92, 246, 0.15);
}

/* Image Section */
.detail-image-section {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.detail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Info Section */
.detail-info-section {
    padding: 32px;
}

.detail-group {
    margin-bottom: 24px;
}

.detail-group:last-child {
    margin-bottom: 0;
}

.detail-label {
    display: block;
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value {
    font-size: 1rem;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.6;
}

.detail-value.description {
    color: var(--text-secondary);
}

.detail-link {
    color: var(--cyan-primary);
    text-decoration: none;
    transition: all 0.3s ease;
}

.detail-link:hover {
    color: var(--purple-primary);
    text-decoration: underline;
}

/* Status Badge */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-badge.active {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.status-badge.inactive {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* Responsive */
@media (max-width: 768px) {
    .page-header-academy {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .header-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .detail-image-section {
        height: 200px;
    }
}
</style>
@endsection