@extends(@Auth::user()->role=='admin' ? 'layouts.gentella':'layouts.'.env('LAYOUT'))
@section('content')
    <div class="panel panel-default">
        <div class="panel-heading">Writer: <span style="color: green;">{{ $user->name }}</span> Profile</div>
        <div class="panel-body">
            <div class="col-md-5">
                <div class="panel panel-default">
                    <div class="panel-heading">Personal Details</div>
                    <div class="panel-body">
                        <div class="profile_pic">

                            <img src="@if($user->image) {{ URL::to($user->image) }} @else {{ URL::to('images/img.png') }} @endif" alt="..." class="img-circle profile_img">
                        </div>
                        <table class="table table-bordered">
                            <tr>
                                <th>Name</th>
                                <td>{{ $user->name }}</td>
                            </tr>
                            <tr>
                                <th>E-mail</th>
                                <td>{{ $user->email }}</td>
                            </tr>
                            <tr>
                                <th>Role</th>
                                <td>{{ ucwords($user->role) }}</td>
                            </tr>
                            <tr>
                                <th>Country</th>
                                <td>{{ ucwords($user->country) }}</td>
                            </tr>
                            <tr>
                                <th>Phone</th>
                                <td>{{ ucwords($user->phone) }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="row"></div>
                <div class="panel-heading">
                    <div class="panel-title">Payments</div>
                </div>
                <div class="panel-body">
                                        <p class="period">Payment Period</p>
                                </div>
        </div>
    </div>
    <style type="text/css">
        .month-pay{
            position: relative;
            display: block;
            background: #57AD68;
            padding: 7px 0px 7px 10px;
            color: #333;
            font: bold 14px Arial, Helvetica, sans-serif;
            margin: 10px 0px 0px 10px;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            -khtml-border-radius: 3px;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
        }

        .table-th{
            border: 10px;
            height:30px;
            color:#000000;
            background-color:#ff5050
        }
        .table-td{
            margin: 10px 0px 0px 10px;
            background: #FFF;
            height: 30px;
            color: #333;
            text-align: center;
            line-height: 30px;
            border-bottom: 1px solid #e6e6e6;
            border-left: 1px solid #e6e6e6;
            font: normal 12px Arial, Helvetica, sans-serif;
            vertical-align: middle !important;
        }
        .label_years {
            cursor: pointer;
            color: #2b91d5;
            font: bold 24px Arial, Helvetica, sans-serif;
            display: block;
            position: relative;
            padding: 0px 0px 5px 14px;
        }
        .period{
            color: #555;
            font: bold 14px Arial, Helvetica, sans-serif;
            padding: 0;
            margin: 0;
        }
    </style>
    <script type="text/javascript">
        function openTable(id){
            // alert(id);
            // $(".closable").slideUp('fast');
            // $("#"+id).slideToggle('slow');
        }
    </script>
@endsection