<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate, max-age=0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>Login NataAset</title>
    @php
      $tablerIconsUrl = url()->versionedAsset('assets/vendor/tabler-icons/tabler-icons.min.css');
    @endphp
    <link rel="icon" type="image/png" href="{{ url()->versionedAsset('assets/img/logo-icon.png') }}">
    <link rel="preload" href="{{ $tablerIconsUrl }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="{{ $tablerIconsUrl }}"></noscript>
    <link rel="stylesheet" href="{{ url()->versionedAsset('assets/css/login.css') }}">
  </head>
  <body>
    <main class="auth-page">
      <section class="auth-card" aria-label="Login admin">
        <div class="auth-form-panel">
          <div class="auth-form-inner">
            <a class="auth-brand" href="{{ route('login') }}">
              <span class="auth-brand-mark">
                <img src="{{ url()->versionedAsset('assets/img/logo-icon.png') }}" alt="" aria-hidden="true">
              </span>
              <span>NataAset</span>
            </a>

            <div class="auth-heading">
              <h1>Masuk ke NataAset.</h1>
              <p>Tertata, Tersimpan, Terpantau.</p>
            </div>

            @if ($errors->any())
              <div class="auth-alert">
                <i class="ti ti-alert-circle"></i>
                <span>{{ $errors->first() }}</span>
              </div>
            @endif

            @if (session('status'))
              <div class="auth-alert success">
                <i class="ti ti-circle-check"></i>
                <span>{{ session('status') }}</span>
              </div>
            @endif

            <form class="auth-form" action="{{ route('login.store') }}" method="POST">
              @csrf
              <label class="auth-field">
                <i class="ti ti-mail"></i>
                <input type="email" name="email" value="{{ old('email') }}" placeholder="Alamat email" autocomplete="email" required autofocus>
              </label>

              <label class="auth-field">
                <i class="ti ti-lock"></i>
                <input id="passwordInput" type="password" name="password" placeholder="Password" autocomplete="current-password" required>
                <button class="password-toggle" type="button" data-password-toggle aria-label="Tampilkan password">
                  <i class="ti ti-eye"></i>
                </button>
              </label>

              <div class="auth-row">
                <a href="{{ route('login') }}">Lupa password?</a>
              </div>

              <button class="auth-submit" type="submit">Masuk</button>
            </form>

            <p class="auth-footer-text">Belum punya akses? <span>Hubungi Admin</span></p>
          </div>
        </div>

        <div class="auth-visual-panel" aria-hidden="true" data-login-parallax>
          <div class="shape shape-one" data-parallax-layer data-parallax-depth="-0.18"></div>
          <div class="shape shape-two" data-parallax-layer data-parallax-depth="0.22"></div>
          <div class="shape shape-three" data-parallax-layer data-parallax-depth="-0.26"></div>

          <div class="mock-dashboard" data-parallax-layer data-parallax-depth="0.42" data-parallax-tilt>
            <div class="mock-sidebar">
              <span></span>
              <i></i>
              <i></i>
              <i></i>
              <i></i>
            </div>
            <div class="mock-content">
              <div class="mock-top">
                <span></span>
                <b></b>
              </div>
              <div class="mock-stats">
                <span></span>
                <span></span>
                <span></span>
              </div>
              <svg viewBox="0 0 360 150" role="img">
                <path d="M10 106 C50 30, 80 28, 115 92 S182 126, 212 75 S262 34, 350 24" fill="none" stroke="#1d7ff5" stroke-width="7" stroke-linecap="round"/>
                <path d="M10 122 C54 115, 78 56, 120 62 S180 116, 218 101 S284 52, 350 70" fill="none" stroke="#27cbb8" stroke-width="7" stroke-linecap="round"/>
              </svg>
              <div class="mock-table">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
              </div>
            </div>
          </div>

          <div class="floating-card floating-code" data-parallax-layer data-parallax-depth="0.78">
            <i class="ti ti-qrcode"></i>
          </div>

          <div class="floating-card floating-mini" data-parallax-layer data-parallax-depth="0.58">
            <div>
              <i class="ti ti-package"></i>
              <strong>NataAset</strong>
            </div>
            <svg viewBox="0 0 120 44">
              <path d="M3 32 C24 8, 42 34, 62 16 S96 9, 117 28" fill="none" stroke="#28d7bd" stroke-width="4" stroke-linecap="round"/>
            </svg>
          </div>

          <div class="auth-visual-copy" data-parallax-layer data-parallax-depth="0.18">
            <h2>Tertata, Tersimpan, Terpantau.</h2>
            <p>Kelola aset ruangan, kondisi barang, dan laporan petugas lapangan dalam satu dashboard.</p>
          </div>
        </div>
      </section>
    </main>

    <script>
      window.addEventListener('pageshow', function (event) {
        if (event.persisted) {
          window.location.replace("{{ route('dashboard') }}");
        }
      });

      document.querySelector('[data-password-toggle]')?.addEventListener('click', function () {
        const input = document.getElementById('passwordInput');
        const icon = this.querySelector('.ti');
        const isPassword = input.type === 'password';
        input.type = isPassword ? 'text' : 'password';
        icon.className = isPassword ? 'ti ti-eye-off' : 'ti ti-eye';
      });

      (function () {
        const panel = document.querySelector('[data-login-parallax]');
        const layers = Array.from(document.querySelectorAll('[data-parallax-layer]'));
        const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
        const canHover = window.matchMedia('(hover: hover) and (pointer: fine)');

        if (!panel || layers.length === 0 || reduceMotion.matches || !canHover.matches) {
          return;
        }

        let frame = null;
        let targetX = 0;
        let targetY = 0;

        function applyParallax() {
          frame = null;

          layers.forEach(function (layer) {
            const depth = Number(layer.dataset.parallaxDepth || 0.2);
            layer.style.setProperty('--parallax-x', (targetX * depth).toFixed(2) + 'px');
            layer.style.setProperty('--parallax-y', (targetY * depth).toFixed(2) + 'px');

            if (layer.hasAttribute('data-parallax-tilt')) {
              layer.style.setProperty('--parallax-tilt-x', (-targetY * 0.035).toFixed(2) + 'deg');
              layer.style.setProperty('--parallax-tilt-y', (targetX * 0.035).toFixed(2) + 'deg');
            }
          });
        }

        function queueParallax(event) {
          const rect = panel.getBoundingClientRect();
          targetX = ((event.clientX - rect.left) / rect.width - 0.5) * 24;
          targetY = ((event.clientY - rect.top) / rect.height - 0.5) * 20;

          if (!frame) {
            frame = window.requestAnimationFrame(applyParallax);
          }
        }

        function resetParallax() {
          targetX = 0;
          targetY = 0;
          window.requestAnimationFrame(applyParallax);
        }

        panel.addEventListener('pointermove', queueParallax);
        panel.addEventListener('pointerleave', resetParallax);
      })();
    </script>
  </body>
</html>
