@extends('layouts.app')

@section('title', 'Internal Marketing & Proofing Reports')

@section('content')
<div class="space-y-8">

    <!-- Header -->
    <div class="pb-4 border-b border-slate-200">
        <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Internal Marketing & Proofing Reports</h1>
        <p class="text-xs text-slate-500 mt-1">Analytics on request throughput, revision rates, designer turnaround times, and admin submission patterns.</p>
    </div>

    <!-- Section 1: Overall Portal KPI Metrics -->
    <div>
        <h2 class="text-xs font-bold text-harcourts-navy uppercase tracking-wider mb-3">Overall Turnaround & Productivity Metrics</h2>
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
            <div class="bg-white p-4 rounded-lg border border-slate-200 shadow-sm">
                <div class="text-[10px] font-bold text-slate-500 uppercase">Requests This Month</div>
                <div class="text-2xl font-black text-harcourts-navy mt-1">{{ $monthlyRequests }}</div>
            </div>

            <div class="bg-white p-4 rounded-lg border border-slate-200 shadow-sm">
                <div class="text-[10px] font-bold text-slate-500 uppercase">Completed Jobs</div>
                <div class="text-2xl font-black text-emerald-600 mt-1">{{ $completedCount }}</div>
            </div>

            <div class="bg-white p-4 rounded-lg border border-slate-200 shadow-sm">
                <div class="text-[10px] font-bold text-slate-500 uppercase">Open Active Jobs</div>
                <div class="text-2xl font-black text-blue-600 mt-1">{{ $openCount }}</div>
            </div>

            <div class="bg-white p-4 rounded-lg border border-slate-200 shadow-sm">
                <div class="text-[10px] font-bold text-slate-500 uppercase">Urgent Jobs</div>
                <div class="text-2xl font-black text-amber-600 mt-1">{{ $urgentCount }}</div>
            </div>

            <div class="bg-white p-4 rounded-lg border border-slate-200 shadow-sm">
                <div class="text-[10px] font-bold text-slate-500 uppercase">Overdue Jobs</div>
                <div class="text-2xl font-black text-red-600 mt-1">{{ $overdueCount }}</div>
            </div>

            <div class="bg-white p-4 rounded-lg border border-slate-200 shadow-sm">
                <div class="text-[10px] font-bold text-slate-500 uppercase">Total Revisions</div>
                <div class="text-2xl font-black text-rose-600 mt-1">{{ $totalRevisions }}</div>
            </div>

            <div class="bg-white p-4 rounded-lg border border-slate-200 shadow-sm">
                <div class="text-[10px] font-bold text-slate-500 uppercase">Avg Revisions / Job</div>
                <div class="text-2xl font-black text-purple-700 mt-1">{{ $avgRevisionsPerJob }}</div>
            </div>

            <div class="bg-white p-4 rounded-lg border border-slate-200 shadow-sm">
                <div class="text-[10px] font-bold text-slate-500 uppercase">Avg 1st Proof Time</div>
                <div class="text-2xl font-black text-slate-800 mt-1">{{ $avgFirstProofTimeHours }} hrs</div>
            </div>

            <div class="bg-white p-4 rounded-lg border border-slate-200 shadow-sm col-span-2 sm:col-span-1">
                <div class="text-[10px] font-bold text-slate-500 uppercase">Avg Completion Time</div>
                <div class="text-2xl font-black text-slate-800 mt-1">{{ $avgCompletionTimeHours }} hrs</div>
            </div>
        </div>
    </div>

    <!-- Section 2: Revision Report (By Harcourts Admin) -->
    <div class="bg-white rounded-lg border border-slate-200 shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-200 bg-slate-50">
            <h2 class="text-sm font-bold text-slate-900">Revision Report — By Harcourts Admin</h2>
            <p class="text-xs text-slate-500 mt-0.5">Tracks revision frequency per Harcourts office admin user to identify high-revision submitters.</p>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs text-slate-700">
                <thead class="bg-slate-100/70 text-slate-500 uppercase tracking-wider font-semibold border-b border-slate-200">
                    <tr>
                        <th class="px-6 py-3">Admin</th>
                        <th class="px-6 py-3">Email Address</th>
                        <th class="px-6 py-3 text-center">Requests Submitted</th>
                        <th class="px-6 py-3 text-center">Revision Requests</th>
                        <th class="px-6 py-3 text-right">Average Revisions Per Request</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-200">
                    @forelse($adminReports as $rpt)
                        <tr class="hover:bg-slate-50 transition-colors">
                            <td class="px-6 py-4 font-bold text-slate-900">{{ $rpt['name'] }}</td>
                            <td class="px-6 py-4 text-slate-500">{{ $rpt['email'] }}</td>
                            <td class="px-6 py-4 text-center font-bold text-slate-800">{{ $rpt['submitted'] }}</td>
                            <td class="px-6 py-4 text-center font-bold text-rose-700">{{ $rpt['revisions'] }}</td>
                            <td class="px-6 py-4 text-right font-black text-purple-800 text-sm">
                                {{ number_format($rpt['avg_revisions'], 2) }} Avg
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-6 py-8 text-center text-slate-400">
                                No admin submission data available yet.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Section 3: Designer Performance Report -->
    <div class="bg-white rounded-lg border border-slate-200 shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-200 bg-slate-50">
            <h2 class="text-sm font-bold text-slate-900">Designer Workload & Turnaround Performance Report</h2>
            <p class="text-xs text-slate-500 mt-0.5">Performance metrics for each designer on completed requests, revision rates, and proof upload speed.</p>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs text-slate-700">
                <thead class="bg-slate-100/70 text-slate-500 uppercase tracking-wider font-semibold border-b border-slate-200">
                    <tr>
                        <th class="px-6 py-3">Designer</th>
                        <th class="px-6 py-3 text-center">Requests Assigned</th>
                        <th class="px-6 py-3 text-center">Requests Completed</th>
                        <th class="px-6 py-3 text-center">Total Revisions</th>
                        <th class="px-6 py-3 text-center">Average Revisions</th>
                        <th class="px-6 py-3 text-center">Avg 1st Proof Time</th>
                        <th class="px-6 py-3 text-right">Avg Completion Time</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-200">
                    @forelse($designerReports as $dr)
                        <tr class="hover:bg-slate-50 transition-colors">
                            <td class="px-6 py-4 font-bold text-slate-900">{{ $dr['name'] }}</td>
                            <td class="px-6 py-4 text-center font-bold text-slate-800">{{ $dr['assigned'] }}</td>
                            <td class="px-6 py-4 text-center font-bold text-emerald-700">{{ $dr['completed'] }}</td>
                            <td class="px-6 py-4 text-center font-bold text-rose-700">{{ $dr['revisions'] }}</td>
                            <td class="px-6 py-4 text-center font-bold text-purple-800">{{ number_format($dr['avg_revisions'], 2) }}</td>
                            <td class="px-6 py-4 text-center text-slate-700 font-medium">{{ $dr['avg_first_proof_hours'] }} hrs</td>
                            <td class="px-6 py-4 text-right font-bold text-slate-900">{{ $dr['avg_completion_hours'] }} hrs</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-6 py-8 text-center text-slate-400">
                                No designer workload data available yet.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection