@extends('layouts.app')

@section('title', 'Nueva Transferencia')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0 text-gray-800">
                        <i class="fas fa-exchange-alt me-2"></i>Nueva Transferencia
                    </h1>
                    <p class="text-muted">Transferir fondos entre cuentas</p>
                </div>
                <div>
                    <a href="{{ route('admin.bank.transfers.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-1"></i>Volver
                    </a>
                </div>
            </div>
        </div>
    </div>

    <form method="POST" action="{{ route('admin.bank.transfers.store') }}" id="transferForm">
        @csrf
        
        <div class="row">
            <div class="col-lg-8">
                <!-- Información General -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-info-circle me-2"></i>Información de la Transferencia
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="transfer_date" class="form-label">Fecha *</label>
                                <input type="date" class="form-control @error('transfer_date') is-invalid @enderror" 
                                       id="transfer_date" name="transfer_date" value="{{ old('transfer_date', date('Y-m-d')) }}" required>
                                @error('transfer_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="description" class="form-label">Descripción</label>
                                <input type="text" class="form-control @error('description') is-invalid @enderror" 
                                       id="description" name="description" value="{{ old('description', 'Transferencia entre cuentas') }}">
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Cuenta Origen -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3 bg-danger text-white">
                        <h6 class="m-0 font-weight-bold">
                            <i class="fas fa-arrow-up me-2"></i>Cuenta Origen
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label for="from_account_type" class="form-label">Tipo de Cuenta *</label>
                                <select class="form-select @error('from_account_type') is-invalid @enderror" 
                                        id="from_account_type" name="from_account_type" required>
                                    <option value="">Seleccionar tipo</option>
                                    <option value="bank" {{ old('from_account_type') == 'bank' ? 'selected' : '' }}>Banco</option>
                                    <option value="petty_cash" {{ old('from_account_type') == 'petty_cash' ? 'selected' : '' }}>Caja Chica</option>
                                </select>
                                @error('from_account_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="from_account_id" class="form-label">Cuenta *</label>
                                <select class="form-select @error('from_account_id') is-invalid @enderror" 
                                        id="from_account_id" name="from_account_id" required disabled>
                                    <option value="">Seleccionar cuenta</option>
                                </select>
                                @error('from_account_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-3 mb-3">
                                <label class="form-label">Moneda</label>
                                <input type="text" class="form-control" id="from_currency" readonly>
                            </div>

                            <div class="col-md-3 mb-3">
                                <label class="form-label">Saldo Disponible</label>
                                <input type="text" class="form-control" id="from_balance" readonly>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Cuenta Destino -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3 bg-success text-white">
                        <h6 class="m-0 font-weight-bold">
                            <i class="fas fa-arrow-down me-2"></i>Cuenta Destino
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label for="to_account_type" class="form-label">Tipo de Cuenta *</label>
                                <select class="form-select @error('to_account_type') is-invalid @enderror" 
                                        id="to_account_type" name="to_account_type" required>
                                    <option value="">Seleccionar tipo</option>
                                    <option value="bank" {{ old('to_account_type') == 'bank' ? 'selected' : '' }}>Banco</option>
                                    <option value="petty_cash" {{ old('to_account_type') == 'petty_cash' ? 'selected' : '' }}>Caja Chica</option>
                                </select>
                                @error('to_account_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="to_account_id" class="form-label">Cuenta *</label>
                                <select class="form-select @error('to_account_id') is-invalid @enderror" 
                                        id="to_account_id" name="to_account_id" required disabled>
                                    <option value="">Seleccionar cuenta</option>
                                </select>
                                @error('to_account_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-3 mb-3">
                                <label class="form-label">Moneda</label>
                                <input type="text" class="form-control" id="to_currency" readonly>
                            </div>

                            <div class="col-md-3 mb-3">
                                <label class="form-label">Saldo Actual</label>
                                <input type="text" class="form-control" id="to_balance" readonly>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Montos y Tasa de Cambio -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3 bg-info text-white">
                        <h6 class="m-0 font-weight-bold">
                            <i class="fas fa-calculator me-2"></i>Monto y Tasa de Cambio
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3 mb-3">
                                <label for="from_amount" class="form-label">Monto Origen *</label>
                                <input type="number" step="0.01" min="0.01" class="form-control @error('from_amount') is-invalid @enderror" 
                                       id="from_amount" name="from_amount" value="{{ old('from_amount') }}" required>
                                @error('from_amount')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-3 mb-3">
                                <label for="operation_type" class="form-label">Operación *</label>
                                <select class="form-select @error('operation_type') is-invalid @enderror" 
                                        id="operation_type" name="operation_type" required>
                                    <option value="multiply">Multiplicar (×)</option>
                                    <option value="divide">Dividir (÷)</option>
                                </select>
                                @error('operation_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-3 mb-3">
                                <label for="exchange_rate" class="form-label">Tasa de Cambio *</label>
                                <input type="number" step="0.0001" min="0.0001" class="form-control @error('exchange_rate') is-invalid @enderror" 
                                       id="exchange_rate" name="exchange_rate" value="{{ old('exchange_rate', 1) }}" required>
                                @error('exchange_rate')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-3 mb-3">
                                <label for="to_amount" class="form-label">Monto Destino</label>
                                <input type="number" step="0.01" class="form-control" id="to_amount" readonly>
                            </div>
                        </div>

                        <div class="alert alert-info">
                            <i class="fas fa-info-circle me-2"></i>
                            <strong>Instrucciones:</strong><br>
                            • <strong>Multiplicar (×):</strong> Para convertir de moneda fuerte a débil (ej: USD → VEF: 1 USD × 300 = 300 VEF)<br>
                            • <strong>Dividir (÷):</strong> Para convertir de moneda débil a fuerte (ej: VEF → USD: 300 VEF ÷ 300 = 1 USD)
                            <div class="mt-2">
                                <strong>Ejemplo actual:</strong> <span id="exampleCalculation">-</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Notas -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-secondary">
                            <i class="fas fa-sticky-note me-2"></i>Notas Adicionales
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <textarea class="form-control @error('notes') is-invalid @enderror" 
                                          id="notes" name="notes" rows="3" placeholder="Observaciones opcionales...">{{ old('notes') }}</textarea>
                                @error('notes')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <!-- Resumen -->
                <div class="card shadow sticky-top" style="top: 80px;">
                    <div class="card-header py-3 bg-primary text-white">
                        <h6 class="m-0 font-weight-bold">
                            <i class="fas fa-receipt me-2"></i>Resumen
                        </h6>
                    </div>
                    <div class="card-body">
                        <div id="transferSummary">
                            <p class="text-muted text-center">Complete el formulario para ver el resumen</p>
                        </div>
                    </div>
                </div>

                <!-- Información -->
                <div class="card shadow mt-4">
                    <div class="card-header py-3 bg-info text-white">
                        <h6 class="m-0 font-weight-bold">
                            <i class="fas fa-info-circle me-2"></i>Información
                        </h6>
                    </div>
                    <div class="card-body">
                        <p class="mb-2"><small><strong>Estado Inicial:</strong> Pendiente</small></p>
                        <p class="mb-2"><small>La transferencia quedará pendiente hasta que sea confirmada.</small></p>
                        <p class="mb-0"><small>Al confirmar, se actualizarán los saldos de ambas cuentas.</small></p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Botones de Acción -->
        <div class="row">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-body">
                        <div class="d-flex justify-content-end gap-2">
                            <a href="{{ route('admin.bank.transfers.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times me-1"></i>Cancelar
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i>Crear Transferencia
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Datos de cuentas
    const bankAccounts = @json($bankAccounts);
    const pettyCashAccounts = @json($pettyCashAccounts);

    // Referencias a campos
    const fromAccountType = document.getElementById('from_account_type');
    const fromAccountId = document.getElementById('from_account_id');
    const fromCurrency = document.getElementById('from_currency');
    const fromBalance = document.getElementById('from_balance');
    
    const toAccountType = document.getElementById('to_account_type');
    const toAccountId = document.getElementById('to_account_id');
    const toCurrency = document.getElementById('to_currency');
    const toBalance = document.getElementById('to_balance');

    // Actualizar información de cuenta origen
    function updateFromAccountInfo() {
        if (fromAccountId.value) {
            const accounts = fromAccountType.value === 'bank' ? bankAccounts : pettyCashAccounts;
            const account = accounts.find(acc => acc.id == fromAccountId.value);
            
            if (account) {
                fromCurrency.value = account.currency || 'N/A';
                const balance = account.current_balance || 0;
                fromBalance.value = new Intl.NumberFormat('es-ES', {
                    style: 'currency',
                    currency: account.currency || 'USD',
                    minimumFractionDigits: 2
                }).format(balance);
            }
        } else {
            fromCurrency.value = '';
            fromBalance.value = '';
        }
    }

    // Actualizar información de cuenta destino
    function updateToAccountInfo() {
        if (toAccountId.value) {
            const accounts = toAccountType.value === 'bank' ? bankAccounts : pettyCashAccounts;
            const account = accounts.find(acc => acc.id == toAccountId.value);
            
            if (account) {
                toCurrency.value = account.currency || 'N/A';
                const balance = account.current_balance || 0;
                toBalance.value = new Intl.NumberFormat('es-ES', {
                    style: 'currency',
                    currency: account.currency || 'USD',
                    minimumFractionDigits: 2
                }).format(balance);
            }
        } else {
            toCurrency.value = '';
            toBalance.value = '';
        }
    }

    // Actualizar cuentas disponibles
    function updateAccounts() {
        // Cuenta origen
        if (fromAccountType.value) {
            const accounts = fromAccountType.value === 'bank' ? bankAccounts : pettyCashAccounts;
            fromAccountId.innerHTML = '<option value="">Seleccionar cuenta</option>';
            accounts.forEach(account => {
                const label = fromAccountType.value === 'bank' 
                    ? `${account.bank?.name} - ${account.account_number}` 
                    : `${account.code} - ${account.name}`;
                fromAccountId.innerHTML += `<option value="${account.id}">${label}</option>`;
            });
            fromAccountId.disabled = false;
        } else {
            fromAccountId.disabled = true;
            fromAccountId.innerHTML = '<option value="">Seleccionar cuenta</option>';
            updateFromAccountInfo();
        }

        // Cuenta destino
        if (toAccountType.value) {
            const accounts = toAccountType.value === 'bank' ? bankAccounts : pettyCashAccounts;
            toAccountId.innerHTML = '<option value="">Seleccionar cuenta</option>';
            accounts.forEach(account => {
                const label = toAccountType.value === 'bank' 
                    ? `${account.bank?.name} - ${account.account_number}` 
                    : `${account.code} - ${account.name}`;
                toAccountId.innerHTML += `<option value="${account.id}">${label}</option>`;
            });
            toAccountId.disabled = false;
        } else {
            toAccountId.disabled = true;
            toAccountId.innerHTML = '<option value="">Seleccionar cuenta</option>';
            updateToAccountInfo();
        }
    }

    fromAccountType.addEventListener('change', updateAccounts);
    toAccountType.addEventListener('change', updateAccounts);
    fromAccountId.addEventListener('change', updateFromAccountInfo);
    toAccountId.addEventListener('change', updateToAccountInfo);

    // Calcular monto destino
    function calculateToAmount() {
        const fromAmount = parseFloat(document.getElementById('from_amount').value) || 0;
        const exchangeRate = parseFloat(document.getElementById('exchange_rate').value) || 1;
        const operationType = document.getElementById('operation_type').value;
        const fromCurr = fromCurrency.value || 'USD';
        const toCurr = toCurrency.value || 'USD';
        
        let toAmount;
        if (operationType === 'multiply') {
            toAmount = fromAmount * exchangeRate;
        } else {
            toAmount = fromAmount / exchangeRate;
        }
        
        document.getElementById('to_amount').value = toAmount.toFixed(2);
        
        // Actualizar ejemplo
        updateExampleCalculation();
    }

    // Actualizar ejemplo de cálculo
    function updateExampleCalculation() {
        const fromAmount = document.getElementById('from_amount').value || 0;
        const exchangeRate = document.getElementById('exchange_rate').value || 1;
        const operationType = document.getElementById('operation_type').value;
        const fromCurr = fromCurrency.value || 'USD';
        const toCurr = toCurrency.value || 'USD';
        
        if (fromAmount && exchangeRate) {
            const operator = operationType === 'multiply' ? '×' : '÷';
            const result = operationType === 'multiply' 
                ? (parseFloat(fromAmount) * parseFloat(exchangeRate)).toFixed(2)
                : (parseFloat(fromAmount) / parseFloat(exchangeRate)).toFixed(2);
            
            document.getElementById('exampleCalculation').textContent = 
                `${fromAmount} ${fromCurr} ${operator} ${exchangeRate} = ${result} ${toCurr}`;
        } else {
            document.getElementById('exampleCalculation').textContent = '-';
        }
    }

    document.getElementById('from_amount').addEventListener('input', calculateToAmount);
    document.getElementById('exchange_rate').addEventListener('input', calculateToAmount);
    document.getElementById('operation_type').addEventListener('change', calculateToAmount);
    
    // Actualizar ejemplo cuando cambian las monedas
    fromAccountId.addEventListener('change', function() {
        updateFromAccountInfo();
        calculateToAmount();
    });
    
    toAccountId.addEventListener('change', function() {
        updateToAccountInfo();
        calculateToAmount();
    });
});
</script>
@endsection