@extends('admin.layouts.app')

@section('title', 'All Projects')
@section('breadcrumb')
<li class="flex items-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-300" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg></li>
<li><a href="{{ route('admin.projects.index') }}" class="hover:text-primary-600 transition-colors">Projects</a></li>
@endsection
@section('heading', 'All Projects')
@section('subheading', 'Manage and view all real estate projects across your platform.')
@section('actions')
<a href="{{ route('admin.projects.create') }}" class="px-5 py-2.5 bg-primary-500 text-white text-sm font-medium rounded-lg hover:bg-primary-600 transition-colors shadow-sm">Add Project</a>
@endsection

@section('content')

@if (session('success'))
    <div class="mb-6 p-4 bg-emerald-50 border border-emerald-100 rounded-xl text-sm text-emerald-700">{{ session('success') }}</div>
@endif

{{-- Stats --}}
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-5 mb-8">
    <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="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
            </div>
        </div>
        <p class="text-2xl font-semibold text-gray-900">{{ number_format($total) }}</p>
        <p class="text-sm text-gray-500 mt-1">Total Projects</p>
    </div>
    <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="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/></svg>
            </div>
        </div>
        <p class="text-2xl font-semibold text-gray-900">{{ number_format($active) }}</p>
        <p class="text-sm text-gray-500 mt-1">Published</p>
    </div>
    <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="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
        </div>
        <p class="text-2xl font-semibold text-gray-900">{{ number_format($upcoming) }}</p>
        <p class="text-sm text-gray-500 mt-1">Pre-Launch</p>
    </div>
    <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="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
        </div>
        <p class="text-2xl font-semibold text-gray-900">{{ number_format($completed) }}</p>
        <p class="text-sm text-gray-500 mt-1">Completed</p>
    </div>
</div>

{{-- Search & Filters --}}
<form method="GET" action="{{ route('admin.projects.index') }}" class="bg-white rounded-xl border border-gray-100 p-6 mb-6">
    <div class="flex flex-col lg:flex-row gap-4">
        <div class="flex-1">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Search by title, builder, city, ID..." class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none">
        </div>
        <div class="flex flex-wrap items-center gap-2">
            <select name="status" class="px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm text-gray-600 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none bg-white">
                <option value="">Publish Status</option>
                <option value="draft" {{ request('status') === 'draft' ? 'selected' : '' }}>Draft</option>
                <option value="published" {{ request('status') === 'published' ? 'selected' : '' }}>Published</option>
            </select>
            <select name="listing_status" class="px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm text-gray-600 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none bg-white">
                <option value="">Listing Status</option>
                <option value="pre_launch" {{ request('listing_status') === 'pre_launch' ? 'selected' : '' }}>Pre-Launch</option>
                <option value="under_construction" {{ request('listing_status') === 'under_construction' ? 'selected' : '' }}>Under Construction</option>
                <option value="ready_to_move" {{ request('listing_status') === 'ready_to_move' ? 'selected' : '' }}>Ready to Move</option>
                <option value="completed" {{ request('listing_status') === 'completed' ? 'selected' : '' }}>Completed</option>
            </select>
            <button type="submit" class="px-5 py-2.5 bg-primary-500 text-white text-sm font-medium rounded-lg hover:bg-primary-600">Apply</button>
            <a href="{{ route('admin.projects.index') }}" class="px-5 py-2.5 border border-gray-200 text-gray-600 text-sm font-medium rounded-lg hover:bg-gray-50">Reset</a>
        </div>
    </div>
</form>

{{-- Table --}}
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="border-b border-gray-100 bg-gray-50/50">
                    <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Project Name</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Location</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Total Units</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Price Range</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">RERA</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Status</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Date</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3 w-28">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($projects as $project)
                <tr class="hover:bg-gray-50/50 transition-colors">
                    <td class="px-5 py-3.5">
                        <p class="font-medium text-gray-800">{{ $project->title }}</p>
                        <p class="text-xs text-gray-400">{{ $project->builder_name ?? '—' }}</p>
                    </td>
                    <td class="px-5 py-3.5 text-gray-600">{{ $project->city ? $project->city . ($project->state ? ', ' . $project->state : '') : '—' }}</td>
                    <td class="px-5 py-3.5 text-gray-600">{{ $project->total_units ? number_format($project->total_units) : '—' }}</td>
                    <td class="px-5 py-3.5 font-medium text-gray-800">{{ $project->price_range_label }}</td>
                    <td class="px-5 py-3.5">
                        <span class="inline-block px-2 py-0.5 text-[11px] font-medium rounded-full {{ $project->rera_registered ? 'bg-emerald-50 text-emerald-600' : 'bg-amber-50 text-amber-600' }}">{{ $project->rera_registered ? 'Registered' : 'Pending' }}</span>
                    </td>
                    <td class="px-5 py-3.5">
                        @php $ls = $project->listing_status; @endphp
                        <span class="inline-block px-2 py-0.5 text-[11px] font-medium rounded-full
                            {{ $ls === 'pre_launch' ? 'bg-purple-50 text-purple-600' : '' }}
                            {{ $ls === 'under_construction' ? 'bg-blue-50 text-blue-600' : '' }}
                            {{ $ls === 'ready_to_move' ? 'bg-teal-50 text-teal-600' : '' }}
                            {{ $ls === 'completed' ? 'bg-emerald-50 text-emerald-600' : '' }}
                            {{ !in_array($ls, ['pre_launch','under_construction','ready_to_move','completed']) ? 'bg-gray-100 text-gray-600' : '' }}
                        ">{{ $ls ? str_replace('_', ' ', ucfirst($ls)) : '—' }}</span>
                    </td>
                    <td class="px-5 py-3.5 text-gray-500">{{ $project->created_at->format('d M Y') }}</td>
                    <td class="px-5 py-3.5">
                        <div class="flex items-center gap-1">
                            <a href="{{ route('admin.projects.edit', $project) }}" class="p-1.5 rounded-lg hover:bg-gray-100 text-gray-400 hover:text-gray-600" title="Edit">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125"/></svg>
                            </a>
                            <form action="{{ route('admin.projects.destroy', $project) }}" method="POST" class="inline" onsubmit="return confirm('Delete this project?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="p-1.5 rounded-lg hover:bg-red-50 text-gray-400 hover:text-red-500" title="Delete">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/></svg>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="px-5 py-12 text-center text-gray-500">No projects yet. <a href="{{ route('admin.projects.create') }}" class="text-primary-500 hover:underline">Add one</a>.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if ($projects->hasPages())
        <div class="border-t border-gray-100 px-5 py-3.5 flex flex-col sm:flex-row items-center justify-between gap-3">
            <p class="text-sm text-gray-500">Showing {{ $projects->firstItem() ?? 0 }} to {{ $projects->lastItem() ?? 0 }} of {{ $projects->total() }} results</p>
            {{ $projects->links() }}
        </div>
    @endif
</div>

@endsection