@php
$titulo = "Viagens - SW";
 
@endphp
@include ('components.head')
<style>
    .painel{
        /* border-color: black; */
        border-style: solid;
        border-width: 5px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.5); 
    }    
    .painel:hover {
        transform: scale(1.1);
        z-index: 1;
        transition: all 0.5s ease;
    }
    .alert-light {
            transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Suavização da transição */
        }
    
    .alert-light:hover {
        /* background-color: #F2F6FF; */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra para o efeito de elevação */
    }
    .btn-secondary {
      background-color: #165e9e !important; /* Substitua pelo seu código hexadecimal */
      border-color: #165e9e !important;
    }
    .text-secondary {
      color: #6c757d !important;
    }

    .bg-secondary {
      background-color: #6c757d !important;
    }
      .btn-secondary:hover {
      background-color: #5a6268 !important; /* Cor para o hover */
      border-color: #545b62 !important; /* Cor da borda no hover */
    }

    .text-secondary:hover {
      color: #5a6268 !important; /* Cor do texto no hover */
    }
    .bg-secondary:hover {
        background-color: #5a6268 !important; /* Cor do fundo no hover */
    }

    /* btn laranja */
    .btn-orange {
      background-color: #2b00ff !important; /* Substitua pelo seu código hexadecimal */
      border-color: #86fffd !important;
    }
    .text-orange {
      color: #ffffff !important;
    }
    .text-orange:hover{
        color: white !important;
    }
    .btn-orange:hover {
      background-color: #5a5a5a !important; /* Cor para o hover */
      border-color: #5a5a5a !important; /* Cor da borda no hover */
    }
    .btn-primary:hover{
        background-color: #5a5a5a !important; /* Cor para o hover */
        border-color: #5a5a5a !important; /* Cor da borda no hover */
        
    }
     
 
    </style>
<div class="container">
    @if (session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    @if (session('error'))
    <!-- Modal -->
    <div class="modal fade" id="errorModal" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title" id="errorModalLabel">Erro</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    {{ session('error') }}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                </div>
            </div>
        </div>
    </div>
    @endif
    @if (session('error'))
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var errorModal = new bootstrap.Modal(document.getElementById('errorModal'));
            errorModal.show();
        });
    </script>
    @endif
    
    <div class="d-none d-sm-block" style="text-align: right;">
        <a class="btn btn-primary bg-orange text-orange ms-auto" href="{{route ('viagens.antigas')}}"><i class="fas fa-clock"></i> Histórico de viagens</a>
    @if ($usuario['mod_viagem'] == 1)
        <a class="btn btn-primary ms-auto" href="{{route ('viagens.gerencia_viagem')}}"><i class="fas fa-eye"></i> Lista de viagens</a>
        {{-- @if(empty($viagens)) --}}
        <a class="btn btn-primary ms-auto" href="{{route('viagens.adiciona_viagem')}}"><i class="fas fa-plus"></i> Viagem</a>
        {{-- @endif --}}
    @endif
    </div>
    
    <div class="mb-1"><strong>Minhas viagens abertas</strong></div>
    <p>Aqui estão listadas todas as viagens que você possui em aberto.</p>
    <div>
        <hr style="color: #333; background-color: #333; height: 2px; border: none;">
        @if (empty($viagens))
            <p>Não há viagens em aberto.</p>
        @else 
            @foreach ($viagens->reverse() as $viagem) 
 
                @if($viagem?->viagem?->via_status == 0)
                
                <button type="submit" onclick="location.href='{{ route('viagens.visualiza_viagem', ['via_id' => $viagem?->via_id])  }}'" class='col-12 alert alert-light text-left text-primary shadow painel'>
                    <div class="row">

                        <div class="col-sm-6">
                            <strong>Destino: {{ $viagem?->viagem?->via_cidade  }} - {{$viagem?->viagem?->via_empresa}} </strong>
                            
                        </div>
                        <div class="col-sm-6">
                            <strong>Inicio da viagem: {{ Carbon\Carbon::parse($viagem?->viagem?->via_recebimentocartao)->format('d/m/Y')  }} </strong>
                            
                        </div>
                        <div class="col-sm-6">
                            <small>Código de viagem: {{$viagem['via_id']}} </small>
                        </div>
                        
                    </div>
                </button>
                
              
                @endif
            @endforeach
        @endif
    </div>
</div>
@include('components.footer')