@extends('painel-admin.menu')
@section('title', 'Registro de Erros')

@section('content')
  @if(Session::has('success'))
    @php
      $data = Session::get('success');
    @endphp

    @if (is_array($data))
      @foreach ($data as $msg)
        <div class="alert alert-success" role="alert">
          <i class="fa fa-check"></i>
          {{ $msg }}
        </div>
      @endforeach
    @else
      <div class="alert alert-success" role="alert">
        <i class="fa fa-check"></i>
        {{ $data }}
      </div>
    @endif
  @endif

  @if(Session::has('error'))
    @php
      $data = Session::get('error');
    @endphp

    @if (is_array($data))
      @foreach ($data as $msg)
        <div class="alert alert-danger" role="alert">
          <i class="fa fa-times"></i>
          {{ $msg }}
        </div>
      @endforeach
    @else
      <div class="alert alert-danger" role="alert">
        <i class="fa fa-times"></i>
        {{ $data }}
      </div>
    @endif
  @endif
  @csrf
  <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">Registro de Erros</h2>
              <div class="d-flex flex-column flex-sm-row flex-wrap" style="gap: 5px;">
                  <button type="submit" data-toggle="modal" data-target="#CriarErro" class="btn btn-primary">
                    <i class="fas fa-plus"></i> Erro
                </button>
              </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>Descrição</th>
          <th>Ações</th>
        </tr>
      </thead>
      <tbody>
        @foreach($erros as $erro)
          <tr data-id="{{ $erro->id }}">
            <td data-label="ID">{{$erro->id}}</td>
            <td class="text-truncate" data-label="Error">{{$erro->descricao}}</td>
            <td data-label="Ações">
              <div class="d-flex justify-content-center" style="gap: 10px;">
                <a title="Editar" href="{{route('RegistroErros.edit', $erro)}}"><i class="fas fa-edit text-info"></i></a>
                <a title="Visualizar Dados" href="" data-toggle="modal" data-target="#DadosModal{{ $erro->id }}"><i class="fas fa-eye"></i></a>
                <form method="POST" id="formDelete{{$erro->id}}" action="{{route('RegistroErros.destroy', $erro->id)}}" enctype="multipart/form-data">
                @csrf
                @method('DELETE')
                  <button type="button" class="btnDeletar" data-id="{{$erro->id}}">
                    <i class="fas fa-trash text-danger mr-1"></i>
                  </button>
                </form>
              </div>
            </td>
          </tr>
        @endforeach 
      </tbody>
    </table>
  </div>

  
  <!-- Modal de confirmação do delete -->
  <div class="modal fade" id="confirmDeleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Exclusão do Registro do Error</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          Tem certeza de que deseja excluir este Error?
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
          <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Excluir</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal de dados do Erro -->
  @foreach($erros as $index => $erro)
    <div class="modal fade" id="DadosModal{{ $erro->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Detalhes do Registro</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-md-12 col-12">
                <label>Descrição:</label>
                <input type="text" class="form-control" value="{{ $erro->descricao }}" readonly>
              </div>
            </div>
          </div>        
          <div class="modal-footer d-flex flex-column flex-sm-row justify-content-between align-items-center">
            <div class="d-flex flex-column flex-sm-row align-items-center mt-3 mt-sm-0">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  @endforeach

  <!-- Modal de criação de Erro -->
  <form method="POST" id="formEnvioDados" action="{{route('RegistroErros.store')}}" enctype="multipart/form-data">
    @method('POST')
    @csrf
    <div class="modal fade" id="CriarErro" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Criação do Registro</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
                <div class="col-md-12">
                  <label>Descrição<span title="Campo Obrigatório" style="color:red">*</span></label>
                  <input type="text" class="form-control" id="descricao" name="descricao" value="{{ old('descricao') }}">
                  @if ($errors->has('descricao'))
                    <p class="text-danger">{{ $errors->first('descricao') }}</p>
                  @endif          
                </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" id="btnSalvar">Cadastrar</button>
          </div>
        </div>
      </div>
    </div>
  </form>

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

    .text-truncate {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Celular */
    @media (max-width: 768px) {
      .table-responsive {
          overflow-x: auto;
      }

      .table thead {
          display: none;
      }

      .table tbody tr {
          display: block;
          margin-bottom: 10px;
          border: 1px solid #ddd;
          padding: 10px;
          border-radius: 8px;
          background: #fff;
      }

      .table tbody td {
          display: flex;
          justify-content: space-between;
          text-align: left;
          font-size: 14px;
          padding: 8px 10px;
          position: relative;
          border-bottom: 1px solid #ddd;
      }

      .table tbody td::before {
          content: attr(data-label);
          font-weight: bold;
          text-align: left;
          font-size: 14px;
          color: #333;
      }

      .text-truncate {
          max-width: 440px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
      }

      .actions {
          text-align: center;
          display: flex;
          gap: 5px;
          justify-content: center;
      }

      .actions button {
          font-size: 12px;
          padding: 5px 8px;
      }
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 
  <script>
    var currentItemId = 'RegistroErros-link';

    $(document).ready(function () {
      $('#dataTable').DataTable({
        "paging": false,
        "order": [[0, "desc"]]
      });
    });

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

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

    document.getElementById('btnSalvar').addEventListener('click', function(event) {
      event.preventDefault();

      Swal.fire({
        title: 'Confirmação',
        text: 'Deseja realmente gravar esse Erro?',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Confirmar',
        cancelButtonText: 'Cancelar',
        didOpen: () => {
            const confirmButton = Swal.getConfirmButton();
            if (confirmButton) {
                confirmButton.focus();
                
                document.addEventListener('keydown', function onKeyPress(e) {
                    if (e.key === 'Enter') {
                        confirmButton.click();
                        document.removeEventListener('keydown', onKeyPress);
                    }
                });
            }
        }
      }).then((result) => {
        if (result.isConfirmed) {
            document.getElementById('formEnvioDados').submit();
        }
      });
    });

    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 esse Registro de Erro?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Confirmar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
      });
    });
  </script>
@endsection