<div class="modal fade" id="add-user-modal" tabindex="-1" role="dialog" aria-labelledby="activate-user-modal"
    aria-modal="true">
    <div class="modal-dialog modal-dialog-centered  modal-lg" role="document">
        <div class="modal-content custom-rounded-edges">
            <div class="modal-header">
                <h5 class="modal-title ml-2" id="exampleModalLongTitle">
                    <i class="fa-solid fa-user mx-2"></i>
                    User Details
                </h5>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <form action="{{ route('users.store') }}" method="POST" id="add-user-form">

                <div class="modal-body mx-3 my-2">

                    <div class="row">
                        <div class="col-md-6">
                            @csrf

                            <div class="form-group">
                                <label for="first_name">First Name</label>
                                <input type="text" class="form-control" id="first_name" name="first_name">
                            </div>
                            <div class="form-group">
                                <label for="user_name">User Name</label>
                                <input type="text" class="form-control" id="user_name" name="user_name">
                            </div>
                            <div class="form-group">
                                <label for="email">Email</label>
                                <input type="text" class="form-control" id="email" name="Email">
                            </div>
                            <div class="form-group">
                                <label for="email">Phone</label>
                                <input type="text" class="form-control" id="phone" name="Phone">
                            </div>
                            <div class="form-group">
                                <label for="email_confirm">Email Confirmation</label>
                                <select class="form-control" id="email-confirmation" name="email_confirm">
                                    <option value="yes">User verified his email</option>
                                    <option value="no">User didn't verify his email</option>
                                </select>
                            </div>
                            <div class="form-group form-check">
                                <input type="checkbox" class="form-check-input" id="sendInvitationEmail"
                                    name="send_invitaion" checked>
                                <label class="form-check-label" for="sendInvitationEmail">Send Invitation Email</label>
                            </div>
                            <div class="form-group form-check">
                                <input type="checkbox" class="form-check-input" id="sendEmailActivation"
                                    name="send_activation" checked>
                                <label class="form-check-label" for="sendEmailActivation">Send Email
                                    Activation</label>
                            </div>
                        </div>
                        <div class="col-md-6">

                            <div class="form-group">
                                <label for="last_name">Last Name</label>
                                <input type="text" class="form-control" id="last_name" name="last_name">
                            </div>
                            <div class="form-group">
                                <label for="role">Role</label>
                                <select class="form-control" id="role" name="role">
                                    <option value="">Select Role</option>
                                    <option value="user">User</option>
                                    <option value="admin">Admin</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="group">Group</label>
                                <select class="form-control" id="group" name="group">
                                    <option value="">Select Group</option>

                                    @foreach ($groups as $group)
                                    <option value="{{ $group->group_ID }}">{{ $group->name }}</option>

                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="status">Status</label>
                                <select class="form-control" id="status" name="status">
                                    <option value="">Select Status</option>
                                    <option value="active">Active</option>
                                    <option value="pended">Pended</option>
                                    <option value="blocked">Blocked</option>
                                </select>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="modal-footer justify-content-center">
                    <div class="text-center">
                        <button type="button" id="saveBtn-add-user" class="btn btn-primary mx-2 px-5 py-2">
                            Save
                        </button>
                        <button type="button" id="cancelBtn-add-user" class="btn btn-light mx-2 px-5 py-2"
                            data-dismiss="modal">
                            Cancel
                        </button>
                        <div class="mt-3">
                            <div id="add-user-confirm" class="alert bootstrap-alert-success mx-4 mb-3" role="alert"
                                style="display: none">
                            </div>
                            <div id="add-user-error" class="alert bootstrap-alert-danger mx-4 mb-3" role="alert"
                                style="display: none">
                            </div>
                        </div>

                    </div>

                </div>
            </form>

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