@extends('layouts.master')

<style>
    .card-body {
    flex: 1 1 auto;
    min-height: 1px;
    padding: 0.75rem!important;
}
ul {
    list-style: none;
    padding: 0;
}

li {
    margin-bottom: 10px;
}
</style>
@section('content')

<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-xl-12 col-md-12 mb-4">
            <div class="card">
                <div class="card-header text-white bg-primary align-items-center d-flex" style="justify-content: space-between;"><strong>Register Users</strong></div>
                <div class="card-body">
                    <form method="POST" action="{{ route('store.users') }}">
                        @csrf
                    
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="first_name">First Name</label> <span class="text-danger">*</span>
                                <input id="first_name" type="text" class="form-control form-control-user @error('first_name') is-invalid @enderror" name="first_name" value="{{ old('first_name') }}" required autocomplete="first_name" placeholder="Enter First Name" autofocus>
                    
                                @error('first_name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                    
                            <div class="form-group col-md-6">
                                <label for="last_name">Last Name</label> <span class="text-danger">*</span>
                                <input id="last_name" type="text" class="form-control form-control-user @error('last_name') is-invalid @enderror" name="last_name" value="{{ old('last_name') }}" required autocomplete="last_name" placeholder="Enter Last Name" autofocus>
                    
                                @error('last_name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="mobileno">Mobile Number</label> <span class="text-danger">*</span>
                                <input id="mobileno" type="number" class="form-control form-control-user @error('mobileno') is-invalid @enderror" name="mobileno" value="{{ old('mobileno') }}" required autocomplete="mobileno" placeholder="Enter Mobile Number" autofocus>
                    
                                @error('mobileno')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                    
                            <div class="form-group col-md-6">
                                <label for="email">Email Address</label> <span class="text-danger">*</span>
                                <input id="email" type="email" class="form-control form-control-user @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus placeholder="Enter Email Address.">
                    
                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="form-row">
                            
                            <div class="form-group col-md-6">
                                <label for="gender">Gender</label> <span class="text-danger">*</span>
                                <select id="gender" name="gender" class="form-control" required>
                                    <option value="">Select gender</option>
                                    <option value="Male">Male</option>
                                    <option value="Female">Female</option>
                                    {{-- <option value="Others">Others</option> --}}
                                </select>
                                @error('gender')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="form-group col-md-6">
                                <label for="EmployeeId">Employee ID</label> <span class="text-danger">*</span>
                                <input id="empid" type="text" class="form-control form-control-user @error('empid') is-invalid @enderror" name="empid" value="{{ old('empid') }}" required autocomplete="empid" autofocus placeholder="Enter Employee Id">
    
                                    @error('empid')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                            </div>
                            
                        </div>
                        
                        <div class="form-row">
                            
                            <div class="form-group col-md-6">
                                <label for="username">Username</label> <span class="text-danger">*</span>
                                <input id="username" type="text" class="form-control form-control-user @error('username') is-invalid @enderror" name="username" required autocomplete="username" placeholder="Enter Username">
    
                                @error('username')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="form-group col-md-6">
                                <label for="password">Password</label> <span class="text-danger">*</span>
                                <div class="input-group">
                                    <input id="password" type="password" class="form-control form-control-user @error('password') is-invalid @enderror" name="password" required autocomplete="current-password" placeholder="Enter Password">
                                    <div class="input-group-append">
                                        <span class="input-group-text" id="show-password-toggle">
                                            <i class="fa fa-eye" aria-hidden="true"></i>
                                        </span>
                                    </div>
                                </div>
                            
                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            
                        </div>
                        
                        <div class="form-row">
                            
                            <div class="form-group col-md-6">
                                <label for="confirm_password">Confirm Password</label> <span class="text-danger">*</span>
                                <div class="input-group">
                                    <input id="password-confirm" type="password" class="form-control form-control-user" name="password_confirmation" required autocomplete="new-password" placeholder="Enter Confirm password">
                                    <div class="input-group-append">
                                        <span id="show-confirm-password-toggle" class="input-group-text">
                                            <i class="fas fa-eye" aria-hidden="true"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group col-md-6">
                                <label for="role">Role</label> <span class="text-danger">*</span>
                                <select id="role" name="role" class="form-control" required>
                                    <option value="">Select User Type</option>
                                    <option value="staff">Staff</option>
                                    <option value="hod">Head of Department (HOD)</option>
                                    <option value="admin">Admin</option>
                                </select>
                                @error('role')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>    
                            
                            
                        </div>
                        
                        <div class="form-row">
                            
                            <div class="form-group col-md-6 department" id="department" style="display: none">
                                <lable for="Department">Department</lable> <span class="text-danger">*</span>
                                <select id="dept" name="dept" class="form-control">
                                    <option value="">Select Department</option>
                                    @foreach($department as $dept)
                                        <option value="{{$dept->name}}">{{$dept->name}}</option>
                                    @endforeach
                                </select>
                                @error('dept')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            
                        </div>
                    
                        <div class="row">
                            <div class="col-md-6 mb-2">
                                <button class="btn btn-primary btn-user btn-sm" style="float:right;">Register</button>
                            </div>
                            <div class="col-md-6 mb-2">
                                <a href="{{route('list.users')}}" class="btn btn-secondary btn-user btn-sm">Cancel</a>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>

    <script>
        const userRoleSelect = document.getElementById('role');
        const departmentSection = document.getElementById('department');

        userRoleSelect.addEventListener('change', function () {
            if (userRoleSelect.value === 'hod') {
                // Show the department dropdown section for the 'hod' role
                departmentSection.style.display = 'block';
            } else {
                // Hide the department dropdown section for other roles
                departmentSection.style.display = 'none';
            }
        });
    </script>
    
    <script>
        document.getElementById('show-password-toggle').addEventListener('click', function () {
            var passwordInput = document.getElementById('password');
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                this.innerHTML = '<i class="fas fa-eye-slash" aria-hidden="true"></i>';
            } else {
                passwordInput.type = 'password';
                this.innerHTML = '<i class="fas fa-eye" aria-hidden="true"></i>';
            }
        });
    </script>
    
    <script>
        document.getElementById('show-confirm-password-toggle').addEventListener('click', function () {
            var confirmPasswordInput = document.getElementById('password-confirm');
            if (confirmPasswordInput.type === 'password') {
                confirmPasswordInput.type = 'text';
                this.innerHTML = '<i class="fas fa-eye-slash" aria-hidden="true"></i>';
            } else {
                confirmPasswordInput.type = 'password';
                this.innerHTML = '<i class="fas fa-eye" aria-hidden="true"></i>';
            }
        });
    </script>

</div>

@endsection