@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"><span class="text-lg">Lista de Visitantes</span> </h1>

       
        <div class="rounded-lg mb-10 m-3 sm:p-2 p-1 lg:m-3 flex justify-center ">
            
            <form method="GET" action="{{ route('portaria.lista') }}" class=" bg-gray-200 rounded-md p-3 max-w-full mx-auto m-0 mt-5 mb-3 sm:flex flex-row justify-items-center">
                <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-2/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-2/4 w-11/12 p-2 m-2" placeholder="CPF">

                <input name="empresa" id="selectEmpresa" 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" placeholder="Empresa">
                
                <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="">Status</option>
                    <option value="ativo">Ativo</option>
                    <option value="inativo">Inativo</option>
                </select>
                <div class="h-auto w-auto flex flex-col justify-center items-center px-2 text-orangeblack">
                    <a href="{{route('portaria.lista')}}">
                        <svg class="w-6 h-6 "  aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3M3.22302 14C4.13247 18.008 7.71683 21 12 21c4.9706 0 9-4.0294 9-9 0-4.97056-4.0294-9-9-9-3.72916 0-6.92858 2.26806-8.29409 5.5M7 9H3V5"/>
                          </svg>                      
                    </a>
                </div>
                <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="">
            <button id="btnCriar" class="mx-3 rounded-md px-2 py-1 mr-2 bg-blueblack hover:to-blueb text-white font-semibold" data-modal-target="create-modal" data-modal-toggle="create-modal">Cadastrar Visitante</button>
        </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   bg-blueblack rounded-lg">
                    <tr>
                        <th scope="col" class="px-4 py-3 text-center">
                            COD
                        </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">
                            Cadastro
                        </th>
                        <th scope="col" class="px-4 py-3 text-center">
                            Empresa
                        </th>
                        <th scope="col" class="px-4 py-3 text-center">
                            Excluir
                        </th>
                        <th scope="col" class="px-4 py-3 text-center">
                            Editar
                        </th>
                        <th scope="col" class="px-4 py-3  text-center">
                            Entrada
                        </th>
                        
                    </tr>
                </thead>
                <tbody>
                @foreach ($visitantes as $visitante)
                    <tr class="bg-white border-b  hover:bg-gray-200 text-blueblack  ">

                        <th scope="row" class="px-2 py-2 text-center font-bold whitespace-nowrap ">

                            {{ $visitante->id }}
                        </th>

                        <th scope="row" class="px-2 py-2 text-center font-bold whitespace-nowrap ">

                            {{ strtoupper($visitante->nome) }}
                        </th>
                        <td class="px-6 py-4 text-center">
                            {{ substr($visitante->cpf, 0, 3) . '.' . substr($visitante->cpf, 3, 3) . '.' . substr($visitante->cpf, 6, 3) . '-' . substr($visitante->cpf, 9, 2) }}
                        </td>
                        <td class="px-6 py-4 text-center">
                            {{ ucfirst($visitante->tipo_cadastro) }}
                        </td>
                        <td class="px-6 py-4 text-center">
                            {{ strtoupper($visitante->empresa) }}
                        </td>

                        <td class="px-6 py-2 text-center">
                            <button class="btnDelete" value=" {{ $visitante->id }}" data-id="{{ $visitante->id}}" data-nome="{{strtoupper($visitante->nome)}}"  class="btnDelete">
                                <svg class="w-6 h-6 text-red-600 " 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 12Zm7.707-3.707a1 1 0 0 0-1.414 1.414L10.586 12l-2.293 2.293a1 1 0 1 0 1.414 1.414L12 13.414l2.293 2.293a1 1 0 0 0 1.414-1.414L13.414 12l2.293-2.293a1 1 0 0 0-1.414-1.414L12 10.586 9.707 8.293Z" clip-rule="evenodd"/>
                                  </svg>
                                  
                            </button>

                        </td>
                        <td class="px-6 py-2 text-center">
                            <button class="btnEditar" value=" {{ $visitante->id }}" data-id="{{ $visitante->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>
                        <td class="px-6 py-2 text-center">
                            <button class="btnEntrada" value=" {{ $visitante->id }}" data-id="{{$visitante->id}}" data-modal-target="entrada-modal" data-modal-toggle="entrada-modal">
                                <svg class="w-6 h-6 text-green-800 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="M4 4a2 2 0 0 0-2 2v9a1 1 0 0 0 1 1h.535a3.5 3.5 0 1 0 6.93 0h3.07a3.5 3.5 0 1 0 6.93 0H21a1 1 0 0 0 1-1v-4a.999.999 0 0 0-.106-.447l-2-4A1 1 0 0 0 19 6h-5a2 2 0 0 0-2-2H4Zm14.192 11.59.016.02a1.5 1.5 0 1 1-.016-.021Zm-10 0 .016.02a1.5 1.5 0 1 1-.016-.021Zm5.806-5.572v-2.02h4.396l1 2.02h-5.396Z" clip-rule="evenodd"/>
                              </svg>
                              </button>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
        {{ $visitantes->appends(request()->query())->links() }}
    </div>
</div>



<!--  modal  create-->
<div id="create-modal" 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 p-2 w-4/5 max-w-md max-h-full">
        <!-- Modal content -->
        <div class="relative bg-white rounded-lg shadow">
            <!-- Modal header -->
            <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t">
                <h3 class="text-xl font-semibold text-blueblack ">Novo Cadastro</h3>
                <button type="button" id="closeModalCreate" class="end-2.5 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="create-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">Fechar Modal</span>
                </button>
            </div>
            <!-- Modal body -->
            <div class="p-4 md:p-5">
                <form class="space-y-4" action="#">
                    <div>
                        <label for="nome" class="block mb-2 text-sm font-medium text-gray-900 ">Nome</label>
                        <input type="text" name="nomeCreate" id="nomeCreate" 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" placeholder="Digite..." required/>
                    </div>
                    <div>
                        <label for="cpf" class="block mb-2 text-sm font-medium text-gray-900 ">CPF</label>
                        <input type="text" name="cpfCreate" id="cpfCreate" pattern="[0-9]" 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" placeholder="Digite..." required/>
                    </div>
                    <div>
                        <label for="" class="block mb-2 text-sm font-medium text-gray-900">Tipo Cadastro</label>
                        <select name="genero" id="tipoCreate" 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-32 p-2.5 " placeholder="Digite..."  required>
                            <option value="" selected>Selecione</option>
                            <option value="pessoa fisica" >Pessoa Fisíca</option>
                            <option value="pessoa juridica">Pessoa Jurídica</option>
                        </select>
                    </div>
                    <div id="interactive">

                    </div>
                    <div>
                        <label for="telefone" class="block mb-2 text-sm font-medium text-gray-900 ">Telefone</label>
                        <input type="tel" name="telefoneCreate" id="telefoneCreate" 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 " placeholder="Digite..." required/>
                    </div>
                    <div>
                        <label for="genero" class="block mb-2 text-sm font-medium text-gray-900 ">Genero</label>
                        <select name="genero" id="generoCreate" 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-32 p-2.5 " placeholder="Digite..."  required>
                            <option value="" selected>Selecione</option>
                            <option value="masculino" >Masculino</option>
                            <option value="feminino">Feminino</option>
                        </select>
                    </div>
                    <div id="DivRetornoCreate">

                    </div>
                    <div class="pt-2">
                        <button type="button" id="btnCreate" class="rounded-md px-2 py-1 mr-2 bg-green-400 hover:bg-green-500 text-white ">Salvar</button>
                        <button type="button" id="btnCancelar" class="rounded-md px-2 py-1   bg-gray-400 hover:bg-gray-500 text-white" data-modal-hide="create-modal">Cancelar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div> 



<!--  modal  update-->
<div id="update-modal" 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 p-2 w-4/5 max-w-md max-h-full">
        <!-- Modal content -->
        <div class="relative bg-white rounded-lg shadow">
            <!-- Modal header -->
            <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t">
                <h3 class="text-xl font-semibold text-blueblack ">
                    Alterar Cadastro
                </h3>
                <button type="button" id="closeModalUpdate" class="end-2.5 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">Fechar Modal</span>
                </button>
            </div>
            <!-- Modal body -->
            <div class="p-4 md:p-5">
                <form class="space-y-4" action="#">
                    <div>
                        <input type="hidden" id="idCadastro">
                        <label for="nome" class="block mb-2 text-sm font-medium text-gray-900 ">Nome</label>
                        <input type="text" name="nome" id="nomeUpdate" 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/>
                    </div>
                    <div>
                        <label for="cpf" class="block mb-2 text-sm font-medium text-gray-900 ">CPF</label>
                        <input type="text" name="cpf" id="cpfUpdate"  pattern="[0-9]"  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" required/>
                    </div>
                    <div>
                        <label for="empresa" class="block mb-2 text-sm font-medium text-gray-900 ">Empresa</label>
                        <input type="text" name="empresaUpdate" id="empresaUpdate" 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 "required/>
                    </div>
                    <div>
                        <label for="status" class="block mb-2 text-sm font-medium text-gray-900">Status</label>
                        <select name="statusUpdate" id="statusUpdate" 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-32 p-2.5 ">
                            <option value="ativo" selected>Ativo</option>
                            <option value="inativo">inativo</option>
                        </select>
                    </div>
                    <div id="DivRetorno">

                    </div>
                    <div id="DivHistorico">
                        
                    </div>
                    <div class="pt-2">
                        <button type="button" id="btnGravar" class="rounded-md px-2 py-1 mr-2 bg-green-400 hover:bg-green-500 text-white ">Salvar</button>
                        <button type="button" id="btnCancelar" class="rounded-md px-2 py-1   bg-gray-400  hover:bg-gray-500 text-white" data-modal-hide="update-modal">Cancelar</button>
                    </div>

                    
                </form>
            </div>
        </div>
    </div>
</div> 



    <div id="popup-modal" tabindex="-1" 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 p-4 w-full max-w-md max-h-full">
            <div class="relative bg-white rounded-lg shadow-sm ">
                <button type="button" class="absolute top-3 end-2.5 text-red-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="popup-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 class="p-4 md:p-5 text-center">
                    <svg class="mx-auto mb-4 text-red-600 w-12 h-12 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
                    </svg>
                    <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">Você tem certeza que deseja deletar este visitante?</h3>
                    <p id="nomeVisitante" class="my-2 font-bold text-lg text-gray-600"></p>
                    <button id="btnConfirmDelete" data-modal-hide="popup-modal" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
                        Sim, tenho certeza
                    </button>
                    <button data-modal-hide="popup-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-zinc-700 focus:z-10 focus:ring-4 focus:ring-gray-100 ">Não, cancelar</button>
                </div>
            </div>
        </div>
    </div>
    




{{-- Modal entrada --}}


<div id="entrada-modal" 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 p-2 w-4/5 max-w-md max-h-full">
        <!-- Modal content -->
        <div class="relative bg-white rounded-lg shadow">
            <!-- Modal header -->
            <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t">
                <h3 class="text-xl font-semibold text-blueblack ">
                    Gerar Entrada
                </h3>
                <button type="button" class="end-2.5 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="entrada-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">Fechar Modal</span>
                </button>
            </div>
            <div class="p-4 md:p-5">
                <form class="space-y-4" action="#">
                    <div>
                        <input type="hidden" id="entradaId">
                        <label for="nome" class="block mb-2 text-sm font-medium text-gray-900">Nome:</label>
                        <input type="text" name="nomeEntrada" id="nomeEntrada" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md focus:ring-blueblack
                         focus:border-blueblack block w-full p-2.5 " readonly/>
                    </div>
                   
                    <div>
                        <label for="empresa" class="block mb-2 text-sm font-medium text-gray-900">Empresa:</label>
                        <input type="text" name="empresaEntrada" id="empresaEntrada" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md focus:ring-blueblack focus:border-blueblack block w-full p-2.5 " readonly/>
                    </div>

                    <div>
                        <label for="placa" class="block mb-2 text-sm font-medium text-gray-900">Placa:</label>
                        <input type="text" name="placaEntrada" id="placaEntrada" 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 " placeholder="Informe a placa" required/>
                    </div>
                    <div id="DivRetornoRegistro">

                    </div>
                    <div class="pt-2">
                        <button type="button" id="btnGravarEntrada" class="rounded-md px-2 py-1 mr-2 bg-green-400 hover:bg-green-500 text-white ">Salvar</button>
                        <button type="button" id="btnCancelarEntrada" class="rounded-md px-2 py-1  bg-gray-400 hover:bg-gray-500 text-white ">Cancelar</button>
                    </div>

                    
                </form>
            </div>
        </div>
    </div>
</div> 

<script type="module" src="{{asset('js/formularios/portaria/formUpdateVisitante.js')}}"></script>
<script type="module" src="{{asset('js/functions/functions.js')}}"></script>
@vite(['resources/js/portaria/destroy.js'])

@endsection