@extends('layouts/layoutMaster')
@section('title', 'Gerenciar Clientes')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/select2/select2.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/@form-validation/umd/styles/index.min.css') }}" />

    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/animate-css/animate.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/sweetalert2/sweetalert2.css') }}" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
@endsection



@section('vendor-script')
    <script src="{{ asset('assets/vendor/libs/moment/moment.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/select2/select2.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/@form-validation/umd/bundle/popular.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/@form-validation/umd/plugin-bootstrap5/index.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/@form-validation/umd/plugin-auto-focus/index.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/cleavejs/cleave.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/cleavejs/cleave-phone.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/sweetalert2/sweetalert2.js') }}"></script>
@endsection


@section('page-script')
    <script src="{{ asset('assets/js/app-ecommerce-customer-all.js') }}"></script>
    <script src="{{ asset('assets/js/extended-ui-sweetalert2.js') }}"></script>
    <script>
        // copia os ull ao clica no botão copiar e usa o extended/ui-sweetalert2
        document.getElementById('copyButton').addEventListener('click', function() {
            navigator.clipboard.writeText(document.getElementById('loginUrl').value);
            Swal.fire({
                icon: 'success',
                title: 'URL Copiada',
                showConfirmButton: false,
                timer: 1500
            });
        });
    </script>
    <script>
      document.getElementById('iptvSearch').addEventListener('keyup', function() {
          let input = this.value.toLowerCase();
          let rows = document.querySelectorAll('#clientTable tr');
  
          rows.forEach(row => {
              let iptvNome = row.cells[1].textContent.toLowerCase();
              if (iptvNome.includes(input)) {
                  row.style.display = '';
              } else {
                  row.style.display = 'none';
              }
          });
      });
  </script>
   <script>
      document.addEventListener('DOMContentLoaded', function () {
          document.querySelectorAll('.toggle-note').forEach(function (toggle) {
              toggle.addEventListener('click', function (event) {
                  event.preventDefault();
                  const shortNote = this.previousElementSibling.previousElementSibling;
                  const fullNote = this.previousElementSibling;
                  if (fullNote.classList.contains('d-none')) {
                      shortNote.classList.add('d-none');
                      fullNote.classList.remove('d-none');
                      this.textContent = 'Ver menos';
                  } else {
                      shortNote.classList.remove('d-none');
                      fullNote.classList.add('d-none');
                      this.textContent = 'Ver mais';
                  }
              });
          });
      });
  </script>
  <script>
    function sendLoginDetails(clienteId) {
        if (confirm('Tem certeza que deseja enviar os dados de login para este cliente?')) {
            window.location.href = `/send-login-details/${clienteId}`;
        }
    }
</script>
<script>
    function generatePassword(inputId) {
        const length = 12;
        const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+~`|}{[]:;?><,./-=";
        let password = "";
        for (let i = 0, n = charset.length; i < length; ++i) {
            password += charset.charAt(Math.floor(Math.random() * n));
        }
        document.getElementById(inputId).value = password;
    }
    
    function togglePasswordVisibility(inputId) {
        const input = document.getElementById(inputId);
        const icon = document.getElementById('togglePasswordIcon');
        if (input.type === 'password') {
            input.type = 'text';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        } else {
            input.type = 'password';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        }
    }
    </script>
@endsection

@section('content')
    <h4 class="py-3 mb-2">
        <span class="text-muted fw-light">{{ config('variables.templateName', 'TemplateName') }} / </span> Clientes
    </h4>


    <!-- Verificação de Mensagens de Sessão -->
    @if (session('warning'))
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            {{ session('warning') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- mensagens para erros -->
    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif


    <!-- mensagens para sucesso -->
    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif



    <!-- Card colapsável para a URL de login -->
    <div class="accordion" id="loginUrlAccordion">
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                    URL de Login para Clientes
                </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
                data-bs-parent="#loginUrlAccordion">
                <div class="accordion-body">
                    <p>Compartilhe esta URL com seus clientes para que eles possam acessar a área de login.</p>
                    <div class="mb-3">
                        <label>URL de Login</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="loginUrl" value="{{ $loginUrl }}" readonly>
                            <button class="btn btn-outline-secondary" type="button" id="copyButton">Copiar</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="d-flex justify-content-end">
        <span class="badge bg-success mb-3">Limite do Usuário: {{ $user->limite }}</span>
    </div>
    <!-- Botão para abrir o modal de adicionar cliente -->
    <button class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#addClient">Adicionar Cliente</button>

    <!-- Botão para importar clientes -->
    <button class="btn btn-secondary mb-3" data-bs-toggle="modal" data-bs-target="#importClients">Importar Clientes</button>

    <!-- Botão para exportar clientes -->
    <!-- <a href="{{ route('app-ecommerce-customer-export') }}" class="btn btn-success mb-3">Exportar Clientes</a> -->

    <a href="#" class="btn btn-success mb-3" data-bs-toggle="modal" data-bs-target="#exportModal">Exportar
        Clientes</a>

    <!-- Modal -->
    <div class="modal fade" id="exportModal" tabindex="-1" aria-labelledby="exportModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exportModalLabel">Escolha a Extensão do Arquivo</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="exportForm" action="{{ route('app-ecommerce-customer-export') }}" method="GET">
                        <div class="mb-3">
                            <label for="extension" class="form-label">Extensão</label>
                            <select name="extension" id="extension" class="form-select" required>
                                <option value="csv">CSV</option>
                                <option value="txt">TXT</option>
                                <option value="xls">XLS</option>
                                <option value="xlsx">XLSX</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success" form="exportForm">Exportar</button>
                </div>
            </div>
        </div>
    </div>
    <style>
        .text-green {
            color: green;
        }

        .text-red {
            color: red;
        }
        
    </style>
    <!-- Clientes List Table -->
    <div class="card">
        <div class="card-header">
            @php
                $isAdmin = Auth::user()->role_id == 1;
            @endphp
            <form method="GET" action="{{ route('app-ecommerce-customer-all') }}">
                <div class="row">
                    @if ($isAdmin)
                        <div class="col-md-4">
                            <select name="filter" class="form-select">
                                <option value="all" {{ request('filter') == 'all' ? 'selected' : '' }}>Todos os
                                    Clientes</option>
                                <option value="mine" {{ request('filter') == 'mine' ? 'selected' : '' }}>Meus Clientes
                                </option>
                            </select>
                        </div>
                    @else
                        <div class="col-md-3">
                            <select name="status" class="form-select">
                                <option value="ativos" {{ request('status') == 'ativos' ? 'selected' : '' }}>Ativos
                                </option>
                                <option value="vencidos" {{ request('status') == 'vencidos' ? 'selected' : '' }}>Vencidos
                                </option>
                                <option value="expiram_hoje" {{ request('status') == 'expiram_hoje' ? 'selected' : '' }}>
                                    Expiram Hoje</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <input type="text" name="search" class="form-control" placeholder="Nome ou WhatsApp"
                                value="{{ request('search') }}">
                        </div>
                    @endif
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary">Buscar</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="card-datatable table-responsive">
            <table class="datatables-customers table border-top">
                <thead>
                    <tr>
                        <th>Cliente</th>
                        <th>Usuário IPTV</th>
                        <th>WhatsApp</th>
                        <th>Vencimento</th>
                        <th>Servidor</th>
                        <th>MAC</th>
                        <th>Notificações</th>
                        <th>Plano</th>
                        <th>Valor</th>
                        <th>Número de Telas</th>
                        <th>Notas</th>
                        <th>Ações</th>
                    </tr>
                </thead>
                <tfoot>
                </tfoot>
                <tbody>
                    @php
                        use Carbon\Carbon;
                    @endphp
                    @foreach ($clientes as $cliente)
                        @php
                            $vencimento = Carbon::parse($cliente->vencimento);
                            $diasRestantes = $vencimento->diffInDays(Carbon::now());
                            $estaVencido = $vencimento->isPast() && !$vencimento->isSameDay(Carbon::now());
                            $diasVencido = $vencimento->diffInDays(Carbon::now(), false); // Calcula os dias vencidos
                        @endphp
                        <tr>
                            <td>{{ $cliente->nome }}</td>
                            <td>{{ $cliente->iptv_nome ?? 'N/A' }}</td>
                            <td>{{ $cliente->whatsapp }}</td>
                            <td>
                                @if ($estaVencido)
                                    <span class="text-red">Vencido há {{ abs($diasVencido) }} dias</span>
                                @elseif ($vencimento->isSameDay(Carbon::now()))
                                    <span class="text-red">Vence hoje</span>
                                @elseif ($diasRestantes == 0)
                                    <span class="text-orange">Vence amanhã</span>
                                @else
                                    <span class="text-green">Vence em {{ $diasRestantes }} dias</span>
                                @endif
                            </td>
                            <td>{{ $cliente->servidor ? $cliente->servidor->nome : 'Sem Servidor' }}</td>
                            <td>{{ $cliente->mac }}</td>
                            <td>{{ $cliente->notificacoes ? 'Sim' : 'Não' }}</td>
                            <td>{{ $cliente->plano ? $cliente->plano->nome : 'Sem Plano' }}</td>
                            <td>
                                @if ($cliente->plano)
                                    R$ {{ number_format($cliente->plano->preco, 2, ',', '.') }}
                                @else
                                    Sem Plano
                                @endif
                            </td>
                            <td>
                                @if ($cliente->numero_de_telas == 1)
                                    1 Tela
                                @else
                                    {{ $cliente->numero_de_telas }} Telas
                                @endif
                            </td>
                            <td>
                              @if (strlen($cliente->notas) > 15)
                                  <span class="short-note">{{ Str::limit($cliente->notas, 15) }}</span>
                                  <span class="full-note d-none">{{ $cliente->notas }}</span>
                                  <a href="#" class="toggle-note">Ver mais</a>
                              @else
                                  <span>{{ $cliente->notas }}</span>
                              @endif
                          </td>
                                                                                                                  <td>
                         <div class="d-grid gap-3">
                            <div class="row g-3">
                                 <div class="col-6 mb-2">
                                     <form action="{{ route('app-ecommerce-customer-destroy', $cliente->id) }}" method="POST" style="display:inline;">
                                          @csrf
                                         @method('DELETE')
                                         <button type="submit" class="btn btn-sm btn-danger w-100" data-bs-toggle="tooltip" data-bs-placement="top" title="Deletar">
                                             <i class="fas fa-trash-alt"></i>
                                        </button>
                                     </form>
                                </div>
                                 <div class="col-6 mb-2">
                                     <button class="btn btn-sm btn-primary w-100" data-bs-toggle="modal" data-bs-target="#editClient{{ $cliente->id }}" data-bs-toggle="tooltip" data-bs-placement="top" title="Editar">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                </div>
                                 <div class="col-6 mt-2">
                                      <form action="{{ route('app-ecommerce-customer-charge', $cliente->id) }}" method="POST" style="display:inline;">
                                         @csrf
                                         @method('POST')
                                         <button type="submit" class="btn btn-sm btn-warning w-100" data-bs-toggle="tooltip" data-bs-placement="top" title="Cobrança Manual">
                                             <i class="fas fa-dollar-sign"></i>
                                        </button>
                                    </form>
                                 </div>
                                 <div class="col-6 mt-2">
                                     <a href="{{ route('app-ecommerce-order-list', ['order_id' => $cliente->id]) }}" class="btn btn-sm btn-success w-100" data-bs-toggle="tooltip" data-bs-placement="top" title="Detalhes da Cobrança">
                                         <i class="fas fa-thumbs-up"></i>
                                     </a>
                                 </div>
                                                                 <div class="col-6 mt-2">
                                    <button class="btn btn-sm btn-info w-100" data-bs-toggle="tooltip" data-bs-placement="top" title="Enviar Dados de Login" onclick="sendLoginDetails('{{ $cliente->id }}')">
                                        <i class="fab fa-whatsapp"></i>
                                    </button>
                                </div>
                             </div>
                         </div>
                    </td>
                            <script>
                                document.addEventListener('DOMContentLoaded', function() {
                                    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
                                    var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
                                        return new bootstrap.Tooltip(tooltipTriggerEl)
                                    })
                                });
                            </script>
                            <script>
                                document.addEventListener('DOMContentLoaded', function() {
                                    const filterSelect = document.querySelector('select[name="status"]');
                                    const searchInput = document.querySelector('input[name="search"]');
                                    const rows = document.querySelectorAll('tbody tr');

                                    filterSelect.addEventListener('change', filterRows);
                                    searchInput.addEventListener('input', filterRows);

                                    function filterRows() {
                                        const filterValue = filterSelect.value;
                                        const searchValue = searchInput.value.toLowerCase();

                                        rows.forEach(row => {
                                            const vencimentoText = row.querySelector('td:nth-child(3)').textContent.toLowerCase();
                                            const nomeText = row.querySelector('td:nth-child(1)').textContent.toLowerCase();
                                            const whatsappText = row.querySelector('td:nth-child(2)').textContent.toLowerCase();

                                            let matchesFilter = false;
                                            if (filterValue === 'ativos' && vencimentoText.includes('vence em')) {
                                                matchesFilter = true;
                                            } else if (filterValue === 'vencidos' && vencimentoText.includes('vencido há')) {
                                                matchesFilter = true;
                                            } else if (filterValue === 'expiram_hoje' && vencimentoText.includes('vence hoje')) {
                                                matchesFilter = true;
                                            } else if (filterValue === '') {
                                                matchesFilter = true;
                                            }

                                            const matchesSearch = nomeText.includes(searchValue) || whatsappText.includes(
                                                searchValue);

                                            if (matchesSearch && (matchesFilter || filterValue === '')) {
                                                row.style.display = '';
                                            } else {
                                                row.style.display = 'none';
                                            }
                                        });
                                    }
                                });
                            </script>

                                                     <!-- Modal de Edição -->
                            <div class="modal fade" id="editClient{{ $cliente->id }}" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog modal-md modal-simple modal-edit-client">
                                    <div class="modal-content p-3 p-md-5">
                                        <div class="modal-body">
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            <div class="text-center mb-4">
                                                <h3 class="mb-2">Editar Cliente</h3>
                                                <p class="text-muted">Atualize os detalhes do cliente.</p>
                                            </div>
                                            <form id="editClientForm{{ $cliente->id }}" class="row g-3" action="{{ route('app-ecommerce-customer-update', $cliente->id) }}" method="POST">
                                                @csrf
                                                @method('PUT')
                                                <div class="col-12">
                                                    <label class="form-label" for="editClientNome{{ $cliente->id }}">Nome</label>
                                                    <input type="text" id="editClientNome{{ $cliente->id }}" name="nome" class="form-control" value="{{ $cliente->nome }}" required />
                                                </div>
                                                <div class="col-12">
                                                    <label class="form-label" for="editClientPassword{{ $cliente->id }}">Senha</label>
                                                    <div class="input-group">
                                                        <input type="password" id="editClientPassword{{ $cliente->id }}" name="password" class="form-control" value="{{ $cliente->password }}" required />
                                                        <button type="button" class="btn btn-outline-secondary" onclick="generatePassword('editClientPassword{{ $cliente->id }}')">
                                                            <i class="fas fa-random"></i>
                                                        </button>
                                                        <button type="button" class="btn btn-outline-secondary" onclick="togglePasswordVisibility('editClientPassword{{ $cliente->id }}')">
                                                            <i class="fas fa-eye" id="togglePasswordIcon{{ $cliente->id }}"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <label class="form-label" for="editClientIPTVNome{{ $cliente->id }}">Usuário IPTV</label>
                                                    <input type="text" id="editClientIPTVNome{{ $cliente->id }}" name="iptv_nome" class="form-control" value="{{ $cliente->iptv_nome }}" />
                                                </div>
                                                <div class="col-12">
                                                    <label class="form-label" for="editClientIPTVSenha{{ $cliente->id }}">Senha IPTV</label>
                                                    <div class="input-group">
                                                        <input type="text" id="editClientIPTVSenha{{ $cliente->id }}" name="iptv_senha" class="form-control" value="{{ $cliente->iptv_senha }}" />
                                                        <button type="button" class="btn btn-outline-secondary" onclick="generatePassword('editClientIPTVSenha{{ $cliente->id }}')">
                                                            <i class="fas fa-random"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <label class="form-label" for="editClientWhatsApp{{ $cliente->id }}">WhatsApp</label>
                                                    <input type="text" id="editClientWhatsApp{{ $cliente->id }}" name="whatsapp" class="form-control" value="{{ $cliente->whatsapp }}" required />
                                                </div>
                                                <div class="col-12">
                                                    <label class="form-label" for="editClientVencimento{{ $cliente->id }}">Vencimento</label>
                                                    <input type="date" id="editClientVencimento{{ $cliente->id }}" name="vencimento" class="form-control" value="{{ $cliente->vencimento }}" required />
                                                </div>
                                                <div class="col-12">
                                                    <label class="form-label" for="editClientServidor{{ $cliente->id }}">Servidor</label>
                                                    <select id="editClientServidor{{ $cliente->id }}" name="servidor_id" class="form-select" required>
                                                        @foreach ($servidores as $servidor)
                                                            <option value="{{ $servidor->id }}" {{ $cliente->servidor_id == $servidor->id ? 'selected' : '' }}>
                                                                {{ $servidor->nome }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-12">
                                                    <label class="form-label" for="editClientMac{{ $cliente->id }}">MAC</label>
                                                    <input type="text" id="editClientMac{{ $cliente->id }}" name="mac" class="form-control" value="{{ $cliente->mac }}" />
                                                </div>
                                                <div class="col-12">
                                                    <label class="form-label" for="editClientNotificacoes{{ $cliente->id }}">Notificações</label>
                                                    <select id="editClientNotificacoes{{ $cliente->id }}" name="notificacoes" class="form-select" required>
                                                        <option value="1" {{ $cliente->notificacoes ? 'selected' : '' }}>Sim</option>
                                                        <option value="0" {{ !$cliente->notificacoes ? 'selected' : '' }}>Não</option>
                                                    </select>
                                                </div>
                                                <div class="col-12">
                                                    <label class="form-label" for="editClientPlano{{ $cliente->id }}">Plano</label>
                                                    <select id="editClientPlano{{ $cliente->id }}" name="plano_id" class="form-select" required>
                                                        @foreach ($planos as $plano)
                                                            <option value="{{ $plano->id }}" {{ $cliente->plano_id == $plano->id ? 'selected' : '' }}>
                                                                {{ $plano->nome }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-12">
                                                    <label class="form-label" for="editClientNumeroDeTelas{{ $cliente->id }}">Número de Telas</label>
                                                    <input type="number" id="editClientNumeroDeTelas{{ $cliente->id }}" name="numero_de_telas" class="form-control" value="{{ $cliente->numero_de_telas }}" required />
                                                </div>
                                                <div class="col-12">
                                                    <label class="form-label" for="editClientNotas{{ $cliente->id }}">Notas</label>
                                                    <textarea id="editClientNotas{{ $cliente->id }}" name="notas" class="form-control">{{ $cliente->notas }}</textarea>
                                                </div>
                                                <div class="col-12 text-center">
                                                    <button type="submit" class="btn btn-primary me-sm-3 me-1">Salvar</button>
                                                    <button type="reset" class="btn btn-label-secondary" data-bs-dismiss="modal" aria-label="Close">Cancelar</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

        <!-- Modal para adicionar novo cliente -->
    <div class="modal fade" id="addClient" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-simple modal-add-client">
            <div class="modal-content p-3 p-md-5">
                <div class="modal-body">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    <div class="text-center mb-4">
                        <h3 class="mb-2">Adicionar Novo Cliente</h3>
                        <p class="text-muted">Preencha os detalhes do novo cliente.</p>
                    </div>
                    <form id="addClientForm" class="row g-3" action="{{ route('app-ecommerce-customer-store') }}" method="POST">
                        @csrf
                        <div class="col-12 col-md-6">
                            <label class="form-label" for="addClientNome">Nome</label>
                            <input type="text" id="addClientNome" name="nome" class="form-control" placeholder="Nome" required />
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label" for="addClientPassword">Senha</label>
                            <div class="input-group">
                                <input type="password" id="addClientPassword" name="password" class="form-control" placeholder="Senha" required />
                                <button type="button" class="btn btn-outline-secondary" onclick="generatePassword('addClientPassword')">
                                    <i class="fas fa-random"></i>
                                </button>
                                <button type="button" class="btn btn-outline-secondary" onclick="togglePasswordVisibility('addClientPassword')">
                                    <i class="fas fa-eye" id="togglePasswordIcon"></i>
                                </button>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label" for="addClientIPTVNome">Usuário IPTV</label>
                            <input type="text" id="addClientIPTVNome" name="iptv_nome" class="form-control" placeholder="Opcional" />
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label" for="addClientIPTVSenha">Senha IPTV</label>
                            <div class="input-group">
                                <input type="text" id="addClientIPTVSenha" name="iptv_senha" class="form-control" placeholder="Opcional" />
                                <button type="button" class="btn btn-outline-secondary" onclick="generatePassword('addClientIPTVSenha')">
                                    <i class="fas fa-random"></i> 
                                </button>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label" for="addClientWhatsApp">WhatsApp</label>
                            <input type="text" id="addClientWhatsApp" name="whatsapp" class="form-control" placeholder="WhatsApp" required />
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label" for="addClientVencimento">Vencimento</label>
                            <input type="date" id="addClientVencimento" name="vencimento" class="form-control" placeholder="Vencimento" required />
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label" for="addClientServidor">Servidor</label>
                            <select id="addClientServidor" name="servidor_id" class="form-select" required>
                                @foreach ($servidores as $servidor)
                                    <option value="{{ $servidor->id }}">{{ $servidor->nome }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label" for="addClientMac">MAC</label>
                            <input type="text" id="addClientMac" name="mac" class="form-control" placeholder="MAC" />
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label" for="addClientNotificacoes">Notificações</label>
                            <select id="addClientNotificacoes" name="notificacoes" class="form-select" required>
                                <option value="1">Sim</option>
                                <option value="0">Não</option>
                            </select>
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label" for="addClientPlano">Plano</label>
                            <select id="addClientPlano" name="plano_id" class="form-select" required>
                                @foreach ($planos as $plano)
                                    <option value="{{ $plano->id }}">{{ $plano->nome }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label" for="addClientNumeroDeTelas">Número de Telas</label>
                            <input type="number" id="addClientNumeroDeTelas" name="numero_de_telas" class="form-control" placeholder="Número de Telas" required />
                        </div>
                        <div class="col-12">
                            <label class="form-label" for="addClientNotas">Notas</label>
                            <textarea id="addClientNotas" name="notas" class="form-control" placeholder="Notas"></textarea>
                        </div>
                        <div class="col-12 text-center">
                            <button type="submit" class="btn btn-primary me-sm-3 me-1">Adicionar</button>
                            <button type="reset" class="btn btn-label-secondary" data-bs-dismiss="modal" aria-label="Close">Cancelar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal para importar clientes -->
    <div class="modal fade" id="importClients" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-simple modal-import-clients">
            <div class="modal-content p-3 p-md-5">
                <div class="modal-body">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    <div class="text-center mb-4">
                        <h3 class="mb-2">Importar Clientes</h3>
                        <p class="text-muted">Faça upload de um arquivo CSV para importar clientes.</p>
                    </div>
                    <form id="importClientsForm" class="row g-3" action="{{ route('app-ecommerce-customer-import') }}"
                        method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="col-12">
                            <label class="form-label" for="importClientsFile">Arquivo CSV</label>
                            <input type="file" id="importClientsFile" name="file" class="form-control"
                                accept=".csv" required />
                        </div>
                        <div class="col-12 text-center">
                            <button type="submit" class="btn btn-primary me-sm-3 me-1">Importar</button>
                            <button type="reset" class="btn btn-label-secondary" data-bs-dismiss="modal"
                                aria-label="Close">Cancelar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $('.datatables-customers').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ],
                initComplete: function() {
                    this.api().columns().every(function() {
                        var column = this;
                        var select = $('<select><option value=""></option></select>')
                            .appendTo($(column.footer()).empty())
                            .on('change', function() {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );

                                column
                                    .search(val ? '^' + val + '$' : '', true, false)
                                    .draw();
                            });

                        column.data().unique().sort().each(function(d, j) {
                            select.append('<option value="' + d + '">' + d +
                                '</option>')
                        });
                    });
                }
            });
        });
    </script>
@endsection