@extends('layouts.auth')

@section('content')
    <div class="login-container">
        <div class="login-background">
            <div class="floating-elements">
                <div class="floating-element"></div>
                <div class="floating-element"></div>
                <div class="floating-element"></div>
                <div class="floating-element"></div>
            </div>
        </div>

        <div class="login-card-wrapper">
            <div class="login-card">
                <div class="login-header">
                    <div class="logo-container">
                        <img src="{{ asset('images/logo-black.png') }}" alt="SMK Muhammadiyah 1 Berbek" class="login-logo">
                    </div>
                    <h2 class="login-title">Ubah Password Baru</h2>
                    <p class="login-subtitle">Silakan masukkan password baru Anda untuk akun <strong>{{ $email }}</strong></p>
                </div>

                <form class="login-form" method="POST" action="{{ route('password.update') }}">
                    @csrf
                    <input type="hidden" name="email" value="{{ $email }}">

                    <div class="form-group">
                        <label for="password" class="form-label">Password Baru</label>
                        <div class="input-group">
                            <input type="password" class="form-control @error('password') is-invalid @enderror"
                                id="password" name="password" placeholder="Masukkan password baru" required>
                            <button type="button" class="password-toggle border-0" id="togglePassword">
                                <i class="fas fa-eye"></i>
                            </button>
                            @error('password')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="password_confirmation" class="form-label">Konfirmasi Password Baru</label>
                        <div class="input-group">
                            <input type="password" class="form-control"
                                id="password_confirmation" name="password_confirmation" placeholder="Konfirmasi password baru" required>
                            <button type="button" class="password-toggle border-0" id="togglePasswordConfirmation">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>

                    <button type="submit" class="login-btn">
                        <span class="btn-text">Ubah Password</span>
                        <i class="fas fa-arrow-right btn-icon"></i>
                    </button>

                    <div class="back-to-home">
                        <a href="{{ route('login') }}" class="back-btn text-decoration-none">
                            <i class="fas fa-chevron-left"></i>
                            <span>Kembali ke Login</span>
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const togglePasswordConfirmation = document.getElementById('togglePasswordConfirmation');
        const passwordConfirmationInput = document.getElementById('password_confirmation');

        if (togglePasswordConfirmation && passwordConfirmationInput) {
            togglePasswordConfirmation.addEventListener('click', function() {
                const type = passwordConfirmationInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordConfirmationInput.setAttribute('type', type);
                const eyeIcon = this.querySelector('i');
                if (type === 'password') {
                    eyeIcon.classList.remove('fa-eye-slash');
                    eyeIcon.classList.add('fa-eye');
                } else {
                    eyeIcon.classList.remove('fa-eye');
                    eyeIcon.classList.add('fa-eye-slash');
                }
            });
        }
    });
</script>
@endpush
