@extends('layouts.app')

@section('title', 'Nuova Registrazione Contabile')

@section('content')
<div class="container-fluid">
    <h1>Nuova Registrazione Contabile</h1>

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('contabilita.store') }}" method="POST" id="contabilita-form">
        @csrf
        <div class="card">
            <div class="card-body">
                <div class="form-group">
                    <label for="data_registrazione">Data Registrazione</label>
                    <input type="date" name="data_registrazione" id="data_registrazione" class="form-control" value="{{ old('data_registrazione', date('Y-m-d')) }}" required>
                </div>
                <div class="form-group">
                    <label for="descrizione">Descrizione</label>
                    <input type="text" name="descrizione" id="descrizione" class="form-control" value="{{ old('descrizione') }}" required>
                </div>

                <h4 class="mt-4">Movimenti</h4>
                <div id="movimenti-container">
                    {{-- Movimenti will be added here by JavaScript --}}
                </div>
                <button type="button" id="add-movimento" class="btn btn-secondary mt-2"><i class="fas fa-plus"></i> Aggiungi Movimento</button>

                <div class="row mt-3">
                    <div class="col text-right">
                        <strong>Totale Dare: <span id="total-dare">0.00</span> €</strong>
                    </div>
                    <div class="col text-right">
                        <strong>Totale Avere: <span id="total-avere">0.00</span> €</strong>
                    </div>
                     <div class="col text-right">
                        <strong>Sbilancio: <span id="sbilancio">0.00</span> €</strong>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <button type="submit" class="btn btn-primary">Salva Registrazione</button>
                <a href="{{ route('contabilita.index') }}" class="btn btn-secondary">Annulla</a>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const container = document.getElementById('movimenti-container');
    const addButton = document.getElementById('add-movimento');
    const conti = @json($conti);
    let movimentoIndex = 0;

    function addMovimentoRow(movimento = null) {
        const index = movimentoIndex++;
        const row = document.createElement('div');
        row.className = 'row mb-2 movimento-row';
        
        let options = conti.map(c => `<option value="${c.id}" ${movimento && movimento.conto_id == c.id ? 'selected' : ''}>${c.codice} - ${c.descrizione}</option>`).join('');
        
        row.innerHTML = `
            <div class="col-md-5">
                <select name="movimenti[${index}][conto_id]" class="form-control" required>
                    <option value="">Seleziona Conto</option>
                    ${options}
                </select>
            </div>
            <div class="col-md-3">
                <input type="number" name="movimenti[${index}][importo]" class="form-control importo" placeholder="Importo" step="0.01" min="0" required value="${movimento ? movimento.importo : ''}">
            </div>
            <div class="col-md-3">
                <select name="movimenti[${index}][tipo]" class="form-control tipo">
                    <option value="dare" ${movimento && movimento.tipo == 'dare' ? 'selected' : ''}>Dare</option>
                    <option value="avere" ${movimento && movimento.tipo == 'avere' ? 'selected' : ''}>Avere</option>
                </select>
            </div>
            <div class="col-md-1">
                <button type="button" class="btn btn-danger remove-movimento"><i class="fas fa-trash"></i></button>
            </div>
        `;
        container.appendChild(row);
    }

    function updateTotals() {
        let totalDare = 0;
        let totalAvere = 0;
        document.querySelectorAll('.movimento-row').forEach(row => {
            const importo = parseFloat(row.querySelector('.importo').value) || 0;
            const tipo = row.querySelector('.tipo').value;
            if (tipo === 'dare') {
                totalDare += importo;
            } else {
                totalAvere += importo;
            }
        });
        document.getElementById('total-dare').textContent = totalDare.toFixed(2);
        document.getElementById('total-avere').textContent = totalAvere.toFixed(2);
        const sbilancio = totalDare - totalAvere;
        const sbilancioEl = document.getElementById('sbilancio');
        sbilancioEl.textContent = sbilancio.toFixed(2);
        sbilancioEl.style.color = Math.abs(sbilancio) > 0.001 ? 'red' : 'green';
    }

    addButton.addEventListener('click', () => addMovimentoRow());

    container.addEventListener('click', function(e) {
        if (e.target.closest('.remove-movimento')) {
            e.target.closest('.movimento-row').remove();
            updateTotals();
        }
    });

    container.addEventListener('input', function(e) {
        if (e.target.classList.contains('importo') || e.target.classList.contains('tipo')) {
            updateTotals();
        }
    });

    // Add initial rows
    addMovimentoRow();
    addMovimentoRow();
});
</script>
@endpush