@extends('frontend.layout_2')

@section('sub_layout')

    <style>
        :root {
            --primary:#DC3431;
            --primary-soft:#fee2e2;
            --bg:#f3f4f6;
            --text-main:#111827;
            --text-muted:#6b7280;
        }

        * { box-sizing:border-box;margin:0;padding:0; }

        body {
            font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
            background:var(--bg);
        }

        .page {
            max-width:800px;
            margin:40px auto 120px;
            padding:0 12px;
        }

        .card {
            background:#ffffff;
            border-radius:22px;
            padding:28px 22px 24px;
            box-shadow:0 18px 40px rgba(15,23,42,.14);
            border:1px solid #e5e7eb;
            text-align:center;
            position:relative;
            overflow:hidden;
        }
        .card::after{
            content:"";
            position:absolute;
            inset:auto -60px -60px auto;
            width:140px;
            height:140px;
            background:radial-gradient(circle at center,rgba(220,52,49,.16),transparent 65%);
        }

        .icon-wrap {
            width:78px;
            height:78px;
            border-radius:999px;
            background:var(--primary-soft);
            display:flex;
            align-items:center;
            justify-content:center;
            margin:0 auto 16px;
            box-shadow:0 14px 30px rgba(220,38,38,.45);
        }
        .icon-wrap i{
            font-size:38px;
            color:var(--primary);
        }

        .title {
            font-size:22px;
            font-weight:700;
            color:var(--text-main);
            margin-bottom:4px;
        }

        .subtitle {
            font-size:13px;
            color:var(--text-muted);
            max-width:380px;
            margin:0 auto 18px;
        }

        .badge {
            display:inline-flex;
            align-items:center;
            gap:6px;
            border-radius:999px;
            padding:4px 12px;
            font-size:11px;
            background:rgba(220,52,49,.06);
            color:#b91c1c;
            margin-bottom:10px;
        }
        .badge i{ font-size:13px; }

        .summary {
            margin:20px auto 0;
            max-width:460px;
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:12px 18px;
            text-align:left;
        }

        .summary-item-label {
            font-size:11px;
            text-transform:uppercase;
            letter-spacing:.09em;
            color:#9ca3af;
        }
        .summary-item-value {
            font-size:14px;
            font-weight:600;
            color:#111827;
        }

        .divider {
            height:1px;
            background:#e5e7eb;
            margin:20px auto 18px;
            max-width:460px;
        }

        .btn-row {
            display:flex;
            flex-wrap:wrap;
            justify-content:center;
            gap:10px;
            margin-top:4px;
        }

        .btn {
            border:none;
            border-radius:999px;
            padding:10px 18px;
            font-size:14px;
            cursor:pointer;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:6px;
            transition:all .16s ease;
            text-decoration:none;
        }
        .btn i{ font-size:16px; }

        .btn-primary {
            background:linear-gradient(135deg,#f97373,#DC3431);
            color:#fff;
            box-shadow:0 12px 28px rgba(220,38,38,.45);
        }
        .btn-primary:hover {
            transform:translateY(-1px);
            box-shadow:0 16px 34px rgba(185,28,28,.55);
        }

        .btn-secondary {
            background:#f9fafb;
            color:#374151;
            border:1px solid #e5e7eb;
        }
        .btn-secondary:hover { background:#e5e7eb; }

        .info-text {
            margin-top:10px;
            font-size:11px;
            color:#9ca3af;
        }

        @media (max-width:640px){
            .page { margin-top:26px; }
            .card { padding:22px 16px 20px; }
            .summary { grid-template-columns:1fr; }
        }
    </style>

    <div class="page">
        <div class="card">
            {{-- success icon --}}
            <div class="icon-wrap">
                <i class="bi bi-check-circle-fill"></i>
            </div>

            {{-- status badge --}}
            <div class="badge">
                <i class="bi bi-clock-history"></i>
                <span>Pending admin approval</span>
            </div>

            <h1 class="title">Withdraw request submitted!</h1>
            <p class="subtitle">
                আপনার উইথড্র রিকুয়েস্ট সফলভাবে সাবমিট হয়েছে। এডমিন approve করার পর টাকাটি আপনার একাউন্টে চলে যাবে।
            </p>

            {{-- summary grid --}}
            <div class="summary">
                {{-- Amount --}}
                <div>
                    <div class="summary-item-label">Amount</div>
                    <div class="summary-item-value">
                        {{ number_format($withdraw->amount, 2) }} BDT
                    </div>
                </div>

                {{-- Method (Mobile / Bank) --}}
                <div>
                    <div class="summary-item-label">Method</div>
                    <div class="summary-item-value">
                        {{ $methodType === 'bank' ? 'Bank · ' : 'Mobile · ' }} {{ $methodLabel }}
                    </div>
                </div>

                {{-- Account + (holder, branch for bank) --}}
                <div>
                    <div class="summary-item-label">Account</div>
                    <div class="summary-item-value">
                        {{ $withdraw->account_number }}
                    </div>

                    @if($methodType === 'bank')
                        @if($withdraw->account_holder)
                            <div class="summary-item-value"
                                 style="font-size:12px;margin-top:2px;color:#4b5563;font-weight:500;">
                                Account holder: {{ $withdraw->account_holder }}
                            </div>
                        @endif

                        @if($withdraw->branch_name)
                            <div class="summary-item-value"
                                 style="font-size:12px;margin-top:2px;color:#4b5563;font-weight:500;">
                                Branch: {{ $withdraw->branch_name }}
                            </div>
                        @endif
                    @endif
                </div>

                {{-- Current balance --}}
                <div>
                    <div class="summary-item-label">Current Balance</div>
                    <div class="summary-item-value">
                        {{ number_format($availableBalance, 2) }} BDT
                    </div>
                </div>
            </div>

            <div class="divider"></div>

            {{-- buttons --}}
            <div class="btn-row">
                <a href="{{ route('transactions') }}" class="btn btn-primary">
                    <i class="bi bi-credit-card"></i>
                    <span>View transactions</span>
                </a>

                <a href="{{ route('withdraw.create') }}" class="btn btn-secondary">
                    <i class="bi bi-arrow-left"></i>
                    <span>Back to wallet</span>
                </a>
            </div>

            <div class="info-text">
                সাধারণত ২৪ ঘন্টার মধ্যে রিকুয়েস্ট প্রসেস করা হয়। কোনো সমস্যা হলে সাপোর্টে যোগাযোগ করুন।
            </div>
        </div>
    </div>
@endsection