@extends('adminlte::auth.login')

@section('auth_header', 'IRQS Admin')

@section('auth_logo')
    {{-- Logo disabled --}}
@endsection

@section('auth_body')
    <form action="{{ route('admin.login') }}" method="post">
        @csrf

        {{-- Email field --}}
        <div class="input-group mb-3">
            <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                value="{{ old('email') }}" placeholder="Email" autofocus>
            <div class="input-group-append">
                <div class="input-group-text login-icon-container">
                    <span class="fas fa-envelope"></span>
                </div>
            </div>
            @error('email')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>

        {{-- Password field --}}
        <div class="input-group mb-3">
            <input type="password" name="password" id="password"
                class="form-control @error('password') is-invalid @enderror" 
                placeholder="Password"
                autocomplete="off"
                onpaste="return false"
                oncopy="return false"
                oncut="return false"
                ondrop="return false">
            <div class="input-group-append">
                <div class="input-group-text login-icon-container password-toggle-icon" onclick="togglePasswordVisibility()"
                    title="Show/Hide Password">
                    <span class="fas fa-eye" id="togglePasswordIcon"></span>
                </div>
            </div>
            @error('password')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>

        {{-- Login field --}}
        <div class="row">
            <div class="col-7">
                <div class="icheck-primary" title="Remember Me">
                    <input type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
                    <label for="remember">
                        Remember Me
                    </label>
                </div>
            </div>

            <div class="col-5">
                <button type="submit" class="btn btn-primary btn-block">
                    Login
                </button>
            </div>
        </div>

    </form>
@stop

@section('auth_footer')
    <p class="mb-1 text-muted small text-center">
        <i class="fas fa-copyright"></i>
        {{ date('Y') }} IRQS. All rights reserved.
    </p>
@stop

@push('js')
    <script>
        function togglePasswordVisibility() {
            const passwordInput = document.getElementById('password');
            const toggleIcon = document.getElementById('togglePasswordIcon');

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                toggleIcon.classList.remove('fa-eye');
                toggleIcon.classList.add('fa-eye-slash');
            } else {
                passwordInput.type = 'password';
                toggleIcon.classList.remove('fa-eye-slash');
                toggleIcon.classList.add('fa-eye');
            }
        }
    </script>
@endpush