@extends('layouts.app')

@section('title', $property->title . ' - CayorCity')

@section('content')
<div class="container mt-4">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('home') }}">Accueil</a></li>
            <li class="breadcrumb-item"><a href="{{ route('properties.index') }}">Propriétés</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ $property->title }}</li>
        </ol>
    </nav>

    <div class="row">
        <!-- Images Section -->
        <div class="col-lg-8">
            <div class="property-images mb-4">
                @if($property->images->count() > 0)
                    <div id="propertyCarousel" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            @foreach($property->images as $index => $image)
                                <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                                    <img src="{{ $image->image_url }}" class="d-block w-100 rounded" 
                                         alt="{{ $property->title }}" style="height: 400px; object-fit: cover;">
                                </div>
                            @endforeach
                        </div>
                        @if($property->images->count() > 1)
                            <button class="carousel-control-prev" type="button" data-bs-target="#propertyCarousel" data-bs-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Précédent</span>
                            </button>
                            <button class="carousel-control-next" type="button" data-bs-target="#propertyCarousel" data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Suivant</span>
                            </button>
                        @endif
                    </div>
                    
                    <!-- Thumbnails -->
                    @if($property->images->count() > 1)
                        <div class="row mt-3">
                            @foreach($property->images->take(6) as $index => $image)
                                <div class="col-2">
                                    <img src="{{ $image->image_url }}" 
                                         class="img-thumbnail cursor-pointer thumbnail-image" 
                                         data-bs-target="#propertyCarousel" 
                                         data-bs-slide-to="{{ $index }}"
                                         style="height: 80px; object-fit: cover; cursor: pointer;">
                                </div>
                            @endforeach
                        </div>
                    @endif
                @else
                    <div class="bg-light rounded d-flex align-items-center justify-content-center" style="height: 400px;">
                        <div class="text-center text-muted">
                            <i class="fas fa-image fa-3x mb-3"></i>
                            <p>Aucune image disponible</p>
                        </div>
                    </div>
                @endif
            </div>

            <!-- Property Details -->
            <div class="card shadow-sm">
                <div class="card-body">
                    <h1 class="card-title h3 mb-3">{{ $property->title }}</h1>
                    
                    <!-- Basic Info -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h5 class="text-primary">{{ number_format($property->price, 0, ',', ' ') }} FCFA</h5>
                            <p class="text-muted mb-1">
                                <i class="fas fa-tag me-2"></i>
                                <span class="badge bg-{{ $property->transaction_type === 'sale' ? 'success' : 'info' }}">
                                    {{ $property->transaction_type === 'sale' ? 'Vente' : 'Location' }}
                                </span>
                            </p>
                            <p class="text-muted mb-1">
                                <i class="fas fa-home me-2"></i>{{ $property->propertyType->name }}
                            </p>
                        </div>
                        <div class="col-md-6">
                            <p class="text-muted mb-1">
                                <i class="fas fa-map-marker-alt me-2"></i>{{ $property->city }}
                                @if($property->district), {{ $property->district }} @endif
                            </p>
                            <p class="text-muted mb-1">
                                <i class="fas fa-building me-2"></i>{{ $property->agency->name }}
                            </p>
                        </div>
                    </div>

                    <!-- Property Features -->
                    <div class="row mb-4">
                        <div class="col-6 col-md-3 text-center">
                            <div class="p-3 bg-light rounded">
                                <i class="fas fa-expand-arrows-alt text-primary"></i>
                                <div class="mt-2">
                                    <strong>{{ $property->surface }}m²</strong>
                                    <br><small class="text-muted">Surface</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-6 col-md-3 text-center">
                            <div class="p-3 bg-light rounded">
                                <i class="fas fa-bed text-primary"></i>
                                <div class="mt-2">
                                    <strong>{{ $property->bedrooms }}</strong>
                                    <br><small class="text-muted">Chambres</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-6 col-md-3 text-center">
                            <div class="p-3 bg-light rounded">
                                <i class="fas fa-bath text-primary"></i>
                                <div class="mt-2">
                                    <strong>{{ $property->bathrooms }}</strong>
                                    <br><small class="text-muted">Salles de bain</small>
                                </div>
                            </div>
                        </div>
                        @if($property->floor)
                        <div class="col-6 col-md-3 text-center">
                            <div class="p-3 bg-light rounded">
                                <i class="fas fa-building text-primary"></i>
                                <div class="mt-2">
                                    <strong>{{ $property->floor }}</strong>
                                    <br><small class="text-muted">Étage</small>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>

                    <!-- Additional Features -->
                    <div class="mb-4">
                        <h5>Équipements</h5>
                        <div class="row">
                            @if($property->furnished)
                                <div class="col-6 col-md-3 mb-2">
                                    <i class="fas fa-couch text-success me-2"></i>Meublé
                                </div>
                            @endif
                            @if($property->parking)
                                <div class="col-6 col-md-3 mb-2">
                                    <i class="fas fa-car text-success me-2"></i>Parking
                                </div>
                            @endif
                            @if($property->garden)
                                <div class="col-6 col-md-3 mb-2">
                                    <i class="fas fa-seedling text-success me-2"></i>Jardin
                                </div>
                            @endif
                            @if($property->balcony)
                                <div class="col-6 col-md-3 mb-2">
                                    <i class="fas fa-external-link-alt text-success me-2"></i>Balcon
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Description -->
                    @if($property->description)
                    <div class="mb-4">
                        <h5>Description</h5>
                        <p class="text-muted">{{ $property->description }}</p>
                    </div>
                    @endif

                    <!-- Address -->
                    @if($property->address)
                    <div class="mb-4">
                        <h5>Adresse</h5>
                        <p class="text-muted">
                            <i class="fas fa-map-marker-alt me-2"></i>{{ $property->address }}
                        </p>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Agency Info -->
            <div class="card shadow-sm mb-4">
                <div class="card-body text-center">
                    <h5 class="card-title">{{ $property->agency->name }}</h5>
                    @if($property->agency->logo)
                        <img src="{{ $property->agency->logo }}" alt="{{ $property->agency->name }}" 
                             class="img-fluid mb-3" style="max-height: 80px;">
                    @endif
                    <p class="text-muted small">{{ $property->agency->description }}</p>
                    
                    @if($property->agency->phone)
                        <p class="mb-2">
                            <i class="fas fa-phone text-primary me-2"></i>
                            <a href="tel:{{ $property->agency->phone }}" class="text-decoration-none">
                                {{ $property->agency->phone }}
                            </a>
                        </p>
                    @endif
                    
                    @if($property->agency->email)
                        <p class="mb-3">
                            <i class="fas fa-envelope text-primary me-2"></i>
                            <a href="mailto:{{ $property->agency->email }}" class="text-decoration-none">
                                {{ $property->agency->email }}
                            </a>
                        </p>
                    @endif
                    
                    <a href="{{ route('agencies.show', $property->agency) }}" class="btn btn-outline-primary btn-sm">
                        Voir l'agence
                    </a>
                </div>
            </div>

            <!-- Contact Form -->
            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <h5 class="card-title">Contacter l'agence</h5>
                    <form action="{{ route('contacts.store') }}" method="POST">
                        @csrf
                        <input type="hidden" name="property_id" value="{{ $property->id }}">
                        <input type="hidden" name="agency_id" value="{{ $property->agency->id }}">
                        
                        <div class="mb-3">
                            <label for="name" class="form-label">Nom complet</label>
                            <input type="text" class="form-control" id="name" name="name" required>
                        </div>
                        
                        <div class="mb-3">
                            <label for="email" class="form-label">Email</label>
                            <input type="email" class="form-control" id="email" name="email" required>
                        </div>
                        
                        <div class="mb-3">
                            <label for="phone" class="form-label">Téléphone</label>
                            <input type="tel" class="form-control" id="phone" name="phone">
                        </div>
                        
                        <div class="mb-3">
                            <label for="message" class="form-label">Message</label>
                            <textarea class="form-control" id="message" name="message" rows="4" 
                                      placeholder="Je suis intéressé(e) par cette propriété..."></textarea>
                        </div>
                        
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-paper-plane me-2"></i>Envoyer
                        </button>
                    </form>
                </div>
            </div>

            <!-- Favorite Button -->
            @auth
            <div class="card shadow-sm mb-4">
                <div class="card-body text-center">
                    @php
                        $isFavorite = auth()->user()->favorites()->where('property_id', $property->id)->exists();
                    @endphp
                    <form action="{{ route('favorites.toggle', $property) }}" method="POST">
                        @csrf
                        @if($isFavorite)
                            <button type="submit" class="btn btn-danger w-100">
                                <i class="fas fa-heart me-2"></i>
                                Retirer des favoris
                            </button>
                        @else
                            <button type="submit" class="btn btn-outline-danger w-100">
                                <i class="far fa-heart me-2"></i>
                                Ajouter aux favoris
                            </button>
                        @endif
                    </form>
                </div>
            </div>
            @endauth

            <!-- Property Stats -->
            <div class="card shadow-sm">
                <div class="card-body">
                    <h6 class="card-title">Statistiques</h6>
                    <p class="text-muted small mb-2">
                        <i class="fas fa-eye me-2"></i>{{ $property->views }} vues
                    </p>
                    <p class="text-muted small mb-2">
                        <i class="fas fa-calendar me-2"></i>Publié le {{ $property->published_at ? $property->published_at->format('d/m/Y') : 'N/A' }}
                    </p>
                    @if($property->is_featured)
                        <span class="badge bg-warning">
                            <i class="fas fa-star me-1"></i>À la une
                        </span>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Similar Properties -->
    @if($similarProperties->count() > 0)
    <div class="row mt-5">
        <div class="col-12">
            <h3 class="mb-4">Propriétés similaires</h3>
            <div class="row">
                @foreach($similarProperties as $similarProperty)
                    <div class="col-md-6 col-lg-3 mb-4">
                        @include('properties.partials.property-card', ['property' => $similarProperty])
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    @endif
</div>

@push('styles')
<style>
.thumbnail-image:hover {
    opacity: 0.8;
    transform: scale(1.05);
    transition: all 0.2s ease-in-out;
}

.property-features .feature-item {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    background: #f8f9fa;
}

.carousel-item img {
    border-radius: 8px;
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Increment view count
    fetch('{{ route("properties.increment-views", $property) }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json',
        },
    });
});
</script>
@endpush
@endsection