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

@section('styles')
<style>
.refund-wrap{max-width:720px;margin:0 auto}
.balance-hero{background:linear-gradient(135deg,#f7941d 0%,#e8820a 100%);color:#fff;border-radius:20px;padding:30px;margin-bottom:22px;box-shadow:0 10px 30px rgba(247,148,29,.3)}
.balance-hero .lbl{font-size:13px;opacity:.85;margin-bottom:8px}
.balance-hero .big-amt{font-size:48px;font-weight:700}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:600px){.info-grid{grid-template-columns:1fr}}
.panel{background:#fff;border-radius:14px;padding:22px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.panel h3{font-size:16px;font-weight:700;color:#333;margin-bottom:12px}
.flow-step{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;font-size:13px}
.step-icon{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#f7941d,#e8820a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.step-text strong{display:block;color:#333;margin-bottom:2px}
.step-text span{color:#888}
.stripe-note{background:#f0f4ff;border:1px solid #c7d7f8;border-radius:10px;padding:13px 16px;font-size:13px;color:#1e3c72;margin-top:14px;display:flex;align-items:center;gap:10px}
.btn-confirm{padding:13px 28px;background:linear-gradient(135deg,#f7941d,#e8820a);color:#fff;border:none;border-radius:10px;cursor:pointer;font-size:15px;font-weight:600;transition:.2s}
.btn-confirm:hover{transform:translateY(-2px)}
.btn-cancel{padding:13px 20px;background:#f0f0f0;color:#555;border:none;border-radius:10px;cursor:pointer;font-size:14px;text-decoration:none;display:inline-block}
.no-balance-box{background:#fff3cd;padding:14px;border-radius:10px;font-size:13px;color:#856404;margin-top:14px}
</style>
@endsection

@section('content')
<div class="refund-wrap">

    <div class="balance-hero">
        <div class="lbl">Your Current Credit Balance</div>
        <div class="big-amt">${{ number_format($user->credit_balance, 2) }} <span style="font-size:18px">AUD</span></div>
        <div style="font-size:13px;opacity:.8;margin-top:6px">Available for refund back to your original payment method</div>
    </div>

    <div class="info-grid">
        <div class="panel">
            <h3>🔄 Request Refund</h3>
            <p style="font-size:13px;color:#666;margin-bottom:14px">
                Your full credit balance will be refunded to your original payment card via Stripe.
                No card details required — Stripe handles this automatically.
            </p>

            <div class="flow-step">
                <div class="step-icon">1</div>
                <div class="step-text">
                    <strong>Confirm Refund</strong>
                    <span>Amount: ${{ number_format($user->credit_balance, 2) }} AUD</span>
                </div>
            </div>
            <div class="flow-step">
                <div class="step-icon">2</div>
                <div class="step-text">
                    <strong>Stripe Processes Automatically</strong>
                    <span>Refunded to:
                        @if($refundablePayment && $refundablePayment->card_last4)
                            {{ ucfirst($refundablePayment->card_brand) }} •••• {{ $refundablePayment->card_last4 }}
                        @else
                            Original payment card
                        @endif
                    </span>
                </div>
            </div>
            <div class="flow-step">
                <div class="step-icon">3</div>
                <div class="step-text">
                    <strong>Money Arrives in 3–5 Days</strong>
                    <span>Your credit balance becomes $0.00</span>
                </div>
            </div>

            <div class="stripe-note">
                🔒 Refund is processed securely by <strong>Stripe</strong>. No card details required from you.
            </div>

            @if($user->credit_balance > 0)
            <div style="margin-top:18px;border-top:1px solid #f0f0f0;padding-top:16px">
                <form method="POST" action="{{ route('customer.withdrawal.request') }}"
                      onsubmit="return confirm('Confirm refund of ${{ number_format($user->credit_balance,2) }} AUD?\n\nThis will:\n• Return funds to your original card\n• Set your credit balance to $0.00')">
                    @csrf
                    <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap">
                        <a href="{{ route('customer.dashboard') }}" class="btn-cancel">Cancel</a>
                        <button type="submit" class="btn-confirm">
                            💳 Confirm Refund — ${{ number_format($user->credit_balance, 2) }}
                        </button>
                    </div>
                </form>
            </div>
            @else
            <div class="no-balance-box">⚠️ You have no available balance to refund.</div>
            @endif
        </div>

        <div class="panel">
            <h3>📋 Refund Policy</h3>
            <div style="font-size:13px;color:#666;line-height:1.8">
                <p>✅ Full refund available for unused credit balance.</p>
                <p>⏰ Processing time: 3–5 business days.</p>
                <p>💳 Refund goes to your original payment card.</p>
                <p>❌ Partially used credit — only remaining balance refundable.</p>
                <p>🔒 Stripe securely handles all refund processing.</p>
                <br>
                <p>📞 Questions? Call <a href="tel:0477390650" style="color:#f7941d;font-weight:600">0477 390 650</a></p>
            </div>
        </div>
    </div>
</div>
@endsection