@extends('layouts.app')
@section('title', session('company_code') . ' Elite System')

@section('header')
    Dashboard
@endsection

@section('body')
<div class="row" style="padding-left:5px; padding-right:5px">
	<div class="box-header with-border">
	  	<h3 class="box-title">My Account</h3>
	</div>
</div>
<div class="row">
    <div class="col-xs-12">
        <div class="box box-primary">
            <div class="box-body">
                <table style="width:100%">
                    <tbody>
                        <tr>
                            <td>
                                <strong><i class="fa fa-user margin-r-5"></i> Employee Name</strong>
                                <p class="text-muted">{{  strtoupper($user->name) }}</p>
                            </td>
                            <td>
                                <strong><i class="fa fa-map-marker margin-r-5"></i> Branch</strong>
                                <p class="text-muted">{{ strtoupper(session('branch_name')) }}</p>
                            </td>
                            <td>
                                <strong><i class="fa fa-users margin-r-5"></i> Position(s)</strong>
                                <p>
                                    @foreach($user->positions AS $p)
                                    <span class="label label-success">{{ strtoupper($p->position_desc) }}</span>
                                    @endforeach
                                </p>
                            </td>
                            <td>
                                <strong><i class="fa fa-cog margin-r-5"></i> Username</strong>
                                <p class="text-muted">{{ strtoupper($user->username) }}</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-xs-12">
        <div class="box box-primary">
            <div class="box-body">
                <div class="row">
                    <div class="col-xs-2">
                        <div class="form-group">
                            <label>Old Password</label>
                            <input type="password" class="form-control" placeholder="Old Password" id="old_password">
                        </div>
                    </div>
                    <div class="col-xs-2">
                        <div class="form-group">
                            <label>New Password</label>
                            <input type="password" class="form-control" placeholder="New Password" id="password">
                        </div>
                    </div>
                    <div class="col-xs-2">
                        <div class="form-group">
                            <label>Confirm New Password</label>
                            <input type="password" class="form-control" placeholder="New Password" id="password_confirmation">
                        </div>
                    </div>
                    <div class="col-xs-1">
                        <div class="form-group">
                            <label>&nbsp;</label><br>
                            <button class="btn btn-warning" id="change_password">CHANGE PASSWORD</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script type="text/javascript">
    $(document).ready(function() {
        $('#change_password').click(function() {
            $.ajax({
                url: $app_url + '/user/my-account-changepass',
                type: 'post',
                data: {
                    'old_password' : $('#old_password').val(),
                    'password' : $('#password').val(),
                    'password_confirmation' : $('#password_confirmation').val()
                },
                beforeSend: function() {
                    showBoxLoadingState();
                    $('.form-group').removeClass('has-error').prop('title', '');
                },
                success: function(res) {
                    location.reload();
                },
                error: function(res) {
                    $.each(res.responseJSON, function(field, message) {
                        $('#'+field).closest('.form-group').addClass('has-error').prop('title', message);
                    });
                },
                complete: function() {
                    removeBoxLoadingState();
                }
            });
        });
    });
</script>
@endsection