@extends('layout.master2')

@push('plugin-styles')
<link href="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" />
@endpush

<style>
    .landing-page {
        background-image: url('/assets/images/bg-landing.png'); /* Custom image */
        background-size: cover;
        background-position: center;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .card-overlay {
        background: rgba(255, 255, 255, 0.8); /* White background with transparency */
        border-radius: 15px;
        padding: 3rem;
        /*width: 80%;*/
        max-width: 600px;
        text-align: center;
        position: relative; /* This ensures everything stays inside the card */
    }
    .seal-mrs {
        font-size: 1.0rem;
        font-weight: bold;
        color: #d1242c; /* Updated color */
        margin-bottom: 30px;
        margin-top:10px;
    }
    .seal-mrs span {
        color: rgb(0, 0, 0);
        font-weight: normal;
        font-family: 'Arial', sans-serif;
    }
    .error {
        /* margin-top:2.4rem !important; */
        color: red !important;
        font-weight: bold;
        text-align: left !important;
        height: auto !important;
    }
</style>

@section('content')
<div class="page-content d-flex align-items-center justify-content-center landing-page">
  <div class="row w-100 mx-0 auth-page">
    <div class="col-md-8 col-xl-6 mx-auto">
      <div class="card-overlay">
        <div class="row">
          <div class="col-md-12 ps-md-0">
            <div class="auth-form-wrapper px-4 py-5">
                <img src="{{ asset('assets/images/logo.png') }}" alt="Logo" style="height:62px; width: auto;">
                <div class="seal-mrs">
                </div>
                <h5 class="fw-normal mb-4"><b>Welcome back! Log in to your account.</b></h5>
                    <form method="POST" action="{{ route('login') }}">
                        @csrf
                    <div class="mb-3">
                        <input type="text" name="username" class="form-control h-45px fs-13px" id="username" placeholder="Username" />
                    </div>
                    <div class="mb-3">
                        <input type="password" name="password" class="form-control h-45px fs-13px" placeholder="Password"  id="password" />
                    </div>
                    <div class="mb-3">
                        <input class="form-check-input" type="checkbox" value="1" id="rememberMe" />
                        <label class="form-check-label" for="rememberMe">
                            Remember Me
                        </label>
                    </div>
                    <div class="mb-15px">
                        <button type="submit" class="btn btn-danger me-2 mb-2 mb-md-0">Log in</button>
                        <!-- <a href="/2fa" class="btn btn-outline-danger btn-icon-text mb-2 mb-md-0" role="button" aria-pressed="true" title="Login 2FA">
                            <i data-feather="key"></i>
                            Login 2FA
                        </a> -->
                    </div>
                </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('plugin-scripts')
<script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
@endpush

@push('custom-scripts')
<script type="text/javascript" src="{{ asset('js/userLogin.js') }}"></script>
@endpush