@extends('layout.app')
@section('styles')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap4.min.css">
    <style>
        .summary-card {
            border-radius: 12px;
            transition: transform 0.2s, box-shadow 0.2s;
            overflow: hidden;
        }

        .summary-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
        }

        .summary-card .card-body {
            padding: 1.1rem 1.25rem;
        }

        .summary-card .card-icon {
            font-size: 2rem;
            opacity: 0.25;
        }

        .summary-card h6 {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-weight: 600;
            margin-bottom: 0.25rem;
        }

        .summary-card h2 {
            font-size: 2rem;
            font-weight: 700;
            line-height: 1;
            margin: 0;
        }

        .summary-card .ratio-bar {
            height: 4px;
            border-radius: 0;
            background: rgba(255, 255, 255, 0.2);
            margin: 0 -1.25rem -1.1rem;
        }

        .summary-card .ratio-bar-fill {
            height: 100%;
            background: rgba(255, 255, 255, 0.55);
            border-radius: 0;
            transition: width 0.6s ease;
        }

        .last-updated {
            font-size: 0.78rem;
            color: #6c757d;
        }

        #employeeTable tbody tr:hover {
            background-color: rgba(0, 0, 0, 0.04);
            cursor: default;
        }
    </style>
@endsection

@section('content')
    <div class="content-header">
        <div class="container-fluid">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                <h1 class="m-0">{{ $page_title ?? 'New Line Request Summary' }}</h1>
                <div class="d-flex align-items-center gap-2">
                    <span class="last-updated">
                        Last updated: <strong>{{ now()->format('h:i:s A') }}</strong>
                    </span>
                    <button class="btn btn-sm btn-outline-primary" onclick="window.location.reload()">
                        <i class="fas fa-sync-alt"></i> Refresh
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        @php
            $total = $total ?? 0;
            $cards = [
                [
                    'label' => 'Total Requests',
                    'value' => $total,
                    'ratio' => 100,
                    'bg' => 'bg-primary',
                    'text' => 'text-white',
                    'icon' => 'fas fa-list',
                    'url' => route('newline.newIndex',['done_status' => 'No']),
                ],
                [
                    'label' => 'Multi Router',
                    'value' => $multi_router_yes ?? 0,
                    'ratio' => $total > 0 ? round((($multi_router_yes ?? 0) / $total) * 100) : 0,
                    'bg' => 'bg-info',
                    'text' => 'text-white',
                    'icon' => 'fas fa-network-wired',
                    'url' => route('newline.newIndex', ['multi_router' => 'Yes','done_status' => 'No']),
                ],
                [
                    'label' => 'Pending New Line Request',
                    'value' => $total_pending_new_line_request ?? 0,
                    'ratio' => $total > 0 ? round((($total_pending_new_line_request ?? 0) / $total) * 100) : 0,
                    'bg' => 'bg-success',
                    'text' => 'text-white',
                    'icon' => 'fas fa-clock',
                    'url' => route('newline.newIndex', ['done_status' => 'Pending']),
                ],
                [
                    'label' => 'No Response 10 Min over',
                    'value' => $total_10_minutes ?? 0,
                    'ratio' => $total > 0 ? round((($total_10_minutes ?? 0) / $total) * 100) : 0,
                    'bg' => 'bg-secondary',
                    'text' => 'text-white',
                    'icon' => 'fas fa-clock',
                    'url' => route('newline.newIndex',['ten_minutes_over' => 'Yes']),
                ],
                [
                    'label' => 'No Response 60 Min over',
                    'value' => $total_60_minutes ?? 0,
                    'ratio' => $total > 0 ? round((($total_60_minutes ?? 0) / $total) * 100) : 0,
                    'bg' => 'bg-warning',
                    'text' => 'text-dark',
                    'icon' => 'fas fa-hourglass-half',
                    'url' => route('newline.newIndex',['sixty_minutes_over' => 'Yes']),
                ],
                [
                    'label' => 'Unassigned',
                    'value' => $un_assign_count ?? 0,
                    'ratio' => $total > 0 ? round((($un_assign_count ?? 0) / $total) * 100) : 0,
                    'bg' => 'bg-danger',
                    'text' => 'text-white',
                    'icon' => 'fas fa-user-times',
                    'url' => route('newline.newIndex', ['assigned_status' => 'No']),
                ],
                [
                    'label' => 'Follow Up Today or Samaller Then Today',
                    'value' => $follow_up_lines_to_day_or_samaller_then_to_day ?? 0,
                    'ratio' => $total > 0 ? round((($follow_up_lines_to_day_or_samaller_then_to_day ?? 0) / $total) * 100) : 0,
                    'bg' => 'bg-dark',
                    'text' => 'text-white',
                    'icon' => 'fas fa-lock',
                    'url' => route('newline.newIndex', ['to_follow_up_pending' => 'Yes']),
                ],
                [
                    'label' => 'Survey Coverage But Canceled',
                    'value' => $total_canceled ?? 0,
                    'ratio' => $total > 0 ? round((($total_canceled ?? 0) / $total) * 100) : 0,
                    'bg' => 'bg-danger',
                    'text' => 'text-white',
                    'icon' => 'fas fa-times-circle',
                    'url' => route('newline.newIndex',['survey_coverage_but_canceled' => 'Yes']),
                ],
            ];
        @endphp

        <div class="row g-3 mb-4">
            @foreach ($cards as $card)
                <div class="col-xl-3 col-lg-4 col-md-6 col-6">
                    <a target="_blank" href="{{ $card['url'] ?? '#' }}" class="text-decoration-none d-block">
                        <div class="card summary-card shadow-sm {{ $card['bg'] }}">
                            <div class="card-body {{ $card['text'] }}">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <h6 class="{{ $card['text'] }}">{{ $card['label'] }}</h6>
                                        <h2 class="{{ $card['text'] }}">{{ number_format($card['value']) }}</h2>
                                        @if ($card['label'] !== 'Total Requests')
                                            <small class="{{ $card['text'] }} opacity-75">
                                                {{ $card['ratio'] }}% of total
                                            </small>
                                        @endif
                                    </div>
                                    <i class="{{ $card['icon'] }} card-icon"></i>
                                </div>
                                <div class="ratio-bar mt-2">
                                    <div class="ratio-bar-fill" style="width: {{ $card['ratio'] }}%"></div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>

        {{-- Employee Wise Table --}}
        <div class="row">
            <div class="col-lg-6 col-12">
                <div class="card shadow-sm">
                    <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">
                            <i class="fas fa-users me-2"></i> Employee Wise Pending Assigned
                        </h6>
                        <span class="badge bg-warning text-dark">
                            {{ $total_pending_new_line_request ?? 0 }} Total
                        </span>
                    </div>
                    <div class="card-body p-0">
                        <table id="employeeTable" class="table table-hover table-striped mb-0" style="width:100%">
                            <thead class="table-dark">
                                <tr>
                                    <th>#</th>
                                    <th>Employee Name</th>
                                    <th>Pending Count</th>
                                    <th>Share</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($employee_wise_pending as $index => $data)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td>
                                            <div class="d-flex align-items-center gap-2">

                                                {{ $data['user']->name }}
                                            </div>
                                        </td>
                                        <td>
                                            <a href="{{ route('newline.newIndex', ['done_status' => 'Pending','assigned_to' => $data['user']->id]) }}"
                                               target="_blank">
                                                <span class="badge bg-danger px-3 py-2 fs-6">
                                                    {{ $data['count'] }}
                                                </span>
                                            </a>
                                        </td>
                                        <td style="min-width:140px;">
                                            @php
                                                $share =
                                                    ($total_pending_new_line_request ?? 0) > 0
                                                        ? round(
                                                            ($data['count'] / $total_pending_new_line_request) * 100,
                                                        )
                                                        : 0;
                                            @endphp
                                            <div class="d-flex align-items-center gap-2">
                                                <div class="progress flex-grow-1" style="height:8px;">
                                                    <div class="progress-bar bg-danger" style="width:{{ $share }}%">
                                                    </div>
                                                </div>
                                                <small class="text-muted">{{ $share }}%</small>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                            <tfoot class="table-dark">
                                <tr>
                                    <th colspan="2" class="text-end">Total</th>
                                    <th>
                                        <span class="badge bg-warning text-dark px-3 py-2 fs-6">
                                            {{ $total_pending_new_line_request ?? 0 }}
                                        </span>
                                    </th>
                                    <th>100%</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-12">
                <div class="card shadow-sm">
                    <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">
                            <i class="fas fa-users me-2"></i> User Wise Pending (48h+)
                        </h6>
                        <span class="badge bg-warning text-dark">
                            {{ $total_48h_pending ?? 0 }} Total
                        </span>
                    </div>
                    <div class="card-body p-0">
                        <table id="userWisePendingTable" class="table table-hover table-striped mb-0" style="width:100%">
                            <thead class="table-dark">
                                <tr>
                                    <th>#</th>
                                    <th>User Name</th>
                                    <th>Pending Count</th>
                                    <th>Share</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($user_wise_pending_count as $data)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>
                                            <div class="d-flex align-items-center gap-2">
                                                {{ $data['user_name'] }}
                                            </div>
                                        </td>
                                        <td>
                                            <a href="{{ route('newline.newIndex', ['fourtyEighthPending' => 'Yes','logged_user_id' => $data['user_id']]) }}"
                                                target="_blank">
                                                 <span class="badge bg-danger px-3 py-2 fs-6">
                                                     {{ $data['count'] }}
                                                 </span>
                                             </a>

                                        </td>
                                        <td style="min-width:140px;">
                                            @php
                                                $share =
                                                    ($total_48h_pending ?? 0) > 0
                                                        ? round(($data['count'] / $total_48h_pending) * 100)
                                                        : 0;
                                            @endphp
                                            <div class="d-flex align-items-center gap-2">
                                                <div class="progress flex-grow-1" style="height:8px;">
                                                    <div class="progress-bar bg-danger" style="width:{{ $share }}%">
                                                    </div>
                                                </div>
                                                <small class="text-muted">{{ $share }}%</small>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                            <tfoot class="table-dark">
                                <tr>
                                    <th colspan="2" class="text-end">Total</th>
                                    <th>
                                        <span class="badge bg-warning text-dark px-3 py-2 fs-6">
                                            {{ $total_48h_pending ?? 0 }}
                                        </span>
                                    </th>
                                    <th>100%</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('ajax')
    <script>
        $(document).ready(function() {
            $('#employeeTable').DataTable({
                pageLength: 100,
                lengthMenu: [5, 10, 25, 50, 100, 500, -1],
                order: [
                    [2, 'desc']
                ],
                columnDefs: [{
                    orderable: false,
                    targets: [3]
                }, ],
                language: {
                    search: '<i class="fas fa-search"></i>',
                    searchPlaceholder: 'Search employee...',
                    lengthMenu: 'Show _MENU_ employees',
                    info: 'Showing _START_ to _END_ of _TOTAL_ employees',
                    paginate: {
                        previous: '<i class="fas fa-chevron-left"></i>',
                        next: '<i class="fas fa-chevron-right"></i>',
                    },
                },
            });

            $('#userWisePendingTable').DataTable({
                pageLength: 100,
                lengthMenu: [5, 10, 25, 50, 100, 500, -1],
                order: [
                    [2, 'desc']
                ],
                columnDefs: [{
                    orderable: false,
                    targets: [3]
                }, ],
                language: {
                    search: '<i class="fas fa-search"></i>',
                    searchPlaceholder: 'Search employee...',
                    lengthMenu: 'Show _MENU_ employees',
                    info: 'Showing _START_ to _END_ of _TOTAL_ employees',
                    paginate: {
                        previous: '<i class="fas fa-chevron-left"></i>',
                        next: '<i class="fas fa-chevron-right"></i>',
                    },
                },
            });
        });
    </script>
@endsection