@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 flex text-center justify-center m-3 mt-3 mb-3 p-3"><span class="text-lg">Lista de Atendimentos</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('atendimento.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 lg:flex lg:flex-row lg:justify-center lg:items-center">
                <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  min-w-24 md:w-auto 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  min-w-24 md:w-auto 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-auto w-11/12 p-2 m-2">
                    <option value="" disabled selected>Status</option>
                    <option value="finalizado">Finalizado</option>
                    <option value="pendente">Pendente</option>
                    <option value="cancelado">Cancelado</option>
                </select>    
                <select name="tipo" id="tipo" class="bg-gray-50 border border-gray-300 text-blueblack text-sm rounded-lg focus:ring-gray-50 sm:w-5/6 lg:w-auto w-11/12 p-2 m-2" @required(true) >
                    <option value="" disabled selected>Tipo</option>
                    <option value="embarque">Embarque</option>
                    <option value="retira">Retira</option>
                </select>    
                @if (auth()->user()->access_level == 'admin')
                <select name="unidade" id="unidade" class="bg-gray-50 border border-gray-300 text-blueblack text-sm rounded-lg focus:ring-gray-50 sm:w-5/6 lg:w-auto w-11/12 p-2 m-2"  @required(true)>
                    <option value="" disabled selected>Unidade</option>
                    @foreach ($unidadesCadastradas as $unidades)
                    <option value="{{$unidades->id}}">{{$unidades->sigla}}</option>
                    @endforeach
                </select>
                @endif
                <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>
                {{-- Condicional para exibir o botão "Próxima Senha" --}}
                    {{-- Condicional para exibir o botão "Próxima Senha" --}}
            @if (auth()->user()->access_level == 'admin')
            {{-- Verifica se a pesquisa foi feita e se o filtro foi aplicado --}}
            @if (
                request()->has('empresa') ||
                request()->has('dataInicial') ||
                request()->has('dataFinal') ||
                request()->has('status') ||
                request()->has('tipo') ||
                (auth()->user()->access_level == 'admin' && request()->has('unidade'))
            )
                @php
                    // Obtém a senha para exibir com base no menor ID
                    $senhaParaExibir = $allData->firstWhere('id_atendimento', $menorId->id ?? null);
                    
                    // Filtra os dados com base no tipo de atendimento fornecido na solicitação
                    $tipo = request()->input('tipo');
                    $dadosFiltrados = $allData->where('tipo_atendimento', $tipo);
          
                    
                    // Obtém o menor ID de atendimento filtrado
                    $menorSenha = $dadosFiltrados->sortBy('id')->first();
                @endphp
                
                {{-- Verifica se há uma senha para exibir --}}
                @if ($senhaParaExibir)
                    <div class="mx-auto max-w-60">
                        <form action="" method="" class="flex flex-col lg:flex-row justify-center">
                            @csrf
                            <input type="hidden" value="{{ $senhaParaExibir->id }}" id="senha" name="senha">
                            <input type="hidden" value="{{ $senhaParaExibir->id_atendimento }}" id="id_atendimento" name="id_atendimento">
                            <button type="button" id="btnProxSenha" name="btnProxSenha" class="bg-orange-300 font-bold text-black hover:text-white hover:bg-green-400 text-base lg:rounded-lg rounded-md p-1 sm:w-5/6 m-2 lg:max-w-60" data-modal-target="select-modal" data-modal-toggle="select-modal">
                                Próxima Senha  
                                {{ $senhaParaExibir->id }}
                            </button>
                            <p></p>
                        </form>
                    </div>
                @endif
            @endif
            @else

            @if ($menorId)
                @php
                    $senhaParaExibir = $allData->firstWhere('id_atendimento', $menorId->id ?? null);
                @endphp

                @if ($senhaParaExibir)
                    <div class="mx-auto max-w-60">
                        <form action="" method="" class="flex flex-col lg:flex-row justify-center">
                            @csrf
                            <input type="hidden" value="{{ $senhaParaExibir->id }}" id="senha" name="senha">
                            <input type="hidden" value="{{ $senhaParaExibir->id_atendimento }}" id="id_atendimento" name="id_atendimento">
                            <button type="button"  id="btnProxSenha" name="btnProxSenha" value="{{ $senhaParaExibir->id }}"  class="bg-orange-300 font-bold text-black hover:text-white hover:bg-green-400 text-base lg:rounded-lg rounded-md p-1 sm:w-5/6 m-2 lg:max-w-60" data-modal-target="select-modal" data-modal-toggle="select-modal">
                                Próxima Senha  
                                {{ $senhaParaExibir->id }}
                            </button>
                        </form>
                    </div>
                @endif
            @endif
        @endif
<!-- Modal toggle -->
  
  <!-- Main modal -->
  <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">
                        Atendimento.
                  </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">
                  <ul class="space-y-4 mb-4">
                    <li>
                        <label for="">Selecione o conferente responsável</label>   
                        <div class="w-full mx-auto items-center flex">
                            <select id="selectNome" name="selectNome" 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="1" selected>Gabriel Alves G. de Assis</option>
                                <option value="2">Gabriel Alves G. de Assis</option>
                            </select> 
                        </div>
                      </li>
                      <li>
                        <button type="submit" id="btnConfirmar" onclick="playSoundSequence()" 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-56 ">Chamar próxima senha
                        </button>
                      </li>
                      <div id="divRetorno"></div>
                  </ul>
              </div>
          </div>
      </div>
  </div> 
  {{-- MODAL PARA CANCELAR --}}
  <!-- Main modal -->
  <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 senha!
                </h3>
                <button type="button" id="closeModalUpdateCancel" 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" >Cliente abandonou a fila</option>
                            <option class="font-base" value="senha gerada de forma incorreta">Senha gerada de forma incorreta</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="textMotivo" id="textMotivo" 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
                            <button type="button" id="btnConfirmarCancelamento" 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-56 ">Confirmar
                      </button>
                        </form>
                    </li>
                    <div id="divRetornoCancel"></div>
                </ul>
            </div>
        </div>
    </div>
</div> 
        <div class="mx-auto max-w-60">
        </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">
                            Empresa
                        </th>
                        <th scope="col" class="px-4 py-3 text-center">
                            Unidade
                        </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">
                            Tempo Atendimento
                        </th>
                        <th scope="col" class="px-4 py-3 text-center">
                            Tipo
                        </th>
                        <th scope="col" class="px-4 py-3 text-center">
                            Status
                        </th>
                        <th scope="col" class="px-4 py-3  text-center">
                            *
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($registrosatendimento as $registro)
                        @if ($registro->status == 'finalizado')
                            <tr class="bg-green-300 border-b hover:bg-gray-200 text-blueblack">
                        @elseif($registro->status == 'em andamento')
                             <tr class="bg-yellow-300 border-b hover:bg-gray-200 text-blueblack">
                        @elseif($registro->status == 'cancelado')
                            <tr class="bg-red-300 border-b hover:bg-gray-200 text-blueblack">
                        @else
                            <tr class="bg-white border-b hover:bg-gray-200 text-blueblack">
                        @endif

                        <td class="px-6 py-4 text-center bg-blueblack text-white text-base font-bold">
                            @foreach($allData as $senha)
                                @if ($senha->id_atendimento == $registro->id)
                                    {{ $senha->id }}
                                @endif
                            @endforeach
                        </td>
                        <td class="px-6 py-4 text-center">
                            {{ $registro->visitante->nome }}
                        </td>
                        <td class="px-6 py-4 text-center">
                            {{ $registro->visitante->empresa }}
                        </td>
                            <td class="px-6 py-4 text-center">
                            @foreach ($unidadesCadastradas as $unidadeSigla)
                                @if ($registro->id_unidade == $unidadeSigla->id)
                                {{ $unidadeSigla->sigla }}
                                @endif
                            @endforeach
                            </td>
                        <td class="px-6 py-4 text-center">
                            {{ $registro->created_at->format('d/m/Y H:i:s') }}
                        </td>
                        @if($registro->updated_at != null && $registro->updated_at != $registro->created_at)
                            <td class="px-6 py-4 text-center">
                                {{ $registro->updated_at->format('d/m/Y H:i:s') }}
                            </td>
                        @else
                            <td class="text-center">Em aberto</td>
                        @endif
                        <td class="px-6 py-4 text-center">
                            @if ($registro->created_at && $registro->updated_at)
                                @php
                                    // Convert to Carbon instances
                                    $createdAt = \Carbon\Carbon::parse($registro->created_at);
                                    $updatedAt = \Carbon\Carbon::parse($registro->updated_at);
                        
                                    // Calculate the difference
                                    $tempo_atendimento = $createdAt->diff($updatedAt);

                                    
                                    // Format the difference as H:i:s
                                    $formattedTime = $tempo_atendimento->format('%H:%I:%S');
                                @endphp
                                {{ $formattedTime }}
                            @else
                                N/A
                            @endif
                        </td>
                        <td class="px-6 py-4 text-center">
                            {{ strtoupper($registro->tipo_atendimento) }}
                        </td>
                        <td class="px-6 py-4 text-center">
                            {{ strtoupper($registro->status) }}
                        </td>
                        @if ($registro->status == 'finalizado' OR $registro->status == 'cancelado')
                        <td class="px-6 py-4 text-center">
                            -
                        </td>
                        @else
                        <td class="px-6 py-2 text-center">
                            <button type="submit" id="btnCancelarSenha{{$registro->id}}" name="btnCancelarSenha" class="btnCancelar font-bold text-base bg-red-600 rounded p-1 text-white hover:bg-red-800 hover:text-white" data-modal-target="cancel-modal" data-modal-toggle="cancel-modal" value="{{$registro->id}}">Cancelar</button>
                       </td>
                        @endif
                        
                    </tr>
                    @endforeach
                </tbody>
                
            </table>
           
        </div>
        {{$registrosatendimento->links()}}
    </div>
</div>
<script src="{{asset('js/formularios/operacional/formSenha.js')}}"></script>
<script src="{{asset('js/formularios/operacional/formCancelarSenha.js')}}"></script>

<script>
   function playSound(audioName) {
            return new Audio(audioName);
        }

        function playSoundSequence() {
            const soundSequence = [
                "/mp3/buzina.mp3"
            ];

            let audioIndex = 0; // Índice do som atual

            function playNextSound() {
                if (audioIndex < soundSequence.length) {
                    let audio = playSound(soundSequence[audioIndex]);
                    audio.play();
                    audioIndex++;

                    // Reproduz o próximo áudio quando o áudio atual termina
                    audio.addEventListener('ended', playNextSound);
                }
            }

            // Inicia a sequência de reprodução
            playNextSound();
        }
</script>
@endsection