@extends('portaria.portaria')



@section('content')
    <div class="bg-white max-w-screen max-h-auto max-w-auto mx-auto sm:w-full xl:w-11/12  rounded-lg mt-16 mb-16 pb-8 pt-8">
        <h1 class="text-orangeblack text-lg font-bold flex text-center justify-center m-3 mt-3 mb-3 p-3">Portaria - <span class="text-lg">Registro</span> </h1>
        <div class="flex flex-col md:flex-row justify-center items-center">
            <h1 class="bg-yellow-300 max-w-60  rounded-md text-lg font-bold flex text-center justify-center m-3 mt-3 mb-3 p-3">Em aberto: <span class="text-lg">{{$totalPendente}}</span> </h1>
            <h1 class="bg-green-300 max-w-60 rounded-md text-lg font-bold flex text-center justify-center m-3 mt-3 mb-3 p-3">Finalizado: <span class="text-lg">{{$totalFinalizado}}</span> </h1>
            <h1 class="bg-slate-300 max-w-60 rounded-md text-lg font-bold flex text-center justify-center m-3 mt-3 mb-3 p-3">Registros Totais: <span class="text-lg">{{$totalCadastrado}}</span> </h1>

        </div>

        <div class=" rounded-lg mb-10 m-3 sm:p-2 p-1   lg:m-3 xl:m-3 flex justify-center ">
            <form method="GET" action="{{ route('registros.listar') }}" class=" bg-gray-200  p-3  rounded-md max-w-full mx-auto m-0 mt-5 mb-3 sm:flex flex-row justify-items-center lg:w-auto">
                <input name="nome" id="nome" class="bg-gray-50 border border-gray-300 text-blueblack text-sm rounded-lg focus:ring-gray-50 sm:w-5/6 lg:w-3/4 w-11/12  p-2 m-2" placeholder="Nome">
                <input name="cpf" id="cpf" class="bg-gray-50 border border-gray-300 text-blueblack text-sm rounded-lg focus:ring-gray-50 sm:w-5/6 lg:w-3/4 w-11/12  p-2 m-2" placeholder="CPF">
                <input name="empresa" id="empresa" class="bg-gray-50 border border-gray-300 text-blueblack text-sm rounded-lg focus:ring-gray-50 sm:w-5/6 lg:w-3/4 w-11/12  p-2 m-2" placeholder="Empresa">
                <input name="placa_selecionada" id="placa" class="bg-gray-50 border border-gray-300 text-blueblack text-sm rounded-lg focus:ring-gray-50 sm:w-5/6 lg:w-3/4 w-11/12  p-2 m-2" placeholder="Placa">
                <input type="date" name="dataInicial" id="dataInicial" class="bg-gray-50 border border-gray-300 text-blueblack text-sm rounded-lg focus:ring-gray-50 sm:w-5/6 lg:w-1/4 w-11/12 p-2 m-2" placeholder="Data inicial">
                <input type="date" name="dataFinal" id="dataFinal" class="bg-gray-50 border border-gray-300 text-blueblack text-sm rounded-lg focus:ring-gray-50 sm:w-5/6 lg:w-1/4 w-11/12 p-2 m-2" placeholder="Data final">
                <select name="status" id="status" class="bg-gray-50 border border-gray-300 text-blueblack text-sm rounded-lg focus:ring-gray-50 sm:w-5/6 lg:w-2/4 w-11/12 p-2 m-2">
                    <option value="" selected>Status</option>
                    <option value="finalizado">Finalizado</option>
                    <option value="pendente">Pendente</option>
                </select>
            
                <button type="submit" class="text-white bg-blueblack hover:bg-orangeblack
                    text-base lg:rounded-lg rounded-md p-1 sm:w-5/6 m-2 lg:max-w-28 ">Pesquisar
                </button>
            </form>
            
        </div>

        <div class="relative overflow-x-auto shadow-md rounded m-3">
            <table class="w-full text-sm text-left rtl:text-right text-blueblack">
                <thead class="text-xs text-white  uppercase bg-blueblack rounded-lg">
                    <tr>
                        <th scope="col" class="px-4 py-3 text-center">
                            Senha
                        </th>
                        <th scope="col" class="px-4 py-3 text-center">
                            Nome
                        </th>
                        <th scope="col" class="px-4 py-3 text-center">
                            CPF
                        </th>
                        <th scope="col" class="px-4 py-3 text-center">
                            Empresa
                        </th>
                        <th scope="col" class="px-4 py-3 text-center">
                            Placa
                        </th>
                        <th scope="col" class="px-4 py-3 text-center">
                            Status Portaria
                        </th>
                        <th scope="col" class="px-4 py-3 text-center">
                            Entrada
                        </th>
                        <th scope="col" class="px-4 py-3 text-center">
                            Saída
                        </th>
                        <th scope="col" class="px-4 py-3 text-center">
                            Editar
                        </th>
                        <th scope="col" class="px-4 py-3 text-center">
                            Finalizar
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($registros as $registro)
                        @if ($registro->status === 'pendente')
                            <tr class="bg-yellow-100 border-b hover:bg-gray-200 text-blueblack ">
                        @else
                            <tr class="bg-white border-b hover:bg-gray-200 text-blueblack ">
                        @endif
                
                            <td class="text-center">{{ $registro->id }}</td>
                
                            <!-- Nome -->
                            <td class="text-center">
                                {{ $registro->visitante?->nome 
                                    ? strtoupper($registro->visitante->nome) 
                                    : 'Usuário deletado' }}
                            </td>
                
                            <!-- CPF -->
                            <td class="text-center">
                                @if ($registro->visitante?->cpf)
                                    {{ substr($registro->visitante->cpf, 0, 3) . '.' . substr($registro->visitante->cpf, 3, 3) . '.' . substr($registro->visitante->cpf, 6, 3) . '-' . substr($registro->visitante->cpf, 9, 2) }}
                                @else
                                    ---
                                @endif
                            </td>
                
                            <!-- Empresa -->
                            <td class="text-center">
                                {{ $registro->visitante?->empresa 
                                    ? strtoupper($registro->visitante->empresa) 
                                    : '---' }}
                            </td>
                
                            <td class="text-center">{{ $registro->placa }}</td>
                
                            <td class="text-center">{{ strtoupper($registro->status) }}</td>
                
                            <td class="text-center">{{ $registro->created_at->format('d/m/Y H:i:s') }}</td>
                
                            @if($registro->updated_at != null)
                                <td class="text-center">{{ $registro->updated_at->format('d/m/Y H:i:s') }}</td>
                            @else
                                <td class="text-center">Em aberto</td>
                            @endif
                
                            @php
                                $registro_id = $registro->id;
                
                                if (strtoupper($registro->status) === "PENDENTE") {
                                    echo '<td class="px-6 py-2 text-center">
                                        <button class="btnEditar" data-registro-id="'. $registro_id .'"  
                                        data-modal-target="update-modal" data-modal-toggle="update-modal">
                                            <svg class="w-6 h-6 text-yellow-600 bg-yellow-200 rounded-full" aria-hidden="true" 
                                            xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" 
                                            viewBox="0 0 24 24">
                                                <path fill-rule="evenodd" d="M11.32 6.176H5c-1.105 0-2 .949-2 2.118v10.588C3 20.052 3.895 21 5 21h11c1.105 0 2-.948 2-2.118v-7.75l-3.914 4.144A2.46 2.46 0 0 1 12.81 16l-2.681.568c-1.75.37-3.292-1.263-2.942-3.115l.536-2.839c.097-.512.335-.983.684-1.352l2.914-3.086Z" clip-rule="evenodd"/>
                                                <path fill-rule="evenodd" d="M19.846 4.318a2.148 2.148 0 0 0-.437-.692 2.014 2.014 0 0 0-.654-.463 1.92 1.92 0 0 0-1.544 0 2.014 2.014 0 0 0-.654.463l-.546.578 2.852 3.02.546-.579a2.14 2.14 0 0 0 .437-.692 2.244 2.244 0 0 0 0-1.635ZM17.45 8.721 14.597 5.7 9.82 10.76a.54.54 0 0 0-.137.27l-.536 2.84c-.07.37.239.696.588.622l2.682-.567a.492.492 0 0 0 .255-.145l4.778-5.06Z" clip-rule="evenodd"/>
                                            </svg>
                                        </button>
                                    </td>';
                
                                    echo '<td class="px-6 py-2 text-center">
                                        <button id="btnFim" class="btnFim" data-modal-target="static-modal" 
                                        data-modal-toggle="static-modal" data-registro-id="' . $registro_id . '">
                                            <svg class="w-6 h-6 text-green-700 bg-green-300 rounded-full" aria-hidden="true" 
                                            xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" 
                                            viewBox="0 0 24 24">
                                                <path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm13.707-1.293a1 1 0 0 0-1.414-1.414L11 12.586l-1.793-1.793a1 1 0 0 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l4-4Z" clip-rule="evenodd"/>
                                            </svg>
                                        </button>
                                    </td>';
                                }
                            @endphp
                
                        </tr>
                    @endforeach
                </tbody>
                
            </table>
        </div>
        {{ $registros->appends(request()->query())->links() }}
    </div>


     <!-- Modal update -->
  <div id="update-modal" data-modal-backdrop="update" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
    <div class="relative m-3 p-6 min-w-96  max-h-full">
        <!-- Modal content -->
        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
            <!-- Modal header -->
            <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                    Alterar Registro
                </h3>
                <button id="closeModalUpdate" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="update-modal">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>
            <!-- Modal body -->
            <div class="p-4 md:p-5 space-y-4 w-full">
                <div class="w-full">
                        <label for="placaAntiga" class="block mb-2 text-sm font-medium text-gray-900 ">Placa Atual</label>
                        <input type="hidden" id="hiddenId">
                        <input type="text" name="nome" id="placaAntiga" class="bg-gray-50 border border-white text-red-600 font-bold text-sm rounded-md
                        focus:ring-white focus:border-white block w-full p-2.5" readonly/>
                      
                </div>
                <div class="w-full">
                    <label for="placaNova" class="block mb-2 text-sm font-medium text-gray-900 ">Nova Placa</label>
                    <input type="text" name="nome" id="placaNova" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md
                     focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" minlength="10" maxlength="30" placeholder="Informe a nova placa" required/>

                </div>
                <div class="w-full">
                    <label for="motivo" class="block mb-2 text-sm font-medium text-gray-900 ">Motivo</label>
                    <textarea type="text" name="nome" id="motivo" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md
                     focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" minlength="10" maxlength="30" required placeholder="Informe o motivo da alteração" ></textarea>
                </div>
            </div>
            <div id="DivRetornoUpdate">

            </div>
            <!-- Modal footer -->
            
            <div class="flex items-center  p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
                <button id="btnSimUpdate"  type="button" class="text-white bg-orangeblack hover:bg-orangenow focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center" value="">Sim</button>
                <button id="btnNao" data-modal-hide="update-modal" type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blueblack focus:z-10 focus:ring-4 focus:ring-gray-100 
              ">Não</button>
            </div>
        </div>
    </div>
</div>

  <!-- Modal finalização -->
  <div id="static-modal" data-modal-backdrop="static" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
      <div class="relative m-3 p-6 w-auto max-w-2xl max-h-full">
          <!-- Modal content -->
          <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
              <!-- Modal header -->
              <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
                  <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                      Confirmar Saída
                  </h3>
                  <button id="closeModalUpdate" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="static-modal">
                      <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                      </svg>
                      <span class="sr-only">Close modal</span>
                  </button>
              </div>
              <!-- Modal body -->
              <div class="p-4 md:p-5 space-y-4">
                  <p class="text-center leading-relaxed text-black">
                  Você realmente deseja confirmar a saída deste veículo? 
                  </p>
                  <p class="text-center bg-gray-400 text-gray-800 rounded-md"></p>
              </div>
              <div id="DivRetornoFim">

              </div>
              <!-- Modal footer -->
              <div class="flex items-center  p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
                  <button id="btnSimFim"  type="button" class="text-white bg-orangeblack hover:bg-orangenow focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Sim</button>
                  <button id="btnNao" data-modal-hide="static-modal" type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blueblack focus:z-10 focus:ring-4 focus:ring-gray-100 
                ">Não</button>
              </div>
          </div>
      </div>
  </div> 
  
  <script type="module" src="{{asset('js/formularios/portaria/formUpdateRegistro.js')}}"></script>

</div>

@endsection