Current File : /home/sanghavirealty/public_html/resourcesazwer/views/properties/image-modal.blade.php
<div class="modal fade" id="imageManagerModal{{ $property->id }}" tabindex="-1" aria-labelledby="imageManagerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="imageManagerModalLabel">Manage Images for {{ $property->title }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Image Upload Form -->
                <form action="{{ route('property-images.store') }}" method="POST" enctype="multipart/form-data" class="mb-4 p-4 border rounded">
                    @csrf
                    <input type="hidden" name="property_id" value="{{ $property->id }}">
                    <div class="row g-3 align-items-end">
                        <div class="col-md-6">
                            <label for="image_file" class="form-label">Upload New Image(s)</label>
                            <input class="form-control" type="file" id="image_file" name="image_file[]" multiple>
                        </div>
                        <div class="col-md-3">
                            <label for="type" class="form-label">File Type</label>
                            <select class="form-select" id="type" name="type" required>
                                <option value="" disabled selected>Choose type...</option>
                                <option value="Brochure">Brochure (PDF)</option>
                                <option value="InteriorImages">Interior Images</option>
                                <option value="ExteriorImages">Exterior Images</option>
                                <option value="FloorPlans">Floor Plans</option>
                                <option value="AmenitiesImages">Amenities Images</option>
                                <option value="ProjectUpdates">Project Updates</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <button type="submit" class="btn btn-primary w-100">Upload</button>
                        </div>
                    </div>
                </form>

                <hr>

                <!-- List of Existing Images -->
                <h6 class="mb-3">Existing Images</h6>
                <div class="row row-cols-2 row-cols-md-4 row-cols-lg-5 g-3">
                    @foreach ($property->images as $image)
                        <div class="col">
                            <div class="card h-100 shadow-sm">
                                @if(Str::endsWith(Str::lower($image->file_path), '.pdf'))
                                    <div class="card-body text-center d-flex flex-column align-items-center justify-content-center" style="height: 120px;">
                                        <h4 class="fw-bold text-muted mb-0">PDF</h4>
                                        <small class="text-muted">Brochure</small>
                                    </div>
                                @else
                                    <img src="{{ Storage::url($image->file_path) }}" class="card-img-top" alt="{{ $image->type }}" style="height: 120px; object-fit: cover;">
                                @endif
                                <div class="card-body p-2">
                                    <h6 class="card-title text-truncate mb-1">{{ Str::limit($image->type, 15) }}</h6>
                                    <div class="d-flex flex-wrap gap-1 mt-2 mb-2">
                                        <span class="badge rounded-pill {{ $image->primaryimage ? 'bg-success' : 'bg-secondary' }}">Primary</span>
                                        <span class="badge rounded-pill {{ $image->highlight ? 'bg-info' : 'bg-secondary' }}">Highlight</span>
                                        <span class="badge rounded-pill {{ $image->featured ? 'bg-warning' : 'bg-secondary' }}">Featured</span>
                                    </div>

                                    <div class="d-flex flex-wrap gap-1">
                                        <!-- Primary Image Toggle -->
                                        <form action="{{ route('property-images.update', $image->id) }}" method="POST">
                                            @csrf
                                            @method('PATCH')
                                            <input type="hidden" name="action" value="toggle-primary">
                                            <button type="submit" class="btn btn-sm {{ $image->primaryimage ? 'btn-success' : 'btn-outline-success' }}">P</button>
                                        </form>

                                        <!-- Highlight Toggle -->
                                        <form action="{{ route('property-images.update', $image->id) }}" method="POST">
                                            @csrf
                                            @method('PATCH')
                                            <input type="hidden" name="action" value="toggle-highlight">
                                            <button type="submit" class="btn btn-sm {{ $image->highlight ? 'btn-info' : 'btn-outline-info' }}">H</button>
                                        </form>

                                        <!-- Featured Toggle -->
                                        <form action="{{ route('property-images.update', $image->id) }}" method="POST">
                                            @csrf
                                            @method('PATCH')
                                            <input type="hidden" name="action" value="toggle-featured">
                                            <button type="submit" class="btn btn-sm {{ $image->featured ? 'btn-warning' : 'btn-outline-warning' }}">F</button>
                                        </form>

                                        <!-- Delete Image Button -->
                                        <form action="{{ route('property-images.destroy', $image->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this image?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-danger"><i class="bi bi-trash"></i></button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>