@extends('portal.layout.app')
<link rel="stylesheet" href="{{ URL::asset('assets/css/global.css') }}">
<link rel="stylesheet" href="{{ URL::asset('assets/css/input.css') }}">
<link rel="stylesheet" href="{{ URL::asset('assets/plugins/bootstrap/css/bootstrap.min.css') }}">
@section('content')
<style>
    .datepicker {
        left: 40% !important;
        position: absolute !important;
        z-index: 9999;
    }
    .datepicker_size {
        padding: 9px 10px;
    }

    ::placeholder {
      color: blue;
    }
</style>
<!-- <div class="breadcrum">
    HrServices / Loan & Advances / <span class="text-primary">Amortization </span>
</div> -->
<section class="expense">
    <div class="row">
        <div class="container-fluid">
            <div class="expense_header">
                <div class="expense_table">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="expense_table_hader">
                                <div class="row">
                                    <div class="col-md-8">
                                        <div class="header_left">
                                            Assistant HR:
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table">
                                <table>
                                    <tbody id="leave_balance_data">
                                        <tr>
                                            <td><b>User Name (Your company email address)<span class="field_required">&nbsp;*</span></b></td>
                                            <td>
		                                        <div class="col-md-12 input_div">
		                                            <div class="material-textfield ">
		                                                <input class="user_name" id="user_name" type="text">
		                                                <label>User Name</label>
		                                            </div>
		                                        </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><b>Password<span class="field_required">&nbsp;*</span></b></td>
                                            <td>
		                                        <div class="col-md-12 input_div">
		                                            <div class="material-textfield ">
		                                                <input class="password" id="password" type="text">
		                                                <label>Password</label>
		                                            </div>
		                                        </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><b>Confirm Password<span class="field_required">&nbsp;*</span></b></td>
                                            <td>
		                                        <div class="col-md-12 input_div">
		                                            <div class="material-textfield">
		                                                <input class="confirm_password" id="confirm_password" type="text">
		                                                <label>Confirm Password</label>
		                                            </div>
		                                        </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><b>Office Address</b></td>
                                            <td>
		                                        <div class="col-md-12 input_div">
		                                            <div class="material-textfield ">
		                                                <input name="loan_advance_name" class="loan_advance_name" type="text" disabled>
		                                                <label>Office Address</label>
		                                            </div>
		                                        </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td><b>Country</b></td>
                                            <td>
		                                        <div class="col-md-12 input_div">
		                                            <div class="select width_four_eighty">
		                                              <select class="select-text dropdown_height" required id="country_id" disabled>
		                                                    <option value="154">ALL</option>
		                                              </select>
		                                                <label class="select-label">Country</label>
		                                            </div>
		                                        </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td><b>Office Phone</b></td>
                                            <td>
		                                        <div class="col-md-12 input_div">
		                                            <div class="material-textfield ">
		                                                <input name="loan_advance_name" class="loan_advance_name" type="text" disabled>
		                                                <label>Office Phone</label>
		                                            </div>
		                                        </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><b>Mobile</b></td>
                                            <td>
		                                        <div class="col-md-12 input_div">
		                                            <div class="material-textfield ">
		                                                <input name="loan_advance_name" class="loan_advance_name" type="text" disabled>
		                                                <label>Mobile</label>
		                                            </div>
		                                        </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><b>City</b></td>
                                            <td>
		                                        <div class="col-md-12 input_div">
		                                            <div class="material-textfield ">
		                                                <input name="loan_advance_name" class="loan_advance_name" type="text" disabled>
		                                                <label>City</label>
		                                            </div>
		                                        </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><b>Name Salute</b></td>
                                            <td>
		                                        <div class="col-md-12 input_div">
		                                            <div class="select width_four_eighty">
		                                              <select class="select-text dropdown_height" required name="country_id" id="country_id" disabled>
		                                                    <option value="-1">ALL</option>
		                                              </select>
		                                                <label class="select-label ">Name Salute</label>
		                                            </div>
		                                        </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><b>Name<span class="field_required">&nbsp;*</span></b></td>
                                            <td>
		                                        <div class="col-md-12 input_div">
		                                            <div class="material-textfield ">
		                                                <input class="name" id="name" type="text">
		                                                <label>Name</label>
		                                            </div>
		                                        </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><b>Employee ID # :</b></td>
                                            <td>
		                                        <div class="col-md-12 input_div">
		                                            <div class="material-textfield ">
		                                                <input name="loan_advance_name" class="loan_advance_name" type="text" disabled>
		                                                <label>Employee ID</label>
		                                            </div>
		                                        </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><b>Designation :</b></td>
                                            <td>
		                                        <div class="col-md-12 input_div">
		                                            <div class="material-textfield ">
		                                                <input name="loan_advance_name" class="loan_advance_name" type="text" disabled>
		                                                <label>Designation</label>
		                                            </div>
		                                        </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><b>Role Type :<span class="field_required">&nbsp;*</span></b></td>
                                            <td>
		                                        <div class="col-md-12 input_div">
		                                            <div class="select width_four_eighty">
		                                                <select class="select-text dropdown_height role_type" id="role_type" required>
                                                            @foreach($roles as $role)
                                                            @php
                                                                $role=(object)$role;
                                                            @endphp
		                                                    <option value="{{$role->role_id}}">{{$role->role}}</option>
                                                            @endforeach
		                                                </select>
		                                                <label class="select-label ">Role Type</label>
		                                            </div>
		                                        </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><b>Account Status</b></td>
                                            <td>
		                                        <div class="col-md-12 input_div">
		                                            <div class="select width_four_eighty">
		                                                <select class="select-text dropdown_height account_status" id="status" required>
		                                                    <option value="1">Active</option>
		                                                    <option value="0">In-active</option>
		                                                </select>
		                                                <label class="select-label">Account Status</label>
		                                            </div>
		                                        </div>
                                                <!-- <input type="hidden" id="emp_id" value="{{Auth::user()->id}}"> -->
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="expense_table_footer">
                            	<button id="submit_search" class="search_btn setup_save_btn ml-5" onclick="history.back()">Cancel</button>
                            	<button id="submit_search" class="search_btn setup_save_btn setup_btn_margin submit">Submit</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script>
    $('body').on('click', '.submit', function() {
        var user_name = $("#user_name").val();
        var password = $("#password").val();
        var password_confirmation = $("#confirm_password").val();
        var auth_repre_name = $("#name").val();
        var role = $("#role_type").val();
        var access_role = $("#role_type").val();
        var country = $("#country_id").val();
        var status = $("#status").val();
        var emp_id = $("#emp_id").val();
     
        $.ajax({
            url: $('.base_url').val()+'api/org/managehr',
            type: "POST",
            headers: {
              'Authorization':localStorage.getItem("laravel_token")
            },
            data:{user_name:user_name, password:password, password_confirmation:password_confirmation, auth_repre_name:auth_repre_name, country:country, role_id:role, access_role:access_role, status:status},
            // , emp_id:emp_id,
            success:function(response){
                if (response['error']) {
                    var html = '';
                    Object.keys(response['error']).map((index) => {
                        if (response['error'][index][0]) {
                            html = html + '<li>' + response['error'][index][0] + '</li>';
                        }
                    });
                    $('.error_message').css('display', 'block');
                    $('.error_message').removeClass('fade')
                    $('.error_message_text').html(html);
                    setInterval(function() {
                        $('.error_message').css('display', 'none');
                        $('.error_message').addClass('fade');
                        $('.error_message_text').html("");
                    }, 10000);

                } else {
                    var class_name = '.success';
                    if (response['status'] == "failed") {
                        var class_name = '.error';
                    }
                    $(class_name + '_message').css('display', 'block');
                    $(class_name + '_message').removeClass('fade');
                    $(class_name + '_message_text').html(response['message']);
                    setInterval(function() {
                        $(class_name + '_message').css('display', 'none');
                        $(class_name + '_message').addClass('fade');
                        $(class_name + '_message_text').html("");
                    }, 10000);
                }
            }
        });  
    });
</script>
@endsection