@extends('layouts.app')

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

@section('content')
<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <!-- Header avec style moderne -->
            <div class="card border-0 bg-primary text-white mb-4">
                <div class="card-body text-center py-4">
                    <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 pour publier votre propriété</p>
                </div>
            </div>

            <!-- Formulaire principal -->
            <div class="card shadow border-0">
                <div class="card-body p-4">
                    <form action="{{ route('properties.store.public') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <!-- Titre -->
                        <div class="mb-4">
                            <label for="title" class="form-label fw-bold">
                                <i class="fas fa-edit text-primary me-2"></i>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 terrasse">
                            @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">
                                    <i class="fas fa-home text-warning me-2"></i>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>
                                    @if(isset($propertyTypes))
                                        @foreach($propertyTypes as $type)
                                            <option value="{{ $type->id }}" {{ old('property_type_id') == $type->id ? 'selected' : '' }}>
                                                {{ $type->name }}
                                            </option>
                                        @endforeach
                                    @else
                                        <option value="1">Appartement</option>
                                        <option value="2">Maison</option>
                                        <option value="3">Villa</option>
                                        <option value="4">Studio</option>
                                        <option value="5">Bureau</option>
                                        <option value="6">Commerce</option>
                                    @endif
                                </select>
                                @error('property_type_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="sale_type" class="form-label fw-bold">
                                    <i class="fas fa-tag text-success me-2"></i>Statut *
                                </label>
                                <select class="form-select form-select-lg @error('sale_type') is-invalid @enderror" 
                                        id="sale_type" name="sale_type" required>
                                    <option value="">Sélectionner un statut</option>
                                    <option value="sale" {{ old('sale_type') == 'sale' ? 'selected' : '' }}>À vendre</option>
                                    <option value="rent" {{ old('sale_type') == 'rent' ? 'selected' : '' }}>À louer</option>
                                </select>
                                @error('sale_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">
                                    <i class="fas fa-money-bill-wave text-success me-2"></i>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">
                                    <i class="fas fa-expand-arrows-alt text-info me-2"></i>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 et Salles de bain -->
                        <div class="row mb-4">
                            <div class="col-md-4">
                                <label for="bedrooms" class="form-label fw-bold">
                                    <i class="fas fa-bed text-primary me-2"></i>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">
                                    <i class="fas fa-bath text-info me-2"></i>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">
                                    <i class="fas fa-star text-warning me-2"></i>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">
                                    <i class="fas fa-map-marker-alt text-danger me-2"></i>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">
                                    <i class="fas fa-city text-secondary me-2"></i>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">
                                <i class="fas fa-align-left text-primary me-2"></i>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, avantages, commodités à proximité...">{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Upload d'images -->
                        <div class="mb-4">
                            <label for="images" class="form-label fw-bold">
                                <i class="fas fa-images text-success me-2"></i>Images de la propriété
                            </label>
                            <div class="border border-2 border-dashed rounded-3 p-4 text-center upload-zone">
                                <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-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">
                                    <i class="fas fa-info-circle me-1"></i>
                                    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 mt-2">{{ $message }}</div>
                            @enderror
                            <div id="image-preview" class="mt-3"></div>
                        </div>

                        <!-- Boutons d'action -->
                        <div class="d-flex justify-content-between pt-4 border-top">
                            <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-success btn-lg px-5">
                                <i class="fas fa-save me-2"></i>Enregistrer la propriété
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Conseils en bas -->
            <div class="card mt-4 border-0 bg-light">
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-md-3 mb-3">
                            <i class="fas fa-camera fa-2x text-primary mb-2"></i>
                            <h6>Photos de qualité</h6>
                            <small class="text-muted">Au moins 5 photos</small>
                        </div>
                        <div class="col-md-3 mb-3">
                            <i class="fas fa-edit fa-2x text-warning mb-2"></i>
                            <h6>Titre accrocheur</h6>
                            <small class="text-muted">Mentionnez les points forts</small>
                        </div>
                        <div class="col-md-3 mb-3">
                            <i class="fas fa-euro-sign fa-2x text-success mb-2"></i>
                            <h6>Prix du marché</h6>
                            <small class="text-muted">Soyez compétitif</small>
                        </div>
                        <div class="col-md-3 mb-3">
                            <i class="fas fa-clock fa-2x text-info mb-2"></i>
                            <h6>Publication rapide</h6>
                            <small class="text-muted">Validation en 24-48h</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
:root {
    --primary-color: #4A90E2;
}

.form-control-lg, .form-select-lg {
    padding: 0.875rem 1rem;
    font-size: 1.1rem;
    border-radius: 8px;
}

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

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

.upload-zone {
    border-color: #dee2e6 !important;
    background-color: #fafbfc;
    transition: all 0.3s ease;
}

.upload-zone:hover {
    border-color: var(--primary-color) !important;
    background-color: #f0f7ff;
}

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

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

.btn-success {
    background: linear-gradient(135deg, #28a745, #20692e);
    border: none;
    font-weight: 500;
    border-radius: 8px;
}

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

#image-preview img {
    max-width: 120px;
    max-height: 90px;
    object-fit: cover;
    border-radius: 8px;
    margin: 0.25rem;
    border: 2px solid #e9ecef;
    transition: transform 0.2s ease;
}

#image-preview img:hover {
    transform: scale(1.05);
}

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

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

<script>
document.addEventListener('DOMContentLoaded', function() {
    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
                fileStatus.innerHTML = `<i class="fas fa-check text-success me-1"></i><strong>${files.length} fichier(s) sélectionné(s)</strong>`;
                fileStatus.className = 'text-success';
                
                // Création du preview
                imagePreview.innerHTML = '<h6 class="text-primary mb-3"><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 à 6 images max
                const maxPreview = Math.min(files.length, 6);
                
                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';
                            
                            // Badge pour l'image principale
                            if (i === 0) {
                                const badge = document.createElement('span');
                                badge.className = 'position-absolute top-0 start-0 badge bg-warning';
                                badge.style.fontSize = '0.7rem';
                                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 > 6) {
                    const moreText = document.createElement('div');
                    moreText.className = 'alert alert-info mt-3';
                    moreText.innerHTML = `<i class="fas fa-info-circle me-2"></i>+${files.length - 6} image(s) supplémentaire(s) seront également téléchargées`;
                    imagePreview.appendChild(moreText);
                }
                
            } else {
                fileStatus.textContent = 'aucun fichier sélectionné';
                fileStatus.className = 'text-muted';
                imagePreview.innerHTML = '';
            }
        });
    }
    
    // Animation pour le prix
    const priceInput = document.getElementById('price');
    if (priceInput) {
        priceInput.addEventListener('input', function() {
            const value = parseFloat(this.value);
            if (value > 0) {
                this.style.borderColor = '#28a745';
                this.style.borderWidth = '2px';
            } else {
                this.style.borderColor = '#dc3545';
                this.style.borderWidth = '2px';
            }
        });
    }
});
</script>
@endsection