@extends('layouts.app')
@section('title', 'Fund Transfer')

@section('css')
<style>
    .transfer-card {
        border-radius: 15px;
        overflow: hidden;
        border: none;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    .transfer-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 2rem;
        text-align: center;
        color: white;
    }
    .account-select-box {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 1.5rem;
        transition: all 0.3s;
        border: 2px solid transparent;
    }
    .account-select-box:focus-within {
        background: #fff;
        border-color: #667eea;
        box-shadow: 0 5px 15px rgba(102,126,234,0.1);
    }
    .swap-container {
        display: flex;
        justify-content: center;
        margin: -1.5rem 0;
        position: relative;
        z-index: 10;
    }
    .btn-swap {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background: white;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        color: #667eea;
        transition: all 0.3s;
        cursor: pointer;
    }
    .btn-swap:hover {
        transform: rotate(180deg);
        background: #667eea;
        color: white;
    }
    .balance-badge {
        font-size: 0.75rem;
        padding: 0.35rem 0.75rem;
        border-radius: 50px;
        background: rgba(102,126,234,0.1);
        color: #667eea;
        margin-top: 0.5rem;
        display: inline-block;
    }
    .amount-input-container {
        text-align: center;
        padding: 2rem 0;
    }
    .big-amount-input {
        font-size: 2.5rem;
        font-weight: 700;
        text-align: center;
        border: none;
        background: transparent;
        color: #2d3748;
        width: 100%;
        outline: none !important;
    }
    .big-amount-input::placeholder {
        color: #cbd5e0;
    }
</style>
@endsection

@section('content')
<div class="page-wrapper">
    <div class="page-content">
        <x-breadcrumb :langArray="['account.account', 'Fund Transfer']"/>
        
        <div class="row">
            <div class="col-12 col-lg-7 mx-auto">
                <div class="card transfer-card">
                    <div class="transfer-header">
                        <h4 class="text-white mb-1"><i class="bx bx-transfer-alt me-2"></i>Move Funds</h4>
                        <p class="text-white-50 small mb-0">Internal transfer between accounts (Contra Entry)</p>
                    </div>
                    <div class="card-body p-5">
                        <form id="transferForm" action="{{ route('account.transfer.store') }}">
                            @csrf
                            
                            <div class="row g-4 mb-4">
                                <div class="col-md-6">
                                    <label class="form-label text-muted small text-uppercase fw-bold">Transfer Date</label>
                                    <input type="date" name="transaction_date" class="form-control border-0 bg-light" required value="{{ date('Y-m-d') }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label text-muted small text-uppercase fw-bold">Reference #</label>
                                    <input type="text" name="reference_no" class="form-control border-0 bg-light" placeholder="Optional">
                                </div>
                            </div>

                            <!-- From Account -->
                            <div class="account-select-box">
                                <label class="form-label text-muted small text-uppercase fw-bold">From (Source)</label>
                                <select name="from_account_id" id="from_account_id" class="form-select select2" required>
                                    <option value="">Choose Source Account</option>
                                    @foreach($accounts as $account)
                                        <option value="{{ $account->id }}" data-balance="{{ $account->debit_amt - $account->credit_amt }}">{{ $account->name }}</option>
                                    @endforeach
                                </select>
                                <div id="from_balance_display" class="balance-badge d-none">
                                    Balance: <span class="fw-bold">0.00</span> {{ $currencySymbol }}
                                </div>
                            </div>

                            <div class="swap-container">
                                <button type="button" id="btn_swap_accounts" class="btn-swap shadow-sm">
                                    <i class="bx bx-transfer-alt bx-rotate-90"></i>
                                </button>
                            </div>

                            <!-- To Account -->
                            <div class="account-select-box">
                                <label class="form-label text-muted small text-uppercase fw-bold">To (Destination)</label>
                                <select name="to_account_id" id="to_account_id" class="form-select select2" required>
                                    <option value="">Choose Destination Account</option>
                                    @foreach($accounts as $account)
                                        <option value="{{ $account->id }}" data-balance="{{ $account->debit_amt - $account->credit_amt }}">{{ $account->name }}</option>
                                    @endforeach
                                </select>
                                <div id="to_balance_display" class="balance-badge d-none">
                                    Balance: <span class="fw-bold">0.00</span> {{ $currencySymbol }}
                                </div>
                            </div>

                            <div class="amount-input-container">
                                <label class="text-muted small text-uppercase fw-bold d-block mb-2">Amount to Transfer</label>
                                <div class="d-flex align-items-center justify-content-center">
                                    <span class="h2 mb-0 text-muted me-2">{{ $currencySymbol }}</span>
                                    <input type="number" name="amount" class="big-amount-input" step="0.01" min="0.01" required placeholder="0.00">
                                </div>
                            </div>

                            <div class="mb-4">
                                <label class="form-label text-muted small text-uppercase fw-bold">Notes</label>
                                <textarea name="note" class="form-control border-0 bg-light" rows="2" placeholder="Describe this transfer..."></textarea>
                            </div>

                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary btn-lg rounded-pill shadow-sm py-3 fw-bold">
                                    COMPLETE TRANSFER
                                </button>
                                <a href="{{ route('account.transfer.list') }}" class="btn btn-link text-muted">View History</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script>
$(function() {
    "use strict";
    
    $('.select2').select2({
        theme: 'bootstrap4',
        width: '100%'
    });

    // Update Balance Display
    function updateBalance(type) {
        const select = $(`#${type}_account_id`);
        const display = $(`#${type}_balance_display`);
        const val = select.val();
        
        if (val) {
            const balance = select.find(':selected').data('balance');
            display.find('span').text(parseFloat(balance).toLocaleString(undefined, {minimumFractionDigits: 2}));
            display.removeClass('d-none');
        } else {
            display.addClass('d-none');
        }
    }

    $('#from_account_id').change(() => updateBalance('from'));
    $('#to_account_id').change(() => updateBalance('to'));

    // Swap Functionality
    $('#btn_swap_accounts').on('click', function() {
        const fromVal = $('#from_account_id').val();
        const toVal = $('#to_account_id').val();
        
        $('#from_account_id').val(toVal).trigger('change');
        $('#to_account_id').val(fromVal).trigger('change');
    });

    $("#transferForm").on("submit", function(e) {
        e.preventDefault();
        const form = $(this);
        const submitBtn = form.find('button[type="submit"]');
        const fromId = $('#from_account_id').val();
        const toId = $('#to_account_id').val();
        const amount = parseFloat($('input[name="amount"]').val());
        const fromBalance = parseFloat($('#from_account_id').find(':selected').data('balance'));

        if (fromId === toId) {
            iziToast.error({title: 'Error', message: 'Source and Destination accounts must be different'});
            return;
        }

        if (amount > fromBalance) {
            iziToast.error({title: 'Insufficient Balance', message: 'The transfer amount exceeds the source account balance'});
            return;
        }

        submitBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2"></span>Processing...');

        $.ajax({
            url: form.attr('action'),
            type: 'POST',
            data: form.serialize(),
            success: function(response) {
                iziToast.success({title: 'Success', message: response.message});
                setTimeout(() => window.location.href = "{{ route('account.transfer.list') }}", 1000);
            },
            error: function(xhr) {
                submitBtn.prop('disabled', false).text('COMPLETE TRANSFER');
                iziToast.error({title: 'Error', message: xhr.responseJSON.message || 'Transfer failed'});
            }
        });
    });
});
</script>
@endsection