<!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="LUPMIS Login Page">
  <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') }}">
  <link rel="stylesheet" href="{{ url('public/assets/css/styles.css') }}">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/font/bootstrap-icons.min.css">
</head>

<body class="bg-light">

<div class="container py-5">
  <main class="mb-5">
    <div class="row g-5 align-items-stretch">
      
      <div class="col-md-6 lupmis-primary-bg-50 d-flex flex-column p-4 rounded shadow-sm">
        <div id="map" class="map rounded" style="width: 100%; min-height: 500px; background-color: #eee;"></div>
        <div class="pt-3 lupmis-primary-text-900 text-center">
          <!-- <h5>Interactive Spatial Portal</h5> -->
        </div>
      </div>
      
      <div class="col-md-6 px-lg-5 d-flex align-items-center">
        <div class="login-form w-100">
          
          <div class="mb-4 d-flex justify-content-center align-items-center gap-3">
            <img src="{{ url('public/assets/images/logo-1.png') }}" alt="Logo 1" width="120" height="120" class="img-fluid"/>
            <img src="{{ url('public/assets/images/logo-2.png') }}" alt="Logo 2" width="120" height="120" class="img-fluid"/>
          </div>
          
          <h4 class="mb-3 text-center text-md-start">Welcome to LUPMIS</h4>
          
          @include('common.notifications')
          
          <form class="needs-validation" action="/user-login" method="POST" novalidate>
            @csrf
            <div class="row g-3">
              
              <div class="col-12">
                <label for="username" class="form-label">Username</label>
                <input type="text" class="form-control" name="username" id="username" placeholder="Enter your username" required>
                <div class="invalid-feedback">Your username is required.</div>
              </div>
              
              <div class="col-12">
                <div class="d-flex justify-content-between align-items-center">
                  <label for="password" class="form-label mb-0">Password</label>
                  <a class="small text-decoration-none lupmis-primary-text-500" href="{{ url('user-reset') }}">Forgot Password?</a>
                </div>
                <input type="password" class="form-control mt-2" name="password" id="password" placeholder="********" required>
                <div class="invalid-feedback">Password is required.</div>
              </div>
              
              <div class="col-12 pt-2">
                <button class="w-100 btn lupmis-btn-primary btn-lg" type="submit">Sign In</button>
              </div>
              
            </div>
          </form>
          <div class="mt-4 text-center request-account">
            <p class="m-0 text-muted">Don't have an account?</p>
            <a class="fw-bold text-decoration-none lupmis-primary-text-500" href="#">Request an account</a>
          </div>
          
        </div>
      </div>
      
    </div>
  </main>

  <footer class="pt-4 my-md-5 pt-md-5 border-top">
    <div class="row align-items-center">
      <div class="col-md-6 text-center text-md-start">
        <p class="text-muted small mb-2">Developed with Support from</p>
        <img src="{{ url('public/assets/images/donor-1.png') }}" alt="Donor Logo" class="img-fluid" style="max-height: 100px;">
      </div>
      <div class="col-md-6 text-center text-md-end mt-3 mt-md-0">
        <ul class="list-inline mb-1">
          <li class="list-inline-item"><a class="text-decoration-none text-muted small" href="#">About</a></li>
          <li class="list-inline-item"><span class="text-muted small">&middot;</span></li>
          <li class="list-inline-item"><a class="text-decoration-none text-muted small" href="#">Privacy</a></li>
          <li class="list-inline-item"><span class="text-muted small">&middot;</span></li>
          <li class="list-inline-item"><a class="text-decoration-none text-muted small" href="#">Terms</a></li>
        </ul>
        <p class="text-muted small mb-0">&copy; 2026 All Rights Reserved</p>
      </div>
    </div>
  </footer>
</div>

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

<script>
  $(document).ready(function() {
    // if (typeof ol !== 'undefined') {
    //   const map = new ol.Map({
    //     target: 'map',
    //     layers: [
    //       new ol.layer.Tile({
    //         source: new ol.source.OSM()
    //       })
    //     ],
    //     view: new ol.View({
    //       center: ol.proj.fromLonLat([0, 0]),
    //       zoom: 2
    //     })
    //   });
    // }
  });
</script>

</body>
</html>