@extends('tenant.layouts.ranking')

{{--Tilte Section--}}
@section('title', 'My Profile')

{{--Style Section--}}
@section('style')

@endsection

{{--Content Section--}}
@section('content')
    <div class="container-fluid px-5">
        <div class="row p-3">
            <div class="card shadow py-2   rounded border border-0 px-4">
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-12 col-md-6 col-lg-7">
                            <div>
                                <h4><span><img src="{{asset('img/RankAssets/rank_icon.png')}}" alt="rate" height="23px" width="23px"> </span> {{ Auth()->user()->full_name}} Profile</h4>
                            </div>
                            <div>View general profile information</div>
                        </div>
                        <div class="col-sm-12 col-md-6 col-lg-5" style="text-align: right">

{{--                            <button class="btn btn-dark" style="font-size: 18px">--}}
{{--                                Dashboard--}}
{{--                            </button>--}}


                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid px-5">
        <div class="row">
            <div class="col-sm-4">
                <div class="card shadow py-2   rounded border border-0 px-4 h-100" style="text-align:center">
                    <img style="width: 25%; text-align: center;margin-left: 37%; margin-top: 4%;" id="profileImage" src="{{asset('img/iDesk_Assets/user.png')}}" class="card-img-top" alt="...">
                    <div class="card-body" style="height: 10px">
                        <h5 class="card-title">{{ Auth()->user()->full_name}}</h5>
                        <h6 class="card-title text-muted">Customer Service</h6>
                    </div>
                    <hr>

                    <table class="table-success" style="width: 100%">
                        <thead style="width: 100%">
                        <tr>
                            <th scope="col" style="width: 50%;text-align-last: center;color: #00a34e">Mobile</th>
                            <th scope="col" style="width: 50%;text-align-last: center;color: #00a34e">Email</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <th scope="col" style="width: 50%;text-align-last: center;color: #b6b6b6;word-break: break-all;border-right: ridge;">{{ Auth()->user()->mobile}}</th>
                            <th scope="col" style="width: 50%;text-align-last: center;color: #b6b6b6;word-break: break-all;">{{ Auth()->user()->email}}</th>
                        </tr>

                        </tbody>
                    </table>
                    <hr>
                    <div class="card-body" style="padding: 0">
                        <div class="card" style="border-color: #39b358;">
                            <div class="card-body" style="background-color: #f2fff3;   border: 1px solid gray;padding: 10px;border-radius: 10px;">
                                <table class="table-success" style="width: 100%">
                                    <thead style="width: 100%">
                                        <tr>
                                            <th scope="col" style="width: 50%;text-align-last: center;">Username</th>
                                            <th scope="col" style="width: 50%;text-align-last: center;">Created Date</th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <th scope="col" style="width: 50%;text-align-last: center; color: #b6b6b6">{{ Auth()->user()->username}}</th>
                                            <th scope="col" style="width: 50%;text-align-last: center; color: #b6b6b6">{{ Auth()->user()->created_at->format('Y-m-d')}}</th>
                                        </tr>

                                    </tbody>
                                </table>
                                <table class="table-success" style="width: 100%">
                                    <thead style="width: 100%">
                                        <tr>
{{--                                            <th scope="col" style="width: 50%;text-align-last: center;">Login Date</th>--}}
{{--                                            <th scope="col" style="width: 50%;text-align-last: center;">Account</th>--}}
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
{{--                                            <th scope="col" style="width: 50%;text-align-last: center; color: #b6b6b6">{{ Auth()->user()->created_at->format('Y-m-d')}}</th>--}}
{{--                                            <th scope="col" style="width: 50%;text-align-last: center; color: #b6b6b6">{{ Auth()->user()->mobile}}</th>--}}
                                        </tr>

                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-8 ">
                <livewire:tenant.ranking.profile />
            </div>
        </div>
    </div>
@endsection