@extends('admin.layouts.app')

@section('title', 'Dashboard')
@section('heading', 'Dashboard')
@section('subheading', 'Welcome back! Here\'s what\'s happening with your platform today.')

@section('content')
 
<!--<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-5 mb-8">-->

<!--    {{-- Total Properties --}}-->
<!--    <div class="bg-white rounded-xl border border-gray-100 p-5 hover:shadow-md transition-shadow">-->
<!--        <div class="flex items-center justify-between mb-4">-->
<!--            <div class="w-10 h-10 rounded-lg bg-primary-50 flex items-center justify-center">-->
<!--                <svg class="w-5 h-5 text-primary-500" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">-->
<!--                    <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 21v-4.875c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125V21m0 0h4.5V3.545M12.75 21h7.5V10.75M2.25 21h1.5m18 0h-18M2.25 9l4.5-1.636M18.75 3l-1.5.545m0 6.205 3 1m1.5.5-1.5-.5M6.75 7.364V3h-3v18m3-13.636 10.5-3.819"/>-->
<!--                </svg>-->
<!--            </div>-->
<!--            <span class="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-1 rounded-full">+12.5%</span>-->
<!--        </div>-->
<!--        <p class="text-2xl font-semibold text-gray-900">2,847</p>-->
<!--        <p class="text-sm text-gray-500 mt-1">Total Properties</p>-->
<!--    </div>-->

<!--    {{-- Active Agents --}}-->
<!--    <div class="bg-white rounded-xl border border-gray-100 p-5 hover:shadow-md transition-shadow">-->
<!--        <div class="flex items-center justify-between mb-4">-->
<!--            <div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center">-->
<!--                <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">-->
<!--                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0"/>-->
<!--                </svg>-->
<!--            </div>-->
<!--            <span class="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-1 rounded-full">+4.2%</span>-->
<!--        </div>-->
<!--        <p class="text-2xl font-semibold text-gray-900">184</p>-->
<!--        <p class="text-sm text-gray-500 mt-1">Active Agents</p>-->
<!--    </div>-->

<!--    {{-- New Enquiries --}}-->
<!--    <div class="bg-white rounded-xl border border-gray-100 p-5 hover:shadow-md transition-shadow">-->
<!--        <div class="flex items-center justify-between mb-4">-->
<!--            <div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center">-->
<!--                <svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">-->
<!--                    <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"/>-->
<!--                </svg>-->
<!--            </div>-->
<!--            <span class="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-1 rounded-full">+18.7%</span>-->
<!--        </div>-->
<!--        <p class="text-2xl font-semibold text-gray-900">423</p>-->
<!--        <p class="text-sm text-gray-500 mt-1">New Enquiries</p>-->
<!--    </div>-->

<!--    {{-- Revenue --}}-->
<!--    <div class="bg-white rounded-xl border border-gray-100 p-5 hover:shadow-md transition-shadow">-->
<!--        <div class="flex items-center justify-between mb-4">-->
<!--            <div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center">-->
<!--                <svg class="w-5 h-5 text-emerald-500" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">-->
<!--                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>-->
<!--                </svg>-->
<!--            </div>-->
<!--            <span class="text-xs font-medium text-red-600 bg-red-50 px-2 py-1 rounded-full">-2.1%</span>-->
<!--        </div>-->
<!--        <p class="text-2xl font-semibold text-gray-900">$1.2M</p>-->
<!--        <p class="text-sm text-gray-500 mt-1">Monthly Revenue</p>-->
<!--    </div>-->
<!--</div>-->
 
<!--<div class="grid grid-cols-1 xl:grid-cols-3 gap-6 mb-8">-->

<!--    {{-- Chart placeholder --}}-->
<!--    <div class="xl:col-span-2 bg-white rounded-xl border border-gray-100 p-6">-->
<!--        <div class="flex items-center justify-between mb-6">-->
<!--            <div>-->
<!--                <h3 class="text-sm font-semibold text-gray-900">Property Overview</h3>-->
<!--                <p class="text-xs text-gray-400 mt-0.5">Listings over the last 12 months</p>-->
<!--            </div>-->
<!--            <div class="flex items-center gap-2">-->
<!--                <button class="px-3 py-1.5 text-xs font-medium bg-primary-50 text-primary-600 rounded-lg">Monthly</button>-->
<!--                <button class="px-3 py-1.5 text-xs font-medium text-gray-400 hover:bg-gray-50 rounded-lg transition-colors">Weekly</button>-->
<!--            </div>-->
<!--        </div>-->
<!--        {{-- Chart area --}}-->
<!--        <div class="h-64 flex items-end justify-between gap-2 px-2">-->
<!--            @foreach ([40, 65, 45, 80, 55, 70, 90, 60, 85, 75, 95, 68] as $i => $val)-->
<!--            <div class="flex-1 flex flex-col items-center gap-2">-->
<!--                <div class="w-full rounded-t-md bg-primary-{{ $val > 70 ? '500' : '200' }} transition-all" style="height: {{ $val }}%"></div>-->
<!--                <span class="text-[10px] text-gray-400">{{ ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][$i] }}</span>-->
<!--            </div>-->
<!--            @endforeach-->
<!--        </div>-->
<!--    </div>-->
 
<!--</div>-->
 
<!--<div class="grid grid-cols-1 xl:grid-cols-2 gap-6">-->

<!--    {{-- Latest properties --}}-->
<!--    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden">-->
<!--        <div class="flex items-center justify-between p-6 pb-0">-->
<!--            <h3 class="text-sm font-semibold text-gray-900">Latest Properties</h3>-->
<!--            <a href="{{ route('admin.properties.index') }}" class="text-xs text-primary-500 hover:text-primary-600 font-medium">View all</a>-->
<!--        </div>-->
<!--         
<!--    </div>-->

<!--    {{-- Latest users --}}-->
<!--    <div class="bg-white rounded-xl border border-gray-100 overflow-hidden">-->
<!--        <div class="flex items-center justify-between p-6 pb-0">-->
<!--            <h3 class="text-sm font-semibold text-gray-900">New Users</h3>-->
<!--            <a href="{{ route('admin.users.index') }}" class="text-xs text-primary-500 hover:text-primary-600 font-medium">View all</a>-->
<!--        </div>-->
<!--        <div class="overflow-x-auto">-->
<!--             
<!--        </div>-->
<!--    </div>-->
<!--</div>-->

@endsection