@extends('layouts.main_layout')
@php
 $title = 'Add User';
 $name = $email = $mobile = $organization = $unit = $level = $status = ''; 
 if(!empty($user)){
 $title='Edit User';
 $name = $user->name;
 $email = $user->email;
 $mobile = $user->mobile;
 $country_code = $user->country_code;
 $organization = $user->organization_id;
 $unit = $user->unit_id;
 $level = @$user->roles->first()->id;
 $status = $user->is_active;
}
@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('admin.users.index')}}"><i class="fas fa-chevron-left"></i></a>
              <h1 class="">{{$title}}</h1>
            </div>
             @if(!empty($user))
                <form action="{{route('admin.users.update',$user->id)}}" id="userForm" method="POST">
                  @method('PUT')
                @else
                <form action="{{route('admin.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="{{old('name')?? $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="{{old('email')?? $email}}" >
                    <!-- <input type="email" class="form-control" id="email" aria-describedby="" placeholder="Please enter email" name="email" value="{{old('email')?? $email}}" @if(!empty($user)) readonly="true" @endif> -->
                     <label for="email" class="error"></label>
                  </div>
                  <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="{{old('mobile')?? $mobile}}" onkeypress="return event.charCode >= 48 && event.charCode <= 57" maxlength="10" style="margin-top: 15px;">
                    <label for="mobile" class="error"></label>

                  </div>
                  
                
              </div>
              <div class="col-lg-6 col-md-12">
                <div class="form-group">
                    <label for="Organization">Select Organization <span class="req-span">*</span></label>
                    <div class="select_custom">
                        <i class="fas fa-sort-down"></i>
                        <select class="form-control" name="organization" id="organization">
                            <option value="">Select organization</option>
                            @foreach($organizations as $id=>$name)
                            <option value="{{$id}}" @if(!empty(old('organization')) && old('organization') == $id) selected 
                            @elseif(!empty($organization) && $id == $organization)
                            selected
                            @endif
                            >
                            {{$name}}
                            </option>
                            @endforeach
                          </select>
                    </div>
                     <label for="organization" 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(old('level')) && old('level') == $id) selected 
                            @elseif(!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> -->
                            </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('admin.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">

$(document).ready(function () {
    $('#country_code').select2({
        // by default false, only accesiable by click or keypress event
        selectOnClose: false
    });

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

            @if(!empty($unit))
                getDepartment('{{$unit}}');
            @else
                getDepartment();
            @endif
            //getSingleDepartment();
        }
    }
    
});

var dataUrl = '{{url("/data")}}/';

@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

@if(!empty($status))
    $('#status').val('{{$status}}');
@endif

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

        og = $('#organization').val();
        $.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);
              }
            }
        }); 
    } 

    function getSingleDepartment(id){
        $("#unit").empty();
        og = $('#organization').val();

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

                $('#unit').html(html);
              }
            }
        });
    }
    

$('#organization').change(function(){
    $('#unit').html(' <option value="">Select Department / Business Entity / Process</option>');

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

            getDepartment();

            //getSingleDepartment();
        }
    });
});

$("#userForm").validate({
    rules: {
        name: {
            required: true
        },
        @if(empty($user))
            email:{
                required:true
            },
        @endif
        mobile:{
            required:true
        },
        country_code:{
            required:true
        },
        organization:{
            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.",

        organization:"Please select the organization of the user.",
        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