@extends('operacional.operacional')


@section('content')
<div>
    <h1 class="text-white text-lg font-bold  m-3 mp-3 text-center">OPERACIONAL</h1>
 
</div>
    <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  m-3 mt-3 mb-3 p-3 text-center"><span class="text-lg">Relato Operacional</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('conferencia.filtrar') }}" class="bg-gray-200 rounded-lg p-3 max-w-full mx-auto m-0 mt-5 mb-3 sm:grid grid-flow-col">
                <input id="inputManifesto" name="inputManifesto" class="bg-gray-50 border  border-gray-500 text-blueblack text-sm rounded-lg focus:ring-gray-50 sm:w-5/6 lg:w-auto w-1/2 p-2 m-2" placeholder="Manifesto">
                <input id="inputPlaca" name="inputPlaca" class="bg-gray-50 border  border-gray-500 text-blueblack text-sm rounded-lg focus:ring-gray-50 sm:w-5/6 lg:w-auto w-1/2 p-2 m-2" placeholder="Placa">
                <input id="inputInicio" name="inputInicio" type="date" class="bg-gray-50 border  border-gray-500 text-blueblack text-sm rounded-lg focus:ring-gray-50 sm:w-5/6 lg:w-auto w-1/2 p-2 m-2" placeholder="">
                <input id="inputFim" name="inputFim" type="date" class="bg-gray-50 border  border-gray-500 text-blueblack text-sm rounded-lg focus:ring-gray-50 sm:w-5/6 lg:w-auto w-1/2 p-2 m-2" placeholder="">

                <select name="selectTipo" id="selectTipo" class="bg-gray-50 border  border-gray-500 text-blueblack text-sm rounded-lg focus:ring-gray-50 sm:w-5/6 lg:w-auto w-11/12 p-2 m-2">
                    <option value="" selected disabled>Tipo</option>
                        <option value="carregamento">Carregamento</option>
                        <option value="descarregamento">Descarregamento</option>
                </select>
                <select name="selectStatus" id="selectStatus" class="bg-gray-50 border  border-gray-500 text-blueblack text-sm rounded-lg focus:ring-gray-50 sm:w-5/6 lg:w-auto w-11/12 p-2 m-2">
                    <option value="" selected disabled>Status</option>
                        <option value="criado">Criado</option>
                        <option value="finalizado">Finalizado</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="">
            <button class="mx-3 rounded-md px-2 py-1 mr-2 bg-blueblack hover:to-blueb text-white font-semibold" data-modal-target="select-modal" data-modal-toggle="select-modal">Registrar Conferência</button>
        </div>
        <div id="select-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-4 w-full max-w-md 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-lg font-semibold text-gray-900 dark:text-white">
                              Gerar Registro de Carregamento ou Descarregamento
                        </h3>
                        <button type="button" id="closeModalUpdate" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm h-8 w-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="select-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</span>
                        </button>
                    </div>
                    <!-- Modal body -->
                    <div class="p-4 md:p-5">
                        <div id="formCadastroMotorista">
                            <form class="max-w-auto mx-auto p-3" method="POST" id="formCreateConf" enctype="multipart/form-data">
                                <div class="mb-3 flex grid-flow-col">
                                    <div class="mx-1">
                                        <label for="" class="block mb-2 text-sm font-medium text-blueblack ">Manifesto</label>
                                        <input type="text" id="nManifesto" name="nManifesto" class="shadow-sm bg-gray-50 border border-gray-300 text-blueblack text-base rounded-lg focus:ring-orangeblack focus:border-orangeblack block w-full p-2.5     dark:focus:ring-orangeblack dark:focus:border-orangeblack " placeholder="00000"/>
                                    </div>
                                    <div class="mx-1">
                                        <label for="" class="block mb-2 text-sm font-medium text-white ">Adcionar</label>
                                        <button type="button" id="addManifesto" name="addManifesto" class="m-2" ><svg class="w-6 h-6 text-gray-800 dark:text-white" 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 12Zm11-4.243a1 1 0 1 0-2 0V11H7.757a1 1 0 1 0 0 2H11v3.243a1 1 0 1 0 2 0V13h3.243a1 1 0 1 0 0-2H13V7.757Z" clip-rule="evenodd"/>
                                          </svg>
                                          </button>
                                    </div>
                                </div>
                                <div class=" my-2 grid grid-flow-col" id="interactive1"></div>
                                <div class=" my-2 grid grid-flow-col" id="interactive2"></div>
                                <div class="mx-1 my-2">
                                    <label for="" class="block mb-2 text-sm font-medium text-blueblack ">Placa</label>
                                    <input type="text" id="placa" name="placa" class="shadow-sm bg-gray-50 border border-gray-300 text-blueblack text-base rounded-lg focus:ring-orangeblack focus:border-orangeblack block w-full p-2.5     dark:focus:ring-orangeblack dark:focus:border-orangeblack "  placeholder="Ex: PQX-4455"  required />
                                </div>
                                <div class="mb-3 flex grid-flow-col">
                                    <div class="mx-1">
                                        <label for="cpf" class="block mb-2 text-sm font-medium text-blueblack ">Volumes</label>
                                        <input type="number" id="qtdVolumes" name="qtdVolumes" class="shadow-sm bg-gray-50 border border-gray-300 text-blueblack text-base rounded-lg focus:ring-orangeblack focus:border-orangeblack block w-full p-2.5     dark:focus:ring-orangeblack dark:focus:border-orangeblack " placeholder="0" required />
                
                                    </div>
                                    
                                    <div class="mx-1">
                                        <label for="cpf" class="block mb-2 text-sm font-medium text-blueblack ">Peso</label>
                                        <input type="number" id="qtdPeso" name="qtdPeso" step="0.01" class="shadow-sm bg-gray-50 border border-gray-300 text-blueblack text-base rounded-lg focus:ring-orangeblack focus:border-orangeblack block w-full p-2.5     dark:focus:ring-orangeblack dark:focus:border-orangeblack " placeholder="0" required />
                
                                    </div>
                                    <div class="mx-1">
                                        <label for="cpf" class="block mb-2 text-sm font-medium text-blueblack ">Qtd. Pessoas</label>
                                        <input type="number" id="qtdColaboradores" name="qtdColaboradores" class="shadow-sm bg-gray-50 border border-gray-300 text-blueblack text-base rounded-lg focus:ring-orangeblack focus:border-orangeblack block w-full p-2.5     dark:focus:ring-orangeblack dark:focus:border-orangeblack " placeholder="0" required />
                
                                    </div>
                
                                </div>
                                <div class="mb-2 flex grid-flow-col">
                                    <div class="">
                                        <label for="empresa" class="block mb-2 text-sm font-medium text-blueblack ">Inicio</label>
                                         <input type="datetime-local" id="dateInicio" name="dateInicio" class="shadow-sm bg-gray-50 border border-gray-300 text-blueblack text-base rounded-lg focus:ring-orangeblack focus:border-orangeblack block w-4/5 p-2.5     dark:focus:ring-orangeblack focus:border-orangeblack " placeholder="Empresa" required />
                                    </div>
                              
                                </div>
                                <div class="mb-3">
                                    <label for="name" class="block mb-2 text-sm font-medium text-blueblack ">Tipo</label>
                                    <select  id="tipoOperacao" name="tipoOperacao" class="shadow-sm bg-gray-50 border border-gray-300 text-blueblack text-base rounded-lg focus:ring-orangeblack focus:border-orangeblack block w-full p-2.5  dark:focus:ring-orangeblack dark:focus:border-orangeblack ">
                                        <option value="" selected>Selecione</option>
                                        <option value="carregamento">Carregamento</option>
                                        <option value="descarregamento">Descarregamento</option>
                                    </select>
                                </div>
                                <div id="DivRetornoCreate"></div>
                                <div class="pt-2">
                                    <button type="button" id="btnGravar" 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">Salvar</button>
                                    <button type="button" id="btnCancelar" 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" data-modal-toggle="select-modal">Cancelar</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
       

        {{-- TABELA INICIO --}}
        <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-1 py-3 text-center">
                            Manifesto
                        </th>
                        <th scope="col" class="px-1 py-3 text-center">
                            Tipo
                        </th>
                        <th scope="col" class="px-1 py-3 text-center">
                            Placa
                        </th>
                        <th scope="col" class="px-1 py-3 text-center">
                            Volumes
                        </th>
                        <th scope="col" class="px-1 py-3 text-center">
                            Peso
                        </th>
                        <th scope="col" class="px-1 py-1 text-center">
                            Inicio <br>(Qtd.Colab)</br>
                        </th>
                        <th scope="col" class="px-1 py-3 text-center">
                            Fim <br>(Qtd.Colab)</br>
                        </th>
                        <th scope="col" class="px-1 py-3 text-center hidden sm:table-cell">
                            Média <br>(Qtd.Colab)</br>
                        </th>
                        <th scope="col" class="px-1 py-3 text-center hidden sm:table-cell">
                            Média <br>(Volumes/Colab)</br>
                        </th>
                        <th scope="col" class="px-4 py-3 text-center">
                            Inicio
                        </th>
                        <th scope="col" class="px-4 py-3 text-center">
                            Fim
                        </th>
                        <th scope="col" class="px-4 py-3 text-center hidden sm:table-cell">
                            Tempo
                        </th>
                        <th colspan="2" class="px-4 py-3 text-center">
                            Quantidade de Volumes
                            (MINUTO | HORA)
                            
                        </th>
                        <th scope="col" class="px-4 py-3 text-center">
                            Status
                        </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>
                        <th scope="col" class="px-4 py-3  text-center">
                            Cancelar
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($conferencia as $dados)
                    <tr class="bg-white border-b  hover:bg-gray-200 text-blueblack  ">

                        <td class="px-6 py-4 text-center text-base  font-bold">
                            {{$dados->manifesto}}
                        </td>
                        <td class="px-2 py-4 text-center">
                            {{ strtoupper(Str::limit($dados->tipo, 4, '')) }}
                        </td>
                        <td class="relative px-6 py-4 text-center group">
                            {{ ucfirst($dados->placa) }}
                           
                        </td>
                        <td class="px-6 py-4 text-center">
                            {{$dados->qtd_volumes}}
                        </td>
                        <td class="px-6 py-4 text-center">
                            {{$dados->peso}}
                        </td>
                        <td class="px-6 py-4 text-center">
                            {{$dados->qtd_colaboradores}}
                        </td>
                        <td class="px-6 py-4 text-center">
                            {{-- colaboradores fim --}}
                            @if ($dados->qtd_colaboradores_fim > 0)
                              {{$dados->qtd_colaboradores_fim}}
                            @else
                                -
                            @endif
                        </td>
                        <td class="relative px-6 py-4 text-center group  hidden sm:table-cell">

                            {{-- media colaboradores --}}
                           @if ($dados->qtd_colaboradores && $dados->qtd_colaboradores_fim)
                                @php
                                        $inicio = $dados->qtd_colaboradores;
                                        $fim = $dados->qtd_colaboradores_fim; 
                                        $soma = $inicio + $fim;  
                                        $media = $soma / 2;
                                @endphp
                                  {{ $media }}
                               
                           @else
                               -
                           @endif
                          
                        </td>
                        <td class="px-6 py-4 text-center  hidden sm:table-cell">
                            @if ($dados->qtd_volumes && $dados->qtd_colaboradores_fim)
                                @php
                                    $qtdvolumes = $dados->qtd_volumes;
                                    $mediavolumes = $qtdvolumes / $media;
                                    $mediavolumesDisplay = number_format($mediavolumes, 2);
                                @endphp
                                {{ $mediavolumesDisplay }}
                               
                            @else
                                -
                            @endif
                        </td>
                        <td class="px-6 py-4 text-center">
                            {{$dados->created_at->format('d/m/Y H:i')}}
                        </td>
                        <td class="px-6 py-4 text-center">
                            @if ($dados->updated_at != null)
                                {{$dados->updated_at->format('d/m/Y H:i')}}
                            @else
                                -
                            @endif
                        </td>
                        <td class="px-6 py-4 text-center  hidden sm:table-cell">
                            @if ($dados->tempo != null)
                                 {{$dados->tempo}}
                            @else
                                -
                            @endif
                        </td>
                        <td class="px-6 py-4 text-center ">
                                @if ($dados->created_at && $dados->updated_at)
                                    @php
                                        // Parse the created_at and updated_at fields
                                        
                                        $createdAt = \Carbon\Carbon::parse($dados->created_at);
                                        $updatedAt = \Carbon\Carbon::parse($dados->updated_at);
                                        $qtdvolumes = $dados->qtd_volumes;
                                
                                        // Calculate the difference in minutes
                                        $tempo_atendimento = $createdAt->diffInMinutes($updatedAt);
                                
                                        // Avoid division by zero
                                        if ($tempo_atendimento > 0) {
                                            $calc = $qtdvolumes / $tempo_atendimento;
                                        } else {
                                            $calc = 0;
                                        }
                                
                                        // Format the difference as H:i
                                    
                                    @endphp
                                    {{number_format($calc, 2)}}
                                    <br>
                                @else
                                    -
                                @endif
                        
                        </td>
                        <td class="px-6 py-4 text-center">
                       {{--    @if ($calc)
                                @php
                                    $calcHoras = $calc * 60;
                                    
                                @endphp
                                {{number_format($calcHoras, 2)}}
                                
                            @else
                                -
                            @endif  --}}
                            -
                        </td>
                        
                        @if ($dados->status === "finalizado")
                        <td class="px-6 py-4 text-center font-bold  text-green-600">
                            {{ucfirst($dados->status)}}
                        </td>
                        @elseif($dados->status === "cancelado")
                        <td class="px-6 py-4 text-center font-bold text-red-600">
                            {{ucfirst($dados->status)}}
                        </td>
                        @else
                        <td class="px-6 py-4 text-center font-bold text-yellow-500 ">
                            {{ucfirst($dados->status)}}
                        </td>
                        @endif
                     
                     
                        @if ($dados->status === "finalizado" || $dados->status === "cancelado")
                        <td class="px-6 py-4 text-center">
                            
                        </td>
                        <td class="px-6 py-4 text-center">
                            
                        </td>
                        <td class="px-6 py-4 text-center">
                            
                        </td>
                        @else
                        <td class="px-6 py-2 text-center">
                            <button  id="btnEditar" name="btnEditar" class="btnEditar" value="{{ $dados->id }}" data-id="{{$dados->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-4 text-center">
                            <button id="btnFinalizar" name="btnFinalizar" class="btnFinalizar" value="{{ $dados->id }}" data-id="{{$dados->id}}" data-modal-target="finish-modal" data-modal-toggle="finish-modal">
                                <svg class="w-6 h-6 text-green-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 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>
                        <td class="px-6 py-4 text-center">
                            <button id="btnCancelar" name="btnCancelar" class="btnCancelar" value="{{ $dados->id }}" data-id="{{$dados->id}}" data-modal-target="cancel-modal" data-modal-toggle="cancel-modal">
                                <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>
                        @endif
                        
                     
                        
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        {{-- FIM TABELA --}}


        {{-- MODAL CANCELAMENTO --}}
        <div id="cancel-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-4 w-full max-w-md 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-lg font-semibold text-gray-900 dark:text-white">
                            Informe o motivo pelo qual você deseja <strong class="text-red-600 font-bold text-md">cancelar</strong> esta operação.
                        </h3>
                        <button type="button" id="closeModalCancel" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm h-8 w-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="cancel-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</span>
                        </button>
                    </div>
                    <!-- Modal body -->
                    <div class="p-4 md:p-5">
                        <ul class="space-y-4 mb-4">
                          <li>
                              <label for="">Selecione o motivo</label>   
                              <div class="w-full mx-auto items-center flex">
                                  <select id="selectMotivo" name="selectMotivo" class="bg-gray-100 border border-gray-50   text-blueblack text-lg  rounded focus:ring-blueblack w-full  p-2 m-2" @required(true) >
                                     <option value="" disabled selected>Selecione</option>
                                    <option class="font-base" value="cliente abandonou a fila" >Registro gerado por engano</option>
                                    <option class="font-base" value="senha gerada de forma incorreta">Registro Duplicado</option>
                                    <option class="font-base" value="outros motivos">Outros motivos</option>
                                  </select> 
                              </div>
                            </li>
                            <li>
                                <label for="">Descreva o motivo do cancelamento</label>
                                <textarea name="textDescricao" id="textDescricao" cols="30" rows="8" class="bg-gray-100 border border-gray-50 
                                  text-blueblack text-lg rounded focus:ring-blueblack w-full  p-2 m-2" placeholder="Escreva aqui..." @required(true) ></textarea>
                            </li>
                            <li>
                                <form action="">
                                    @csrf
                                    <div id="DivRetornoCreate"></div>
                                <div class="pt-2">
                                    <button type="button" id="btnConfirmarCancelamento" 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">Salvar</button>
                                    <button type="button" id="btnCancelModal" 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" data-modal-toggle="cancel-modal">Cancelar</button>
                                </div>
                                </form>
                            </li>
                            <div id="DivRetornoCancel"></div>
                        </ul>
                    </div>
                </div>
            </div>
        </div>


        {{-- MODAL DE FINALIZAÇÃO --}}
        <div id="finish-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 Finalização
                        </h3>
                        <button id="closeModalFinish" 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="finish-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 finalização desta operação? 
                        </p>
                        <p class="text-center bg-gray-400 text-gray-800 rounded-md"></p>
                        <div class="mx-1">
                            <label for="cpf" class="block mb-2 text-sm font-medium text-blueblack ">Qtd. Pessoas Fim</label>
                            <input type="number" id="qtdColaboradoresFim" class="shadow-sm bg-gray-50 border border-gray-300 text-blueblack text-base rounded-lg focus:ring-orangeblack focus:border-orangeblack block w-3/5 p-2.5     dark:focus:ring-orangeblack dark:focus:border-orangeblack " placeholder="0" required />
    
                        </div>
                    </div>
                    <div id="DivRetornoFinish">

                    </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="btnConfirmarFinalizacao"  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=" ">Salvar</button>
                        <button id="btnNao" data-modal-hide="finish-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 
                    ">Cancelar</button>
                    </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-4 w-full max-w-md 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-lg font-semibold text-gray-900 dark:text-white">
                              Editar Registro
                        </h3>
                        <button type="button" id="closeModalUpdate" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm h-8 w-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="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</span>
                        </button>
                    </div>
                    <!-- Modal body -->
                    <div class="p-4 md:p-5">
                        <div id="formCadastroMotorista">
                            <form class="max-w-auto mx-auto p-3">
                                <div class="mb-3 flex grid-flow-col">
                                    <div class="mx-1">
                                        <label for="" class="block mb-2 text-sm font-medium text-blueblack ">Nº Manifesto</label>
                                        <input type="text" id="nManifestoUpdate" class="shadow-sm bg-gray-50 border border-gray-300 text-blueblack text-base rounded-lg focus:ring-orangeblack focus:border-orangeblack block w-full p-2.5     dark:focus:ring-orangeblack dark:focus:border-orangeblack " placeholder="00000" required />
                                    </div>
                                    <div class="mx-1">
                                        <label for="cpf" class="block mb-2 text-sm font-medium text-blueblack ">Volumes</label>
                                        <input type="number" id="qtdVolumesUpdate" class="shadow-sm bg-gray-50 border border-gray-300 text-blueblack text-base rounded-lg focus:ring-orangeblack focus:border-orangeblack block w-full p-2.5     dark:focus:ring-orangeblack dark:focus:border-orangeblack " placeholder="0" required />
                
                                    </div>
                                    <div class="mx-1">
                                        <label for="cpf" class="block mb-2 text-sm font-medium text-blueblack ">Colaboradores</label>
                                        <input type="number" id="qtdColaboradoresUpdate" class="shadow-sm bg-gray-50 border border-gray-300 text-blueblack text-base rounded-lg focus:ring-orangeblack focus:border-orangeblack block w-full p-2.5     dark:focus:ring-orangeblack dark:focus:border-orangeblack " placeholder="0" required />
                
                                    </div>
                
                                </div>
                                <div class="mb-2 flex grid-flow-col">
                                    <div class="">
                                        <label for="empresa" class="block mb-2 text-sm font-medium text-blueblack ">Inicio</label>
                                         <input type="datetime-local" id="dateInicioUpdate" class="shadow-sm bg-gray-50 border border-gray-300 text-blueblack text-base rounded-lg focus:ring-orangeblack focus:border-orangeblack block w-4/5 p-2.5     dark:focus:ring-orangeblack focus:border-orangeblack " placeholder="Empresa" required />
                                    </div>
                              
                                </div>
                                <div class="mb-3">
                                    <label for="name" class="block mb-2 text-sm font-medium text-blueblack ">Tipo</label>
                                    <select name="" id="tipoOperacaoUpdate" class="shadow-sm bg-gray-50 border border-gray-300 text-blueblack text-base rounded-lg focus:ring-orangeblack focus:border-orangeblack block w-full p-2.5  dark:focus:ring-orangeblack dark:focus:border-orangeblack ">
                                        <option value="" selected>Selecione</option>
                                        <option value="carregamento">Carregamento</option>
                                        <option value="descarregamento">Descarregamento</option>
                                    </select>
                                </div>
                                <div id="DivRetornoUpdate"></div>
                                <div class="pt-2">
                                    <button type="button" id="btnGravar" 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">Salvar</button>
                                    <button type="button" id="btnCancelar" 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" data-modal-toggle="update-modal">Cancelar</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        
    </div>
    </div>
    <script type="module" src="{{asset('js/formularios/operacional/formConferencia.js')}}"></script>

@endsection