@extends('template.basic.layouts.wallet_base')

@section('content_detail')
<div x-data="withdrawalModal()" class="withdraw-form flex justify-center lg:justify-start">
    <div class="px-6 my-6 w-full max-w-2xl">
        <div class="flex flex-col items-center">

            <!-- Withdrawal Amount -->
            <div class="mt-4 text-center">
                <div class="text-lg font-semibold text-white">Withdrawal Amount</div>
                <div class="mt-2 text-2xl font-bold text-white">
                    -{{ coin_format($transaction->amount, $transaction->coin?->digits) }} {{ $transaction->coin?->symbol }}
                </div>
                <p class="mt-1 text-xs text-yellow-500">
                    {!! get_transaction_icon_status($transaction->status) !!}
                </p>
            </div>

            <!-- Info Text -->
            <div class="mt-2 text-center text-xs text-gray-400">
                Crypto transferred out of {{ system_settings('site_name') }}. Please contact the recipient platform for your transaction receipt
            </div>

            <!-- Transaction Details -->
            <div class="mt-6 w-full">
                <div class="flex flex-col space-y-2">

                    <!-- Network -->
                    <div class="flex justify-between items-center px-3 py-2  rounded text-white">
                        <span>Network</span>
                        <span>{{ data_get($transaction->config, 'networkName') }}</span>
                    </div>

                    <!-- Address -->
                    <div class="flex justify-between items-start px-3 py-2  rounded text-white break-all">
                        <span>Address</span>
                        <div class="flex items-center gap-2">
                            <span>{{ $transaction->address }}</span>
                            <button @click="copyToClipboard('{{ $transaction->address }}')"
                                    class="w-4 h-4 text-gray-400 hover:text-white">
                                <svg viewBox="0 0 24 24" fill="currentColor">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M9 3h11v13h-3V6H9V3zM4 8v13h11V8.02L4 8z"/>
                                </svg>
                            </button>
                        </div>
                    </div>

                    <!-- TxID -->
                    <div class="flex justify-between items-start px-3 py-2  rounded text-white break-all">
                        <span>TxID</span>
                        <div class="flex items-center gap-2">
                            <span>{{ $transaction->transactionID }}</span>
                            @if(!blank($transaction->transactionID))
                            <button @click="copyToClipboard('{{ $transaction->transactionID }}')"
                                    class="w-4 h-4 text-gray-400 hover:text-white">
                                <svg viewBox="0 0 24 24" fill="currentColor">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M9 3h11v13h-3V6H9V3zM4 8v13h11V8.02L4 8z"/>
                                </svg>
                            </button>
                            @endif
                        </div>
                    </div>

                    <!-- Amount -->
                    <div class="flex justify-between items-center px-3 py-2  rounded text-white">
                        <span>Amount</span>
                        <span>{{ coin_format($transaction->amount + $transaction->fee, $transaction->coin?->digits) }} {{ $transaction->coin?->symbol }}</span>
                    </div>

                    <!-- Network Fee -->
                    <div class="flex justify-between items-center px-3 py-2  rounded text-white">
                        <span>Network Fee</span>
                        <span>{{ $transaction->fee }} {{ $transaction->coin?->symbol }}</span>
                    </div>

                    <!-- Wallet -->
                    <div class="flex justify-between items-center px-3 py-2  rounded text-white">
                        <span>Wallet</span>
                        <span>DeFi Wallet</span>
                    </div>

                    <!-- Date -->
                    <div class="flex justify-between items-center px-3 py-2  rounded text-white">
                        <span>Date</span>
                        <span>{{ $transaction->created_at }}</span>
                    </div>

                </div>
            </div>

            <!-- OK Button -->
            <a href="{{ route('user.wallet.history', [$transaction->coin?->symbol, 'send']) }}"
               class="mt-6 w-full py-2 text-center bg-primary-gradient text-dark font-semibold rounded hover:bg-beige">
                OK
            </a>

           

        </div>
    </div>
</div>



@endsection

@push('javascript')
    <script>
    function withdrawalModal() {
        return {
            showToast: false,
            copyToClipboard(value) {
                navigator.clipboard.writeText(value).then(() => {
                    fireNotification({ 'success', 'Copied to Clipboard' });
                });
            }
        }
    }
</script>
@endpush