@extends('layouts.master')

@section('content')

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

            <div>
                {{ $title }}
            </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 method="post" action="{{  route('users.update',$model->id) }}">
                  @csrf
      @method('PUT')
       
            <input type="hidden" name="id" value="{{$model->id}}">
                  
            <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" value="{{$model->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"
                            value="{{$model->email}}" required>
                        @if ($errors->has('email'))
                        <span class="text-danger">{{ $errors->first('email') }}</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>Tick the payroll or payrolls that {{$model->name}} must access: </strong>
                        <br />
                        @foreach($payrolls as $value)
                        <label>
                            <input type="checkbox" name="payrolls[]" value="{{ $value->code }}"
                                {{ in_array($value->code, $userPayrolls) ? 'checked' : '' }} class="short_description">
                            {{ $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">

                        <strong>Status:<span class="text-danger">*</span></strong>
                        <label><input type="radio" name="status" value="1" {{ $model->status == 1 ? ' checked' : '' }}>
                            Active</label>
                        <label><input type="radio" name="status" value="0" {{ $model->status == 0 ? ' checked' : '' }}>
                            Inactive</label>
                    </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-left">
        <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