@extends('layouts.backend-app')
@push('styles')
<link rel="stylesheet" type="text/css" href="{{asset('backend-assets/plugins/iziToast/iziToast.min.css')}}">
<style>
    .modal-confirm {
      color: #636363;
      width: 400px;
    }

    .modal-confirm .modal-content {
      padding: 20px;
      border-radius: 5px;
      border: none;
      text-align: center;
      font-size: 14px;
    }

    .modal-confirm .modal-header {
      border-bottom: none;
      position: relative;
    }

    .modal-confirm h4 {
      text-align: center;
      font-size: 26px;
      margin: 30px 0 -10px;
    }

    .modal-confirm .close {
      position: absolute;
      top: -5px;
      right: -2px;
    }

    .modal-confirm .modal-body {
      color: #999;
    }

    .modal-confirm .modal-footer {
      border: none;
      text-align: center;
      border-radius: 5px;
      font-size: 13px;
      padding: 10px 15px 25px;
    }

    .modal-confirm .modal-footer a {
      color: #999;
    }

    .modal-confirm .icon-box {
      width: 80px;
      height: 80px;
      margin: 0 auto;
      border-radius: 50%;
      z-index: 9;
      text-align: center;
      border: 3px solid #f15e5e;
    }

    .modal-confirm .icon-box i {
      color: #f15e5e;
      font-size: 46px;
      display: inline-block;
      margin-top: 13px;
    }

    .modal-confirm .btn {
      border-radius: 4px;
      background: #60c7c1;
      text-decoration: none;
      transition: all 0.4s;
      line-height: normal;
      min-width: 120px;
      border: none;
      min-height: 40px;
      border-radius: 3px;
      margin: 0 5px;
    }

    .modal-confirm .btn-secondary {
      /* background: #c1c1c1; */
      background-color: #ECECEC;
    }

    .modal-confirm .btn-secondary:hover,
    .modal-confirm .btn-secondary:focus {
      /* background: #a8a8a8; */
      background-color: #ECECEC;
      color: #636363;
    }

    .modal-confirm .btn-danger {
      background: #f15e5e;
    }

    .modal-confirm .btn-danger:hover,
    .modal-confirm .btn-danger:focus {
      background: #ee3535;
    }

    .trigger-btn {
      display: inline-block;
      margin: 100px auto;
    }

    .btn-cancel {
      color: #636363;
    }

    .btn-del {
      color: white;
    }
	label.error{
		color: red;
	}
	input.error{
		border: 1px solid red;
	}

  </style>
@endpush
@section('content')
<!-- BEGIN: Content-->
<div class="app-content content">
      <div class="content-wrapper">
        <!-- <div class="content-wrapper-before"></div> -->
        <div class="content-header row">
          <div class="content-header-left col-md-4 col-12 mb-2">
            <h3 class="content-header-title">Users</h3>
          </div>
          <div class="content-header-right col-md-8 col-12">
            <div class="breadcrumbs-top float-md-right">
              <div class="breadcrumb-wrapper mr-1">
                <ol class="breadcrumb">
                  <li class="breadcrumb-item"><a href="index.html" class="breadcrumb-link">Home</a>
                  </li>
                  <li class="breadcrumb-divider">/</li>
                  <li class="breadcrumb-item"><a href="manage-add.html" class="breadcrumb-link">Add Users</a>
                  </li>
                  <!-- <li class="breadcrumb-item active">Basic Tables
                  </li> -->
                </ol>
              </div>
            </div>
          </div>
        </div>
        <div class="content-body"><!-- Basic Tables start -->
<div class="row">
	<div class="col-12">
		<div class="card">
			<div class="card-content collapse show">
				<div class="card-body">
					<div class="table-responsive">
						<!-- Hoverable rows start -->
                        <div class="row">
	                        <div class="col-12">
		                        <div class="card">
			                        <div class="card-header">
				                        <h4 class="card-title"> Add Users</h4>
                                        <!-- <a class="btn btn-bg-gradient-x-purple-blue btn-glow white align-right add-service-btn " href="#" data-toggle="modal"
                                                    data-target="#service-modal">Add Service</a> -->
			</div>
		    <section id="icon-tabs">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-content collapse show">
                                <div class="card-body">
                                    <form action="{{$router}}" autocomplete="off" name="userForm" id="userForm" class="icons-tab-steps" method="post" enctype="multipart/form-data">
                                        @csrf
                                        @if(isset($user->id))
                                          @method('PATCH')
                                        @endif
                                        <fieldset>
                                            <div class="row">            
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="name">Name :</label>
                                                        <input type="text" autocomplete="off" class="form-control" id="user_name" name="user_name" placeholder="Enter Name" value="{{old('user_name',$user->name)}}">
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="email">Email :</label>
                                                        <input type="email" autocomplete="off" class="form-control" id="email" name="email" placeholder="Enter Email" value="{{old('email',$user->email)}}">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="mobile">Mobile Number :</label>
                                                        <input type="tel" autocomplete="off" class="form-control" id="phone" name="phone" value="{{old('phone',$user->phone)}}" placeholder="Enter Mobile Number">
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                      <div class="form-group">
                                                        <label for="status">Users Type :</label>
                                                        <select class="custom-select form-control" id="role_id" name="role_id">
                                                            <option value="" {{(old('role_id',$user->role_id)=='')?'selected':''}}>Select Users Type</option>
                                                            @if(count($roles))
                                                                @foreach($roles as $role)
                                                                <option value="{{$role->id}}" {{(old('role_id',$user->role_id)==$role->id)?'selected':''}}>{{$role->name}}</option>
                                                               
                                                                @endforeach
                                                            @endif

                                                            
                                                        </select>
                                                    </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="pswd">Password :</label>
                                                        <input autocomplete="off" type="password" class="form-control" name="password" id="password" placeholder="Enter Password" value="{{old('cpassword')}}">
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="cpswd">Confirm Password :</label>
                                                        <input autocomplete="off" type="password" class="form-control" id="cpassword" name="cpassword" placeholder="Enter Password" value="{{old('cpassword')}}">
                                                    </div>
                                                </div>
                                            </div>    
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="status">Status :</label>
                                                        <select class="custom-select form-control" id="status" name="status">
                                                            <option value="" {{(old('status',$user->status)=='')?'selected':''}}>Select Status</option>
                                                            <option value="1" {{(old('status',$user->status)==1)?'selected':''}}>Active</option>
                                                            <option value="0" {{(old('status',$user->status)==0)?'selected':''}}>In-Active</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>     
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <button type="submit" id="createuser" class="btn btn-danger">Add User</button>
                                                    </div>
                                                </div>
                                            </div>          
                                        </fieldset>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
        </div>
      </div>
    </div>
    <!-- END: Content-->        
@endsection
@push('javascript')
<!-- BEGIN : Validation Scripts -->
	<script src="{{asset('backend-assets/js/scripts/validation/jquery.validate.min.js')}}" type="text/javascript"></script>
	<script src="{{asset('backend-assets/js/scripts/validation/additional-methods.min.js')}}" type="text/javascript"></script>
	<script src="{{asset('backend-assets/plugins/iziToast/iziToast.min.js')}}" type="text/javascript"></script>
<!-- END:Validation Scripts -->
<script>

$(document).on('click','#createuser',function (e) {
	var formId = "#userForm";
	var thizSelector = $(this);
	// $(this).html('Sending..');
	$("form"+formId).validate({
		errorElement: "label",
		rules: {
			user_name:{required:true},
            email:{required:true,email:true},
            phone:{required:true},
            role_id:{required:true},
            password:{required:true},
            cpassword:{required:true,equalTo:"#password", minlength:6, maxlength:15},
            status:{required:true}
		},
		messages: {
			    user_name: { required: "Please enter user name"},
                email: { required: "Please enter email", email:"Please enter valid email"},
                phone: { required: "Please enter phone number", },
                role_id: { required: "Please select user type", },
                status: { required: "Please select user status", },
                password: { required: "Please enter password", minlength:"Please enter minimum 6 characters", maxlength:"Please enter maximum 15 characters"},
                cpassword: { required: "Please enter confirm password", minlength:"Please enter minimum 6 characters", maxlength:"Please enter maximum 15 characters",
                equalTo:'password and confirm password not match',
            },
		},
		focusInvalid: true,
		invalidHandler: function() {
			$(this).find(":input.error:first").focus();
		},
		errorPlacement: function(error,element) {
			if(element.is(":radio"))
			{
				error.insertAfter(element.parents('checkboxsequence'));
			}
			else if(element.is(":checkbox")){
				// element.parents('.checkboxsequence').css({"color": "red", "border": "2px solid red"});
				error.appendTo(element.parents('.checkboxsequence'));
			}
			else{
				error.insertAfter(element);
			}
		},
		submitHandler:function(e)
		{
			$(formId).submit();
		}

	});
});


</script>
@endpush