@extends('layouts.app')

@section('title', $agency->name . ' - CayorCity 2.0')

@section('content')
<!-- Section Profil Agence -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 mb-4">
                <!-- Carte informations agence -->
                <div class="card shadow-sm">
                    <div class="card-body text-center">
                        @if($agency->logo)
                            <img src="{{ asset('storage/' . $agency->logo) }}" 
                                 alt="{{ $agency->name }}"
                                 class="rounded-circle mb-3"
                                 style="width: 120px; height: 120px; object-fit: cover;">
                        @else
                            <div class="bg-primary rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" 
                                 style="width: 120px; height: 120px;">
                                <i class="fas fa-building fa-3x text-white"></i>
                            </div>
                        @endif
                        
                        <h3 class="mb-2">{{ $agency->name }}</h3>
                        <div class="mb-3">
                            <span class="badge bg-success fs-6">
                                <i class="fas fa-check-circle me-1"></i>Agence Certifiée
                            </span>
                        </div>
                        
                        <p class="text-muted mb-4">{{ $agency->description }}</p>
                        
                        <!-- Informations de contact -->
                        <div class="text-start">
                            @if($agency->phone)
                                <p class="mb-2">
                                    <i class="fas fa-phone text-primary me-2"></i>
                                    <a href="tel:{{ $agency->phone }}" class="text-decoration-none">{{ $agency->phone }}</a>
                                </p>
                            @endif
                            
                            @if($agency->user->email)
                                <p class="mb-2">
                                    <i class="fas fa-envelope text-primary me-2"></i>
                                    <a href="mailto:{{ $agency->user->email }}" class="text-decoration-none">{{ $agency->user->email }}</a>
                                </p>
                            @endif
                            
                            @if($agency->address)
                                <p class="mb-2">
                                    <i class="fas fa-map-marker-alt text-primary me-2"></i>
                                    {{ $agency->address }}
                                </p>
                            @endif
                            
                            @if($agency->website)
                                <p class="mb-2">
                                    <i class="fas fa-globe text-primary me-2"></i>
                                    <a href="{{ $agency->website }}" target="_blank" class="text-decoration-none">
                                        Visiter le site web
                                    </a>
                                </p>
                            @endif
                        </div>
                        
                        <!-- Statistiques -->
                        <div class="row text-center mt-4">
                            <div class="col-6">
                                <div class="border-end">
                                    <h4 class="text-primary mb-0">{{ $properties->total() }}</h4>
                                    <small class="text-muted">Propriété(s)</small>
                                </div>
                            </div>
                            <div class="col-6">
                                <h4 class="text-success mb-0">{{ $agency->created_at->diffForHumans() }}</h4>
                                <small class="text-muted">Membre depuis</small>
                            </div>
                        </div>
                        
                        <!-- Boutons d'action -->
                        <div class="mt-4">
                            <button type="button" class="btn btn-primary w-100 mb-2" 
                                    data-bs-toggle="modal" 
                                    data-bs-target="#contactAgencyModal">
                                <i class="fas fa-envelope me-2"></i>Contacter l'agence
                            </button>
                            @if($agency->website)
                                <a href="{{ $agency->website }}" target="_blank" class="btn btn-outline-primary w-100">
                                    <i class="fas fa-external-link-alt me-2"></i>Site web
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-8">
                <!-- En-tête des propriétés -->
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2>Propriétés de {{ $agency->name }}</h2>
                    <div class="d-flex gap-2">
                        <select class="form-select form-select-sm" style="width: auto;" onchange="filterProperties(this.value)">
                            <option value="">Tous les types</option>
                            <option value="sale">Vente</option>
                            <option value="rent">Location</option>
                        </select>
                    </div>
                </div>
                
                @if($properties->count() > 0)
                    <div class="row">
                        @foreach($properties as $property)
                            <div class="col-md-6 mb-4">
                                @include('properties.partials.property-card', ['property' => $property])
                            </div>
                        @endforeach
                    </div>
                    
                    <!-- Pagination -->
                    <div class="d-flex justify-content-center">
                        {{ $properties->links() }}
                    </div>
                @else
                    <div class="text-center py-5">
                        <i class="fas fa-home fa-3x text-muted mb-3"></i>
                        <h4>Aucune propriété disponible</h4>
                        <p class="text-muted">Cette agence n'a pas encore publié de propriétés.</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</section>

<!-- Modal de contact agence -->
<div class="modal fade" id="contactAgencyModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Contacter {{ $agency->name }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="#" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="contactName" class="form-label">Nom complet *</label>
                        <input type="text" class="form-control" id="contactName" name="name" 
                               value="{{ auth()->user()->name ?? '' }}" required>
                    </div>
                    <div class="mb-3">
                        <label for="contactEmail" class="form-label">Email *</label>
                        <input type="email" class="form-control" id="contactEmail" name="email" 
                               value="{{ auth()->user()->email ?? '' }}" required>
                    </div>
                    <div class="mb-3">
                        <label for="contactPhone" class="form-label">Téléphone</label>
                        <input type="tel" class="form-control" id="contactPhone" name="phone" 
                               value="{{ auth()->user()->phone ?? '' }}">
                    </div>
                    <div class="mb-3">
                        <label for="contactSubject" class="form-label">Sujet *</label>
                        <select class="form-select" id="contactSubject" name="subject" required>
                            <option value="">Choisissez un sujet</option>
                            <option value="general">Demande générale</option>
                            <option value="property">À propos d'une propriété</option>
                            <option value="partnership">Partenariat</option>
                            <option value="other">Autre</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="contactMessage" class="form-label">Message *</label>
                        <textarea class="form-control" id="contactMessage" name="message" rows="4" required
                                  placeholder="Bonjour, je souhaiterais obtenir plus d'informations sur vos services..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-paper-plane me-1"></i>Envoyer le message
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    function filterProperties(type) {
        const url = new URL(window.location);
        if (type) {
            url.searchParams.set('transaction_type', type);
        } else {
            url.searchParams.delete('transaction_type');
        }
        window.location.href = url.toString();
    }
</script>
@endsection