@extends('layouts.app')

@section('title', 'Properties')
@section('page-title', 'Properties')

@section('content')
<div class="d-flex align-items-center justify-content-between mb-4">
    <div>
        <p class="text-muted mb-0 small">{{ $properties->total() }} {{ Str::plural('property', $properties->total()) }} found</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('admin.property.map') }}" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-map me-1"></i>Map View
        </a>
        <a href="{{ route('admin.property.create') }}" class="btn btn-primary btn-sm">
            <i class="bi bi-plus-lg me-1"></i>Add Property
        </a>
    </div>
</div>

{{-- Filters --}}
<form method="GET" class="card border-0 shadow-sm mb-4" id="property-filter-form">
    <div class="card-body py-3">
        {{-- Row 1: search, type, purpose, status --}}
        <div class="row g-2 align-items-end mb-2">
            <div class="col-md-3">
                <input type="text" name="search" class="form-control form-control-sm"
                       placeholder="Search title or location…"
                       value="{{ request('search') }}">
            </div>
            <div class="col-md-2">
                <select name="type" class="form-select form-select-sm">
                    <option value="">All Types</option>
                    @foreach(\App\Models\Property::typeLabels() as $slug => $label)
                        <option value="{{ $slug }}" {{ request('type') === $slug ? 'selected' : '' }}>
                            {{ $label }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <select name="listing_purpose" class="form-select form-select-sm">
                    <option value="">All Purposes</option>
                    <option value="for_sale" {{ request('listing_purpose') === 'for_sale' ? 'selected' : '' }}>For Sale</option>
                    <option value="for_rent" {{ request('listing_purpose') === 'for_rent' ? 'selected' : '' }}>For Rent</option>
                </select>
            </div>
            @if(auth()->user()->isAdmin())
            <div class="col-md-2">
                <select name="status" class="form-select form-select-sm">
                    <option value="">All Statuses</option>
                    @foreach(\App\Models\Property::STATUSES as $status)
                        <option value="{{ $status }}" {{ request('status') === $status ? 'selected' : '' }}>
                            {{ ucwords(str_replace('_', ' ', $status)) }}
                        </option>
                    @endforeach
                </select>
            </div>
            @endif
        </div>
        {{-- Row 2: city, sourcing channel, date range, actions --}}
        <div class="row g-2 align-items-end">
            <div class="col-md-2">
                <input type="text" name="city" class="form-control form-control-sm"
                       placeholder="City / Area"
                       value="{{ request('city') }}">
            </div>
            <div class="col-md-2">
                <select name="sourcing_channel_id" class="form-select form-select-sm">
                    <option value="">All Channels</option>
                    @foreach($sourcingChannels as $ch)
                        <option value="{{ $ch->id }}" {{ request('sourcing_channel_id') == $ch->id ? 'selected' : '' }}>
                            {{ $ch->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <input type="date" name="date_from" class="form-control form-control-sm"
                       title="Date Added From"
                       value="{{ request('date_from') }}">
            </div>
            <div class="col-md-2">
                <input type="date" name="date_to" class="form-control form-control-sm"
                       title="Date Added To"
                       value="{{ request('date_to') }}">
            </div>
            <div class="col-auto d-flex gap-2 align-items-center">
                <button type="submit" class="btn btn-primary btn-sm">
                    <i class="bi bi-search me-1"></i>Filter
                </button>
                <a href="{{ route('admin.property.index') }}" class="btn btn-light btn-sm">Clear</a>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="map-search-toggle"
                        data-bs-toggle="collapse" data-bs-target="#map-search-panel"
                        aria-expanded="{{ ($lat || $lng) ? 'true' : 'false' }}">
                    <i class="bi bi-geo-alt me-1"></i>Map Search
                    @if($lat && $lng && $radius)
                        <span class="badge bg-primary ms-1" style="font-size:0.6rem">Active</span>
                    @endif
                </button>
            </div>
        </div>

        {{-- Radius search panel --}}
        <div class="collapse {{ ($lat || $lng) ? 'show' : '' }} mt-3" id="map-search-panel">
            <div class="border-top pt-3">
                <div class="row g-2 align-items-end">
                    <div class="col-md-5">
                        <label class="form-label small fw-medium mb-1">
                            <i class="bi bi-geo-alt me-1 text-primary"></i>Search Centre
                        </label>
                        <input type="text" id="radius-location-input"
                               class="form-control form-control-sm"
                               placeholder="Type a location…"
                               value="{{ request('location_label') }}"
                               autocomplete="off">
                        <input type="hidden" name="lat"            id="radius-lat"   value="{{ request('lat') }}">
                        <input type="hidden" name="lng"            id="radius-lng"   value="{{ request('lng') }}">
                        <input type="hidden" name="location_label" id="radius-label" value="{{ request('location_label') }}">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small fw-medium mb-1">Radius</label>
                        <select name="radius" class="form-select form-select-sm" id="radius-select">
                            @foreach([1 => '1 km', 2 => '2 km', 5 => '5 km', 10 => '10 km', 20 => '20 km'] as $km => $label)
                                <option value="{{ $km }}" {{ (int) request('radius', 5) === $km ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-auto">
                        <button type="submit" class="btn btn-sm btn-primary" id="radius-search-btn" disabled>
                            <i class="bi bi-search me-1"></i>Search Radius
                        </button>
                    </div>
                    @if($lat && $lng)
                    <div class="col-auto">
                        <a href="{{ route('admin.property.index', array_merge(request()->except(['lat','lng','radius','location_label']), [])) }}"
                           class="btn btn-sm btn-light">
                            <i class="bi bi-x me-1"></i>Clear Radius
                        </a>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</form>

{{-- Radius results map --}}
@if($lat && $lng && $radius)
@php $mapsKey = config('services.google.maps_key'); @endphp
@if($mapsKey)
<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-white py-3 d-flex align-items-center justify-content-between">
        <h6 class="mb-0 fw-semibold">
            <i class="bi bi-geo me-1 text-primary"></i>
            Results within {{ $radius }} km
            <span class="badge bg-secondary bg-opacity-10 text-secondary ms-1">{{ $properties->total() }}</span>
        </h6>
    </div>
    <div id="radius-map-canvas" style="height:320px"></div>
</div>
@push('scripts')
<script>
window.initRadiusMap = function () {
    var mapProperties  = @json($mapProperties ?? collect());
    var centerLat      = {{ $lat }};
    var centerLng      = {{ $lng }};
    var radiusMetres   = {{ $radius * 1000 }};

    var map = new google.maps.Map(document.getElementById('radius-map-canvas'), {
        center:            { lat: centerLat, lng: centerLng },
        zoom:              12,
        mapTypeControl:    false,
        streetViewControl: false,
    });

    // Radius circle
    new google.maps.Circle({
        map:           map,
        center:        { lat: centerLat, lng: centerLng },
        radius:        radiusMetres,
        fillColor:     '#1a6fc4',
        fillOpacity:   0.08,
        strokeColor:   '#1a6fc4',
        strokeOpacity: 0.6,
        strokeWeight:  1.5,
    });

    // Centre marker
    new google.maps.Marker({
        map:      map,
        position: { lat: centerLat, lng: centerLng },
        icon: {
            path:        google.maps.SymbolPath.CIRCLE,
            scale:       6,
            fillColor:   '#1a6fc4',
            fillOpacity: 0.9,
            strokeColor: '#fff',
            strokeWeight: 2,
        },
        title: 'Search centre',
    });

    // Property pins
    mapProperties.forEach(function (p) {
        var marker = new google.maps.Marker({
            map:      map,
            position: { lat: p.lat, lng: p.lng },
            title:    p.title,
        });

        var purposeColor = p.listing_purpose === 'for_rent' ? '#0dcaf0' : '#198754';
        var infoContent  =
            '<div style="max-width:210px;font-family:sans-serif;font-size:13px">' +
            '<div style="font-weight:600;margin-bottom:4px">' + p.title + '</div>' +
            '<div style="margin-bottom:4px">' +
            '<span style="background:' + purposeColor + ';color:#fff;font-size:10px;padding:1px 5px;border-radius:4px">' +
                (p.listing_purpose === 'for_rent' ? 'For Rent' : 'For Sale') +
            '</span>' +
            '<span style="background:#6c757d;color:#fff;font-size:10px;padding:1px 5px;border-radius:4px;margin-left:3px">' +
                p.type_label +
            '</span>' +
            '</div>' +
            '<div style="color:#555;margin-bottom:6px">' + p.area + ' &nbsp;·&nbsp; ' + p.price + '</div>' +
            '<a href="' + p.url + '" target="_blank" style="font-size:11px;color:#0d6efd">View Property →</a>' +
            '</div>';

        var iw = new google.maps.InfoWindow({ content: infoContent });
        marker.addListener('click', function () { iw.open(map, marker); });
    });
};
</script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key={{ $mapsKey }}&libraries=places&callback=initRadiusMap">
</script>
@endpush
@endif
@endif

<div class="card border-0 shadow-sm">
    <div class="table-responsive">
        <table class="table table-hover mb-0 align-middle small">
            <thead class="table-light">
                <tr>
                    <th>#</th>
                    @include('partials._sort_th', ['column' => 'title', 'label' => 'Title'])
                    <th>Purpose</th>
                    <th>Type</th>
                    @include('partials._sort_th', ['column' => 'city', 'label' => 'City'])
                    <th>Owner</th>
                    @include('partials._sort_th', ['column' => 'price', 'label' => 'Price'])
                    @include('partials._sort_th', ['column' => 'status', 'label' => 'Status'])
                    <th>Added By</th>
                    @include('partials._sort_th', ['column' => 'created_at', 'label' => 'Added'])
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($properties as $property)
                    <tr>
                        <td class="text-muted">{{ $properties->firstItem() + $loop->index }}</td>
                        <td>
                            <a href="{{ route('admin.property.show', $property) }}" class="fw-medium text-decoration-none text-dark">
                                {{ $property->title }}
                            </a>
                        </td>
                        <td>
                            @php $purposeLabels = \App\Models\Property::LISTING_PURPOSES; @endphp
                            <span class="badge {{ $property->listing_purpose === 'for_rent' ? 'bg-info' : 'bg-success' }} bg-opacity-10 {{ $property->listing_purpose === 'for_rent' ? 'text-info' : 'text-success' }}">
                                {{ $purposeLabels[$property->listing_purpose] ?? '—' }}
                            </span>
                        </td>
                        <td>
                            <span class="badge bg-secondary bg-opacity-10 text-secondary">
                                {{ (\App\Models\Property::typeLabels())[$property->type] ?? ucwords(str_replace('_', ' ', $property->type)) }}
                            </span>
                        </td>
                        <td>{{ $property->city ?? '—' }}</td>
                        <td>{{ $property->owner->name ?? '—' }}</td>
                        <td class="text-nowrap">{{ $property->formattedPrice() }}</td>
                        <td class="text-nowrap">
                            @php
                                $statusClasses = [
                                    'published'    => 'bg-success text-white',
                                    'under_review' => 'bg-warning text-dark',
                                    'unavailable'  => 'bg-secondary text-white',
                                ];
                                $statusClass = $statusClasses[$property->status] ?? 'bg-secondary text-white';
                                $availStatus = in_array($property->id, $soldPropertyIds) ? 'sold'
                                    : (in_array($property->id, $rentedPropertyIds) ? 'rented' : 'available');
                            @endphp
                            <span class="badge {{ $statusClass }}">
                                {{ ucwords(str_replace('_', ' ', $property->status)) }}
                            </span>
                            @if($availStatus === 'sold')
                                <span class="badge bg-danger ms-1">Sold</span>
                            @elseif($availStatus === 'rented')
                                <span class="badge bg-warning text-dark ms-1">Rented</span>
                            @endif
                        </td>
                        <td>
                            @if($property->createdBy)
                                {{ $property->createdBy->name }}
                                @if($property->createdBy->isAdmin())
                                    <span class="badge bg-danger bg-opacity-10 text-danger">Admin</span>
                                @else
                                    <span class="badge bg-primary bg-opacity-10 text-primary">Staff</span>
                                @endif
                            @else
                                —
                            @endif
                        </td>
                        <td class="text-muted text-nowrap">{{ $property->created_at->format('d M Y') }}</td>
                        <td class="text-end text-nowrap">
                            <a href="{{ route('admin.property.show', $property) }}" class="btn btn-sm btn-light">
                                <i class="bi bi-eye"></i>
                            </a>
                            @if(auth()->user()->isAdmin() || $property->created_by === auth()->id())
                            <a href="{{ route('admin.property.edit', $property) }}" class="btn btn-sm btn-light ms-1">
                                <i class="bi bi-pencil"></i>
                            </a>
                            @endif
                            @if(auth()->user()->isAdmin())
                                <button type="button"
                                        class="btn btn-sm btn-light text-danger ms-1"
                                        data-bs-toggle="modal" data-bs-target="#adminPasswordModal"
                                        data-action="{{ route('admin.property.destroy', $property) }}"
                                        data-label="Delete &quot;{{ addslashes($property->title) }}&quot;"
                                        title="Delete">
                                    <i class="bi bi-trash"></i>
                                </button>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="11" class="text-center text-muted py-5">
                            <i class="bi bi-building fs-2 d-block mb-2 opacity-25"></i>
                            No properties found.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($properties->hasPages())
        <div class="px-4 py-3 border-top">
            {{ $properties->links() }}
        </div>
    @endif
</div>

@if(auth()->user()->isAdmin())
@include('partials._admin-password-modal')
@endif
@endsection

@php $mapsKeyIndex = config('services.google.maps_key'); @endphp
@if($mapsKeyIndex && !($lat && $lng && $radius))
{{-- Load Maps API for Places Autocomplete on the radius search box (no results map active) --}}
@push('scripts')
<script>
window.initRadiusSearch = function () {
    var locationInput = document.getElementById('radius-location-input');
    var latField      = document.getElementById('radius-lat');
    var lngField      = document.getElementById('radius-lng');
    var labelField    = document.getElementById('radius-label');
    var searchBtn     = document.getElementById('radius-search-btn');

    if (! locationInput) return;

    var autocomplete = new google.maps.places.Autocomplete(locationInput, {
        types: ['geocode', 'establishment'],
    });

    autocomplete.addListener('place_changed', function () {
        var place = autocomplete.getPlace();
        if (! place.geometry || ! place.geometry.location) return;
        latField.value   = place.geometry.location.lat();
        lngField.value   = place.geometry.location.lng();
        labelField.value = place.formatted_address || locationInput.value;
        searchBtn.disabled = false;
    });

    locationInput.addEventListener('input', function () {
        if (! this.value.trim()) {
            latField.value   = '';
            lngField.value   = '';
            labelField.value = '';
            searchBtn.disabled = true;
        }
    });
};
</script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key={{ $mapsKeyIndex }}&libraries=places&callback=initRadiusSearch">
</script>
@endpush
@elseif($mapsKeyIndex && $lat && $lng && $radius)
{{-- When radius map is active, initRadiusMap already loaded the API. Wire up autocomplete inside it. --}}
@push('scripts')
<script>
(function waitForMaps() {
    if (typeof google === 'undefined' || typeof google.maps === 'undefined') {
        return setTimeout(waitForMaps, 100);
    }
    var locationInput = document.getElementById('radius-location-input');
    var latField      = document.getElementById('radius-lat');
    var lngField      = document.getElementById('radius-lng');
    var labelField    = document.getElementById('radius-label');
    var searchBtn     = document.getElementById('radius-search-btn');
    if (! locationInput) return;

    // The input already has a pinned location — enable the button
    if (latField && latField.value) { searchBtn.disabled = false; }

    var autocomplete = new google.maps.places.Autocomplete(locationInput, {
        types: ['geocode', 'establishment'],
    });
    autocomplete.addListener('place_changed', function () {
        var place = autocomplete.getPlace();
        if (! place.geometry || ! place.geometry.location) return;
        latField.value     = place.geometry.location.lat();
        lngField.value     = place.geometry.location.lng();
        labelField.value   = place.formatted_address || locationInput.value;
        searchBtn.disabled = false;
    });
    locationInput.addEventListener('input', function () {
        if (! this.value.trim()) {
            latField.value = ''; lngField.value = ''; searchBtn.disabled = true;
        }
    });
}());
</script>
@endpush
@endif