<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Find Nearby Doctors</title>
    <style>
        :root {
            --primary: #2563eb;
            --success: #16a34a;
            --warning: #ca8a04;
            --background: #f8fafc;
            --card: #ffffff;
            --text: #1e293b;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            padding: 20px;
            background: var(--background);
            color: var(--text);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .header {
            margin-bottom: 2rem;
        }

        .header h1 {
            color: var(--primary);
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }

        .search-panel {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            background: var(--card);
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            margin-bottom: 2rem;
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        .form-group label {
            font-weight: 500;
            margin-bottom: 0.5rem;
        }

        .form-group input,
        .form-group select {
            padding: 0.5rem;
            border: 1px solid #e2e8f0;
            border-radius: 4px;
            font-size: 1rem;
        }

        button {
            background: var(--primary);
            color: white;
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
            transition: background-color 0.2s;
        }

        button:hover {
            background: #1d4ed8;
        }

        #map {
            height: 400px;
            border-radius: 8px;
            margin-bottom: 2rem;
        }

        .results-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
        }

        .result-card {
            background: var(--card);
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .result-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .result-name {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }

        .result-detail {
            font-size: 0.875rem;
            color: #64748b;
            margin-bottom: 0.25rem;
        }

        .rating {
            color: var(--warning);
        }

        .open-status {
            color: var(--success);
        }

        .distance {
            color: var(--primary);
            font-weight: 500;
        }

        .loading {
            text-align: center;
            padding: 2rem;
            font-size: 1.25rem;
            color: #64748b;
        }

        @media (max-width: 768px) {
            body {
                padding: 1rem;
            }

            .search-panel {
                grid-template-columns: 1fr;
            }

            #map {
                height: 300px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>LogiCoy - Find Healthcare Providers</h1>
        </div>

        <div class="search-panel">
            <div class="form-group">
                <label for="zipcode">ZIP Code</label>
                <input type="text" id="zipcode" placeholder="Enter ZIP code">
            </div>

            <div class="form-group">
                <label for="providerType">Provider Type</label>
                <select id="providerType">
                    <option value="doctor">Doctor</option>
                    <option value="dentist">Dentist</option>
                    <option value="clinic">Medical Clinic</option>
                    <option value="hospital">Hospital</option>
                    <option value="pediatrician">Pediatrician</option>
                    <option value="cardiologist">Cardiologist</option>
                </select>
            </div>

            <div class="form-group">
                <label for="radius">Search Radius</label>
                <select id="radius">
                    <option value="5000">3 miles</option>
                    <option value="8047">5 miles</option>
                    <option value="16093">10 miles</option>
                    <option value="24140">15 miles</option>
                </select>
            </div>

            <div class="form-group">
                <label>&nbsp;</label>
                <button onclick="searchProviders()">Search</button>
            </div>
        </div>

        <div id="map"></div>
        <div id="results" class="results-container"></div>
    </div>

    <script>
        let map;
        let service;
        let markers = [];

        function initMap() {
            const defaultLocation = { lat: 37.0902, lng: -95.7129 };
            
            map = new google.maps.Map(document.getElementById('map'), {
                center: defaultLocation,
                zoom: 4,
                styles: [
                    {
                        featureType: "poi.business",
                        stylers: [{ visibility: "off" }]
                    }
                ]
            });

            service = new google.maps.places.PlacesService(map);
        }

        function clearMarkers() {
            markers.forEach(marker => marker.setMap(null));
            markers = [];
        }

        async function searchProviders() {
            const zipcode = document.getElementById('zipcode').value;
            const providerType = document.getElementById('providerType').value;
            const radius = document.getElementById('radius').value;

            if (!zipcode) {
                alert('Please enter a ZIP code');
                return;
            }

            // Show loading state
            document.getElementById('results').innerHTML = '<div class="loading">Searching for providers...</div>';
            clearMarkers();

            try {
                // Convert ZIP to coordinates
                const geocoder = new google.maps.Geocoder();
                const location = await new Promise((resolve, reject) => {
                    geocoder.geocode({ address: zipcode }, (results, status) => {
                        if (status === 'OK') {
                            resolve(results[0].geometry.location);
                        } else {
                            reject(new Error('Invalid ZIP code'));
                        }
                    });
                });

                map.setCenter(location);
                map.setZoom(12);

                // Search for providers
                const request = {
                    location: location,
                    radius: radius,
                    type: 'health',
                    keyword: providerType
                };

                service.nearbySearch(request, (results, status) => {
                    if (status === google.maps.places.PlacesServiceStatus.OK) {
                        displayResults(results);
                    } else {
                        document.getElementById('results').innerHTML = 
                            '<div class="loading">No providers found in this area</div>';
                    }
                });

            } catch (error) {
                alert(error.message);
                document.getElementById('results').innerHTML = '';
            }
        }

        function getPlaceDetails(placeId) {
            return new Promise((resolve, reject) => {
                service.getDetails({
                    placeId: placeId,
                    fields: ['formatted_phone_number', 'website', 'opening_hours', 'formatted_address']
                }, (place, status) => {
                    if (status === google.maps.places.PlacesServiceStatus.OK) {
                        resolve(place);
                    } else {
                        resolve({});
                    }
                });
            });
        }

        async function displayResults(places) {
            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML = '';
            const bounds = new google.maps.LatLngBounds();

            for (const place of places) {
                const details = await getPlaceDetails(place.place_id);
                
                // Create marker
                const marker = new google.maps.Marker({
                    map: map,
                    position: place.geometry.location,
                    title: place.name
                });

                bounds.extend(place.geometry.location);
                markers.push(marker);

                // Create info window
                const infowindow = new google.maps.InfoWindow({
                    content: `
                        <div style="padding: 10px; max-width: 300px;">
                            <h3 style="margin-bottom: 8px; color: #2563eb;">${place.name}</h3>
                            <p style="margin-bottom: 5px;">${details.formatted_address || place.vicinity}</p>
                            ${details.formatted_phone_number ? 
                                `<p style="margin-bottom: 5px;">📞 ${details.formatted_phone_number}</p>` : ''}
                            ${place.rating ? 
                                `<p style="margin-bottom: 5px;">⭐ ${place.rating} (${place.user_ratings_total} reviews)</p>` : ''}
                            ${details.opening_hours?.isOpen() ? 
                                `<p style="color: #16a34a;">✅ Open now</p>` : 
                                `<p style="color: #dc2626;">❌ Closed</p>`}
                            ${details.website ? 
                                `<p style="margin-top: 8px;"><a href="${details.website}" target="_blank" 
                                    style="color: #2563eb;">Visit Website</a></p>` : ''}
                        </div>
                    `
                });

                marker.addListener('click', () => {
                    infowindow.open(map, marker);
                });

                // Create result card
                const card = document.createElement('div');
                card.className = 'result-card';
                card.innerHTML = `
                    <div class="result-name">${place.name}</div>
                    <div class="result-detail">${details.formatted_address || place.vicinity}</div>
                    ${details.formatted_phone_number ? 
                        `<div class="result-detail">📞 ${details.formatted_phone_number}</div>` : ''}
                    ${place.rating ? 
                        `<div class="result-detail rating">⭐ ${place.rating} (${place.user_ratings_total} reviews)</div>` : ''}
                    ${details.opening_hours ? 
                        `<div class="result-detail open-status">
                            ${details.opening_hours.isOpen() ? '✅ Open now' : '❌ Closed'}
                        </div>` : ''}
                    ${details.website ? 
                        `<div class="result-detail">
                            <a href="${details.website}" target="_blank">Visit Website</a>
                        </div>` : ''}
                `;

                card.addEventListener('click', () => {
                    map.panTo(place.geometry.location);
                    map.setZoom(15);
                    infowindow.open(map, marker);
                });

                resultsDiv.appendChild(card);
            }

            if (markers.length > 1) {
                map.fitBounds(bounds);
            }
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD96_BzjGCPmH_fdtZynfrtaGkXOMIUnZI&libraries=places&callback=initMap" async defer></script>
</body>
</html>