<!DOCTYPE html>
<html>

@include('includes.head')

<body class="hold-transition fixed skin-blue sidebar-mini">
    <div class="wrapper">
        @include('includes.header')
        <!-- Left side column. contains the logo and sidebar -->

        @include('includes.side-nav')

        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <h1>
                    User Profile
                </h1>
                <ol class="breadcrumb">
                    <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>

                    <li><a href="#">System User</a></li>
                    <li class="active">User Profile</li>
                </ol>
            </section>

            <!-- Main content -->
            <section class="content">
                @include('includes.messages')
                <div class="row">
                    <div class="col-md-3">

                        <!-- Profile Image -->
                        <div class="box box-primary">
                            <div class="box-body box-profile">
                                <img class="profile-user-img img-responsive img-circle"
                                    src="<?php echo url('/'); ?>/dist/img/avatar.png" alt="User profile picture">
                                <h3 class="profile-username text-center">{{ $record->name }}</h3>
                                <p class="text-muted text-center">{{ $record->role->name }}</p>

                                <ul class="list-group list-group-unbordered">
                                    <li class="list-group-item">
                                        <b>System Role</b> <a class="pull-right">{{ $record->role->name }}</a>
                                    </li>
                                    <li class="list-group-item">
                                        <b>System User Ref</b> <a class="pull-right">{{ $record->ref }}</a>
                                    </li>
                                    <li class="list-group-item">
                                        <b>Email</b> <a class="pull-right">{{ $record->email }}</a>
                                    </li>
                                    <li class="list-group-item">
                                        <b>Contact Number</b> <a class="pull-right">+971 {{ $record->phone_number }}</a>
                                    </li>
                                    <li class="list-group-item">
                                        <b>System Reg. Date</b> <a class="pull-right">{{ $record->join_date }}</a>
                                    </li>
                                    <li class="list-group-item">
                                        <b>Account Status</b> <a class="pull-right">{{ $record->acc_status }}</a>
                                    </li>

                                </ul>

                                <button type="button" class="btn btn-danger btn-block btn-flat" data-toggle="modal"
                                    data-target="#modal-delete-acc">
                                    <b>Delete Account</b>
                                </button>
                            </div><!-- /.box-body -->
                            <div class="modal fade" id="modal-delete-acc">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal"
                                                aria-label="Close">
                                                <span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title">Alert! Account deleteion...</h4>
                                        </div>
                                        <div class="modal-body">
                                            <p>Do you Really Want to delete the account?</p>
                                        </div>
                                        <div class="modal-footer">

                                            <a href="{{ route('hr.staff.delete.profile', ['id' => $uuid]) }}"
                                                class="btn btn-danger btn-block btn-flat">
                                                <b>Yes, Delete Account</b></a>
                                            <button type="button" class="btn btn-default btn-block btn-flat"
                                            data-dismiss="modal">Cancel</button>
                                        </div>
                                    </div>
                                    <!-- /.modal-content -->
                                </div>
                            </div>
                                <!-- /.modal-dialog -->
                            </div><!-- /.box -->
                        </div><!-- /.col -->
                        <div class="col-md-5">
                            <div class="nav-tabs-custom">
                                <ul class="nav nav-tabs">
                                    <li class="active"><a href="#basic_info" data-toggle="tab">Basic Info</a></li>

                                </ul>
                                <div class="tab-content">


                                    @include('hr.staff.tabs.basic_info')



                                </div><!-- /.tab-content -->
                            </div><!-- /.nav-tabs-custom -->
                        </div>
                        <div class="col-md-4">
                            <div class="nav-tabs-custom">
                                <ul class="nav nav-tabs">
                                    <li class="active"><a href="#update_password" data-toggle="tab">Update Password
                                            &amp;
                                            Status</a></li>

                                </ul>
                                <div class="tab-content">


                                    @include('hr.staff.tabs.update_password')



                                </div><!-- /.tab-content -->
                            </div><!-- /.nav-tabs-custom -->
                        </div><!-- /.col -->
                    </div><!-- /.row -->

            </section><!-- /.content -->
        </div><!-- /.content-wrapper -->

        @include('includes.footer')


    </div><!-- ./wrapper -->

    @include('includes.scripts')
</body>

</html>
