@extends('layouts.auth')

@section('contents')
    <section class="">
        <div class="container-fluid h-custom">
            <div class="row d-flex justify-content-center align-items-center h-100">
                <div>
                    <div class="text-center text-white mb-3 mt-5">
                        <img src="{{ asset('logo-white.png') }}" alt="SSI Logo" class="brand-image mb-3"
                            style="opacity: .8; width: 150px">
                        {{-- <h3 class="font-weight-bold">Flying Tiger Copenhagen</h3> --}}
                        {{-- <span class="d-block mt-3">Login to your account</span> --}}
                    </div>

                    <div class="border p-5 bg-white box-radius" style="border-radius: 5px; max-width: 420px;">
                        <form id="loginForm">
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            <div class="mb-5 text-lg-left">
                                <span class="text-muted d-block mb-2">Login to your account</span>
                                <h3 class="font-weight-bold">Welcome to FTC VISTA Reporting</h3>
                                <!-- <h6>Visitor, Inventory & Sales Transmission API</h6> -->
                            </div>

                            <!-- Email input -->
                            <div class="form-outline mb-3 mt-3">
                                <label class="form-label" for="username">Username</label>
                                <input type="text" id="username" name="username"
                                    class="form-control text-sm form-control-lg" placeholder="Username" required>
                            </div>

                            <!-- Password input -->
                            <div class="form-outline mb-3">
                                <label class="form-label" for="password">Password</label>
                                <input type="password" id="password" name="password"
                                    class="form-control text-sm form-control-lg" placeholder="Password" required>
                            </div>

                            <div class="alert alert-outline d-none text-center" role="alert" id="errorAlert">
                                <i class="nav-icon fas fa-hand-paper mr-1" style="color: #dc3545"></i>
                                <small id="errorAlertMessage"> A simple danger alert—check it out!</small>
                            </div>

                            <div class="mt-4">
                                <button type="submit" class="btn text-sm btn-lg special-button py-3 w-100"
                                    id="submitBtn">Login</button>
                            </div>
                        </form>
                    </div>
                    <div class="mt-5 text-center">
                        <p class="text-muted small text-white">
                            &copy; VISTA Visitor, Inventory & Sales Transmission API.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script>
        const loginStoreURL = "{{ route('login.store') }}";
    </script>

    <script src="{{ asset('/js/auth/login.js') }}"></script>
@endsection