@extends('layouts.app')

@section('title', 'Modifier la propriété - 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">Modifier la propriété</h1>
                    <p class="text-muted">Modifiez les informations de votre propriété</p>
                </div>
                <div>
                    <a href="{{ route('properties.show', $property) }}" class="btn btn-outline-secondary">
                        <i class="fas fa-eye me-2"></i>Voir la propriété
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-body">
                    <form action="{{ route('properties.update', $property) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <!-- Informations de base -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">
                                    <i class="fas fa-info-circle me-2"></i>Informations de base
                                </h5>
                            </div>
                            
                            <div class="col-md-12 mb-3">
                                <label for="title" class="form-label">Titre de la propriété *</label>
                                <input type="text" class="form-control @error('title') is-invalid @enderror" 
                                       id="title" name="title" value="{{ old('title', $property->title) }}" required>
                                @error('title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="property_type_id" class="form-label">Type de propriété *</label>
                                <select class="form-select @error('property_type_id') is-invalid @enderror" 
                                        id="property_type_id" name="property_type_id" required>
                                    <option value="">Sélectionnez un type</option>
                                    @foreach($propertyTypes as $type)
                                        <option value="{{ $type->id }}" 
                                                {{ old('property_type_id', $property->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 mb-3">
                                <label for="transaction_type" class="form-label">Type de transaction *</label>
                                <select class="form-select @error('transaction_type') is-invalid @enderror" 
                                        id="transaction_type" name="transaction_type" required>
                                    <option value="">Sélectionnez</option>
                                    <option value="sale" {{ old('transaction_type', $property->transaction_type) == 'sale' ? 'selected' : '' }}>
                                        Vente
                                    </option>
                                    <option value="rent" {{ old('transaction_type', $property->transaction_type) == 'rent' ? 'selected' : '' }}>
                                        Location
                                    </option>
                                </select>
                                @error('transaction_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-12 mb-3">
                                <label for="price" class="form-label">Prix (FCFA) *</label>
                                <input type="number" class="form-control @error('price') is-invalid @enderror" 
                                       id="price" name="price" value="{{ old('price', $property->price) }}" min="0" required>
                                @error('price')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-12 mb-3">
                                <label for="description" class="form-label">Description *</label>
                                <textarea class="form-control @error('description') is-invalid @enderror" 
                                          id="description" name="description" rows="5" required>{{ old('description', $property->description) }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Localisation -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">
                                    <i class="fas fa-map-marker-alt me-2"></i>Localisation
                                </h5>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="city" class="form-label">Ville *</label>
                                <input type="text" class="form-control @error('city') is-invalid @enderror" 
                                       id="city" name="city" value="{{ old('city', $property->city) }}" required>
                                @error('city')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="district" class="form-label">Quartier</label>
                                <input type="text" class="form-control @error('district') is-invalid @enderror" 
                                       id="district" name="district" value="{{ old('district', $property->district) }}">
                                @error('district')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-12 mb-3">
                                <label for="address" class="form-label">Adresse complète *</label>
                                <input type="text" class="form-control @error('address') is-invalid @enderror" 
                                       id="address" name="address" value="{{ old('address', $property->address) }}" required>
                                @error('address')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Caractéristiques -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">
                                    <i class="fas fa-home me-2"></i>Caractéristiques
                                </h5>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="surface" class="form-label">Surface (m²) *</label>
                                <input type="number" class="form-control @error('surface') is-invalid @enderror" 
                                       id="surface" name="surface" value="{{ old('surface', $property->surface) }}" min="1" required>
                                @error('surface')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="bedrooms" class="form-label">Nombre de chambres</label>
                                <input type="number" class="form-control @error('bedrooms') is-invalid @enderror" 
                                       id="bedrooms" name="bedrooms" value="{{ old('bedrooms', $property->bedrooms) }}" min="0">
                                @error('bedrooms')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="bathrooms" class="form-label">Nombre de salles de bain</label>
                                <input type="number" class="form-control @error('bathrooms') is-invalid @enderror" 
                                       id="bathrooms" name="bathrooms" value="{{ old('bathrooms', $property->bathrooms) }}" min="0">
                                @error('bathrooms')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="floor" class="form-label">Étage</label>
                                <input type="number" class="form-control @error('floor') is-invalid @enderror" 
                                       id="floor" name="floor" value="{{ old('floor', $property->floor) }}" min="0">
                                @error('floor')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Équipements -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">
                                    <i class="fas fa-cogs me-2"></i>Équipements
                                </h5>
                            </div>

                            <div class="col-md-6 mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="furnished" name="furnished" value="1"
                                           {{ old('furnished', $property->furnished) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="furnished">
                                        <i class="fas fa-couch me-2"></i>Meublé
                                    </label>
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="parking" name="parking" value="1"
                                           {{ old('parking', $property->parking) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="parking">
                                        <i class="fas fa-car me-2"></i>Parking
                                    </label>
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="garden" name="garden" value="1"
                                           {{ old('garden', $property->garden) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="garden">
                                        <i class="fas fa-seedling me-2"></i>Jardin
                                    </label>
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="balcony" name="balcony" value="1"
                                           {{ old('balcony', $property->balcony) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="balcony">
                                        <i class="fas fa-external-link-alt me-2"></i>Balcon
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Images -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">
                                    <i class="fas fa-images me-2"></i>Images
                                </h5>
                            </div>

                            <!-- Images actuelles -->
                            @if($property->images->count() > 0)
                                <div class="col-12 mb-3">
                                    <h6>Images actuelles</h6>
                                    <div class="row">
                                        @foreach($property->images as $image)
                                            <div class="col-md-3 mb-3">
                                                <div class="position-relative">
                                                    <img src="{{ $image->image_url }}" 
                                                         class="img-thumbnail" 
                                                         style="height: 150px; object-fit: cover; width: 100%;">
                                                    @if($image->is_main)
                                                        <span class="position-absolute top-0 start-0 badge bg-success m-1">
                                                            Principal
                                                        </span>
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endif

                            <div class="col-12">
                                <label for="images" class="form-label">Ajouter de nouvelles images</label>
                                <input type="file" class="form-control @error('images.*') is-invalid @enderror" 
                                       id="images" name="images[]" multiple accept="image/*">
                                <div class="form-text">Formats acceptés: JPG, PNG, GIF. Taille max: 2MB par image.</div>
                                @error('images.*')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Boutons d'action -->
                        <div class="row">
                            <div class="col-12">
                                <hr>
                                <div class="d-flex justify-content-between">
                                    <a href="{{ route('properties.show', $property) }}" class="btn btn-outline-secondary">
                                        <i class="fas fa-arrow-left me-2"></i>Annuler
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save me-2"></i>Sauvegarder les modifications
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Informations sur la propriété -->
            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <h6 class="card-title">
                        <i class="fas fa-info-circle me-2 text-primary"></i>Informations
                    </h6>
                    <p class="text-muted small mb-2">
                        <strong>Status:</strong> 
                        <span class="badge bg-{{ $property->status === 'approved' ? 'success' : ($property->status === 'pending' ? 'warning' : 'danger') }}">
                            {{ ucfirst($property->status) }}
                        </span>
                    </p>
                    <p class="text-muted small mb-2">
                        <strong>Créé:</strong> {{ $property->created_at->format('d/m/Y H:i') }}
                    </p>
                    <p class="text-muted small mb-2">
                        <strong>Modifié:</strong> {{ $property->updated_at->format('d/m/Y H:i') }}
                    </p>
                    <p class="text-muted small mb-0">
                        <strong>Vues:</strong> {{ $property->views }}
                    </p>
                </div>
            </div>

            <!-- Aide -->
            <div class="card shadow-sm">
                <div class="card-body">
                    <h6 class="card-title">
                        <i class="fas fa-question-circle me-2 text-primary"></i>Besoin d'aide ?
                    </h6>
                    <div class="small">
                        <p class="mb-2"><strong>Titre:</strong> Utilisez un titre accrocheur et descriptif</p>
                        <p class="mb-2"><strong>Description:</strong> Décrivez tous les avantages de votre propriété</p>
                        <p class="mb-2"><strong>Prix:</strong> Soyez compétitif par rapport au marché</p>
                        <p class="mb-0"><strong>Images:</strong> Ajoutez des photos de qualité pour attirer plus de visiteurs</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
.form-check-label {
    cursor: pointer;
}

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

.card {
    border: none;
}

.text-primary {
    color: var(--primary-color) !important;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), #357ABD);
    border: none;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #357ABD, #2E6AA0);
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Preview des images sélectionnées
    const imageInput = document.getElementById('images');
    if (imageInput) {
        imageInput.addEventListener('change', function(e) {
            const files = e.target.files;
            if (files.length > 0) {
                console.log(`${files.length} image(s) sélectionnée(s)`);
            }
        });
    }
});
</script>
@endpush
@endsection