@extends('layouts.app')

@section('title', 'Plano de Contas')

@push('styles-custom')
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <style>
        /* Remove estilo zebrado padrão */
        .table-striped tbody tr:nth-of-type(odd) {
            background-color: transparent;
        }

        /* Altura das linhas aumentada */
        .table td {
            padding: 0.875rem 0.75rem;
            vertical-align: middle;
        }

        .table th {
            padding: 0.875rem 0.75rem;
            vertical-align: middle;
        }

        /* Cores alternadas customizadas */
        .table tbody tr.row-even {
            background-color: #f8f9fa !important; /* Cinza bem claro */
        }

        .table tbody tr.row-odd {
            background-color: #ffffff !important; /* Branco */
        }

        /* Hover nas linhas */
        .table tbody tr:hover {
            background-color: rgba(var(--phoenix-primary-rgb), 0.15) !important;
        }

        /* DataTables customização */
        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: var(--phoenix-primary);
            color: white !important;
            border-color: var(--phoenix-primary);
        }

        .dataTables_wrapper .dataTables_processing {
            background-color: rgba(255, 255, 255, 0.9);
            border: 1px solid #ddd;
            border-radius: 0.375rem;
            padding: 20px;
        }

        /* Cards de filtro */
        .filter-card {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border: 1px solid #dee2e6;
            border-radius: 0.5rem;
        }

        /* Modal customização */
        .modal-backdrop {
            background-color: rgba(0, 0, 0, 0.6);
        }

        .modal-content {
            box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
            border: none;
            border-radius: 0.5rem;
        }

        .modal-header {
            border-bottom: 1px solid #dee2e6;
            background-color: #f8f9fa;
        }

        .modal-footer {
            border-top: 1px solid #dee2e6;
            background-color: #f8f9fa;
        }

        /* Scrollbar duplo */
        .table-responsive {
            position: relative;
        }

        .table-scroll-top {
            overflow-x: auto;
            overflow-y: hidden;
            height: 20px;
            margin-bottom: 10px;
        }

        .table-scroll-top-inner {
            height: 1px;
        }

        /* Badge customização */
        .badge-phoenix {
            font-size: 0.75rem;
            padding: 0.375rem 0.5rem;
            border-radius: 0.25rem;
        }

        /* Input group customização */
        .input-group .form-select {
            border-left: 0;
        }

        .input-group .form-control:focus,
        .input-group .form-select:focus {
            z-index: 3;
            border-color: var(--phoenix-primary);
            box-shadow: 0 0 0 0.25rem rgba(var(--phoenix-primary-rgb), 0.25);
        }

        /* Ícones dos filtros */
        .form-label .fas {
            font-size: 0.85rem;
            opacity: 0.8;
        }

        /* Cards com gradiente sutil */
        .filter-card {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #ffffff 100%);
            border: 1px solid #e3e6f0;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
        }

        /* Animações suaves */
        .badge, .btn, .form-control, .form-select {
            transition: all 0.2s ease-in-out;
        }

        /* Loading states */
        .btn.loading {
            pointer-events: none;
            opacity: 0.7;
        }

        /* Tooltip customizado */
        .tooltip-inner {
            background-color: var(--phoenix-primary);
            color: white;
            border-radius: 0.375rem;
            font-size: 0.75rem;
        }

        /* Estados dos filtros aplicados */
        .form-select.filter-applied,
        .form-control.filter-applied {
            border-color: var(--phoenix-primary);
            background-color: rgba(var(--phoenix-primary-rgb), 0.05);
        }

        .form-select.filter-applied:focus,
        .form-control.filter-applied:focus {
            border-color: var(--phoenix-primary);
            box-shadow: 0 0 0 0.25rem rgba(var(--phoenix-primary-rgb), 0.25);
        }
    </style>
@endpush

@section('content')
<div class="content pt-3">
    <nav class="mb-3" aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item active">Plano de Contas</li>
        </ol>
    </nav>

    <div class="mb-9">
        <!-- Título e Botão Adicionar -->
        <div class="row align-items-center justify-content-between g-3 mb-4">
            <div class="col-auto">
                <h2 class="mb-0">
                    <span class="fas fa-chart-pie text-primary me-3"></span>
                    Plano de Contas
                </h2>
                <p class="text-muted mt-2 mb-0">Gerencie os planos de contas do sistema</p>
            </div>
            <div class="col-auto">
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-primary" onclick="window.location='{{ route('planos.create') }}'">
                        <span class="fas fa-plus me-2"></span>Novo Plano de Conta
                    </button>
                </div>
            </div>
        </div>

        <!-- Card de Filtros -->
        <div class="card mb-4 filter-card">
            <div class="card-header bg-body-tertiary">
                <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center">
                        <span class="fas fa-filter text-primary me-2"></span>
                        <h5 class="mb-0">Filtros e Busca</h5>
                    </div>
                    <button type="button" id="btnLimparFiltros" class="btn btn-outline-secondary btn-sm">
                        <span class="fas fa-eraser me-1"></span>Limpar Tudo
                    </button>
                </div>
            </div>
            <div class="card-body">
                <form id="filterForm">
                    <div class="row g-3 align-items-end">
                        <!-- Filtros de Categoria -->
                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <label class="form-label small fw-semibold text-body-emphasis">
                                <span class="fas fa-exchange-alt text-primary me-1"></span>
                                Tipo
                            </label>
                            <select name="tipo_filter" id="filterTipo" class="form-select form-select-sm">
                                <option value="all">🔄 Todos</option>
                                <option value="E">📈 Entrada</option>
                                <option value="S">📉 Saída</option>
                            </select>
                        </div>

                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <label class="form-label small fw-semibold text-body-emphasis">
                                <span class="fas fa-layer-group text-primary me-1"></span>
                                Método
                            </label>
                            <select name="metodo_filter" id="filterMetodo" class="form-select form-select-sm">
                                <option value="all">🔄 Todos</option>
                                <option value="A">📊 Analítico</option>
                                <option value="S">📁 Sintético</option>
                            </select>
                        </div>

                        <!-- Busca Principal -->
                        <div class="col-lg-6 col-md-8">
                            <label class="form-label small fw-semibold text-body-emphasis">
                                <span class="fas fa-search text-primary me-1"></span>
                                Buscar
                            </label>
                            <div class="input-group input-group-sm">
                                <input
                                    id="searchInput"
                                    class="form-control"
                                    type="search"
                                    name="q"
                                    placeholder="Digite sua busca..."
                                >
                                <select name="search_field" id="searchField" class="form-select" style="max-width: 140px;">
                                    <option value="">🔍 Tudo</option>
                                    <option value="codigo">🏷️ Código</option>
                                    <option value="descricao">📝 Descrição</option>
                                    <option value="tipo">🔄 Tipo</option>
                                    <option value="metodo">📊 Método</option>
                                </select>
                                <button type="button" id="btnAplicarFiltros" class="btn btn-primary">
                                    <span class="fas fa-search"></span>
                                </button>
                            </div>
                        </div>

                        <!-- Configurações -->
                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <label class="form-label small fw-semibold text-body-emphasis">
                                <span class="fas fa-cog text-primary me-1"></span>
                                Por página
                            </label>
                            <select id="perPage" class="form-select form-select-sm">
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="100" selected>100</option>
                                <option value="250">250</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Tabela -->
        <div class="card">
            <div class="card-body">
                <!-- Scrollbar superior -->
                <div class="table-scroll-top">
                    <div class="table-scroll-top-inner"></div>
                </div>

                <div class="table-responsive" id="tableContainer">
                    <table id="planosTable" class="table table-sm fs-9 mb-0">
                        <thead class="bg-body-tertiary">
                            <tr>
                                <th>Código</th>
                                <th>Descrição</th>
                                <th>Tipo</th>
                                <th>Método</th>
                                <th>Criado em</th>
                                <th>Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Dados carregados via AJAX -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal de Exclusão -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">
                        <span class="fas fa-exclamation-triangle text-danger me-2"></span>
                        Confirmar Exclusão
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger">
                        <span class="fas fa-exclamation-triangle me-2"></span>
                        <strong>Atenção!</strong> Esta ação não pode ser desfeita.
                    </div>
                    <p>Tem certeza que deseja excluir o plano de conta <strong id="planoInfo"></strong>?</p>
                    <p class="text-muted small">
                        <span class="fas fa-info-circle me-1"></span>
                        Verifique se não há registros vinculados a este plano.
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <span class="fas fa-times me-2"></span>Cancelar
                    </button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                        <span class="fas fa-trash me-2"></span>Excluir Plano
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@push('scripts-custom')
    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

    <script>
        // Função para capturar todos os parâmetros de filtro atuais
        function getFilterParams() {
            const params = new URLSearchParams(window.location.search);
            const filters = {};

            // Captura todos os parâmetros da URL
            for (const [key, value] of params) {
                filters[key] = value;
            }

            // Captura também os valores atuais dos filtros no formulário
            filters.tipo_filter = $('#filterTipo').val() || 'all';
            filters.metodo_filter = $('#filterMetodo').val() || 'all';
            filters.search_field = $('#searchField').val() || '';
            filters.q = $('#searchInput').val() || '';

            return filters;
        }

        // Função para adicionar campos hidden com os filtros em um formulário
        function addFilterFieldsToForm(form, filters) {
            for (const [key, value] of Object.entries(filters)) {
                if (value && value !== 'all') {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = key;
                    input.value = value;
                    form.appendChild(input);
                }
            }
        }

        // Função para mostrar visualmente quais filtros estão aplicados
        function updateFilterStates() {
            const filters = getFilterParams();
            
            // Remove classes anteriores
            $('.form-select, .form-control').removeClass('filter-applied');
            
            // Aplica classes visuais para filtros ativos
            if (filters.tipo_filter && filters.tipo_filter !== 'all') {
                $('#filterTipo').addClass('filter-applied');
            }
            
            if (filters.metodo_filter && filters.metodo_filter !== 'all') {
                $('#filterMetodo').addClass('filter-applied');
            }
            
            if (filters.q && filters.q.trim() !== '') {
                $('#searchInput').addClass('filter-applied');
            }
            
            if (filters.search_field && filters.search_field !== '') {
                $('#searchField').addClass('filter-applied');
            }
        }

        let currentPlanoId = null;

        function confirmarExclusao(planoId, planoInfo) {
            currentPlanoId = planoId;
            document.getElementById('planoInfo').textContent = planoInfo;

            // Abre o modal
            const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
            modal.show();
        }

        // Função para restaurar filtros da URL ao carregar a página
        function restoreFiltersFromURL() {
            const params = new URLSearchParams(window.location.search);

            // Restaura cada filtro se existir na URL
            if (params.has('tipo_filter')) {
                $('#filterTipo').val(params.get('tipo_filter'));
            }
            if (params.has('metodo_filter')) {
                $('#filterMetodo').val(params.get('metodo_filter'));
            }
            if (params.has('search_field')) {
                $('#searchField').val(params.get('search_field'));
            }
            if (params.has('q')) {
                $('#searchInput').val(params.get('q'));
            }
            
            // Atualiza estados visuais e placeholder
            updateFilterStates();
            updatePlaceholder();
        }

        // Função para atualizar URL com filtros atuais
        function updateUrlWithFilters() {
            const filters = getFilterParams();
            const url = new URL(window.location);
            
            // Remove todos os parâmetros de filtro existentes
            url.searchParams.delete('tipo_filter');
            url.searchParams.delete('metodo_filter');
            url.searchParams.delete('search_field');
            url.searchParams.delete('q');
            
            // Adiciona apenas filtros com valores válidos
            Object.entries(filters).forEach(([key, value]) => {
                if (value && value !== 'all' && value !== '') {
                    url.searchParams.set(key, value);
                }
            });
            
            // Atualiza URL sem recarregar a página
            window.history.pushState({}, '', url);
        }

        let dataTable;

        $(document).ready(function() {
            // Inicializa DataTable
            initDataTable();

            // Configura event listeners
            setupEventListeners();

            // Restaura filtros da URL
            restoreFiltersFromURL();

            // Inicializa tooltips
            $('[data-bs-toggle="tooltip"]').tooltip();

            // Configura dual scrollbar
            setupDualScrollbar();

            // Event listener para o botão de confirmação do modal
            document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
                if (currentPlanoId) {
                    const filters = getFilterParams();

                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = `/planos/${currentPlanoId}`;

                    const csrfToken = document.createElement('input');
                    csrfToken.type = 'hidden';
                    csrfToken.name = '_token';
                    csrfToken.value = '{{ csrf_token() }}';
                    form.appendChild(csrfToken);

                    const methodField = document.createElement('input');
                    methodField.type = 'hidden';
                    methodField.name = '_method';
                    methodField.value = 'DELETE';
                    form.appendChild(methodField);

                    // Adiciona os filtros
                    addFilterFieldsToForm(form, filters);

                    document.body.appendChild(form);
                    form.submit();
                }
            });
        });

        function initDataTable() {
            dataTable = $('#planosTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route("planos.index") }}',
                    type: 'GET',
                    data: function(d) {
                        // Adiciona todos os filtros
                        d.tipo_filter = $('#filterTipo').val();
                        d.metodo_filter = $('#filterMetodo').val();
                        d.search_field = $('#searchField').val();
                        d.q = $('#searchInput').val();
                    }
                },
                columns: [
                    { data: 'codigo', name: 'codigo', className: 'fw-semibold' },
                    { data: 'descricao', name: 'descricao' },
                    { data: 'tipo', name: 'tipo', className: 'text-center', orderable: false },
                    { data: 'metodo', name: 'metodo', className: 'text-center', orderable: false },
                    {
                        data: 'created_at',
                        name: 'created_at',
                        className: 'text-center',
                        render: function(data, type, row) {
                            if (type === 'display' && data.display) {
                                return data.display;
                            }
                            return data.display || '';
                        }
                    },
                    { data: 'acoes', name: 'acoes', orderable: false, searchable: false, className: 'text-center' }
                ],
                pageLength: 100,
                lengthMenu: [[10, 25, 50, 100, 250], [10, 25, 50, 100, 250]],
                order: [[0, 'asc']], // Ordena por código
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/pt-BR.json'
                },
                dom: '<"d-none"lf>rt<"d-flex justify-content-between align-items-center mt-3"<"dataTables_info"i><"dataTables_paginate"p>>',
                drawCallback: function(settings) {
                    // Reinicializa tooltips
                    $('[data-bs-toggle="tooltip"]').tooltip();

                    // Aplicar cores alternadas nas linhas
                    $('#planosTable tbody tr').each(function(index) {
                        $(this).removeClass('row-even row-odd bg-body');
                        if (index % 2 === 0) {
                            $(this).addClass('row-odd');  // Primeira linha = branco
                        } else {
                            $(this).addClass('row-even'); // Segunda linha = cinza claro
                        }
                    });

                    // Atualiza estados visuais dos filtros
                    setTimeout(updateFilterStates, 100);

                    // Atualiza dual scrollbar
                    setTimeout(function() {
                        const tableContainer = document.getElementById('tableContainer');
                        const scrollTop = document.querySelector('.table-scroll-top');
                        const scrollTopInner = document.querySelector('.table-scroll-top-inner');

                        if (tableContainer && scrollTop && scrollTopInner) {
                            const table = tableContainer.querySelector('table');
                            if (table) {
                                const tableWidth = table.offsetWidth;
                                scrollTopInner.style.width = tableWidth + 'px';

                                // Mostrar/ocultar scrollbar superior baseado na necessidade
                                if (tableContainer.scrollWidth > tableContainer.clientWidth) {
                                    scrollTop.style.display = 'block';
                                } else {
                                    scrollTop.style.display = 'none';
                                }
                            }
                        }
                    }, 100);
                }
            });

            // Sincroniza select de registros por página
            $('#perPage').on('change', function() {
                dataTable.page.len($(this).val()).draw();
            });
        }

        function setupEventListeners() {
            // Aplicar filtros
            $('#btnAplicarFiltros').on('click', function() {
                updateUrlWithFilters();
                dataTable.ajax.reload();
                updateFilterStates();
            });

            // Limpar filtros
            $('#btnLimparFiltros').on('click', function() {
                $('#filterForm')[0].reset();
                updatePlaceholder();
                updateUrlWithFilters(); // Limpa a URL também
                dataTable.ajax.reload();
                updateFilterStates();
            });

            // Mudança nos campos de busca
            $('#searchField').on('change', function() {
                updatePlaceholder();
                updateUrlWithFilters();
                dataTable.ajax.reload();
                updateFilterStates();
            });

            // Aplicar filtro ao pressionar Enter no campo de busca
            $('#searchInput').on('keypress', function(e) {
                if (e.which === 13) {
                    e.preventDefault();
                    updateUrlWithFilters();
                    dataTable.ajax.reload();
                    updateFilterStates();
                }
            });

            // Aplicar filtros quando tipos mudarem
            $('#filterTipo, #filterMetodo').on('change', function() {
                updateUrlWithFilters();
                dataTable.ajax.reload();
                updateFilterStates();
            });

            // Aplicar filtro automaticamente quando campo de busca perder foco (blur)
            $('#searchInput').on('blur', function() {
                const currentValue = $(this).val().trim();
                if (currentValue !== '') {
                    updateUrlWithFilters();
                    dataTable.ajax.reload();
                    updateFilterStates();
                }
            });
        }

        // Sincronizar scrollbars horizontal
        function setupDualScrollbar() {
            const tableContainer = document.getElementById('tableContainer');
            const scrollTop = document.querySelector('.table-scroll-top');
            const scrollTopInner = document.querySelector('.table-scroll-top-inner');

            if (!tableContainer || !scrollTop || !scrollTopInner) return;

            // Função para atualizar largura
            function updateScrollWidth() {
                const table = tableContainer.querySelector('table');
                if (!table) return;
                
                const tableWidth = table.offsetWidth;
                scrollTopInner.style.width = tableWidth + 'px';

                // Mostrar/ocultar scrollbar superior baseado na necessidade
                if (tableContainer.scrollWidth > tableContainer.clientWidth) {
                    scrollTop.style.display = 'block';
                } else {
                    scrollTop.style.display = 'none';
                }
            }

            // Sincronizar scroll
            scrollTop.addEventListener('scroll', function() {
                tableContainer.scrollLeft = this.scrollLeft;
            });

            tableContainer.addEventListener('scroll', function() {
                scrollTop.scrollLeft = this.scrollLeft;
            });

            // Atualizar largura quando a tabela for redesenhada
            if (typeof dataTable !== 'undefined') {
                dataTable.on('draw.dt', updateScrollWidth);
            }

            // Atualizar largura quando a janela for redimensionada
            window.addEventListener('resize', updateScrollWidth);

            // Atualizar largura inicial
            setTimeout(updateScrollWidth, 500);
        }

        // Função de placeholder
        function updatePlaceholder() {
            const field = $('#searchField').val();
            const input = $('#searchInput');
            if (!field) {
                input.attr('placeholder', 'Digite sua busca...');
            } else {
                const fieldLabels = {
                    'codigo': 'código',
                    'descricao': 'descrição',
                    'tipo': 'tipo (entrada/saída)',
                    'metodo': 'método (analítico/sintético)'
                };
                const label = fieldLabels[field] || field;
                input.attr('placeholder', `Buscar por ${label}...`);
            }
        }

        // Função para adicionar filtros atuais a qualquer URL
        function addCurrentFiltersToUrl(baseUrl) {
            const filters = getFilterParams();
            const url = new URL(baseUrl, window.location.origin);

            Object.entries(filters).forEach(([key, value]) => {
                if (value && value !== 'all' && value !== '') {
                    url.searchParams.set(key, value);
                }
            });

            return url.toString();
        }

        // Interceptar cliques em links para adicionar filtros
        $(document).on('click', 'a[href*="/planos/"]', function(e) {
            const href = $(this).attr('href');

            // Só processa se for um link interno e não tiver parâmetros já
            if (href && !href.includes('?') && !href.includes('#')) {
                // Verifica se é um link de ação (edit, create)
                if (href.includes('/edit') || href.includes('/create') || href === '/planos') {
                    const urlWithFilters = addCurrentFiltersToUrl(href);
                    $(this).attr('href', urlWithFilters);
                }
            }
        });

        // Interceptar cliques no breadcrumb para manter filtros
        $(document).on('click', 'a[href*="planos"]', function(e) {
            const href = $(this).attr('href');
            
            if (href && href.includes('planos') && !href.includes('?')) {
                const filters = getFilterParams();
                let hasFilters = false;
                
                // Verifica se há filtros ativos
                Object.entries(filters).forEach(([key, value]) => {
                    if (value && value !== 'all' && value !== '') {
                        hasFilters = true;
                    }
                });
                
                if (hasFilters) {
                    const urlWithFilters = addCurrentFiltersToUrl(href);
                    $(this).attr('href', urlWithFilters);
                }
            }
        });

        // Função para mostrar feedback visual quando filtros são aplicados
        function showFilterFeedback() {
            const btn = $('#btnAplicarFiltros');
            const originalContent = btn.html();
            
            btn.html('<span class="fas fa-check text-white"></span>').addClass('btn-success').removeClass('btn-primary');
            
            setTimeout(() => {
                btn.html(originalContent).removeClass('btn-success').addClass('btn-primary');
            }, 1000);
        }

        // Adicionar feedback visual quando filtros são aplicados
        $('#btnAplicarFiltros').on('click', function() {
            showFilterFeedback();
        });
    </script>
@endpush