@extends('layouts.app')

@section('title', 'Crear Nuevo Gasto')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title mb-0">
                        <i class="fas fa-plus me-2"></i>Crear Nuevo Gasto del Negocio
                    </h3>
                    <a href="{{ route('admin.purchases.expenses.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-1"></i>Volver a Gastos
                    </a>
                </div>

                <div class="card-body">
                    <form action="{{ route('admin.purchases.expenses.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        
                        <div class="row">
                            <!-- Información General -->
                            <div class="col-md-6">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h5 class="card-title mb-0">
                                            <i class="fas fa-info-circle me-2"></i>Información General
                                        </h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="expense_date" class="form-label">Fecha del Gasto <span class="text-danger">*</span></label>
                                                    <input type="date" class="form-control @error('expense_date') is-invalid @enderror" 
                                                           id="expense_date" name="expense_date" 
                                                           value="{{ old('expense_date', date('Y-m-d')) }}" required>
                                                    @error('expense_date')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="document_type" class="form-label">Tipo de Documento <span class="text-danger">*</span></label>
                                                    <select class="form-select @error('document_type') is-invalid @enderror" 
                                                            id="document_type" name="document_type" required>
                                                        <option value="">Seleccionar...</option>
                                                        @foreach($documentTypes as $key => $value)
                                                            <option value="{{ $key }}" {{ old('document_type') == $key ? 'selected' : '' }}>
                                                                {{ $value }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    @error('document_type')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>

                                        <div class="mb-3">
                                            <label for="document_number" class="form-label">Número de Documento</label>
                                            <input type="text" class="form-control @error('document_number') is-invalid @enderror" 
                                                   id="document_number" name="document_number" 
                                                   value="{{ old('document_number') }}" 
                                                   placeholder="Ej: 001-001-00012345">
                                            @error('document_number')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="mb-3">
                                            <label for="expense_type" class="form-label">Tipo de Gasto <span class="text-danger">*</span></label>
                                            <select class="form-select @error('expense_type') is-invalid @enderror" 
                                                    id="expense_type" name="expense_type" required onchange="updateAccountingInfo()">
                                                <option value="">Seleccionar...</option>
                                                @foreach($expenseTypes as $key => $value)
                                                    <option value="{{ $key }}" {{ old('expense_type') == $key ? 'selected' : '' }}>
                                                        {{ $value }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('expense_type')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            
                                            <!-- Información de cuentas contables -->
                                            <div id="accounting-info" class="mt-2" style="display: none;">
                                                <small class="text-muted">
                                                    <strong>Cuentas Contables:</strong><br>
                                                    <span id="debit-account-info"></span><br>
                                                    <span id="credit-account-info"></span>
                                                    <span id="tax-account-info"></span>
                                                    <span id="retention-account-info"></span>
                                                </small>
                                            </div>
                                        </div>

                                        <div class="mb-3">
                                            <label for="description" class="form-label">Descripción <span class="text-danger">*</span></label>
                                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                                      id="description" name="description" rows="3" required
                                                      placeholder="Descripción detallada del gasto...">{{ old('description') }}</textarea>
                                            @error('description')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Información del Proveedor -->
                            <div class="col-md-6">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h5 class="card-title mb-0">
                                            <i class="fas fa-building me-2"></i>Información del Proveedor
                                        </h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-3">
                                            <label for="supplier_name" class="form-label">Nombre del Proveedor <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control @error('supplier_name') is-invalid @enderror" 
                                                   id="supplier_name" name="supplier_name" 
                                                   value="{{ old('supplier_name') }}" required
                                                   placeholder="Nombre o razón social del proveedor">
                                            @error('supplier_name')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="mb-3">
                                            <label for="supplier_ruc" class="form-label">RUC/Cédula</label>
                                            <input type="text" class="form-control @error('supplier_ruc') is-invalid @enderror" 
                                                   id="supplier_ruc" name="supplier_ruc" 
                                                   value="{{ old('supplier_ruc') }}" 
                                                   placeholder="1234567890123">
                                            @error('supplier_ruc')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="mb-3">
                                            <label for="supplier_address" class="form-label">Dirección</label>
                                            <textarea class="form-control @error('supplier_address') is-invalid @enderror" 
                                                      id="supplier_address" name="supplier_address" rows="2"
                                                      placeholder="Dirección del proveedor...">{{ old('supplier_address') }}</textarea>
                                            @error('supplier_address')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="supplier_phone" class="form-label">Teléfono</label>
                                                    <input type="text" class="form-control @error('supplier_phone') is-invalid @enderror" 
                                                           id="supplier_phone" name="supplier_phone" 
                                                           value="{{ old('supplier_phone') }}" 
                                                           placeholder="0987654321">
                                                    @error('supplier_phone')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="supplier_email" class="form-label">Email</label>
                                                    <input type="email" class="form-control @error('supplier_email') is-invalid @enderror" 
                                                           id="supplier_email" name="supplier_email" 
                                                           value="{{ old('supplier_email') }}" 
                                                           placeholder="proveedor@ejemplo.com">
                                                    @error('supplier_email')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <!-- Montos -->
                            <div class="col-md-6">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h5 class="card-title mb-0">
                                            <i class="fas fa-dollar-sign me-2"></i>Montos y Pagos
                                        </h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="subtotal" class="form-label">Subtotal <span class="text-danger">*</span></label>
                                                    <input type="number" step="0.01" class="form-control @error('subtotal') is-invalid @enderror" 
                                                           id="subtotal" name="subtotal" 
                                                           value="{{ old('subtotal') }}" required
                                                           onchange="calculateTotal()">
                                                    @error('subtotal')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="tax_amount" class="form-label">Impuestos</label>
                                                    <input type="number" step="0.01" class="form-control @error('tax_amount') is-invalid @enderror" 
                                                           id="tax_amount" name="tax_amount" 
                                                           value="{{ old('tax_amount', 0) }}"
                                                           onchange="calculateTotal()">
                                                    @error('tax_amount')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="retention_amount" class="form-label">Retención</label>
                                                    <input type="number" step="0.01" class="form-control @error('retention_amount') is-invalid @enderror" 
                                                           id="retention_amount" name="retention_amount" 
                                                           value="{{ old('retention_amount', 0) }}"
                                                           onchange="calculateTotal()">
                                                    @error('retention_amount')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="total_amount" class="form-label">Total <span class="text-danger">*</span></label>
                                                    <input type="number" step="0.01" class="form-control @error('total_amount') is-invalid @enderror" 
                                                           id="total_amount" name="total_amount" 
                                                           value="{{ old('total_amount') }}" required readonly>
                                                    @error('total_amount')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="currency" class="form-label">Moneda <span class="text-danger">*</span></label>
                                                    <select class="form-select @error('currency') is-invalid @enderror" 
                                                            id="currency" name="currency" required onchange="updateExchangeRate()">
                                                        @foreach($currencies as $currency)
                                                            <option value="{{ $currency }}" {{ old('currency', 'USD') == $currency ? 'selected' : '' }}>
                                                                {{ $currency }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    @error('currency')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="exchange_rate" class="form-label">Tasa de Cambio</label>
                                                    <input type="number" step="0.0001" class="form-control @error('exchange_rate') is-invalid @enderror" 
                                                           id="exchange_rate" name="exchange_rate" 
                                                           value="{{ old('exchange_rate', 1) }}" readonly>
                                                    <div class="form-text">Tasa automática desde el sistema</div>
                                                    @error('exchange_rate')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="payment_method" class="form-label">Método de Pago <span class="text-danger">*</span></label>
                                                    <select class="form-select @error('payment_method') is-invalid @enderror" 
                                                            id="payment_method" name="payment_method" required>
                                                        @foreach($paymentMethods as $key => $value)
                                                            <option value="{{ $key }}" {{ old('payment_method') == $key ? 'selected' : '' }}>
                                                                {{ $value }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    @error('payment_method')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="payment_status" class="form-label">Estado de Pago <span class="text-danger">*</span></label>
                                                    <select class="form-select @error('payment_status') is-invalid @enderror" 
                                                            id="payment_status" name="payment_status" required>
                                                        <option value="pending" {{ old('payment_status', 'pending') == 'pending' ? 'selected' : '' }}>Pendiente</option>
                                                        <option value="paid" {{ old('payment_status') == 'paid' ? 'selected' : '' }}>Pagado</option>
                                                        <option value="partial" {{ old('payment_status') == 'partial' ? 'selected' : '' }}>Parcial</option>
                                                        <option value="cancelled" {{ old('payment_status') == 'cancelled' ? 'selected' : '' }}>Cancelado</option>
                                                    </select>
                                                    @error('payment_status')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Información Adicional -->
                            <div class="col-md-6">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h5 class="card-title mb-0">
                                            <i class="fas fa-cogs me-2"></i>Información Adicional
                                        </h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-3">
                                            <label for="notes" class="form-label">Notas Adicionales</label>
                                            <textarea class="form-control @error('notes') is-invalid @enderror" 
                                                      id="notes" name="notes" rows="3"
                                                      placeholder="Notas adicionales sobre el gasto...">{{ old('notes') }}</textarea>
                                            @error('notes')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Botones de Acción -->
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-body text-center">
                                        <button type="submit" class="btn btn-primary btn-lg me-3">
                                            <i class="fas fa-save me-2"></i>Guardar Gasto
                                        </button>
                                        <a href="{{ route('admin.purchases.expenses.index') }}" class="btn btn-secondary btn-lg">
                                            <i class="fas fa-times me-2"></i>Cancelar
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Configuración de tipos de gastos con cuentas contables
const expenseTypeAccounts = @json($expenseTypeAccounts);

function calculateTotal() {
    const subtotal = parseFloat(document.getElementById('subtotal').value) || 0;
    const taxAmount = parseFloat(document.getElementById('tax_amount').value) || 0;
    const retentionAmount = parseFloat(document.getElementById('retention_amount').value) || 0;
    
    const total = subtotal + taxAmount - retentionAmount;
    
    document.getElementById('total_amount').value = total.toFixed(2);
}

function updateAccountingInfo() {
    const expenseType = document.getElementById('expense_type').value;
    const accountingInfo = document.getElementById('accounting-info');
    
    if (expenseType && expenseTypeAccounts[expenseType]) {
        const config = expenseTypeAccounts[expenseType];
        
        document.getElementById('debit-account-info').textContent = 
            `Débito: ${config.debit_account.code} - ${config.debit_account.name}`;
        document.getElementById('credit-account-info').textContent = 
            `Crédito: ${config.credit_account.code} - ${config.credit_account.name}`;
        
        if (config.tax_account) {
            document.getElementById('tax-account-info').innerHTML = 
                `<br>Impuestos: ${config.tax_account.code} - ${config.tax_account.name}`;
        } else {
            document.getElementById('tax-account-info').innerHTML = '';
        }
        
        if (config.retention_account) {
            document.getElementById('retention-account-info').innerHTML = 
                `<br>Retenciones: ${config.retention_account.code} - ${config.retention_account.name}`;
        } else {
            document.getElementById('retention-account-info').innerHTML = '';
        }
        
        accountingInfo.style.display = 'block';
    } else {
        accountingInfo.style.display = 'none';
    }
}

function updateExchangeRate() {
    const currency = document.getElementById('currency').value;
    const date = document.getElementById('expense_date').value;
    
    if (currency === 'USD') {
        document.getElementById('exchange_rate').value = '1.0000';
        return;
    }
    
    // Obtener tasa de cambio del sistema
    fetch(`{{ route('admin.purchases.expenses.exchange-rate') }}?currency=${currency}&date=${date}`)
        .then(response => response.json())
        .then(data => {
            document.getElementById('exchange_rate').value = data.rate.toFixed(4);
        })
        .catch(error => {
            console.error('Error al obtener tasa de cambio:', error);
            document.getElementById('exchange_rate').value = '1.0000';
        });
}

// Calcular total al cargar la página
document.addEventListener('DOMContentLoaded', function() {
    calculateTotal();
    updateAccountingInfo();
    updateExchangeRate();
    
    // Actualizar tasa de cambio cuando cambie la fecha
    document.getElementById('expense_date').addEventListener('change', updateExchangeRate);
});
</script>
@endpush