@extends('user.layouts.main')

@section('main-container')
<style>
    .vertical-center {
        min-height: 100%;
        min-height: 100vh;
        display: flex;
        align-items: center;
    }

    .new-donation-btn {
        background-color: #007bff;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        text-decoration: none;
        font-size: 16px;
        margin-bottom: 20px;
        display: inline-block;
    }

    .new-donation-btn:hover {
        background-color: #0056b3;
        text-decoration: none;
        color: white;
    }

    /* Added location-related styles */
    .location-cell {
        position: relative;
        cursor: pointer;
    }

    .location-tooltip {
        visibility: hidden;
        position: absolute;
        z-index: 1;
        background-color: #555;
        color: #fff;
        text-align: center;
        padding: 5px;
        border-radius: 6px;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .location-cell:hover .location-tooltip {
        visibility: visible;
        opacity: 1;
    }

    .map-popup {
        display: none;
        position: fixed;
        z-index: 1000;
        background: white;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        width: 300px;
        height: 350px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .map-container {
        height: 200px;
        margin-bottom: 10px;
    }

    .distance-info {
        font-size: 12px;
        margin-top: 5px;
        max-height: 120px;
        overflow-y: auto;
    }
</style>

<br><br>
<div class="container">
    <div class="container">
        <div class="typography text-center">
            @if(session('status'))
            <h2 class="alert alert-success" role="alert">
                {{session('status')}}
            </h2>
            @endif
            <h1>My Donations</h1>
            <a href="{{ url('/donate') }}" class="new-donation-btn">New Donation</a>
        </div>

        <div class="mt-20 progress-table-wrap">
            <div class="progress-table">
                <div class="table-head">
                    <div class="serial">#</div>
                    <div class="country">Food Name</div>
                    <div class="visit">Food Image</div>
                    <div class="visit">Plates</div>
                    <div class="visit">Contacts</div>
                    <div class="visit">Pick-up</div>
                    <div class="visit">Donated to</div>
                    <div class="visit">Status</div>
                    <div class="visit">Action</div>
                </div>
                @foreach ($donations as $donation)
                <div class="table-row">
                    <div class="serial">{{ ++$key }}</div>
                    <div class="country">{{ $donation->name }}</div>
                    <div class="visit"><img height="40" width="80" src="{{ url('uploads/donations/'.$donation->img) }}"></div>
                    <div class="visit">{{ $donation->qty }}</div>
                    <div class="visit">{{ $donation->phone }}</div>
                    <div class="visit location-cell" data-location="{{ $donation->location }}">
                        View Location
                        <span class="location-tooltip">{{ $donation->location }}</span>
                    </div>
                    <div class="visit">{{ $donation->slum_area ? $donation->slum_area['name'] : 'N/A' }}</div>
                    <div class="visit">
                        @if($donation->status === "Pending")
                        <span class="badge badge-danger">{{ $donation->status }}</span>
                        @elseif($donation->status === "In Transit")
                        <span class="badge badge-warning">{{ $donation->status }}</span>
                        @else
                        <span class="badge badge-success">{{ $donation->status }}</span>
                        @endif
                    </div>
                    <div class="visit">
                        <a class="btn-primary p-3" href="{{ url('/donation-single/'.$donation->id) }}">
                            <i class="bi bi-eye" style="font-size:20px;"></i> Details
                        </a>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIzUPNgHONH82gpQnuBklpU7WrdYEtH_8"></script>
<script>
    const MADONNA_HOUSE = [-1.286389, 36.81722];
    const locationCells = document.querySelectorAll('.location-cell');
    let currentPopup = null;

    function calculateDistance(lat1, lon1, lat2, lon2) {
        const R = 6371;
        const dLat = (lat2 - lat1) * Math.PI / 180;
        const dLon = (lon2 - lon1) * Math.PI / 180;
        const a =
            Math.sin(dLat/2) * Math.sin(dLat/2) +
            Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
            Math.sin(dLon/2) * Math.sin(dLon/2);
        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
        const distance = R * c;
        return distance.toFixed(2);
    }

    locationCells.forEach(cell => {
        const popup = document.createElement('div');
        popup.className = 'map-popup';
        popup.innerHTML = `
            <div class="map-container"></div>
            <div class="distance-info"></div>
        `;
        document.body.appendChild(popup);

        const mapContainer = popup.querySelector('.map-container');
        const distanceInfo = popup.querySelector('.distance-info');
        let map = null;

        cell.addEventListener('click', (e) => {
            e.stopPropagation();
            if (currentPopup) {
                currentPopup.style.display = 'none';
            }
            popup.style.display = 'block';
            currentPopup = popup;

            const donationCoords = cell.dataset.location.split(',').map(Number);
            const donationName = cell.closest('.table-row').querySelector('.country').textContent.trim();

            if (!map) {
                try {
                    map = new google.maps.Map(mapContainer, {
                        zoom: 10,
                        center: { lat: MADONNA_HOUSE[0], lng: MADONNA_HOUSE[1] }
                    });

                    const madonnaMarker = new google.maps.Marker({
                        position: { lat: MADONNA_HOUSE[0], lng: MADONNA_HOUSE[1] },
                        map: map,
                        title: 'FeedKenya Office'
                    });

                    const donationMarker = new google.maps.Marker({
                        position: { lat: donationCoords[0], lng: donationCoords[1] },
                        map: map,
                        title: donationName
                    });

                    const directionsService = new google.maps.DirectionsService();
                    const directionsRenderer = new google.maps.DirectionsRenderer({
                        map: map
                    });

                    const request = {
                        origin: { lat: MADONNA_HOUSE[0], lng: MADONNA_HOUSE[1] },
                        destination: { lat: donationCoords[0], lng: donationCoords[1] },
                        travelMode: 'DRIVING'
                    };

                    directionsService.route(request, (result, status) => {
                        if (status === 'OK') {
                            directionsRenderer.setDirections(result);
                            const distance = result.routes[0].legs[0].distance.text;
                            const duration = result.routes[0].legs[0].duration.text;
                            updateDistanceInfo(donationName, distance, duration, MADONNA_HOUSE, donationCoords);
                        } else {
                            handleRouteError(donationName, MADONNA_HOUSE, donationCoords);
                        }
                    });

                    const bounds = new google.maps.LatLngBounds();
                    bounds.extend({ lat: MADONNA_HOUSE[0], lng: MADONNA_HOUSE[1] });
                    bounds.extend({ lat: donationCoords[0], lng: donationCoords[1] });
                    map.fitBounds(bounds);
                } catch (error) {
                    console.error("Error initializing map:", error);
                    handleMapError(donationName, MADONNA_HOUSE, donationCoords);
                }
            }

            setTimeout(() => {
                if (map) {
                    google.maps.event.trigger(map, 'resize');
                    map.setCenter({ lat: (MADONNA_HOUSE[0] + donationCoords[0]) / 2, lng: (MADONNA_HOUSE[1] + donationCoords[1]) / 2 });
                }
            }, 100);
        });

        function updateDistanceInfo(name, distance, duration, origin, destination) {
            distanceInfo.innerHTML = `
                <strong>Donation Name:</strong> ${name}<br>
                <strong>Driving Distance:</strong> <span style="color: red;">${distance}</span><br>
                <strong>Estimated Time:</strong> ${duration}<br>
                <strong>FeedKenya Office:</strong> ${origin.join(', ')}<br>
                <strong>Donation Location:</strong> ${destination.join(', ')}
            `;
        }

        function handleRouteError(name, origin, destination) {
            const distance = calculateDistance(origin[0], origin[1], destination[0], destination[1]);
            distanceInfo.innerHTML = `
                <strong>Donation Name:</strong> ${name}<br>
                <strong>Straight-line Distance:</strong> <span style="color: red;">${distance} km</span><br>
                <strong>FeedKenya Office:</strong> ${origin.join(', ')}<br>
                <strong>Donation Location:</strong> ${destination.join(', ')}<br>
                <em>Note: Unable to calculate driving route. <strong>Showing straight-line distance instead.</em>
            `;
        }

        function handleMapError(name, origin, destination) {
            const distance = calculateDistance(origin[0], origin[1], destination[0], destination[1]);
            mapContainer.innerHTML = '<p>Unable to load map. Please check your internet connection and try again.</p>';
            distanceInfo.innerHTML = `
                <strong>Donation Name:</strong> ${name}<br>
                <strong>Straight-line Distance:</strong> ${distance} km<br>
                <strong>FeedKenya Office:</strong> ${origin.join(', ')}<br>
                <strong>Donation Location:</strong> ${destination.join(', ')}<br>
                <em>Note: Map unavailable. Showing straight-line distance instead.</em>
            `;
        }
    });

    document.addEventListener('click', (e) => {
        if (currentPopup && !currentPopup.contains(e.target) && !e.target.closest('.location-cell')) {
            currentPopup.style.display = 'none';
            currentPopup = null;
        }
    });
</script>
@endsection