@extends('layouts.muladash')
@section('title', $title)
@section('content')



<x-danger-alert />
<x-success-alert />

<main class="container dark:bg-n0 text-n900 dark:text-white pt-8 min-h-dvh">
    <div class="px-6 flex justify-between items-center">
        <a href="javascript:history.back()" class="flex justify-center items-center bg-g300 w-12 h-12 rounded-full text-2xl text-white">
            <i class="ph ph-caret-left"></i>
        </a>
        <div class="flex-1 flex justify-center items-center pr-2">
            <p class="text-lg font-semibold">Send Money</p>
        </div>
    </div>

    <form method="POST" action="{{ route('send.username.process') }}" id="send-username-form">
        @csrf

        <div class="px-6 pt-8 flex flex-col gap-4">
            {{-- Select Wallet --}}
            <div class="flex flex-col justify-start">
				<p class="text-sm font-semibold pb-2 dark:text-white">Pay From</p>
				<div class="relative">
					{{-- trigger --}}
					<div
					  class="p-3 flex justify-between items-center gap-2 bg-n20 border border-n40 dark:bg-darkN20 dark:border-darkN40 rounded-xl cursor-pointer selectCountry"
					>
						<div class="flex justify-start items-center gap-1">
							<div class="size-7 flex justify-center items-center rounded-full bg-white dark:bg-darkG300">
                                <img
								  id="selected_wallet_logo"
								  src="{{ asset('storage/' . $userWalletsInUSD[0]['logo']) }}"
								  alt="{{ $userWalletsInUSD[0]['name'] }}"
								  class="w-[24px] h-[24px] object-cover"
								/>
							</div>
							<p class="text-n90 text-sm dark:text-white selectedItem">
								{{ $userWalletsInUSD[0]['name'] }} ({{ $userWalletsInUSD[0]['symbol'] }})
							</p>
						</div>
						<i class="ph ph-caret-down text-n90 text-lg !leading-none"></i>
					</div>
	
					{{-- dropdown --}}
					<div
					  class="selectCountryModal bg-white p-4 rounded-xl border border-n40 dark:border-darkN40 dark:bg-darkG300 w-full absolute right-0 top-14 max-h-[150px] overflow-y-auto invisible opacity-0 scale-75 duration-500"
					>
						<ul class="flex flex-col gap-2">
							@foreach($userWalletsInUSD as $wallet)
								<li
									class="text-xs text-n500 dark:text-darkN500 pb-2 border-b border-dashed border-n40 dark:border-darkN40 cursor-pointer item"
									data-symbol="{{ $wallet['symbol'] }}"
									data-name="{{ $wallet['name'] }}"
									data-logo="{{ asset('storage/' . $wallet['logo']) }}"
									data-balance-usd="{{ number_format($wallet['balance_in_usd'], 2) }}"
								>
									{{ $wallet['name'] }} ({{ $wallet['symbol'] }})
								</li>
							@endforeach
						</ul>
					</div>
				</div>
			</div>
            {{-- Username Input --}}
            <div class="flex flex-col justify-start">
                <p class="text-sm font-semibold pb-2 dark:text-white">Recipient Username</p>
                <div class="p-4 bg-white border border-n40 dark:bg-darkN20 dark:border-darkN40 rounded-xl">
                    <input type="text" name="username" id="username-input" placeholder="@username" class="w-full bg-transparent outline-none text-[24px] dark:text-white font-bold" required />
                </div>
                <p id="receiver-name" class="text-sm text-n500 dark:text-darkN500 pt-2"></p>
            </div>

            {{-- Hidden Fields --}}
            <input type="hidden" name="currency_symbol" value="{{ $userWalletsInUSD[0]['symbol'] }}">
            <input type="hidden" name="currency_name" value="{{ $userWalletsInUSD[0]['name'] }}">

            {{-- Amount --}}
            <div class="flex flex-col justify-start">
                <p class="text-sm font-semibold pb-2 dark:text-white">Amount</p>
                <div class="p-4 bg-white border border-n40 dark:bg-darkN20 dark:border-darkN40 rounded-xl">
                    <input type="number" name="amount" placeholder="0.00" class="w-full bg-transparent outline-none text-[32px] dark:text-white font-bold" required />
                </div>
            </div>

            {{-- Fee --}}
<div class="flex justify-between items-center">
    <p class="text-n500 text-sm dark:text-darkN500 font-semibold">Fee (1.5%)</p>
    <p id="calculated_fee" class="text-n500 text-sm dark:text-darkN500">
        0.00 USD
    </p>
</div>

{{-- Wallet Balance --}}
<div class="flex justify-between items-center">
    <p class="text-n500 text-sm dark:text-darkN500 font-semibold">Wallet Balance</p>
    <p id="wallet-balance-display" class="text-n500 text-sm dark:text-darkN500">
        {{ number_format($userWalletsInUSD[0]['balance_in_usd'], 2) }} USD
    </p>
</div>


{{-- They Will Receive --}}
<div class="flex justify-between items-center">
    <div class="flex justify-start items-center gap-2">
        <p class="text-n500 text-sm dark:text-darkN500 font-semibold">They Will Receive</p>
        <i class="ph ph-info text-g300 text-xl !leading-none"></i>
    </div>
    <p id="they_will_receive" class="text-n500 text-sm dark:text-darkN500">
        0.00 USD
    </p>
</div>

        </div>

        {{-- Submit --}}
        <div class="my-3 flex px-6 pt-8">
            <button type="submit"  class="flex-1 py-3 bg-g300 text-white text-center rounded-xl">
                Complete Transfer
            </button>
        </div>
    </form>
</main>

@endsection

@section('scripts')
<script>
    $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}'
    }
});
   $(document).ready(function() {
    // Live username lookup
    $('#username-input').on('input', function() {
        let username = $(this).val().trim();

        if(username.startsWith('@') && username.length > 1) {
            $.ajax({
                url: '{{ route("fetch.username.details") }}',
                method: 'GET',
                data: { username: username },
                success: function(response) {
                    if(response.name) {
                        $('#receiver-name').text('Receiver: ' + response.name);
                    } else {
                        $('#receiver-name').text('User not found');
                    }
                },
                error: function() {
                    $('#receiver-name').text('Error fetching user');
                }
            });
        } else {
            $('#receiver-name').text('');
        }
    });

    // Handle AJAX form submission
    $('#send-username-form').on('submit', function(e) {
        e.preventDefault();
        let $btn = $(this).find('button[type=submit]');
        $btn.prop('disabled', true).text('Processing...');

        $.ajax({
            url: $(this).attr('action'),
            method: 'POST',
            data: $(this).serialize(),
            headers: { 'Accept': 'application/json' },
            success: function(response) {
                toastr.success(response.message);
                setTimeout(() => window.location.href = response.redirect, 1500);
            },
            error: function(xhr) {
                toastr.error(xhr.responseJSON.message || 'Transfer failed!');
                $btn.prop('disabled', false).text('Complete Transfer');
            }
        });
    });
    $('.selectCountryModal .item').on('click', function() {
    let symbol = $(this).data('symbol');
    let name   = $(this).data('name');
    let logo   = $(this).data('logo');
    let balanceUsd = $(this).data('balance-usd');

    // Update hidden fields
    $('input[name="currency_symbol"]').val(symbol);
    $('input[name="currency_name"]').val(name);

    // Update display
    $('#selected_wallet_logo').attr('src', logo);
    $('.selectedItem').text(name + ' (' + symbol + ')');

    // Update Wallet Balance Display
    $('#wallet-balance-display').text(balanceUsd + ' USD');

    // Close dropdown
    $('.selectCountryModal').addClass('invisible opacity-0 scale-75');
});


    // Fee calculation
    $('input[name="amount"]').on('input', function() {
        let amount = parseFloat($(this).val());
        if (!isNaN(amount) && amount > 0) {
            let fee = amount * 0.015;
            let netAmount = amount - fee;

            $('#calculated_fee').text(fee.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}) + ' USD');
            $('#they_will_receive').text(netAmount.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}) + ' USD');
        } else {
            $('#calculated_fee').text('0.00 USD');
            $('#they_will_receive').text('0.00 USD');
        }
    });
});

    </script>
    
@endsection