@extends('layouts.app')
@section('page_title','Accounts / Wallets')
@section('content')
<div class="grid xl:grid-cols-3 gap-4">
    <div class="fp-card p-5 xl:col-span-1">
        <h2 class="font-semibold text-[15px]">Add Account</h2>
        <form method="post" action="{{route('accounts.store')}}" class="space-y-3 mt-4">
            @csrf
            <input name="name" class="fp-input" placeholder="Bank Account / Wallet" required>
            <select name="type" class="fp-input">
                <option>bank</option>
                <option>cash</option>
                <option>mobile_wallet</option>
                <option>card</option>
                <option>investment</option>
            </select>
            <input name="currency" value="BDT" class="fp-input" required>
            <input name="opening_balance" type="number" step="0.01" value="0" class="fp-input" required>
            <button class="fp-btn fp-primary w-full">Create Account</button>
        </form>
    </div>

    <div class="fp-card p-5 xl:col-span-2">
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-3">
            <div>
                <h2 class="font-semibold text-[15px]">Your Accounts</h2>
                <span class="fp-muted text-[10px]">Live balances</span>
            </div>
            @if($accounts->count() >= 2)
                <button type="button" onclick="openTransferModal()" class="fp-btn fp-primary">Transfer Money</button>
            @endif
        </div>

        <div class="grid md:grid-cols-2 gap-3">
            @forelse($accounts as $a)
                <div class="border rounded-xl dark:border-slate-700 p-4">
                    <div class="flex justify-between">
                        <div>
                            <div class="text-[12px] font-semibold">{{$a->name}}</div>
                            <div class="fp-muted text-[10px] mt-1">{{ucwords(str_replace('_',' ',$a->type))}} · {{$a->currency}}</div>
                        </div>
                        <span class="w-8 h-8 rounded-lg bg-violet-50 text-violet-600 flex items-center justify-center">▣</span>
                    </div>
                    <div class="text-[20px] font-semibold mt-5 money">৳ {{number_format($a->current_balance,2)}}</div>
                    <div class="fp-muted text-[10px] mt-1">Opening: ৳ {{number_format($a->opening_balance,2)}}</div>
                </div>
            @empty
                <div class="fp-muted text-sm">No accounts.</div>
            @endforelse
        </div>
    </div>
</div>

@if($accounts->count() >= 2)
<div id="transferModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 p-4">
<div
    class="bg-white dark:bg-[#111a2b] rounded-2xl max-h-[90vh] overflow-y-auto p-6"
    style="width:calc(100vw - 32px); max-width:650px !important;"
>
        <div class="flex justify-between items-center mb-4">
            <div>
                <h2 class="text-lg font-semibold">Transfer Money</h2>
            </div>
            <button type="button" onclick="closeTransferModal()" class="text-2xl text-slate-400">×</button>
        </div>

        <form method="post" action="{{route('accounts.transfer')}}" class="grid md:grid-cols-2 gap-4">
            @csrf

            <div>
                <label class="text-[11px] font-semibold">From Account</label>
                <select name="from_account_id" id="transferFromAccount" class="fp-input mt-1" required>
                    @foreach($accounts as $a)
                        <option value="{{$a->id}}" data-currency="{{$a->currency}}" data-balance="{{$a->current_balance}}">
                            {{$a->name}} — {{$a->currency}} {{number_format($a->current_balance,2)}}
                        </option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="text-[11px] font-semibold">To Account</label>
                <select name="to_account_id" id="transferToAccount" class="fp-input mt-1" required>
                    @foreach($accounts as $a)
                        <option value="{{$a->id}}" data-currency="{{$a->currency}}" data-balance="{{$a->current_balance}}">
                            {{$a->name}} — {{$a->currency}} {{number_format($a->current_balance,2)}}
                        </option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="text-[11px] font-semibold">Amount</label>
                <input name="amount" type="number" step="0.01" min="0.01" class="fp-input mt-1" placeholder="0.00" required>
            </div>

            <div>
                <label class="text-[11px] font-semibold">Charge</label>
                <input name="charge" type="number" step="0.01" min="0" value="0" class="fp-input mt-1" placeholder="0.00">
            </div>

            <div>
                <label class="text-[11px] font-semibold">Date</label>
                <input name="transaction_date" type="date" value="{{today()->toDateString()}}" class="fp-input mt-1" required>
            </div>

            <div class="md:col-span-2">
                <label class="text-[11px] font-semibold">Notes</label>
                <textarea name="notes" rows="3" class="fp-input mt-1" placeholder="Optional"></textarea>
            </div>

            <div class="md:col-span-2 flex justify-end gap-2">
                <button type="button" onclick="closeTransferModal()" class="fp-btn fp-soft">Cancel</button>
                <button class="fp-btn fp-primary">Transfer</button>
            </div>
        </form>
    </div>
</div>
@endif
@endsection

@if($accounts->count() >= 2)
@push('scripts')
<script>
function openTransferModal(){
    const modal=document.getElementById('transferModal');
    if(!modal) return;
    modal.classList.remove('hidden');
    modal.classList.add('flex');
    syncTransferAccounts();
}

function closeTransferModal(){
    const modal=document.getElementById('transferModal');
    if(!modal) return;
    modal.classList.add('hidden');
    modal.classList.remove('flex');
}

function syncTransferAccounts(){
    const from=document.getElementById('transferFromAccount');
    const to=document.getElementById('transferToAccount');
    if(!from || !to) return;

    Array.from(to.options).forEach(function(option){
        option.disabled=option.value===from.value;
    });

    if(to.value===from.value){
        const next=Array.from(to.options).find(option=>!option.disabled);
        if(next) to.value=next.value;
    }
}

document.addEventListener('DOMContentLoaded',function(){
    document.getElementById('transferFromAccount')?.addEventListener('change',syncTransferAccounts);
});
</script>
@endpush
@endif