Ecobuddy/Views/map.phtml

<?php require_once('template/header.phtml') ?>

<style>
        #mapOverlay {
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    
    #mapOverlay.hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    
    /* Custom styles for facility popups */
    .facility-popup .leaflet-popup-content-wrapper {
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .facility-popup .leaflet-popup-content {
        margin: 0;
        min-width: 250px;
    }
    
    .facility-details {
        max-height: 300px;
        overflow-y: auto;
    }
    
    .facility-details::-webkit-scrollbar {
        width: 6px;
    }
    
    .facility-details::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }
    
    .facility-details::-webkit-scrollbar-thumb {
        background: #198754;
        border-radius: 3px;
    }
    
    /* Comment form styles */
    .comment-form {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #dee2e6;
    }
    
    .comment-form textarea {
        resize: vertical;
        min-height: 60px;
    }
    
    /* Facility list container styles */
    .facility-list-container {
        height: calc(100vh - 400px); /* Adjust based on your layout */
        display: flex;
        flex-direction: column;
    }
    
    .facility-list {
        overflow-y: auto;
        flex-grow: 1;
        margin-bottom: 0;
    }
    
    .facility-list::-webkit-scrollbar {
        width: 6px;
    }
    
    .facility-list::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }
    
    .facility-list::-webkit-scrollbar-thumb {
        background: #198754;
        border-radius: 3px;
    }
</style>
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="alert alert-warning">
                Notice: Facility locations are currently limited to UK Cities.
            </div>
        </div>
    </div>
</div>
<div class="container-fluid pt-0 py-4">
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 col-lg-3">
                            <!-- Postcode and radius controls -->
                            <div class="mb-4">
                                <h5 class="mb-3">Location Settings</h5>
                                <form id="postcodeForm" class="mb-3">
                                    <div class="mb-3">
                                        <label for="postcode" class="form-label">Enter Postcode</label>
                                        <div class="input-group">
                                            <span class="input-group-text bg-light">
                                                <i class="bi bi-geo-alt text-success"></i>
                                            </span>
                                            <input type="text" class="form-control" id="postcode" name="postcode" 
                                                   placeholder="e.g. M1 5GD" required>
                                            <button class="btn btn-success" type="submit">
                                                <i class="bi bi-crosshair"></i>
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label for="radius" class="form-label">Search Radius (miles)</label>
                                        <select class="form-select" id="radius" name="radius">
                                            <option value="1">1 mile</option>
                                            <option value="5">5 miles</option>
                                            <option value="10" selected>10 miles</option>
                                            <option value="25">25 miles</option>
                                        </select>
                                    </div>
                                </form>
                                
                                <!-- Facility list search and container -->
                                <div class="facility-list-container">
                                    <div class="input-group mb-3">
                                        <span class="input-group-text bg-light">
                                            <i class="bi bi-search text-success"></i>
                                        </span>
                                        <input type="text" class="form-control" id="facilitySearch" 
                                               placeholder="Search facilities...">
                                    </div>
                                    <div id="facilityList" class="list-group list-group-flush facility-list"></div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-8 col-lg-9">
                            <!-- Map container with blur overlay -->
                            <div class="position-relative" style="height: 700px;">
                                <div id="map" style="height: 100%; width: 100%; z-index: 1;"></div>
                                <div id="mapOverlay" class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center" 
                                     style="backdrop-filter: blur(8px); z-index: 2; background: rgba(255,255,255,0.5);">
                                    <div class="text-center">
                                        <i class="bi bi-geo-alt text-success" style="font-size: 3rem;"></i>
                                        <h4 class="mt-3">Enter a Postcode</h4>
                                        <p class="text-muted mb-0">Please enter a postcode to view facilities on the map</p>
                                        <p class="text-muted mt-0">or use the search button to find facilities near you</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Leaflet CSS and JS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>

<!-- Add our map handler -->
<script src="/public/js/mapHandler.js"></script>

<script>
    // Add facility search functionality
    document.addEventListener('DOMContentLoaded', function() {
        const facilitySearch = document.getElementById('facilitySearch');
        const facilityList = document.getElementById('facilityList');
        
        if (facilitySearch && facilityList) {
            facilitySearch.addEventListener('input', function() {
                const searchTerm = this.value.toLowerCase();
                const items = facilityList.getElementsByClassName('list-group-item');
                
                Array.from(items).forEach(item => {
                    const text = item.textContent.toLowerCase();
                    item.style.display = text.includes(searchTerm) ? '' : 'none';
                });
            });
        }
    });
</script>

<?php require('template/statusModal.phtml') ?>
<?php require_once('template/footer.phtml') ?>