@extends('layouts/layoutMaster')
@section('title', 'Servidores')

@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-ecommerce-customer-all.js')}}"></script>
@endsection

@section('content')
<h4 class="py-3 mb-2">
<span class="text-muted fw-light">{{ config('variables.templateName', 'TemplateName') }} / </span> Servidores
</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
<!-- Botão para abrir o modal de adicionar servidor -->
<button class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#addServidor">Adicionar Servidor</button>

<!-- Servidores List Table -->
<div class="card">
  <div class="card-datatable table-responsive">
    <table class="datatables-servidores table border-top">
      <thead>
        <tr>
          <th>Nome</th>
          <th>Número de Clientes</th> <!-- Nova coluna -->
          <th>Ações</th>
        </tr>
      </thead>
      <tbody>
        @foreach($servidores as $servidor)
          <tr>
            <td>{{ $servidor->nome }}</td>
            <td>{{ $servidor->clientes_count }}</td> <!-- Exibir a contagem de clientes -->
            <td>
              <form action="{{ route('servidores.destroy', $servidor->id) }}" method="POST" style="display:inline;">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-danger">Deletar</button>
              </form>
              <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editServidor{{ $servidor->id }}">Editar</button>
            </td>
          </tr>

          <!-- Modal de Edição -->
          <div class="modal fade" id="editServidor{{ $servidor->id }}" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-simple modal-edit-servidor">
              <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 Servidor</h3>
                    <p class="text-muted">Atualize os detalhes do servidor.</p>
                  </div>
                  <form id="editServidorForm{{ $servidor->id }}" class="row g-3" action="{{ route('servidores.update', $servidor->id) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="col-12">
                      <label class="form-label" for="editServidorNome{{ $servidor->id }}">Nome</label>
                      <input type="text" id="editServidorNome{{ $servidor->id }}" name="nome" class="form-control" value="{{ $servidor->nome }}" 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>
        @endforeach
      </tbody>
    </table>
  </div>
</div>

<!-- Modal para adicionar novo servidor -->
<div class="modal fade" id="addServidor" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-simple modal-add-servidor">
    <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 Servidor</h3>
          <p class="text-muted">Preencha os detalhes do novo servidor.</p>
        </div>
        <form id="addServidorForm" class="row g-3" action="{{ route('servidores.store') }}" method="POST">
          @csrf
          <div class="col-12">
            <label class="form-label" for="addServidorNome">Nome</label>
            <input type="text" id="addServidorNome" name="nome" class="form-control" placeholder="Nome do Servidor" required />
          </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>
@endsection