@extends('layouts.customer')
@section('title','Refund - Customer Panel')
@section('page-title','Refund Funds')

@section('styles')
<style>
:root{
    --primary-1:#f7941d;
    --primary-2:#e8820a;
    --muted:#6b7280;
    --card-bg:#ffffff;
    --page-bg:#f5f7fb;
    --success:#16a34a;
    --danger:#dc2626;
    font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial;
}
.refund-wrap{max-width:880px;margin:0 auto}
.card-r{background:var(--card-bg);border-radius:12px;box-shadow:0 8px 30px rgba(20,24,40,0.06);overflow:hidden}
.card-header-r{display:flex;align-items:center;justify-content:space-between;padding:22px 28px;background:linear-gradient(90deg,var(--primary-1),var(--primary-2));color:#fff}
.card-header-r h1{font-size:20px;margin:0;font-weight:700}
.card-header-r .hdr-small{color:rgba(255,255,255,0.95);font-weight:500;font-size:14px}
.card-body-r{padding:28px}

/* Balance box */
.balance-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.balance-box{background:linear-gradient(135deg,var(--primary-1),var(--primary-2));padding:22px;border-radius:12px;box-shadow:0 12px 40px rgba(247,148,29,0.18);min-width:260px;color:#fff}
.balance-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.balance-label{color:rgba(255,255,255,.85);font-size:13px;font-weight:600}
.balance-change{font-size:13px;color:rgba(255,255,255,.9)}
.balance-main{display:flex;align-items:center;gap:12px}
.balance-value{font-weight:800;font-size:34px;color:#fff}
.balance-currency{font-size:12px;color:rgba(255,255,255,.9);margin-top:4px}
.sparkline{width:120px;height:40px}
.sparkline svg{width:100%;height:100%}

/* Panel */
.panel{background:#fff;padding:16px;border-radius:10px;border:1px solid #f1f3f8;flex:1}
.panel h4{margin:0 0 8px;font-size:15px;color:#222}
.small-txt{font-size:13px;color:#111}

/* Form grid */
.withdraw-form{margin-top:18px;display:grid;grid-template-columns:1fr 400px;gap:20px}
.form-col{display:flex;flex-direction:column;gap:12px}

/* Buttons */
.actions{display:flex;gap:12px;margin-top:8px}
.btn-r{padding:10px 22px;border-radius:10px;border:none;cursor:pointer;font-weight:700;font-size:14px;transition:.2s}
.btn-primary-r{background:linear-gradient(90deg,var(--primary-1),var(--primary-2));color:#fff}
.btn-primary-r:hover{opacity:.9;transform:translateY(-1px)}
.btn-primary-r:disabled{opacity:.6;cursor:not-allowed;transform:none}
.btn-muted-r{background:#f3f4f6;color:#111;border:1px solid #e5e7eb;text-decoration:none;display:inline-block}
.btn-muted-r:hover{background:#e5e7eb}

.form-msg{margin-top:10px;font-size:14px}
.msg-success{color:var(--success);font-weight:700}
.msg-error{color:var(--danger);font-weight:700}
.fade-in{animation:fadeIn .28s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

@media(max-width:900px){.withdraw-form{grid-template-columns:1fr}}

/* Menu Style Buttons from Front Website */
.btn-menu-style {
    color: #fff !important;
    font-weight: 700;
    text-align: center;
    padding: 12px 22px;
    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);
}
.btn-menu-style:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.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 class="refund-wrap">
<div class="card-r">

    {{-- Header --}}
    <div class="card-header-r">
        <h1>Refund Funds</h1>
        <div class="hdr-small">Secure Refund — processed within 3 business days</div>
    </div>

    <div class="card-body-r">

        {{-- Balance Row --}}
        <div class="balance-row">
            {{-- Balance Box with sparkline --}}
            <div class="balance-box">
                <div class="balance-meta">
                    <div class="balance-label">Available Credit Balance</div>
                    <div class="balance-change">+ $0.00 this week</div>
                </div>
                <div class="balance-main">
                    <div class="balance-value">${{ number_format($user->credit_balance, 2) }}</div>
                    <div class="sparkline" aria-hidden="true">
                        <svg viewBox="0 0 120 40" preserveAspectRatio="none">
                            <path d="M2 30 L20 26 L40 18 L60 16 L80 14 L100 10 L118 8"
                                  fill="none" stroke="rgba(255,255,255,0.95)"
                                  stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                </div>
                <div class="balance-currency">AUD</div>
            </div>

            {{-- Refund Guidelines panel --}}
            <div class="panel">
                <h4>Refund Guidelines</h4>
                <p class="small-txt">Refund might take up to 3 business days to complete.</p>
            </div>
        </div>

        {{-- Form grid --}}
        <div class="withdraw-form">
            {{-- Left col --}}
            <div class="form-col">
                <div>
                    <p class="small-txt">Your prepaid credit will be refunded back to payment means used.</p>
                </div>

                @if(session('error'))
                    <div class="form-msg fade-in"><span class="msg-error">{{ session('error') }}</span></div>
                @endif

                @if($user->credit_balance > 0)
                <form method="POST" action="{{ route('customer.withdrawal.request') }}"
                      id="withdrawForm" onsubmit="return confirmRefund(event)">
                    @csrf
                    <div class="actions">
                        <a href="{{ route('customer.dashboard') }}" class="btn-r btn-muted-r">Cancel</a>
                        <button type="submit" id="submitBtn" class="btn-menu-style c-gallery">Confirm Refund</button>
                    </div>
                    <div id="formMessage" class="form-msg"></div>
                </form>
                @else
                <div class="actions">
                    <a href="{{ route('customer.dashboard') }}" class="btn-r btn-muted-r">Cancel</a>
                    <button class="btn-menu-style c-gallery" disabled>Confirm Refund</button>
                </div>
                <div class="form-msg fade-in">
                    <span class="msg-error">You have no available balance to refund.</span>
                </div>
                @endif
            </div>

            {{-- Right col --}}
            <div class="form-col">
                <div class="panel">
                    <h4>Need help?</h4>
                    <p class="small-txt">
                        If you have questions about Refunds, contact our support at
                        <a href="tel:0477390650" style="color:var(--primary-1)">0477 390 650</a>
                        or <a href="{{ route('contact') }}" style="color:var(--primary-1)">Contact Us</a>.
                    </p>
                </div>
            </div>
        </div>

    </div>
</div>
</div>
@endsection

@section('scripts')
<script>
function confirmRefund(e) {
    const balance = '{{ number_format($user->credit_balance, 2) }}';
    if (!confirm('Refund your full balance of $' + balance + '?\n\nThis will return funds to your original payment card.\nProcessing time: 3 business days.')) {
        e.preventDefault();
        return false;
    }
    document.getElementById('submitBtn').disabled = true;
    document.getElementById('submitBtn').textContent = 'Processing…';
    document.getElementById('formMessage').innerHTML =
        '<span class="msg-success fade-in">Refund request submitted. Please wait…</span>';
    return true;
}
</script>
@endsection