@extends('admin.layouts.app')
<title>Admin Portal Dashboard</title>

@section('content')
<div class="flex min-h-screen bg-gray-50">

    <!-- Main Content -->
    <main class="flex-1 p-8">

        @section('page-title', 'Tele Sales Overview')
        @section('page-desc', 'Comprehensive Tele Sales and KPIs')

        <!-- Cards Grid -->
        <section class="grid grid-cols-3 gap-6 mb-8">

            <!-- Total Assigned Leads -->
            <div class="bg-white rounded-xl shadow-md px-6 py-5">
                <h3 class="font-semibold text-sm mb-1">Total Assigned Leads</h3>
                <p class="text-xs text-gray-500 mb-3">number of</p>
                <div class="text-teal-700 font-bold text-2xl">
                    {{ $data['total_leads'] ?? 0 }}
                </div>
                <div class="text-xs text-teal-400 mt-1">
                    {{ $data['MoM_data']['total_leads_mom_percent'] ?? 0 }}% MoM
                </div>
            </div>

            <!-- Conversion Rate -->
            <div class="bg-white rounded-xl shadow-md px-6 py-5">
                <h3 class="font-semibold text-sm mb-1">Conversion Rate</h3>
                <p class="text-xs text-gray-500 mb-3">quote to purchase</p>
                <div class="text-teal-700 font-bold text-2xl">
                    {{ $data['converted_leads'] ?? 0 }}
                </div>
                <div class="text-xs text-teal-400 mt-1">
                    {{ $data['MoM_data']['converted_leads_mom_percent'] ?? 0 }}% MoM
                </div>
            </div>

            <!-- Call to Conversion -->
            <div class="bg-white rounded-xl shadow-md px-6 py-5">
                <h3 class="font-semibold text-sm mb-1">Call-to-Conversion</h3>
                <p class="text-xs text-gray-500 mb-3">number of days</p>
                <div class="text-teal-700 font-bold text-2xl">
                    {{ $data['call_to_conversion_in_days'] ?? 0 }} days
                </div>
                <div class="text-xs text-teal-400 mt-1">
                    {{ $data['MoM_data']['call_to_conversion_mom_percent'] ?? 0 }}% MoM
                </div>
            </div>

            <!-- Drop Off Rate -->
            <div class="bg-white rounded-xl shadow-md px-6 py-5">
                <h3 class="font-semibold text-sm mb-1">Drop-off Rate</h3>
                <p class="text-xs text-gray-500 mb-3">quote to purchase</p>
                <div class="text-teal-700 font-bold text-2xl">
                    {{ $data['drop_off_rate_percentage'] ?? 0 }}%
                </div>
                <div class="text-xs text-teal-400 mt-1">
                    {{ $data['MoM_data']['drop_off_rate_mom_percent'] ?? 0 }}% MoM
                </div>
            </div>

            <!-- Contact Rate -->
            <div class="bg-white rounded-xl shadow-md px-6 py-5">
                <h3 class="font-semibold text-sm mb-1">Contact Rate</h3>
                <p class="text-xs text-gray-500 mb-3">number of</p>
                <div class="text-teal-700 font-bold text-2xl">
                    {{ $data['contact_rate_percentage'] ?? 0 }}%
                </div>
                <div class="text-xs text-teal-400 mt-1">
                    {{ $data['MoM_data']['contact_rate_mom_percent'] ?? 0 }}% MoM
                </div>
            </div>

            <!-- Cancellation Rate -->
            <div class="bg-white rounded-xl shadow-md px-6 py-5">
                <h3 class="font-semibold text-sm mb-1">Cancellation Rate</h3>
                <p class="text-xs text-gray-500 mb-3">quote to purchase</p>
                <div class="text-teal-700 font-bold text-2xl">
                    {{ $data['cancelled_policies_percentage'] ?? 0 }}%
                </div>
                <div class="text-xs text-teal-400 mt-1">
                    {{ $data['MoM_data']['cancelled_policies_mom_percent'] ?? 0 }}% MoM
                </div>
            </div>

        </section>

        <!-- 🔥 KPI Summary Container -->
        <section class="bg-white rounded-2xl shadow-lg p-6 mb-8">
            <h3 class="font-semibold text-gray-700 mb-4">Agent Performance Summary</h3>

            <div class="grid grid-cols-3 gap-6 text-center">

                <!-- Call Volume -->
                <div class="rounded-xl bg-gray-50 p-5 shadow-sm hover:shadow-md transition">
                    <div class="text-sm text-gray-500 mb-1">Call Volume</div>
                    <div class="text-3xl font-bold text-teal-700">
                        {{ $data['call_volume_per_agent'] ?? 0 }}
                    </div>
                    <div class="text-xs text-teal-400 mt-1">
                        {{ $data['MoM_data']['call_volume_per_agent_mom_percent'] ?? 0 }}% MoM
                    </div>
                    <div class="text-xs text-gray-600 mt-1">per agent</div>
                </div>

                <!-- Contact Rate -->
                <div class="rounded-xl bg-gray-50 p-5 shadow-sm hover:shadow-md transition">
                    <div class="text-sm text-gray-500 mb-1">Contact Rate</div>
                    <div class="text-3xl font-bold text-teal-700">
                        {{ $data['contact_rates_per_agent'] ?? 0 }}%
                    </div>
                    <div class="text-xs text-teal-400 mt-1">
                        {{ $data['MoM_data']['contact_rates_per_agent_mom_percent'] ?? 0 }}% MoM
                    </div>
                    <div class="text-xs text-gray-600 mt-1">per agent</div>
                </div>

                <!-- Cancellation Rate -->
                <div class="rounded-xl bg-gray-50 p-5 shadow-sm hover:shadow-md transition">
                    <div class="text-sm text-gray-500 mb-1">Cancellation Rate</div>
                    <div class="text-3xl font-bold text-red-600">
                        {{ $data['cancelled_policies_percentage'] ?? 0 }}%
                    </div>
                    <div class="text-xs text-teal-400 mt-1">
                        {{ $data['MoM_data']['cancelled_policies_mom_percent'] ?? 0 }}% MoM
                    </div>
                    <div class="text-xs text-gray-600 mt-1">per agent</div>
                </div>

            </div>
        </section>

        <!-- Top Performers Table -->
        <section class="bg-white rounded-xl shadow-lg p-6">
            <h3 class="font-semibold mb-4">Top Performers</h3>

            <table class="w-full text-left text-sm">
                <thead class="text-teal-700 border-b border-teal-700">
                    <tr>
                        <th class="pb-2">Agent Name</th>
                        <th class="pb-2">Revenue (PKR)</th>
                        <th class="pb-2">Conversion Rate</th>
                    </tr>
                </thead>

                <tbody class="text-gray-700">
                    @forelse($data['top_performers'] as $agent)
                        <tr class="border-b border-gray-200">
                            <td class="py-2">{{ $agent['agent_name'] }}</td>
                            <td class="py-2">{{ number_format($agent['revenue']) }}</td>
                            <td class="py-2 text-yellow-500">
                                {{ $agent['conversion_rate_percentage'] }}%
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="3" class="py-4 text-center text-gray-500">
                                No top performers found
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </section>

    </main>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

@include('admin.layouts.toggle-filter')
@endsection