@extends('layouts.dashboard')

@section('title', __('messages.edit') . ' ' . __('messages.properties'))
@section('header', __('messages.edit') . ' ' . __('messages.properties'))

@section('sidebar')
<a href="{{ route('company.dashboard') }}" class="block px-3 py-2 rounded-md hover:bg-gray-700">
    {{ __('messages.dashboard') }}
</a>
<a href="{{ route('company.properties.index') }}" class="block px-3 py-2 rounded-md bg-gray-700 text-white">
    {{ __('messages.properties') }}
</a>
<a href="{{ route('company.tenants.index') }}" class="block px-3 py-2 rounded-md hover:bg-gray-700">
    {{ __('messages.tenants') }}
</a>
<a href="{{ route('company.leases.index') }}" class="block px-3 py-2 rounded-md hover:bg-gray-700">
    {{ __('messages.leases') }}
</a>
<a href="{{ route('company.payments.index') }}" class="block px-3 py-2 rounded-md hover:bg-gray-700">
    {{ __('messages.payments') }}
</a>
<a href="{{ route('company.users.index') }}" class="block px-3 py-2 rounded-md hover:bg-gray-700">
    {{ __('messages.users') }}
</a>
<a href="{{ route('company.settings') }}" class="block px-3 py-2 rounded-md hover:bg-gray-700">
    {{ __('messages.settings') }}
</a>
@endsection

@section('content')
@if(session('success'))
    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
        {{ session('success') }}
    </div>
@endif

@if(session('upload_errors'))
    <div class="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded mb-4">
        <strong>Upload Warnings:</strong>
        <ul class="list-disc list-inside mt-2">
            @foreach(session('upload_errors') as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<div class="bg-white rounded-lg shadow p-6">
    <form action="{{ route('company.properties.update', $property) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label for="title" class="block text-sm font-medium text-gray-700">{{ __('messages.title') }} *</label>
                <input type="text" name="title" id="title" required value="{{ old('title', $property->title) }}" 
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                @error('title')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="type" class="block text-sm font-medium text-gray-700">{{ __('messages.type') }} *</label>
                <select name="type" id="type" required 
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                    <option value="">Select type</option>
                    <option value="house" {{ old('type', $property->type) === 'house' ? 'selected' : '' }}>House</option>
                    <option value="apartment" {{ old('type', $property->type) === 'apartment' ? 'selected' : '' }}>Apartment</option>
                    <option value="plot" {{ old('type', $property->type) === 'plot' ? 'selected' : '' }}>Plot</option>
                    <option value="commercial" {{ old('type', $property->type) === 'commercial' ? 'selected' : '' }}>Commercial</option>
                </select>
                @error('type')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div class="md:col-span-2">
                <label for="description" class="block text-sm font-medium text-gray-700">{{ __('messages.description') }}</label>
                <textarea name="description" id="description" rows="3" 
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">{{ old('description', $property->description) }}</textarea>
                @error('description')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="address" class="block text-sm font-medium text-gray-700">{{ __('messages.address') }} *</label>
                <input type="text" name="address" id="address" required value="{{ old('address', $property->address) }}" 
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                @error('address')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="city" class="block text-sm font-medium text-gray-700">{{ __('messages.city') }} *</label>
                <input type="text" name="city" id="city" required value="{{ old('city', $property->city) }}" 
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                @error('city')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="price" class="block text-sm font-medium text-gray-700">{{ __('messages.price') }} *</label>
                <input type="number" step="0.01" name="price" id="price" required value="{{ old('price', $property->price) }}" 
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                @error('price')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="status" class="block text-sm font-medium text-gray-700">{{ __('messages.status') }} *</label>
                <select name="status" id="status" required 
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                    <option value="available" {{ old('status', $property->status) === 'available' ? 'selected' : '' }}>Available</option>
                    <option value="rented" {{ old('status', $property->status) === 'rented' ? 'selected' : '' }}>Rented</option>
                    <option value="sold" {{ old('status', $property->status) === 'sold' ? 'selected' : '' }}>Sold</option>
                    <option value="maintenance" {{ old('status', $property->status) === 'maintenance' ? 'selected' : '' }}>Maintenance</option>
                </select>
                @error('status')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700">Website listing <span class="text-red-500">*</span></label>
                @if($property->visibility === 'featured')
                    <p class="mt-2 text-sm text-gray-700 rounded-md border border-amber-200 bg-amber-50 px-3 py-2">
                        <strong>Featured</strong> — this property is highlighted on the homepage (set by a system administrator). You can still edit other details below.
                    </p>
                @else
                    <select name="visibility" id="visibility" required
                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                        <option value="public" {{ old('visibility', $property->visibility) === 'public' ? 'selected' : '' }}>Public — show on homepage and public property pages</option>
                        <option value="private" {{ old('visibility', $property->visibility) === 'private' ? 'selected' : '' }}>Private — internal only</option>
                    </select>
                    <p class="mt-1 text-xs text-gray-500">Set to <strong>Public</strong> for the home page and /properties listing.</p>
                @endif
                @error('visibility')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="bedrooms" class="block text-sm font-medium text-gray-700">Bedrooms</label>
                <input type="number" name="bedrooms" id="bedrooms" value="{{ old('bedrooms', $property->bedrooms) }}" 
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                @error('bedrooms')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="bathrooms" class="block text-sm font-medium text-gray-700">Bathrooms</label>
                <input type="number" name="bathrooms" id="bathrooms" value="{{ old('bathrooms', $property->bathrooms) }}" 
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                @error('bathrooms')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="area" class="block text-sm font-medium text-gray-700">Area (sqm)</label>
                <input type="number" step="0.01" name="area" id="area" value="{{ old('area', $property->area) }}" 
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                @error('area')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div class="md:col-span-2">
                <label for="images" class="block text-sm font-medium text-gray-700 mb-2">Add New Images</label>
                <div class="flex items-center space-x-4">
                    <label for="images" class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 transition duration-150">
                        <div class="flex flex-col items-center justify-center pt-5 pb-6">
                            <svg class="w-10 h-10 mb-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                            </svg>
                            <p class="mb-2 text-sm text-gray-500">
                                <span class="font-semibold">Click to upload</span> or drag and drop
                            </p>
                            <p class="text-xs text-gray-500">PNG, JPG, GIF, WEBP (MAX. 5MB each)</p>
                        </div>
                        <input id="images" name="images[]" type="file" class="hidden" accept="image/jpeg,image/png,image/jpg,image/gif,image/webp" multiple onchange="previewImages(this)">
                    </label>
                </div>
                <div id="image-preview-container" class="mt-4 grid grid-cols-4 gap-4 hidden"></div>
                @error('images')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
                @error('images.*')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
        </div>

        @if($property->images->count() > 0)
        <div class="mt-6 border-t pt-6">
            <label class="block text-sm font-medium text-gray-700 mb-4">Current Images ({{ $property->images->count() }})</label>
            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
                @foreach($property->images->sortBy('order') as $image)
                <div class="relative group">
                    <div class="relative aspect-square overflow-hidden rounded-lg border-2 {{ $image->is_primary ? 'border-blue-500 ring-2 ring-blue-200' : 'border-gray-200' }}">
                        <img src="{{ $image->url }}" 
                             alt="Property image {{ $loop->iteration }}" 
                             class="w-full h-full object-cover"
                             onerror="this.onerror=null; this.src='{{ \App\Helpers\ImageHelper::placeholder(400, 400) }}';">
                        @if($image->is_primary)
                            <div class="absolute top-2 left-2 bg-blue-500 text-white text-xs font-semibold px-2 py-1 rounded">
                                Primary
                            </div>
                        @endif
                        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200 flex items-center justify-center opacity-0 group-hover:opacity-100">
                            <form action="{{ route('company.properties.images.destroy', $image) }}" method="POST" class="m-2">
                                @csrf
                                @method('DELETE')
                                <button type="submit" 
                                        onclick="return confirm('Are you sure you want to delete this image?')"
                                        class="bg-red-600 text-white px-3 py-2 rounded text-sm font-medium hover:bg-red-700 transition">
                                    <svg class="w-5 h-5 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                    </svg>
                                    Delete
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @else
        <div class="mt-6 border-t pt-6">
            <div class="text-center py-8 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300">
                <svg class="w-16 h-16 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
                <p class="text-gray-500">No images uploaded yet. Upload images above.</p>
            </div>
        </div>
        @endif

        <div class="mt-6 flex justify-end space-x-3 border-t pt-6">
            <a href="{{ route('company.properties.index') }}" class="bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400 transition">
                {{ __('messages.cancel') }}
            </a>
            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">
                {{ __('messages.save') }}
            </button>
        </div>
    </form>
</div>

<script>
function previewImages(input) {
    const container = document.getElementById('image-preview-container');
    container.innerHTML = '';
    
    if (input.files && input.files.length > 0) {
        container.classList.remove('hidden');
        
        Array.from(input.files).forEach((file, index) => {
            const reader = new FileReader();
            reader.onload = function(e) {
                const div = document.createElement('div');
                div.className = 'relative';
                div.innerHTML = `
                    <img src="${e.target.result}" 
                         alt="Preview ${index + 1}" 
                         class="w-full h-32 object-cover rounded-lg border border-gray-200">
                    <div class="absolute top-2 right-2 bg-green-500 text-white text-xs px-2 py-1 rounded">
                        New
                    </div>
                `;
                container.appendChild(div);
            };
            reader.readAsDataURL(file);
        });
    } else {
        container.classList.add('hidden');
    }
}
</script>
@endsection