@extends('layouts.app')

@section('appjs')
    <script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection
@section('content')
@section('page_title') Edit User List  @endsection

<style>
    .submit_button{
       margin-left: 67%;
    }

    .col-form-label:after {
        content: '*';
        color: red;
        padding-left: 5px;
    }
    .hide{
        display: none;
    }
    .message{
        font-size: 13px;
        color: rgb(178, 0, 0);
    }
</style>

@php
    $user = $user_info[0];
@endphp

<div class="container">
<div class="card-header">
            <h3> <b> EDIT USER  </b> </h3> 
        </div>
    <div class="card">
        <div class="card-body">
            {{-- // action="{{ url('update_user_account') }}"  --}}
            <form method="post" action="{{ url('update_user_account') }}" enctype="multipart/form-data" autocomplete="off" onsubmit="return submitEditForm()">
                {{ csrf_field() }}
                <input type="hidden" value="{{$user->id}}" name="user_id"/>
                <input type="hidden" value="{{$user->role}}" name="initial_role"/>
                <input type="hidden" value="{{$user->manager_account_id}}" name="current_manager_id"/>
                <input type="hidden" value="{{$user->parent_account_id}}" name="parent_account_id"/>
                <input type="hidden" value="{{$user->email}}" id="old_email" name="old_email"/>
                <input type="hidden" value="{{$user->mobile_number}}" id="old_mobile_number" name="old_mobile_number"/>

                <div class="form-group row desc">
                    <label for="master_account_name" class="col-sm-3">Master Account Name</label>
                    <div class="col-sm-6">
                        <input id='master' type="text" name="master_account" class="form-control" placeholder = "Enter Account Name" value="{{$master['master_account_name']}}   ({{$master['master_email']}})"  readonly/>
                    </div>
                </div>

                <div class="form-group row desc">
                    <label for="suer_name" class="col-sm-3 col-form-label">User Name</label>
                    <div class="col-sm-6">
                        <input id='user_name' type="text" name="username" class="form-control" placeholder = "Enter User Name" value="{{$user->username}}"  required/>
                    </div>
                </div>

                <div class="form-group row desc">
                    <label for="email" class="col-sm-3 col-form-label">Email</label>
                    <div class="col-sm-6">
                        <input oninput="emailChange(this)" id='email' type="text" name="email" class="form-control" placeholder = "Enter Email" value="{{$user->email}}"  required/>
                        <small class="message hide" id="email_exists_error" >Email already exists.</small>
                    </div>
                </div>

                <div class="form-group row desc">
                    <label for="mobile_number" class="col-sm-3 col-form-label">
                        Mobile Number
                        <i title='Mobile Number can be of max 10 digits and can start from 6 to 9' class="fa fa-info-circle richmedia_image" aria-hidden="true"></i>
                    </label>
                    <div class="col-sm-6">
                        <input id='mobile_number' oninput="changeInMobileNumber(this)" type="text" name="mobile_number" class="form-control" placeholder = "Enter Mobile Number" value="{{$user->mobile_number}}"  required/>
                        <small class="message hide" id="mobile_number_error" >Please enter a valid Mobile Number</small>
                    </div>
                </div>

            @if($user->role!="VLADMIN")    
                <div class="form-group row">
                    <label for="role" class="col-sm-3 col-form-label">Role</label>
                    <div class="col-sm-6">
                        <select name="role" id="role" class="form-control" onchange="changeUserRole(this)" required>
                            <option value="USER" {{ $user->role === 'USER' ? 'selected' : '' }}>USER</option>
                            <option value="MANAGER" {{ $user->role === 'MANAGER' ? 'selected' : '' }}>MANAGER</option>
                        </select>
                    </div>
                </div>  
            @endif

            @if($user->role!="VLADMIN")    
                @if($user->role=="USER")
                    <div class='form-group row manager_dropdown_row'>
                    <label for="manager" class="col-sm-3 col-form-label">Managers</label>
                @endif

                @if($user->role=="MANAGER")
                    <div class='form-group row manager_dropdown_row hide'>
                    <label for="manager" class="col-sm-3 col-form-label">Managers
                        <i title='Select a manager under which {{$user->username}} and all it users will be assigned.' class="fa fa-info-circle richmedia_image" aria-hidden="true"></i>
                    </label>
                @endif
                        <div class="col-sm-6">
                            <select name="manager" id="manager" class="form-control">
                                @forEach($managers as $manager)
                                    <option value="{{$manager->manager_account_id}}^^{{$manager->username}}" >{{$manager->username}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>  
            @endif

            {{-- 
                if transfered from user to manager then Show Dropdown of all the Users except the current user 
                to be transferred to this manager newly formed    
            --}}
            
            @if($user->role!="VLADMIN" && $user->role=="USER")    
                <div class='form-group row users_list_dropdown_div hide'>
                    <label for="users_list_dropdown" class="col-sm-3 col-form-label">Users (Optional)
                        <i title='Select Users that you want to transfer under Manager {{$user->username}}.' aria-hidden="true"></i>
                    </label>
                    <div class="col-sm-6">
                        <select class="form-multi-select" multiple data-coreui-search="true" multiple id="multi_select_users" name=users[]>
                            @forEach($user_under_current_master as $curr_user)
                                    <option value="{{$curr_user->id}}" >{{$curr_user->username}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>  
            @endif


                <div class="form-group row desc">
                    <label for="email" class="col-sm-3">State</label>
                    <div class="col-sm-6">
                        <input id='state' type="text" name="state" class="form-control" placeholder = "Enter State" value="{{$user->state}}" />
                    </div>
                </div>

                <div class="form-group row desc">
                    <label for="city" class="col-sm-3">City</label>
                    <div class="col-sm-6">
                        <input id='city' type="text" name="city" class="form-control" placeholder = "Enter City" value="{{$user->city}}" />
                    </div>
                </div>

                <div class="form-group row desc">
                    <label for="city" class="col-sm-3">Pincode</label>
                    <div class="col-sm-6">
                        <input id='pincode' type="text" name="pincode" class="form-control" placeholder = "Enter Pincode" value="{{$user->pincode}}" />
                    </div>
                </div>
                <button type="submit" class="btn btn-primary submit_button">Submit</button>
                </div>
            </form>

        </div>
    </div>
</div>
<script>

    // Enable multiple search of users 
    $('#multi_select_users').multiselect({
        includeSelectAllOption: true,
        enableFiltering: true,
        filterPlaceholder: 'Search',
        selectAllText: 'Select All',
        nonSelectedText: 'Select User Accounts',
    });
    
    $(`.multiselect-clear-filter`).text('Clear');

   let userRole = "{{ $user->role }}";      // initial role of user
   let userName = "{{$user->username}}"
   let userEmails = @json($emails);

   function submitEditForm() {        
        let user_role_chosen = $('#role').val();    // role user has chosen

        // Person has changed his role 
        if(userRole!= user_role_chosen && user_role_chosen == "USER"){
                let manager = $(`#manager`).val().split('^^');
                let confirmation = confirm(`Are you sure you want to change the role from ${userRole} to ${user_role_chosen}? All Other User Accounts under ${userName} will be assigned to Manager ${manager[1]}`);
                if(confirmation == true) return true;
                else return false;
        }
        else return true;
             
    }

    function emailChange(email_element){
        $(`#email_exists_error`).addClass('hide');
        let email = $(email_element).val();

        // if email changed then check if new email is present in DB
        if(email!=$(`#old_email`).val()){
            let check = userEmails.find((currEmail)=>{
                return currEmail==email;
            });

            if(check) {
                $(`#email_exists_error`).removeClass('hide');
            }
        }   
    }


    function changeInMobileNumber(element){
        $(`#mobile_number_error`).addClass('hide');

        let number = $(element).val();
        if(number.length==0) return;
        
        // add mobile number validations
        if(number.length>10) $(element).val($(element).val().substring(0,10));
        
        let starting_point = Number($(element).val().charAt(0));

        if(starting_point<6){
            $(`#mobile_number_error`).removeClass('hide');
        }

        for(let i=0;i<$(element).val().length;i++){
            let curr_char = $(element).val().charAt(i);
            if(isNaN(curr_char)){
                $(`#mobile_number_error`).removeClass('hide');
            }
        }
    }



   function changeUserRole(selectElement){
        let role = $(selectElement).val();

        // if user is choosen then I need to search for manager under which user should be there
        if(role == "USER"){
            $(`.manager_dropdown_row`).removeClass('hide');
        }
        else{
            $(`.manager_dropdown_row`).addClass('hide');
        }

        // if role changed from user to manager then display the new users
        if(userRole=="USER" && role=="MANAGER"){
            $(`.users_list_dropdown_div`).removeClass('hide');
        }
        else{
            $(`.users_list_dropdown_div`).addClass('hide');
        }
   }

</script>
@endsection