@extends('layouts.app')

@section('title', 'Ajouter une propriété - CayorCity')

@section('content')
<div class="container mt-4">
    <!-- Header avec icône -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h1 class="h3 mb-1">
                                <i class="fas fa-plus-circle me-2"></i>Ajouter une propriété
                            </h1>
                            <p class="mb-0 opacity-75">Remplissez les informations de votre propriété pour la publier</p>
                        </div>
                        <div>
                            <a href="{{ route('properties.index') }}" class="btn btn-outline-light">
                                <i class="fas fa-arrow-left me-2"></i>Retour au tableau de bord
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow border-0">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-plus-circle me-2"></i>Ajouter une propriété
                    </h5>
                </div>
                <div class="card-body p-4">
                    <form action="{{ route('properties.store.public') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <!-- Titre de la propriété -->
                        <div class="mb-4">
                            <label for="title" class="form-label fw-bold">Titre de la propriété *</label>
                            <input type="text" class="form-control form-control-lg @error('title') is-invalid @enderror" 
                                   id="title" name="title" value="{{ old('title') }}" required 
                                   placeholder="Ex: Appartement moderne 3 pièces avec vue sur mer">
                            @error('title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Type et Statut -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label for="property_type_id" class="form-label fw-bold">Type de propriété *</label>
                                <select class="form-select form-select-lg @error('property_type_id') is-invalid @enderror" 
                                        id="property_type_id" name="property_type_id" required>
                                    <option value="">Sélectionner un type</option>
                                    @foreach($propertyTypes as $type)
                                        <option value="{{ $type->id }}" 
                                                {{ old('property_type_id') == $type->id ? 'selected' : '' }}>
                                            {{ $type->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('property_type_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="transaction_type" class="form-label fw-bold">Statut *</label>
                                <select class="form-select form-select-lg @error('transaction_type') is-invalid @enderror" 
                                        id="transaction_type" name="transaction_type" required>
                                    <option value="">Sélectionner un statut</option>
                                    <option value="sale" {{ old('transaction_type') == 'sale' ? 'selected' : '' }}>
                                        À vendre
                                    </option>
                                    <option value="rent" {{ old('transaction_type') == 'rent' ? 'selected' : '' }}>
                                        À louer
                                    </option>
                                </select>
                                @error('transaction_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Prix et Surface -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label for="price" class="form-label fw-bold">Prix (FCFA) *</label>
                                <div class="input-group input-group-lg">
                                    <input type="number" class="form-control @error('price') is-invalid @enderror" 
                                           id="price" name="price" value="{{ old('price') }}" min="0" required 
                                           placeholder="Ex: 150000">
                                    <span class="input-group-text">FCFA</span>
                                </div>
                                @error('price')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="surface" class="form-label fw-bold">Superficie (m²)</label>
                                <div class="input-group input-group-lg">
                                    <input type="number" class="form-control @error('surface') is-invalid @enderror" 
                                           id="surface" name="surface" value="{{ old('surface') }}" min="1" 
                                           placeholder="Ex: 85">
                                    <span class="input-group-text">m²</span>
                                </div>
                                @error('surface')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Chambres, Salles de bain et Propriété en vedette -->
                        <div class="row mb-4">
                            <div class="col-md-4">
                                <label for="bedrooms" class="form-label fw-bold">Chambres</label>
                                <input type="number" class="form-control form-control-lg @error('bedrooms') is-invalid @enderror" 
                                       id="bedrooms" name="bedrooms" value="{{ old('bedrooms', 1) }}" min="0" 
                                       placeholder="Ex: 3">
                                @error('bedrooms')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4">
                                <label for="bathrooms" class="form-label fw-bold">Salles de bain</label>
                                <input type="number" class="form-control form-control-lg @error('bathrooms') is-invalid @enderror" 
                                       id="bathrooms" name="bathrooms" value="{{ old('bathrooms', 1) }}" min="0" 
                                       placeholder="Ex: 2">
                                @error('bathrooms')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4">
                                <label class="form-label fw-bold">Propriété en vedette</label>
                                <div class="form-check form-switch mt-2">
                                    <input class="form-check-input" type="checkbox" id="is_featured" name="is_featured" value="1"
                                           {{ old('is_featured') ? 'checked' : '' }} style="transform: scale(1.5);">
                                    <label class="form-check-label ms-2" for="is_featured">
                                        Mettre en vedette
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Adresse et Ville -->
                        <div class="row mb-4">
                            <div class="col-md-8">
                                <label for="address" class="form-label fw-bold">Adresse *</label>
                                <input type="text" class="form-control form-control-lg @error('address') is-invalid @enderror" 
                                       id="address" name="address" value="{{ old('address') }}" required 
                                       placeholder="Ex: 123 Avenue de la République, Plateau">
                                @error('address')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4">
                                <label for="city" class="form-label fw-bold">Ville *</label>
                                <input type="text" class="form-control form-control-lg @error('city') is-invalid @enderror" 
                                       id="city" name="city" value="{{ old('city') }}" required 
                                       placeholder="Ex: Dakar">
                                @error('city')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Description -->
                        <div class="mb-4">
                            <label for="description" class="form-label fw-bold">Description *</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" name="description" rows="6" required 
                                      placeholder="Décrivez votre propriété en détail : caractéristiques, équipements, commodités à proximité, points forts...">{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Images de la propriété -->
                        <div class="mb-4">
                            <label for="images" class="form-label fw-bold">Images de la propriété</label>
                            <div class="border border-2 border-dashed rounded-3 p-4 text-center" style="border-color: #dee2e6 !important;">
                                <input type="file" class="form-control d-none @error('images.*') is-invalid @enderror" 
                                       id="images" name="images[]" multiple accept="image/*">
                                <label for="images" class="btn btn-outline-primary btn-lg mb-2" style="cursor: pointer;">
                                    <i class="fas fa-cloud-upload-alt me-2"></i>Choisir les fichiers
                                </label>
                                <div id="file-status" class="text-muted">aucun fichier sélectionné</div>
                                <small class="text-muted d-block mt-2">
                                    Vous pouvez sélectionner plusieurs images. Formats acceptés : JPG, PNG, GIF. Taille maximum : 5MB par image.
                                </small>
                            </div>
                            @error('images.*')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                            <div id="image-preview" class="mt-3"></div>
                        </div>

                        <!-- Boutons d'action -->
                        <div class="d-flex justify-content-between pt-3">
                            <a href="{{ route('properties.index') }}" class="btn btn-outline-secondary btn-lg">
                                <i class="fas fa-arrow-left me-2"></i>Retour au tableau de bord
                            </a>
                            <button type="submit" class="btn btn-primary btn-lg px-5">
                                <i class="fas fa-save me-2"></i>Enregistrer la propriété
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Sidebar avec conseils -->
        <div class="col-lg-4">
            <!-- Aide et conseils -->
            <div class="card shadow border-0 mb-4">
                <div class="card-header bg-success text-white">
                    <h6 class="mb-0">
                        <i class="fas fa-lightbulb me-2"></i>Conseils pour une annonce réussie
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-flex mb-3">
                        <div class="flex-shrink-0">
                            <i class="fas fa-camera text-primary fa-lg"></i>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="mb-1">Photos de qualité</h6>
                            <small class="text-muted">Ajoutez au moins 5 photos avec une bonne luminosité et différents angles</small>
                        </div>
                    </div>
                    
                    <div class="d-flex mb-3">
                        <div class="flex-shrink-0">
                            <i class="fas fa-edit text-warning fa-lg"></i>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="mb-1">Titre accrocheur</h6>
                            <small class="text-muted">Mentionnez les points forts et la localisation</small>
                        </div>
                    </div>
                    
                    <div class="d-flex mb-3">
                        <div class="flex-shrink-0">
                            <i class="fas fa-euro-sign text-success fa-lg"></i>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="mb-1">Prix compétitif</h6>
                            <small class="text-muted">Vérifiez les prix du marché local</small>
                        </div>
                    </div>
                    
                    <div class="d-flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-map-marker-alt text-danger fa-lg"></i>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="mb-1">Localisation précise</h6>
                            <small class="text-muted">Mentionnez les commodités à proximité</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Processus de publication -->
            <div class="card shadow border-0 mb-4">
                <div class="card-header bg-info text-white">
                    <h6 class="mb-0">
                        <i class="fas fa-cogs me-2"></i>Processus de publication
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <span class="badge bg-primary rounded-circle me-3" style="width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;">1</span>
                        <div>
                            <h6 class="mb-0">Soumission</h6>
                            <small class="text-muted">Remplissage du formulaire</small>
                        </div>
                    </div>
                    
                    <div class="d-flex align-items-center mb-3">
                        <span class="badge bg-warning rounded-circle me-3" style="width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;">2</span>
                        <div>
                            <h6 class="mb-0">Révision</h6>
                            <small class="text-muted">Vérification par l'équipe</small>
                        </div>
                    </div>
                    
                    <div class="d-flex align-items-center">
                        <span class="badge bg-success rounded-circle me-3" style="width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;">3</span>
                        <div>
                            <h6 class="mb-0">Publication</h6>
                            <small class="text-muted">Visible sur le site (24-48h)</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact support -->
            <div class="card shadow border-0">
                <div class="card-header bg-secondary text-white">
                    <h6 class="mb-0">
                        <i class="fas fa-headset me-2"></i>Besoin d'aide ?
                    </h6>
                </div>
                <div class="card-body text-center">
                    <p class="text-muted small mb-3">Notre équipe est là pour vous accompagner</p>
                    <a href="mailto:support@cayorcity.com" class="btn btn-outline-primary btn-sm me-2">
                        <i class="fas fa-envelope me-1"></i>Email
                    </a>
                    <a href="tel:+221770000000" class="btn btn-outline-success btn-sm">
                        <i class="fas fa-phone me-1"></i>Appel
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
:root {
    --primary-color: #4A90E2;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --info-color: #17a2b8;
}

.form-control-lg, .form-select-lg {
    padding: 0.75rem 1rem;
    font-size: 1.1rem;
}

.form-label.fw-bold {
    color: #333;
    margin-bottom: 0.5rem;
}

.input-group-text {
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    color: #495057;
}

.card {
    border-radius: 12px;
    overflow: hidden;
}

.card-header {
    border-bottom: none;
    padding: 1rem 1.5rem;
}

.border-dashed {
    border-style: dashed !important;
    transition: all 0.3s ease;
}

.border-dashed:hover {
    border-color: var(--primary-color) !important;
    background-color: #f8f9ff;
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-switch .form-check-input:checked {
    background-color: var(--success-color);
    border-color: var(--success-color);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), #357ABD);
    border: none;
    padding: 0.75rem 2rem;
    font-weight: 500;
    border-radius: 8px;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #357ABD, #2E6AA0);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}

.btn-lg {
    padding: 0.875rem 2rem;
    font-size: 1.1rem;
}

.card-header.bg-primary {
    background: linear-gradient(135deg, var(--primary-color), #357ABD) !important;
}

#image-preview img {
    max-width: 100px;
    max-height: 80px;
    object-fit: cover;
    border-radius: 8px;
    margin: 0.25rem;
    border: 2px solid #e9ecef;
}

#image-preview .img-thumbnail {
    border: 2px solid var(--primary-color);
}

.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Gestion de l'upload d'images avec preview
    const imageInput = document.getElementById('images');
    const fileStatus = document.getElementById('file-status');
    const imagePreview = document.getElementById('image-preview');
    
    if (imageInput) {
        imageInput.addEventListener('change', function(e) {
            const files = e.target.files;
            
            if (files.length > 0) {
                // Mise à jour du statut
                if (files.length === 1) {
                    fileStatus.textContent = `${files.length} fichier sélectionné`;
                } else {
                    fileStatus.textContent = `${files.length} fichiers sélectionnés`;
                }
                fileStatus.className = 'text-success fw-bold';
                
                // Création du preview
                imagePreview.innerHTML = '<h6 class="text-primary mb-2"><i class="fas fa-images me-2"></i>Aperçu des images :</h6>';
                
                const previewContainer = document.createElement('div');
                previewContainer.className = 'd-flex flex-wrap gap-2';
                
                // Limiter l'aperçu à 8 images max
                const maxPreview = Math.min(files.length, 8);
                
                for (let i = 0; i < maxPreview; i++) {
                    const file = files[i];
                    
                    if (file.type.startsWith('image/')) {
                        const reader = new FileReader();
                        
                        reader.onload = function(e) {
                            const imgContainer = document.createElement('div');
                            imgContainer.className = 'position-relative';
                            
                            const img = document.createElement('img');
                            img.src = e.target.result;
                            img.className = 'img-thumbnail fade-in';
                            img.style.width = '100px';
                            img.style.height = '80px';
                            img.style.objectFit = 'cover';
                            
                            // Badge pour l'image principale
                            if (i === 0) {
                                const badge = document.createElement('span');
                                badge.className = 'position-absolute top-0 start-0 badge bg-success';
                                badge.style.fontSize = '0.6rem';
                                badge.style.transform = 'translate(-25%, -25%)';
                                badge.innerHTML = '<i class="fas fa-star me-1"></i>Principal';
                                imgContainer.appendChild(badge);
                            }
                            
                            imgContainer.appendChild(img);
                            previewContainer.appendChild(imgContainer);
                        };
                        
                        reader.readAsDataURL(file);
                    }
                }
                
                imagePreview.appendChild(previewContainer);
                
                // Message pour plus d'images
                if (files.length > 8) {
                    const moreText = document.createElement('small');
                    moreText.className = 'text-muted d-block mt-2';
                    moreText.innerHTML = `<i class="fas fa-plus me-1"></i>+${files.length - 8} image(s) supplémentaire(s)`;
                    imagePreview.appendChild(moreText);
                }
                
            } else {
                fileStatus.textContent = 'aucun fichier sélectionné';
                fileStatus.className = 'text-muted';
                imagePreview.innerHTML = '';
            }
        });
    }
    
    // Animation pour les champs requis
    const requiredInputs = document.querySelectorAll('input[required], select[required], textarea[required]');
    requiredInputs.forEach(input => {
        input.addEventListener('focus', function() {
            this.parentElement.style.transform = 'scale(1.02)';
            this.parentElement.style.transition = 'transform 0.2s ease';
        });
        
        input.addEventListener('blur', function() {
            this.parentElement.style.transform = 'scale(1)';
        });
    });
    
    // Validation en temps réel
    const priceInput = document.getElementById('price');
    if (priceInput) {
        priceInput.addEventListener('input', function() {
            const value = parseFloat(this.value);
            if (value > 0) {
                this.style.borderColor = '#28a745';
            } else {
                this.style.borderColor = '#dc3545';
            }
        });
    }
    
    // Auto-formatting pour le prix
    const formatNumber = (num) => {
        return new Intl.NumberFormat('fr-FR').format(num);
    };
    
    if (priceInput) {
        priceInput.addEventListener('blur', function() {
            const value = parseFloat(this.value);
            if (value > 0) {
                const formatted = formatNumber(value);
                // Optionnel: afficher le prix formaté à côté
                let formattedDisplay = document.getElementById('price-formatted');
                if (!formattedDisplay) {
                    formattedDisplay = document.createElement('small');
                    formattedDisplay.id = 'price-formatted';
                    formattedDisplay.className = 'text-muted d-block mt-1';
                    this.parentElement.appendChild(formattedDisplay);
                }
                formattedDisplay.textContent = `Prix formaté: ${formatted} FCFA`;
            }
        });
    }
});
</script>
@endpush
@endsection