@extends('Templates/WorkstationsLayout/WorkstationsLayout')

@section('Main-content')

    @if (session('danger'))
        <div class="content">
            <div class="alert alert-danger" role="alert" id="alert-message-danger" style="transition: opacity 1s;">
                {{ session('danger') }}
            </div>
        </div>
        <script>
            setTimeout(function() {
                $('#alert-message-danger').fadeOut('slow', function() {
                    $(this).remove();
                });
            }, 5000); // A mensagem desaparecerá após 5 segundos
        </script>
    @endif


    <div class="row justify-content-center align-items-center" style="height: 50vh">
        <div class="col-6">
            <div class="card card-info">
                <div class="card-header" style=" background-color: #00B0EA">
                    <h3 class="card-title text-center">QRCode Scan</h3>
                </div>
                <div id="startScan" class="card-body text-center">
                    <div class="text-white p-3 mt-3 rounded" style=" background-color: #00B0EA">
                        <!-- Updated class for rounded corners -->
                        <i class="fas fa-qrcode fa-5x"></i> <!-- Icon -->
                    </div>
                </div>
                <div id="reader" style="display: none;">
                    <div class="embed-responsive embed-responsive-1by1">
                        <video id="video" class="embed-responsive-item"></video>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
@endsection