@extends('template.master')
@section('title', 'Add/Edit User')

@section('content')
<div class=" mt-4">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card card-secondary">
                <div class="card-header" style="background: #000000;color: #f0ac63 !important;">
                    <h4 class="card-title" style="color: #f0ac63 !important;"><strong>Add/Edit Users</strong></h4>
                    <a href="{{ route('users.list') }}" class="btn float-right" style="background: #f0ac63;color: #000000 !important;">Back</a>
                </div>
                <div class="card-body">
                    <form class="form" id="taxo-form" action="{{ route('users.add') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" class="form-control" id="id" name="id" value="{{ @$user->id }}">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="first_name" class="mt-2">First Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name" value="{{ isset($user->first_name) ? @$user->first_name : old('first_name') }}">
                                    @if($errors->has('first_name'))
                                    <div class="error">{{ $errors->first('first_name') }}</div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="first_name" class="mt-2">Last Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name" value="{{ isset($user->last_name) ? @$user->last_name : old('last_name') }}">
                                    @if($errors->has('last_name'))
                                    <div class="error">{{ $errors->first('last_name') }}</div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="phone_number" class="mt-2">Phone  <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control" id="phone_number" name="phone_number" placeholder="Phone"  value="{{ isset($user->phone_number) ? @$user->phone_number : old('phone_number') }}">
                                    @if($errors->has('phone_number'))
                                    <div class="error">{{ $errors->first('phone_number') }}</div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="email" class="mt-2">Email <span class="text-danger">*</span></label>
                                    <input type="email" class="form-control" id="email" name="email" placeholder="Email" value="{{ isset($user->email) ? @$user->email : old('email') }}">
                                    @if($errors->has('email'))
                                    <div class="error">{{ $errors->first('email') }}</div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="email" class="mt-2">Password</label>
                                    <input type="password" class="form-control" id="password" name="password" placeholder="Password" value="">
                                    @if($errors->has('password'))
                                    <div class="error">{{ $errors->first('password') }}</div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="email" class="mt-2">Confirm Password</label>
                                    <input type="password" class="form-control" id="c_password" name="c_password" placeholder="Confirm Password">
                                    @if($errors->has('c_password'))
                                    <div class="error">{{ $errors->first('c_password') }}</div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label><strong>Role</strong></label>
                                    <select id="user_role" name="user_role" class="form-control">
                                        <option value="1" {{ @$user->user_role == 1 ? 'selected' : (old('user_role') == 1 ? 'selected' : '') }}>Admin</option>
                                        <option value="2" {{ @$user->user_role == 2 ? 'selected' : (old('user_role') == 2 ? 'selected' : '') }}>Assistant</option>
                                    </select>
                                    @if($errors->has('user_role'))
                                    <div class="error">{{ $errors->first('user_role') }}</div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group clearfix">
                                    <label style="display:block;"><strong>Status</strong></label>
                                    <div class="icheck-success d-inline">
                                        <input type="radio" name="user_status" value="1" id="radioSuccess1" {{  (isset($user->user_status)) && @$user->user_status == 1? "checked" :"" }} checked>
                                        <label for="radioSuccess1">
                                            Active
                                        </label>
                                    </div>
                                    <div class="icheck-danger d-inline">
                                        <input type="radio" name="user_status" value="0" id="radioDanger2" {{ (isset($user->user_status)) && @$user->user_status == 0? "checked" : "" }}>
                                        <label for="radioDanger2">
                                            Inactive
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn mr-2 mt-5" id="submitTaxo" style="background: #000000;color: #f0ac63 !important;">Submit</button>
                        <a class="btn btn-light mt-5" href="{{url('/users-list')}}">Cancel</a>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('child-scripts')
<script>
    $(function() {
        $("#taxo-form").validate({
            errorElement: "span",
            errorClass: "error",
            ignore: '.note-editor *',
            rules: {
                first_name: {
                    required: true,
                    maxlength: 255
                },
                last_name: {
                    required: true,
                    maxlength: 255
                },
                phone_number: {
                    required: true,
                    minlength: 10,
                    maxlength: 10
                },
                email: {
                    required: true,
                    email: true,
                    maxlength: 255
                },
                password: {
                    required: {
                        depends: function(element) {
                            return ($("#id").val() == '');
                        },
                    },
                    minlength:6,
                    maxlength: 255
                },
                c_password: {
                    required: {
                        depends: function(element) {
                            return ($("#id").val() == '');
                        },
                    },
                    minlength:6,
                    maxlength: 255,
                    equalTo: "#password"
                }
            },
            messages: {
                first_name: {
                    required: 'First name required.',
                },
                last_name: {
                    required: 'Last name required.',
                },
                phone_number: {
                    required: 'Phone required.',
                },
                email: {
                    required: 'Email required.',
                },
                password: {
                    required: 'Password required.',
                },
                c_password: {
                    required: 'Confirm Password required.',
                    equalTo : 'Password and Confirm Password  must be same.'
                },
            },
            highlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
            },
            errorPlacement: function(error, element) {
                if (element.attr("class") == 'summernote') {
                    error.insertAfter(element.parent().find('.note-editor'));
                } else {
                    element.after(error); // default error placement
                }
            }
        });
    })
</script>
@endpush