@extends('layouts.master')

@section('content')

<div class="app-page-title">
    <div class="page-title-wrapper">
        <div class="page-title-heading">

            <div>
               {{ $title }}
                <div class="page-title-subheading">View for adding a user</div>
               
            </div>


        </div>

    </div>
    @if(isset($error) || session('error'))
    <div class="alert alert-danger">
        {{ $error ?? session('error') }}
    </div>
    @endif

    @if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
    @endif
</div>

<div class="main-card mb-3 card">
    <div class="card-body">
        <a href="{{ route('users.index') }}"> <i class="fa fa-arrow-left"></i></a>

        <form id="userForm" action="{{ route('users.store') }}" method="POST">
            @csrf

            <div class="row">
                <div class="col-xs-6 col-sm-6 col-md-6">
                    <div class="form-group mb-3">
                        <strong>Name: <span class="text-danger">*</span></strong>
                        <input type="text" name="name" class="form-control"
                            placeholder="Name" required>
                        @if ($errors->has('name'))
                        <span class="text-danger">{{ $errors->first('name') }}</span>
                        @endif
                    </div>

                    <div class="form-group mb-3">
                        <strong>Email: <span class="text-danger">*</span></strong>
                        <input type="text" name="email" class="form-control"
                            placeholder="Email"   pattern=".+@unza.zm" required>
                        @if ($errors->has('email'))
                        <span class="text-danger">{{ $errors->first('email') }}</span>
                        @endif
                    </div>

                    <div class="form-group mb-3">
                        <strong>Password: <span class="text-danger">*</span></strong>
                        <div class="input-group">
                            <input id="password" type="password" name="password" class="form-control"
                                placeholder="Password" required>
                            <div class="input-group-append" style="margin-left: 5px;">
                                <button class="btn btn-outline-secondary" type="button"
                                    onclick="togglePasswordVisibility('password')">Show</button>
                            </div>
                        </div>
                        @if ($errors->has('password'))
                        <span class="text-danger">{{ $errors->first('password') }}</span>
                        @endif
                    </div>

                    <div class="form-group mb-3">
                        <strong>Confirm Password: <span class="text-danger">*</span></strong>
                        <div class="input-group">
                            <input id="confirm_password" type="password" name="confirm_password" class="form-control"
                                placeholder="Confirm Password" onkeyup="validatePassword()" required>
                            <div class="input-group-append" style="margin-left: 5px;">
                                <button class="btn btn-outline-secondary" type="button"
                                    onclick="togglePasswordVisibility('confirm_password')">Show</button>
                            </div>
                        </div>
                        <span id="passwordMatch" class="text-danger"></span>
                        @if ($errors->has('confirm_password'))
                        <span class="text-danger">{{ $errors->first('confirm_password') }}</span>
                        @endif
                    </div>
                
                    <div class="form-group mb-3">
                        <strong>Role: <span class="text-danger">*</span></strong>
                        {!! Form::select('roles[]', $roles,[], array('class' => 'form-control', 'required')) !!}
                        @if ($errors->has('roles'))
                        <span class="text-danger">{{ $errors->first('roles') }}</span>
                        @endif
                    </div>

                    <div class="form-group mb-3">
                        <strong>Payrolls that a user can access: </strong>
                        <br />
                        @foreach($payrolls as $value) <label>

                            {{ Form::checkbox('payrolls[]', $value->code) }}
                            {{ $value->short_description }}
                        </label>
                        <br />
                        @endforeach
                        @if ($errors->has('payrolls'))
                        <span class="text-danger">{{ $errors->first('payrolls') }}</span>
                        @endif
                    </div>
                    <div class="form-group mb-3">
                        <label class="form-label" for="status">Status <span class="text-danger">*</span></label>
                        <br>
                        <label><input type="radio" name="status" value="1" required> Active</label>
                        <label><input type="radio" name="status" value="0" required> Inactive</label>
                        @if ($errors->has('status'))
                        <span class="text-danger">{{ $errors->first('status') }}</span>
                        @endif
                    </div>
                </div>
            

            <div class="col-xs-6 col-sm-6 col-md-6">
                <h5>Instructions:</h5>
                <ul>
                    <li>Name: Enter the user's full name.</li>
                    <li>Email: Enter a valid email address. The email address is the username.</li>
                    <li>Password: Create a password for the user. <span class="text-danger">*</span></li>
                    <li>Confirm Password: Re-enter the password to confirm. <span class="text-danger">*</span></li>
                    <li>Password Complexity: Password must be at least 8 characters long and must contain at least one
                        uppercase letter, one lowercase letter, one digit, and one special character.</li>
                    <li>Password Visibility: Click the "Show" button to view the password.</li>
                    <li>Role: Select the role(s) for the user. <span class="text-danger">*</span></li>
                    <li>Status: Select the status of the user (Active or Inactive). <span class="text-danger">*</span>
                    </li>
                    <li>Payrolls that User can Access: Check the payrolls that the user can access.</li>
                </ul>
            </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </form>
    </div>
</div>

@endsection
@section('scripts')
<script>
    // Script to toggle password visibility
    function togglePasswordVisibility(inputId) {
        var input = document.getElementById(inputId);

        if (input.type === "password") {
            input.type = "text";
        } else {
            input.type = "password";
        }
    }

    // Function to validate password and confirm password
    function validatePassword() {
        var password = document.getElementById('password').value;
        var confirmPassword = document.getElementById('confirm_password').value;
        var passwordMatch = document.getElementById('passwordMatch');

        if (password !== confirmPassword) {
            passwordMatch.textContent = "Password and Confirm Password do not match";
        } else {
            passwordMatch.textContent = "";
        }
    }

    // Attach the validatePassword function to input event of the confirm password field
    document.getElementById('confirm_password').oninput = validatePassword;
</script>
@endsection