@extends('dashboard/layout.app')
@section('title', 'BettrAi | CCC Team')
@section('content') 
<div class="d-flex flex-column-fluid">
    <div class="container">
                <div class="card card-custom gutter-b card-stretch">
            <div class="card-header border-0 py-5">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label font-weight-bolder text-dark">{{ $title }} CCC Team </span>
                </h3>
                <div class="card-toolbar">
                    <a href="{{ url('/customerCareUsers') }}" class="btn btn-light-primary font-weight-bold mr-5 showloader">Back to list</a>
                </div>
            </div>
            <div class="card-body py-0">
                <!--begin::Table-->
                <form name="user_form" id="user_form" method="post" autocomplete="off">
                    <input type="hidden" name="form_user_id" id="form_user_id"	value="{{ $facility_user_id }}">
                    <div class="form-group row">
                        <div class="col-lg-4 mb-2">
                            <label class="white-small-f fleft100">User Name: <span class="text-danger">*</span></label>								
                            <input type="text" name="username" id="username" value="" class="form-control" autocomplete="off" required="required" onblur="validate_username()">						
                        </div>
                        <div class="col-lg-4 mb-2">
                            <label class="white-small-f fleft100">Password&nbsp;&nbsp;(Enter At Least 8 Characters) <span class="text-danger">*</span></label>
                            <input type="password" name="userpassword" id="userpassword" value="" class="form-control" required="required" maxLength="50">									
                        </div>
                        <div class="col-lg-4 mb-2">
                            <label class="white-small-f fleft100">Re-Enter Password: <span class="text-danger">*</span></label>
                            <input type="password" name="Reenterpassword" id="Reenterpassword" value="" class="form-control" required="required" maxLength="50">		
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-4 mb-2">
                            <label class="white-small-f fleft100">Last Name: <span class="text-danger">*</span></label>
                            <input type="text" name="Last_name" id="Last_name" value="" class="form-control" style="" maxLength="50" required="required">						
                        </div>
                        <div class="col-lg-4 mb-2">
                            <label class="white-small-f fleft100">Middle Name:</label>
                            <input type="text" name="Middle_Name" id="Middle_Name" value="" style="" maxLength="50" class="form-control">	
                        </div>
                        <div class="col-lg-4 mb-2">
                            <label class="white-small-f fleft100">First Name: <span class="text-danger">*</span></label>
                            <input type="text" name="First_name" id="First_name" value="" style="" required="required" class="form-control">	
                        </div>
                    </div>
                    <div class="form-group row">
                        <!-- Add user -->
                        <div class="col-lg-4 mb-2 condition_class" id="role_div">
                            <label class="white-small-f fleft100">Role: <span class="text-danger">*</span></label>
                            <select id="role" name="role" class="form-control" required="required" onchange="hide_organizations(this.value);">	
                                <option value="">Select Role</option>										
                                                            </select>	
                        </div>
                                                    <div class="col-lg-4 mb-2" id="orgs_div">		
                                                    <label class="white-small-f fleft100">Select Organizations:<span class="text-danger">*</span></label>
                            <select id="select_department" name="select_department[]" multiple="multiple" class="form-control" required="required">											
                                                        </select>	
                        </div>

                        <div class="col-lg-4 mb-2" id="sub_orgs_div" style="display:none;">
                            <label class="white-small-f fleft100">Select Client Organizations:</label>
                            <select id="selected_sub_department" name="selected_sub_department[]" multiple="multiple" class="form-control">
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-4 mb-2">
                            <label class="white-small-f fleft100">Address:</label>
                            <input type="text" name="user_Address1" id="user_Address1" value="" class="form-control">	
                        </div>
                        <div class="col-lg-4 mb-2">
                            <label class="white-small-f fleft100">City:</label>
                            <input type="text" name="user_city" id="user_city" value="" class="form-control">						
                        </div>
                        <div class="col-lg-4 mb-2">
                            <label class="white-small-f fleft100">State:</label>
                            <input type="text" name="user_state" id="user_state" value="" class="form-control">								
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-4 mb-2">
                            <label class="white-small-f fleft100">Country:</label>
                            <input type="text" name="user_country" id="user_country" value="USA" readonly="readonly" class="form-control">		
                        </div>
                        <div class="col-lg-4 mb-2">	
                            <label class="white-small-f fleft100">Zip Code:</label>
                            <input type="text" name="user_Zip_Code" id="user_Zip_Code" value="" style="" maxLength="5" class="form-control">						
                        </div>
                        <div class="col-lg-4 mb-2">
                            <label class="white-small-f fleft100">Email Address: </label>
                            <input type="text" name="user_email" id="user_email" value="" class="form-control" autocomplete="off">						
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-4 mb-2">
                            <label class="white-small-f fleft100">Cell Phone:&nbsp;&nbsp;(Enter 10 digit number) </label>
                            <input type="text" name="user_Cell_Phone" id="user_Cell_Phone" value="" maxLength="12" class="form-control masked_phone"><br/>
                        </div>
                        <div class="col-lg-4 mb-2">
                            <label class="white-small-f fleft100">Select Carrier:</label>
                            <select name="phone_carrier" id="phone_carrier" maxLength="50" class="form-control">
                                                            </select>
                        </div>
                        <div class="col-lg-4 mb-2">
                            <label class="white-small-f fleft100" style="margin-top: 18px;">Status:
                            <label><input type="radio" name="userStatus" id="userStatus-1" value="1" checked="checked">Active</label> 
                            <label><input type="radio" name="userStatus" id="userStatus-0" value="0" >Inactive</label></label>
                        </div>
                    </div>
                    <div style="float: left; width: 100%; text-align: center" class="mb-10">
                        <button type="button" class="btn btn-light-primary font-weight-bold mr-3" onclick="saveUserForm()">Save</button>
                        @if($facility_user_id=='')
                            <button type="reset" class="btn btn-light-warning font-weight-bold mr-3" onclick="resetUserForm()">Reset</button>
                        @endif
                        <a href="{{ url('/customerCareUsers') }}" class="btn btn-light-danger font-weight-bold showloader">Cancel</a>
                    </div>
                </form>
                <!--end::Table-->
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
var facility_id_param = '{{ $facility_id }}';
var form_user_id = '{{ $facility_user_id }}';
var role =  '';
var parent_facility =  '';
var parent_sub_facility =  '';
$(document).ready(function(){
    $(".tabloadershow").hide();
    $('#user_Cell_Phone').inputmask({
        mask: '999-999-9999',                
        showMaskOnFocus: false,
        showMaskOnHover: false        
    });
    if(role=='Administrators' && parent_facility=='1' && parent_sub_facility=='1'){
        $('#select_department').change(function() {
            var client_ids = [];
            var sub_client_ids = [];
            $('option:selected', $(this)).each(function() {
                var selected_val = $(this).val();
                var parent_id = $(this).attr('data-parent-id');
                // alert(selected_val);
                // alert(parent_id);
                if(parent_id!=1){
                    client_ids.push(parent_id);
                }
            });
            var sub_fac_values = $('#selected_sub_department').val();
            var sub_fac_len = sub_fac_values.length;
            for(sf=0;sf<sub_fac_len;sf++){
                sub_client_ids.push(sub_fac_values[sf]);
            }
            console.log(client_ids);
            var client_ids_str = client_ids.join(',');
            var sub_client_ids_str = sub_client_ids.join(',');
            if(client_ids_str!=''){
                get_client_subfacilities(client_ids_str,sub_client_ids_str);
            }
        });
    }
});

function get_client_subfacilities(client_ids_str,sub_client_ids_str){
	if(client_ids_str!=''){
        $(".tabloadershow").show();
		$.ajax({
			type : "POST",
			url : "{{ url('/getclientfacilities') }}",
			data : {"client_ids_str":client_ids_str,'_token':'{{csrf_token()}}'},
			success : function(result){	
                $(".tabloadershow").hide();
				$('#sub_orgs_div').show();
				$('#selected_sub_department').html(result);	
				var sub_client_ids_array = sub_client_ids_str.split(","); 	
				for(i=0;i<sub_client_ids_array.length;i++){
					$('#selected_sub_department option[value="'+sub_client_ids_array[i]+'"]').prop('selected',true);
				}	        			    			
				
			}
		});
	}
}

function hide_organizations(role){
	if(role=='Administrators'){
		$('#orgs_div').hide();
		$('#sub_orgs_div').hide();
	} else {
		$('#orgs_div').show();
	}
}

function saveUserForm(){
    var form_user_id = $('#form_user_id').val();
    var username = $('#username').val();
    var userpassword = $('#userpassword').val();
    var Reenterpassword = $('#Reenterpassword').val();
    var Last_name = $('#Last_name').val();
    var First_name = $('#First_name').val();
    var role = $('#role').val();
    var selected_department_array = $('#select_department').val();

    var user_Zip_Code = $('#user_Zip_Code').val();
    var user_email = $('#user_email').val();
    var user_Cell_Phone = $('#user_Cell_Phone').val();
    if(username==''){
        swal("Please enter username");
        return false;
    }
    if(username.indexOf(' ') !== -1){
        swal("Please enter valid username");
        return false;
    }
    if(form_user_id=='' && userpassword==''){
        swal("Please enter password");
        return false;
    }
    if(userpassword != "" && userpassword.length < 8) {
        swal("Password must be at least 8 characters");
        return false;
    }
    if(userpassword != "" && userpassword.length >= 8) {
        var re = /^(?=.*\d)(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
        if(!re.test(userpassword)) {
            swal("Password should contain at least one number and one special character, one digit and one upper case");
            return false;
        }
    }
    if(form_user_id=='' && Reenterpassword == "" ) {
        swal("Please re-enter password");
        return false;
    }
    if(userpassword != "" && Reenterpassword!='' && userpassword!=Reenterpassword) {
        swal("New password and re-enter password must be same");
        return false;
    }
    if(Last_name==''){
        swal("Please enter last name");
        return false;
    }
    if(First_name==''){
        swal("Please enter first name");
        return false;
    }
    if(role==''){
        swal("Please select role");
        return false;
    }
    if(selected_department_array.length==0){
        swal("Please select atleast one Organization");
        return false;
    }

    if(user_Zip_Code!='' && isNaN(user_Zip_Code)){
        swal("Please select valid zip code");
        return false;
    }
    if(user_email!='' && !validateUserEmail(user_email)) { 
        swal("Please enter valid Email ID");
        return false;
    }
    if(user_Cell_Phone!=''){
        var dept_phone1 = user_Cell_Phone.replace(/\D/g, '');
        if (dept_phone1.length !== 10) {
            swal('Please enter valid phone number');
            return false;
        }
    }
    var update_url = "{{ url('/saveUserDetails') }}";
    var formData = new FormData();
    formData = new FormData($('#user_form')[0]);
    formData.append( "_token", '{{csrf_token()}}' );
    formData.append( "param_facility_id", facility_id_param);
    $(".tabloadershow").show();
    $.ajax({
        url:update_url,
        type:'POST',
        data: formData,
        contentType: false,
        processData: false,
        success:function(result){
            $(".tabloadershow").hide();
            if(result=='exists'){
                swal("User name already exists. Please enter a different username");
                return false;
            } else if(result=='success'){
                window.location.href = "{{ url('/customerCareUsers') }}";
            }else {
                swal("Something went wrong please try again");
                return false;
            }
        }
    });
}

function validate_username(){
    var username = $.trim($('#username').val());
    var form_user_id = $('#form_user_id').val();
    if(username!=''){
        $.ajax({
            type : "GET",
            url : "{{ url('/validateUsername') }}",
            data : {"username":username, "user_id":form_user_id},
            success : function(result){	
                if(result=='exists'){
                    swal("User name already exists. Please enter a different username");
                    return false;
                }
            }
        });
    }
}

function validateUserEmail($email) {
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    return emailReg.test( $email );
}
</script>
@endsection