@extends('layouts.app')

@section('title', 'Nuevo Presupuesto')

@section('content')
<div class="container-fluid">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.accounting.budgets.index') }}">Presupuestos</a></li>
            <li class="breadcrumb-item active">Nuevo Presupuesto</li>
        </ol>
    </nav>

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">
                <i class="fas fa-chart-pie text-primary me-2"></i>Nuevo Presupuesto
            </h1>
            <p class="text-muted mb-0">Crear un nuevo presupuesto contable</p>
        </div>
        <div>
            <a href="{{ route('admin.accounting.budgets.index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Volver
            </a>
        </div>
    </div>

    <form action="{{ route('admin.accounting.budgets.store') }}" method="POST" id="budget-form">
        @csrf
        
        <div class="row">
            <div class="col-md-12">
                <!-- Información Básica -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-info-circle me-2"></i>Información Básica
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="name" class="form-label">Nombre del Presupuesto <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="name" name="name" 
                                       value="{{ old('name') }}" placeholder="Ej: Presupuesto 2024" required>
                                @error('name')
                                    <div class="text-danger small">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="budget_category_id" class="form-label">Categoría <span class="text-danger">*</span></label>
                                <select class="form-select" id="budget_category_id" name="budget_category_id" required>
                                    <option value="">Seleccionar categoría...</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}" {{ old('budget_category_id') == $category->id ? 'selected' : '' }}>
                                            {{ $category->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('budget_category_id')
                                    <div class="text-danger small">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label for="description" class="form-label">Descripción</label>
                                <textarea class="form-control" id="description" name="description" rows="3" 
                                          placeholder="Descripción del presupuesto...">{{ old('description') }}</textarea>
                                @error('description')
                                    <div class="text-danger small">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="budget_type" class="form-label">Tipo de Presupuesto <span class="text-danger">*</span></label>
                                <select class="form-select" id="budget_type" name="budget_type" required>
                                    <option value="">Seleccionar tipo...</option>
                                    <option value="annual" {{ old('budget_type') === 'annual' ? 'selected' : '' }}>Anual</option>
                                    <option value="quarterly" {{ old('budget_type') === 'quarterly' ? 'selected' : '' }}>Trimestral</option>
                                    <option value="monthly" {{ old('budget_type') === 'monthly' ? 'selected' : '' }}>Mensual</option>
                                </select>
                                @error('budget_type')
                                    <div class="text-danger small">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="start_date" class="form-label">Fecha de Inicio <span class="text-danger">*</span></label>
                                <input type="date" class="form-control" id="start_date" name="start_date" 
                                       value="{{ old('start_date', date('Y-m-d')) }}" required>
                                @error('start_date')
                                    <div class="text-danger small">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="end_date" class="form-label">Fecha de Fin <span class="text-danger">*</span></label>
                                <input type="date" class="form-control" id="end_date" name="end_date" 
                                       value="{{ old('end_date') }}" required>
                                @error('end_date')
                                    <div class="text-danger small">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="currency" class="form-label">Moneda <span class="text-danger">*</span></label>
                                <select class="form-select" id="currency" name="currency" required>
                                    <option value="USD" {{ old('currency', 'USD') === 'USD' ? 'selected' : '' }}>USD - Dólar Americano</option>
                                    <option value="EUR" {{ old('currency') === 'EUR' ? 'selected' : '' }}>EUR - Euro</option>
                                    <option value="VES" {{ old('currency') === 'VES' ? 'selected' : '' }}>VES - Bolívar Venezolano</option>
                                    <option value="COP" {{ old('currency') === 'COP' ? 'selected' : '' }}>COP - Peso Colombiano</option>
                                    <option value="MXN" {{ old('currency') === 'MXN' ? 'selected' : '' }}>MXN - Peso Mexicano</option>
                                </select>
                                @error('currency')
                                    <div class="text-danger small">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="exchange_rate" class="form-label">Tasa de Cambio <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" id="exchange_rate" name="exchange_rate" 
                                       value="{{ old('exchange_rate', '1.0000') }}" step="0.0001" min="0" required>
                                <small class="form-text text-muted">Tasa de cambio respecto a la moneda base (USD)</small>
                                @error('exchange_rate')
                                    <div class="text-danger small">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Items del Presupuesto -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3 d-flex justify-content-between align-items-center">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-list me-2"></i>Items del Presupuesto
                        </h6>
                        <button type="button" class="btn btn-sm btn-primary" id="add_item_btn">
                            <i class="fas fa-plus me-1"></i>Agregar Item
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="items_table">
                                <thead class="table-light">
                                    <tr>
                                        <th width="5%">#</th>
                                        <th width="25%">Cuenta Contable <span class="text-danger">*</span></th>
                                        <th width="20%">Código</th>
                                        <th width="20%">Monto Presupuestado <span class="text-danger">*</span></th>
                                        <th width="25%">Notas</th>
                                        <th width="5%">Acción</th>
                                    </tr>
                                </thead>
                                <tbody id="items_tbody">
                                    <!-- Los items se agregarán aquí dinámicamente -->
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="3" class="text-end"><strong>Total:</strong></td>
                                        <td colspan="3">
                                            <strong id="grand_total">0.00</strong>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        <div id="no_items_message" class="text-center py-4">
                            <i class="fas fa-list fa-2x text-muted mb-3"></i>
                            <p class="text-muted">No hay items agregados. Haz clic en "Agregar Item" para comenzar.</p>
                        </div>
                    </div>
                </div>

                <!-- Botones de Acción -->
                <div class="card shadow mb-4">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <a href="{{ route('admin.accounting.budgets.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times me-2"></i>Cancelar
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-2"></i>Guardar Presupuesto
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Modal de Búsqueda de Cuentas Contables -->
<div class="modal fade" id="accountSearchModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Buscar Cuenta Contable</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <input type="text" class="form-control" id="account_search_input" placeholder="Buscar por código o nombre...">
                </div>
                <div id="account_search_results" class="list-group" style="max-height: 400px; overflow-y: auto;">
                    <div class="list-group-item text-center text-muted">
                        <i class="fas fa-search fa-2x mb-2"></i>
                        <p>Ingresa al menos 2 caracteres para buscar cuentas</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .amount-input {
        text-align: right;
    }
    #grand_total {
        font-size: 1.2em;
        color: #28a745;
        text-align: right;
    }
    .list-group-item {
        cursor: pointer;
    }
    .list-group-item:hover {
        background-color: #f8f9fa;
    }
    .account-item {
        cursor: pointer;
        transition: background-color 0.2s;
    }
    .account-item:hover {
        background-color: #e3f2fd;
    }
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    let itemIndex = 0;
    const accounts = @json($accounts);
    
    // Calcular totales
    function calculateTotals() {
        let grandTotal = 0;
        
        $('.amount-input').each(function() {
            const amount = parseFloat($(this).val()) || 0;
            grandTotal += amount;
        });
        
        $('#grand_total').text(grandTotal.toFixed(2));
        
        // Mostrar/ocultar mensaje de sin items
        if ($('#items_tbody tr').length === 0) {
            $('#no_items_message').show();
            $('#items_table').hide();
        } else {
            $('#no_items_message').hide();
            $('#items_table').show();
        }
    }
    
    // Event listeners para cálculos
    $(document).on('input', '.amount-input', calculateTotals);
    
    // Validar fechas
    $('#start_date').on('change', function() {
        const startDate = new Date($(this).val());
        const endDateInput = $('#end_date');
        
        if (startDate && endDateInput.val()) {
            const endDate = new Date(endDateInput.val());
            if (endDate <= startDate) {
                endDateInput.val('');
                alert('La fecha de fin debe ser posterior a la fecha de inicio');
            }
        }
        
        // Si es mensual, trimestral o anual, calcular fecha de fin automáticamente
        const budgetType = $('#budget_type').val();
        if (budgetType && startDate) {
            calculateEndDate(startDate, budgetType);
        }
    });
    
    $('#budget_type').on('change', function() {
        const startDate = $('#start_date').val();
        if (startDate) {
            calculateEndDate(new Date(startDate), $(this).val());
        }
    });
    
    function calculateEndDate(startDate, type) {
        if (!startDate || !type) return;
        
        const endDate = new Date(startDate);
        
        switch(type) {
            case 'monthly':
                endDate.setMonth(endDate.getMonth() + 1);
                endDate.setDate(endDate.getDate() - 1);
                break;
            case 'quarterly':
                endDate.setMonth(endDate.getMonth() + 3);
                endDate.setDate(endDate.getDate() - 1);
                break;
            case 'annual':
                endDate.setFullYear(endDate.getFullYear() + 1);
                endDate.setDate(endDate.getDate() - 1);
                break;
        }
        
        $('#end_date').val(endDate.toISOString().split('T')[0]);
    }
    
    // Abrir modal de búsqueda de cuentas
    $(document).on('click', '.search-account-btn', function() {
        const row = $(this).closest('tr');
        currentRow = row;
        $('#accountSearchModal').modal('show');
        $('#account_search_input').val('').focus();
    });
    
    let currentRow = null;
    
    // Buscar cuentas
    let accountSearchTimeout;
    $('#account_search_input').on('keyup', function() {
        const search = $(this).val().trim().toLowerCase();
        
        clearTimeout(accountSearchTimeout);
        
        if (search.length < 2) {
            $('#account_search_results').html('<div class="list-group-item text-center text-muted"><i class="fas fa-search fa-2x mb-2"></i><p>Ingresa al menos 2 caracteres para buscar cuentas</p></div>');
            return;
        }
        
        accountSearchTimeout = setTimeout(function() {
            searchAccounts(search);
        }, 300);
    });
    
    function searchAccounts(query) {
        const filtered = accounts.filter(function(account) {
            const code = (account.code || '').toLowerCase();
            const name = (account.name || '').toLowerCase();
            return code.includes(query) || name.includes(query);
        });
        
        displayAccountResults(filtered);
    }
    
    function displayAccountResults(filteredAccounts) {
        if (filteredAccounts.length === 0) {
            $('#account_search_results').html('<div class="list-group-item text-center text-muted">No se encontraron cuentas</div>');
            return;
        }
        
        let html = '';
        filteredAccounts.forEach(function(account) {
            html += `
                <div class="list-group-item account-item" data-account-id="${account.id}" style="cursor: pointer;">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h6 class="mb-1">${account.code || 'N/A'} - ${account.name || 'N/A'}</h6>
                            <small class="text-muted">Tipo: ${account.type || 'N/A'}</small>
                        </div>
                        <button type="button" class="btn btn-sm btn-primary select-account-btn" data-account='${JSON.stringify(account)}'>
                            <i class="fas fa-check"></i> Seleccionar
                        </button>
                    </div>
                </div>
            `;
        });
        
        $('#account_search_results').html(html);
    }
    
    // Seleccionar cuenta
    $(document).on('click', '.select-account-btn, .account-item', function(e) {
        e.stopPropagation();
        const btn = $(this).hasClass('select-account-btn') ? $(this) : $(this).find('.select-account-btn');
        const accountData = btn.length ? JSON.parse(btn.data('account')) : null;
        
        if (!accountData && $(this).data('account-id')) {
            const accountId = $(this).data('account-id');
            const account = accounts.find(a => a.id == accountId);
            if (account) {
                accountData = account;
            }
        }
        
        if (accountData && currentRow) {
            currentRow.find('input[name*="[account_id]"]').val(accountData.id);
            currentRow.find('.account-code').text(accountData.code || 'N/A');
            currentRow.find('.account-name').text(accountData.name || 'N/A');
            currentRow.find('.account-code-display').text(accountData.code || 'N/A');
            $('#accountSearchModal').modal('hide');
            $('#account_search_input').val('');
            $('#account_search_results').html('<div class="list-group-item text-center text-muted"><i class="fas fa-search fa-2x mb-2"></i><p>Ingresa al menos 2 caracteres para buscar cuentas</p></div>');
            currentRow = null;
        }
    });
    
    // Agregar item
    $('#add_item_btn').click(function() {
        addItemRow();
    });
    
    function addItemRow() {
        const row = `
            <tr>
                <td>${itemIndex + 1}</td>
                <td>
                    <input type="hidden" name="items[${itemIndex}][account_id]" value="">
                    <div class="d-flex align-items-center">
                        <span class="account-code text-muted me-2">-</span>
                        <span class="account-name text-muted">Seleccionar cuenta</span>
                        <button type="button" class="btn btn-sm btn-outline-primary ms-2 search-account-btn">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </td>
                <td>
                    <span class="account-code-display text-muted">-</span>
                </td>
                <td>
                    <input type="number" name="items[${itemIndex}][budgeted_amount]" 
                           class="form-control amount-input" 
                           value="0" 
                           step="0.01" min="0" required>
                </td>
                <td>
                    <input type="text" name="items[${itemIndex}][notes]" 
                           class="form-control" 
                           placeholder="Notas opcionales...">
                </td>
                <td>
                    <button type="button" class="btn btn-sm btn-danger remove-item">
                        <i class="fas fa-trash"></i>
                    </button>
                </td>
            </tr>
        `;
        
        $('#items_tbody').append(row);
        itemIndex++;
        calculateTotals();
    }
    
    // Actualizar código cuando se selecciona cuenta
    $(document).on('change', 'input[name*="[account_id]"]', function() {
        const accountId = $(this).val();
        const account = accounts.find(a => a.id == accountId);
        if (account) {
            const row = $(this).closest('tr');
            row.find('.account-code').text(account.code || 'N/A');
            row.find('.account-name').text(account.name || 'N/A');
            row.find('.account-code-display').text(account.code || 'N/A');
        }
    });
    
    // Remover item
    $(document).on('click', '.remove-item', function() {
        if (confirm('¿Estás seguro de eliminar este item?')) {
            $(this).closest('tr').remove();
            // Renumerar filas
            $('#items_tbody tr').each(function(index) {
                $(this).find('td:first').text(index + 1);
            });
            calculateTotals();
        }
    });
    
    // Validar formulario antes de enviar
    $('#budget-form').on('submit', function(e) {
        if ($('#items_tbody tr').length === 0) {
            e.preventDefault();
            alert('Debes agregar al menos un item al presupuesto');
            return false;
        }
        
        // Validar que todos los items tengan cuenta y monto
        let isValid = true;
        let invalidRows = [];
        
        $('#items_tbody tr').each(function(index) {
            const accountId = $(this).find('input[name*="[account_id]"]').val();
            const amount = parseFloat($(this).find('.amount-input').val()) || 0;
            
            if (!accountId || accountId === '') {
                isValid = false;
                invalidRows.push(index + 1);
            }
            
            if (amount <= 0) {
                isValid = false;
                invalidRows.push(index + 1);
            }
        });
        
        if (!isValid) {
            e.preventDefault();
            alert('Todos los items deben tener una cuenta contable seleccionada y un monto mayor a cero. Revise las filas: ' + invalidRows.join(', '));
            return false;
        }
        
        // Validar fecha de fin
        const startDate = new Date($('#start_date').val());
        const endDate = new Date($('#end_date').val());
        
        if (endDate <= startDate) {
            e.preventDefault();
            alert('La fecha de fin debe ser posterior a la fecha de inicio');
            return false;
        }
    });
});
</script>
@endpush