@extends('layouts.app')

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

@section('content')
<div class="row g-4" id="property-create-row">
    <div class="col-xl-8" id="property-form-col">

        <form method="POST" action="{{ route('admin.property.store') }}">
            @csrf

            {{-- ── 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') }}"
                                   placeholder="e.g. 2 BHK Flat in Shastri Nagar">
                            @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', 'for_sale') === $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">
                                <option value="">— Select Type —</option>
                                @foreach($types as $type)
                                    <option value="{{ $type }}" {{ old('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"
                                      placeholder="Plot No., Street, Locality…">{{ old('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') }}" placeholder="e.g. Nagpur">
                            @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') }}" 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') }}" 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"
                                      placeholder="Optional property description…">{{ old('description') }}</textarea>
                        </div>

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

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

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

            {{-- ── 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') }}" placeholder="e.g. 1200">
                            @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', 'sqft') === $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">
                                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') }}" placeholder="Amount in INR">
                            @error('price')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            <div class="form-check mt-2">
                                <input class="form-check-input" type="checkbox" name="price_on_request"
                                       value="1" id="price_on_request"
                                       {{ old('price_on_request') ? 'checked' : '' }}>
                                <label class="form-check-label small text-muted" for="price_on_request">
                                    Price on Request
                                </label>
                            </div>
                        </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"
                                       placeholder="Search by name or mobile…"
                                       autocomplete="off">
                                <button type="button" class="btn btn-outline-secondary"
                                        data-bs-toggle="modal" data-bs-target="#ownerModal"
                                        title="Add new owner">
                                    <i class="bi bi-person-plus"></i>
                                </button>
                            </div>
                            <input type="hidden" name="owner_id" id="owner_id" value="{{ old('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"
                                   placeholder="Search by name, mobile or firm…" autocomplete="off">
                            <input type="hidden" name="broker_id" id="broker_id" value="{{ old('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') == $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-6">
                            <label class="form-label fw-medium">Status</label>
                            <select name="status" class="form-select">
                                @foreach($statuses as $status)
                                    <option value="{{ $status }}"
                                            {{ old('status', 'under_review') === $status ? 'selected' : '' }}>
                                        {{ ucwords(str_replace('_', ' ', $status)) }}
                                    </option>
                                @endforeach
                            </select>
                        </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">
                        @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, old('tag_ids', [])) ? 'checked' : '' }}>
                                <label class="form-check-label small" for="tag-{{ $tag->id }}">
                                    {{ $tag->name }}
                                </label>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            {{-- ── Media note ───────────────────────────────────────────── --}}
            <div class="alert alert-info border-0 d-flex align-items-center gap-2 mb-4">
                <i class="bi bi-images fs-5"></i>
                <span class="small">
                    <strong>Images & Documents</strong> can be uploaded from the property detail page after saving.
                </span>
            </div>

            <div class="d-flex gap-2 justify-content-end mb-5">
                <a href="{{ route('admin.property.index') }}" 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 Property
                </button>
            </div>

        </form>

        @include('property.partials._owner_modal')

    </div>

    {{-- Duplicate Detection Side Panel --}}
    <div class="col-xl-4" id="duplicate-panel-col">

        {{-- Idle placeholder — always visible until first check triggers --}}
        <div class="card border-0 shadow-sm" id="dup-idle">
            <div class="card-body text-center py-5 text-muted">
                <i class="bi bi-copy d-block fs-2 mb-2 opacity-25"></i>
                <div class="small">Duplicate check will appear here once you fill in property type, city, or owner.</div>
            </div>
        </div>

        {{-- Active card: loading + results + empty (hidden until first check) --}}
        <div class="card border-warning shadow-sm sticky-top d-none" style="top:1.5rem" id="dup-panel-card">
            <div class="card-header bg-warning bg-opacity-10 border-bottom border-warning border-opacity-25 d-flex align-items-center justify-content-between py-2">
                <span class="fw-semibold text-warning-emphasis small">
                    <i class="bi bi-exclamation-triangle me-1"></i>
                    Possible Duplicates
                    <span class="badge bg-warning text-dark ms-1" id="dup-count-badge">0</span>
                </span>
                <button type="button" class="btn btn-sm btn-outline-secondary py-0 px-2" id="dup-dismiss-btn"
                        title="Dismiss all and hide">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>

            {{-- Loading state --}}
            <div class="card-body text-center py-4 d-none" id="dup-loading">
                <div class="spinner-border spinner-border-sm text-warning" role="status"></div>
                <div class="small text-muted mt-2">Checking for duplicates…</div>
            </div>

            {{-- Match list --}}
            <div id="dup-list"></div>

            {{-- Empty state --}}
            <div class="card-body text-center py-4 d-none" id="dup-empty">
                <i class="bi bi-check-circle text-success d-block fs-3 mb-2"></i>
                <div class="small text-muted">No duplicates found.</div>
            </div>
        </div>

    </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 card
    var typeSelect = document.getElementById('property-type-select');
    var typeCard   = document.getElementById('type-details-card');
    var typeHeading = document.getElementById('type-details-heading');
    var typeLabels  = @json($typeLabels);

    if (typeSelect && typeCard) {
        typeSelect.addEventListener('change', function () {
            typeCard.style.display = this.value ? 'block' : 'none';
            if (typeHeading && this.value) {
                typeHeading.textContent = (typeLabels[this.value] || this.value) + ' Details';
            }
        });
        if (typeSelect.value) typeCard.style.display = 'block';
    }

    // Price on request toggle
    var por        = document.getElementById('price_on_request');
    var priceField = document.getElementById('price-field');
    if (por && priceField) {
        function togglePrice() { priceField.disabled = por.checked; if (por.checked) priceField.value = ''; }
        por.addEventListener('change', togglePrice);
        togglePrice();
    }

    // Autocomplete factory (onSelect optional 6th param — callback(item) after selection)
    function makeAutocomplete(inputId, hiddenId, suggestionsId, searchUrl, displayFn, onSelect) {
        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',
                               'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content }
                })
                .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';
                            if (typeof onSelect === 'function') { onSelect(item); }
                        });
                        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; },
        function () { scheduleDuplicateCheck(); });

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

    // ── Duplicate Detection ──────────────────────────────────────────────────
    var dupCheckUrl   = "{{ route('admin.ajax.properties.duplicate-check') }}";
    var dupDismissUrl = "{{ route('admin.ajax.properties.duplicate-dismiss') }}";
    var csrfToken     = document.querySelector('meta[name="csrf-token"]').content;

    var dupPanelCard  = document.getElementById('dup-panel-card');
    var dupIdleCard   = document.getElementById('dup-idle');
    var dupList       = document.getElementById('dup-list');
    var dupLoading    = document.getElementById('dup-loading');
    var dupEmpty      = document.getElementById('dup-empty');
    var dupCountBadge = document.getElementById('dup-count-badge');
    var dupDismissBtn = document.getElementById('dup-dismiss-btn');

    var dupTimer = null;
    var currentMatches = [];

    function scheduleDuplicateCheck() {
        clearTimeout(dupTimer);
        dupTimer = setTimeout(runDuplicateCheck, 600);
    }

    function runDuplicateCheck() {
        var typeVal  = typeSelect ? typeSelect.value : '';
        if (! typeVal) { hidePanel(); return; }

        var areaInput   = document.querySelector('input[name="area"]');
        var cityInput   = document.querySelector('input[name="city"]');
        var locationEl  = document.querySelector('textarea[name="location"]');
        var ownerIdEl   = document.getElementById('owner_id');
        var ownerDispEl = document.getElementById('owner-display');

        var params = new URLSearchParams({
            type: typeVal,
        });

        if (cityInput && cityInput.value.trim())     params.set('city',       cityInput.value.trim());
        if (locationEl && locationEl.value.trim())   params.set('location',   locationEl.value.trim());
        if (areaInput  && areaInput.value.trim())    params.set('area',       areaInput.value.trim());
        if (ownerIdEl  && ownerIdEl.value)           params.set('owner_id',   ownerIdEl.value);
        else if (ownerDispEl && ownerDispEl.value.trim())
                                                     params.set('owner_name', ownerDispEl.value.trim());

        showLoading();

        fetch(dupCheckUrl + '?' + params.toString(), {
            headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken }
        })
        .then(function (r) { return r.json(); })
        .then(function (data) {
            currentMatches = data.matches || [];
            renderMatches(currentMatches);
        })
        .catch(function () { hidePanel(); });
    }

    function showLoading() {
        dupLoading.classList.remove('d-none');
        dupList.innerHTML  = '';
        dupEmpty.classList.add('d-none');
        showPanel();
    }

    function renderMatches(matches) {
        dupLoading.classList.add('d-none');
        dupList.innerHTML = '';

        if (! matches.length) {
            dupEmpty.classList.remove('d-none');
            dupCountBadge.textContent = '0';
            // Auto-hide after brief empty-state display
            setTimeout(hidePanel, 1500);
            return;
        }

        dupEmpty.classList.add('d-none');
        dupCountBadge.textContent = matches.length;

        matches.forEach(function (m) {
            var purposeLabel = m.listing_purpose === 'for_rent' ? 'For Rent' : 'For Sale';
            var purposeBadge = m.listing_purpose === 'for_rent'
                ? '<span class="badge bg-info bg-opacity-75 text-dark" style="font-size:0.65rem">' + purposeLabel + '</span>'
                : '<span class="badge bg-primary bg-opacity-75" style="font-size:0.65rem">' + purposeLabel + '</span>';

            var statusBadge = m.status === 'published'
                ? '<span class="badge bg-success bg-opacity-75" style="font-size:0.65rem">Published</span>'
                : m.status === 'unavailable'
                    ? '<span class="badge bg-secondary bg-opacity-75" style="font-size:0.65rem">Unavailable</span>'
                    : '<span class="badge bg-warning text-dark" style="font-size:0.65rem">Under Review</span>';

            var typeLabel = m.type
                ? m.type.replace(/_/g, ' ').replace(/\b\w/g, function (c) { return c.toUpperCase(); })
                : '';
            var typeBadge = typeLabel
                ? '<span class="badge bg-dark bg-opacity-10 text-dark" style="font-size:0.65rem">' + escHtml(typeLabel) + '</span>'
                : '';

            var sizeStr  = m.area ? m.area + ' ' + (m.area_unit || '').toUpperCase() : '—';
            var priceStr = m.price || '—';
            var ownerStr = m.owner_name || '—';
            var cityStr  = m.city || '—';

            var viewUrl = "{{ rtrim(url('admin/properties'), '/') }}/" + m.id;

            var card = document.createElement('div');
            card.className = 'border-bottom p-3';
            card.dataset.propertyId = m.id;
            card.innerHTML =
                '<div class="d-flex align-items-start justify-content-between mb-1">' +
                    '<div class="fw-medium small text-truncate me-2" style="max-width:180px" title="' + escHtml(m.title) + '">' + escHtml(m.title) + '</div>' +
                    '<div class="d-flex gap-1 flex-shrink-0 flex-wrap justify-content-end">' + typeBadge + ' ' + purposeBadge + ' ' + statusBadge + '</div>' +
                '</div>' +
                '<div class="row g-1 small text-muted">' +
                    '<div class="col-6"><i class="bi bi-geo-alt me-1"></i>' + escHtml(cityStr) + '</div>' +
                    '<div class="col-6"><i class="bi bi-arrows-angle-expand me-1"></i>' + escHtml(sizeStr) + '</div>' +
                    '<div class="col-6"><i class="bi bi-person me-1"></i>' + escHtml(ownerStr) + '</div>' +
                    '<div class="col-6"><i class="bi bi-currency-rupee me-1"></i>' + escHtml(priceStr) + '</div>' +
                '</div>' +
                '<div class="mt-2">' +
                    '<a href="' + viewUrl + '" target="_blank" class="btn btn-xs btn-outline-secondary py-0 px-2" style="font-size:0.72rem">' +
                        '<i class="bi bi-box-arrow-up-right me-1"></i>View Property' +
                    '</a>' +
                '</div>';
            dupList.appendChild(card);
        });

        showPanel();
    }

    function showPanel() {
        dupIdleCard.classList.add('d-none');
        dupPanelCard.classList.remove('d-none');
    }

    function hidePanel() {
        dupPanelCard.classList.add('d-none');
        dupIdleCard.classList.remove('d-none');
        dupList.innerHTML = '';
        dupLoading.classList.add('d-none');
        dupEmpty.classList.add('d-none');
        currentMatches = [];
    }

    function escHtml(str) {
        if (! str) return '';
        return String(str)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;');
    }

    // Dismiss all shown matches
    dupDismissBtn.addEventListener('click', function () {
        var ids = currentMatches.map(function (m) { return m.id; });
        if (! ids.length) { hidePanel(); return; }

        fetch(dupDismissUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept':       'application/json',
                'X-CSRF-TOKEN': csrfToken,
            },
            body: JSON.stringify({ property_ids: ids }),
        }).catch(function () { /* silent */ });

        hidePanel();
    });

    // Trigger points: type change, area blur, city blur + debounced input
    if (typeSelect) {
        typeSelect.addEventListener('change', scheduleDuplicateCheck);
    }

    var areaInput = document.querySelector('input[name="area"]');
    if (areaInput) {
        areaInput.addEventListener('blur',  scheduleDuplicateCheck);
    }

    var cityInput = document.querySelector('input[name="city"]');
    if (cityInput) {
        cityInput.addEventListener('blur', scheduleDuplicateCheck);
        cityInput.addEventListener('input', scheduleDuplicateCheck);
    }

    var ownerDisplay = document.getElementById('owner-display');
    if (ownerDisplay) {
        ownerDisplay.addEventListener('blur', scheduleDuplicateCheck);
    }
}());
</script>
@endpush