@extends('layouts.app')

@section('title', 'Admin Portal - Frantyapp')

@section('content')
<div class="bg-black text-white py-10 border-b border-neutral-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <span class="text-[10px] font-bold uppercase tracking-[0.3em] text-brand-gold">Internal Portal</span>
            <h1 class="font-serif-heading font-extrabold text-3xl text-white">Corporate Admin Management</h1>
        </div>
        <div class="flex flex-wrap gap-2">
            <a href="{{ route('admin.properties.create') }}" class="px-4 py-2.5 bg-white text-black font-bold text-xs uppercase tracking-widest hover:bg-gray-200">
                + Add Property
            </a>
            <a href="{{ route('admin.gallery.create') }}" class="px-4 py-2.5 bg-brand-blue text-white font-bold text-xs uppercase tracking-widest hover:bg-brand-darkblue">
                + Upload Photo
            </a>
            <a href="{{ route('admin.agents.create') }}" class="px-4 py-2.5 bg-neutral-900 border border-neutral-800 text-white font-bold text-xs uppercase tracking-widest hover:bg-neutral-800">
                + Add Agent
            </a>
            <a href="{{ route('admin.gallery') }}" class="px-4 py-2.5 bg-neutral-900 border border-neutral-800 text-white font-bold text-xs uppercase tracking-widest hover:bg-neutral-800">
                <i class="fa-solid fa-images mr-1"></i> Gallery Admin
            </a>
            <a href="{{ route('admin.promotions') }}" class="px-4 py-2.5 bg-neutral-900 border border-neutral-800 text-white font-bold text-xs uppercase tracking-widest hover:bg-neutral-800">
                <i class="fa-solid fa-rectangle-ad mr-1"></i> Promos
            </a>
            <a href="{{ route('admin.settings') }}" class="px-4 py-2.5 bg-neutral-900 border border-neutral-800 text-white font-bold text-xs uppercase tracking-widest hover:bg-neutral-800">
                <i class="fa-solid fa-gear mr-1"></i> Settings
            </a>
        </div>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-10">
    
    <!-- Navigation Quick Tiles -->
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
        <a href="{{ route('admin.properties') }}" class="bg-white p-5 border border-gray-200 text-center hover:border-black transition-all">
            <span class="text-[10px] font-bold uppercase tracking-widest text-gray-400 block">Properties</span>
            <span class="font-serif-heading font-extrabold text-3xl text-black block mt-1">{{ $stats['properties_count'] }}</span>
        </a>
        <a href="{{ route('admin.agents') }}" class="bg-white p-5 border border-gray-200 text-center hover:border-black transition-all">
            <span class="text-[10px] font-bold uppercase tracking-widest text-gray-400 block">Agents</span>
            <span class="font-serif-heading font-extrabold text-3xl text-black block mt-1">{{ $stats['agents_count'] }}</span>
        </a>
        <a href="{{ route('admin.blog') }}" class="bg-white p-5 border border-gray-200 text-center hover:border-black transition-all">
            <span class="text-[10px] font-bold uppercase tracking-widest text-gray-400 block">Blog Posts</span>
            <span class="font-serif-heading font-extrabold text-3xl text-black block mt-1">{{ $stats['blog_count'] }}</span>
        </a>
        <a href="{{ route('admin.inquiries') }}" class="bg-white p-5 border border-gray-200 text-center hover:border-black transition-all">
            <span class="text-[10px] font-bold uppercase tracking-widest text-gray-400 block">Inquiries</span>
            <span class="font-serif-heading font-extrabold text-3xl text-brand-gold block mt-1">{{ $stats['inquiries_count'] }}</span>
        </a>
        <a href="{{ route('admin.appointments') }}" class="bg-white p-5 border border-gray-200 text-center hover:border-black transition-all">
            <span class="text-[10px] font-bold uppercase tracking-widest text-gray-400 block">Viewing Requests</span>
            <span class="font-serif-heading font-extrabold text-3xl text-black block mt-1">{{ $stats['appointments_count'] }}</span>
        </a>
        <a href="{{ route('admin.subscribers') }}" class="bg-white p-5 border border-gray-200 text-center hover:border-black transition-all">
            <span class="text-[10px] font-bold uppercase tracking-widest text-gray-400 block">Subscribers</span>
            <span class="font-serif-heading font-extrabold text-3xl text-black block mt-1">{{ $stats['subscribers_count'] }}</span>
        </a>
    </div>

    <!-- Management Tables -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        
        <!-- Customer Inquiries -->
        <div class="bg-white border border-gray-200 p-6 space-y-4">
            <div class="flex items-center justify-between border-b border-gray-100 pb-3">
                <h3 class="font-serif-heading font-bold text-lg text-black">Customer Inquiries</h3>
                <a href="{{ route('admin.inquiries') }}" class="text-xs font-bold text-black uppercase tracking-widest hover:underline">View All</a>
            </div>
            
            <div class="divide-y divide-gray-100 text-sm">
                @forelse($recentInquiries as $inquiry)
                    <div class="py-3 flex flex-col space-y-1">
                        <div class="flex justify-between items-center">
                            <span class="font-bold text-black">{{ $inquiry->name }}</span>
                            <span class="text-[10px] text-gray-400">{{ $inquiry->created_at->diffForHumans() }}</span>
                        </div>
                        <span class="text-xs text-gray-500"><i class="fa-solid fa-phone mr-1"></i> {{ $inquiry->phone }} | {{ $inquiry->email }}</span>
                        <p class="text-xs text-gray-600 line-clamp-1 bg-gray-50 p-2 border border-gray-100 mt-1">{{ $inquiry->message }}</p>
                    </div>
                @empty
                    <p class="text-gray-400 text-xs py-4 text-center">No inquiries recorded yet.</p>
                @endforelse
            </div>
        </div>

        <!-- Viewing Appointments -->
        <div class="bg-white border border-gray-200 p-6 space-y-4">
            <div class="flex items-center justify-between border-b border-gray-100 pb-3">
                <h3 class="font-serif-heading font-bold text-lg text-black">Inspection Appointments</h3>
                <a href="{{ route('admin.appointments') }}" class="text-xs font-bold text-black uppercase tracking-widest hover:underline">View All</a>
            </div>
            
            <div class="divide-y divide-gray-100 text-sm">
                @forelse($recentAppointments as $apt)
                    <div class="py-3 flex flex-col space-y-1">
                        <div class="flex justify-between items-center">
                            <span class="font-bold text-black">{{ $apt->name }}</span>
                            <span class="text-[10px] font-bold uppercase tracking-widest text-black bg-gray-100 px-2 py-0.5 border border-gray-200">{{ $apt->preferred_date->format('M d, Y') }} @ {{ $apt->preferred_time }}</span>
                        </div>
                        <span class="text-xs text-gray-500"><i class="fa-solid fa-house mr-1"></i> Property: {{ $apt->property->title ?? 'General Listing' }}</span>
                        <span class="text-xs text-gray-500"><i class="fa-solid fa-phone mr-1"></i> {{ $apt->phone }}</span>
                    </div>
                @empty
                    <p class="text-gray-400 text-xs py-4 text-center">No appointments scheduled yet.</p>
                @endforelse
            </div>
        </div>

    </div>

</div>
@endsection
