@extends("admin.layouts.admin-master")
@section('styles')
    <style>
        .dashboard__card__inner.border_top_1 {
            max-height: 350px;
            overflow-y: auto;
            min-height: 350px;
            padding-right: 10px;
        }
    </style>
@endsection
@section("content")
    <div class="dashboard__inner__item">
        <div class="dashboard__inner__item__flex">
            <div class="dashboard__inner__item__left bodyItemPadding">
                <div class="dashboard__inner__header">
                    <div class="dashboard__inner__header__flex">
                        <div class="dashboard__inner__header__left">
                            <h4 class="dashboard__inner__header__title">Welcome, {{ucfirst(\Illuminate\Support\Facades\Auth::guard('admin')->user()->name)}}</h4>
                            <p class="dashboard__inner__header__para">Manage your dashboard here</p>
                        </div>
                    </div>
                </div>
                <div class="dashboard_promo">
                    <div class="row g-4 mt-2">
                        <div class="col-xxl-3 col-xl-4 col-sm-6">
                            <div class="dashboard_promo__single bg__white radius-10 padding-20">
                                <span class="dashboard_promo__single__subtitle">Total Sales</span>
                                <h4 class="dashboard_promo__single__price mt-2">$12,300</h4>
                                <p class="dashboard_promo__single__para mt-3"><span class="percentage"> +20%</span> Than last month</p>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-xl-4 col-sm-6">
                            <div class="dashboard_promo__single bg__white radius-10 padding-20">
                                <span class="dashboard_promo__single__subtitle">Total Orders</span>
                                <h4 class="dashboard_promo__single__price mt-2">810</h4>
                                <p class="dashboard_promo__single__para mt-3"><span class="percentage">+19%</span> Than last month</p>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-xl-4 col-sm-6">
                            <div class="dashboard_promo__single bg__white radius-10 padding-20">
                                <span class="dashboard_promo__single__subtitle">Total Customers</span>
                                <h4 class="dashboard_promo__single__price mt-2">240</h4>
                                <p class="dashboard_promo__single__para mt-3"><span class="percentage"> +08%</span> Than last month</p>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-xl-4 col-sm-6">
                            <div class="dashboard_promo__single bg__white radius-10 padding-20">
                                <span class="dashboard_promo__single__subtitle">Total Revenue</span>
                                <h4 class="dashboard_promo__single__price mt-2">$10,800</h4>
                                <p class="dashboard_promo__single__para mt-3"><span class="percentage percentDown"> -12%</span> Than last month</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row g-4 mt-1">
                    <div class="col-xl-8">
                        <div class="dashboard__card bg__white padding-20 radius-10">
                            <div class="dashboard__card__header">
                                <div class="dashboard__card__header__flex">
                                    <div class="dashboard__card__header__left">
                                        <h5 class="dashboard__card__header__title">Monthly Users
                                            <strong>{{\Carbon\Carbon::now()->year}}</strong></h5>
                                    </div>
                                </div>
                            </div>
                            <div class="chart__item__inner mt-4">
                                <canvas id="monthlyUsersChart" style="box-sizing: border-box; display: block; height: 350px; width: 823.5px;" width="1647" height="700"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="dashboard__card bg__white padding-20 radius-10">
                            <div class="dashboard__card__header">
                                <div class="dashboard__card__header__flex">
                                    <div class="dashboard__card__header__left">
                                        <h5 class="dashboard__card__header__title">Recent Users </h5>
                                    </div>
                                </div>
                            </div>
                            <div class="chart__item__inner custom_table mt-4">
                                <div class="custom_table" style="max-height: 350px;overflow-y: auto">
                                    <table>
                                        <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Date</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @forelse($recentUsers as $user)
                                            <tr>
                                                <td>
                                                    <div class="user-info">
                                                        {{ $user->full_name }}
                                                        <small class="d-block text-muted">{{ $user->email }}</small>
                                                        @if(!empty($user->workspace?->url))
                                                            <a
                                                                target="_blank"
                                                                href="https://{{$user->workspace?->url}}.taskip.app"
                                                                class="d-block text-muted text-xs blue-color"><small>
                                                                    {{ $user->workspace?->url }}.taskip.app</small></a>
                                                        @endif
                                                    </div>
                                                </td>
                                                <td>{{ $user->created_at->format('M d, Y') }}</td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="2" class="text-center">No recent users</td>
                                            </tr>
                                        @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                </div>
                <div class="row g-4 mt-1">
                    <div class="col-xl-12">
                        <div class="dashboard__card bg__white padding-20 radius-10">
                            <div class="dashboard__card__header mb-4">
                                <h5 class="dashboard__card__header__title">Marketing Information submitted by the users</h5>
                            </div>
                            <div class="row">
                                @foreach(['company_types' => 'Company Types', 'roles' => 'User Roles', 'company_sizes' => 'Company Sizes', 'referral_sources' => 'How They Found Us', 'platform_experience' => 'Platform Experience'] as $key => $title)
                                    <div class="dashboard__card bg__white padding-20 radius-10 col-xl-3 m-2">
                                        <div class="dashboard__card__header">
                                            <h5 class="dashboard__card__header__title">{{ $title }}</h5>
                                        </div>
                                        <div class="dashboard__card__inner border_top_1">
                                            <div class="progress__item__area">
                                                @foreach($stats[$key] as $stat)
                                                    @php
                                                        $field_id = '';
                                                        switch($key){
                                                            case ('company_types'):
                                                                $field_id = $stat->company_type;
                                                                break;
                                                                 case ('company_sizes'):
                                                                $field_id = $stat->company_size;
                                                                break;
                                                                 case ('referral_sources'):
                                                                $field_id = $stat->how_you_know_us;
                                                                break;
                                                                 case ('platform_experience'):
                                                                $field_id = $stat->have_you_used_any_platform;
                                                                break;
                                                                 case ('roles'):
                                                                $field_id = $stat->your_role;
                                                                break;
                                                            default:

                                                                break;
                                                        }
                                                        if(empty($field_id)){
                                                            continue;
                                                        }
                                                    @endphp
                                                    <div class="progress__item">
                                                        <span
                                                            class="progress__item__title d-flex justify-content-between">

                                                            {{ getLabel($key, $field_id) }}

                                                            <strong>{{$stat->count}}</strong></span>
                                                        <div class="progress__item__bars">
                                                            <div class="progress__item__main" data-percent="{{ round($stat->percentage) }}"
                                                                 style="width: {{ $stat->percentage }}%;">
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row g-4 mt-1">
                    <div class="col-lg-12">
                        <div class="dashboard__card bg__white padding-20 radius-10">
                            <h5 class="dashboard__card__header__title">Recent Orders</h5>
                            <div class="dashboard__card__inner border_top_1">
                                <div class="dashboard__inventory__table custom_table">
                                    <table>
                                        <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Tenant</th>
                                            <th>Type</th>
                                            <th>Amount</th>
                                            <th>Status</th>
                                            <th>Date</th>
                                            <th>Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @forelse($transaction_logs as $data)
                                            <tr>
                                                <td>{{$data->id}}</td>
                                                <td>
                                                    {{$data->tenant_id}}
                                                </td>
                                                <td>
                                                    {{$data->transaction_type}}
                                                </td>
                                                <td>${{$data->amount}}</td>
                                                <td>
                                                    @if($data->status === 'success')
                                                        <span class="text-white rounded-3 px-2 text-bg-success">{{$data->status}}</span>
                                                    @elseif($data->status === 'updated')
                                                        <span class="text-black rounded-3 px-2 text-bg-warning">{{$data->status}}</span>
                                                    @elseif(in_array($data->status,['deleted','failed']))
                                                        <span class="text-black rounded-3 px-2 text-bg-danger">{{$data->status}}</span>
                                                    @endif
                                                </td>
                                                <td>{{$data->created_at->format('D, d M, Y h:i:sA')}}</td>
                                                <td>

                                                    <div class="dropdown custom__dropdown">
                                                        <button class="dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                                            <i class="las la-ellipsis-h"></i>
                                                        </button>
                                                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
                                                            <li>
                                                                <a class="dropdown-item"
                                                                   href="{{route('transaction-log.show',$data->id)}}">
                                                                    View Details
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <x-admin.delete-popover
                                                                    url="{{route('transaction-log.destroy',$data->id)}}"/>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr><td colspan="5">not data found</td></tr>
                                        @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const ctx = document.getElementById('monthlyUsersChart').getContext('2d');
        const chartConfig = {
            type: 'bar',
            data: {
                labels: @json($allMonths->pluck('month')),
                datasets: [{
                    label: 'Monthly Users',
                    data: @json($allMonths->pluck('users')),
                    backgroundColor: 'rgba(0, 102, 255, 0.8)',
                    borderColor: '#0066FF',
                    borderWidth: 1,
                    barThickness: 40
                }]
            },
            options: {
                maintainAspectRatio: false,
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            drawBorder: false
                        },
                        ticks: {
                            stepSize: 1
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                },
                plugins: {
                    legend: {
                        position: 'top',
                        align: 'end'
                    }
                }
            }
        };

        new Chart(ctx, chartConfig);
    });
</script>
@endsection