<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-90680653-2"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-90680653-2');
    </script>
<style>
    @keyframes slideFadeIn {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
  .az-card-signin {
    border-radius: 10px !important;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
     animation: slideFadeIn 0.8s ease-out forwards;
  opacity: 0; /* Start hidden */
  }

  .az-signin-wrapper {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(8px);
    background-color: rgba(255, 255, 255, 0.1); /* Optional: adds frosted glass tint */
    padding: 40px;
    border-radius: 10px;
  }
</style>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" type="image/x-icon" href="{{asset('img/MDS_LOGO.png')}}">
    <!-- Twitter -->
    <!-- <meta name="twitter:site" content="@bootstrapdash">
    <meta name="twitter:creator" content="@bootstrapdash">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Azia">
    <meta name="twitter:description" content="Responsive Bootstrap 5 Dashboard Template">
    <meta name="twitter:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png"> -->

    <!-- Facebook -->
    <!-- <meta property="og:url" content="https://www.bootstrapdash.com/azia">
    <meta property="og:title" content="Azia">
    <meta property="og:description" content="Responsive Bootstrap 5 Dashboard Template">

    <meta property="og:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
    <meta property="og:image:secure_url" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="600"> -->

    <!-- Meta -->
    <meta name="description" content="Responsive Bootstrap 5 Dashboard Template">
    <meta name="author" content="BootstrapDash">

    <title>M.D.S Group Of Companies - Supply Chain Management</title>
    @include('layouts.css')


  </head>
  <body class="az-body" style="background: url(https://prescienceds.com/wp-content/uploads/2024/03/Sales-Copilot-Case-Study.png) center center/cover no-repeat!important;">
  <!--<body class="az-body" style="background: url(https://ewm.swiss/application/files/9316/1243/4780/CRM_Systems_EWM_Digital_Agency_Geneva.png) center center/cover no-repeat!important;">-->

    <div class="az-signin-wrapper">
        <div class="az-card-signin" style="background: rgba(255,255,255,1);height:auto;">
            <h1 class="az-logo"> <img style="height:150px;" src="{{asset('img/MDS_LOGO.png')}}"></h1>
        <div class="az-signin-header">
          <h2>Welcome back!</h2>
          <h4>Please sign in to continue</h4>

          <form method="POST" action="{{ route('login') }}">
            @csrf
            <div class="form-group">
                <label>Email Address</label>
                <input id="email"
                       class="form-control form-control-rounded"
                       name="email" value="{{ old('email') }}" required autocomplete="email"
                       autofocus>
                @error('email')
                <span class="text-danger" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div><!-- form-group -->
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password"
                       class="form-control form-control-rounded"
                       name="password" required autocomplete="current-password">
                @error('password')
                <span class="text-danger" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>
            <button class="btn btn-az-primary btn-block">Sign In</button>
            <button class="btn btn-az-primary btn-block">Unlock with PIN <i class="fa fa-briefcase"></i></button>
          </form>
        </div><!-- az-signin-header -->
<!--        <div class="az-signin-footer">
          <p><a href="">Forgot password?</a></p>
        </div> az-signin-footer -->
      </div><!-- az-card-signin -->
    </div><!-- az-signin-wrapper -->

    @include('layouts.script')
    <script>
      $(function(){
        'use strict'

      });
    </script>
    <script>
  $(document).ready(function () {
    $('.az-card-signin').css('opacity', '1'); // Ensure visibility
    $('.az-card-signin').addClass('animated'); // Optional class for future chaining
  });
</script>
  </body>
</html>
