@extends('layouts/layoutMaster')

@section('title', 'Usuários')

@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')}}" />
@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>
@endsection

@section('page-script')
<script src="{{asset('assets/js/app-user-list.js')}}"></script>
<script>
  function updateLimite(userId) {
    var planSelect = document.getElementById('editUserPlan' + userId);
    var selectedOption = planSelect.options[planSelect.selectedIndex];
    var limite = selectedOption.getAttribute('data-limite');
    document.getElementById('editUserLimite' + userId).value = limite;
  }

  document.addEventListener('DOMContentLoaded', function () {
  const searchInput = document.getElementById('searchInput');
  const table = document.querySelector('.datatables-users');
  const rows = table.querySelectorAll('tbody tr');

  searchInput.addEventListener('keyup', function () {
    const searchTerm = searchInput.value.toLowerCase();

    rows.forEach(row => {
      const cells = row.querySelectorAll('td');
      let match = false;

      cells.forEach(cell => {
        if (cell.textContent.toLowerCase().includes(searchTerm)) {
          match = true;
        }
      });

      if (match) {
        row.style.display = '';
      } else {
        row.style.display = 'none';
      }
    });
  });
});
</script>
@endsection

@section('content')

<div class="row g-4 mb-4">
  <!-- Estatísticas de usuários -->
  <!-- ... (mantido conforme necessário) ... -->

</div>

<!-- Users List Table -->
<div class="card">
  <div class="card-header border-bottom">
    <h5 class="card-title mb-3">Filtra Usuário</h5>
    <div class="d-flex justify-content-between align-items-center row pb-2 gap-3 gap-md-0">
      <div class="col-md-4 user_role"></div>
      <div class="col-md-4 user_plan"></div>
      <div class="col-md-4 user_status"></div>
    </div>
    <div class="d-flex justify-content-between align-items-center row pb-2 gap-3 gap-md-0">
      <div class="col-md-12">
        <input type="text" id="searchInput" class="form-control" placeholder="Search...">
      </div>
    </div>
  </div>
  <div class="card-datatable table-responsive">
    <table class="datatables-users table">
      <thead class="border-top">
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Dono</th>
          <th>WhatsApp</th>
          <th>Vencimento</th>
          <th>Permissões</th>
          <th>Status</th>
          <th>Plan</th>
          <th>Limite</th>
          <th>Créditos</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        @foreach ($users as $user)
        @if ($user->id !== Auth::id())
      <tr>
        <td>{{ $user->id }}</td>
        <td>{{ $user->name }}</td>
       <td>{{ $user->user_id ? ($user->parent ? $user->parent->name : 'N/A') : 'Administrador' }}</td>
        <td>{{ $user->whatsapp }}</td>
        <td>{{ \Carbon\Carbon::parse($user->trial_ends_at)->format('d/m/Y H:i') }}</td>
        <td>{{ $user->role->name }}</td>
        <td>{{ $user->status }}</td>
                <td>{{ optional($user->plano)->nome ?? 'Sem Plano' }}</td>
        <td>{{ $user->limite == -1 ? 'Ilimitado' : $user->limite }}</td>
        <td>{{ $user->creditos }}</td>
        <td>
        <button class="btn btn-sm btn-primary" data-bs-toggle="modal"
          data-bs-target="#editUserModal{{ $user->id }}">Edit</button>
        <form action="{{ route('users.destroy', $user->id) }}" method="POST" style="display:inline;">
          @csrf
          @method('DELETE')
          <button type="submit" class="btn btn-sm btn-danger">Delete</button>
        </form>
        <button class="btn btn-sm btn-warning" data-bs-toggle="modal"
          data-bs-target="#renewUserModal{{ $user->id }}">Renovar</button>
        </td>
      </tr>

      <!-- Modal de Edição -->
      <div class="modal fade" id="editUserModal{{ $user->id }}" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-simple modal-edit-user">
        <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 Usuário</h3>
            <p class="text-muted">Atualize os detalhes do usuário.</p>
          </div>
          <form id="editUserForm{{ $user->id }}" class="row g-3" action="{{ route('users.update', $user->id) }}"
            method="POST">
            @csrf
            @method('PUT')
            <div class="col-12">
            <label class="form-label" for="editUserName{{ $user->id }}">Nome</label>
            <input type="text" id="editUserName{{ $user->id }}" name="name" class="form-control"
              value="{{ $user->name }}" required />
            </div>
            <div class="col-12">
            <label class="form-label" for="editUserWhatsapp{{ $user->id }}">WhatsApp</label>
            <input type="text" id="editUserWhatsapp{{ $user->id }}" name="whatsapp" class="form-control"
              value="{{ $user->whatsapp }}" required />
            </div>
             <div class="col-12">
             <label class="form-label" for="editUserMaster{{ $user->id }}">Funcao</label>
             <select id="editUserRole{{ $user->id }}" name="role_id" class="form-select">
             <option value="1" {{ $user->role_id == 1 ? 'selected' : '' }}>Admin</option>
              <option value="2" {{ $user->role_id == 2 ? 'selected' : '' }}>Master</option>
              <option value="3" {{ $user->role_id == 3 ? 'selected' : '' }}>Cliente</option>
              <option value="4" {{ $user->role_id == 4 ? 'selected' : '' }}>Revendedor</option>
            </select>
            </div>
            <div class="col-12">
            <label class="form-label" for="editUserStatus{{ $user->id }}">Status</label>
            <select id="editUserStatus{{ $user->id }}" name="status" class="form-control" required>
              <option value="ativo" {{ $user->status == 'ativo' ? 'selected' : '' }}>Ativo</option>
              <option value="desativado" {{ $user->status == 'desativado' ? 'selected' : '' }}>Desativado</option>
            </select>
            </div>
            <div class="col-12">
            <label class="form-label" for="editUserPlan{{ $user->id }}">Plano</label>
            <select id="editUserPlan{{ $user->id }}" name="plano_id" class="form-control" required
              onchange="updateLimite({{ $user->id }})">
              @foreach($planos_revenda as $plano)
              <option value="{{ $plano->id }}" data-limite="{{ $plano->limite }}" {{ $user->plano_id == $plano->id ? 'selected' : '' }}>{{ $plano->nome }}</option>
           @endforeach
            </select>
            </div>
            <div class="col-12">
            <label class="form-label" for="editUserLimite{{ $user->id }}">Limite</label>
            <input type="number" id="editUserLimite{{ $user->id }}" name="limite" class="form-control"
              value="{{ $user->limite }}" required />
            </div>
            <div class="col-12">
            <label class="form-label" for="editUserCreditos{{ $user->id }}">Créditos</label>
            <input type="number" id="editUserCreditos{{ $user->id }}" name="creditos" class="form-control"
              value="{{ $user->creditos }}" required />
            </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>

      <!-- Modal de Renovação -->
      <div class="modal fade" id="renewUserModal{{ $user->id }}" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-simple modal-renew-user">
        <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">Renovar Usuário</h3>
            <p class="text-muted">Atualize os detalhes da renovação do usuário.</p>
          </div>
          <form id="renewUserForm{{ $user->id }}" class="row g-3" action="{{ route('users.renew', $user->id) }}"
            method="POST">
            @csrf
            <div class="col-12">
            <label class="form-label" for="renewUserStatus{{ $user->id }}">Status</label>
            <select id="renewUserStatus{{ $user->id }}" name="status" class="form-control" required>
              <option value="ativo" {{ $user->status == 'ativo' ? 'selected' : '' }}>Ativo</option>
              <option value="desativado" {{ $user->status == 'desativado' ? 'selected' : '' }}>Desativado</option>
            </select>
            </div>
            <div class="col-12">
            <label class="form-label" for="renewUserTrialEndsAt{{ $user->id }}">Data de Término do Teste</label>
            <input type="date" id="renewUserTrialEndsAt{{ $user->id }}" name="trial_ends_at"
              class="form-control" value="{{ $user->trial_ends_at ?? \Carbon\Carbon::now()->format('Y-m-d') }}"
              required />
            </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>
      @endif
     @endforeach
      </tbody>
    </table>
  </div>
</div>
</div>

<!-- Modal de Adição -->
<div class="modal fade" id="addUserModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-simple modal-add-user">
    <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 Usuário</h3>
          <p class="text-muted">Preencha os detalhes do novo usuário.</p>
        </div>
        <form id="addUserForm" class="row g-3" action="{{ route('users.store') }}" method="POST">
          @csrf
          <div class="col-12">
            <label class="form-label" for="addUserName">Nome</label>
            <input type="text" id="addUserName" name="name" class="form-control" required />
          </div>
          <div class="col-12">
            <label class="form-label" for="addUserWhatsapp">WhatsApp</label>
            <input type="text" id="addUserWhatsapp" name="whatsapp" class="form-control" required />
          </div>
          <div class="col-12">
            <label class="form-label" for="addUserRole">Role</label>
            <input type="text" id="addUserRole" name="role_id" class="form-control" required />
          </div>
          <div class="col-12">
            <label class="form-label" for="addUserStatus">Status</label>
            <input type="text" id="addUserStatus" name="status" class="form-control" required />
          </div>
          <div class="col-12">
            <label class="form-label" for="addUserPlan">Plan</label>
            <input type="text" id="addUserPlan" name="plano_id" class="form-control" required />
          </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>

@endsection