@php
    $minimum = (float) config('earning.withdrawal.minimum');
    $fee = (float) config('earning.withdrawal.fee');
    $available = (float) $wallet->available_balance;
    $canWithdraw = $available >= $minimum && ! $hasOpenRequest && $hasActivePackage;
@endphp

<x-layouts.app title="টাকা উত্তোলন">
    <h1 class="text-xl font-bold">টাকা উত্তোলন</h1>
    <p class="mt-1 text-sm text-ink-muted">উত্তোলনের অনুরোধ জমা দিন</p>

    @error('package')
        <div class="mt-4 rounded-xl border border-danger/40 bg-danger/10 px-4 py-3 text-sm leading-relaxed text-danger" role="alert">
            {{ $message }}
        </div>
    @enderror

    <section class="card mt-4 space-y-2.5 text-sm" aria-labelledby="withdrawal-info">
        <h2 id="withdrawal-info" class="text-sm font-semibold text-ink-muted">নিয়মাবলি</h2>
        <div class="flex items-center justify-between gap-3">
            <span class="text-ink-muted">উত্তোলনযোগ্য ব্যালেন্স</span>
            <span class="font-bold text-gold">৳ {{ number_format($available, 2) }}</span>
        </div>
        <div class="flex items-center justify-between gap-3">
            <span class="text-ink-muted">সর্বনিম্ন উত্তোলন</span>
            <span class="font-semibold">৳ {{ number_format($minimum, 2) }}</span>
        </div>
        <div class="flex items-center justify-between gap-3">
            <span class="text-ink-muted">প্রসেসিং ফি</span>
            <span class="font-semibold">৳ {{ number_format($fee, 2) }}</span>
        </div>
        <div class="flex items-start justify-between gap-3">
            <span class="shrink-0 text-ink-muted">প্রসেসিং সময়</span>
            <span class="text-right font-semibold">{{ $processingTime }}</span>
        </div>
    </section>

    @if ($hasOpenRequest)
        <div class="mt-4 flex items-start gap-3 rounded-xl border border-info/50 bg-info/10 p-4" role="alert">
            <x-icon name="clock" class="mt-0.5 h-5 w-5 shrink-0 text-info"/>
            <p class="text-sm leading-relaxed">
                আপনার একটি উত্তোলনের অনুরোধ এখনো প্রসেস হচ্ছে। সেটি সম্পন্ন হওয়ার পর নতুন অনুরোধ করতে পারবেন।
            </p>
        </div>
    @endif

    @if (! $hasActivePackage)
        <div class="mt-4 rounded-xl border border-gold-deep/60 bg-gold/10 p-4" role="alert">
            <div class="flex items-start gap-3">
                <x-icon name="package" class="mt-0.5 h-5 w-5 shrink-0 text-gold"/>
                <div>
                    <p class="font-semibold text-gold">প্যাকেজ ছাড়া উত্তোলন করা যাবে না</p>
                    <p class="mt-1 text-sm leading-relaxed text-ink-muted">
                        উত্তোলনের জন্য প্রথমে একটি প্যাকেজ কিনতে হবে। প্যাকেজ কিনলে ২০ দিন পর্যন্ত প্রতিদিন আয় পাবেন।
                    </p>
                </div>
            </div>
            <a href="{{ route('packages.index') }}" class="btn-primary mt-3">প্যাকেজ কিনুন</a>
        </div>
    @endif

    <form method="POST" action="{{ route('withdrawals.store') }}" class="card mt-4 space-y-4" novalidate>
        @csrf

        <div>
            <label for="amount" class="field-label">পরিমাণ (৳)</label>
            <input id="amount" type="number" name="amount" value="{{ old('amount') }}" required min="{{ $minimum }}" step="0.01" inputmode="decimal" class="field-input" placeholder="{{ number_format($minimum, 2) }}" {{ $canWithdraw ? '' : 'disabled' }}>
            <x-field-error name="amount"/>
        </div>

        <div>
            <label for="method" class="field-label">পেমেন্ট মাধ্যম</label>
            <select id="method" name="method" required class="field-input {{ old('method') ? '' : 'text-ink-muted' }}" {{ $canWithdraw ? '' : 'disabled' }}>
                <option value="" disabled {{ old('method') ? '' : 'selected' }}>নির্বাচন করুন</option>
                @foreach ($methods as $value => $label)
                    <option value="{{ $value }}" {{ old('method') === $value ? 'selected' : '' }}>{{ $label }}</option>
                @endforeach
            </select>
            <x-field-error name="method"/>
        </div>

        <div>
            <label for="account_number" class="field-label">অ্যাকাউন্ট নম্বর</label>
            <input id="account_number" type="text" name="account_number" value="{{ old('account_number') }}" required maxlength="30" autocomplete="off" class="field-input" placeholder="যেমন: 01712345678" {{ $canWithdraw ? '' : 'disabled' }}>
            <x-field-error name="account_number"/>
        </div>

        <p class="rounded-xl border border-line bg-surface-raised px-4 py-3 text-xs leading-relaxed text-ink-muted">
            অনুরোধ জমা দেওয়ার পর টাকা পাঠানোর আগে সার্ভার আপনার অনুরোধ যাচাই করবে। ফি ৳ {{ number_format($fee, 2) }} কাটা হবে।
            উত্তোলন সফল হওয়ার আগে ব্যালেন্স থেকে পরিমাণটি আটকে রাখা হবে।
        </p>

        <button type="submit" class="btn-primary" {{ $canWithdraw ? '' : 'disabled' }}>
            উত্তোলনের অনুরোধ জমা দিন
        </button>

        @if (! $canWithdraw && ! $hasOpenRequest && $hasActivePackage)
            <p class="text-center text-sm text-ink-muted" role="note">
                উত্তোলনের জন্য সর্বনিম্ন ৳ {{ number_format($minimum, 2) }} উত্তোলনযোগ্য ব্যালেন্স প্রয়োজন।
            </p>
        @endif
    </form>
</x-layouts.app>