<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

  <title>LUPMIS4LUSPA | Login</title>

  <link rel="stylesheet" href="{{ url('public/assets/libs/bootstrap/css/bootstrap5.3.2.css') }}">
  <link rel="stylesheet" href="{{ url('public/assets/libs/ol/ol.css') }}" type="text/css">
  <link rel="stylesheet" href="{{ url('public/assets/libs/ol/ol-ext.css') }}" />
  <link rel="stylesheet" href="{{ url('public/assets/css/l4l.css') }}" rel="stylesheet">
  <link rel="stylesheet" href="{{ url('public/assets/css/styles.css') }}" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">


</head>

<!-- <body class="bg-gradient-primary"> -->
<body>

<div class="container py-4">
  <div class="main">
    <div class="row g-5">
      <div class="col-md-6 col-lg-6 lupmis-primary-bg-50 d-flex flex-column p-4 rounded">
        <div id="map" class="map" style="width: 100%; height: 580vH;"></div>
        <div class="pt-2 lupmis-primary-text-900">
          <!-- <h4 class="d-flex justify-content-between align-items-center mbmmm-3"><span class="">Welcome to LUPMIS</span></h4> -->
        </div>
      </div>
      <div class="col-md-6 col-lg-6 px-5 d-flex flex-row-reverse">
        <div class="login-form">
          <div class="mb-4 d-flex justify-content-center align-items-center">
          <img class="" src="{{ url('public/assets/images/logo-1.png') }}" alt="" width="150" height="150"/>
          &nbsp; &nbsp; &nbsp;
          <img class="" src="{{ url('public/assets/images/logo-2.png') }}" alt="" width="150" height="150"/>
        </div>
        <h4 class="mb-3">Welcome to LUPMIS</h4>
        @include('common.notifications')
        <form class="needs-validation" action="/user-login" method="POST">
          @csrf
          <div class="row g-3">
            <div class="col-12">
              <label for="username" class="form-label">Username</label>
              <div class="input-group has-validation">
                <!-- <span class="input-group-text">@</span> -->
                <input type="text" class="form-control" name="username"  id="username" placeholder="username" required>
                <div class="invalid-feedback">Your username is required.</div>
              </div>
            </div>
            <div class="col-12">
              <label for="password" class="form-label">Password</label>
              <input type="password" class="form-control" name="password"  id="password" placeholder="********" required>
              <div class="invalid-feedback">Password is required.</div>
            </div>
            
            <button class="w-100 btn lupmis-btn-primary btn-lg" type="submit">Sign In</button>
        </form>
        <div class="col-12">
            <div class="text-end my-3">
              <a class="lupmis-primary-text-500" href="{{ url('user-reset') }}">Forgot Password</a>
            </div>
        </div>
        <div class="m-3 text-center request-account">
          <p class="m-0">Don't have an account?</p>
          <a class="lupmis-primary-text-500" href="">Request an account</a>
        </div>
        </div>
      </div>
    </div>
  </div>
  <footer class="py-5">
    <div class="row">
      <div class="col-md-12 col-lg-12 position-relative">
        <p class="text-center lupmis-grey-900">Developed with Support from</p>
        <div class="text-center">
          <img src="{{ url('public/assets/images/donor-1.png') }}" alt="">
          </div>
          <div class="text-center pt-3 position-absolute bottom-0 end-0">
            <ul class="list-inline m-0">
              <li class="list-inline-item"><a class="lupmis-primary-text-500" href="#">About</a></li>
              <li class="list-inline-item"><a class="lupmis-primary-text-500" href="#">Privacy</a></li>
              <li class="list-inline-item"><a class="lupmis-primary-text-500" href="#">Terms</a></li>
            </ul>
            <p class="lupmis-grey-900">2025 All Rights Reserved</p>
          </div>
      </div>
    </div>
  </footer>
</div>
  <!-- Bootstrap core JavaScript-->

<script src="{{ url('public/assets/libs/jquery-3.2.1.min.js') }}" type="text/javascript"></script>
<script src="{{ url('public/assets/libs/bootstrap/js/bootstrap5.3.2.js') }}"></script>
<script src="{{ url('public/assets/libs/ol/ol.js') }}" type="text/javascript" ></script> <!-- ol6.15.1 -->
<script src="{{ url('public/assets/libs/ol/ol-ext.js') }}" type="text/javascript" ></script>
<script src="{{ url('public/assets/js/l4lfunctions.js') }}"></script>


</body>

</html>
