@extends('layouts.vpm-mobile-app', ['active' => 'withdrawals'])

@section('title', 'Withdrawals')

@section('content')
<div class="vpm-withdrawals">
    <h2 class="vpm-withdrawals__title">Withdrawals</h2>

    <p class="vpm-withdrawals__desc">
        Withdrawals will be pending until all agreements and requirements are met, processed, and finalized.
    </p>

    @if ($card)
        <div class="vpm-withdrawals__card-panel">
            @include('partials.vpm.debit-card-flip', ['card' => $card, 'currency' => $currency])

            <div class="vpm-withdrawals__balance">
                <p>Card balance</p>
                <p class="vpm-withdrawals__balance-value">{{ $card->formattedBalanceWithSymbol() }}</p>
            </div>

            <div class="vpm-withdrawals__actions">
                <button
                    type="button"
                    class="vpm-withdrawals__action"
                    data-vpm-dialog-open="debit-card-topup-dialog"
                    @disabled($card->isFrozen())
                >
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                        <path d="M5 12h14"/><path d="M12 5v14"/>
                    </svg>
                    <span>Top up</span>
                </button>

                <a href="{{ route('app.withdrawals.select') }}" class="vpm-withdrawals__action">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                        <path d="m7 7 10 10"/><path d="M17 7v10H7"/>
                    </svg>
                    <span>Withdraw</span>
                </a>

                <button type="button" class="vpm-withdrawals__action" data-vpm-flip-card-toggle aria-pressed="false">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                        <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/>
                        <circle cx="12" cy="12" r="3"/>
                    </svg>
                    <span>Show</span>
                </button>

                <button
                    type="button"
                    class="vpm-withdrawals__action"
                    data-vpm-dialog-open="debit-card-freeze-dialog"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                        <path d="m10 20-1.25-2.5L6 18"/><path d="M10 4 8.75 6.5 6 6"/>
                        <path d="m14 20 1.25-2.5L18 18"/><path d="m14 4 1.25 2.5L18 6"/>
                        <path d="m17 21-3-6h-4"/><path d="m17 3-3 6 1.5 3"/>
                        <path d="M2 12h6.5L10 9"/><path d="m20 10-1.5 2 1.5 2"/>
                        <path d="M22 12h-6.5L14 15"/><path d="m4 10 1.5 2L4 14"/>
                        <path d="m7 21 3-6-1.5-3"/><path d="m7 3 3 6h4"/>
                    </svg>
                    <span>{{ $card->isFrozen() ? 'Unfreeze' : 'Freeze' }}</span>
                </button>

                <button type="button" class="vpm-withdrawals__action" data-vpm-dialog-open="debit-card-delete-dialog">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                        <path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/>
                        <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>
                    </svg>
                    <span>Delete</span>
                </button>
            </div>
        </div>

        <x-vpm.debit-card-topup-dialog
            :topup-sources="$topupSources"
            :currency="$currency"
            :topup-min="$topupMin"
            :remaining-topup="$remainingTopup"
            :card-frozen="$card->isFrozen()"
        />
        <x-vpm.debit-card-freeze-dialog :card="$card" :frozen="$card->isFrozen()" />
        <x-vpm.debit-card-delete-dialog />
    @else
        <button
            type="button"
            class="vpm-btn vpm-btn--primary vpm-withdrawals__cta"
            data-vpm-withdraw-cta
            data-vpm-withdraw-action="{{ $withdrawAction }}"
            data-vpm-withdraw-url="{{ $withdrawFormUrl }}"
            data-vpm-cards-url="{{ $cardsUrl }}"
            data-vpm-verify-url="{{ $verifyUrl }}"
            @if ($withdrawAction === 'disabled') disabled @endif
        >
            Make a withdrawal
        </button>
    @endif

    @if ($hasWithdrawals)
        <ul class="vpm-withdrawals__list">
            @foreach ($withdrawals as $withdrawal)
                <li class="vpm-withdrawals__item">
                    <div class="vpm-withdrawals__item-main">
                        <span class="vpm-withdrawals__item-ref">{{ $withdrawal->reference }}</span>
                        <span class="vpm-withdrawals__item-amount">
                            {{ number_format((float) $withdrawal->amount, 2) }} {{ $withdrawal->currency }}
                        </span>
                    </div>
                    <div class="vpm-withdrawals__item-meta">
                        <span class="vpm-withdrawals__item-status vpm-withdrawals__item-status--{{ $withdrawal->status }}">
                            {{ $withdrawal->statusLabel() }}
                        </span>
                        <span class="vpm-withdrawals__item-date">{{ $withdrawal->created_at->format('M j, Y') }}</span>
                    </div>
                </li>
            @endforeach
        </ul>
    @else
        <p class="vpm-withdrawals__empty">You have not made a withdrawal yet</p>
    @endif
</div>

@if ($errors->has('source') || $errors->has('amount'))
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const dialog = document.getElementById('debit-card-topup-dialog');
            if (dialog?.showModal) {
                dialog.showModal();
            }
        });
    </script>
@endif
@endsection