@extends('layouts.app')

@section('title', 'Generar Estado Financiero')

@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>Generar Estado Financiero
                    </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.financial-statements.store') }}" method="POST" id="financialStatementForm">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="statement_type" class="form-label">Tipo de Estado Financiero <span class="text-danger">*</span></label>
                                    <select class="form-control @error('statement_type') is-invalid @enderror" 
                                            id="statement_type" 
                                            name="statement_type" 
                                            required>
                                        <option value="">Seleccionar tipo...</option>
                                        <option value="balance_sheet" {{ old('statement_type') == 'balance_sheet' ? 'selected' : '' }}>
                                            <i class="fas fa-balance-scale me-1"></i>Balance General
                                        </option>
                                        <option value="income_statement" {{ old('statement_type') == 'income_statement' ? 'selected' : '' }}>
                                            <i class="fas fa-chart-line me-1"></i>Estado de Resultados
                                        </option>
                                        <option value="cash_flow" {{ old('statement_type') == 'cash_flow' ? 'selected' : '' }}>
                                            <i class="fas fa-money-bill-wave me-1"></i>Estado de Flujo de Efectivo
                                        </option>
                                        <option value="equity_statement" {{ old('statement_type') == 'equity_statement' ? 'selected' : '' }}>
                                            <i class="fas fa-users me-1"></i>Estado de Patrimonio
                                        </option>
                                    </select>
                                    @error('statement_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <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>
                        
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label for="title" class="form-label">Título del Estado</label>
                                    <input type="text" 
                                           class="form-control @error('title') is-invalid @enderror" 
                                           id="title" 
                                           name="title" 
                                           value="{{ old('title') }}" 
                                           placeholder="Título personalizado (opcional)">
                                    @error('title')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">Si no se especifica, se usará el título por defecto según el tipo de estado.</small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group 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 para el estado financiero...">{{ old('notes') }}</textarea>
                                    @error('notes')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        {{-- Opciones de formato --}}
                        <div class="row">
                            <div class="col-md-12">
                                <h5><i class="fas fa-cog me-2"></i>Opciones de Formato</h5>
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-check mb-3">
                                            <input class="form-check-input" 
                                                   type="checkbox" 
                                                   id="include_comparative" 
                                                   name="include_comparative" 
                                                   value="1" 
                                                   {{ old('include_comparative') ? 'checked' : '' }}>
                                            <label class="form-check-label" for="include_comparative">
                                                Incluir período comparativo
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-check mb-3">
                                            <input class="form-check-input" 
                                                   type="checkbox" 
                                                   id="include_percentages" 
                                                   name="include_percentages" 
                                                   value="1" 
                                                   {{ old('include_percentages') ? 'checked' : '' }}>
                                            <label class="form-check-label" for="include_percentages">
                                                Incluir porcentajes
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-check mb-3">
                                            <input class="form-check-input" 
                                                   type="checkbox" 
                                                   id="include_notes" 
                                                   name="include_notes" 
                                                   value="1" 
                                                   {{ old('include_notes') ? 'checked' : '' }}>
                                            <label class="form-check-label" for="include_notes">
                                                Incluir notas al pie
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        {{-- Información del estado seleccionado --}}
                        <div class="row" id="statementInfo" style="display: none;">
                            <div class="col-md-12">
                                <div class="alert alert-info">
                                    <h6><i class="fas fa-info-circle me-2"></i>Información del Estado Financiero</h6>
                                    <div id="statementDescription"></div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-end">
                            <a href="{{ route('admin.accounting.financial-statements.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="generateBtn">
                                <i class="fas fa-cog me-1"></i>Generar Estado
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const statementTypeSelect = document.getElementById('statement_type');
    const statementInfo = document.getElementById('statementInfo');
    const statementDescription = document.getElementById('statementDescription');
    
    const statementDescriptions = {
        'balance_sheet': `
            <p><strong>Balance General:</strong> Muestra la situación financiera de la empresa en un momento específico, 
            incluyendo activos, pasivos y patrimonio.</p>
            <ul>
                <li>Activos corrientes y no corrientes</li>
                <li>Pasivos corrientes y no corrientes</li>
                <li>Patrimonio de los accionistas</li>
            </ul>
        `,
        'income_statement': `
            <p><strong>Estado de Resultados:</strong> Muestra los ingresos, gastos y utilidades de la empresa 
            durante un período específico.</p>
            <ul>
                <li>Ingresos por ventas</li>
                <li>Costos de ventas</li>
                <li>Gastos operativos</li>
                <li>Utilidad neta</li>
            </ul>
        `,
        'cash_flow': `
            <p><strong>Estado de Flujo de Efectivo:</strong> Muestra los movimientos de efectivo de la empresa 
            durante un período específico.</p>
            <ul>
                <li>Flujo de efectivo operativo</li>
                <li>Flujo de efectivo de inversión</li>
                <li>Flujo de efectivo de financiación</li>
            </ul>
        `,
        'equity_statement': `
            <p><strong>Estado de Patrimonio:</strong> Muestra los cambios en el patrimonio de los accionistas 
            durante un período específico.</p>
            <ul>
                <li>Capital social</li>
                <li>Utilidades retenidas</li>
                <li>Reservas</li>
                <li>Distribuciones</li>
            </ul>
        `
    };
    
    statementTypeSelect.addEventListener('change', function() {
        const selectedType = this.value;
        
        if (selectedType && statementDescriptions[selectedType]) {
            statementDescription.innerHTML = statementDescriptions[selectedType];
            statementInfo.style.display = 'block';
        } else {
            statementInfo.style.display = 'none';
        }
    });
    
    // Mostrar información si ya hay un valor seleccionado
    if (statementTypeSelect.value) {
        statementTypeSelect.dispatchEvent(new Event('change'));
    }
});
</script>
@endpush
@endsection