@extends('layouts.admin-Lti')

@section('title', 'Gestão de Categorias de Despesas')

@section('content')
<div class="container-fluid">
    <!-- Cabeçalho -->
    <div class="row mb-4">
        <div class="col-md-12">
            <h2><i class="fa fa-tags"></i> Gestão de Categorias de Despesas</h2>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/home">Dashboard</a></li>
                <li class="breadcrumb-item active">Categorias de Despesas </li>
            </ol>
        </div>
    </div>

    <!-- Card Principal -->
    <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="fa fa-list"></i> Lista de Categorias
            </h6>
            <button class="btn btn-primary btn-sm btn-abrirmodalCrate" data-toggle="modal" data-target="#addCategoryModal">
                <i class="fa fa-plus-circle"></i> Nova Categoria
            </button>
        </div>
        <div class="card-body">
            @include('shared.alerts')
            <div class="table-responsive">
                <table id="categoriesTable" class="table table-bordered table-hover" width="100%" cellspacing="0">
                    <!-- Cabeçalho da tabela -->
                    <thead class="bg-primary text-white">
                        <tr>
                            <th width="5%">#</th>
                            <th>Nome</th>
                            <th>Descrição</th>
                            <th>Tipo</th>
                            <th>Estado</th>
                            <th width="15%">Ações</th>
                        </tr>
                    </thead>
                    <!-- Corpo da tabela -->
                    <tbody>
                        @foreach($categories as $category)
                        <tr>
                            <td>{{ $category->id }}</td>
                            <td>{{ $category->nome }}</td>
                            <td>{{ $category->descricao ?? 'N/A' }}</td>
                            <td>
                                <span class="badge badge-{{ $category->tipo === 'fixa' ? 'success' : 'info' }}">
                                    {{ ucfirst($category->tipo) }}
                                </span>
                            </td>
                            <td>
                                <span class="badge badge-{{ $category->is_active ? 'success' : 'secondary' }}">
                                    {{ $category->is_active ? 'Ativo' : 'Inativo' }}
                                </span>
                            </td>
                            <td class="text-center">
                                <button class="btn btn-sm btn-warning edit-category" data-id="{{ $category->id }}"  data-route="{{ route('gestao-despesas.categoriasDespesas.update',  $category->id  ) }}">
                                    <i class="fa fa-edit"  ></i>
                                </button>

                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Inclua os modais -->
{{-- @include('gestao_despesas.categoria.modals.create') --}}





<div class="modal fade" id="addCategoryModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">
                    <i class="fa fa-lg fa-plus-circle"></i> Nova Categoria
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>

                </button>
            </div>
            <form id="addCategoryForm" method="POST" action="{{ route('gestao-despesas.categoriasDespesas.store') }}">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label for="name">Nome da Categoria *</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                        <small class="form-text text-muted">Ex: Alimentação, Transporte, etc.</small>
                    </div>

                    <div class="form-group">
                        <label for="description">Descrição</label>
                        <textarea class="form-control" id="description" name="description" rows="2"></textarea>
                    </div>

                    <div class="form-group">
                        <label for="type">Tipo de Despesa *</label>
                        <select class="form-control" id="type" name="type" required>
                            <option value="fixa">Fixa</option>
                            <option value="variavel">Variável</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="is_active" name="is_active" value="1" checked>
                            <label class="custom-control-label" for="is_active">Categoria Ativa</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fa fa-lg fa-times"></i> Cancelar
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fa fa-lg fa-save"></i> Salvar
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>



@include('gestao_despesas.categoria.modals.edit')

<div class="modal fade" id="editCategoryModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-warning text-white">
                <h5 class="modal-title">
                    <i class="fa fa-lg fa-edit"></i> Editar Categoria
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="editCategoryForm" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <!-- Conteúdo será carregado via AJAX -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fa fa-lg fa-times"></i> Cancelar
                    </button>
                    <button type="submit" class="btn btn-warning">
                        <i class="fa fa-lg fa-save"></i> Atualizar
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
.alert {
    border-left: 4px solid transparent;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
}

.alert-success {
    border-left-color: #28a745;
    background-color: rgba(40, 167, 69, 0.1);
}

.alert-danger {
    border-left-color: #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
}

.alert ul {
    margin-bottom: 0;
}
</style>

@endsection

@section('script')
@push('script')
<!-- DataTables -->


<script>
$(document).ready(function() {
    // Configuração do DataTable
    $('#categoriesTable').DataTable({
        responsive: true,
        language: {
            url: "/myjson/pt_pt.json"
        }
    });

    // Abrir modal de criação - Solução garantida
    $(document).on('click', '.btn-abrirmodalCrate', function(e) {
        e.preventDefault();
        $('#addCategoryModal').modal('show');
    });
    // edit modal de criação - Solução garantida
   $(document).on('click', '.edit-category', function(e) {
    e.preventDefault();
    $('#editCategoryModal').modal('show');

    const tr = $(this).closest('tr');
    const table = $('#categoriesTable').DataTable();
    const row = tr.hasClass('child') ? tr.prev() : tr;
    const data = table.row(row).data();

    console.log('Dados da linha:', data);

    // Preencher campos
    $("[name='name_edit']").val(data[1]);
    $("[name='description_edit']").val(data[2]);

    if (data[3] && data[3].toLowerCase().includes("fixa")) {
        $("[name='type_edit']").val('fixa');
    } else {
        $("[name='type_edit']").val('variavel');
    }

    // Para checkbox (is_active_edit)
    const isActive = data[4] && data[4].toLowerCase().includes("ativo");
    $("[name='is_active_edit']").prop("checked", isActive);

     const route = $(this).data('route');
    $('#editCategoryForm').attr('action', route);

});
});

</script>
@endpush
@endsection

@section('styles')
<style>
    .table th {
        white-space: nowrap;
    }
    .badge {
        font-size: 90%;
        font-weight: 500;
    }
    .custom-switch {
        padding-left: 2.5rem;
    }
</style>
@endsection