@extends('admin.layouts.app')

@section('title', isset($property) ? 'Edit Property' : 'Add Property')

@section('content')
    <div class="max-w-5xl mx-auto">
        <!-- Header -->
        <div class="mb-6">
            <a href="{{ route('admin.properties.index') }}"
                class="text-gray-500 hover:text-gray-700 text-sm inline-flex items-center gap-1 mb-2">
                <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
                Back to Properties
            </a>
            <h1 class="page-title">{{ isset($property) ? 'Edit Property' : 'Add New Property' }}</h1>
            <p class="page-subtitle">Fill in the details below</p>
        </div>

        <!-- Step Indicator -->
        <div class="step-indicator mb-8">
            <div class="step active" data-step="1">
                <div class="step-number">1</div>
                <div class="step-label">Type</div>
            </div>
            <div class="step-line"></div>
            <div class="step" data-step="2">
                <div class="step-number">2</div>
                <div class="step-label">Details</div>
            </div>
            <div class="step-line"></div>
            <div class="step" data-step="3">
                <div class="step-number">3</div>
                <div class="step-label">Location</div>
            </div>
            <div class="step-line"></div>
            <div class="step" data-step="4">
                <div class="step-number">4</div>
                <div class="step-label">Media</div>
            </div>
            <div class="step-line"></div>
            <div class="step" data-step="5">
                <div class="step-number">5</div>
                <div class="step-label">Investment</div>
            </div>
            <div class="step-line"></div>
            <div class="step" data-step="6">
                <div class="step-number">6</div>
                <div class="step-label">Publish</div>
            </div>
        </div>

        <form
            action="{{ isset($property) ? route('admin.properties.update', $property) : route('admin.properties.store') }}"
            method="POST" enctype="multipart/form-data" id="propertyForm">
            @csrf
            @if (isset($property))
                @method('PUT')
            @endif

            <!-- Step 1: Property Type -->
            <div class="form-step active" id="step-1">
                <div class="admin-card">
                    <div class="admin-card-body">
                        <h2 class="text-xl font-semibold text-gray-900 mb-6">What type of property is this?</h2>

                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
                            @php
                                $propertyTypes = [
                                    'flat' => [
                                        'icon' =>
                                            'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4',
                                        'label' => 'Flat/Apartment',
                                    ],
                                    'house' => [
                                        'icon' =>
                                            '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',
                                        'label' => 'House/Villa',
                                    ],
                                    'plot' => [
                                        'icon' =>
                                            'M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7',
                                        'label' => 'Plot/Land',
                                    ],
                                    'commercial' => [
                                        'icon' =>
                                            'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4',
                                        'label' => 'Commercial',
                                    ],
                                ];
                            @endphp
                            @foreach ($propertyTypes as $type => $config)
                                <label class="property-type-card">
                                    <input type="radio" name="property_type" value="{{ $type }}"
                                        {{ old('property_type', $property->property_type ?? '') === $type ? 'checked' : '' }}
                                        required>
                                    <div class="card-content">
                                        <svg class="type-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                                d="{{ $config['icon'] }}" />
                                        </svg>
                                        <span class="type-label">{{ $config['label'] }}</span>
                                    </div>
                                </label>
                            @endforeach
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="form-label">Listing Type *</label>
                                <div class="listing-type-toggle">
                                    <label class="toggle-option">
                                        <input type="radio" name="listing_type" value="sale"
                                            {{ old('listing_type', $property->listing_type ?? 'sale') === 'sale' ? 'checked' : '' }}
                                            required>
                                        <span>For Sale</span>
                                    </label>
                                    <label class="toggle-option">
                                        <input type="radio" name="listing_type" value="rent"
                                            {{ old('listing_type', $property->listing_type ?? '') === 'rent' ? 'checked' : '' }}>
                                        <span>For Rent</span>
                                    </label>
                                </div>
                            </div>
                            <div>
                                <label class="form-label">Property Title *</label>
                                <input type="text" name="title" value="{{ old('title', $property->title ?? '') }}"
                                    required class="form-input" placeholder="e.g., Spacious 3 BHK Flat in Lanka">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Step 2: Property Details -->
            <div class="form-step" id="step-2">
                <div class="admin-card">
                    <div class="admin-card-body">
                        <h2 class="text-xl font-semibold text-gray-900 mb-6">Property Details</h2>

                        <!-- Common Fields -->
                        <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6">
                            <div>
                                <label class="form-label">Price (₹) *</label>
                                <input type="number" name="price" value="{{ old('price', $property->price ?? '') }}"
                                    required class="form-input" min="0">
                            </div>
                            <div>
                                <label class="form-label">Area Size *</label>
                                <input type="number" name="area_size"
                                    value="{{ old('area_size', $property->area_size ?? '') }}" required class="form-input"
                                    min="0" step="0.01">
                            </div>
                            <div>
                                <label class="form-label">Area Unit *</label>
                                <select name="area_unit" required class="form-select">
                                    <option value="sqft"
                                        {{ old('area_unit', $property->area_unit ?? 'sqft') === 'sqft' ? 'selected' : '' }}>
                                        Sq.ft</option>
                                    <option value="sqm"
                                        {{ old('area_unit', $property->area_unit ?? '') === 'sqm' ? 'selected' : '' }}>Sq.m
                                    </option>
                                    <option value="sqyd"
                                        {{ old('area_unit', $property->area_unit ?? '') === 'sqyd' ? 'selected' : '' }}>
                                        Sq.yd</option>
                                </select>
                            </div>
                        </div>

                        <!-- Flat Fields -->
                        <div class="conditional-fields" data-type="flat">
                            <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4">Flat Details</h3>
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                                <div>
                                    <label class="form-label">Bedrooms</label>
                                    <select name="bedrooms" class="form-select">
                                        <option value="">Select</option>
                                        @for ($i = 1; $i <= 6; $i++)
                                            <option value="{{ $i }}"
                                                {{ old('bedrooms', $property->bedrooms ?? '') == $i ? 'selected' : '' }}>
                                                {{ $i }} BHK</option>
                                        @endfor
                                    </select>
                                </div>
                                <div>
                                    <label class="form-label">Bathrooms</label>
                                    <input type="number" name="bathrooms"
                                        value="{{ old('bathrooms', $property->bathrooms ?? '') }}" class="form-input"
                                        min="0" max="10">
                                </div>
                                <div>
                                    <label class="form-label">Floor Number</label>
                                    <input type="number" name="floor_number"
                                        value="{{ old('floor_number', $property->floor_number ?? '') }}"
                                        class="form-input" min="0">
                                </div>
                                <div>
                                    <label class="form-label">Total Floors</label>
                                    <input type="number" name="total_floors"
                                        value="{{ old('total_floors', $property->total_floors ?? '') }}"
                                        class="form-input" min="0">
                                </div>
                                <div>
                                    <label class="form-label">Balconies</label>
                                    <input type="number" name="balconies"
                                        value="{{ old('balconies', $property->balconies ?? '') }}" class="form-input"
                                        min="0" max="5">
                                </div>
                                <div>
                                    <label class="form-label">Furnishing</label>
                                    <select name="furnishing" class="form-select">
                                        <option value="">Select</option>
                                        <option value="unfurnished"
                                            {{ old('furnishing', $property->furnishing ?? '') === 'unfurnished' ? 'selected' : '' }}>
                                            Unfurnished</option>
                                        <option value="semi-furnished"
                                            {{ old('furnishing', $property->furnishing ?? '') === 'semi-furnished' ? 'selected' : '' }}>
                                            Semi-Furnished</option>
                                        <option value="fully-furnished"
                                            {{ old('furnishing', $property->furnishing ?? '') === 'fully-furnished' ? 'selected' : '' }}>
                                            Fully Furnished</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="form-label">Facing</label>
                                    <select name="facing" class="form-select">
                                        <option value="">Select</option>
                                        @foreach (\App\Models\Property::getFacingOptions() as $key => $label)
                                            <option value="{{ $key }}"
                                                {{ old('facing', $property->facing ?? '') === $key ? 'selected' : '' }}>
                                                {{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div>
                                    <label class="form-label">Possession</label>
                                    <select name="possession_status" class="form-select">
                                        <option value="">Select</option>
                                        <option value="ready_to_move"
                                            {{ old('possession_status', $property->possession_status ?? '') === 'ready_to_move' ? 'selected' : '' }}>
                                            Ready to Move</option>
                                        <option value="under_construction"
                                            {{ old('possession_status', $property->possession_status ?? '') === 'under_construction' ? 'selected' : '' }}>
                                            Under Construction</option>
                                        <option value="new_launch"
                                            {{ old('possession_status', $property->possession_status ?? '') === 'new_launch' ? 'selected' : '' }}>
                                            New Launch</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- House Fields -->
                        <div class="conditional-fields hidden" data-type="house">
                            <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4">House Details
                            </h3>
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                                <div><label class="form-label">Bedrooms</label><select name="bedrooms"
                                        class="form-select">
                                        <option value="">Select</option>
                                        @for ($i = 1; $i <= 10; $i++)
                                            <option value="{{ $i }}">{{ $i }} BHK</option>
                                        @endfor
                                    </select>
                                </div>
                                <div><label class="form-label">Bathrooms</label><input type="number" name="bathrooms"
                                        class="form-input" min="0" max="10"></div>
                                <div><label class="form-label">Floors</label><input type="number" name="floors"
                                        class="form-input" min="1" max="5" value="1"></div>
                                <div><label class="form-label">Plot Area</label><input type="number"
                                        name="built_up_area" class="form-input" min="0"></div>
                            </div>
                        </div>

                        <!-- Plot Fields -->
                        <div class="conditional-fields hidden" data-type="plot">
                            <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4">Plot Details</h3>
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                                <div><label class="form-label">Plot Dimensions</label><input type="text"
                                        name="plot_dimensions" class="form-input" placeholder="e.g., 40x60"></div>
                                <div><label class="form-label">Facing</label><select name="facing" class="form-select">
                                        <option value="">Select</option>
                                        @foreach (\App\Models\Property::getFacingOptions() as $key => $label)
                                            <option value="{{ $key }}">{{ $label }}</option>
                                        @endforeach
                                    </select></div>
                            </div>
                        </div>

                        <!-- Commercial Fields -->
                        <div class="conditional-fields hidden" data-type="commercial">
                            <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4">Commercial
                                Details</h3>
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                                <div><label class="form-label">Carpet Area</label><input type="number"
                                        name="carpet_area" class="form-input" min="0"></div>
                                <div><label class="form-label">Floor</label><input type="number" name="floor_number"
                                        class="form-input" min="0"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Step 3: Location -->
            <div class="form-step" id="step-3">
                <div class="admin-card">
                    <div class="admin-card-body">
                        <h2 class="text-xl font-semibold text-gray-900 mb-6">Property Location</h2>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="form-label">City *</label>
                                <select name="city_id" required class="form-select" id="city-select">
                                    <option value="">Select City</option>
                                    @foreach ($cities as $city)
                                        <option value="{{ $city->id }}"
                                            {{ old('city_id', $property->city_id ?? '') == $city->id ? 'selected' : '' }}>
                                            {{ $city->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="form-label">Area</label>
                                <select name="area_id" class="form-select" id="area-select">
                                    <option value="">Select Area</option>
                                    @if (isset($areas))
                                        @foreach ($areas as $area)
                                            <option value="{{ $area->id }}"
                                                {{ old('area_id', $property->area_id ?? '') == $area->id ? 'selected' : '' }}>
                                                {{ $area->name }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="mt-4">
                            <label class="form-label">Full Address</label>
                            <textarea name="address" rows="2" class="form-textarea" placeholder="Enter complete address...">{{ old('address', $property->address ?? '') }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Step 4: Images & Description -->
            <div class="form-step" id="step-4">
                <div class="admin-card mb-6">
                    <div class="admin-card-body">
                        <h2 class="text-xl font-semibold text-gray-900 mb-6">Property Images</h2>

                        @if (isset($property) && $property->images->count() > 0)
                            <div class="mb-6">
                                <p class="text-sm text-gray-500 mb-2">Current Images</p>
                                <div class="grid grid-cols-4 md:grid-cols-6 gap-3">
                                    @foreach ($property->images as $image)
                                        <div class="relative group">
                                            <img src="{{ $image->image_url }}"
                                                class="w-full h-20 object-cover rounded-lg border {{ $image->is_primary ? 'border-green-500 border-2' : 'border-gray-200' }}">
                                            @if ($image->is_primary)
                                                <span
                                                    class="absolute top-1 left-1 bg-green-500 text-white text-xs px-1 rounded">Primary</span>
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        <!-- Featured Image -->
                        <div class="mb-6">
                            <label class="form-label">Featured Image (Primary) *</label>
                            <div class="featured-upload-zone" id="featuredZone">
                                <div id="featuredPreview" class="hidden"><img src="" alt="Preview"
                                        class="preview-img"><button type="button" class="remove-preview"
                                        onclick="removeFeaturedPreview()">&times;</button></div>
                                <div id="featuredPlaceholder">
                                    <svg width="40" height="40" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24" class="text-gray-400 mx-auto mb-2">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                            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" />
                                    </svg>
                                    <p class="text-gray-600 text-sm">Click to upload featured image</p>
                                </div>
                                <input type="file" name="featured_image" accept="image/*" class="upload-input"
                                    id="featuredInput" onchange="previewFeatured(this)">
                            </div>
                        </div>

                        <!-- Gallery Images -->
                        <div>
                            <label class="form-label">Gallery Images (Optional)</label>
                            <div class="upload-zone" id="uploadZone">
                                <div id="galleryPreview" class="gallery-preview hidden"></div>
                                <div id="galleryPlaceholder">
                                    <svg width="40" height="40" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24" class="text-gray-400 mx-auto mb-2">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                            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" />
                                    </svg>
                                    <p class="text-gray-600 text-sm">Drop images here or click to upload</p>
                                    <p class="text-xs text-gray-400 mt-1">JPEG, PNG up to 5MB each</p>
                                </div>
                                <input type="file" name="images[]" multiple accept="image/*" class="upload-input"
                                    id="galleryInput" onchange="previewGallery(this)">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="admin-card">
                    <div class="admin-card-body">
                        <h2 class="text-xl font-semibold text-gray-900 mb-4">Description *</h2>
                        <textarea name="description" rows="6" required class="form-textarea"
                            placeholder="Describe your property in detail...">{{ old('description', $property->description ?? '') }}</textarea>
                    </div>
                </div>
            </div>

            <!-- Step 6: Publish Settings -->
            <div class="form-step" id="step-6" data-step="6" style="display:none">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="admin-card">
                        <div class="admin-card-body">
                            <h2 class="text-xl font-semibold text-gray-900 mb-4">Status & Visibility</h2>
                            <div class="space-y-4">
                                <div>
                                    <label class="form-label">Status</label>
                                    <select name="status" class="form-select">
                                        <option value="active"
                                            {{ old('status', $property->status ?? 'active') === 'active' ? 'selected' : '' }}>
                                            Active</option>
                                        <option value="draft"
                                            {{ old('status', $property->status ?? '') === 'draft' ? 'selected' : '' }}>
                                            Draft</option>
                                    </select>
                                </div>
                                <label class="toggle-card"><input type="hidden" name="is_verified"
                                        value="0"><input type="checkbox" name="is_verified" value="1"
                                        {{ old('is_verified', $property->is_verified ?? false) ? 'checked' : '' }}>
                                    <div><span class="toggle-title">Verified Property</span><span class="toggle-desc">Mark
                                            as verified by team</span></div>
                                </label>
                                <label class="toggle-card"><input type="hidden" name="is_featured"
                                        value="0"><input type="checkbox" name="is_featured" value="1"
                                        {{ old('is_featured', $property->is_featured ?? false) ? 'checked' : '' }}>
                                    <div><span class="toggle-title">Featured Listing</span><span class="toggle-desc">Show
                                            on homepage</span></div>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="admin-card">
                        <div class="admin-card-body">
                            <h2 class="text-xl font-semibold text-gray-900 mb-4">Legal Details</h2>
                            <div class="space-y-4">
                                <label class="flex items-center gap-2"><input type="hidden" name="rera_approved"
                                        value="0"><input type="checkbox" name="rera_approved" value="1"
                                        {{ old('rera_approved', $property->rera_approved ?? false) ? 'checked' : '' }}
                                        class="form-checkbox"><span class="text-sm">RERA Approved</span></label>
                                <div><label class="form-label">RERA Number</label><input type="text"
                                        name="rera_number" value="{{ old('rera_number', $property->rera_number ?? '') }}"
                                        class="form-input" placeholder="Enter RERA number"></div>
                                <label class="flex items-center gap-2"><input type="hidden" name="bank_approved"
                                        value="0"><input type="checkbox" name="bank_approved" value="1"
                                        {{ old('bank_approved', $property->bank_approved ?? false) ? 'checked' : '' }}
                                        class="form-checkbox"><span class="text-sm">Bank Loan Available</span></label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ═══════════════════════════════
                 STEP 5 — Investment Advisory
            ════════════════════════════════ -->
            <div class="form-step" data-step="5" style="display:none">
                <div class="card mb-5">
                    <div class="card-header">
                        <h3 class="card-title">Investment Advisory Details</h3>
                        <p class="card-subtitle text-sm text-gray-500 mt-0.5">Fill these to show this property as an Investment Opportunity on the public website.</p>
                    </div>
                    <div class="card-body space-y-5">

                        <!-- Investment Category -->
                        <div>
                            <label class="form-label">Investment Category</label>
                            <select name="investment_category" class="form-select">
                                <option value="">— Not an investment listing —</option>
                                @foreach(\App\Models\Property::getInvestmentCategories() as $key => $label)
                                    <option value="{{ $key }}" {{ old('investment_category', $property->investment_category ?? '') === $key ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                            <p class="form-hint text-xs text-gray-400 mt-1">Leave blank to hide from investment listings.</p>
                        </div>

                        <!-- Score Cards (2 columns) -->
                        <div>
                            <label class="form-label">Investment Scores <span class="text-gray-400 font-normal">(0.0 – 10.0)</span></label>
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mt-2">
                                @foreach([
                                    ['name' => 'investment_score',       'label' => 'Overall Score'],
                                    ['name' => 'location_score',         'label' => 'Location'],
                                    ['name' => 'growth_potential_score', 'label' => 'Growth Potential'],
                                    ['name' => 'rental_yield_score',     'label' => 'Rental Yield'],
                                    ['name' => 'liquidity_score',        'label' => 'Liquidity'],
                                ] as $sc)
                                    <div>
                                        <label class="text-xs font-medium text-gray-600 block mb-1">{{ $sc['label'] }}</label>
                                        <input type="number" name="{{ $sc['name'] }}" step="0.1" min="0" max="10"
                                               value="{{ old($sc['name'], $property->{$sc['name']} ?? '') }}"
                                               class="form-input" placeholder="e.g. 8.5">
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- Why We Recommend -->
                        <div>
                            <label class="form-label">Why We Recommend This Project</label>
                            <textarea name="why_we_recommend" rows="5" class="form-input"
                                      placeholder="Write a research-based analysis explaining why this is a good investment. Cover: location advantages, infrastructure growth, developer reputation, price trend...">{{ old('why_we_recommend', $property->why_we_recommend ?? '') }}</textarea>
                            <p class="form-hint text-xs text-gray-400 mt-1">This appears prominently on the investment detail page.</p>
                        </div>

                        <!-- Possession & Appreciation -->
                        <div class="grid sm:grid-cols-2 gap-4">
                            <div>
                                <label class="form-label">Possession Timeline</label>
                                <input type="text" name="possession_timeline"
                                       value="{{ old('possession_timeline', $property->possession_timeline ?? '') }}"
                                       class="form-input" placeholder="e.g. Q4 2026 / Ready to Move">
                            </div>
                            <div>
                                <label class="form-label">Expected Appreciation</label>
                                <input type="text" name="expected_appreciation"
                                       value="{{ old('expected_appreciation', $property->expected_appreciation ?? '') }}"
                                       class="form-input" placeholder="e.g. 15–18% per year">
                            </div>
                        </div>

                        <!-- Developer -->
                        <div class="grid sm:grid-cols-2 gap-4">
                            <div>
                                <label class="form-label">Developer Name</label>
                                <input type="text" name="developer_name"
                                       value="{{ old('developer_name', $property->developer_name ?? '') }}"
                                       class="form-input" placeholder="Developer / Builder name">
                            </div>
                            <div>
                                <label class="form-label">Price at Launch (₹)</label>
                                <input type="number" name="price_at_launch" step="0.01"
                                       value="{{ old('price_at_launch', $property->price_at_launch ?? '') }}"
                                       class="form-input" placeholder="Original launch price">
                            </div>
                        </div>
                        <div>
                            <label class="form-label">Developer Track Record</label>
                            <textarea name="developer_track_record" rows="3" class="form-input"
                                      placeholder="Previous projects, delivery history, certifications...">{{ old('developer_track_record', $property->developer_track_record ?? '') }}</textarea>
                        </div>

                        <!-- Nearby Infrastructure -->
                        <div>
                            <label class="form-label">Nearby Infrastructure</label>
                            <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-3 mt-2">
                                @foreach([
                                    ['name' => 'nearby_metro',    'label' => 'Metro',    'ph' => 'e.g. 2 km'],
                                    ['name' => 'nearby_airport',  'label' => 'Airport',  'ph' => 'e.g. 10 km'],
                                    ['name' => 'nearby_highway',  'label' => 'Highway',  'ph' => 'e.g. NH-19, 0.5 km'],
                                    ['name' => 'nearby_schools',  'label' => 'Schools',  'ph' => 'e.g. DPS, BHU'],
                                    ['name' => 'nearby_hospitals','label' => 'Hospitals','ph' => 'e.g. BHU Hospital, 3 km'],
                                ] as $nb)
                                    <div>
                                        <label class="text-xs font-medium text-gray-600 block mb-1">{{ $nb['label'] }}</label>
                                        <input type="text" name="{{ $nb['name'] }}"
                                               value="{{ old($nb['name'], $property->{$nb['name']} ?? '') }}"
                                               class="form-input" placeholder="{{ $nb['ph'] }}">
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- Document Uploads -->
                        <div>
                            <label class="form-label">Documents (PDF)</label>
                            <div class="grid sm:grid-cols-3 gap-3 mt-2">
                                @foreach([
                                    ['name' => 'brochure_path',   'label' => 'Brochure',   'current' => $property->brochure_path ?? null],
                                    ['name' => 'floor_plan_path', 'label' => 'Floor Plan', 'current' => $property->floor_plan_path ?? null],
                                    ['name' => 'price_sheet_path','label' => 'Price Sheet','current' => $property->price_sheet_path ?? null],
                                ] as $doc)
                                    <div class="border border-dashed border-gray-300 rounded-xl p-3 text-center">
                                        <p class="text-xs font-semibold text-gray-600 mb-2">{{ $doc['label'] }}</p>
                                        @if($doc['current'])
                                            <p class="text-xs text-green-600 mb-1">✓ Uploaded</p>
                                        @endif
                                        <input type="file" name="{{ $doc['name'] }}" accept=".pdf"
                                               class="text-xs text-gray-500 w-full">
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- Video URL -->
                        <div>
                            <label class="form-label">Project Video URL</label>
                            <input type="url" name="video_url"
                                   value="{{ old('video_url', $property->video_url ?? '') }}"
                                   class="form-input" placeholder="https://youtube.com/...">
                        </div>

                    </div>
                </div>
            </div>

            <!-- Navigation -->
            <div class="flex items-center justify-between mt-6 pt-6 border-t border-gray-200">
                <button type="button" class="btn btn-secondary" id="prevBtn" style="display:none;"><svg
                        width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                    </svg> Previous</button>
                <div class="flex-1"></div>
                <button type="button" class="btn btn-primary" id="nextBtn">Next Step <svg width="16"
                        height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg></button>
                <button type="submit" class="btn btn-primary" id="submitBtn"
                    style="display:none;">{{ isset($property) ? 'Update Property' : 'Publish Property' }}</button>
            </div>
        </form>
    </div>
@endsection

@push('styles')
    <style>
        .step-indicator {
            display: flex;
            align-items: center;
            justify-content: center
        }

        .step {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem
        }

        .step-number {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #e2e8f0;
            color: #64748b;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 0.875rem;
            transition: all 0.3s
        }

        .step.active .step-number,
        .step.completed .step-number {
            background: var(--primary);
            color: white
        }

        .step-label {
            font-size: 0.75rem;
            color: #64748b;
            font-weight: 500
        }

        .step.active .step-label {
            color: var(--primary)
        }

        .step-line {
            width: 60px;
            height: 2px;
            background: #e2e8f0;
            margin: 0 0.5rem
        }

        .form-step {
            display: none
        }

        .form-step.active {
            display: block
        }

        .property-type-card {
            cursor: pointer
        }

        .property-type-card input {
            display: none
        }

        .property-type-card .card-content {
            padding: 1.5rem 1rem;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            text-align: center;
            transition: all 0.2s
        }

        .property-type-card input:checked+.card-content {
            border-color: var(--primary);
            background: #eff6ff
        }

        .property-type-card:hover .card-content {
            border-color: #94a3b8
        }

        .type-icon {
            width: 40px;
            height: 40px;
            margin: 0 auto 0.75rem;
            color: #64748b
        }

        .property-type-card input:checked+.card-content .type-icon {
            color: var(--primary)
        }

        .type-label {
            font-weight: 600;
            color: #0f172a;
            font-size: 0.875rem
        }

        .listing-type-toggle {
            display: flex;
            gap: 0.5rem
        }

        .toggle-option {
            flex: 1
        }

        .toggle-option input {
            display: none
        }

        .toggle-option span {
            display: block;
            padding: 0.75rem 1rem;
            text-align: center;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s
        }

        .toggle-option input:checked+span {
            border-color: var(--primary);
            background: #eff6ff;
            color: var(--primary)
        }

        .conditional-fields.hidden {
            display: none
        }

        .upload-zone,
        .featured-upload-zone {
            border: 2px dashed #e2e8f0;
            border-radius: 12px;
            padding: 2rem;
            text-align: center;
            position: relative;
            cursor: pointer;
            transition: all 0.2s
        }

        .upload-zone:hover,
        .featured-upload-zone:hover {
            border-color: var(--primary);
            background: #f8fafc
        }

        .upload-input {
            position: absolute;
            inset: 0;
            opacity: 0;
            cursor: pointer
        }

        .featured-upload-zone {
            padding: 1.5rem
        }

        .preview-img {
            max-height: 150px;
            border-radius: 8px;
            margin: 0 auto
        }

        .remove-preview {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 24px;
            height: 24px;
            background: #ef4444;
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            font-size: 16px;
            line-height: 1
        }

        .gallery-preview {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.5rem;
            margin-bottom: 1rem
        }

        .gallery-preview img {
            width: 100%;
            height: 60px;
            object-fit: cover;
            border-radius: 6px
        }

        .toggle-card {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem;
            background: #f8fafc;
            border-radius: 8px;
            cursor: pointer
        }

        .toggle-card input[type="checkbox"] {
            width: 20px;
            height: 20px
        }

        .toggle-title {
            display: block;
            font-weight: 500;
            color: #0f172a
        }

        .toggle-desc {
            display: block;
            font-size: 0.75rem;
            color: #64748b
        }

        @media(max-width:640px) {
            .step-label {
                display: none
            }

            .step-line {
                width: 30px
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        let currentStep = 1;
        const totalSteps = 6;

        function showStep(step) {
            document.querySelectorAll('.form-step').forEach(s => s.classList.remove('active'));
            document.getElementById('step-' + step).classList.add('active');
            document.querySelectorAll('.step').forEach((s, i) => {
                s.classList.remove('active', 'completed');
                if (i + 1 < step) s.classList.add('completed');
                if (i + 1 === step) s.classList.add('active');
            });
            document.getElementById('prevBtn').style.display = step === 1 ? 'none' : 'inline-flex';
            document.getElementById('nextBtn').style.display = step === totalSteps ? 'none' : 'inline-flex';
            document.getElementById('submitBtn').style.display = step === totalSteps ? 'inline-flex' : 'none';
        }

        document.getElementById('nextBtn').addEventListener('click', () => {
            if (currentStep < totalSteps) {
                currentStep++;
                showStep(currentStep);
                window.scrollTo(0, 0);
            }
        });
        document.getElementById('prevBtn').addEventListener('click', () => {
            if (currentStep > 1) {
                currentStep--;
                showStep(currentStep);
                window.scrollTo(0, 0);
            }
        });

        // Conditional fields
        document.querySelectorAll('input[name="property_type"]').forEach(input => {
            input.addEventListener('change', function() {
                document.querySelectorAll('.conditional-fields').forEach(f => f.classList.add('hidden'));
                const target = document.querySelector('.conditional-fields[data-type="' + this.value +
                '"]');
                if (target) target.classList.remove('hidden');
            });
        });

        // Initialize conditional fields
        const initialType = document.querySelector('input[name="property_type"]:checked');
        if (initialType) {
            const target = document.querySelector('.conditional-fields[data-type="' + initialType.value + '"]');
            if (target) target.classList.remove('hidden');
        }

        // Featured image preview
        function previewFeatured(input) {
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.querySelector('#featuredPreview img').src = e.target.result;
                    document.getElementById('featuredPreview').classList.remove('hidden');
                    document.getElementById('featuredPlaceholder').classList.add('hidden');
                };
                reader.readAsDataURL(input.files[0]);
            }
        }

        function removeFeaturedPreview() {
            document.getElementById('featuredInput').value = '';
            document.getElementById('featuredPreview').classList.add('hidden');
            document.getElementById('featuredPlaceholder').classList.remove('hidden');
        }

        // Gallery preview
        function previewGallery(input) {
            const preview = document.getElementById('galleryPreview');
            preview.innerHTML = '';
            if (input.files && input.files.length > 0) {
                preview.classList.remove('hidden');
                document.getElementById('galleryPlaceholder').classList.add('hidden');
                Array.from(input.files).forEach(file => {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const img = document.createElement('img');
                        img.src = e.target.result;
                        preview.appendChild(img);
                    };
                    reader.readAsDataURL(file);
                });
            }
        }
    </script>
@endpush