@extends('painel-admin.menu')
@section('title', 'Funcionario')
@section('content')
  @if(session('success'))
    <div class="alert alert-success">
      {{ session('success') }}
    </div>
  @endif
  @if(session('successs'))
    <div class="alert alert-danger">
      <ul>
        @foreach(session('success')->all() as $success)
          <li>{{ $success }}</li>
        @endforeach
      </ul>
    </div>
  @endif
  @if(session('error'))
    <div class="alert alert-danger">
      {{ session('error') }}
    </div>
  @endif
  @if(session('errors'))
    <div class="alert alert-danger">
      <ul>
        @foreach(session('errors')->all() as $error)
          <li>{{ $error }}</li>
        @endforeach
      </ul>
    </div>
  @endif
  <div class="row">
    <div class="col-12 mt-3">
        <div class="d-flex flex-column flex-sm-row justify-content-between align-items-sm-center flex-wrap">
            <h2 class="mb-3 mb-sm-0">Funcionarios</h2>

            <div class="d-flex flex-column flex-sm-row flex-wrap" style="gap: 5px;">
                <a href="{{ route('funcionario.create') }}" class="btn btn-primary">
                    <i class="fa fa-plus"></i> Funcionario
                </a>
            </div>
        </div>
    </div>
  </div>
  <br>
  <div class="table-responsive mb-3">
    <table class="table table-striped table-bordered" id="dataTable">
      <thead>
        <tr>
          <th>ID</th>
          <th>Nome</th>
          <th>Usuario</th>
          <th>Email</th>
          <th>Senha</th>
          <th>Nivel</th>
          <th>Ações</th>
        </tr>
      </thead>
      <tbody>
      @foreach($funcionarios as $funcionario)
         <tr>
            <td data-label="ID">{{$funcionario->id}}</td>
            <td data-label="Nome">{{$funcionario->nome}}</td>
            <td data-label="Usuario">{{$funcionario->usuario}}</td>
            <td data-label="Email">{{$funcionario->email}}</td>
            <td data-label="Senha">**********</td>
            <td data-label="Nivel">{{$funcionario->nivel}}</td>
            <td data-label="Ações">
              <div class="d-flex justify-content-center">
                <a title="Editar" href="{{route('funcionario.edit', $funcionario->id)}}"><i class="fas fa-edit text-info mr-1"></i></a>
                <a title="Visualizar" href="{{route('funcionario.show', $funcionario->id)}}"><i class="fas fa-eye text-info mr-1"></i></a>
                <form method="POST" id="formDelete{{$funcionario->id}}" action="{{route('funcionario.destroy', $funcionario->id)}}" enctype="multipart/form-data">
                @csrf
                @method('DELETE')
                  <button type="button" class="btnDeletar" data-id="{{$funcionario->id}}">
                    <i class="fas fa-trash text-danger mr-1"></i>
                  </button>
                </form>
              </div>
            </td>
        </tr>
        @endforeach 
      </tbody>
    </table>
  </div>

  <style>
    .scrollbar-horizontal {
      overflow-x: auto;
    }

     /* Celular */
     @media (max-width: 768px) {
      .table thead {
          display: none;
      }
      .table tbody tr {
          display: block;
          margin-bottom: 10px;
          border: 1px solid #ddd;
          padding: 10px;
          border-radius: 8px;
      }
      .table tbody td {
          display: block;
          text-align: left;
          font-size: 14px;
          padding: 5px 10px;
          position: relative;
          border-bottom: 1px solid #ddd;
      }
      .table tbody td::before {
          content: attr(data-label);
          position: absolute;
          left: 10px;
          font-weight: bold;
          text-align: left;
          top: 5px; 
          padding-right: 5px;
          font-size: 12px;
          white-space: nowrap;
      }
      .table tbody td {
          padding-top: 25px;
      }
      .actions {
          text-align: center;
      }
    }
  </style>

  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $('#dataTable').DataTable({
        "paging": false,
        "order": [[0, "desc"]]
      });
    });

    var tableScroll = document.querySelector('.table-responsive-sm');

    if (tableScroll) {  
      tableScroll.classList.add('scrollbar-horizontal');
    }

    var currentItemId = 'funcionarios-link';

    document.querySelectorAll('.btnDeletar').forEach(function(button) {
      button.addEventListener('click', function(event) {
        event.preventDefault();

        const formId = 'formDelete' + button.getAttribute('data-id');
        const form = document.getElementById(formId);

        Swal.fire({
            title: 'Confirmação',
            text: 'Deseja realmente excluir essa Funcionario?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Confirmar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
      });
    });    
  </script>


@endsection