<!DOCTYPE html>
<html lang="en">
<head>
    <title>Visitor Registration</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="{{ asset('css/w3.css') }}">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="{{ asset('bootstrap/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/w3.css') }}">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap JS and Popper.js (required for Bootstrap) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        body, h1, h2, h3, h4, h5, h6 {
            font-family: "Lato", sans-serif;
        }

        .w3-bar, h1, button {
            font-family: "Montserrat", sans-serif;
        }

        .fa-anchor, .fa-coffee {
            font-size: 200px;
        }

        .w3-blue-pharma, .w3-hover-blue-pharma:hover {
            color: #fff !important;
            background-color: #00367e !important;
        }

        .text-orange {
            color: #faa634;
        }

        #guard-button {
            border: none;
            background-color: inherit;
            padding: 14px 28px;
            font-size: 16px;
            cursor: pointer;
            display: inline-block;
        }

        .btn:hover {
            background: #eee;
        }

        #guard-button {
            color: #00367e;
        }

        #registration-form-submit {
            border: 2px solid #000102;
            border-radius: 5px;
            padding: 10px 20px;
            background-color: #fff;
            color: #00367e;
        }

        #registration-form-submit {
            background-color: #00367e;
            color: #fff;
        }

        /* Red color for error messages */
        #error-staff_id, #error-staffPhone, #error-tel_no {
            color: red;
            font-size: 12px;
        }

        .custom-modal-size {
            max-width: 50%;
        }
    </style>
</head>

<body>
    <div id="app">
        <main class="py-4">
             @yield('content')
        </main>
        <footer class="w3-container w3-padding-64 w3-center w3-opacity">
            <div class="w3-xlarge w3-padding-32">
                <i class="fa fa-facebook-official w3-hover-opacity"></i>
                <i class="fa fa-instagram w3-hover-opacity"></i>
                <i class="fa fa-snapchat w3-hover-opacity"></i>
                <i class="fa fa-pinterest-p w3-hover-opacity"></i>
                <i class="fa fa-twitter w3-hover-opacity"></i>
                <i class="fa fa-linkedin w3-hover-opacity"></i>
            </div>
            <p>Powered by <a href="https://pharmaniaga.com/" target="_blank">PHARMANIAGA</a></p>
        </footer>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="{{ asset('bootstrap/js/bootstrap.bundle.min.js') }}"></script>

    @stack('custom-scripts')
</body>

</html>