@extends('layouts.dashboard')

@section('title', 'Add Property')
@section('header', 'Add Property (System-Level)')

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

@section('content')
<div class="bg-white rounded-3xl shadow-sm border border-stone-200 p-6">
    <form action="{{ route('super-admin.properties.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        
        <!-- 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" checked class="mr-2" onchange="toggleCompanySelect(false)">
                    <span class="text-sm font-medium text-gray-700">System-Owned (Global Property)</span>
                    <span class="ml-2 text-xs text-gray-500">- For demos, promotions, marketplace seeding</span>
                </label>
                <label class="flex items-center">
                    <input type="radio" name="is_system_owned" value="0" 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 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') == $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">New listings default to <strong>Public</strong> so they appear on the marketing homepage and <code class="text-xs bg-white px-1 rounded">/properties</code> (same as vendor uploads).</p>
            <div class="space-y-2">
                <label class="flex items-center">
                    <input type="radio" name="visibility" value="public" {{ old('visibility', 'public') === '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') === 'featured' ? 'checked' : '' }} class="mr-2">
                    <span class="text-sm font-medium text-gray-700">⭐ Featured — Highlighted featured section on homepage</span>
                </label>
                <label class="flex items-center">
                    <input type="radio" name="visibility" value="private" {{ old('visibility') === 'private' ? 'checked' : '' }} class="mr-2">
                    <span class="text-sm font-medium text-gray-700">🔒 Private — Not shown on marketing site</span>
                </label>
            </div>
        </div>

        <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') }}" 
                    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">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') === 'house' ? 'selected' : '' }}>House</option>
                    <option value="apartment" {{ old('type') === 'apartment' ? 'selected' : '' }}>Apartment</option>
                    <option value="plot" {{ old('type') === 'plot' ? 'selected' : '' }}>Plot</option>
                    <option value="commercial" {{ old('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">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') }}</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">Address *</label>
                <input type="text" name="address" id="address" required value="{{ old('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">City *</label>
                <input type="text" name="city" id="city" required value="{{ old('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="region" class="block text-sm font-medium text-gray-700">Region</label>
                <input type="text" name="region" id="region" value="{{ old('region') }}" 
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                @error('region')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="country" class="block text-sm font-medium text-gray-700">Country</label>
                <input type="text" name="country" id="country" value="{{ old('country', 'Tanzania') }}" 
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                @error('country')
                    <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">Price *</label>
                <input type="number" step="0.01" name="price" id="price" required value="{{ old('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="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 focus:border-blue-500 focus:ring-blue-500">
                    <option value="TZS" {{ old('currency', 'TZS') === 'TZS' ? 'selected' : '' }}>TZS</option>
                    <option value="USD" {{ old('currency') === 'USD' ? 'selected' : '' }}>USD</option>
                    <option value="EUR" {{ old('currency') === 'EUR' ? 'selected' : '' }}>EUR</option>
                </select>
                @error('currency')
                    <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">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', 'available') === 'available' ? 'selected' : '' }}>Available</option>
                    <option value="rented" {{ old('status') === 'rented' ? 'selected' : '' }}>Rented</option>
                    <option value="sold" {{ old('status') === 'sold' ? 'selected' : '' }}>Sold</option>
                    <option value="maintenance" {{ old('status') === 'maintenance' ? 'selected' : '' }}>Maintenance</option>
                </select>
                @error('status')
                    <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') }}" 
                    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') }}" 
                    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') }}" 
                    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>
                <label for="latitude" class="block text-sm font-medium text-gray-700">Latitude</label>
                <input type="number" step="0.00000001" name="latitude" id="latitude" value="{{ old('latitude') }}" 
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                @error('latitude')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="longitude" class="block text-sm font-medium text-gray-700">Longitude</label>
                <input type="number" step="0.00000001" name="longitude" id="longitude" value="{{ old('longitude') }}" 
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                @error('longitude')
                    <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">Property Images</label>
                <div class="flex items-center justify-center px-6 pt-5 pb-6 border-2 border-gray-200 border-dashed rounded-2xl hover:border-blue-300 transition-colors duration-200">
                    <div class="space-y-1 text-center">
                        <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                            <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-4h-4m-4 0h4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <div class="flex text-sm text-gray-600">
                            <label for="images" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-700 hover:text-blue-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-500">
                                <span>Upload files</span>
                                <input type="file" name="images[]" id="images" multiple accept="image/*" class="sr-only" onchange="previewImages(this)">
                            </label>
                        </div>
                        <p class="text-xs text-gray-500">PNG, JPG, GIF, WEBP</p>
                    </div>
                </div>
                <div id="image-preview-container" class="mt-4 grid grid-cols-4 gap-3 hidden"></div>
                @error('images')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </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">
                Create 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');
        companyId.required = true;
    } else {
        companySelect.classList.add('hidden');
        companyId.required = false;
        companyId.value = '';
    }
}

function previewImages(input) {
    const container = document.getElementById('image-preview-container');
    if (!container) return;

    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-24 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