@extends('user.layout')

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

@push('head')
<style>
    .ach-detail-page {
        padding: 20px 14px 100px;
        background: #f6f9fc;
        min-height: 100vh;
    }

    .ach-detail-container {
        max-width: 800px;
        margin: 0 auto;
        background: #ffffff;
        border-radius: 20px;
        padding: 24px 20px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    }

    .ach-detail-header {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 20px;
        padding-bottom: 16px;
        border-bottom: 2px solid #f1f5f9;
    }

    .ach-detail-icon {
        font-size: 40px;
    }

    .ach-detail-title {
        font-size: 22px;
        font-weight: 900;
        margin: 0;
    }

    .ach-detail-sub {
        font-size: 13px;
        color: #64748b;
        margin: 2px 0 0;
    }

    .ach-detail-banner {
        width: 100%;
        border-radius: 14px;
        margin-bottom: 20px;
        border: 1px solid #e2e8f0;
        overflow: hidden;
        background: #f8fafc;
    }

    .ach-detail-banner img {
        width: 100%;
        height: auto;
        display: block;
    }

    .ach-detail-info {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 20px;
        padding: 16px;
        background: #f8fafc;
        border-radius: 12px;
    }

    .ach-detail-info-item {
        font-size: 13px;
    }

    .ach-detail-info-item .label {
        color: #64748b;
        font-weight: 600;
    }

    .ach-detail-info-item .value {
        font-weight: 800;
        color: #0f172a;
    }

    .ach-detail-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 8px;
    }

    .ach-detail-actions .btn {
        padding: 10px 24px;
        border-radius: 40px;
        font-weight: 700;
        font-size: 14px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .btn-primary-custom {
        background: #0759ff;
        color: #fff;
        border: none;
    }

    .btn-primary-custom:hover { background: #0045cc; color: #fff; }

    .btn-outline-custom {
        background: transparent;
        color: #0759ff;
        border: 2px solid #0759ff;
    }

    .btn-outline-custom:hover { background: #0759ff; color: #fff; }

    @media (max-width: 480px) {
        .ach-detail-info { grid-template-columns: 1fr; }
        .ach-detail-container { padding: 16px; }
    }
</style>
@endpush

@section('content')

<div class="ach-detail-page">
    <div class="ach-detail-container">
        <div class="ach-detail-header">
            <span class="ach-detail-icon">{{ config("ranks.levels.{$achievement->rank_level}.icon", '🏆') }}</span>
            <div>
                <h1 class="ach-detail-title">{{ $achievement->rank_name }}</h1>
                <p class="ach-detail-sub">অর্জিত: {{ $achievement->claimed_at->format('d M Y, h:i A') }}</p>
            </div>
        </div>

        @if($achievement->banner_image_url)
            <div class="ach-detail-banner">
                <img src="{{ $achievement->banner_image_url }}" alt="Banner" loading="lazy">
            </div>
        @else
            <div class="ach-detail-banner" style="padding:40px;text-align:center;color:#94a3b8;">
                <span style="font-size:32px;">🎨</span>
                <p>ব্যানার এখনও জেনারেট হয়নি</p>
            </div>
        @endif

        <div class="ach-detail-info">
            <div class="ach-detail-info-item">
                <div class="label">র‍্যাঙ্ক লেভেল</div>
                <div class="value">#{{ $achievement->rank_level }}</div>
            </div>
            <div class="ach-detail-info-item">
                <div class="label">বোনাস</div>
                <div class="value">৳{{ number_format($achievement->bonus_amount, 2) }}</div>
            </div>
            <div class="ach-detail-info-item">
                <div class="label">টাইপ</div>
                <div class="value">{{ $achievement->achievement_type === 'gifted' ? '🎁 উপহার' : '✅ অটো' }}</div>
            </div>
            <div class="ach-detail-info-item">
                <div class="label">নেটওয়ার্ক সাইজ</div>
                <div class="value">{{ number_format($achievement->network_size) }} জন</div>
            </div>
            @if($achievement->is_refunded)
                <div class="ach-detail-info-item" style="grid-column:1/-1;background:#fee2e2;padding:8px 12px;border-radius:8px;">
                    <div class="label" style="color:#b91c1c;">⚠️ রিফান্ড করা হয়েছে</div>
                    <div class="value" style="color:#b91c1c;font-size:13px;">কারণ: {{ $achievement->refund_reason }}</div>
                </div>
            @endif
        </div>

        <div class="ach-detail-actions">
            @if($achievement->banner_image_url)
                <a href="{{ route('user.rank.download-banner', $achievement->id) }}" class="btn btn-primary-custom">
                    <i class="fas fa-download"></i> ব্যানার ডাউনলোড
                </a>
            @endif
            <a href="{{ route('user.rank.dashboard') }}" class="btn btn-outline-custom">
                <i class="fas fa-arrow-left"></i> ড্যাশবোর্ডে ফিরুন
            </a>
        </div>
    </div>
</div>

@endsection