@extends('superadmin.layout.main')

<style>
    .border-red{
        border: 2px solid red;
    }
</style>

<!-- Page header -->
@section('page-header')
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <!-- Page pre-title -->
                    <div class="page-pretitle">
                        Store
                    </div>
                    <h2 class="page-title">
                        Credentials
                    </h2>
                </div>
                <!-- Page title actions -->
                <div class="col-auto ms-auto d-print-none">
                    <div class="btn-list">
                        <span class="d-none d-sm-inline">
                            <a href="{{ route('admin.dashboard') }}" class="btn btn-primary">
                                {!! $GO_BACK !!} Go Back
                            </a>
                        </span>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('main-container')

    <div class="row">
        <div class="col-sm-12 mt-5">
            @if ($errors->any())
                <div class="card">
                    <div class="card-body">
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>        
            @endif
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    
                    <h2 class="mb-0">Credentials Manager</h2>
                    
                </div>
                <div class="card-body">
                    
                    <form method="POST" id="form-id" autocomplete="off">
                        @csrf

                        <!-- Email -->
                        <div class="mb-4">
                            <label class="form-label"> Email </label> 
                            <input type="email" id="email" class="form-control" name="email" value="{{auth()->user()->email}}" required="required" placeholder="Email">
                            @error('email')
                                {{$message}}
                            @enderror
                        </div>

                        <!-- Current Password -->
                        <div class="mb-4">
                            <label class="form-label"> Current Password </label> 
                            <input placeholder="Current Password" autocomplete="new-password" value="" type="password" id="currentPassword" class="form-control" name="current_password" required="required">
                            @error('current_password')
                                {{$message}}
                            @enderror
                        </div>
                        
                        <!-- New Password -->
                        <div class="mb-4">
                            <label class="form-label"> New Password </label> 
                            <input placeholder="New Password" autocomplete="new-password" value="" type="password" id="newPassword" class="form-control" name="new_password" required="required">
                            @error('new_password')
                                {{$message}}
                            @enderror
                        </div>
                        
                        <!-- Confirm Password -->
                        <div class="mb-4">
                            <label class="form-label"> Confirm New Password </label> 
                            <input placeholder="Confirm New Password" autocomplete="new-password" value="" type="password" id="confirmPassword" class="form-control" name="confirm_password" required="required">
                            <div class="text text-danger mt-1" id="passwordError"></div>
                            @error('confirm_password')
                                {{$message}}
                            @enderror
                        </div>

                        <!-- Submit Button -->
                        <div class="mt-4">
                            <button type="submit" class="btn btn-success mt-4 form_submit" action="update" url = {{route('admin.auth.credentials')}}> {!! $CHECK !!} Update Settings</button>
                        </div>
                    </form>
                    
                </div>
            </div>
        </div>
    </div>

    
@endsection

@section('script')
    
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var passwordFields = document.querySelectorAll('input[type="password"]');
        passwordFields.forEach(function(field) {
            field.setAttribute('autocomplete', 'new-password');
        });
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var form = document.getElementById('form-id');
        var confirmPasswordField = document.getElementById('confirmPassword');
        var passwordError = document.getElementById('passwordError');

        var submitButton = form.querySelector('button[type="submit"]');

        confirmPasswordField.addEventListener('input', function() {
            var newPassword = document.getElementById('newPassword').value;
            var confirmPassword = confirmPasswordField.value;

            if (confirmPassword.length === newPassword.length || confirmPassword.length > newPassword.length) {
            if (newPassword !== confirmPassword) {
                passwordError.textContent = 'New password and confirm password do not match.';
                confirmPasswordField.classList.add('border-red');
                submitButton.disabled = true;
            } else {
                passwordError.textContent = '';
                confirmPasswordField.classList.remove('border-red');
                submitButton.disabled = false;
            }
            } else {
            passwordError.textContent = '';
            confirmPasswordField.classList.remove('border-red');
            submitButton.disabled = false;
            }
        });
    });
</script>
@endsection