@extends('layouts.app', ['title' => 'Categoria Conta'])

@section('content')
<div class="mt-4 container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">Criar Categoria (OFX)</h4>
                    <a href="{{ route('conciliacao-bancaria.index', ['empresa_id' => $empresaId]) }}" class="btn btn-secondary btn-sm">
                        Voltar
                    </a>
                </div>
                <div class="card-body">
                    <div class="row g-2 align-items-end">
                        <div class="col-md-6">
                            <label class="form-label">Nome</label>
                            <input type="text" id="cat-nome" class="form-control" placeholder="Ex: Tarifa bancária">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Tipo</label>
                            <select id="cat-tipo" class="form-select">
                                <option value="pagar">Pagar (Débito)</option>
                                <option value="receber">Receber (Crédito)</option>
                            </select>
                        </div>
                        <div class="col-md-3 d-grid">
                            <button class="btn btn-primary" id="btn-criar-cat">Criar</button>
                        </div>
                    </div>

                    <hr class="my-4">

                    <h5 class="mb-3">Categorias da empresa</h5>
                    <div class="table-responsive">
                        <table class="table table-sm table-striped align-middle">
                            <thead>
                                <tr>
                                    <th style="width: 90px;">ID</th>
                                    <th>Nome</th>
                                    <th style="width: 120px;">Tipo</th>
                                    <th style="width: 120px;">Status</th>
                                </tr>
                            </thead>
                            <tbody id="tbl-categorias">
                                @foreach($categorias as $c)
                                <tr>
                                    <td>{{ $c->id }}</td>
                                    <td>{{ $c->nome }}</td>
                                    <td>{{ $c->tipo }}</td>
                                    <td>{{ $c->status ? 'Ativo' : 'Inativo' }}</td>
                                </tr>
                                @endforeach
                                @if($categorias->isEmpty())
                                <tr>
                                    <td colspan="4" class="text-center text-muted py-4">Nenhuma categoria cadastrada</td>
                                </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script>
(function(){
    function getCsrf(){
        var el = document.querySelector('meta[name="csrf-token"]');
        return el ? el.getAttribute('content') : '';
    }

    function appendRow(c){
        var tbody = document.getElementById('tbl-categorias');
        if(!tbody) return;
        var tr = document.createElement('tr');
        tr.innerHTML = '<td>' + c.id + '</td><td>' + c.nome + '</td><td>' + c.tipo + '</td><td>Ativo</td>';
        tbody.prepend(tr);
    }

    document.getElementById('btn-criar-cat').addEventListener('click', function(){
        var nome = (document.getElementById('cat-nome').value || '').trim();
        var tipo = document.getElementById('cat-tipo').value;
        if(!nome){
            alert('Informe o nome da categoria.');
            return;
        }

        fetch('{{ route('categoria-conta.ajax') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': getCsrf(),
                'Accept': 'application/json'
            },
            body: JSON.stringify({ empresa_id: {{ (int)$empresaId }}, nome: nome, tipo: tipo })
        })
        .then(r => r.json())
        .then(function(res){
            if(!res || !res.success){
                alert((res && res.message) ? res.message : 'Não foi possível criar.');
                return;
            }
            appendRow(res.data);
            document.getElementById('cat-nome').value = '';
        })
        .catch(function(){
            alert('Erro de comunicação.');
        });
    });
})();
</script>
@endsection