@php
    $titulo = "BDTs";
@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.05);
        z-index: 1;
        transition: all 1.0s 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 */
        }
    </style>

<div class="container">
    <div class="alert alert-danger p-2 text-center">
        <p>
            Lembre-se, é OBRIGATÓRIO abrir e fechar o BDT no momento de saída e de retorno com o carro.<br>
            OBS: Quando houver troca de motorista é necessário fechar e abrir um novo BDT.
        </p>
    </div>
    @if (session('success'))
        <div aria-live="polite" aria-atomic="true" class="position-relative"  >
            <div class="toast-container position-fixed top-0 start-50 translate-middle-x mt-5 p-5" style="z-index: 11">
                <div id="successToast" class="toast hide show bg-success text-white" role="alert" aria-live="assertive" aria-atomic="true">
                    <div class="toast-header">
                        <strong class="me-auto">Sucesso</strong>
                        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Fechar"></button>
                    </div>
                    <div class="toast-body">
                        {{ session('success') }}
                    </div>
                </div>
            </div>
        </div>
        
        {{-- Script para ativar o Toast --}}
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                let successToast = new bootstrap.Toast(document.getElementById('successToast'), {
                        delay: 5000 // 5 segundos antes de fechar sozinho
                    });
                    successToast.show();
            });
        </script>
        @endif
    {{-- Verifica se não há BDTs para apresentar as opções de novo BDT --}}
    @if ($bdts->isEmpty())
        <div class="mb-1"><strong>Qual BDT deseja fazer?</strong></div>
        <form action="{{ route('bdt.saida.create') }}" > 
            @csrf
            <div class="row text-center">
                <button type="submit" class="col-12 alert alert-light text-center text-primary shadow painel">
                    <h1><i class="fas fa-car"></i></h1>
                    <strong>SAÍDA</strong><br>
                </button>
            </div>
        </form>
    @endif
    
    <hr style="color: #333; background-color: #333; height: 2px; border: none;">
    
    <div class="mb-1"><strong>Meus BDTs</strong></div>
    <div>
        @if ($bdts->isNotEmpty())
            @foreach ($bdts as $bdt)
                <button type="button" onclick="location.href='{{ route('bdt.avaria', $bdt->bdt_id) }}'" class="col-12 alert alert-light text-center text-primary shadow d-flex justify-content-between painel">
                    <div><strong>{{ $bdt->car_modelo }}</strong></div>
                    <div><small>{{ $bdt->bdt_destino }}</small></div>
                </button>
            @endforeach
        @else
            <p>Não há BDTs em aberto</p>
        @endif
    </div>
</div>
 
@include('components.footer')