@extends('layouts.app')

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

@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 Venta
                        </h3>
                        <div>
                            <a href="{{ route('admin.sales.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.sales.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="client_id">Cliente <span class="text-danger">*</span></label>
                                            <select name="client_id" id="client_id" class="form-control @error('client_id') is-invalid @enderror" required>
                                                <option value="">Seleccionar Cliente</option>
                                                @foreach($clients as $client)
                                                    <option value="{{ $client->id }}" {{ old('client_id') == $client->id ? 'selected' : '' }}>
                                                        {{ $client->business_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('client_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label for="sales_invoice_id">Factura de Venta <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="sales_invoice_id" id="sales_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('sales_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</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">$</span>
                                                </div>
                                                <input type="text" id="retention_amount" 
                                                       class="form-control" 
                                                       value="0.00" 
                                                       readonly>
                                            </div>
                                            <small class="form-text text-muted">Este monto se calcula automáticamente basado en el IVA de la factura y el porcentaje de retención.</small>
                                        </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="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.sales.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
    @php
        $invoicesData = $invoices->map(function($invoice) {
            return [
                'id' => $invoice->id,
                'invoice_number' => $invoice->invoice_number,
                'client_id' => $invoice->client_id,
                'client' => $invoice->client ? ['id' => $invoice->client->id, 'business_name' => $invoice->client->business_name] : null,
                'client_name' => ($invoice->client ? $invoice->client->business_name : 'N/A'),
                'total_amount' => $invoice->total_amount,
                'total_amount_usd' => ($invoice->total_amount_usd ?? $invoice->total_amount),
                'currency' => ($invoice->currency ?? 'USD'),
                'invoice_date' => ($invoice->invoice_date ? $invoice->invoice_date->format('Y-m-d') : null),
                'tax_amount' => ($invoice->tax_amount ?? 0),
                'status' => $invoice->status ?? 'pending',
            ];
        })->values();
    @endphp
    window.invoicesByClient = @json($invoicesData);
    console.log('Facturas cargadas:', window.invoicesByClient.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) {
        document.getElementById('sales_invoice_id').value = invoice.id;
        const clientName = invoice.client_name || invoice.supplier_name || 'N/A';
        document.getElementById('selected_invoice_display').value = `${invoice.invoice_number} - ${clientName} - $${invoice.total_amount}`;
        
        // Mostrar información de la factura
        showInvoiceInfo(invoice);
    };
    
    // Función para mostrar información de la factura
    function showInvoiceInfo(invoice) {
        document.getElementById('invoice-number').textContent = invoice.invoice_number;
        document.getElementById('invoice-total').textContent = '$' + parseFloat(invoice.total_amount_usd || invoice.total_amount).toFixed(2) + ' ' + invoice.currency;
        document.getElementById('invoice-date').textContent = formatDate(invoice.invoice_date);
        document.getElementById('invoice-info').style.display = 'block';
        
        // 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
    const retentionPercentageInput = document.getElementById('retention_percentage');
    if (retentionPercentageInput) {
        retentionPercentageInput.addEventListener('input', function() {
            calculateRetention();
        });
    }
    
    function calculateRetention() {
        const percentage = parseFloat(document.getElementById('retention_percentage')?.value) || 0;
        const invoiceId = document.getElementById('sales_invoice_id')?.value;
        
        if (percentage > 0 && invoiceId) {
            const invoice = window.invoicesByClient.find(inv => inv.id == invoiceId);
            if (invoice) {
                // Calcular retención basada en el IVA de la factura
                const taxAmount = parseFloat(invoice.tax_amount) || 0;
                const retentionAmount = (taxAmount * percentage) / 100;
                document.getElementById('retention_amount').value = retentionAmount.toFixed(2);
            }
        }
    }
});
</script>
@endpush