@extends('painel-admin.menu')
@section('title', 'Versões')
@section('php')
@stop
@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">Versões</h2>

              <div class="d-flex flex-column flex-sm-row flex-wrap" style="gap: 5px;">
                  <a href="{{ route('versions.create') }}" class="btn btn-primary">
                      <i class="fa fa-plus"></i> Versão
                  </a>
              </div>
          </div>
      </div>
  </div>
  <br>
  <div class="card">
    <div class="card-header">
      <h5 class="card-title">Filtros</h5>
      <div class="card-tools">
        <a href="#" id="mostrar-filtros"><h6 class="badge badge-info">mostrar</h6></a>
      </div>
    </div>
    <div class="card-body" id="div-filtros" hidden="true">
      <form method="get" action="versions" id="filtroForm" class="col">
        <fieldset class="form-group">
          <div class="row">
            <div class="col-md-3">
              <input id="data" type="date" class="form-control" name="pesquisa_data" value="{{ $filtros['pesquisa_data'] }}" max="2050-12-31">
            </div>
            <div class="col-md-3">
              <select name="versao" class="form-control">
                <option value="" @if(empty($filtros['versao'])) selected @endif>Selecione a versão</option>
                @foreach($versoes as $versao)
                  <option value="{{ $versao->versao }}" @if($versao->versao == $filtros['versao']) selected @endif>{{ $versao->versao }}</option>
                @endforeach
              </select>
            </div>
            <div class="col-md-4">
              <div class="form-check form-check-inline">
                <select name="sistema" class="form-control">
                  <option value="" @if(empty($filtros['sistema'])) selected @endif>Selecione o sitema</option>
                  <option value="Finest">Finest</option>
                  <option value="FrenteECF">Frente ECF</option>
                  <option value="FrenteNFCE">Frente NFCE</option>
                  <option value="Cacamba">Caçamba</option>
                </select>
              </div>
            </div>
            <div class="col-md-2 text-right">
              <button type="submit" class="btn btn-primary">Aplicar Filtro</button>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
  <div class="table-responsive mb-3">
    <table class="table table-striped table-bordered" id="dataTable">
      <thead>
        <tr>
          <th>ID</th>
          <th>Versão</th>
          <th>Sistema</th>
          <th>Sobre</th>
          <th>Status</th>
          <th>Data</th>
          <th>Responsavel</th>
          <th>Ações</th>
        </tr>
      </thead>
      <tbody>
        @foreach($versoes as $versao)
          <tr data-id="{{ $versao->id }}">
            <td data-label="ID">{{$versao->id}}</td>
            <td class="text-truncate" data-label="Versão">{{$versao->versao}}</td>
            <td data-label="Sistema">{{$versao->sistema}}</td>
            <td class="text-truncate" data-label="Sobre">{{$versao->alteracao}}</td>
            <td data-label="Status">
              @if($versao->status == 0)
                Aberto
              @elseif($versao->status == 2)
                Fazendo
              @elseif($versao->status == 1)
                Finalizado
              @endif
            </td>
            <td data-label="Data">{{ \Carbon\Carbon::parse($versao->data_versao)->format('d/m/Y') }}</td>
            <td data-label="Responsavel">
              @foreach($responsaveis as $responsavel)
                @if($responsavel->id == $versao->desenvolvedor)
                  {{ $responsavel->nome }}
                @endif
              @endforeach
            </td>
            <td data-label="Ações">
              <div class="d-flex justify-content-center" style="gap: 10px;">
                <a title="Editar" href="{{route('versions.edit', $versao)}}"><i class="fas fa-edit text-info"></i></a>
                <a title="Visualizar Dados" href="" data-toggle="modal" data-target="#DadosModal{{ $versao->id }}"><i class="fas fa-eye"></i></a>
                <form method="POST" id="formDelete{{$versao->id}}" action="{{route('versions.destroy', $versao->id)}}" enctype="multipart/form-data">
                @csrf
                @method('DELETE')
                  <button type="button" class="btnDeletar" data-id="{{$versao->id}}">
                    <i class="fas fa-trash text-danger mr-1"></i>
                  </button>
                </form>
              </div>
            </td>
          </tr>

          <!-- Modal de dados da versão -->
          <div class="modal fade" id="DadosModal{{ $versao->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-6 col-12">
                      <label for="sistema">ID:</label>
                      <input type="text" class="form-control" value="{{ $versao->id }}" readonly>
                    </div>
                    <div class="col-md-6 col-12">
                      <label for="sistema">Status:</label>
                      <select class="form-control" name="status" disabled>
                        <option value="0" {{ $versao->status == 0 ? 'selected' : '' }}>Aberto</option>
                        <option value="1" {{ $versao->status == 2 ? 'selected' : '' }}>Fazendo</option>
                        <option value="2" {{ $versao->status == 1 ? 'selected' : '' }}>Finalizado</option>
                      </select>
                    </div>
                  </div>
                  <div class="row mt-2">
                    <div class="col-md-6 col-12">
                      <label for="sistema">Sistema:</label>
                      <input type="text" class="form-control" value="{{ $versao->sistema }}" readonly>
                    </div>
                    <div class="col-md-6 col-12">
                      <label for="versao">Versão:</label>
                      <input type="text" class="form-control" value="{{ $versao->versao }}" readonly>
                    </div>            
                  </div>
                  <div class="row mt-2">
                    <div class="col-md-12 col-12">
                      <label for="alteracao">Sobre a Atualização:</label>
                      <textarea class="form-control" rows="3" readonly>{{ $versao->alteracao }}</textarea>
                    </div>
                  </div>
                  <div class="row mt-2">        
                    <div class="col-md-12 col-12">
                                              <label for="arquivo">Sem documento Vinculado</label>
                                                  
                    </div>
                  </div>
                  <div class="row mt-2">        
                    <div class="col-md-6 col-12">
                      <label for="data_versao">Data da Versão:</label>
                      <input type="text" class="form-control" value="{{ \Carbon\Carbon::parse($versao->data_versao)->format('d/m/Y') }}" readonly>
                    </div>
                    <div class="col-md-6 col-12">
                      <label for="desenvolvedor">Desenvolvedor:</label>
                      <input type="text" class="form-control" value="{{ $responsaveis->firstWhere('id', $versao->desenvolvedor)->nome }}" readonly>
                    </div>
                  </div>
                </div>          
                <div class="modal-footer">
                  <a class="btn btn-info mb-2 mb-sm-0 mr-sm-2" title="Visualizar" href="{{ route('versions.show', $versao->id) }}">
                    <i class="fas fa-eye"></i> Mais Detalhes
                  </a>
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                </div>
              </div>
            </div>
          </div>
        @endforeach 
      </tbody>
    </table>
  </div>

  <style>
    #solucao,#motivo {
      height: 250px;
    }
    .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 = 'versoes-link';

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

    const div_filtros = document.getElementById("div-filtros");
    const mostrar_filtros = document.getElementById("mostrar-filtros");

    let urlAtual = window.location.href;
    let urlClass = new URL(urlAtual);

    if(urlClass.searchParams.size > 0){
      div_filtros.hidden = false;
    }
    mostrar_filtros.addEventListener("click", function (e){
      if(div_filtros.hidden){
        div_filtros.hidden = false;
        return;
      }
      div_filtros.hidden = true;
    });

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

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

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