@extends('layouts.auth.app')

@section('content')
    <div class="login-wrapper" x-data="{
        hidePassword: true,
        togglePassword() {
            this.hidePassword = !this.hidePassword;
        }
    }">
        <div class="login-brand">
            <img class="login-logo" src="{{ asset('static/logo-white.png') }}" alt="E SLPHT">
        </div>

        <div class="login-card">
            <h2>Masuk ke Admin</h2>
            <p class="login-subtitle">Silakan masuk dengan akun admin Anda</p>

            <form method="POST" action="{{ route('login') }}">
                @csrf
                @if (session('error'))
                    <div class="alert alert-danger" role="alert">
                        {{ session('error') }}
                    </div>
                @endif
                <div class="mb-3">
                    <label for="email">Email</label>
                    <input type="email" name="email"
                        class="form-control @error('email') is-invalid @enderror" id="email"
                        placeholder="nama@email.com" value="{{ old('email') }}">
                    @error('email')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
                <div class="mb-2">
                    <label for="password">Password</label>
                    <div class="input-group">
                        <input :type="`${hidePassword ? 'password' : 'text'}`" name="password"
                            class="form-control @error('password') is-invalid @enderror" id="password"
                            placeholder="Masukkan password">
                        <span class="input-group-text cursor-pointer" @click="togglePassword()">
                            <i :class="`fas ${hidePassword ? 'fa-eye-slash' : 'fa-eye'}`" style="font-size:14px"></i>
                        </span>
                    </div>
                    @error('password')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
                <div class="text-end mb-4">
                    <a href="{{ route('password.request') }}" class="text-decoration-none text-success">Lupa Password?</a>
                </div>
                <button class="w-100 btn btn-success" type="submit">Masuk</button>
            </form>
        </div>

        <div class="login-footer">
            &copy; {{ date('Y') }} E SLPHT &mdash; Powered by Departemen Hama dan Penyakit Tumbuhan Universitas Gadjah Mada & PIAT (Pusat Inovasi Agroteknologi) Universitas Gadjah Mada
        </div>
    </div>
@endsection