@extends('layout.app')

@section('content')
    <div class="content-header">
        <div class="container-fluid">
            <h1 class="m-0">Token Dashboard</h1>
        </div>
    </div>

    @php
        $totalCreated = $total_create_token_group_by_pop->sum();
        $totalOpen = $total_not_close_token_group_by_pop->sum();
        $totalAssigned = $total_not_close_token_but_assign_token_group_by_pop->sum();
        $totalUnassigned = $total_not_close_token_and_not_assign_token_group_by_pop->sum();
        $totalNoUpdate = $all_the_tokens_thats_are_not_close_but_assign_but_no_notes_added_more_than_one_hour_group_pop_id->sum();
        $totalDueTimeOver = $token_assign_but_not_solve_till_now_as_per_token_code_solve_time_from_assign_time_group_pop_id->sum();

        $summaryCards = [
            [
                'label' => 'Total Tokens',
                'value' => $totalCreated,
                'bg' => 'bg-primary',
                'icon' => 'fa-ticket-alt',
                'text' => 'text-white',
            ],
            [
                'label' => 'Open Tokens',
                'value' => $totalOpen,
                'bg' => 'bg-info',
                'icon' => 'fa-folder-open',
                'text' => 'text-white',
            ],
            [
                'label' => 'Assigned (Open)',
                'value' => $totalAssigned,
                'bg' => 'bg-success',
                'icon' => 'fa-user-check',
                'text' => 'text-white',
            ],
            [
                'label' => 'Unassigned (Open)',
                'value' => $totalUnassigned,
                'bg' => 'bg-warning',
                'icon' => 'fa-user-clock',
                'text' => 'text-dark',
            ],
            [
                'label' => 'No Update (1hr+)',
                'value' => $totalNoUpdate,
                'bg' => 'bg-secondary',
                'icon' => 'fa-clock',
                'text' => 'text-white',
            ],
            [
                'label' => 'Due Time Over',
                'value' => $totalDueTimeOver,
                'bg' => 'bg-danger',
                'icon' => 'fa-exclamation-triangle',
                'text' => 'text-white',
            ],
        ];

        $columns = [
            ['key' => 'totalcreated', 'data' => $total_create_token_group_by_pop],
            ['key' => 'notclose', 'data' => $total_not_close_token_group_by_pop],
            ['key' => 'assigned', 'data' => $total_not_close_token_but_assign_token_group_by_pop],
            ['key' => 'unassigned', 'data' => $total_not_close_token_and_not_assign_token_group_by_pop],
            [
                'key' => 'noupdate',
                'data' => $all_the_tokens_thats_are_not_close_but_assign_but_no_notes_added_more_than_one_hour_group_pop_id,
            ],
            [
                'key' => 'timeover',
                'data' => $token_assign_but_not_solve_till_now_as_per_token_code_solve_time_from_assign_time_group_pop_id,
            ],
        ];
    @endphp

    {{-- Summary Cards --}}
    <div class="row mb-3">
        @foreach ($summaryCards as $card)
            <div class="col-lg-3 col-6">
                <div class="card {{ $card['bg'] }} {{ $card['text'] }}">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="card-title {{ $card['text'] }} mb-1">{{ $card['label'] }}</h6>
                                <h3 class="mb-0">{{ number_format($card['value']) }}</h3>
                            </div>
                            <div><i class="fas {{ $card['icon'] }} fa-2x opacity-50"></i></div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- Table --}}
    <div class="mt-2 card">
        <div class="card-header bg-dark text-white">
            <h5 class="mb-0"><i class="fas fa-chart-bar mr-1"></i> Token Summary by POP</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive token-dashboard-table-wrap">
                <table id="dataTable" class="table table-bordered table-hover">
                    <thead class="bg-dark text-white ">
                        <tr>
                            <th>#</th>
                            <th>POP Name</th>
                            <th class="text-center">Total Created</th>
                            <th class="text-center">Open</th>
                            <th class="text-center">Assigned</th>
                            <th class="text-center">Unassigned</th>
                            <th class="text-center">No Update More Than One Hour</th>
                            <th class="text-center">Due Time Over</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($pops as $popId => $popName)
                            <tr>
                                <td>{{ $popId }}</td>
                                <td><strong>{{ $popName }}</strong></td>
                                @foreach ($columns as $col)
                                    @php $count = $col['data']->get($popId, 0); @endphp
                                    <td class="text-center">
                                        @if ($count > 0)
                                            <a
                                                href="{{ route('token-detail-report', ['pop_id' => $popId, 'type' => $col['key']]) }}">
                                                {{ number_format($count) }}
                                            </a>
                                        @endif
                                    </td>
                                @endforeach
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center text-muted py-4">No POP data available.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <style>
        .token-dashboard-table-wrap {
            max-height: 600px;
            overflow-y: auto;
            overflow-x: auto;
            position: relative;
        }


        #dataTable thead th.sorting:before,
        #dataTable thead th.sorting:after,
        #dataTable thead th.sorting_asc:before,
        #dataTable thead th.sorting_asc:after,
        #dataTable thead th.sorting_desc:before,
        #dataTable thead th.sorting_desc:after {
            opacity: 0.3;
        }

        .sub-menu li {
            font-size: 1em;
            padding: .25em 1em;
            line-height: 1em;
        }

        .sub-menu {
            padding: 0;
            max-height: 200px;
            overflow-y: auto;
        }

        li.selected {
            background: #17A2B8 !important;
        }
    </style>
@endsection

@section('ajax')
    <script>
        $(document).ready(function() {
            if ($.fn.DataTable.isDataTable('#dataTable')) {
                $('#dataTable').DataTable().destroy();
            }

            $('#dataTable').DataTable({
                order: [
                    [1, 'asc']
                ],
                pageLength: 500,
                lengthMenu: [
                    [10, 25, 50, 100, 500, -1],
                    [10, 25, 50, 100, 500, 'All']
                ],
                columnDefs: [{
                        orderable: false,
                        targets: 0
                    },
                    
                ],
                scrollY: '500px',
                scrollCollapse: true,
                paging: true,
                fixedHeader: false
            });
        });
    </script>
@endsection