@extends('layouts.dashboard')

@section('title', __('messages.properties'))
@section('header', 'Property Portfolio Management')

@section('sidebar')
@include('company-admin.partials.sidebar')
@endsection

@section('content')
@php
    $propertyRoutePrefix = request()->routeIs('agent.*') ? 'agent' : 'company';
@endphp
<!-- Success/Error Messages -->
@if(session('success'))
<div class="mb-6 bg-gradient-to-r from-green-50 to-emerald-50 border-l-4 border-green-500 text-green-700 px-6 py-4 rounded-xl shadow-lg">
    <div class="flex items-center">
        <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <span class="font-semibold">{{ session('success') }}</span>
    </div>
</div>
@endif

@if(session('upload_errors'))
<div class="mb-6 bg-gradient-to-r from-yellow-50 to-orange-50 border-l-4 border-yellow-500 text-yellow-800 px-6 py-4 rounded-xl shadow-lg">
    <div class="flex items-start">
        <svg class="w-6 h-6 mr-3 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
        </svg>
        <div>
            <strong class="font-semibold">Upload Warnings:</strong>
            <ul class="list-disc list-inside mt-2 space-y-1">
                @foreach(session('upload_errors') as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    </div>
</div>
@endif

<!-- Page Header -->
<div class="mb-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
    <div>
        <h2 class="text-3xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent">Property Portfolio</h2>
        <p class="text-sm text-gray-500 mt-1">Manage all your properties and listings</p>
    </div>
    <a href="{{ route($propertyRoutePrefix . '.properties.create') }}" 
       class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-semibold rounded-xl hover:from-purple-700 hover:to-pink-700 transition duration-200 shadow-lg hover:shadow-xl">
        <svg class="w-5 h-5 mr-2" 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>
        Add Property
    </a>
</div>

<!-- Filters -->
<div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6 mb-6">
    <form method="GET" action="{{ route($propertyRoutePrefix . '.properties.index') }}" class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div>
            <label class="block text-sm font-semibold text-gray-700 mb-2">Search</label>
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Title, address, city..." 
                   class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition duration-200">
        </div>
        <div>
            <label class="block text-sm font-semibold text-gray-700 mb-2">Type</label>
            <select name="type" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition duration-200 bg-white">
                <option value="">All Types</option>
                <option value="apartment" {{ request('type') === 'apartment' ? 'selected' : '' }}>Apartment</option>
                <option value="house" {{ request('type') === 'house' ? 'selected' : '' }}>House</option>
                <option value="plot" {{ request('type') === 'plot' ? 'selected' : '' }}>Plot</option>
                <option value="commercial" {{ request('type') === 'commercial' ? 'selected' : '' }}>Commercial</option>
            </select>
        </div>
        <div>
            <label class="block text-sm font-semibold text-gray-700 mb-2">Status</label>
            <select name="status" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition duration-200 bg-white">
                <option value="">All Status</option>
                <option value="available" {{ request('status') === 'available' ? 'selected' : '' }}>Available</option>
                <option value="rented" {{ request('status') === 'rented' ? 'selected' : '' }}>Rented</option>
                <option value="sold" {{ request('status') === 'sold' ? 'selected' : '' }}>Sold</option>
                <option value="maintenance" {{ request('status') === 'maintenance' ? 'selected' : '' }}>Maintenance</option>
            </select>
        </div>
        <div class="flex items-end">
            <button type="submit" 
                    class="w-full px-6 py-2.5 bg-gradient-to-r from-gray-700 to-gray-800 text-white font-semibold rounded-lg hover:from-gray-800 hover:to-gray-900 transition duration-200 shadow-md hover:shadow-lg">
                <span class="flex items-center justify-center">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                    Filter
                </span>
            </button>
        </div>
    </form>
</div>

<!-- Properties grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-6">
    @forelse($properties as $property)
    <article class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden flex flex-col hover:shadow-xl transition-shadow duration-200 group">
        <a href="{{ route($propertyRoutePrefix . '.properties.show', $property) }}" class="relative block aspect-[5/3] bg-gradient-to-br from-gray-100 to-gray-200 overflow-hidden shrink-0">
            @if($property->images->count() > 0)
                <img src="{{ $property->primary_image_url }}"
                     alt="{{ $property->title }}"
                     class="w-full h-full object-cover group-hover:scale-[1.02] transition-transform duration-300"
                     onerror="this.onerror=null; this.src='{{ \App\Helpers\ImageHelper::placeholder(640, 384) }}';">
            @else
                <div class="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-purple-500/90 to-pink-600/90">
                    <svg class="w-16 h-16 text-white/90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                    </svg>
                </div>
            @endif
            <div class="absolute top-3 left-3 flex flex-wrap gap-2">
                <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold bg-white/95 text-purple-700 border border-purple-100 shadow-sm capitalize backdrop-blur-sm">
                    {{ $property->type }}
                </span>
            </div>
            <div class="absolute top-3 right-3">
                @if($property->status === 'available')
                    <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold bg-green-500 text-white shadow-md">
                        <span class="w-1.5 h-1.5 rounded-full bg-white mr-1.5"></span>
                        Available
                    </span>
                @elseif($property->status === 'rented')
                    <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-500 text-white shadow-md">
                        <span class="w-1.5 h-1.5 rounded-full bg-white mr-1.5"></span>
                        Rented
                    </span>
                @else
                    <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold bg-gray-700 text-white shadow-md">
                        <span class="w-1.5 h-1.5 rounded-full bg-white mr-1.5"></span>
                        {{ ucfirst($property->status) }}
                    </span>
                @endif
            </div>
        </a>
        <div class="p-5 flex flex-col flex-1">
            <h3 class="text-lg font-bold text-gray-900 leading-snug line-clamp-2">
                <a href="{{ route($propertyRoutePrefix . '.properties.show', $property) }}" class="hover:text-purple-600 transition-colors">{{ $property->title }}</a>
            </h3>
            <p class="mt-2 text-sm text-gray-600 flex items-start gap-1.5">
                <svg class="w-4 h-4 text-gray-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                </svg>
                <span class="line-clamp-2">{{ $property->address }}, {{ $property->city }}{{ $property->country ? ', '.$property->country : '' }}</span>
            </p>
            @if($property->description)
            <p class="mt-2 text-xs text-gray-500 line-clamp-2">{{ Str::limit(strip_tags($property->description), 120) }}</p>
            @endif
            <div class="mt-4 flex flex-wrap gap-3 text-sm text-gray-600">
                @if($property->bedrooms !== null)
                <span class="inline-flex items-center gap-1">
                    <svg class="w-4 h-4 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
                    {{ $property->bedrooms }} bed
                </span>
                @endif
                @if($property->bathrooms !== null)
                <span class="inline-flex items-center gap-1">
                    <svg class="w-4 h-4 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M10 5h4v5H10V5z"></path></svg>
                    {{ $property->bathrooms }} bath
                </span>
                @endif
                @if($property->area)
                <span class="inline-flex items-center gap-1">
                    <svg class="w-4 h-4 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"></path></svg>
                    {{ number_format($property->area, 0) }} {{ $property->area_unit ?: 'm²' }}
                </span>
                @endif
            </div>
            <div class="mt-4 pt-4 border-t border-gray-100 flex items-end justify-between gap-3">
                <div>
                    <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Price</p>
                    <p class="text-xl font-bold text-gray-900">{{ number_format($property->price, 0) }} <span class="text-sm font-semibold text-gray-500">{{ $property->currency }}</span></p>
                </div>
            </div>
            <div class="mt-5 flex flex-wrap gap-2">
                <a href="{{ route($propertyRoutePrefix . '.properties.show', $property) }}"
                   class="inline-flex flex-1 min-w-[5rem] justify-center items-center px-3 py-2 rounded-xl text-sm font-semibold text-white bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 shadow-md transition duration-200">
                    View
                </a>
                <a href="{{ route($propertyRoutePrefix . '.properties.edit', $property) }}"
                   class="inline-flex flex-1 min-w-[5rem] justify-center items-center px-3 py-2 rounded-xl text-sm font-semibold text-blue-700 bg-blue-50 border border-blue-200 hover:bg-blue-100 transition duration-200">
                    Edit
                </a>
                <form action="{{ route($propertyRoutePrefix . '.properties.destroy', $property) }}" method="POST" class="inline-flex flex-1 min-w-[5rem]" onsubmit="return confirm('Are you sure you want to delete this property?');">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="w-full justify-center inline-flex items-center px-3 py-2 rounded-xl text-sm font-semibold text-red-700 bg-red-50 border border-red-200 hover:bg-red-100 transition duration-200">
                        Delete
                    </button>
                </form>
            </div>
        </div>
    </article>
    @empty
    <div class="col-span-full bg-white rounded-2xl shadow-lg border border-gray-100 px-6 py-16 text-center">
        <svg class="w-16 h-16 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
        </svg>
        <p class="text-gray-500 font-medium">No properties found</p>
        <p class="text-sm text-gray-400 mt-1">Create your first property to get started</p>
        <a href="{{ route($propertyRoutePrefix . '.properties.create') }}" class="inline-flex mt-6 items-center px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-semibold rounded-xl hover:from-purple-700 hover:to-pink-700 transition duration-200 shadow-lg">
            Add Property
        </a>
    </div>
    @endforelse
</div>

@if($properties->hasPages())
<div class="mt-8 flex justify-center">
    <div class="bg-white rounded-2xl shadow border border-gray-100 px-4 py-3">
        {{ $properties->links() }}
    </div>
</div>
@endif
@endsection