@extends('admin.layouts.layout-login')

@push('page_css')
<!-- FontAwesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
.password-input-wrapper {
    position: relative;
}

.password-toggle-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    color: #666;
}

.password-toggle-btn:hover {
    color: #333;
}

.password-toggle-btn i {
    font-size: 16px;
}

#password {
    padding-right: 40px;
}
</style>
@endpush

@section('content')
<div class="bg-soft-primary">
    <div class="d-flex ps-5 align-items-center gap-3">
        <div class="avatar-md mb-4">
            <span class="avatar-title rounded-circle bg-light">
                <img src="{{ asset('img/logo-light.jpg') }}" alt="" class="rounded-circle" height="90">
            </span>
        </div>
        <div class="text-primary p-4">
            <h5 class="text-primary">Welcome Back !</h5>
            <p>Sign in to continue to {{ \Config::get('settings.company_name') }}.</p>
        </div>        
    </div>    
</div>
<div class="card-body pt-0">    
    <div class="p-2">
        {{ html()->form('POST', 'login')->attributes(['class' => 'form-horizontal'])->open() }}
            @include('admin.components.messages')           
            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <div class="mb-3">
                        <label for="email" class="form-label">Email/Username</label>
                        <input type="text" class="form-control" name="email" value="{{ old('email') }}" id="email" placeholder="Email/Username" aria-required="true"{{ $errors->has('email') ? ' aria-invalid="true"' : '' }}>                    
                        @if ($errors->has('email'))
                            <label class="error" for="email">
                                <strong>{{ $errors->first('email') }}</strong>
                            </label>
                        @endif
                    </div>
                </div>

                <div class="col-lg-12 col-md-12">
                    <div class="mb-3">
                        <label for="password" class="form-label">Password</label>
                        <div class="password-input-wrapper">
                            <input type="password" class="form-control" name="password" id="password" placeholder="Password" aria-required="true"{{ $errors->has('password') ? ' aria-invalid="true"' : '' }}>
                            <button type="button" class="password-toggle-btn" onclick="togglePasswordVisibility('password')">
                                <i class="fas fa-eye" id="password-toggle-icon"></i>
                            </button>
                        </div>
                        @if ($errors->has('password'))
                            <label class="error" for="password">
                                <strong>{{ $errors->first('password') }}</strong>
                            </label>
                        @endif
                    </div>
                </div>           

                <div class="mt-3">
                    <button class="btn btn-primary btn-block waves-effect waves-light" type="submit">Log In</button>
                </div>
            </div>
            <div class="mt-4 text-center">
                <a href="{{url('/password/reset')}}" class="text-muted"><i class="mdi mdi-lock mr-1"></i> Forgot your password?</a>
            </div>
        {{ html()->form()->close() }}
    </div>
</div>

<script>
function togglePasswordVisibility(fieldId) {
    const passwordInput = document.getElementById(fieldId);
    const toggleIcon = document.getElementById(fieldId + '-toggle-icon');
    
    if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        toggleIcon.className = 'fas fa-eye-slash';
    } else {
        passwordInput.type = 'password';
        toggleIcon.className = 'fas fa-eye';
    }
}
</script>
@endsection