@extends('layouts.app')

@section('title', 'Mes Favoris - CayorCity')

@section('content')
<div class="container mt-4">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-1">
                        <i class="fas fa-heart text-danger me-2"></i>Mes Favoris
                    </h1>
                    <p class="text-muted">Retrouvez toutes vos propriétés favorites</p>
                </div>
                <div>
                    <a href="{{ route('properties.index') }}" class="btn btn-outline-primary">
                        <i class="fas fa-search me-2"></i>Découvrir plus de propriétés
                    </a>
                </div>
            </div>
        </div>
    </div>

    @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($favorites->count() > 0)
        <!-- Statistics -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card border-0 shadow-sm bg-light">
                    <div class="card-body">
                        <div class="row text-center">
                            <div class="col-md-4">
                                <div class="d-flex align-items-center justify-content-center">
                                    <i class="fas fa-heart fa-2x text-danger me-3"></i>
                                    <div>
                                        <h4 class="mb-0">{{ $favorites->total() }}</h4>
                                        <small class="text-muted">Propriété{{ $favorites->total() > 1 ? 's' : '' }} favorite{{ $favorites->total() > 1 ? 's' : '' }}</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="d-flex align-items-center justify-content-center">
                                    <i class="fas fa-tag fa-2x text-success me-3"></i>
                                    <div>
                                        <h4 class="mb-0">{{ $favorites->where('property.transaction_type', 'sale')->count() }}</h4>
                                        <small class="text-muted">À vendre</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="d-flex align-items-center justify-content-center">
                                    <i class="fas fa-home fa-2x text-info me-3"></i>
                                    <div>
                                        <h4 class="mb-0">{{ $favorites->where('property.transaction_type', 'rent')->count() }}</h4>
                                        <small class="text-muted">À louer</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Properties Grid -->
        <div class="row">
            @foreach($favorites as $favorite)
                @php $property = $favorite->property; @endphp
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="card property-card h-100 shadow-sm">
                        <!-- Image -->
                        <div class="position-relative">
                            @if($property->mainImage)
                                <img src="{{ $property->mainImage->image_url }}" 
                                     class="card-img-top" 
                                     alt="{{ $property->title }}"
                                     style="height: 250px; object-fit: cover;">
                            @else
                                <div class="card-img-top bg-light d-flex align-items-center justify-content-center" 
                                     style="height: 250px;">
                                    <i class="fas fa-image fa-3x text-muted"></i>
                                </div>
                            @endif
                            
                            <!-- Badges -->
                            <div class="position-absolute top-0 start-0 m-2">
                                <span class="badge bg-{{ $property->transaction_type === 'sale' ? 'success' : 'info' }}">
                                    {{ $property->transaction_type === 'sale' ? 'Vente' : 'Location' }}
                                </span>
                                @if($property->is_featured)
                                    <span class="badge bg-warning text-dark ms-1">
                                        <i class="fas fa-star"></i> À la une
                                    </span>
                                @endif
                            </div>
                            
                            <!-- Favorite Button -->
                            <div class="position-absolute top-0 end-0 m-2">
                                <form action="{{ route('favorites.toggle', $property) }}" method="POST" class="d-inline">
                                    @csrf
                                    <button type="submit" class="btn btn-sm btn-danger" title="Retirer des favoris">
                                        <i class="fas fa-heart"></i>
                                    </button>
                                </form>
                            </div>
                            
                            <!-- Date Added -->
                            <div class="position-absolute bottom-0 end-0 m-2">
                                <small class="bg-dark text-white px-2 py-1 rounded">
                                    Ajouté le {{ $favorite->created_at->format('d/m/Y') }}
                                </small>
                            </div>
                        </div>

                        <!-- Content -->
                        <div class="card-body">
                            <h5 class="card-title">
                                <a href="{{ route('properties.show', $property) }}" class="text-decoration-none text-dark">
                                    {{ $property->title }}
                                </a>
                            </h5>
                            
                            <p class="text-muted mb-2">
                                <i class="fas fa-map-marker-alt me-1"></i>{{ $property->city }}
                                @if($property->district), {{ $property->district }}@endif
                            </p>
                            
                            <p class="text-muted mb-2">
                                <i class="fas fa-building me-1"></i>{{ $property->propertyType->name }}
                            </p>
                            
                            <h5 class="text-primary mb-3">
                                {{ number_format($property->price, 0, ',', ' ') }} FCFA
                                @if($property->transaction_type === 'rent')
                                    <small class="text-muted">/mois</small>
                                @endif
                            </h5>
                            
                            <!-- Property Features -->
                            <div class="row text-center mb-3">
                                <div class="col-4">
                                    <small class="text-muted">
                                        <i class="fas fa-expand-arrows-alt"></i><br>
                                        {{ $property->surface }}m²
                                    </small>
                                </div>
                                @if($property->bedrooms)
                                <div class="col-4">
                                    <small class="text-muted">
                                        <i class="fas fa-bed"></i><br>
                                        {{ $property->bedrooms }} ch.
                                    </small>
                                </div>
                                @endif
                                @if($property->bathrooms)
                                <div class="col-4">
                                    <small class="text-muted">
                                        <i class="fas fa-bath"></i><br>
                                        {{ $property->bathrooms }} sdb.
                                    </small>
                                </div>
                                @endif
                            </div>
                            
                            <!-- Agency Info -->
                            <div class="mb-3">
                                <small class="text-muted">
                                    <i class="fas fa-user me-1"></i>{{ $property->agency->name }}
                                </small>
                            </div>
                            
                            <!-- Amenities -->
                            @if($property->furnished || $property->parking || $property->garden || $property->balcony)
                                <div class="mb-3">
                                    @if($property->furnished)
                                        <span class="badge bg-light text-dark me-1">
                                            <i class="fas fa-couch"></i> Meublé
                                        </span>
                                    @endif
                                    @if($property->parking)
                                        <span class="badge bg-light text-dark me-1">
                                            <i class="fas fa-car"></i> Parking
                                        </span>
                                    @endif
                                    @if($property->garden)
                                        <span class="badge bg-light text-dark me-1">
                                            <i class="fas fa-seedling"></i> Jardin
                                        </span>
                                    @endif
                                    @if($property->balcony)
                                        <span class="badge bg-light text-dark me-1">
                                            <i class="fas fa-external-link-alt"></i> Balcon
                                        </span>
                                    @endif
                                </div>
                            @endif
                        </div>

                        <!-- Footer -->
                        <div class="card-footer bg-transparent border-0">
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-muted">
                                    <i class="fas fa-eye me-1"></i>{{ $property->views }} vues
                                </small>
                                <div>
                                    <a href="{{ route('properties.show', $property) }}" 
                                       class="btn btn-outline-primary btn-sm">
                                        <i class="fas fa-eye me-1"></i>Voir
                                    </a>
                                    <form action="{{ route('favorites.toggle', $property) }}" method="POST" class="d-inline">
                                        @csrf
                                        <button type="submit" class="btn btn-outline-danger btn-sm" 
                                                title="Retirer des favoris">
                                            <i class="fas fa-heart-broken"></i>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Pagination -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="d-flex justify-content-center">
                    {{ $favorites->links() }}
                </div>
            </div>
        </div>

    @else
        <!-- Empty State -->
        <div class="row">
            <div class="col-12">
                <div class="card border-0 shadow-sm">
                    <div class="card-body text-center py-5">
                        <i class="fas fa-heart-broken fa-4x text-muted mb-4"></i>
                        <h4 class="text-muted mb-3">Aucun favori pour le moment</h4>
                        <p class="text-muted mb-4">
                            Vous n'avez pas encore ajouté de propriétés à vos favoris.<br>
                            Parcourez nos annonces et cliquez sur le cœur pour ajouter vos coups de cœur !
                        </p>
                        <a href="{{ route('properties.index') }}" class="btn btn-primary btn-lg">
                            <i class="fas fa-search me-2"></i>Découvrir les propriétés
                        </a>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>

@push('styles')
<style>
.property-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
}

.property-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
}

.card-img-top {
    transition: transform 0.3s ease;
}

.property-card:hover .card-img-top {
    transform: scale(1.05);
}

.badge {
    font-size: 0.75rem;
}

.btn-outline-danger:hover {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

.position-relative {
    overflow: hidden;
}

@media (max-width: 768px) {
    .card {
        margin-bottom: 1rem;
    }
    
    .col-4 {
        margin-bottom: 0.5rem;
    }
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Animation des cartes au scroll
    const cards = document.querySelectorAll('.property-card');
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    });
    
    cards.forEach(card => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        observer.observe(card);
    });
    
    // Confirmation avant suppression des favoris
    document.querySelectorAll('form').forEach(form => {
        form.addEventListener('submit', function(e) {
            const button = form.querySelector('button[title="Retirer des favoris"]');
            if (button && !confirm('Êtes-vous sûr de vouloir retirer cette propriété de vos favoris ?')) {
                e.preventDefault();
            }
        });
    });
});
</script>
@endpush
@endsection