@extends('layouts.customer')
@section('title','Donation Successful')
@section('page-title','Donation Successful')

@section('styles')
<style>
/* Menu Style Buttons from Front Website */
.btn-menu-style {
    color: #fff !important;
    font-weight: 700;
    text-align: center;
    padding: 12px 24px;
    border-radius: 8px;
    letter-spacing: .6px;
    font-size: 14px;
    display: inline-block;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .25s ease;
    border: none;
    cursor: pointer;
}
.btn-menu-style:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}
.c-home { background: #07b8a3 !important; border-bottom: 4px solid #089a89 !important; }
.c-about { background: #81c66b !important; border-bottom: 4px solid #67a055 !important; }
.c-services { background: #ff7528 !important; border-bottom: 4px solid #d9a810 !important; }
.c-gallery { background: #11A2D9 !important; border-bottom: 4px solid #0c8bbb !important; }
.c-contact { background: #de2779 !important; border-bottom: 4px solid #af1b5d !important; }

/* Logout Button Styling in Sidebar */
.sidebar a[href*="logout"],
.sidebar form[action*="logout"] button,
.sidebar .logout-btn,
.sidebar .btn-logout,
.main-sidebar a[href*="logout"],
.main-sidebar form[action*="logout"] button,
.sidebar-wrapper a[href*="logout"] {
    color: #fff !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    letter-spacing: .6px !important;
    font-size: 14px !important;
    display: block !important;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .25s ease !important;
    border: none !important;
    cursor: pointer !important;
    background: #de2779 !important;
    width: 100% !important;
    margin-top: 10px !important;
}
.sidebar a[href*="logout"]:hover,
.sidebar form[action*="logout"] button:hover,
.sidebar .logout-btn:hover,
.sidebar .btn-logout:hover,
.main-sidebar a[href*="logout"]:hover,
.main-sidebar form[action*="logout"] button:hover,
.sidebar-wrapper a[href*="logout"]:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15) !important;
    color: #fff !important;
    background: #de2779 !important;
}

/* Top Navbar Profile Color */
.navbar .nav-link, .navbar .dropdown-toggle, .navbar .user-name, header .user-name, .navbar .profile-text {
    color: #f7941d !important;
}

/* Sidebar Logo Image */
.logo-text, .sidebar .logo-text, .main-sidebar .logo-text {
    color: transparent !important;
    text-indent: -9999px !important;
    background-image: url('{{ asset("images/logo.png") }}') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 100% !important;
    height: 65px !important;
    display: block !important;
    margin: 10px 0 !important;
    overflow: hidden !important;
}

/* Sidebar Theme override */
.main-sidebar, .sidebar, aside, .sidebar-wrapper {
    background: #1d1d1d !important;
}
.sidebar .nav-link, .sidebar a {
    color: #fff !important;
}
.sidebar .nav-link:hover, .sidebar a:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #07b8a3 !important;
}
.sidebar .nav-item .nav-link.active, .sidebar .active > a {
    background: linear-gradient(90deg, #81c66b 0%, #07b8a3 25%, #ff7528 70%, #de2779 100%) !important;
    color: #fff !important;
    border-radius: 6px;
}
</style>
@endsection

@section('content')
<div style="max-width:520px;margin:40px auto;text-align:center">
<div style="background:#fff;border-radius:20px;padding:36px;box-shadow:0 4px 20px rgba(0,0,0,.08)">
    <div style="width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;font-size:36px;display:flex;align-items:center;justify-content:center;margin:0 auto 22px">✓</div>
    <h2 style="color:#2d2d2d;margin-bottom:8px">Thank You! 🎉</h2>
    <p style="color:#888;font-size:14px;margin-bottom:18px">Your donation has been processed successfully.</p>

    @if($donation)
    <div style="background:#fff4eb;color:#e8820a;padding:8px 20px;border-radius:20px;font-size:14px;font-weight:700;display:inline-block;margin-bottom:16px">{{ $donation->donation_id }}</div>

    <div style="text-align:left;background:#f8f9fa;border-radius:12px;padding:16px;margin-bottom:16px">
        <div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #eee;font-size:14px">
            <span style="color:#888">Donation ID</span>
            <strong>{{ $donation->donation_id }}</strong>
        </div>
        <div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #eee;font-size:14px">
            <span style="color:#888">Amount</span>
            <strong>${{ number_format($donation->amount,2) }} AUD</strong>
        </div>
        <div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #eee;font-size:14px">
            <span style="color:#888">Type</span>
            <span>{{ ucfirst($donation->type) }}</span>
        </div>
        <div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #eee;font-size:14px">
            <span style="color:#888">Donor</span>
            <span>{{ $donation->anonymous ? 'Anonymous' : ($donation->donor_name ?? $donation->business_name ?? '—') }}</span>
        </div>
        <div style="display:flex;justify-content:space-between;padding:8px 0;font-size:14px">
            <span style="color:#888">Status</span>
            <span style="color:#22c55e;font-weight:700">✅ Paid</span>
        </div>
    </div>

    <div style="background:#fff8e1;border:1px solid #ffd700;border-radius:10px;padding:12px;font-size:13px;color:#856404;margin-bottom:20px;text-align:left">
        🏆 Your donation has been added to the Wall of Fame!
    </div>
    @endif

    <div style="display:flex;gap:10px;justify-content:center">
        <a href="{{ route('customer.dashboard') }}" class="btn-menu-style c-home">📊 Dashboard</a>
        <a href="{{ route('customer.payment-history') }}" class="btn-menu-style c-about">💳 History</a>
    </div>
</div>
</div>
@endsection