@extends('layouts.app')
@section('title', 'Clientes')
@section('page_title', 'Lista de Clientes')
@push('styles')
<style>
    .dataTables_processing {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: auto !important;
        height: auto !important;
        margin-left: -50px !important;
        margin-top: -25px !important;
        padding: 10px !important;
        background: rgba(255,255,255,0.9) !important; /* fundo levemente branco */
        color: #007bff !important;
        font-size: 1.2rem !important;
        font-weight: bold !important;
        text-align: center;
        z-index: 9999 !important; /* garante que fique acima de tudo */
    }

    .dataTables_processing::before {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 8px;
        border: 3px solid #007bff;
        border-top: 3px solid transparent;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* Aplica o ícone apenas quando o DataTables está em modo responsivo (colunas ocultas) */
    table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before {
        content: "+" !important;
        color: #007bff !important;
        font-weight: bold !important;
        display: inline-block !important;
        width: 20px !important;
        height: 22px !important;
        line-height: 18px !important;
        text-align: center !important;
        border: 2px solid #007bff !important;
        border-radius: 4px !important;
        margin-right: 5px !important;
        background-color: #fff !important;
        cursor: pointer !important;
    }

    /* Quando a linha está expandida */
    table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before {
        content: "-" !important;
        color: #007bff !important;
        border-color: #007bff !important;
        background-color: #fff !important;
    }

</style>
@endpush

@section('content')
    <div class="container-fluid">
        <div class="card">
            <div class="card-header d-flex align-items-center">
                <h3 class="card-title mb-0">Cadastro de Clientes</h3>
                <a href="{{ route('clientes.create') }}" class="btn btn-success btn-sm ml-auto">
                    <i class="fas fa-plus"></i> Novo Cliente
                </a>
            </div>

            <div class="card-body">
                <div class="table-responsive">
                    <table id="clientes-table" class="table table-bordered table-striped w-100">
                        <thead>
                            <tr>
                                <th>CPF</th>
                                <th>Nome</th>
                                <th>Celular</th>
                                <th>Email</th>
                                <th>CR</th>
                                <th>Clube</th>
                                <th>Ações</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Único de Visualização -->
    <div class="modal fade" id="modalCliente" tabindex="-1" aria-labelledby="modalClienteLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="modalClienteLabel">Ficha do Cliente</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-sm" id="modalClienteBody">
                    {{-- Conteúdo preenchido via JS --}}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Único de Impressão -->
    <div class="modal fade" id="modalImpressao" tabindex="-1" aria-labelledby="modalImpressaoLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalImpressaoLabel">Opções de Impressão</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="nomeCliente" class="fw-bold"></p>
                    <div class="list-group">
                        <a href="#" id="linkProcuracao" target="_blank"
                            class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                            Procuração
                            <i class="fas fa-print text-primary"></i>
                        </a>
                        <a href="#" id="linkFichaFiliacaoClube" target="_blank"
                            class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                            Ficha de solicitação de filiação ao clube de tiro
                            <i class="fas fa-print text-primary"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(function () {
            let table = $('#clientes-table').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                autoWidth: false,
                ajax: '{{ route('clientes.data') }}',
                columns: [
                    { data: 'NUM_CPF', name: 'c.NUM_CPF' },
                    {
                        data: 'DES_NOME', name: 'c.DES_NOME', render: function (data, type, row) {
                            return (row.Preferencial == '1' ? '<span style="color: gold;">★</span> ' : '') + data;
                        }
                    },
                    { data: 'DES_CELULAR', name: 'c.DES_CELULAR' },
                    {
                        data: 'DES_EMAIL',
                        name: 'c.DES_EMAIL',
                        render: function(data, type, row) {
                            if (!data) return '';
                            let maxLength = 25; // limite de caracteres
                            let displayText = data.length > maxLength ? data.substring(0, maxLength) + '...' : data;
                            return `<span title="${data}">${displayText}</span>`;
                        }
                    },
                    {
                        data: 'COD_CR', name: 'c.COD_CR', render: function (data, type, row) {
                            if (row.DTA_VALIDADE_CR) {
                                let color = new Date(row.DTA_VALIDADE_CR) < new Date() ? 'red' : 'green';
                                return `<span style="color:${color}">●</span> ${data}`;
                            }
                            return data;
                        }
                    },
                    {
                        data: 'DES_NOME_CLUBE', 
                        name: 'cl.DES_NOME',
                        render: function(data, type, row) {
                            if (!data) return ''; // Se estiver vazio ou null, retorna string vazia
                            let maxLength = 20; // número máximo de caracteres que será exibido
                            let displayText = data.length > maxLength ? data.substring(0, maxLength) + '...' : data;
                            return `<span title="${data}">${displayText}</span>`;
                        }
                    },
                    {
                        data: 'COD_CLIENTE', name: 'COD_CLIENTE', orderable: false, searchable: false, responsivePriority: 1, render: function (data, type, row) {
                            return `
                        <div class="d-flex gap-1">
                            <button type="button" class="btn btn-success btn-sm" title="Ver Mais" onclick="verMais(${data})">
                                <i class="fas fa-eye"></i>
                            </button>&nbsp;
                            <a href="/clientes/edit/${data}" class="btn btn-primary btn-sm" title="Editar">
                                <i class="fas fa-edit"></i>
                            </a>&nbsp;
                            <button type="button" class="btn btn-info btn-sm" title="Imprimir" onclick="abrirModalImpressao(${data}, '${row.DES_NOME.replace(/'/g, "\\'")}')">
                                <i class="fas fa-print"></i>
                            </button>&nbsp;
                            <form action="/clientes/destroy/${data}" method="POST" class="d-inline form-delete" data-type="cliente">
                                <input type="hidden" name="_token" value="${csrfToken}">
                                <input type="hidden" name="_method" value="DELETE">
                                <button type="submit" class="btn btn-danger btn-sm" title="Excluir">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </div>
                    `;
                        }
                    }
                ],
                language: { url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/pt-BR.json',
                    search: ""
                },
                pageLength: 50,
                lengthMenu: [50, 100, 250],
                buttons: [
                    'copy', 'excel', 'colvis'
                    //'copy', 'csv', 'excel', 'pdf', 'print', 'colvis'
                ],
                dom: "<'row mb-2'<'col-sm-6 d-flex align-items-center'B><'col-sm-6 d-flex justify-content-end'f>>" +
                     "<'row'<'col-12't>>" +
                     "<'row mt-2'<'col-sm-6'i><'col-sm-6'p>>",
                initComplete: function() {
                    // Adiciona placeholder ao input de pesquisa
                    $('div.dataTables_filter input').attr('placeholder', 'Pesquisar cliente');
                }
            });
        });

        // Função para abrir modal de visualização
        function verMais(id) {
            $.ajax({
                url: `/clientes/show/${id}`,
                method: 'GET',
                beforeSend: function() {
                    $('#modalClienteBody').html('<p class="text-center text-muted">Carregando...</p>');
                },
                success: function (cliente) {
                    if (cliente.error) {
                        $('#modalClienteBody').html('<p class="text-danger text-center">Cliente não encontrado.</p>');
                        return;
                    }
                
                    // Monta o HTML dinamicamente
                    let html = `
                        <div class="container-fluid">
                            <div class="row mb-2">
                                <div class="col-md-6"><strong>Nome:</strong> ${cliente.DES_NOME ?? '-'}</div>
                                <div class="col-md-6"><strong>CPF:</strong> ${cliente.NUM_CPF ?? '-'}</div>
                            </div>
                        
                            <div class="row mb-2">
                                <div class="col-md-6"><strong>Celular:</strong> ${cliente.DES_CELULAR ?? '-'}</div>
                                <div class="col-md-6"><strong>Email:</strong> ${cliente.DES_EMAIL ?? '-'}</div>
                            </div>
                        
                            <div class="row mb-2">
                                <div class="col-md-6"><strong>CR:</strong> ${cliente.COD_CR ?? '-'}</div>
                                <div class="col-md-6"><strong>Validade CR:</strong> ${(cliente.DTA_VALIDADE_CR ? formatarData(cliente.DTA_VALIDADE_CR) : '-')}</div>
                            </div>
                        
                            <div class="row mb-2">
                                <div class="col-md-12"><strong>Clube:</strong> ${cliente.DES_NOME_CLUBE ?? '-'}</div>
                            </div>
                        </div>
                    `;
                    
                    $('#modalClienteBody').html(html);
                    $('#modalCliente').modal('show');
                },
                error: function () {
                    $('#modalClienteBody').html('<p class="text-danger text-center">Erro ao carregar dados do cliente.</p>');
                }
            });
        }

        // Função auxiliar para formatar data (YYYY-MM-DD → DD/MM/YYYY)
        function formatarData(dataStr) {
            if (!dataStr) return '-';
            const [ano, mes, dia] = dataStr.split('-');
            return `${dia}/${mes}/${ano}`;
        }

        // Função para abrir modal de impressão
        function abrirModalImpressao(idCliente, nomeCliente) {
            $('#nomeCliente').text("Cliente: " + nomeCliente);
            $('#linkProcuracao').attr('href', '/clientes/printprocuracao/' + idCliente);
            $('#linkFichaFiliacaoClube').attr('href', '/clientes/printfiliacaoclubetiro/' + idCliente);
            $('#modalImpressao').modal('show');
        }
    </script>
@endpush