@extends('layouts.app')

@section('title', 'Edit Property')
@section('page-title', 'Edit Property')

@section('content')
<div class="row justify-content-center">
    <div class="col-xl-10">

        <form method="POST" action="{{ route('admin.property.update', $property) }}">
            @csrf @method('PATCH')

            {{-- ── Basic Information ──────────────────────────────────── --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white py-3">
                    <h6 class="mb-0 fw-semibold">Basic Information</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">

                        <div class="col-md-6">
                            <label class="form-label fw-medium">Title <span class="text-danger">*</span></label>
                            <input type="text" name="title"
                                   class="form-control @error('title') is-invalid @enderror"
                                   value="{{ old('title', $property->title) }}">
                            @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        <div class="col-md-3">
                            <label class="form-label fw-medium">Listing Purpose <span class="text-danger">*</span></label>
                            <select name="listing_purpose" id="listing-purpose-select"
                                    class="form-select @error('listing_purpose') is-invalid @enderror">
                                @foreach($listingPurposes as $value => $label)
                                    <option value="{{ $value }}"
                                            {{ old('listing_purpose', $property->listing_purpose) === $value ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                            @error('listing_purpose')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        <div class="col-md-3">
                            <label class="form-label fw-medium">Property Type <span class="text-danger">*</span></label>
                            <select name="type" id="property-type-select"
                                    class="form-select @error('type') is-invalid @enderror">
                                @foreach($types as $type)
                                    <option value="{{ $type }}"
                                            {{ old('type', $property->type) === $type ? 'selected' : '' }}>
                                        {{ $typeLabels[$type] ?? ucwords(str_replace('_', ' ', $type)) }}
                                    </option>
                                @endforeach
                            </select>
                            @error('type')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        <div class="col-md-8">
                            <label class="form-label fw-medium">Full Address <span class="text-danger">*</span></label>
                            <textarea name="location" rows="2"
                                      class="form-control @error('location') is-invalid @enderror">{{ old('location', $property->location) }}</textarea>
                            @error('location')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-medium">City / Area <span class="text-danger">*</span></label>
                            <input type="text" name="city"
                                   class="form-control @error('city') is-invalid @enderror"
                                   value="{{ old('city', $property->city) }}">
                            @error('city')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-medium">GPS Coordinates
                                <small class="text-muted fw-normal">(optional — or use the map below)</small>
                            </label>
                            <div class="row g-2">
                                <div class="col-6">
                                    <input type="number" step="any" name="latitude" id="lat-input"
                                           class="form-control @error('latitude') is-invalid @enderror"
                                           value="{{ old('latitude', $property->latitude) }}"
                                           placeholder="Latitude">
                                    @error('latitude')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-6">
                                    <input type="number" step="any" name="longitude" id="lng-input"
                                           class="form-control @error('longitude') is-invalid @enderror"
                                           value="{{ old('longitude', $property->longitude) }}"
                                           placeholder="Longitude">
                                    @error('longitude')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <label class="form-label fw-medium">Description</label>
                            <textarea name="description" class="form-control" rows="3">{{ old('description', $property->description) }}</textarea>
                        </div>

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

            {{-- ── Map Pin Widget ──────────────────────────────────────── --}}
            @include('property.partials._map_widget', [
                'initialLat' => old('latitude', $property->latitude),
                'initialLng' => old('longitude', $property->longitude),
            ])

            {{-- ── Type-specific Fields ────────────────────────────────── --}}
            <div class="card border-0 shadow-sm mb-4" id="type-details-card">
                <div class="card-header bg-white py-3">
                    <h6 class="mb-0 fw-semibold" id="type-details-heading">
                        {{ ($typeLabels[$property->type] ?? ucwords(str_replace('_', ' ', $property->type))) }} Details
                    </h6>
                </div>
                <div class="card-body">
                    @include('property.partials._type_fields', ['fieldTemplates' => $fieldTemplates, 'property' => $property])
                </div>
            </div>

            {{-- ── Size & Pricing ───────────────────────────────────────── --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white py-3">
                    <h6 class="mb-0 fw-semibold">Size & Pricing</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">

                        <div class="col-md-4">
                            <label class="form-label fw-medium">Size <span class="text-danger">*</span></label>
                            <input type="number" step="any" name="area"
                                   class="form-control @error('area') is-invalid @enderror"
                                   value="{{ old('area', $property->area) }}">
                            @error('area')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-medium">Unit <span class="text-danger">*</span></label>
                            <select name="area_unit" class="form-select @error('area_unit') is-invalid @enderror">
                                @foreach($areaUnits as $unit)
                                    <option value="{{ $unit }}"
                                            {{ old('area_unit', $property->area_unit) === $unit ? 'selected' : '' }}>
                                        {{ strtoupper($unit) }}
                                    </option>
                                @endforeach
                            </select>
                            @error('area_unit')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-medium" id="price-field-label">
                                {{ $property->listing_purpose === 'for_rent' ? 'Expected Rent (₹/month)' : 'Expected Price (₹)' }}
                                <span class="text-danger">*</span>
                            </label>
                            <input type="number" step="1" name="price" id="price-field"
                                   class="form-control @error('price') is-invalid @enderror"
                                   value="{{ old('price', $property->price_on_request ? '' : $property->price) }}"
                                   {{ old('price_on_request', $property->price_on_request) ? 'disabled' : '' }}>
                            @error('price')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            <div class="form-check mt-2">
                                <input type="hidden" name="price_on_request" value="0">
                                <input class="form-check-input" type="checkbox" name="price_on_request"
                                       value="1" id="price_on_request"
                                       {{ old('price_on_request', $property->price_on_request) ? 'checked' : '' }}>
                                <label class="form-check-label small text-muted" for="price_on_request">
                                    Price on Request
                                </label>
                            </div>
                        </div>

                        <div class="col-12">
                            <label class="form-label fw-medium">Price Change Note
                                <small class="text-muted fw-normal">(optional — recorded only if price changes)</small>
                            </label>
                            <textarea name="price_change_note" class="form-control" rows="2"
                                      placeholder="e.g. Market correction, negotiated price…">{{ old('price_change_note') }}</textarea>
                        </div>

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

            {{-- ── Owner & Sourcing ─────────────────────────────────────── --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white py-3">
                    <h6 class="mb-0 fw-semibold">Owner & Sourcing</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">

                        <div class="col-md-6">
                            <label class="form-label fw-medium">Owner <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="text" id="owner-display"
                                       class="form-control @error('owner_id') is-invalid @enderror"
                                       value="{{ $property->owner ? $property->owner->name . ' — ' . $property->owner->mobile : '' }}"
                                       placeholder="Search by name or mobile…"
                                       autocomplete="off">
                                <button type="button" class="btn btn-outline-secondary"
                                        data-bs-toggle="modal" data-bs-target="#ownerModal">
                                    <i class="bi bi-person-plus"></i>
                                </button>
                            </div>
                            <input type="hidden" name="owner_id" id="owner_id"
                                   value="{{ old('owner_id', $property->owner_id) }}">
                            <div id="owner-suggestions" class="list-group mt-1 shadow-sm"
                                 style="position:absolute;z-index:999;min-width:300px;display:none"></div>
                            @error('owner_id')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-medium">Broker / Agent
                                <small class="text-muted fw-normal">(optional)</small>
                            </label>
                            <input type="text" id="broker-display" class="form-control"
                                   value="{{ $property->broker ? $property->broker->name . ' — ' . $property->broker->mobile : '' }}"
                                   placeholder="Search by name, mobile or firm…"
                                   autocomplete="off">
                            <input type="hidden" name="broker_id" id="broker_id"
                                   value="{{ old('broker_id', $property->broker_id) }}">
                            <div id="broker-suggestions" class="list-group mt-1 shadow-sm"
                                 style="position:absolute;z-index:999;min-width:300px;display:none"></div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-medium">Sourcing Channel <span class="text-danger">*</span></label>
                            <select name="sourcing_channel_id" required
                                    class="form-select @error('sourcing_channel_id') is-invalid @enderror">
                                <option value="">— Select —</option>
                                @foreach($channels as $channel)
                                    <option value="{{ $channel->id }}"
                                            {{ old('sourcing_channel_id', $property->sourcing_channel_id) == $channel->id ? 'selected' : '' }}>
                                        {{ $channel->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('sourcing_channel_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        @if(auth()->user()->isAdmin())
                        <div class="col-md-4">
                            <label class="form-label fw-medium">Status</label>
                            <select name="status" id="status-select" class="form-select">
                                @foreach($statuses as $status)
                                    <option value="{{ $status }}"
                                            {{ old('status', $property->status) === $status ? 'selected' : '' }}>
                                        {{ ucwords(str_replace('_', ' ', $status)) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-8" id="status-note-wrapper" style="display:none">
                            <label class="form-label fw-medium">Status Change Note
                                <small class="text-muted fw-normal">(optional)</small>
                            </label>
                            <textarea name="status_note" class="form-control" rows="2"
                                      placeholder="Reason for status change…">{{ old('status_note') }}</textarea>
                        </div>
                        @else
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Status</label>
                            <div class="form-control-plaintext">
                                @php
                                    $statusBadgeMap = [
                                        'published'    => 'bg-success bg-opacity-10 text-success',
                                        'under_review' => 'bg-warning bg-opacity-10 text-warning',
                                        'unavailable'  => 'bg-secondary bg-opacity-10 text-secondary',
                                    ];
                                    $statusBadgeCls = $statusBadgeMap[$property->status] ?? 'bg-secondary bg-opacity-10 text-secondary';
                                @endphp
                                <span class="badge {{ $statusBadgeCls }}">
                                    {{ ucwords(str_replace('_', ' ', $property->status)) }}
                                </span>
                            </div>
                        </div>
                        @endif

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

            {{-- ── Amenity Tags ─────────────────────────────────────────── --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white py-3">
                    <h6 class="mb-0 fw-semibold">Amenity Tags</h6>
                </div>
                <div class="card-body">
                    <div class="d-flex flex-wrap gap-3">
                        @php $selectedTagIds = old('tag_ids', $property->tags->pluck('id')->toArray()); @endphp
                        @foreach($tags as $tag)
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox"
                                       name="tag_ids[]" value="{{ $tag->id }}"
                                       id="tag-{{ $tag->id }}"
                                       {{ in_array($tag->id, $selectedTagIds) ? 'checked' : '' }}>
                                <label class="form-check-label small" for="tag-{{ $tag->id }}">
                                    {{ $tag->name }}
                                </label>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="d-flex gap-2 justify-content-end mb-4">
                <a href="{{ route('admin.property.show', $property) }}" class="btn btn-light">Cancel</a>
                <button type="submit" class="btn btn-primary px-4">
                    <i class="bi bi-check-lg me-1"></i>Save Changes
                </button>
            </div>

        </form>

        {{-- ── Image Gallery ────────────────────────────────────────────── --}}
        @include('property.partials._image_gallery', ['property' => $property])

        {{-- ── Document Vault ──────────────────────────────────────────── --}}
        @include('property.partials._document_vault', ['property' => $property, 'documentTypes' => $documentTypes])

        @include('property.partials._owner_modal')

    </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    // Price label updates based on listing purpose
    var purposeSelect = document.getElementById('listing-purpose-select');
    var priceLabelEl  = document.getElementById('price-field-label');
    function updatePriceLabel() {
        var isRent = purposeSelect && purposeSelect.value === 'for_rent';
        if (priceLabelEl) {
            priceLabelEl.innerHTML = (isRent ? 'Expected Rent (₹/month)' : 'Expected Price (₹)')
                + ' <span class="text-danger">*</span>';
        }
    }
    if (purposeSelect) { purposeSelect.addEventListener('change', updatePriceLabel); updatePriceLabel(); }

    // Show/hide type-details heading
    var typeSelect  = document.getElementById('property-type-select');
    var typeHeading = document.getElementById('type-details-heading');
    var typeLabels  = @json($typeLabels);
    if (typeSelect && typeHeading) {
        typeSelect.addEventListener('change', function () {
            typeHeading.textContent = (typeLabels[this.value] || this.value) + ' Details';
        });
    }

    // Price on request toggle — price is required unless this is checked
    // (see UpdatePropertyRequest's required_unless:price_on_request,1 rule;
    // toggling `required` here keeps native browser validation in sync
    // with it, not just `disabled`).
    var por        = document.getElementById('price_on_request');
    var priceField = document.getElementById('price-field');
    if (por && priceField) {
        function togglePrice() {
            priceField.disabled = por.checked;
            priceField.required = !por.checked;
            if (por.checked) priceField.value = '';
        }
        por.addEventListener('change', togglePrice);
        togglePrice();
    }

    // Status note show/hide
    var statusSelect      = document.getElementById('status-select');
    var statusNoteWrapper = document.getElementById('status-note-wrapper');
    var originalStatus    = statusSelect ? statusSelect.value : null;
    if (statusSelect && statusNoteWrapper) {
        statusSelect.addEventListener('change', function () {
            statusNoteWrapper.style.display = this.value !== originalStatus ? 'block' : 'none';
        });
    }

    // Autocomplete factory
    function makeAutocomplete(inputId, hiddenId, suggestionsId, searchUrl, displayFn) {
        var input       = document.getElementById(inputId);
        var hidden      = document.getElementById(hiddenId);
        var suggestions = document.getElementById(suggestionsId);
        if (! input) return;
        var timer;
        input.addEventListener('input', function () {
            clearTimeout(timer);
            hidden.value = '';
            var val = this.value.trim();
            if (val.length < 2) { suggestions.style.display = 'none'; return; }
            timer = setTimeout(function () {
                fetch(searchUrl + '?q=' + encodeURIComponent(val), { headers: { 'Accept': 'application/json' } })
                    .then(function (r) { return r.json(); })
                    .then(function (items) {
                        suggestions.innerHTML = '';
                        if (! items.length) { suggestions.style.display = 'none'; return; }
                        items.forEach(function (item) {
                            var a = document.createElement('a');
                            a.href = '#'; a.className = 'list-group-item list-group-item-action small py-2';
                            a.textContent = displayFn(item);
                            a.addEventListener('click', function (e) {
                                e.preventDefault();
                                hidden.value = item.id; input.value = displayFn(item);
                                suggestions.style.display = 'none';
                            });
                            suggestions.appendChild(a);
                        });
                        suggestions.style.display = 'block';
                    });
            }, 250);
        });
        document.addEventListener('click', function (e) {
            if (! input.contains(e.target) && ! suggestions.contains(e.target))
                suggestions.style.display = 'none';
        });
    }

    makeAutocomplete('owner-display', 'owner_id', 'owner-suggestions',
        "{{ route('admin.ajax.owners.search') }}",
        function (o) { return o.name + ' — ' + o.mobile; });

    makeAutocomplete('broker-display', 'broker_id', 'broker-suggestions',
        "{{ route('admin.ajax.brokers.search') }}",
        function (b) { return b.name + ' — ' + b.mobile; });
}());
</script>
@endpush