@extends('selva.auth.layout')

@section('title', 'Masuk')

@section('content')
  <div
    class="flex min-h-screen items-center justify-center p-4"
    x-data="loginForm"
  >
    <div class="flex w-full max-w-4xl flex-col overflow-hidden rounded-2xl bg-white shadow-2xl lg:flex-row">
      <!-- Left section (form) -->
      <div class="w-full p-6 sm:p-8 lg:w-1/2 lg:p-10">
        <div class="mx-auto max-w-md">
          <form @submit.prevent="submitForm">
            <!-- Header -->
            <div class="mb-8 text-center">
              <h1
                class="text-xl font-bold text-gray-800"
                x-text="$store.cmsName"
              ></h1>
              <p class="text-gray-600">Masuk untuk lanjut ke dashboard</p>
            </div>

            <!-- Username Input -->
            <div class="mb-5">
              <label
                class="mb-1 block text-sm font-medium text-gray-700"
                for="username"
              >Email atau Username</label>
              <input
                class="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm placeholder-gray-400 focus:outline-none focus:ring-2"
                id="username"
                type="text"
                :class="errors.username ? 'border-red-500 focus:border-red-600 focus:ring-red-600/20' : 'focus:border-gray-900 focus:ring-gray-800/20'"
                x-model="inputData.username"
                placeholder="email atau username kamu"
              />
              <template x-if="errors.username">
                <p
                  class="mt-1 text-sm text-red-500"
                  x-text="errors.username[0]"
                ></p>
              </template>
            </div>

            <!-- Password Input -->
            <div class="mb-5">
              <label
                class="mb-1 block text-sm font-medium text-gray-700"
                for="password"
              >Kata Sandi</label>
              <div class="relative">
                <input
                  class="w-full rounded-lg border border-gray-300 px-4 py-3 pr-10 text-sm placeholder-gray-400 focus:border-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-800/20"
                  id="password"
                  :class="errors.password ? 'border-red-500 focus:border-red-600 focus:ring-red-600/20' : 'focus:border-gray-900 focus:ring-gray-800/20'"
                  :type="showPassword ? 'text' : 'password'"
                  x-model="inputData.password"
                  placeholder="••••••••••••"
                />
                <button
                  class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
                  type="button"
                  @click="togglePassword"
                >
                  <i
                    class="text-sm"
                    :class="showPassword ? 'fa-solid fa-eye-slash' : 'fa-solid fa-eye'"
                  ></i>
                </button>
              </div>
              <template x-if="errors.password">
                <p
                  class="mt-1 text-sm text-red-500"
                  x-text="errors.password[0]"
                ></p>
              </template>
            </div>

            <!-- Remember Me & Forgot -->
            <div class="mb-6 flex items-center justify-between text-sm">
              <label class="flex items-center gap-2 text-gray-600">
                <input
                  class="h-4 w-4 rounded border-gray-300 text-gray-900 focus:ring-gray-500"
                  type="checkbox"
                  x-model="inputData.remember_me"
                />
                Ingat saya
              </label>
              <a
                class="font-medium text-gray-800 hover:text-gray-700"
                :href="route('selva.auth.forgot.password')"
              >Lupa kata sandi?</a>
            </div>

            <!-- Submit Button -->
            <button
              class="w-full rounded-lg bg-gradient-to-r from-gray-900 to-gray-800 px-4 py-3 font-medium text-white shadow-lg hover:from-gray-800 hover:to-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 disabled:opacity-60"
              type="submit"
              :disabled="isLoading"
            >
              <template x-if="!isLoading">
                <span>Masuk</span>
              </template>
              <template x-if="isLoading">
                <span><i class="fa-solid fa-spinner fa-spin mr-2"></i>Memproses masuk...</span>
              </template>
            </button>

            <!-- Or Divider -->
            <div class="relative my-6">
              <div class="absolute inset-0 flex items-center">
                <div class="w-full border-t border-gray-300"></div>
              </div>
              <div class="relative flex justify-center text-sm">
                <span class="bg-white px-3 text-gray-500">Atau masuk dengan</span>
              </div>
            </div>

            <!-- Social Buttons -->
            <div class="grid grid-cols-2 gap-3">
              <button
                class="flex items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50"
                type="button"
              >
                <svg
                  class="h-4 w-4"
                  viewBox="0 0 24 24"
                >
                  <path
                    fill="#4285f4"
                    d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                  />
                  <path
                    fill="#34a853"
                    d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                  />
                  <path
                    fill="#fbbc05"
                    d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
                  />
                  <path
                    fill="#ea4335"
                    d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                  />
                </svg>
                Google
              </button>
              <button
                class="flex items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50"
                type="button"
              >
                <svg
                  class="h-4 w-4"
                  fill="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
                  />
                </svg>
                GitHub
              </button>
            </div>

            <!-- Register Link -->
            <div class="mt-6 text-center text-sm text-gray-600">
              <p>Belum punya akun? <a
                  class="font-medium text-gray-900 hover:text-gray-800"
                  href="#"
                >Daftar sekarang</a></p>
            </div>
          </form>
        </div>
      </div>

      <div
        class="relative hidden w-1/2 overflow-hidden text-white lg:flex"
        style="background: linear-gradient(135deg, #000000, #222);"
        x-data="loginAnimation"
        @mousemove="mouseX = $event.clientX; mouseY = $event.clientY"
      >

        <canvas
          class="absolute inset-0 z-0 h-full w-full"
          x-ref="canvas"
        ></canvas>

        <div class="pointer-events-none absolute inset-0 z-0 bg-[linear-gradient(to_bottom,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[length:100%_4px]">
        </div>

        <div class="absolute left-1/2 top-1/2 z-0 h-[400px] w-[400px] -translate-x-1/2 -translate-y-1/2 animate-pulse rounded-full bg-white/10 blur-[120px]">
        </div>

        <div class="absolute inset-0 z-10 flex items-center justify-center p-10">
          <div
            class="space-y-8 text-center"
            :style="`transform: perspective(1000px) rotateX(${(mouseY - window.innerHeight/2) / 60}deg) rotateY(${(mouseX - window.innerWidth/2) / -60}deg)`"
          >

            <div class="rounded-lg border border-white/20 bg-white/5 p-5 shadow-lg backdrop-blur transition duration-300 hover:scale-105">
              <div class="mb-3 flex items-center gap-2">
                <div class="h-2 w-2 rounded-full bg-red-400"></div>
                <div class="h-2 w-2 rounded-full bg-yellow-400"></div>
                <div class="h-2 w-2 rounded-full bg-green-400"></div>
                <div class="ml-auto font-mono text-xs text-white/50">{{ strtolower(env('APP_NAME')) }}.terminal</div>
              </div>
              <div class="space-y-1 text-left font-mono text-sm text-white/80">
                <div><span class="text-green-400">$</span> <span class="text-green-300">{{ strtolower(env('APP_NAME')) }} status</span></div>
                <div>✓ Siap digunakan di 5 lingkungan</div>
                <div>✓ Semua sistem berjalan lancar</div>
                <div class="mt-3 flex items-center gap-2">
                  <span class="text-white/30">&gt;</span>
                  <div class="h-4 w-2 animate-pulse rounded-sm bg-white"></div>
                </div>
              </div>
            </div>

            <div class="space-y-3">
              <div class="flex items-center justify-between rounded-md border border-white/20 bg-white/10 p-3 text-left">
                <div>
                  <!-- Frontend -->
                  <div class="text-xs font-bold text-orange-400">#frontend</div>
                  <div class="text-sm text-white/70">Tampilan aman & responsif</div>
                </div>
                <div class="h-2 w-2 animate-ping rounded-full bg-green-400"></div>
              </div>
              <div class="flex items-center justify-between rounded-md border border-white/20 bg-white/10 p-3 text-left">
                <div>
                  <!-- Backend -->
                  <div class="text-xs font-bold text-indigo-300">#backend</div>
                  <div class="text-sm text-white/70">Mesin pengolah aktif</div>
                </div>
                <div class="h-2 w-2 animate-ping rounded-full bg-green-400"></div>
              </div>
            </div>

            <div class="mt-4 flex justify-center gap-1">
              <div class="h-2 w-2 rounded-full bg-pink-400"></div>
              <div class="h-2 w-2 rounded-full bg-white/30"></div>
              <div class="h-2 w-2 rounded-full bg-white/30"></div>
            </div>
          </div>
        </div>

        <div class="absolute bottom-8 left-8 z-10 space-y-1 font-mono text-sm">
          <div x-text="date"></div>
          <div
            class="text-lg font-semibold"
            x-text="time"
          ></div>
        </div>

        <div class="absolute right-6 top-6 z-10 flex h-10 w-10 items-center justify-center rounded-full border border-white/20">
          <div class="h-4 w-4 animate-ping rounded-full bg-white/30"></div>
        </div>
        <div class="absolute bottom-6 left-6 z-10 flex h-8 w-8 rotate-12 items-center justify-center rounded border border-white/15">
          <div class="h-3 w-3 animate-ping rounded bg-white/30"></div>
        </div>
        <div class="absolute bottom-9 right-8 z-10 text-xs italic text-white/30">
          "Stay productive, stay inspired."
        </div>
      </div>

    </div>
  </div>
@endsection

@push('style')
  @vite(['resources/js/selva/auth/login/import.js'])
@endpush