@extends('layouts.app')

@section('title', 'Clientes')

@push('styles-custom')
    <link href="{{ asset('vendors/choices/choices.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('vendors/flatpickr/flatpickr.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('vendors/select2/css/select2.css') }}" rel="stylesheet" />
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <style>
        /* Estilos do Select2 customizados */
        .select2-container--default .select2-selection--single {
            height: 31px;
            padding: 0.1rem 0.5rem;
            font-size: 0.8125rem;
            border-radius: 0.25rem;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 24px;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 30px;
        }
        .modal-lg .select2-container {
            width: 100% !important;
        }

        /* Mantém estilos do Select2 */
        .select2-container--default .select2-selection--single {
            height: 31px;
            padding: 0.1rem 0.5rem;
            font-size: 0.8125rem;
            border-radius: 0.25rem;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 24px;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 30px;
        }
        .modal-lg .select2-container {
            width: 100% !important;
        }

        /* Estilo zebrado suave igual aos funcionários */
        .table-striped tbody tr:nth-of-type(odd) {
            background-color: rgba(0, 0, 0, 0.02);
        }

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

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

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

        /* 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;
        }

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

        /* Badge customizado */
        .badge-phoenix {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }

        /* Melhorias nos filtros */
        .card-header {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-bottom: 2px solid var(--phoenix-primary);
        }

        .filter-section {
            background: #fff;
            border-radius: 0.5rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }

        /* Animações suaves */
        .card {
            transition: box-shadow 0.15s ease-in-out;
        }

        .card:hover {
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }

        /* Responsividade melhorada */
        @media (max-width: 768px) {
            .table td {
                padding: 0.5rem;
                font-size: 0.875rem;
            }
        }

        /* Primeira e última coluna com bordas arredondadas */
        .table tbody tr:first-child td:first-child {
            border-top-left-radius: 0.375rem;
        }

        .table tbody tr:first-child td:last-child {
            border-top-right-radius: 0.375rem;
        }

        .table tbody tr:last-child td:first-child {
            border-bottom-left-radius: 0.375rem;
        }

        .table tbody tr:last-child td:last-child {
            border-bottom-right-radius: 0.375rem;
        }

        /* Melhorias nos badges */
        .badge-phoenix {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
            font-weight: 500;
            border-radius: 0.25rem;
        }

        /* Estados de loading melhorados */
        .dataTables_wrapper .dataTables_processing {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border: 2px solid #e9ecef;
            border-radius: 0.5rem;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        /* Paginação customizada */
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            border-radius: 0.375rem;
            margin: 0 0.125rem;
            padding: 0.5rem 0.75rem;
            border: 1px solid #dee2e6;
            background: #ffffff;
            color: #6c757d;
            transition: all 0.15s ease-in-out;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: #e9ecef;
            border-color: #adb5bd;
            color: #495057;
            transform: translateY(-1px);
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: linear-gradient(135deg, var(--phoenix-primary) 0%, #0056b3 100%);
            color: white !important;
            border-color: var(--phoenix-primary);
            box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
        }

        /* Info da paginação */
        .dataTables_wrapper .dataTables_info {
            color: #6c757d;
            font-size: 0.875rem;
            font-weight: 500;
        }

        /* Dropdown de ações melhorado */
        .dropdown-menu {
            border: none;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            border-radius: 0.5rem;
            padding: 0.5rem 0;
        }

        .dropdown-item {
            padding: 0.5rem 1rem;
            transition: all 0.15s ease-in-out;
            border-radius: 0;
        }

        .dropdown-item:hover {
            background-color: #f8f9fa;
            color: #495057;
            transform: translateX(4px);
        }

        .dropdown-item.text-danger:hover {
            background-color: #f8d7da;
            color: #721c24;
        }

        /* Melhorias responsivas */
        @media (max-width: 768px) {
            .table td {
                padding: 0.5rem;
                font-size: 0.875rem;
            }
            
            .table thead th {
                padding: 0.75rem 0.5rem;
                font-size: 0.7rem;
            }
            
            .badge-phoenix {
                font-size: 0.7rem;
                padding: 0.2rem 0.4rem;
            }
        }

        /* Animações suaves para carregamento */
        .table tbody tr {
            animation: fadeInUp 0.3s ease-out;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Melhorias no card dos filtros */
        .filter-section {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border: 1px solid #e9ecef;
            border-radius: 0.75rem;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .filter-section:hover {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

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

        /* 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;
        }

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

        /* Badge customizado */
        .badge-phoenix {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }

        /* Melhorias nos filtros */
        .card-header {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-bottom: 2px solid var(--phoenix-primary);
        }

        .filter-section {
            background: #fff;
            border-radius: 0.5rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }

        /* Animações suaves */
        .card {
            transition: box-shadow 0.15s ease-in-out;
        }

        .card:hover {
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }

        /* Responsividade melhorada */
        @media (max-width: 768px) {
            .table td {
                padding: 0.5rem;
                font-size: 0.875rem;
            }
        }

        /* Botões de paginação menores - ADICIONAR NO FINAL DOS STYLES */
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            border-radius: 0.25rem !important;
            margin: 0 0.0625rem !important;
            padding: 0.25rem 0.5rem !important;
            font-size: 0.75rem !important;
            border: 1px solid #dee2e6 !important;
            background: #ffffff !important;
            color: #6c757d !important;
            transition: all 0.15s ease-in-out !important;
            min-width: 28px !important;
            height: 28px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: #e9ecef !important;
            border-color: #adb5bd !important;
            color: #495057 !important;
            transform: translateY(-1px) !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: linear-gradient(135deg, var(--phoenix-primary) 0%, #0056b3 100%) !important;
            color: white !important;
            border-color: var(--phoenix-primary) !important;
            box-shadow: 0 1px 2px rgba(0, 123, 255, 0.3) !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
            background: #f8f9fa !important;
            color: #6c757d !important;
            border-color: #dee2e6 !important;
            cursor: not-allowed !important;
        }

        .dataTables_wrapper .dataTables_paginate {
            margin-top: 0.5rem !important;
        }

        /* Ajustar info da paginação também */
        .dataTables_wrapper .dataTables_info {
            color: #6c757d !important;
            font-size: 0.8125rem !important;
            font-weight: 500 !important;
            margin-top: 0.5rem !important;
        }
    </style>
@endpush

@section('content')
<div class="content pt-3">
    <!-- Breadcrumb com estilo Phoenix -->
    <nav class="mb-3" aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item">
                <a href="{{ route('dashboard') }}" class="text-decoration-none">
                    <i class="fas fa-home me-1"></i>Dashboard
                </a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">
                <i class="fas fa-users me-1"></i>Clientes
            </li>
        </ol>
    </nav>

    <div class="mb-9">
        <!-- Header da página com gradiente -->
        <div class="row align-items-center justify-content-between g-3 mb-4">
            <div class="col-auto">
                <div class="d-flex align-items-center">
                    <div class="avatar avatar-xl me-3">
                        <div class="avatar-name rounded-circle bg-primary-subtle text-primary">
                            <span class="fas fa-users fs-4"></span>
                        </div>
                    </div>
                    <div>
                        <h2 class="mb-0 text-body-emphasis">Clientes</h2>
                        <p class="mb-0 text-body-secondary">Gerencie seus clientes de forma eficiente</p>
                    </div>
                </div>
            </div>
            <div class="col-auto">
                <button type="button" class="btn btn-primary btn-lg" onclick="window.location='{{ route('clientes.create') }}'">
                    <span class="fas fa-plus me-2"></span>Adicionar Cliente
                </button>
            </div>
        </div>

        <!-- Card de Filtros Avançados -->
        <div class="card mb-4 filter-section">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col">
                        <h5 class="mb-0 text-primary">
                            <i class="fas fa-filter me-2"></i>Filtros Avançados
                        </h5>
                    </div>
                    <div class="col-auto">
                        <button class="btn btn-link btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#filtrosCollapse" aria-expanded="true">
                            <span class="fas fa-chevron-down"></span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="collapse show" id="filtrosCollapse">
                <div class="card-body">
                    <form id="filterForm">
                        <!-- Primeira linha - Filtros principais -->
                        <div class="row g-3 mb-3">
                            <!-- Registros por página -->
                            <div class="col-md-2">
                                <label class="form-label small fw-bold">Registros</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="200">200</option>
                                </select>
                            </div>

                            <!-- Estatísticas rápidas -->
                            <div class="col-md-10">
                                <label class="form-label small fw-bold">Estatísticas</label>
                                <div class="d-flex gap-3">
                                    <div class="badge badge-phoenix badge-phoenix-info">
                                        <i class="fas fa-users me-1"></i>
                                        <span id="totalClientes">{{ \App\Models\Cliente::count() }}</span> Total
                                    </div>
                                    <div class="badge badge-phoenix badge-phoenix-primary">
                                        <i class="fas fa-building me-1"></i>
                                        <span id="totalCnpj">{{ \App\Models\Cliente::where('tipo', 'cnpj')->count() }}</span> CNPJ
                                    </div>
                                    <div class="badge badge-phoenix badge-phoenix-success">
                                        <i class="fas fa-user me-1"></i>
                                        <span id="totalCpf">{{ \App\Models\Cliente::where('tipo', 'cpf')->count() }}</span> CPF
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Segunda linha - Buscas -->
                        <div class="row g-3">
                            <!-- Busca primária -->
                            <div class="col-12 col-xl-6">
                                <label class="form-label small fw-bold">
                                    <i class="fas fa-search me-1"></i>Busca Principal
                                </label>
                                <div class="row g-2">
                                    <div class="col-12 col-md-8 mb-2 mb-md-0">
                                        <div class="position-relative">
                                            <input
                                                id="searchInput"
                                                class="form-control form-control-sm pe-5"
                                                type="search"
                                                name="q"
                                                value="{{ $filters['q'] ?? '' }}"
                                                placeholder="Buscar em todas as colunas"
                                            >
                                            <span class="fas fa-search position-absolute top-50 end-0 translate-middle-y me-3 text-muted"></span>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <select name="search_field" id="searchField" class="form-select form-select-sm">
                                            <option value="">Todas as Colunas</option>
                                            <option value="razao_social" {{ ($filters['search_field'] ?? '') === 'razao_social' ? 'selected' : '' }}>Razão Social</option>
                                            <option value="nome_fantasia" {{ ($filters['search_field'] ?? '') === 'nome_fantasia' ? 'selected' : '' }}>Nome Fantasia</option>
                                            <option value="documento" {{ ($filters['search_field'] ?? '') === 'documento' ? 'selected' : '' }}>CPF/CNPJ</option>
                                            <option value="email" {{ ($filters['search_field'] ?? '') === 'email' ? 'selected' : '' }}>Email</option>
                                            <option value="telefone" {{ ($filters['search_field'] ?? '') === 'telefone' ? 'selected' : '' }}>Telefone</option>
                                            <option value="cidade" {{ ($filters['search_field'] ?? '') === 'cidade' ? 'selected' : '' }}>Cidade</option>
                                            <option value="estado" {{ ($filters['search_field'] ?? '') === 'estado' ? 'selected' : '' }}>Estado</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 col-xl-6">
                                <label class="form-label small fw-bold">
                                    <i class="fas fa-plus me-1"></i>Busca Secundária <span class="text-muted">(opcional)</span>
                                </label>
                                <div class="row g-2">
                                    <div class="col-12 col-md-8 mb-2 mb-md-0">
                                        <div class="position-relative">
                                            <input
                                                id="searchInput2"
                                                class="form-control form-control-sm pe-5"
                                                type="search"
                                                name="q2"
                                                value="{{ $filters['q2'] ?? '' }}"
                                                placeholder="Segundo filtro (opcional)"
                                            >
                                            <span class="fas fa-search position-absolute top-50 end-0 translate-middle-y me-3 text-muted"></span>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <select name="search_field2" id="searchField2" class="form-select form-select-sm">
                                            <option value="">Selecione</option>
                                            <option value="razao_social" {{ ($filters['search_field2'] ?? '') === 'razao_social' ? 'selected' : '' }}>Razão Social</option>
                                            <option value="nome_fantasia" {{ ($filters['search_field2'] ?? '') === 'nome_fantasia' ? 'selected' : '' }}>Nome Fantasia</option>
                                            <option value="documento" {{ ($filters['search_field2'] ?? '') === 'documento' ? 'selected' : '' }}>CPF/CNPJ</option>
                                            <option value="email" {{ ($filters['search_field2'] ?? '') === 'email' ? 'selected' : '' }}>Email</option>
                                            <option value="telefone" {{ ($filters['search_field2'] ?? '') === 'telefone' ? 'selected' : '' }}>Telefone</option>
                                            <option value="cidade" {{ ($filters['search_field2'] ?? '') === 'cidade' ? 'selected' : '' }}>Cidade</option>
                                            <option value="estado" {{ ($filters['search_field2'] ?? '') === 'estado' ? 'selected' : '' }}>Estado</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- Botões de ação -->
                            <div class="row mt-4">
                                <div class="col-12 text-end">
                                    <button type="button" id="btnLimparFiltros" class="btn btn-outline-secondary btn-sm">
                                        <span class="fas fa-times me-1"></span>Limpar
                                    </button>
                                    <button type="button" id="btnAplicarFiltros" class="btn btn-primary btn-sm">
                                        <span class="fas fa-search me-1"></span>Aplicar Filtros
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </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="clientesTable" class="table table-sm fs-9 mb-0">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Razão Social</th>
                                <th>Nome Fantasia</th>
                                <th>CPF/CNPJ</th>
                                <th>Tipo</th>
                                <th>Email</th>
                                <th>Telefone</th>
                                <th>Cidade</th>
                                <th>Estado</th>
                                <th>Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Dados carregados via AJAX -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Container para modais dinâmicos -->
<div id="modalContainer"></div>

<!-- Modal de Confirmação de Exclusão -->
<div class="modal fade" id="modalExcluirCliente" tabindex="-1" aria-labelledby="modalExcluirLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-danger">
                <h5 class="modal-title text-white" id="modalExcluirLabel">
                    <i class="fas fa-exclamation-triangle me-2"></i>Confirmar Exclusão
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="d-flex align-items-center mb-3">
                    <div class="flex-shrink-0">
                        <div class="avatar avatar-xl">
                            <div class="avatar-name rounded-circle bg-danger-subtle text-danger">
                                <span class="fas fa-user fs-4"></span>
                            </div>
                        </div>
                    </div>
                    <div class="flex-grow-1 ms-3">
                        <h6 class="mb-1">Excluir Cliente</h6>
                        <p class="mb-0 text-body-secondary">Esta ação não pode ser desfeita.</p>
                    </div>
                </div>
                <div class="alert alert-warning border border-warning" role="alert">
                    <div class="d-flex align-items-center">
                        <span class="fas fa-exclamation-triangle text-warning me-2"></span>
                        <div>
                            Tem certeza que deseja excluir o cliente <strong id="nomeClienteExcluir"></strong>?
                        </div>
                    </div>
                </div>
                <p class="text-body-secondary mb-0">
                    Todos os dados relacionados a este cliente serão removidos permanentemente do sistema.
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-phoenix-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>Cancelar
                </button>
                <form id="formExcluirCliente" method="POST" class="d-inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-trash me-1"></i>Excluir Cliente
                    </button>
                </form>
            </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>

    <!-- Select2 JS -->
    <script src="{{ asset('vendors/select2/js/select2.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 apenas os parâmetros que existem
            const allowedParams = ['search_field', 'q', 'search_field2', 'q2'];
            for (const [key, value] of params) {
                if (allowedParams.includes(key)) {
                    filters[key] = value;
                }
            }

            // Captura também os valores atuais dos filtros no formulário
            filters.search_field = $('#searchField').val() || '';
            filters.q = $('#searchInput').val() || '';
            filters.search_field2 = $('#searchField2').val() || '';
            filters.q2 = $('#searchInput2').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') {
                    // Verifica se o campo já existe
                    const existingInput = form.querySelector(`input[name="${key}"]`);
                    if (!existingInput) {
                        const input = document.createElement('input');
                        input.type = 'hidden';
                        input.name = key;
                        input.value = value;
                        form.appendChild(input);
                    }
                }
            }
        }

        // Funções para abrir modais dinamicamente
        function visualizarCliente(clienteId) {
            $.get(`/clientes/${clienteId}/modal-visualizar`, function(html) {
                $('#modalContainer').empty();
                $('#modalContainer').html(html);
                $(`#modal_view${clienteId}`).modal('show');

                // Inicializa tooltips
                $('[data-bs-toggle="tooltip"]').tooltip();
            }).fail(function() {
                Swal.fire({
                    icon: 'error',
                    title: 'Erro!',
                    text: 'Não foi possível carregar os dados do cliente.',
                    toast: true,
                    position: 'top-end',
                    timer: 3000,
                    showConfirmButton: false
                });
            });
        }

        function confirmarExclusao(clienteId, nomeCliente = 'este cliente') {
            // Buscar dados do cliente via AJAX para obter o nome
            $.get(`/clientes/${clienteId}`, function(response) {
                // Atualizar o modal com os dados do cliente
                $('#nomeClienteExcluir').text(response.razao_social || nomeCliente);
                
                // Configurar o formulário de exclusão
                const form = document.getElementById('formExcluirCliente');
                form.action = `/clientes/${clienteId}`;
                
                // Limpar campos hidden anteriores
                const existingHiddenInputs = form.querySelectorAll('input[type="hidden"]:not([name="_token"]):not([name="_method"])');
                existingHiddenInputs.forEach(input => input.remove());
                
                // Adicionar filtros atuais
                const filters = getFilterParams();
                addFilterFieldsToForm(form, filters);
                
                // Exibir o modal
                $('#modalExcluirCliente').modal('show');
            }).fail(function() {
                // Fallback se não conseguir buscar os dados
                $('#nomeClienteExcluir').text(nomeCliente);
                
                const form = document.getElementById('formExcluirCliente');
                form.action = `/clientes/${clienteId}`;
                
                // Limpar campos hidden anteriores
                const existingHiddenInputs = form.querySelectorAll('input[type="hidden"]:not([name="_token"]):not([name="_method"])');
                existingHiddenInputs.forEach(input => input.remove());
                
                // Adicionar filtros atuais
                const filters = getFilterParams();
                addFilterFieldsToForm(form, filters);
                
                // Exibir o modal
                $('#modalExcluirCliente').modal('show');
            });
        }

        function exportarDados() {
            Swal.fire({
                icon: 'info',
                title: 'Exportar Dados',
                text: 'Funcionalidade de exportação será implementada em breve.',
                timer: 3000,
                showConfirmButton: false,
                toast: true,
                position: 'top-end'
            });
        }

        let dataTable;

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

            // Configura event listeners
            setupEventListeners();

            // Atualiza placeholders
            updatePlaceholder();
            updatePlaceholder2();

            // Aplica os filtros automaticamente se houver parâmetros na URL
            if (window.location.search) {
                // A aplicação dos filtros é feita automaticamente pelo DataTable
            }
        });

        function initDataTable() {
            dataTable = $('#clientesTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route("clientes.index") }}',
                    type: 'GET',
                    data: function(d) {
                        // Adiciona apenas os filtros que existem
                        d.search_field = $('#searchField').val() || '';
                        d.q = $('#searchInput').val() || '';
                        d.search_field2 = $('#searchField2').val() || '';
                        d.q2 = $('#searchInput2').val() || '';
                    }
                },
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'razao_social', name: 'razao_social' },
                    { data: 'nome_fantasia', name: 'nome_fantasia' },
                    { data: 'documento', name: 'documento' },
                    { data: 'tipo', name: 'tipo' },
                    { data: 'email', name: 'email' },
                    { data: 'telefone', name: 'telefone' },
                    { data: 'cidade', name: 'cidade' },
                    { data: 'estado', name: 'estado' },
                    { data: 'acoes', name: 'acoes', orderable: false, searchable: false }
                ],
                pageLength: 100,
                lengthMenu: [[10, 25, 50, 100, 200], [10, 25, 50, 100, 200]],
                order: [[1, 'asc']], // Ordena por razão social
                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 classes alternadas nas linhas
                    $('#clientesTable tbody tr').each(function(index) {
                        $(this).removeClass('bg-body');
                        if (index % 2 === 1) {
                            $(this).addClass('bg-body');
                        }
                    });
                }
            });

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

            // Configurar scrollbar duplo após DataTable estar pronto
            setTimeout(function() {
                setupDualScrollbar();
            }, 100);
        }

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

            // Limpar filtros
            $('#btnLimparFiltros').on('click', function() {
                $('#filterForm')[0].reset();
                updatePlaceholder();
                updatePlaceholder2();
                dataTable.ajax.reload();
            });

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

            $('#searchField2').on('change', function() {
                updatePlaceholder2();
                dataTable.ajax.reload();
            });

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

        // 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 tableWidth = tableContainer.querySelector('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 (dataTable) {
                dataTable.on('draw.dt', updateScrollWidth);
            }

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

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

        function updatePlaceholder() {
            const field = $('#searchField').val();
            const input = $('#searchInput');
            if (!field) {
                input.attr('placeholder', 'Buscar em todas as colunas');
            } else {
                const labels = {
                    'razao_social': 'Razão Social',
                    'nome_fantasia': 'Nome Fantasia',
                    'documento': 'CPF/CNPJ',
                    'email': 'Email',
                    'telefone': 'Telefone',
                    'cidade': 'Cidade',
                    'estado': 'Estado'
                };
                input.attr('placeholder', 'Buscar por ' + (labels[field] || field));
            }
        }

        function updatePlaceholder2() {
            const field = $('#searchField2').val();
            const input = $('#searchInput2');
            if (!field) {
                input.attr('placeholder', 'Segundo filtro (opcional)');
            } else {
                const labels = {
                    'razao_social': 'Razão Social',
                    'nome_fantasia': 'Nome Fantasia',
                    'documento': 'CPF/CNPJ',
                    'email': 'Email',
                    'telefone': 'Telefone',
                    'cidade': 'Cidade',
                    'estado': 'Estado'
                };
                input.attr('placeholder', 'Buscar por ' + (labels[field] || field));
            }
        }

        // Tratamento de mensagens de sucesso/erro
        $(document).ready(function() {
            // Verificar se há mensagem de sucesso na sessão
            @if(session('success'))
                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        icon: 'success',
                        title: 'Sucesso!',
                        text: '{{ session('success') }}',
                        timer: 3000,
                        showConfirmButton: false,
                        toast: true,
                        position: 'top-end'
                    });
                }
            @endif

            @if(session('error'))
                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        icon: 'error',
                        title: 'Erro!',
                        text: '{{ session('error') }}',
                        timer: 5000,
                        showConfirmButton: false,
                        toast: true,
                        position: 'top-end'
                    });
                }
            @endif

            // Fechar modal após envio bem-sucedido
            $('#formExcluirCliente').on('submit', function() {
                $('#modalExcluirCliente').modal('hide');
            });
        });
    </script>
@endpush