@extends('layouts.app')

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

@section('content')
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">{{ $property->title }}</h1>
                </div>
                <div class="col-sm-6">
                    <div class="float-sm-right">
                        <a href="{{ route('properties.edit', $property) }}" class="btn btn-primary">
                            <i class="fas fa-edit"></i> Edit Property
                        </a>
                        <a href="{{ route('properties.index') }}" class="btn btn-secondary ml-2">
                            <i class="fas fa-arrow-left"></i> Back to Properties
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            <!-- Property Header -->
            <div class="row">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-body p-0">
                            @if($property->card_image)
                                <img src="{{ $property->card_image_url }}" 
                                     alt="{{ $property->title }}" 
                                     class="img-fluid w-100" 
                                     style="max-height: 400px; object-fit: cover;">
                            @else
                                <div class="bg-light text-center py-5">
                                    <i class="fas fa-image fa-3x text-muted"></i>
                                    <p class="mt-2 text-muted">No image available</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">
                                <i class="fas fa-info-circle"></i> Property Details
                            </h4>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-6">
                                    <div class="text-center p-3 bg-light rounded">
                                        <i class="fas fa-bed fa-2x text-primary mb-2"></i>
                                        <div class="font-weight-bold">{{ $property->bedrooms }}</div>
                                        <small class="text-muted">Bedrooms</small>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="text-center p-3 bg-light rounded">
                                        <i class="fas fa-bath fa-2x text-info mb-2"></i>
                                        <div class="font-weight-bold">{{ $property->bathrooms }}</div>
                                        <small class="text-muted">Bathrooms</small>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-12">
                                    <div class="text-center p-3 bg-light rounded">
                                        <i class="fas fa-ruler-combined fa-2x text-success mb-2"></i>
                                        <div class="font-weight-bold">{{ $property->formatted_area }}</div>
                                        <small class="text-muted">Total Area</small>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="font-weight-bold">Type:</span>
                                <span class="badge bg-info text-white">{{ $property->type_name }}</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mt-2">
                                <span class="font-weight-bold">Sort Order:</span>
                                <span class="badge bg-secondary">{{ $property->sort_order }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- Status Information -->
                    <div class="card mt-3">
                        <div class="card-header">
                            <h4 class="card-title">
                                <i class="fas fa-toggle-on"></i> Status & Display
                            </h4>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="font-weight-bold">Status:</span>
                                <span class="badge {{ $property->is_active ? 'bg-success' : 'bg-danger' }} text-white">
                                    {{ $property->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="font-weight-bold">Mobile Display:</span>
                                <span class="badge {{ $property->getDisplayStatusBadgeClass() }}">
                                    <i class="fas fa-mobile-alt"></i> {{ $property->display_on_mobile ? 'Yes' : 'No' }}
                                </span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="font-weight-bold">Homepage Display:</span>
                                <span class="badge {{ $property->getHomepageDisplayBadgeClass() }}">
                                    <i class="fas fa-home"></i> {{ $property->display_on_homepage ? 'Yes' : 'No' }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Property Information -->
            <div class="row mt-4">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">
                                <i class="fas fa-file-alt"></i> Property Information
                            </h4>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <h5 class="font-weight-bold text-primary">Short Description</h5>
                                    <p class="text-muted">{{ $property->short_description }}</p>
                                </div>
                                <div class="col-md-6">
                                    <h5 class="font-weight-bold text-primary">Property Details</h5>
                                    <ul class="list-unstyled">
                                        <li><strong>ID:</strong> {{ $property->id }}</li>
                                        <li><strong>Type:</strong> {{ $property->type_name }}</li>
                                        <li><strong>Area:</strong> {{ $property->formatted_area }}</li>
                                        <li><strong>Bedrooms:</strong> {{ $property->bedrooms }}</li>
                                        <li><strong>Bathrooms:</strong> {{ $property->bathrooms }}</li>
                                        <li><strong>Created:</strong> {{ $property->created_at->format('M d, Y H:i') }}</li>
                                        <li><strong>Updated:</strong> {{ $property->updated_at->format('M d, Y H:i') }}</li>
                                    </ul>
                                </div>
                            </div>
                            
                            <hr>
                            
                            <h5 class="font-weight-bold text-primary">Full Description</h5>
                            <div class="bg-light p-3 rounded">
                                {!! $property->full_description !!}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <!-- Quick Actions -->
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">
                                <i class="fas fa-cogs"></i> Quick Actions
                            </h4>
                        </div>
                        <div class="card-body">
                            <div class="d-grid gap-2">
                                <form method="POST" action="{{ route('properties.toggle-active', $property) }}" class="d-inline">
                                    @csrf
                                    <button type="submit" class="btn btn-block {{ $property->is_active ? 'btn-warning' : 'btn-success' }}">
                                        <i class="fas {{ $property->is_active ? 'fa-eye-slash' : 'fa-eye' }}"></i>
                                        {{ $property->is_active ? 'Deactivate' : 'Activate' }}
                                    </button>
                                </form>
                                
                                <form method="POST" action="{{ route('properties.toggle-mobile-display', $property) }}" class="d-inline">
                                    @csrf
                                    <button type="submit" class="btn btn-block {{ $property->display_on_mobile ? 'btn-warning' : 'btn-success' }}">
                                        <i class="fas fa-mobile-alt"></i>
                                        {{ $property->display_on_mobile ? 'Hide from Mobile' : 'Show on Mobile' }}
                                    </button>
                                </form>
                                
                                <form method="POST" action="{{ route('properties.toggle-homepage-display', $property) }}" class="d-inline">
                                    @csrf
                                    <button type="submit" class="btn btn-block {{ $property->display_on_homepage ? 'btn-warning' : 'btn-success' }}">
                                        <i class="fas fa-home"></i>
                                        {{ $property->display_on_homepage ? 'Hide from Homepage' : 'Show on Homepage' }}
                                    </button>
                                </form>
                                
                                <a href="{{ route('properties.edit', $property) }}" class="btn btn-primary">
                                    <i class="fas fa-edit"></i> Edit Property
                                </a>
                                
                                <form method="POST" action="{{ route('properties.destroy', $property) }}" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this property?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger">
                                        <i class="fas fa-trash"></i> Delete Property
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Gallery Images -->
            @if($property->gallery && count($property->gallery) > 0)
                <div class="row mt-4">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">
                                    <i class="fas fa-images"></i> Gallery Images ({{ count($property->gallery) }})
                                </h4>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    @foreach($property->gallery as $index => $image)
                                        <div class="col-md-3 col-sm-6 mb-3">
                                            <div class="card gallery-item">
                                                <img src="{{ asset('storage/' . $image) }}" 
                                                     alt="Gallery image {{ $index + 1 }}" 
                                                     class="card-img-top" 
                                                     style="height: 200px; object-fit: cover;">
                                                <div class="card-body text-center">
                                                    <small class="text-muted">Image {{ $index + 1 }}</small>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </section>
</div>

<!-- Image Modal -->
<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="imageModalLabel">Property Image</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body text-center">
                <img id="modalImage" src="" alt="Property image" class="img-fluid">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<style>
.badge {
    font-size: 0.8em;
    font-weight: 500;
    padding: 0.4em 0.8em;
}
.badge.bg-success {
    background-color: #28a745 !important;
}
.badge.bg-danger {
    background-color: #dc3545 !important;
}
.badge.bg-warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
}
.badge.bg-info {
    background-color: #17a2b8 !important;
}
.badge.bg-secondary {
    background-color: #6c757d !important;
}
.card {
    margin-bottom: 1.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}
.card-title {
    margin-bottom: 0;
    font-size: 1.1rem;
    font-weight: 600;
}
.d-grid {
    display: grid;
}
.gap-2 {
    gap: 0.5rem;
}
.btn-block {
    display: block;
    width: 100%;
}
.gallery-item {
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}
.gallery-item:hover {
    transform: scale(1.05);
}
.modal-lg {
    max-width: 90%;
}
.modal-body img {
    max-height: 70vh;
    object-fit: contain;
}
</style>

<script>
function openImageModal(imageSrc) {
    document.getElementById('modalImage').src = imageSrc;
    $('#imageModal').modal('show');
}

// Add click handlers to gallery images
document.addEventListener('DOMContentLoaded', function() {
    const galleryImages = document.querySelectorAll('.gallery-item img');
    galleryImages.forEach(function(img) {
        img.addEventListener('click', function() {
            openImageModal(this.src);
        });
    });
});
</script>
@endsection