{{-- resources/views/admin/properties/active.blade.php --}}

@extends('layouts.app')

@section('content')

    <div class="container mt-5 property-listing admin">
        <div class="admin_header d-flex flex-row justify-content-between">
            <h2 class="sec_head">Active Properties</h2>
            <div class="location_filter">
                <form method="GET" action="{{ route('properties.active') }}">
                    <div class="form-group">
                        <select name="location" id="location" class="form-control">
                            <option value="">All Locations</option>
                            @foreach($locations as $location)
                                <option value="{{ $location->id }}" {{ request('location') == $location->id ? 'selected' : '' }}>
                                    {{ $location->name_en }}
                                </option>
                            @endforeach
                        </select>
                        <button type="submit" class="btn btn-primary">Filter</button>
                    </div>
                    
                </form>
            </div>
        </div>
       
        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        
        <div class="row property_list" id="property-order-list">
            @if($properties->count() > 0)
            @foreach($properties as $property)
            <div class="col-md-4 property property-item" data-id="{{ $property->id }}">
                <div class="card  mb-4">
                {{-- Display the cover image --}}
                {{-- Display the cover image --}}
                    @if($property->cover_image)
                        <img class="card-img-top" src="{{ asset('storage/properties/' . $property->cover_image->image) }}" alt="Cover Image" class="img-fluid">
                    @else
                    <img class="card-img-top" src="{{ asset('storage/properties/no-image.png') }}"  class="card-img-top" alt="{{ app()->getLocale() == 'en' ? $property->title_en : $property->title_jp }}">
                @endif
               <!--  @if($property->images->first())
                    <img class="card-img-top" src="{{ asset('storage/properties/' . $property->images->first()->image) }}"  class="card-img-top" alt="{{ app()->getLocale() == 'en' ? $property->title_en : $property->title_jp }}">
                @else
                    <img class="card-img-top" src="{{ asset('storage/properties/no-image.png') }}"  class="card-img-top" alt="{{ $property->title }}">
                @endif -->
                    
                    <div class="card-body">
                        <h5 class="card-title">{{ $property->title_en }}</h5>
                        <p class="card-text">{{ Str::limit($property->description_en, 150) }}</p>
                        <p class="card-location"><span>Location : </span>{{ $property->location->name_en }}</p>
                        <!-- <p class="card-pub">
                        @if(!$property->repost_date)    
                        Published on : {{ date('d F Y', strtotime($property->published_date)); }} 
                        @else
                        Reposted on : {{ date('d F Y', strtotime($property->repost_date)); }} 
                        @endif
                    </p> -->
                        <a href="{{ route('properties.edit', $property->id) }}"  class="">Read more</a>
                    </div>
                </div>
            </div>
            @endforeach
            @else
                <p>No archived properties found.</p>
            @endif
            
        </div>
        {{ $properties->links() }} <!-- Pagination links -->
    </div>
@endsection
@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.13.0/Sortable.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const propertyList = document.getElementById('property-order-list');
    new Sortable(propertyList, {
        animation: 150,
        onEnd: () => {
            let orderedIds = [];
            document.querySelectorAll('.property-item').forEach(item => {
                orderedIds.push(item.dataset.id);
            });
            fetch("{{ route('properties.saveOrder') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ orderedIds })
            }).then(response => response.json()).then(data => {
                alert(data.message);
            });
        }
    });
});

</script>
@endsection