@extends('admin.layout')

@section('title', 'Manajemen Properti')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="fas fa-home me-2"></i>Manajemen Properti
        </h1>
        <a href="{{ route('admin.properties.create') }}" class="btn btn-primary">
            <i class="fas fa-plus me-1"></i>Tambah Properti
        </a>
    </div>

    <!-- Alert Messages -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <!-- Property Cards -->
    <div class="row">
        @forelse($properties as $property)
            <div class="col-lg-6 col-xl-4 mb-4">
                <div class="card shadow h-100">
                    @php($images = is_array($property->images) ? $property->images : [])
                    @if(count($images) > 0)
                        @php(
                            $img = $images[0]
                        )
                        @php(
                            $src = (is_string($img) && (str_starts_with($img, 'http://') || str_starts_with($img, 'https://')))
                                ? $img
                                : (file_exists(public_path('storage/'.$img))
                                    ? asset('storage/'.$img)
                                    : 'https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?w=1200&q=80&auto=format&fit=crop')
                        )
                        <img src="{{ $src }}" class="card-img-top" alt="{{ $property->title }}" style="height: 200px; object-fit: cover;">
                    @else
                        <div class="card-img-top bg-light d-flex align-items-center justify-content-center" style="height: 200px;">
                            <i class="fas fa-home fa-3x text-muted"></i>
                        </div>
                    @endif
                    
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <h5 class="card-title mb-0">{{ $property->title }}</h5>
                            <div class="form-check form-switch">
                                <input class="form-check-input status-toggle" type="checkbox" 
                                       data-id="{{ $property->id }}" 
                                       data-type="property"
                                       {{ $property->is_active ? 'checked' : '' }}>
                            </div>
                        </div>
                        
                        <p class="card-text text-muted mb-3">
                            <i class="fas fa-map-marker-alt me-1"></i>{{ $property->city }}, {{ $property->country }}
                            <br>
                            <i class="fas fa-building me-1"></i>{{ ucfirst($property->property_type) }}
                            <br>
                            <i class="fas fa-ruler-combined me-1"></i>{{ $property->building_area_sqm }} m² bangunan
                            <br>
                            <i class="fas fa-money-bill me-1"></i>Rp {{ number_format($property->base_price_per_month, 0, ',', '.') }}/bulan
                        </p>

                        <!-- Availability Toggle -->
                        <div class="mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input availability-toggle" type="checkbox" 
                                       data-id="{{ $property->id }}"
                                       {{ $property->is_available ? 'checked' : '' }}>
                                <label class="form-check-label" for="availability-{{ $property->id }}">
                                    Tersedia
                                </label>
                            </div>
                        </div>

                        <div class="mb-3">
                            @php($amenities = is_array($property->amenities) ? $property->amenities : [])
                            @if(count($amenities) > 0)
                                @foreach(array_slice($amenities, 0, 3) as $amenity)
                                    <span class="badge bg-light text-dark me-1">{{ $amenity }}</span>
                                @endforeach
                                @if(count($amenities) > 3)
                                    <span class="badge bg-light text-dark">+{{ count($amenities) - 3 }} lainnya</span>
                                @endif
                            @else
                                <small class="text-muted">Tidak ada fasilitas</small>
                            @endif
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="{{ route('admin.properties.show', $property) }}" class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-eye me-1"></i>Detail
                            </a>
                            <div>
                                <a href="{{ route('admin.properties.edit', $property) }}" class="btn btn-outline-warning btn-sm me-1">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form action="{{ route('admin.properties.destroy', $property) }}" method="POST" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-outline-danger btn-sm" onclick="return confirm('Apakah Anda yakin ingin menghapus properti ini?')">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-body text-center py-5">
                        <i class="fas fa-home fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">Belum ada properti</h5>
                        <p class="text-muted">Silakan tambahkan properti pertama Anda.</p>
                        <a href="{{ route('admin.properties.create') }}" class="btn btn-primary">
                            <i class="fas fa-plus me-1"></i>Tambah Properti
                        </a>
                    </div>
                </div>
            </div>
        @endforelse
    </div>

    <!-- Pagination -->
    @if($properties->hasPages())
        <div class="d-flex justify-content-center mt-4">
            {{ $properties->links() }}
        </div>
    @endif
</div>

@push('scripts')
<script>
$(document).ready(function() {
    // Status toggle functionality
    $('.status-toggle').on('change', function() {
        const id = $(this).data('id');
        const type = $(this).data('type');
        const isChecked = $(this).is(':checked');
        
        $.ajax({
            url: `/admin/${type}s/${id}/toggle-status`,
            method: 'PATCH',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    // Show success message
                    const alertHtml = `
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle me-2"></i>${response.message}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    `;
                    $('.container-fluid').prepend(alertHtml);
                }
            },
            error: function(xhr) {
                // Revert the toggle on error
                $(this).prop('checked', !isChecked);
                const alertHtml = `
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="fas fa-exclamation-circle me-2"></i>Gagal mengubah status
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                `;
                $('.container-fluid').prepend(alertHtml);
            }
        });
    });

    // Availability toggle functionality
    $('.availability-toggle').on('change', function() {
        const id = $(this).data('id');
        const isChecked = $(this).is(':checked');
        
        $.ajax({
            url: `/admin/properties/${id}/toggle-availability`,
            method: 'PATCH',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    // Show success message
                    const alertHtml = `
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle me-2"></i>${response.message}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    `;
                    $('.container-fluid').prepend(alertHtml);
                }
            },
            error: function(xhr) {
                // Revert the toggle on error
                $(this).prop('checked', !isChecked);
                const alertHtml = `
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="fas fa-exclamation-circle me-2"></i>Gagal mengubah ketersediaan
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                `;
                $('.container-fluid').prepend(alertHtml);
            }
        });
    });
});
</script>
@endpush
@endsection