@extends('layouts.app')

@section('title', 'Nueva Retención de Compra')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="card-title">
                            <i class="fas fa-hand-holding-usd mr-2"></i>
                            Nueva Retención de Compra
                        </h3>
                        <div>
                            <a href="{{ route('admin.purchases.retentions.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left mr-1"></i>
                                Volver al Listado
                            </a>
                        </div>
                    </div>
                </div>

                <form action="{{ route('admin.purchases.retentions.store') }}" method="POST">
                    @csrf
                    <div class="card-body">
                        <!-- Información General -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="mb-0"><i class="fas fa-info-circle mr-2"></i>Información General</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label for="supplier_id">Proveedor <span class="text-danger">*</span></label>
                                            <select name="supplier_id" id="supplier_id" class="form-control @error('supplier_id') is-invalid @enderror" required>
                                                <option value="">Seleccionar Proveedor</option>
                                                @foreach($suppliers as $supplier)
                                                    <option value="{{ $supplier->id }}" {{ old('supplier_id') == $supplier->id ? 'selected' : '' }}>
                                                        {{ $supplier->business_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('supplier_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label for="purchase_invoice_id">Factura de Compra <span class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <input type="text" id="selected_invoice_display" class="form-control" placeholder="Seleccionar factura..." readonly>
                                                <input type="hidden" name="purchase_invoice_id" id="purchase_invoice_id">
                                                <button type="button" class="btn btn-outline-primary" id="searchInvoiceBtn">
                                                    <i class="fas fa-search me-1"></i>Buscar Factura
                                                </button>
                                            </div>
                                            @error('purchase_invoice_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label for="retention_date">Fecha de Retención <span class="text-danger">*</span></label>
                                            <input type="date" name="retention_date" id="retention_date" class="form-control @error('retention_date') is-invalid @enderror" value="{{ old('retention_date', date('Y-m-d')) }}" required>
                                            @error('retention_date')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="mb-0"><i class="fas fa-calculator mr-2"></i>Detalles de Retención</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label for="retention_type">Tipo de Retención <span class="text-danger">*</span></label>
                                            <select name="retention_type" id="retention_type" class="form-control @error('retention_type') is-invalid @enderror" required>
                                                <option value="">Seleccionar Tipo</option>
                                                <option value="renta" {{ old('retention_type') == 'renta' ? 'selected' : '' }}>Renta</option>
                                                <option value="iva" {{ old('retention_type') == 'iva' ? 'selected' : '' }}>IVA</option>
                                                <option value="ica" {{ old('retention_type') == 'ica' ? 'selected' : '' }}>ICA</option>
                                                <option value="cree" {{ old('retention_type') == 'cree' ? 'selected' : '' }}>CREE</option>
                                            </select>
                                            @error('retention_type')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label for="retention_percentage">Porcentaje de Retención <span class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <input type="number" name="retention_percentage" id="retention_percentage" 
                                                       class="form-control @error('retention_percentage') is-invalid @enderror" 
                                                       value="{{ old('retention_percentage') }}" 
                                                       min="0" max="100" step="0.01" required>
                                                <div class="input-group-append">
                                                    <span class="input-group-text">%</span>
                                                </div>
                                            </div>
                                            @error('retention_percentage')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label for="retention_amount">Monto de Retención <span class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">$</span>
                                                </div>
                                                <input type="number" name="retention_amount" id="retention_amount" 
                                                       class="form-control @error('retention_amount') is-invalid @enderror" 
                                                       value="{{ old('retention_amount') }}" 
                                                       min="0" step="0.01" required>
                                            </div>
                                            @error('retention_amount')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Descripción y Notas -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="mb-0"><i class="fas fa-comment mr-2"></i>Descripción y Notas</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label for="description">Descripción <span class="text-danger">*</span></label>
                                            <input type="text" name="description" id="description" class="form-control @error('description') is-invalid @enderror" value="{{ old('description') }}" placeholder="Ej: Retención en la fuente por servicios" required>
                                            @error('description')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label for="notes">Notas Adicionales</label>
                                            <textarea name="notes" id="notes" class="form-control @error('notes') is-invalid @enderror" rows="3" placeholder="Notas adicionales sobre la retención">{{ old('notes') }}</textarea>
                                            @error('notes')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Información de la Factura -->
                        <div class="row mb-4" id="invoice-info" style="display: none;">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="mb-0"><i class="fas fa-file-invoice mr-2"></i>Información de la Factura</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <strong>N° Factura:</strong><br>
                                                <span id="invoice-number" class="text-primary">-</span>
                                            </div>
                                            <div class="col-md-4">
                                                <strong>Total Factura:</strong><br>
                                                <span id="invoice-total" class="text-success">-</span>
                                            </div>
                                            <div class="col-md-4">
                                                <strong>Fecha Factura:</strong><br>
                                                <span id="invoice-date">-</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-footer">
                        <div class="d-flex justify-content-between">
                            <a href="{{ route('admin.purchases.retentions.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times mr-1"></i>
                                Cancelar
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save mr-1"></i>
                                Crear Retención
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Búsqueda de Facturas -->
@include('components.invoice-search-modal')

@endsection

@push('scripts')
<script>
// Versión simplificada sin jQuery para el modal
document.addEventListener('DOMContentLoaded', function() {
    console.log('Script cargado');
    
    // Pasar facturas desde PHP a JavaScript
    window.invoicesBySupplier = @json($invoices);
    console.log('Facturas cargadas:', window.invoicesBySupplier.length);
    
    // Abrir modal de búsqueda de facturas - versión sin jQuery
    const searchBtn = document.getElementById('searchInvoiceBtn');
    if (searchBtn) {
        searchBtn.addEventListener('click', function() {
            console.log('Botón clickeado');
            const modalElement = document.getElementById('invoiceSearchModal');
            if (modalElement) {
                console.log('Modal encontrado');
                const modal = new bootstrap.Modal(modalElement);
                modal.show();
            } else {
                console.error('Modal no encontrado');
            }
        });
    } else {
        console.error('Botón no encontrado');
    }
    
    // Callback cuando se selecciona una factura
    window.onInvoiceSelected = function(invoice) {
        $('#purchase_invoice_id').val(invoice.id);
        $('#selected_invoice_display').val(`${invoice.invoice_number} - ${invoice.supplier_name} - $${invoice.total_amount}`);
        
        // Mostrar información de la factura
        showInvoiceInfo(invoice);
    };
    
    // Función para mostrar información de la factura
    function showInvoiceInfo(invoice) {
        $('#invoice-number').text(invoice.invoice_number);
        $('#invoice-total').text('$' + parseFloat(invoice.total_amount).toFixed(2) + ' ' + invoice.currency);
        $('#invoice-date').text(formatDate(invoice.invoice_date));
        $('#invoice-info').show();
        
        // Calcular retención automáticamente si hay porcentaje
        calculateRetention();
    }
    
    // Función para formatear fecha
    function formatDate(dateString) {
        if (!dateString) return '-';
        const date = new Date(dateString);
        return date.toLocaleDateString('es-ES');
    }
    
    // Calcular retención cuando cambia el porcentaje
    $('#retention_percentage').on('input', function() {
        calculateRetention();
    });
    
    function calculateRetention() {
        const percentage = parseFloat($('#retention_percentage').val()) || 0;
        const invoiceTotal = parseFloat($('#purchase_invoice_id').val() ? 
            window.invoicesBySupplier.find(inv => inv.id == $('#purchase_invoice_id').val())?.total_amount : 0) || 0;
        
        if (percentage > 0 && invoiceTotal > 0) {
            const retentionAmount = (invoiceTotal * percentage) / 100;
            $('#retention_amount').val(retentionAmount.toFixed(2));
        }
    }
});
</script>
@endpush