@extends('layouts.app')
@section('page-title', 'Acknowledgement Report')

@section('content')

<div x-data="ackReportApp({
    dataUrl: '{{ route('admin.acknowledgements.data') }}',
    tab: '{{ $activeView }}',
    stats: @js($stats),
})" x-cloak>

<x-admin-hero-header
    title="Acknowledgement Report"
    subtitle="Track document read compliance across all users and folders"
    eyebrow="Compliance"
>
    <x-slot:icon>
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/>
        </svg>
    </x-slot:icon>
</x-admin-hero-header>


{{-- Summary tiles --}}
<div class="summary-grid-4 mb-6">
    <div class="metric-tile">
        <div class="metric-icon bg-primary-50 text-primary-600">
            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
            </svg>
        </div>
        <div>
            <p class="text-[26px] font-extrabold leading-none text-surface-900" x-text="docsWithUsers.toLocaleString()"></p>
            <p class="mt-1 text-xs font-medium text-surface-400">Documents Tracked</p>
            <p class="mt-1.5 text-xs font-semibold text-primary-600">With assigned users</p>
        </div>
    </div>

    <div class="metric-tile">
        <div class="metric-icon bg-emerald-50 text-emerald-600">
            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
        </div>
        <div>
            <p class="text-[26px] font-extrabold leading-none text-surface-900" x-text="totalAcknowledged.toLocaleString()"></p>
            <p class="mt-1 text-xs font-medium text-surface-400">Acknowledgements</p>
            <p class="mt-1.5 text-xs font-semibold text-emerald-600">of <span x-text="totalPossible.toLocaleString()"></span> possible</p>
        </div>
    </div>

    <div class="metric-tile" :class="overallTileBorder">
        <div class="metric-icon" :class="overallIconClass">
            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
            </svg>
        </div>
        <div>
            <p class="text-[26px] font-extrabold leading-none" :class="overallColor"
               x-text="totalPossible > 0 ? overallRate + '%' : '—'"></p>
            <p class="mt-1 text-xs font-medium text-surface-400">Overall Compliance</p>
            <p class="mt-1.5 text-xs font-semibold" :class="overallColor" x-text="overallNote"></p>
        </div>
    </div>

    <div class="metric-tile">
        <div class="metric-icon bg-indigo-50 text-indigo-600">
            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/>
            </svg>
        </div>
        <div>
            <p class="text-[26px] font-extrabold leading-none text-surface-900" x-text="fullyCompliant.toLocaleString()"></p>
            <p class="mt-1 text-xs font-medium text-surface-400">Fully Compliant Docs</p>
            <p class="mt-1.5 text-xs font-semibold text-indigo-600">100% acknowledged</p>
        </div>
    </div>
</div>


{{-- Tab switcher --}}
<div class="mb-5 flex items-center gap-1 border-b border-surface-100">
    <button type="button" @click="switchTab('documents')"
            class="relative px-4 py-2.5 text-sm font-semibold transition-colors"
            :class="tab === 'documents' ? 'text-primary-700 after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-primary-600' : 'text-surface-500 hover:text-surface-800'">
        <span class="flex items-center gap-2">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
            </svg>
            By Document
            <span x-show="tab === 'documents' && !loading"
                  class="rounded-full bg-surface-100 px-1.5 py-0.5 text-[10px] font-bold text-surface-500"
                  x-text="total.toLocaleString()"></span>
        </span>
    </button>
    <button type="button" @click="switchTab('users')"
            class="relative px-4 py-2.5 text-sm font-semibold transition-colors"
            :class="tab === 'users' ? 'text-primary-700 after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-primary-600' : 'text-surface-500 hover:text-surface-800'">
        <span class="flex items-center gap-2">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
            </svg>
            By User
            <span x-show="tab === 'users' && !loading"
                  class="rounded-full bg-surface-100 px-1.5 py-0.5 text-[10px] font-bold text-surface-500"
                  x-text="total.toLocaleString()"></span>
        </span>
    </button>
</div>


{{-- Search input --}}
<div class="mb-5 relative">
    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
        <svg class="h-4 w-4 text-surface-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M17 11A6 6 0 115 11a6 6 0 0112 0z"/>
        </svg>
    </div>
    <input type="text" x-model="search"
           :placeholder="tab === 'documents' ? 'Search by title, doc number or folder...' : 'Search by user name or designation...'"
           class="form-input w-full py-2 pl-9 pr-8 text-sm" />
    <button x-show="search" @click="search = ''" type="button"
            class="absolute inset-y-0 right-0 flex items-center pr-2.5 text-surface-400 hover:text-surface-600">
        <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/>
        </svg>
    </button>
</div>


{{-- Loading state --}}
<div x-show="loading" class="flex items-center justify-center py-20">
    <svg class="h-7 w-7 animate-spin text-primary-500" fill="none" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
    </svg>
</div>


{{-- By Document table --}}
<div x-show="!loading && tab === 'documents'">
    <div class="card overflow-hidden">
        <div class="panel-header">
            <div>
                <p class="panel-title">Document Compliance</p>
                <p class="panel-subtitle">Sorted by compliance rate — lowest first</p>
            </div>
        </div>

        {{-- No data --}}
        <div x-show="!loading && rows.length === 0 && !search" class="empty-state py-16">
            <div class="empty-state-icon">
                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
            </div>
            <p class="font-semibold text-surface-500">No documents yet</p>
        </div>

        {{-- No search results --}}
        <div x-show="!loading && rows.length === 0 && search" class="empty-state py-16">
            <div class="empty-state-icon">
                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-4.35-4.35M17 11A6 6 0 115 11a6 6 0 0112 0z"/>
                </svg>
            </div>
            <p class="font-semibold text-surface-500">No results found</p>
            <button type="button" @click="search = ''"
                    class="mt-3 text-sm font-medium text-primary-600 hover:text-primary-700">Clear search</button>
        </div>

        <div x-show="rows.length > 0" class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-surface-100">
                        <th class="table-th">Document</th>
                        <th class="table-th">Folder</th>
                        <th class="table-th">Type</th>
                        <th class="table-th text-center">Users</th>
                        <th class="table-th text-center">Acknowledged</th>
                        <th class="table-th text-center">Pending</th>
                        <th class="table-th">Compliance</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-surface-50">
                    <template x-for="row in rows" :key="row.id">
                        <tr class="table-row-hover">
                            <td class="table-td max-w-[220px]">
                                <a :href="row.show_url"
                                   class="block truncate font-semibold text-surface-900 hover:text-primary-600"
                                   x-text="row.title"></a>
                                <p x-show="row.doc_number"
                                   class="mt-0.5 font-mono text-xs font-bold text-surface-600"
                                   x-text="row.doc_number"></p>
                            </td>
                            <td class="table-td">
                                <span class="text-sm text-surface-600" x-text="row.folder_name || '—'"></span>
                            </td>
                            <td class="table-td">
                                <template x-if="row.document_type">
                                    <span class="inline-flex rounded-full px-2.5 py-1 text-xs font-semibold"
                                          :class="typeBadge(row.document_type)"
                                          x-text="typeLabel(row.document_type)"></span>
                                </template>
                                <template x-if="!row.document_type">
                                    <span class="text-surface-400">—</span>
                                </template>
                            </td>
                            <td class="table-td text-center">
                                <template x-if="row.total_assigned > 0">
                                    <span class="text-sm font-semibold text-surface-700" x-text="row.total_assigned"></span>
                                </template>
                                <template x-if="row.total_assigned == 0">
                                    <span class="text-xs text-surface-300">—</span>
                                </template>
                            </td>
                            <td class="table-td text-center">
                                <span class="text-sm font-semibold text-emerald-700" x-text="row.acknowledged"></span>
                            </td>
                            <td class="table-td text-center">
                                <template x-if="row.not_acknowledged > 0">
                                    <span class="inline-flex items-center rounded-full bg-red-50 px-2 py-0.5 text-xs font-bold text-red-700"
                                          x-text="row.not_acknowledged"></span>
                                </template>
                                <template x-if="row.not_acknowledged == 0 && row.total_assigned > 0">
                                    <span class="text-xs text-emerald-500">✓ All done</span>
                                </template>
                                <template x-if="row.total_assigned == 0">
                                    <span class="text-xs text-surface-300">—</span>
                                </template>
                            </td>
                            <td class="table-td min-w-[130px]">
                                <template x-if="row.rate !== null">
                                    <div class="flex items-center gap-2">
                                        <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-surface-100">
                                            <div class="h-1.5 rounded-full transition-all"
                                                 :class="rateBar(row.rate)"
                                                 :style="'width: ' + row.rate + '%'"></div>
                                        </div>
                                        <span class="w-9 text-right text-xs font-bold"
                                              :class="rateText(row.rate)"
                                              x-text="row.rate + '%'"></span>
                                    </div>
                                </template>
                                <template x-if="row.rate === null">
                                    <span class="text-xs text-surface-300">No users assigned</span>
                                </template>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
        <div x-show="lastPage > 1" class="flex items-center justify-between border-t border-surface-100 px-6 py-4">
            <p class="text-sm text-surface-400">
                Page <span class="font-semibold text-surface-700" x-text="page"></span>
                of <span class="font-semibold text-surface-700" x-text="lastPage"></span>
                &middot; <span class="font-semibold text-surface-700" x-text="total.toLocaleString()"></span> total
            </p>
            <div class="flex items-center gap-2">
                <button type="button" @click="goToPage(page - 1)" :disabled="page <= 1 || loading"
                        class="btn bg-surface-100 text-surface-700 hover:bg-surface-200 disabled:opacity-40 disabled:cursor-not-allowed">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                    </svg>
                    Prev
                </button>
                <button type="button" @click="goToPage(page + 1)" :disabled="page >= lastPage || loading"
                        class="btn bg-surface-100 text-surface-700 hover:bg-surface-200 disabled:opacity-40 disabled:cursor-not-allowed">
                    Next
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>


{{-- By User table --}}
<div x-show="!loading && tab === 'users'">
    <div class="card overflow-hidden">
        <div class="panel-header">
            <div>
                <p class="panel-title">User Compliance</p>
                <p class="panel-subtitle">Sorted by compliance rate — lowest first</p>
            </div>
        </div>

        {{-- No data --}}
        <div x-show="!loading && rows.length === 0 && !search" class="empty-state py-16">
            <div class="empty-state-icon">
                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
                </svg>
            </div>
            <p class="font-semibold text-surface-500">No active users found</p>
        </div>

        {{-- No search results --}}
        <div x-show="!loading && rows.length === 0 && search" class="empty-state py-16">
            <div class="empty-state-icon">
                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-4.35-4.35M17 11A6 6 0 115 11a6 6 0 0112 0z"/>
                </svg>
            </div>
            <p class="font-semibold text-surface-500">No results found</p>
            <button type="button" @click="search = ''"
                    class="mt-3 text-sm font-medium text-primary-600 hover:text-primary-700">Clear search</button>
        </div>

        <div x-show="rows.length > 0" class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-surface-100">
                        <th class="table-th">User</th>
                        <th class="table-th">Folders</th>
                        <th class="table-th text-center">Total Docs</th>
                        <th class="table-th text-center">Acknowledged</th>
                        <th class="table-th text-center">Pending</th>
                        <th class="table-th">Compliance</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-surface-50">
                    <template x-for="row in rows" :key="row.id">
                        <tr class="table-row-hover">
                            <td class="table-td">
                                <div class="flex items-center gap-3">
                                    <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary-100 text-xs font-bold text-primary-700"
                                         x-text="row.full_name.charAt(0).toUpperCase()"></div>
                                    <div class="min-w-0">
                                        <p class="truncate font-semibold text-surface-900" x-text="row.full_name"></p>
                                        <p x-show="row.designation"
                                           class="mt-0.5 truncate text-xs text-surface-400"
                                           x-text="row.designation"></p>
                                    </div>
                                </div>
                            </td>
                            <td class="table-td">
                                <span class="text-sm font-semibold text-surface-700" x-text="row.folder_count"></span>
                                <span class="ml-1 text-xs text-surface-400" x-text="row.folder_count === 1 ? 'folder' : 'folders'"></span>
                            </td>
                            <td class="table-td text-center">
                                <template x-if="row.total_docs > 0">
                                    <span class="text-sm font-semibold text-surface-700" x-text="row.total_docs"></span>
                                </template>
                                <template x-if="row.total_docs == 0">
                                    <span class="text-xs text-surface-300">—</span>
                                </template>
                            </td>
                            <td class="table-td text-center">
                                <span class="text-sm font-semibold text-emerald-700" x-text="row.acknowledged"></span>
                            </td>
                            <td class="table-td text-center">
                                <template x-if="row.not_acknowledged > 0">
                                    <span class="inline-flex items-center rounded-full bg-red-50 px-2 py-0.5 text-xs font-bold text-red-700"
                                          x-text="row.not_acknowledged"></span>
                                </template>
                                <template x-if="row.not_acknowledged == 0 && row.total_docs > 0">
                                    <span class="text-xs text-emerald-500">✓ All done</span>
                                </template>
                                <template x-if="row.total_docs == 0">
                                    <span class="text-xs text-surface-300">—</span>
                                </template>
                            </td>
                            <td class="table-td min-w-[130px]">
                                <template x-if="row.rate !== null">
                                    <div class="flex items-center gap-2">
                                        <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-surface-100">
                                            <div class="h-1.5 rounded-full transition-all"
                                                 :class="rateBar(row.rate)"
                                                 :style="'width: ' + row.rate + '%'"></div>
                                        </div>
                                        <span class="w-9 text-right text-xs font-bold"
                                              :class="rateText(row.rate)"
                                              x-text="row.rate + '%'"></span>
                                    </div>
                                </template>
                                <template x-if="row.rate === null">
                                    <span class="text-xs text-surface-300">No docs assigned</span>
                                </template>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
        <div x-show="lastPage > 1" class="flex items-center justify-between border-t border-surface-100 px-6 py-4">
            <p class="text-sm text-surface-400">
                Page <span class="font-semibold text-surface-700" x-text="page"></span>
                of <span class="font-semibold text-surface-700" x-text="lastPage"></span>
                &middot; <span class="font-semibold text-surface-700" x-text="total.toLocaleString()"></span> total
            </p>
            <div class="flex items-center gap-2">
                <button type="button" @click="goToPage(page - 1)" :disabled="page <= 1 || loading"
                        class="btn bg-surface-100 text-surface-700 hover:bg-surface-200 disabled:opacity-40 disabled:cursor-not-allowed">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                    </svg>
                    Prev
                </button>
                <button type="button" @click="goToPage(page + 1)" :disabled="page >= lastPage || loading"
                        class="btn bg-surface-100 text-surface-700 hover:bg-surface-200 disabled:opacity-40 disabled:cursor-not-allowed">
                    Next
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>

</div>

@endsection