@extends('layouts.main_frontend')
@php
 $title = 'Add User';
 $name = $email = $mobile = $country_code = $unit = $level = $status = ''; 

 if(!empty($user)){
 $title='Edit User';
 $name = $user->name;
 $email = $user->email;
 $mobile = $user->mobile;
 $country_code = $user->country_code;
 $unit = $user->unit_id;
 $level = @$user->roles->first()->id;
 $status = $user->is_active;
}

if(!empty(old('name'))){
  
 $name = old('name');
 $email = old('email');
 $mobile = old('mobile');
 $country_code = old('country_code');
 $unit = old('unit');
 $level = old('level');
 $status = old('status');
}

@endphp
@section('title','RCSA - '.$title)

@section('main-content')

<link rel="stylesheet" href="{{asset('/css/frontend/select2_v1.css')}}" type="text/css" />

 <main role="main" class="col-md-9 ml-sm-auto col-lg-10 dashboard-page-head edit-document document pt-3 pb-2 mb-2">
          <div>
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <div class="d-flex flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-2">
              <a href="{{route('users.index')}}"><i class="fas fa-chevron-left"></i></a>
              <h1 class="">{{$title}}</h1>
            </div>
             @if(!empty($user))
                <form action="{{route('users.update',$user->id)}}" id="userForm" method="POST">
                  @method('PUT')
                @else
                <form action="{{route('users.store')}}" id="userForm" method="POST">
                @endif
                  @csrf()
            <div class="row">
              <div class="col-lg-6 col-md-12">
               
                  <div class="form-group">
                    <label for="name">Name <span class="req-span">*</span></label>
                    <input type="text" class="form-control" id="name" aria-describedby="name" placeholder="Please enter name" name="name" value="{{$name}}" onKeyPress="return ValidateAlpha(event);">
                    <label for="name" class="error"></label>
                  </div>
                  <div class="form-group">
                    <label for="email">Email <span class="req-span">*</span></label>
                    <input type="email" class="form-control" id="email" aria-describedby="" placeholder="Please enter email" name="email" value="{{$email}}" >
                     <label for="email" class="error"></label>
                  </div>
                  <div class="form-group">
                    <label for="password">Password 
                        <i class="fa fa-info" style="margin-left:0.3rem;"  title="Password and confirm password must be same."></i>
                    </label>
                    <div style="position: relative; width: 80%;z-index: 0;">
                        <input type="password" class="form-control" id="password" placeholder="Please enter password" name="password" value="" style="width: 100%;padding-right: 40px;">
                        <i class="fas fa-eye-slash" id="togglePassword" style="margin: 0; position: absolute; right: 10px; top: 14px;"></i>
                    </div>
                    <label for="password" class="error"></label>
                  </div>
                  <div class="form-group">
                    <label for="password_confirmation">Password Confirmation </label>
                    <input type="password" class="form-control" id="password_confirmation" placeholder="Please enter password-confirmation" name="password_confirmation" value="">
                     <label for="password_confirmation" class="error"></label>
                  </div>
              </div>
              <div class="col-lg-6 col-md-12">
                <div class="form-group">
                    <label for="mobile">Mobile No. <span class="req-span">*</span></label>
                    <div class="select_custom">
                        <i class="fas fa-sort-down"></i>
                        <select class="form-control" id="country_code" name="country_code">
                            <option value="">Country code</option>
                            @if($countries)
                                @foreach($countries as $key => $val)
                                    <option value="{{ $val->id }}" {{ (isset($country_code) ? $country_code : old('country_code')) == $val->id ? 'selected' : '' }}> {{ $val->dial_code.' '.ucwords($val->name) }} </option>
                                @endforeach
                            @endif
                        </select>
                        <label for="country_code" class="error"></label>
                    </div>
                    <input type="text" class="form-control phone_number" id="mobile" aria-describedby="" placeholder="Please enter mobile number" name="mobile" value="{{$mobile}}" onkeypress="return event.charCode >= 48 && event.charCode <= 57" maxlength="10" style="margin-top: 10px;">
                    <label for="mobile" class="error"></label>
                  </div>

                    <div class="form-group">
                        <label for="accessLevel">Select Access Level <span class="req-span">*</span></label>
                        <div class="select_custom">
                            <i class="fas fa-sort-down"></i>
                            <select class="form-control" id="accessLevel" name="level">
                            <option value="">Select access level</option>
                            @foreach($roles as $id=>$name)
                            <option value="{{$id}}" @if(!empty($level) && $id == $level)
                            selected
                            @endif>{{ucwords($name)}}</option>
                            @endforeach
                            </select>
                        </div>
                         <label for="level" class="error"></label>
                    </div>
                    <div class="form-group" id="unitGroup" style="display:none;">
                        <label for="unit">Select Department / Business Entity / Process <span class="req-span">*</span></label>
                        <div class="select_custom">
                            <i class="fas fa-sort-down"></i>
                            <select class="form-control" name="unit" id="unit">
                            <option value="">Select department / business entity / process</option>
                            @foreach($units as $id=>$name)
                             <option value="{{$id}}" @if(!empty($unit) && $id == $unit)
                            selected
                            @endif>{{ucwords($name)}}</option>
                            @endforeach
                            </select>
                        </div>
                         <label for="unit" class="error"></label>
                    </div>
                    <div class="form-group">
                        <label for="status">Select Status <span class="req-span">*</span></label>
                        <div class="select_custom">
                            <i class="fas fa-sort-down"></i>
                            <select class="form-control" id="status" name="status">
                            <option value="">Select status</option>
                            <option value="y">Active</option>
                            <option value="n">Inactive</option>
                            </select>
                        </div>
                        <label for="status" class="error"></label>
                    </div>
                  
              </div>
            </div>
            <div class="d-flex btn_wrap">
              <a href="{{route('users.index')}}" class="btn btn-primary btn-custom btn_custom_noBg">Cancel</a>
              <button type="submit" class="btn btn-primary btn-custom btn_custom_bg" id="save-form">Save</button>
            </div>
          </form>
          </div>
        </main>
@endsection
@section('additionaljs')
<script src="{{asset('/js/admin/jquery.validate.min.js')}}"></script>
<!--<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>-->

<script type="text/javascript">
var dataUrl = '{{url("/data")}}/';
var orgValue = '{{ $orgId }}';
$(document).ready(function () {
    $('#country_code').select2({
        // by default false, only accesiable by click or keypress event
        selectOnClose: false
    });

    $("#userForm").submit(function() {
        $(this).submit(function() {
            return false;
        });
        return true;
    }); 
});
@if(!empty($status))
    $('#status').val('{{$status}}');
@endif

@if(!empty($unit))
    @if ($level == 4 || $level == 5)
        $("#unitGroup").hide();
    @else
        $("#unitGroup").show();
    @endif

    $('#accessLevel').change(function(){
        if (($(this).val() == 4) || ($(this).val() == 5)){
            $("#unitGroup").hide();
        } else {
            $("#unitGroup").show();
            getDepartment();
        }
    });

    getDepartment('{{$unit}}');
@endif

function getDepartment(id){
    $("#unit").empty();

    og = orgValue;
    $.ajax({
        method:'GET',
        url:dataUrl+og+'/units',
        success:function(data){
          if(data){
            console.log(data);
            var html = "<option value=''>Select Department / Business Entity / Process</option>";
                for(var i in data){
                    selected = '';
                    if(id != undefined && i == id){
                        selected = 'selected';
                    }
                    html+='<option value="'+i+'" '+selected+'>'+data[i]+'</option>';
                }
            $('#unit').html(html);
          }
        }
    }); 
}

$('#accessLevel').change(function(){
    access_level = $('#accessLevel').val();
    console.log(access_level);
    if (access_level == 4 || access_level == 5) {
        
        $("#unitGroup").hide();
    } else {
        $("#unitGroup").show();
        getDepartment();
    }
});

$("#userForm").validate({
    rules: {
        name: {
            required: true
        },
        @if(empty($user))
        email:{
            required:true
        },
        @endif
        mobile:{
            required:true
        },
        country_code:{
            required:true
        },
        unit:{
            required:true
        },
        level:{
            required:true
        },
        status:{
            required:true
        }
    },messages:{
        name:"Please enter the name of the user.",
        email:"Please enter the email address of the user.",
        mobile:"Please enter mobile number of the user.",
        country_code:"Please select country code field.",
        unit:"Please select the business unit of the user.",
        level:"Please select the access level of the user.",
        status:"Please select the status of the user."
    },errorPlacement: function(error, element) {
        $(element).parent("div").addClass('has-error');
        error.insertAfter(element);
    }
});
</script>
@endsection