@extends('user.layouts.master')
@section('css')
    <style>
        .bg-gradient-green {
            background: linear-gradient(87deg,#2dce89 0,#2dcecc 100%)!important;
        }
        .bg-gradient-info {
            background: linear-gradient(87deg,#11cdef 0,#1171ef 100%)!important;
        }
        .icon-shape {
            display: inline-flex;
            /* padding: 12px; */
            text-align: center;
            border-radius: 50%;
            align-items: center;
            justify-content: center;
        }
        .icon {
            width: 3rem;
            height: 3rem;
        }
        .icon-shape i, .icon-shape svg {
            font-size: 1.25rem;
        }
    </style>
@endsection
@section('user-content')
<div class="page-title-box">
    <div class="row justify-content-center">
        <div class="col-xl-4 col-md-6">
            <div class="card directory-card">
                <div class="card-body">
                    <div class="d-flex">
                        <div class="flex-shrink-0">
                            @if(file_exists($user->image))
                                <img src="{{ URL::to($user->image) }}" alt="{{ $user->name }}" class="img-fluid img-thumbnail rounded-circle avatar-lg">
                            @else
                                <img class="rounded-circle" src="{{ asset('frontend/img/user.png') }}" alt="User Image" width="70px" height="70px">
                            @endif
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h5 class="text-primary font-size-18 mb-1">{{ $user->name }}</h5>
                            <p class="font-size-12 mb-2">Since  {{ \Carbon\Carbon::parse($user->created_at)->format('d M Y')}}</p>
                            <p class="mb-0">User ID: {{ $user->code }}</p>
                            <p class="mb-0">Work Rating: {{ user_rating($user->id) }}</p>
                            @if($user->status == 0)
                                <p class="mb-0">
                                    Reason For Block: <span class="text-danger">{{ $user->reason }}</span>
                                </p>
                            @endif
                            <a href="{{ route('user.manage-profile') }}" class="btn btn-info btn-sm text-white"> Manage Account</a>
                        </div>
                    </div>
                </div>
                <!-- end cardbody -->
            </div>
            <!-- end card -->
            
            <div class="card bg-gradient-green">
                <div class="card-body cust_task_working">
                    <div class="row mb-2">
                        <div class="col">
                            <h5 class="h3 mb-0 text-white">WORK RETED</h5>
                            <h5 class="h3 mb-1 text-white">{{ total_attend_work($user->id) }}</h5>
                        </div>
                        <div class="col-auto">
                            <div class="icon icon-shape bg-white text-dark rounded-circle shadow">
    							<i class="fas fa-tasks"></i>
    						</div>
                        </div>
                    </div>
                    <p class="mt-3 mb-0 text-sm">
    					<span class="text-white mr-2 font-weight-500"><i class="fa fa-percentage"></i> {{work_satisfication($user->id)}}%</span>
    					<span class="text-nowrap text-light font-weight-500">Satisfaction</span>
    				</p>
                </div>
            </div>
            
            <div class="card bg-gradient-info">
                <div class="card-body cust_task_working">
                    <div class="row mb-2">
                        <div class="col">
                            <h5 class="h3 mb-0 text-white">JOB</h5>
                            <h5 class="h3 mb-1 text-white">{{ user_total_job($user->id) }}</h5>
                        </div>
                        <div class="col-auto">
                            <div class="icon icon-shape bg-white text-dark rounded-circle shadow">
    							<i class="fas fa-briefcase"></i>
    						</div>
                        </div>
                    </div>
                    <p class="mt-3 mb-0 text-sm">
    					<span class="text-white mr-2 font-weight-500"><i class="fa fa-percentage"></i> {{job_satisfication($user->id)}}%</span>
    					<span class="text-nowrap text-light font-weight-500">Satisfied</span>
    				</p>
                </div>
            </div>
        </div>
        <div class="col-xl-8 order-xl-1">

            <div class="row justify-content-center">
                <div class="col-12">
                    

                    <div class="card">
                        <div class="card-body cust_task_working">
                            <div class="row mb-2">
                                <div class="col-6">
                                    <h5 class="h3 mb-0">WORK RETED</h5>
                                    <h5 class="h3 mb-1">{{ total_attend_work($user->id) }}</h5>
                                </div>
                                <div class="col-6 text-primary h2"></div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h5 class="h3 mb-0">Overview Working</h5>
                        </div>
                        <div class="card-body cust_task_working">
                            <div class="row mb-2">
                                <div class="col-6">Task Attend</div>
                                <div class="col-6 text-primary h2">{{ total_attend_work($user->id) }}</div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-6">Satisfied <br> <h6>Approved in task</h6></div>
                                <div class="col-6 text-success h2">{{ user_complete_job_approve($user->id) }}</div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-6">Not Satisfied<br><h6>Rejected in task prove</h6></div>
                                <div class="col-6 text-danger h2">{{ user_complete_job_reject($user->id) }}</div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-6">Pending <br><h6>In review for rating</h6></div>
                                <div class="col-6 text-info h2">{{ user_complete_job_pending($user->id) }}</div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-6">Payment Received</div>
                                <div class="col-6 h2" style="color:#fec30f">{{ $user->earning_balance }} $</div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h5 class="h3 mb-0">Overview Job</h5>
                        </div>
                        <div style="color:#27954f">
                            <div class="card-body">
                                <div class="row mb-2">
                                    <div class="col-6">Jobs Posted</div>
                                    <div class="col-6">{{ user_total_job($user->id) }}</div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-6">Total Deposit</div>
                                    <div class="col-6">{{ $user->deposit_balance }} $</div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-6">Paid</div>
                                    <div class="col-6">$0</div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
            
            <div class="row">
                <div class="col-lg-6 col-md-6 col-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="text-center">Working Status</h4>
                            <div>
                                <canvas id="working_status" style="width:100%;max-width:600px"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6 col-md-6 col-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="text-center">Job Status</h4>
                            <div>
                                <canvas id="job_status" style="width:100%;max-width:600px"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@php
    $work_sutisfied = work_approve_ratio($user->id);
    $work_pending = work_pending_ratio($user->id);
    $work_reject = work_reject_ratio($user->id);
    
    $job_sutisfied = job_approve_ratio($user->id);
    $job_pending = job_pending_ratio($user->id);
    $job_reject = job_reject_ratio($user->id);
@endphp

@endsection
@section('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
    <script>
        var xValues = ["Satisfied", "Unsatisfied", "Pending"];
        var workValues = [{{$work_sutisfied}}, {{$work_reject}}, {{$work_pending}}];
        var jobValues = [{{$job_sutisfied}}, {{$job_reject}}, {{$job_pending}}];
        var barColors = [
          "#00aba9",
          "#b91d47",
          "#f5c242"
        ];
        
        new Chart("working_status", {
            type: "doughnut",
            data: {
                labels: xValues,
                datasets: [{
                  backgroundColor: barColors,
                  data: workValues
                }]
            },
            options: {
                title: {
                  display: true
                }
            }
        });
        
        new Chart("job_status", {
            type: "doughnut",
            data: {
                labels: xValues,
                datasets: [{
                  backgroundColor: barColors,
                  data: jobValues
                }]
            },
            options: {
                title: {
                  display: true
                }
            }
        });
    </script>
@endsection