

<?php $__env->startSection('title', $property->title); ?>

<?php $__env->startSection('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"><?php echo e($property->title); ?></h1>
                </div>
                <div class="col-sm-6">
                    <div class="float-sm-right">
                        <a href="<?php echo e(route('properties.edit', $property)); ?>" class="btn btn-primary">
                            <i class="fas fa-edit"></i> Edit Property
                        </a>
                        <a href="<?php echo e(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">
                            <?php if($property->card_image): ?>
                                <img src="<?php echo e($property->card_image_url); ?>" 
                                     alt="<?php echo e($property->title); ?>" 
                                     class="img-fluid w-100" 
                                     style="max-height: 400px; object-fit: cover;">
                            <?php 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>
                            <?php 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"><?php echo e($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"><?php echo e($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"><?php echo e($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"><?php echo e($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"><?php echo e($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 <?php echo e($property->is_active ? 'bg-success' : 'bg-danger'); ?> text-white">
                                    <?php echo e($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 <?php echo e($property->getDisplayStatusBadgeClass()); ?>">
                                    <i class="fas fa-mobile-alt"></i> <?php echo e($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 <?php echo e($property->getHomepageDisplayBadgeClass()); ?>">
                                    <i class="fas fa-home"></i> <?php echo e($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"><?php echo e($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> <?php echo e($property->id); ?></li>
                                        <li><strong>Type:</strong> <?php echo e($property->type_name); ?></li>
                                        <li><strong>Area:</strong> <?php echo e($property->formatted_area); ?></li>
                                        <li><strong>Bedrooms:</strong> <?php echo e($property->bedrooms); ?></li>
                                        <li><strong>Bathrooms:</strong> <?php echo e($property->bathrooms); ?></li>
                                        <li><strong>Created:</strong> <?php echo e($property->created_at->format('M d, Y H:i')); ?></li>
                                        <li><strong>Updated:</strong> <?php echo e($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">
                                <?php echo $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="<?php echo e(route('properties.toggle-active', $property)); ?>" class="d-inline">
                                    <?php echo csrf_field(); ?>
                                    <button type="submit" class="btn btn-block <?php echo e($property->is_active ? 'btn-warning' : 'btn-success'); ?>">
                                        <i class="fas <?php echo e($property->is_active ? 'fa-eye-slash' : 'fa-eye'); ?>"></i>
                                        <?php echo e($property->is_active ? 'Deactivate' : 'Activate'); ?>

                                    </button>
                                </form>
                                
                                <form method="POST" action="<?php echo e(route('properties.toggle-mobile-display', $property)); ?>" class="d-inline">
                                    <?php echo csrf_field(); ?>
                                    <button type="submit" class="btn btn-block <?php echo e($property->display_on_mobile ? 'btn-warning' : 'btn-success'); ?>">
                                        <i class="fas fa-mobile-alt"></i>
                                        <?php echo e($property->display_on_mobile ? 'Hide from Mobile' : 'Show on Mobile'); ?>

                                    </button>
                                </form>
                                
                                <form method="POST" action="<?php echo e(route('properties.toggle-homepage-display', $property)); ?>" class="d-inline">
                                    <?php echo csrf_field(); ?>
                                    <button type="submit" class="btn btn-block <?php echo e($property->display_on_homepage ? 'btn-warning' : 'btn-success'); ?>">
                                        <i class="fas fa-home"></i>
                                        <?php echo e($property->display_on_homepage ? 'Hide from Homepage' : 'Show on Homepage'); ?>

                                    </button>
                                </form>
                                
                                <a href="<?php echo e(route('properties.edit', $property)); ?>" class="btn btn-primary">
                                    <i class="fas fa-edit"></i> Edit Property
                                </a>
                                
                                <form method="POST" action="<?php echo e(route('properties.destroy', $property)); ?>" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this property?')">
                                    <?php echo csrf_field(); ?>
                                    <?php echo method_field('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 -->
            <?php 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 (<?php echo e(count($property->gallery)); ?>)
                                </h4>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <?php $__currentLoopData = $property->gallery; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $image): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <div class="col-md-3 col-sm-6 mb-3">
                                            <div class="card gallery-item">
                                                <img src="<?php echo e(asset('storage/' . $image)); ?>" 
                                                     alt="Gallery image <?php echo e($index + 1); ?>" 
                                                     class="card-img-top" 
                                                     style="height: 200px; object-fit: cover;">
                                                <div class="card-body text-center">
                                                    <small class="text-muted">Image <?php echo e($index + 1); ?></small>
                                                </div>
                                            </div>
                                        </div>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            <?php 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>
<?php $__env->stopSection(); ?> 
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\solen-north-coast\resources\views/properties/show.blade.php ENDPATH**/ ?>