@extends('landing.auth.layout')

@section('title', 'Masuk')

@section('content')
  <section
    class="relative flex h-screen items-center bg-cover bg-center bg-no-repeat px-4 py-8 md:py-0"
    style="background-image: url('{{ asset('landing/images/bg/2.jpg') }}')"
    x-data="loginForm"
  >
    <div
      class="z-2 absolute inset-0 bg-gradient-to-b from-transparent to-black"
      id="particles-snow"
    ></div>
    <div class="z-3 container relative mx-auto flex h-full items-center">
      <div class="flex w-full justify-center">
        <div class="mx-4 my-8 w-full max-w-[450px] rounded-2xl border border-white/20 bg-white/95 p-6 shadow-2xl backdrop-blur-sm md:mx-0 md:my-0 md:p-8">
          <div class="mb-4 text-center md:mb-6">
            <a :href="route('landing.beranda.index')">
              <img
                class="mx-auto inline-block"
                class="h-[27px] w-[150px] md:h-[33px] md:w-[185px]"
                src="{{ $web->logo_dark_url ?? '' }}"
                alt=""
                style="width: 150px; height: 27px; object-fit: cover;"
              >
            </a>
            <p class="mt-2 text-xs text-gray-600 md:text-sm">Selamat datang kembali!</p>
          </div>

          <form
            class="space-y-3 md:space-y-4"
            @submit.prevent="submitForm"
          >
            <div class="space-y-1 md:space-y-2">
              <label
                class="block text-xs font-semibold text-gray-700 md:text-sm"
                for="username"
              >Email atau Username</label>
              <div class="relative">
                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                  <i
                    class="h-4 w-4 text-gray-400 md:h-5 md:w-5"
                    data-feather="user"
                  ></i>
                </div>
                <input
                  class="w-full rounded-xl border-2 py-2.5 pl-9 pr-4 text-sm outline-none transition-all duration-200 focus:ring-4 md:py-3 md:pl-10 md:text-base"
                  id="username"
                  type="text"
                  :class="errors.username ? 'border-red-500 hover:border-red-600 focus:border-red-600 focus:ring-red-600/20' :
                      'border-gray-200 hover:border-gray-300 focus:border-green-600  focus:ring-green-600/20'"
                  x-model="inputData.username"
                  placeholder="email atau username kamu"
                >
              </div>
              <template x-if="errors.username">
                <p
                  class="mt-1 text-sm text-red-500"
                  x-text="errors.username[0]"
                ></p>
              </template>
            </div>

            <div class="space-y-1 md:space-y-2">
              <label
                class="block text-xs font-semibold text-gray-700 md:text-sm"
                for="password"
              >Kata Sandi</label>
              <div class="relative">
                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                  <i
                    class="h-4 w-4 text-gray-400 md:h-5 md:w-5"
                    data-feather="lock"
                  ></i>
                </div>
                <input
                  class="w-full rounded-xl border-2 py-2.5 pl-9 pr-10 text-sm outline-none transition-all duration-200 focus:ring-4 md:py-3 md:pl-10 md:pr-12 md:text-base"
                  id="password"
                  :class="errors.password ? 'border-red-500 hover:border-red-600 focus:border-red-600 focus:ring-red-600/20' :
                      'border-gray-200 hover:border-gray-300 focus:border-green-600  focus:ring-green-600/20'"
                  :type="showPassword ? 'text' : 'password'"
                  x-model="inputData.password"
                  placeholder="••••••••••••"
                >
                <button
                  class="absolute inset-y-0 right-0 flex items-center pr-3"
                  type="button"
                  @click="togglePassword"
                >
                  <i
                    class="text-xl text-gray-400 transition-colors"
                    :class="showPassword ? 'far fa-eye-slash' : 'far 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>

            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <input
                  class="h-3.5 w-3.5 rounded border-gray-300 text-green-600 focus:ring-green-500 md:h-4 md:w-4"
                  id="remember-me"
                  type="checkbox"
                  x-model="inputData.remember_me"
                >
                <label
                  class="ml-2 text-xs text-gray-600 md:text-sm"
                  for="remember-me"
                >Ingat saya</label>
              </div>
              <a
                class="text-xs font-medium text-green-600 transition-colors hover:text-green-700 md:text-sm"
                href="/forgot-password"
              >
                Lupa kata sandi?
              </a>
            </div>

            <button
              class="flex w-full items-center justify-center space-x-2 rounded-xl bg-gradient-to-r from-green-600 to-green-700 py-3 text-sm font-semibold text-white transition-all duration-200 hover:-translate-y-0.5 hover:from-green-700 hover:to-green-800 hover:shadow-lg active:translate-y-0 md:py-3.5 md:text-base"
              type="submit"
            >
              <i
                class="h-4 w-4 md:h-5 md:w-5"
                data-feather="log-in"
              ></i>
              <span>Masuk</span>
            </button>

            <div class="relative my-4 md:my-6">
              <hr class="border-gray-200">
              <span class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 transform bg-white px-3 text-xs font-medium text-gray-500 md:px-4 md:text-sm">
                Atau masuk dengan
              </span>
            </div>

            <div class="space-y-2">
              <a
                class="flex w-full items-center justify-center space-x-2 rounded-xl border-2 border-green-600 bg-white py-2 text-xs font-semibold text-green-600 transition-all duration-200 hover:-translate-y-0.5 hover:bg-green-50 hover:shadow-md md:space-x-3 md:py-2.5 md:text-sm"
                href="#"
              >
                <i
                  class="h-4 w-4"
                  data-feather="shield"
                ></i>
                <span>SSO Simpatika</span>
              </a>
              <a
                class="flex w-full items-center justify-center space-x-2 rounded-xl border-2 border-green-600 bg-white py-2 text-xs font-semibold text-green-600 transition-all duration-200 hover:-translate-y-0.5 hover:bg-green-50 hover:shadow-md md:space-x-3 md:py-2.5 md:text-sm"
                href="#"
              >
                <i
                  class="h-4 w-4"
                  data-feather="key"
                ></i>
                <span>SSO Pusaka</span>
              </a>
            </div>

            <div class="border-t border-gray-100 pt-2 text-center md:pt-3">
              <span class="text-xs text-gray-500 md:text-sm">Belum punya akun?</span>
              <a
                class="ml-1 text-xs font-bold text-green-600 transition-colors hover:text-green-700 md:text-sm"
                href="/register"
              >
                Daftar sekarang
              </a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>

  <div class="fixed bottom-4 end-4 z-10 md:bottom-6 md:end-6">
    <a
      class="back-button flex size-10 items-center justify-center rounded-full bg-green-600 text-white shadow-lg transition-all duration-200 hover:-translate-y-1 hover:bg-green-700 hover:shadow-xl md:size-12"
      href="#"
      title="Kembali"
    >
      <i
        class="h-4 w-4 md:h-5 md:w-5"
        data-feather="arrow-left"
      ></i>
    </a>
  </div>
@endsection

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