@extends('layouts.customer')
@section('title','Refund Initiated')
@section('page-title','Refund Initiated')

@section('content')
<div style="max-width:520px;margin:40px auto">
<div class="card" style="text-align:center;padding:40px;box-shadow:0 10px 30px rgba(0,0,0,0.05);border:none;border-radius:16px;">
    <div style="width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#f7941d,#e8820a);color:#fff;font-size:36px;display:flex;align-items:center;justify-content:center;margin:0 auto 22px;animation:pop .5s ease;box-shadow:0 8px 20px rgba(247,148,29,0.3)">
        ↩
    </div>
    <style>
        @keyframes pop{0%{transform:scale(0)}80%{transform:scale(1.2)}100%{transform:scale(1)}}
        .theme-btn { transition: all 0.2s ease; }
        .theme-btn-primary:hover { box-shadow: 0 5px 15px rgba(247,148,29,0.3); transform: translateY(-2px); }
        .theme-btn-secondary:hover { background: #e2e2e2 !important; transform: translateY(-2px); }
    </style>

    <h2 style="color:#333;margin-bottom:8px">Refund Initiated!</h2>
    <p style="color:#888;font-size:14px;margin-bottom:24px">
        Your refund has been processed via Stripe and will appear on your original payment method.
    </p>

    @if($data['amount'])
    <div style="background:#fafafa;border:1px solid #eee;border-radius:14px;padding:18px;margin-bottom:22px;text-align:left">
        <div style="display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #eee;font-size:14px;color:#555">
            <span>Refund Amount</span>
            <strong style="color:#f7941d;font-size:18px">${{ number_format($data['amount'], 2) }} AUD</strong>
        </div>
        @if($data['card'])
        <div style="display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #eee;font-size:14px;color:#555">
            <span>Refunded To</span>
            <span style="font-weight:600;color:#333">{{ $data['card'] }}</span>
        </div>
        @endif
        @if($data['id'])
        <div style="display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #eee;font-size:14px;color:#555">
            <span>Stripe Refund ID</span>
            <span style="font-size:12px;color:#888;font-family:monospace">{{ $data['id'] }}</span>
        </div>
        @endif
        <div style="display:flex;justify-content:space-between;padding:9px 0;font-size:14px;color:#555">
            <span>Processing Time</span>
            <span style="font-weight:600;color:#333">3 – 5 business days</span>
        </div>
    </div>
    @endif

    <div style="background:#fff4e6;border-left:4px solid #f7941d;border-radius:8px;padding:14px;margin-bottom:22px;font-size:13px;color:#555;text-align:left">
        💡 <strong style="color:#d97706">Note:</strong> Stripe processes your refund automatically. Your credit balance has been set to <strong style="color:#333">$0.00</strong>.
        The money will appear on your card in 3–5 business days.
    </div>

    <div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;">
        <a href="{{ route('customer.dashboard') }}" class="theme-btn theme-btn-primary" style="padding:12px 18px;background:linear-gradient(135deg,#f7941d,#e8820a);color:#fff;border-radius:10px;text-decoration:none;font-weight:600;font-size:14px; display: flex; align-items: center;">
            📊 Go to Dashboard
        </a>
        <a href="{{ route('customer.payment-history') }}" class="theme-btn theme-btn-secondary" style="padding:12px 18px;background:#f0f0f0;color:#555;border-radius:10px;text-decoration:none;font-weight:600;font-size:14px; display: flex; align-items: center;">
            💳 Payment History
        </a>
    </div>
</div>
</div>
@endsection