@extends('layouts.dashboard')

@section('title', 'Edit Property')
@section('header', 'Edit Property')

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

@section('content')
<div class="bg-white rounded-lg shadow p-6">
    <form action="{{ route('super-admin.properties.update', $property) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        
        <!-- Ownership Section -->
        <div class="mb-6 p-4 bg-blue-50 rounded-lg border border-blue-200">
            <h3 class="text-lg font-semibold text-gray-900 mb-3">Property Ownership</h3>
            <div class="space-y-3">
                <label class="flex items-center">
                    <input type="radio" name="is_system_owned" value="1" {{ $property->is_system_owned ? 'checked' : '' }} class="mr-2" onchange="toggleCompanySelect(false)">
                    <span class="text-sm font-medium text-gray-700">System-Owned (Global Property)</span>
                </label>
                <label class="flex items-center">
                    <input type="radio" name="is_system_owned" value="0" {{ !$property->is_system_owned ? 'checked' : '' }} class="mr-2" onchange="toggleCompanySelect(true)">
                    <span class="text-sm font-medium text-gray-700">Assign to Company</span>
                </label>
            </div>
            <div id="company-select" class="mt-3 {{ $property->is_system_owned ? 'hidden' : '' }}">
                <label for="company_id" class="block text-sm font-medium text-gray-700 mb-1">Select Company</label>
                <select name="company_id" id="company_id" class="w-full px-3 py-2 border border-gray-300 rounded-md">
                    <option value="">Select a company</option>
                    @foreach($companies as $company)
                    <option value="{{ $company->id }}" {{ old('company_id', $property->company_id) == $company->id ? 'selected' : '' }}>{{ $company->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <!-- Visibility Section -->
        <div class="mb-6 p-4 bg-purple-50 rounded-lg border border-purple-200">
            <h3 class="text-lg font-semibold text-gray-900 mb-3">Visibility Control</h3>
            <p class="text-sm text-gray-600 mb-3">Use <strong>Public</strong> or <strong>Featured</strong> so the listing appears on the marketing site (homepage and <code class="text-xs bg-white px-1 rounded">/properties</code>).</p>
            <div class="space-y-2">
                <label class="flex items-center">
                    <input type="radio" name="visibility" value="public" {{ old('visibility', $property->visibility) === 'public' ? 'checked' : '' }} class="mr-2">
                    <span class="text-sm font-medium text-gray-700">🌐 Public — Homepage &amp; public listings</span>
                </label>
                <label class="flex items-center">
                    <input type="radio" name="visibility" value="featured" {{ old('visibility', $property->visibility) === 'featured' ? 'checked' : '' }} class="mr-2">
                    <span class="text-sm font-medium text-gray-700">⭐ Featured — Highlighted on homepage</span>
                </label>
                <label class="flex items-center">
                    <input type="radio" name="visibility" value="private" {{ old('visibility', $property->visibility) === 'private' ? 'checked' : '' }} class="mr-2">
                    <span class="text-sm font-medium text-gray-700">🔒 Private — Not on marketing site</span>
                </label>
            </div>
        </div>

        <!-- Copy the form fields from create.blade.php but with old() values -->
        <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">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">
            </div>
            <div>
                <label for="type" class="block text-sm font-medium text-gray-700">Type *</label>
                <select name="type" id="type" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                    <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>
            </div>
            <div class="md:col-span-2">
                <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
                <textarea name="description" id="description" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">{{ old('description', $property->description) }}</textarea>
            </div>
            <div>
                <label for="address" class="block text-sm font-medium text-gray-700">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">
            </div>
            <div>
                <label for="city" class="block text-sm font-medium text-gray-700">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">
            </div>
            <div>
                <label for="price" class="block text-sm font-medium text-gray-700">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">
            </div>
            <div>
                <label for="currency" class="block text-sm font-medium text-gray-700">Currency *</label>
                <select name="currency" id="currency" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                    <option value="TZS" {{ old('currency', $property->currency) === 'TZS' ? 'selected' : '' }}>TZS</option>
                    <option value="USD" {{ old('currency', $property->currency) === 'USD' ? 'selected' : '' }}>USD</option>
                    <option value="EUR" {{ old('currency', $property->currency) === 'EUR' ? 'selected' : '' }}>EUR</option>
                </select>
            </div>
            <div>
                <label for="status" class="block text-sm font-medium text-gray-700">Status *</label>
                <select name="status" id="status" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                    <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>
            </div>
        </div>

        <div class="mt-6 flex justify-end space-x-3">
            <a href="{{ route('super-admin.properties.index') }}" class="bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400">Cancel</a>
            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">Update Property</button>
        </div>
    </form>
</div>

<script>
function toggleCompanySelect(show) {
    const companySelect = document.getElementById('company-select');
    const companyId = document.getElementById('company_id');
    if (show) {
        companySelect.classList.remove('hidden');
    } else {
        companySelect.classList.add('hidden');
        companyId.value = '';
    }
}
</script>
@endsection