@extends('layouts.default')
@section('title', 'Validação de Viagens por Motorista')

@section('content')
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-end">
		<h3>Validação de Viagens por Motorista</h3>
        <div id="divCadastrar" class='pb-1'>
            <a href="{{ route('validaviagem.create', []) }}" class='btn-sm btn-primary pb-1 mr-1 text-white'>
                <i class="fas fa-plus-square"></i> Adicionar
            </a>
        </div>
    </div>
    <div class="card-body">
        <div class="alert alert-info mb-3">
            <strong>Legenda do Status:</strong>
            <span class="d-inline-block ml-2" style="width: 12px; height: 12px; border-radius: 50%; background-color: green; vertical-align: middle;"></span>
            <span class="ml-1">Verde: Horário Normal</span>
            <span class="d-inline-block ml-3" style="width: 12px; height: 12px; border-radius: 50%; background-color: yellow; vertical-align: middle;"></span>
            <span class="ml-1">Amarelo: Atraso/Adiantamento (1-3h)</span>
            <span class="d-inline-block ml-3" style="width: 12px; height: 12px; border-radius: 50%; background-color: red; vertical-align: middle;"></span>
            <span class="ml-1">Vermelho: Grande Atraso/Adiantamento (>3h)</span>
        </div>

        <!-- Filtros -->
        <div class="card mb-3">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-filter"></i> Filtros</h5>
            </div>
            <div class="card-body">
                <form method="GET" action="{{ route('validaviagem') }}" id="formFiltros">
                    <div class="row">
                        <div class="col-md-2">
                            <label for="data_inicial">Data Inicial:</label>
                            <input type="date" name="data_inicial" id="data_inicial" class="form-control" value="{{ $filtros['data_inicial'] ?? '' }}">
                        </div>
                        <div class="col-md-2">
                            <label for="data_final">Data Final:</label>
                            <input type="date" name="data_final" id="data_final" class="form-control" value="{{ $filtros['data_final'] ?? '' }}">
                        </div>
                        <div class="col-md-2">
                            <label for="rota_id">Rota:</label>
                            <select name="rota_id" id="rota_id" class="form-control">
                                <option value="">Todas as Rotas</option>
                                @foreach($rotas as $id => $nome)
                                    <option value="{{ $id }}" {{ ($filtros['rota_id'] ?? '') == $id ? 'selected' : '' }}>{{ $nome }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="turno">Turno:</label>
                            <select name="turno" id="turno" class="form-control">
                                <option value="">Todos os Turnos</option>
                                <option value="M" {{ ($filtros['turno'] ?? '') == 'M' ? 'selected' : '' }}>Manhã</option>
                                <option value="T" {{ ($filtros['turno'] ?? '') == 'T' ? 'selected' : '' }}>Tarde</option>
                                <option value="N" {{ ($filtros['turno'] ?? '') == 'N' ? 'selected' : '' }}>Noite</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="sentido">Sentido:</label>
                            <select name="sentido" id="sentido" class="form-control">
                                <option value="">Todos os Sentidos</option>
                                <option value="I" {{ ($filtros['sentido'] ?? '') == 'I' ? 'selected' : '' }}>Ida</option>
                                <option value="V" {{ ($filtros['sentido'] ?? '') == 'V' ? 'selected' : '' }}>Volta</option>
                            </select>
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <div class="btn-group w-100">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-search"></i> Filtrar
                                </button>
                                <a href="{{ route('validaviagem') }}" class="btn btn-secondary">
                                    <i class="fas fa-times"></i> Limpar
                                </a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    	<div class='table-responsive'>
			<table class='table table-striped table-bordered table-hover table-sm'>
				<thead>
					<th width="25px">Status</th>
					<th width="25px">Cod</th>
					<th>Data Inicio</th>
					<th>Motorista</th>
					<th>Veículo</th>
					<th>Passageiros</th>
					<th>Rota</th>
					<th>Turno</th>
					<th>Sentido</th>
					<th width="40px">Ações</th>
				</thead>
				<tbody>
					@foreach($viagens as $viagem)
						<tr>
							<td class="text-center">
								@php
									$statusColor = $viagem->status_horario;
									$statusTitle = '';
									switch($statusColor) {
										case 'green':
											$statusTitle = 'Horário Normal';
											break;
										case 'yellow':
											$statusTitle = 'Horário com Atraso/Adiantamento (1-3h)';
											break;
										case 'red':
											$statusTitle = 'Horário com Grande Atraso/Adiantamento (>3h)';
											break;
										default:
											$statusTitle = 'Status Indefinido';
									}
								@endphp
								<div class="d-inline-block" style="width: 12px; height: 12px; border-radius: 50%; background-color: {{ $statusColor }}; cursor: help;" title="{{ $statusTitle }}"></div>
							</td>
							<td>{{ $viagem->id }}</td>
							<td>{{  \Carbon\Carbon::parse($viagem->data_viagem_inicio )->setTimezone('GMT-3')->format('d/m/Y H:i:s') }}</td>
							<td>{{ $viagem->motorista->nomeCompleto }}</td>
							<td>{{ $viagem->veiculo->tipoExtenso }} [{{ $viagem->veiculo->placa }}]</td>
							<td>{{ $viagem->viagemassociados()->count() }}</td>
							<td>
                                {!! Form::select('rota_id', [''=>'Selecione']+\App\Models\Rota::select('nome', 'id')->pluck('nome', 'id')->toArray(), $viagem->rota_id ?? null, ['class'=>'form-control']) !!}
                            </td>
                            <td>
                                {!! Form::select('turno', $viagem::GetArrTurno(), $viagem->turno ?? null, ['class'=>'form-control']) !!}
                            </td>
                            <td>
                                {!! Form::select('sentido', $viagem::GetArrSentido(), $viagem->sentido ?? null, ['class'=>'form-control']) !!}
                            </td>
							<td>
								<div class='btn-group btn-group-sm'>
									<a href="#" onclick="return EditaViagem(this, '{{$viagem->id}}')" class='btn-default btn btn-xs' title='Editar'><i class="fas fa-pencil-alt text-muted"></i> </a>
									@if($viagem->viagemassociados()->count() > 0)
                                        <a href="#" onclick="return VerPassageiros(this, '{{$viagem->id}}')" class='btn-default btn btn-xs' title='Ver Passageiros'><i class="fas fa-users text-info"></i> </a>
                                    @endif
									@if($viagem->viagemassociados()->count() === 0)
                                        <a href="#" onclick="return ExcluiViagem(this, '{{$viagem->id}}')" class='btn-default btn btn-xs' title='Excluir'><i class="fas fa-trash text-muted"></i> </a>
                                    @endif
								</div>
							</td>
						</tr>
					@endforeach
				</tbody>
			</table>
    	</div>
    </div>
	{{ $viagens->appends($filtros)->links() }}
</div>

<!-- Modal Passageiros -->
<div class="modal fade" id="modalPassageiros" tabindex="-1" role="dialog" aria-labelledby="modalPassageirosLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg" role="document" style="max-width: 800px;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalPassageirosLabel">
                    Passageiros da Viagem
                    <small class="text-muted" id="contadorPassageiros"></small>
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="max-height: 400px; overflow-y: auto;">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>Nome do Passageiro</th>
                                <th>Horário de Registro (QRCode)</th>
                            </tr>
                        </thead>
                        <tbody id="tbodyPassageiros">
                            <!-- Dados serão carregados via AJAX -->
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

  <style>
      /* Garante que o backdrop ocupe toda a tela */
      .modal-backdrop {
          position: fixed !important;
          top: 0 !important;
          left: 0 !important;
          right: 0 !important;
          bottom: 0 !important;
          width: 100% !important;
          height: 100% !important;
          background-color: rgba(0, 0, 0, 0.5) !important;
          z-index: 1040 !important;
      }

      /* Garante que a modal fique acima do backdrop */
      .modal {
          z-index: 1050 !important;
      }

      .modal-dialog {
          z-index: 1055 !important;
      }

      /* Força o backdrop a ocupar toda a viewport */
      body.modal-open {
          overflow: hidden !important;
      }

      /* Garante que o backdrop seja visível em toda a tela */
      .modal-backdrop.show {
          opacity: 0.5 !important;
      }

      /* Estilização da rolagem da modal */
      .modal-body {
          scrollbar-width: thin;
          scrollbar-color: #888 #f1f1f1;
      }

      .modal-body::-webkit-scrollbar {
          width: 8px;
      }

      .modal-body::-webkit-scrollbar-track {
          background: #f1f1f1;
          border-radius: 4px;
      }

      .modal-body::-webkit-scrollbar-thumb {
          background: #888;
          border-radius: 4px;
      }

      .modal-body::-webkit-scrollbar-thumb:hover {
          background: #555;
      }

      /* Responsividade para telas menores */
      @media (max-width: 768px) {
          .modal-dialog {
              max-width: 95% !important;
              margin: 10px auto !important;
          }

          .modal-body {
              max-height: 300px !important;
          }
      }
  </style>
@stop

@section('js')
    <script>

        @if(session()->has('mensagem'))
            toastr["{{session('mensagem')['type']}}"]("{{session('mensagem')['text']}}", "{{session('mensagem')['title']}}");
        @endif

        function EditaViagem(e, id) {
            var tr = $(e).closest('tr');

            var rota_id = $(tr).find('[name=rota_id]').val();
            var turno = $(tr).find('[name=turno]').val();
            var sentido = $(tr).find('[name=sentido]').val();

            $.get('/validaviagem/update?id='+id+'&rota_id='+rota_id+'&turno='+turno+'&sentido='+sentido, function(data){
                swal.fire(
                    (data.status == 200 ? 'Sucesso!' : 'Erro!'),
                    data.msg,
                    (data.status == 200 ? 'success' : 'error')
                );
            });
        }

        function ExcluiViagem(e, id) {
            swal.fire({
                title: 'Confirma a exclusão?',
                text: 'Esta ação não poderá ser revertida!',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Sim, excluir!',
                cancelButtonText: 'Cancelar!',
                closeOnConfirm: false,
            }).then(function(isConfirm) {
                if (isConfirm.value) {
           		 	$.get('/validaviagem/destroy?id='+id, function(data){
                        if (data.status == 200) {
                            $(e).closest('tr').hide(500);
                        }
                        swal.fire(
                            (data.status == 200 ? 'Sucesso!' : 'Erro!'),
                            data.msg,
                            (data.status == 200 ? 'success' : 'error')
                        );
                    });
                }
            })
        }

                        function VerPassageiros(e, id) {
            // Limpa o tbody antes de carregar novos dados
            $('#tbodyPassageiros').empty();

            // Mostra a modal com backdrop estático
            $('#modalPassageiros').modal({
                backdrop: 'static',
                keyboard: false,
                show: true
            });

            // Garante que o backdrop ocupe toda a tela
            $('#modalPassageiros').on('shown.bs.modal', function() {
                $('.modal-backdrop').css({
                    'position': 'fixed',
                    'top': '0',
                    'left': '0',
                    'right': '0',
                    'bottom': '0',
                    'width': '100%',
                    'height': '100%',
                    'z-index': '1040'
                });
            });

            // Carrega os dados dos passageiros via AJAX
            $.get('/validaviagem/passageiros?viagem_id=' + id, function(data) {
                if (data.passageiros && data.passageiros.length > 0) {
                    var tbody = $('#tbodyPassageiros');
                    var contador = data.passageiros.length;

                    // Atualiza o contador no cabeçalho
                    $('#contadorPassageiros').text('(' + contador + ' passageiro' + (contador > 1 ? 's' : '') + ')');

                    data.passageiros.forEach(function(passageiro) {
                        var row = '<tr>' +
                            '<td>' + passageiro.nome + '</td>' +
                            '<td>' + passageiro.horario_registro + '</td>' +
                            '</tr>';
                        tbody.append(row);
                    });
                } else {
                    $('#contadorPassageiros').text('(0 passageiros)');
                    $('#tbodyPassageiros').html('<tr><td colspan="2" class="text-center">Nenhum passageiro encontrado</td></tr>');
                }
            }).fail(function() {
                $('#contadorPassageiros').text('');
                $('#tbodyPassageiros').html('<tr><td colspan="2" class="text-center text-danger">Erro ao carregar dados dos passageiros</td></tr>');
            });
        }

    </script>
@stop

@section('table-delete')
"viagens"
@stop