@extends('admin.layouts.app')

@section('title', 'Dashboard')
@section('page-title', 'Dashboard')

@section('content')
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 md:gap-4 lg:gap-6 mb-4 md:mb-6 lg:mb-8">
    <div class="bg-white p-4 md:p-5 lg:p-6 rounded-2xl shadow-md border border-[#e8ddd0] hover:shadow-lg transition-shadow">
        <div class="flex items-center justify-between mb-2">
            <h3 class="text-[#645443] text-xs md:text-sm font-semibold">Total Products</h3>
            <svg class="w-6 h-6 md:w-8 md:h-8 text-[#7d6a52]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
            </svg>
        </div>
        <p class="text-2xl sm:text-3xl md:text-4xl font-serif font-bold text-[#7d6a52]">{{ $productsCount }}</p>
    </div>
    <div class="bg-white p-4 md:p-5 lg:p-6 rounded-2xl shadow-md border border-[#e8ddd0] hover:shadow-lg transition-shadow">
        <div class="flex items-center justify-between mb-2">
            <h3 class="text-[#645443] text-xs md:text-sm font-semibold">Total Categories</h3>
            <svg class="w-6 h-6 md:w-8 md:h-8 text-[#9d8566]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
            </svg>
        </div>
        <p class="text-2xl sm:text-3xl md:text-4xl font-serif font-bold text-[#9d8566]">{{ $categoriesCount }}</p>
    </div>
    <div class="bg-white p-4 md:p-5 lg:p-6 rounded-2xl shadow-md border border-[#e8ddd0] hover:shadow-lg transition-shadow sm:col-span-2 lg:col-span-1">
        <div class="flex items-center justify-between mb-2">
            <h3 class="text-[#645443] text-xs md:text-sm font-semibold">Total Inquiries</h3>
            <svg class="w-6 h-6 md:w-8 md:h-8 text-[#c97d60]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
            </svg>
        </div>
        <p class="text-2xl sm:text-3xl md:text-4xl font-serif font-bold text-[#c97d60]">{{ $inquiriesCount }}</p>
        @if($pendingInquiriesCount > 0)
            <p class="text-xs md:text-sm text-[#c97d60] mt-2 font-medium">{{ $pendingInquiriesCount }} pending</p>
        @endif
    </div>
</div>

<div class="bg-white rounded-2xl shadow-md border border-[#e8ddd0] mb-4 md:mb-6">
    <div class="p-4 md:p-6 border-b border-[#e8ddd0]">
        <h2 class="text-xl md:text-2xl font-serif font-bold text-[#524438]">Recent Inquiries</h2>
    </div>
    <div class="p-4 md:p-6">
        @if($recentInquiries->count() > 0)
            <!-- Mobile Card View -->
            <div class="lg:hidden">
                @include('admin.dashboard.partials.mobile-inquiries', ['recentInquiries' => $recentInquiries])
            </div>
            
            <!-- Desktop Table View -->
            <div class="hidden lg:block overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b border-[#e8ddd0]">
                            <th class="text-left py-3 px-4 xl:px-6 text-[#524438] font-semibold text-sm md:text-base">Name</th>
                            <th class="text-left py-3 px-4 xl:px-6 text-[#524438] font-semibold text-sm md:text-base">Email</th>
                            <th class="text-left py-3 px-4 xl:px-6 text-[#524438] font-semibold text-sm md:text-base">Product</th>
                            <th class="text-left py-3 px-4 xl:px-6 text-[#524438] font-semibold text-sm md:text-base">Status</th>
                            <th class="text-left py-3 px-4 xl:px-6 text-[#524438] font-semibold text-sm md:text-base">Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($recentInquiries as $inquiry)
                            <tr class="border-b border-[#e8ddd0] hover:bg-[#faf8f5] transition-colors">
                                <td class="py-3 px-4 xl:px-6 text-[#645443] text-sm md:text-base">{{ $inquiry->name }}</td>
                                <td class="py-3 px-4 xl:px-6 text-[#645443] text-sm md:text-base break-words">{{ $inquiry->email }}</td>
                                <td class="py-3 px-4 xl:px-6 text-[#645443] text-sm md:text-base">{{ $inquiry->product ? $inquiry->product->name : 'General' }}</td>
                                <td class="py-3 px-4 xl:px-6">
                                    <span class="px-2 md:px-3 py-1 rounded-full text-xs font-semibold {{ $inquiry->status === 'pending' ? 'bg-[#fef3c7] text-[#92400e]' : 'bg-[#d1fae5] text-[#065f46]' }}">
                                        {{ ucfirst($inquiry->status) }}
                                    </span>
                                </td>
                                <td class="py-3 px-4 xl:px-6 text-[#645443] text-sm md:text-base">{{ $inquiry->created_at->format('M d, Y') }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="mt-4 md:mt-6">
                <a href="{{ route('admin.inquiries.index') }}" class="text-[#7d6a52] hover:text-[#9d8566] transition-colors font-medium inline-flex items-center gap-2 text-sm md:text-base">
                    View All Inquiries
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </a>
            </div>
        @else
            <p class="text-[#645443] text-center py-6 md:py-8 text-sm md:text-base">No inquiries yet.</p>
        @endif
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6">
    <a href="{{ route('admin.products.create') }}" class="bg-[#7d6a52] text-white p-6 md:p-8 rounded-2xl shadow-lg text-center hover:bg-[#9d8566] transition-all transform hover:scale-105 border border-[#9d8566] active:scale-95">
        <svg class="w-10 h-10 md:w-12 md:h-12 mx-auto mb-3 md:mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
        </svg>
        <h3 class="text-lg md:text-xl font-serif font-semibold mb-2">Add New Product</h3>
        <p class="text-xs md:text-sm opacity-90">Create a new product listing</p>
    </a>
    <a href="{{ route('admin.categories.create') }}" class="bg-[#9d8566] text-white p-6 md:p-8 rounded-2xl shadow-lg text-center hover:bg-[#b8a088] transition-all transform hover:scale-105 border border-[#b8a088] active:scale-95">
        <svg class="w-10 h-10 md:w-12 md:h-12 mx-auto mb-3 md:mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
        </svg>
        <h3 class="text-lg md:text-xl font-serif font-semibold mb-2">Add New Category</h3>
        <p class="text-xs md:text-sm opacity-90">Create a new product category</p>
    </a>
</div>
@endsection