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

@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">Reset Password</h5>
            <p>Reset your password for {{ \Config::get('settings.company_name') }}.</p>
        </div>        
    </div>    
</div>
<div class="card-body pt-0">    
    <div class="p-2">
        {{ html()->form('POST', route('password.update'))->attributes(['class' => 'form-horizontal'])->open() }}
            <input type="hidden" name="token" value="{{ $token }}">
            @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 Address</label>
                        <input type="email" class="form-control" name="email" value="{{ $email ?? old('email') }}" id="email" placeholder="Enter your email address" aria-required="true"{{ $errors->has('email') ? ' aria-invalid="true"' : '' }} required readonly>                    
                        @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">New Password</label>
                        <div class="password-input-wrapper" style="position: relative;">
                            <input type="password" class="form-control" name="password" id="password" placeholder="Enter new password" aria-required="true"{{ $errors->has('password') ? ' aria-invalid="true"' : '' }} required style="padding-right: 40px;">
                            <button type="button" class="password-toggle-btn" onclick="togglePasswordVisibility('password')" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: none; cursor: pointer; color: #6c757d;">
                                <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="col-lg-12 col-md-12">
                    <div class="mb-3">
                        <label for="password-confirm" class="form-label">Confirm Password</label>
                        <div class="password-input-wrapper" style="position: relative;">
                            <input type="password" class="form-control" name="password_confirmation" id="password-confirm" placeholder="Confirm new password" aria-required="true" required style="padding-right: 40px;">
                            <button type="button" class="password-toggle-btn" onclick="togglePasswordVisibility('password-confirm')" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: none; cursor: pointer; color: #6c757d;">
                                <i class="fas fa-eye" id="password-confirm-toggle-icon"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="mt-3">
                    <button class="btn btn-primary btn-block waves-effect waves-light" type="submit">Reset Password</button>
                </div>
            </div>
            <div class="mt-4 text-center">
                <a href="{{route('login')}}" class="text-muted"><i class="mdi mdi-arrow-left mr-1"></i> Back to Login</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