@extends('layouts.app')

@section('title', 'Crear Asiento Contable')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-plus me-2"></i>Crear Asiento Contable
                    </h3>
                </div>
                <div class="card-body">
                    @if($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-circle me-2"></i>
                            <strong>Por favor corrige los siguientes errores:</strong>
                            <ul class="mb-0 mt-2">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    <form action="{{ route('admin.accounting.journal-entries.store') }}" method="POST" id="journalEntryForm">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group mb-3">
                                    <label for="entry_date" class="form-label">Fecha del Asiento <span class="text-danger">*</span></label>
                                    <input type="date" 
                                           class="form-control @error('entry_date') is-invalid @enderror" 
                                           id="entry_date" 
                                           name="entry_date" 
                                           value="{{ old('entry_date', now()->format('Y-m-d')) }}" 
                                           required>
                                    @error('entry_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-3">
                                <div class="form-group mb-3">
                                    <label for="period_id" class="form-label">Período Contable <span class="text-danger">*</span></label>
                                    <select class="form-control @error('period_id') is-invalid @enderror" 
                                            id="period_id" 
                                            name="period_id" 
                                            required>
                                        <option value="">Seleccionar período...</option>
                                        @foreach($periods as $period)
                                            <option value="{{ $period->id }}" {{ old('period_id') == $period->id ? 'selected' : '' }}>
                                                {{ $period->name }} ({{ $period->start_date->format('d/m/Y') }} - {{ $period->end_date->format('d/m/Y') }})
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('period_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-3">
                                <div class="form-group mb-3">
                                    <label for="reference" class="form-label">Referencia</label>
                                    <input type="text" 
                                           class="form-control @error('reference') is-invalid @enderror" 
                                           id="reference" 
                                           name="reference" 
                                           value="{{ old('reference') }}" 
                                           placeholder="Ej: INV-001">
                                    @error('reference')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-3">
                                <div class="form-group mb-3">
                                    <label for="status" class="form-label">Estado</label>
                                    <select class="form-control @error('status') is-invalid @enderror" 
                                            id="status" 
                                            name="status">
                                        <option value="draft" {{ old('status', 'draft') == 'draft' ? 'selected' : '' }}>Borrador</option>
                                        <option value="posted" {{ old('status') == 'posted' ? 'selected' : '' }}>Contabilizado</option>
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label for="description" class="form-label">Descripción</label>
                                    <textarea class="form-control @error('description') is-invalid @enderror" 
                                              id="description" 
                                              name="description" 
                                              rows="2" 
                                              placeholder="Descripción del asiento contable...">{{ old('description') }}</textarea>
                                    @error('description')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        {{-- Líneas del asiento --}}
                        <div class="row">
                            <div class="col-md-12">
                                <h5><i class="fas fa-list me-2"></i>Líneas del Asiento</h5>
                                <div class="table-responsive">
                                    <table class="table table-bordered" id="entryLinesTable">
                                        <thead class="table-dark">
                                            <tr>
                                                <th width="40%">Cuenta</th>
                                                <th width="20%">Debe</th>
                                                <th width="20%">Haber</th>
                                                <th width="15%">Descripción</th>
                                                <th width="5%">Acción</th>
                                            </tr>
                                        </thead>
                                        <tbody id="entryLinesBody">
                                            <tr>
                                                <td>
                                                    <select class="form-control account-select" name="lines[0][account_id]" required>
                                                        <option value="">Seleccionar cuenta...</option>
                                                        @foreach($accounts as $account)
                                                            <option value="{{ $account->id }}">{{ $account->code }} - {{ $account->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </td>
                                                <td>
                                                    <input type="number" class="form-control debit-input" name="lines[0][debit]" step="0.01" min="0" value="0">
                                                </td>
                                                <td>
                                                    <input type="number" class="form-control credit-input" name="lines[0][credit]" step="0.01" min="0" value="0">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" name="lines[0][description]" placeholder="Descripción">
                                                </td>
                                                <td>
                                                    <button type="button" class="btn btn-sm btn-danger remove-line" disabled>
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <button type="button" class="btn btn-success btn-sm" id="addLine">
                                        <i class="fas fa-plus me-1"></i>Agregar Línea
                                    </button>
                                    <div class="text-end">
                                        <strong>Total Debe: $<span id="totalDebit">0.00</span></strong><br>
                                        <strong>Total Haber: $<span id="totalCredit">0.00</span></strong><br>
                                        <span id="balanceStatus" class="badge bg-danger">No balanceado</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-end">
                            <a href="{{ route('admin.accounting.journal-entries.index') }}" class="btn btn-secondary me-2">
                                <i class="fas fa-times me-1"></i>Cancelar
                            </a>
                            <button type="submit" class="btn btn-primary" id="submitBtn" disabled>
                                <i class="fas fa-save me-1"></i>Crear Asiento
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    let lineIndex = 1;
    const accounts = @json($accounts);
    
    // Agregar nueva línea
    document.getElementById('addLine').addEventListener('click', function() {
        const tbody = document.getElementById('entryLinesBody');
        const newRow = document.createElement('tr');
        
        newRow.innerHTML = `
            <td>
                <select class="form-control account-select" name="lines[${lineIndex}][account_id]" required>
                    <option value="">Seleccionar cuenta...</option>
                    ${accounts.map(account => `<option value="${account.id}">${account.code} - ${account.name}</option>`).join('')}
                </select>
            </td>
            <td>
                <input type="number" class="form-control debit-input" name="lines[${lineIndex}][debit]" step="0.01" min="0" value="0">
            </td>
            <td>
                <input type="number" class="form-control credit-input" name="lines[${lineIndex}][credit]" step="0.01" min="0" value="0">
            </td>
            <td>
                <input type="text" class="form-control" name="lines[${lineIndex}][description]" placeholder="Descripción">
            </td>
            <td>
                <button type="button" class="btn btn-sm btn-danger remove-line">
                    <i class="fas fa-trash"></i>
                </button>
            </td>
        `;
        
        tbody.appendChild(newRow);
        lineIndex++;
        updateRemoveButtons();
    });
    
    // Remover línea
    document.addEventListener('click', function(e) {
        if (e.target.closest('.remove-line')) {
            e.target.closest('tr').remove();
            updateRemoveButtons();
            calculateTotals();
        }
    });
    
    // Calcular totales
    document.addEventListener('input', function(e) {
        if (e.target.classList.contains('debit-input') || e.target.classList.contains('credit-input')) {
            calculateTotals();
        }
    });
    
    function updateRemoveButtons() {
        const rows = document.querySelectorAll('#entryLinesBody tr');
        rows.forEach((row, index) => {
            const removeBtn = row.querySelector('.remove-line');
            removeBtn.disabled = rows.length <= 1;
        });
    }
    
    function calculateTotals() {
        let totalDebit = 0;
        let totalCredit = 0;
        
        document.querySelectorAll('.debit-input').forEach(input => {
            totalDebit += parseFloat(input.value) || 0;
        });
        
        document.querySelectorAll('.credit-input').forEach(input => {
            totalCredit += parseFloat(input.value) || 0;
        });
        
        document.getElementById('totalDebit').textContent = totalDebit.toFixed(2);
        document.getElementById('totalCredit').textContent = totalCredit.toFixed(2);
        
        const balanceStatus = document.getElementById('balanceStatus');
        const submitBtn = document.getElementById('submitBtn');
        
        if (Math.abs(totalDebit - totalCredit) < 0.01) {
            balanceStatus.textContent = 'Balanceado';
            balanceStatus.className = 'badge bg-success';
            submitBtn.disabled = false;
        } else {
            balanceStatus.textContent = 'No balanceado';
            balanceStatus.className = 'badge bg-danger';
            submitBtn.disabled = true;
        }
    }
    
    // Validación inicial
    calculateTotals();
});
</script>
@endpush
@endsection