@extends('mainlayout.layout')

@section('title', config('app.name') . ' | Properties')
@section('topbar-search', 'enabled')

@section('content')
<main class="portal-workspace portal-light-type" data-async-directory>
    <header class="portal-page-header">
        <div><span class="portal-eyebrow">Property management</span><h1>Properties</h1><p>Find registered projects and review their plots and order activity.</p></div>
        @if(auth()->user()->hasRole('superadmin') || auth()->user()->can('property.create'))
            <div class="portal-header-actions"><a href="{{ url('/property/add') }}" class="btn btn-mlk-primary"><i class="bx bx-folder-plus"></i> Add Project</a></div>
        @endif
    </header>
    <section class="portal-kpi-grid portal-kpi-grid--four" aria-label="Property overview">
        <article class="portal-kpi-card"><span class="portal-kpi-icon"><i class="bx bx-buildings"></i></span><span class="portal-kpi-label">Registered properties</span><strong>{{ number_format($metrics['total']) }}</strong></article>
        <article class="portal-kpi-card"><span class="portal-kpi-icon tone-dark"><i class="bx bx-check-circle"></i></span><span class="portal-kpi-label">Published projects</span><strong>{{ number_format($metrics['published']) }}</strong></article>
        <article class="portal-kpi-card"><span class="portal-kpi-icon tone-orange"><i class="bx bx-edit"></i></span><span class="portal-kpi-label">Draft projects</span><strong>{{ number_format($metrics['draft']) }}</strong></article>
        <article class="portal-kpi-card"><span class="portal-kpi-icon"><i class="bx bx-map"></i></span><span class="portal-kpi-label">Total plots</span><strong>{{ number_format($metrics['plots']) }}</strong></article>
    </section>
    <section class="portal-card" data-async-list>
        <form class="portal-filter-bar portal-filter-bar--list" action="{{ url('/property/view') }}" method="GET" data-async-filter>
            @if(request()->filled('per_page'))<input type="hidden" name="per_page" value="{{ request('per_page') }}">@endif
            <label class="portal-search-field"><i class="bx bx-search"></i><input type="search" name="prop_name" value="{{ $search }}" placeholder="Search project, owner, region or district" aria-label="Search properties" autocomplete="off" data-auto-submit></label>
            <select name="visibility" aria-label="Filter properties by publication" data-auto-change>
                <option value="">All projects</option><option value="published" @selected($visibility === 'published')>Published</option><option value="draft" @selected($visibility === 'draft')>Draft</option>
            </select>
            <button class="btn btn-mlk-primary" type="submit"><i class="bx bx-search"></i> Search</button>
            @if($search !== '' || $visibility !== '')<a class="btn btn-mlk-outline" href="{{ url('/property/view') }}" data-async-clear>Clear</a>@endif
        </form>
        <header class="portal-card-header">
            <div><h2>{{ $search !== '' || $visibility !== '' ? 'Matching properties' : 'Recent properties' }}</h2><p>Newest projects first. Choose how many results to show per page.</p></div>
            <span class="portal-status portal-status--neutral">@if($properties->total()){{ $properties->firstItem() }}–{{ $properties->lastItem() }} of {{ number_format($properties->total()) }}@else 0 properties @endif</span>
        </header>
        <div class="portal-directory-progress" data-async-progress role="status" aria-live="polite"><span></span> Loading properties…</div>
        <div class="table-responsive">
            <table class="table portal-table">
                <thead><tr><th>Project</th><th>Property owner</th><th>Location</th><th>Plots</th><th>Orders</th><th>Status</th><th>Registered</th><th>Actions</th></tr></thead>
                <tbody>
                @forelse($properties as $property)
                    @php($propertyUrl = url('/property/show/' . encrypt($property->id)))
                    <tr class="portal-clickable-row" data-href="{{ $propertyUrl }}" tabindex="0" role="link" aria-label="View project {{ $property->name }}">
                        <td><a href="{{ $propertyUrl }}">{{ $property->name }}</a><small>{{ $property->area_size ? number_format($property->area_size) . ' m²' : 'Area not available' }}</small></td>
                        <td>@if($property->propertyowner)<a href="{{ route('property-owners.show', encrypt($property->propertyownerid)) }}">{{ $property->propertyowner->name }}</a>@else Owner unavailable @endif</td>
                        <td>{{ $property->city ?: (optional($property->regionDetails)->name ?: 'Location unavailable') }}<small>{{ optional($property->districtDetails)->name }}</small></td>
                        <td>@if($property->propertyplots_count)<a href="{{ url('/property/viewplots/' . encrypt($property->id)) }}">{{ number_format($property->propertyplots_count) }}</a>@else 0 @endif</td>
                        <td><a href="{{ url('/property/orders/' . encrypt($property->id)) }}">{{ number_format($property->orders_count) }}</a></td>
                        <td><span class="portal-status {{ $property->visible ? 'portal-status--success' : 'portal-status--neutral' }}">{{ $property->status_label }}</span></td>
                        <td>{{ optional($property->created_at)->format('d M Y') ?: '—' }}<small>{{ optional($property->created_at)->format('H:i') }}</small></td>
                        <td>@if(auth()->user()->hasRole('superadmin') || auth()->user()->can('property.edit'))<a href="{{ url('/property/addplots/' . encrypt($property->id)) }}">Add plots</a>@endif</td>
                    </tr>
                @empty
                    <tr><td colspan="8"><div class="portal-empty portal-empty--muted compact">No properties match the current search.</div></td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
        @include('partials.directory-pagination', ['paginator' => $properties])
    </section>
</main>
@endsection

@push('scripts')
<script src="{{ asset('/web/assets/js/portal-async-directory.js') }}?v=2" defer></script>
@endpush