@extends('auth.template.app')

@section('meta')
@endsection

@section('title')
Login
@endsection

@section('styles')
@endsection

@section('content')
<div class="login-card">
    <div class="login-card-body">
        <div class="login-header">
            <!-- Logos and Title Row -->
            <div class="header-logo-row">
                <img src="{{asset('uploads/front_end/ib.png')}}" alt="" class="login-logo-left">
                <h3 class="login-title">ERP Login</h3>
                <img src="{{asset('uploads/front_end/Mahindra-Logo.png')}}" alt="" class="login-logo-right">
            </div>
            <p class="login-subtitle text-center mt-2">Welcome Back!</p>
        </div>
        
        <form class="user" method="post" action="{{ route('signin') }}">
            @csrf
            
            <div class="form-group-custom">
                <span class="input-icon"><i class="fa fa-user" aria-hidden="true"></i></span>
                <input type="email" class="form-input" placeholder="Enter email" value="{{ old('email') }}" name="email" required>
            </div>
            @error('email')
                <div class="invalid-feedback-custom" style="display: block;">
                    <strong>{{ $message }}</strong>
                </div>
            @enderror
            
            <div class="form-group-custom">
                <span class="input-icon"><i class="fa fa-lock" aria-hidden="true"></i></span>
                <input type="password" class="form-input" placeholder="Enter password" required name="password" id="password-field">
                <span class="password-toggle" onclick="togglePassword()"><i class="fa fa-eye" id="toggle-icon"></i></span>
            </div>
            @error('password')
                <div class="invalid-feedback-custom" style="display: block;">
                    <strong>{{ $message }}</strong>
                </div>
            @enderror
            
            <div class="default-password-warning mt-3 text-center">
                <a href="{{ route('change_password_user') }}" style="color: #bbb; text-decoration: none;">
                    <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>Are you using default password? Change Password
                </a>
            </div>
            
            <div class="d-flex mt-3">
                <button type="submit" class="btn-submit-red">
                    Submit
                </button>
            </div>
        </form>
        

    </div>
    
    <!-- Help Line Footer -->
    <div class="login-card-footer">
        <h4 class="help-title"><i class="fa fa-window-restore mr-2" aria-hidden="true"></i>Help Line</h4>
        <p class="help-desc">in case of any applicaton releted issues/queries, pleace contact us at : </p>
        <p class="help-subtitle"><b>Mahindra Service Desk:</b></p>
        <div class="contact-capsules">
            <div class="contact-btn">
                <i class="fa fa-phone" aria-hidden="true"></i>
                <p>9974191119</p>
            </div>
            <div class="contact-btn">
                <i class="fa fa-phone" aria-hidden="true"></i>
                <p>9687350999</p>
            </div>
        </div>

    </div>
</div>
@endsection

@section('scripts')
<script>
function togglePassword() {
    var passwordField = document.getElementById("password-field");
    var toggleIcon = document.getElementById("toggle-icon");
    if (passwordField.type === "password") {
        passwordField.type = "text";
        toggleIcon.classList.remove("fa-eye");
        toggleIcon.classList.add("fa-eye-slash");
    } else {
        passwordField.type = "password";
        toggleIcon.classList.remove("fa-eye-slash");
        toggleIcon.classList.add("fa-eye");
    }
}
</script>
@endsection