@extends('agent.layouts.app')
<title>Agent Portal Dashboard</title>
@section('content')
    <div class="flex">
        <!-- Main Content -->
        <div class="flex-1 flex flex-col overflow-hidden">

            <!-- Scrollable Content -->
            <div class="flex-1 overflow-auto">
                <div class="p-8">
                    <!-- Stats Cards -->
                    <div class="grid grid-cols-4 gap-6 mb-8">
                        <div
                            class="bg-white shadow-xl p-6 rounded-lg border border-gray-200 shadow-sm hover:scale-110 transform transition duration-300">
                            <p class="text-sm text-gray-600 mb-4">Leads Assigned</p>
                            <div class="flex items-end gap-4">
                                <svg class="bg-teal-50 h-10 rounded-full w-10" viewBox="0 0 40 40" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="20" cy="20" r="20" fill="#E7FCFF" />
                                    <path
                                        d="M24.0016 18.9996V15.9996H21.0016V13.9996H24.0016V10.9996H26.0016V13.9996H29.0016V15.9996H26.0016V18.9996H24.0016ZM27.9516 28.9996C25.8683 28.9996 23.81 28.5454 21.7766 27.6371C19.7433 26.7287 17.8933 25.4412 16.2266 23.7746C14.56 22.1079 13.2725 20.2579 12.3641 18.2246C11.4558 16.1912 11.0016 14.1329 11.0016 12.0496C11.0016 11.7496 11.1016 11.4996 11.3016 11.2996C11.5016 11.0996 11.7516 10.9996 12.0516 10.9996H16.1016C16.335 10.9996 16.5433 11.0787 16.7266 11.2371C16.91 11.3954 17.0183 11.5829 17.0516 11.7996L17.7016 15.2996C17.735 15.5662 17.7266 15.7912 17.6766 15.9746C17.6266 16.1579 17.535 16.3162 17.4016 16.4496L14.9766 18.8996C15.31 19.5162 15.7058 20.1121 16.1641 20.6871C16.6225 21.2621 17.1266 21.8162 17.6766 22.3496C18.1933 22.8662 18.735 23.3454 19.3016 23.7871C19.8683 24.2287 20.4683 24.6329 21.1016 24.9996L23.4516 22.6496C23.6016 22.4996 23.7975 22.3871 24.0391 22.3121C24.2808 22.2371 24.5183 22.2162 24.7516 22.2496L28.2016 22.9496C28.435 23.0162 28.6266 23.1371 28.7766 23.3121C28.9266 23.4871 29.0016 23.6829 29.0016 23.8996V27.9496C29.0016 28.2496 28.9016 28.4996 28.7016 28.6996C28.5016 28.8996 28.2516 28.9996 27.9516 28.9996ZM14.0266 16.9996L15.6766 15.3496L15.2516 12.9996H13.0266C13.11 13.6829 13.2266 14.3579 13.3766 15.0246C13.5266 15.6912 13.7433 16.3496 14.0266 16.9996ZM22.9766 25.9496C23.6266 26.2329 24.2891 26.4579 24.9641 26.6246C25.6391 26.7912 26.3183 26.8996 27.0016 26.9496V24.7496L24.6516 24.2746L22.9766 25.9496Z"
                                        fill="#16A9A8" />
                                </svg>

                                <span class="text-3xl font-bold text-gray-900">{{ $leadsCount }}</span>
                            </div>
                        </div>
                        <div
                            class="bg-white shadow-xl p-6 rounded-lg border border-gray-200 shadow-sm hover:scale-110 transform transition duration-300">
                            <p class="text-sm text-gray-600 mb-4">Leads Pending</p>
                            <div class="flex items-end gap-4">
                                <svg class="bg-teal-50 h-10 rounded-full w-10" viewBox="0 0 40 40" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="20" cy="20" r="20" fill="#E7FCFF" />
                                    <path
                                        d="M25 30C23.6167 30 22.4375 29.5125 21.4625 28.5375C20.4875 27.5625 20 26.3833 20 25C20 23.6167 20.4875 22.4375 21.4625 21.4625C22.4375 20.4875 23.6167 20 25 20C26.3833 20 27.5625 20.4875 28.5375 21.4625C29.5125 22.4375 30 23.6167 30 25C30 26.3833 29.5125 27.5625 28.5375 28.5375C27.5625 29.5125 26.3833 30 25 30ZM26.675 27.375L27.375 26.675L25.5 24.8V22H24.5V25.2L26.675 27.375ZM13 29C12.45 29 11.9792 28.8042 11.5875 28.4125C11.1958 28.0208 11 27.55 11 27V13C11 12.45 11.1958 11.9792 11.5875 11.5875C11.9792 11.1958 12.45 11 13 11H17.175C17.3583 10.4167 17.7167 9.9375 18.25 9.5625C18.7833 9.1875 19.3667 9 20 9C20.6667 9 21.2625 9.1875 21.7875 9.5625C22.3125 9.9375 22.6667 10.4167 22.85 11H27C27.55 11 28.0208 11.1958 28.4125 11.5875C28.8042 11.9792 29 12.45 29 13V19.25C28.7 19.0333 28.3833 18.85 28.05 18.7C27.7167 18.55 27.3667 18.4167 27 18.3V13H25V16H15V13H13V27H18.3C18.4167 27.3667 18.55 27.7167 18.7 28.05C18.85 28.3833 19.0333 28.7 19.25 29H13ZM20 13C20.2833 13 20.5208 12.9042 20.7125 12.7125C20.9042 12.5208 21 12.2833 21 12C21 11.7167 20.9042 11.4792 20.7125 11.2875C20.5208 11.0958 20.2833 11 20 11C19.7167 11 19.4792 11.0958 19.2875 11.2875C19.0958 11.4792 19 11.7167 19 12C19 12.2833 19.0958 12.5208 19.2875 12.7125C19.4792 12.9042 19.7167 13 20 13Z"
                                        fill="#16A9A8" />
                                </svg>

                                <span class="text-3xl font-bold text-gray-900">{{ $leadsPending }}</span>
                            </div>
                        </div>
                        <div
                            class="bg-white shadow-xl p-6 rounded-lg border border-gray-200 shadow-sm hover:scale-110 transform transition duration-300">
                            <p class="text-sm text-gray-600 mb-4">Leads Converted</p>
                            <div class="flex items-end gap-4">
                                <svg class="bg-teal-50 h-10 rounded-full w-10" viewBox="0 0 40 40" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="20" cy="20" r="20" fill="#E7FCFF" />
                                    <path
                                        d="M14 31V22.775L10.75 17.5L15.375 10H24.625L29.25 17.5L26 22.775V31L20 29L14 31ZM16 28.225L20 26.9L24 28.225V25H16V28.225ZM16.5 12L13.1 17.5L16.5 23H23.5L26.9 17.5L23.5 12H16.5ZM18.95 21.575L15.4 18.05L16.825 16.625L18.95 18.75L23.175 14.5L24.6 15.9L18.95 21.575Z"
                                        fill="#16A9A8" />
                                </svg>

                                <span class="text-3xl font-bold text-gray-900">{{ $leadsConverted }}</span>
                            </div>
                        </div>
                        <div
                            class="bg-white shadow-xl p-6 rounded-lg border border-gray-200 shadow-sm hover:scale-110 transform transition duration-300">
                            <p class="text-sm text-gray-600 mb-4">Conversion Rate</p>
                            <div class="flex items-end gap-4">
                                <svg class="bg-teal-50 h-10 px-2 rounded-full w-10" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M7.5 11C6.53333 11 5.70833 10.6583 5.025 9.975C4.34167 9.29167 4 8.46667 4 7.5C4 6.53333 4.34167 5.70833 5.025 5.025C5.70833 4.34167 6.53333 4 7.5 4C8.46667 4 9.29167 4.34167 9.975 5.025C10.6583 5.70833 11 6.53333 11 7.5C11 8.46667 10.6583 9.29167 9.975 9.975C9.29167 10.6583 8.46667 11 7.5 11ZM7.5 9C7.91667 9 8.27083 8.85417 8.5625 8.5625C8.85417 8.27083 9 7.91667 9 7.5C9 7.08333 8.85417 6.72917 8.5625 6.4375C8.27083 6.14583 7.91667 6 7.5 6C7.08333 6 6.72917 6.14583 6.4375 6.4375C6.14583 6.72917 6 7.08333 6 7.5C6 7.91667 6.14583 8.27083 6.4375 8.5625C6.72917 8.85417 7.08333 9 7.5 9ZM16.5 20C15.5333 20 14.7083 19.6583 14.025 18.975C13.3417 18.2917 13 17.4667 13 16.5C13 15.5333 13.3417 14.7083 14.025 14.025C14.7083 13.3417 15.5333 13 16.5 13C17.4667 13 18.2917 13.3417 18.975 14.025C19.6583 14.7083 20 15.5333 20 16.5C20 17.4667 19.6583 18.2917 18.975 18.975C18.2917 19.6583 17.4667 20 16.5 20ZM16.5 18C16.9167 18 17.2708 17.8542 17.5625 17.5625C17.8542 17.2708 18 16.9167 18 16.5C18 16.0833 17.8542 15.7292 17.5625 15.4375C17.2708 15.1458 16.9167 15 16.5 15C16.0833 15 15.7292 15.1458 15.4375 15.4375C15.1458 15.7292 15 16.0833 15 16.5C15 16.9167 15.1458 17.2708 15.4375 17.5625C15.7292 17.8542 16.0833 18 16.5 18ZM5.4 20L4 18.6L18.6 4L20 5.4L5.4 20Z"
                                        fill="#16A9A8" />
                                </svg>

                                <span
                                    class="text-3xl font-bold text-gray-900">{{ number_format($conversionRate, 2) }}%</span>
                            </div>
                        </div>
                    </div>

                    <!-- Leads Table -->
                    @include('agent.leads-table', ['leads' => $leads, 'without_pagination' => true, 'title' => 'Recent Leads'])
                </div>
            </div>
        </div>

    </div>
@endsection