@extends('admin.layouts.main')
@section('page-title', 'Donations')

@section('main-container')
<main class="content">
    <div class="container-fluid p-0">
        @if(session('status'))
        <h6 class="alert alert-success" role="alert">
            {{session('status')}}
        </h6>
        @endif
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <h4 class="text-secondary">Manage Donations <a href="{{ url('admin/adddonation') }}"
                                    class="btn btn-primary float-end">New Donation+</a> </h4>
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover my-0">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Name</th>
                                        <th class="d-none d-xl-table-cell">Image</th>
                                        <th class="d-none d-xl-table-cell">No/Plates</th>
                                        <th>Donor</th>
                                        <th class="d-none d-xl-table-cell">Contacts</th>
                                        <th class="d-none d-xl-table-cell">Location</th>
                                        <th class="d-none d-md-table-cell">Donated to</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($donations as $donation)
                                    <tr>
                                        <td>{{ $donation->id }}</td>
                                        <td>{{ $donation->name }}</td>
                                        <td class="d-none d-xl-table-cell">
                                            @if($donation->img)
                                            <img height="50" src="{{ asset('uploads/donations/'.$donation->img) }}">
                                            @else
                                            No Image
                                            @endif
                                        </td>
                                        <td class="d-none d-xl-table-cell">{{ $donation->qty }}</td>
                                        <td>{{ $donation->user['name'] ?? 'Telegram' }}</td>
                                        <td class="d-none d-xl-table-cell">{{ $donation->phone }}</td>
                                        <td class="d-none d-xl-table-cell location-cell"
                                            data-location="{{ $donation->location }}">
                                            View Location
                                            <span class="location-tooltip">{{ $donation->location }}</span>
                                        </td>
                                        <td class="d-none d-md-table-cell">
                                            {{ $donation->slum_area['name'] ?? 'Unknown' }}</td>
                                        <td>
                                            @if(strcasecmp($donation->status, "pending") == 0)
                                            <span class="badge bg-danger">{{ $donation->status }}</span>
                                            @elseif ($donation->status === "In Transit")
                                            <span class="badge bg-warning">{{ $donation->status }}</span>
                                            @else
                                            <span class="badge bg-success">{{ $donation->status }}</span>
                                            @endif
                                        </td>
                                        <td>
                                            <a class="btn btn-success"
                                                href="{{ url('/admin/updatedonation/'.$donation->id) }}">Update</a>
                                            <a class="btn btn-danger"
                                                href="{{ url('/admin/delete-donation/'.$donation->id) }}">Delete</a>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            <!-- Pagination Links -->
                            <div class="d-flex justify-content-center mt-3">
                                <nav aria-label="Page navigation">
                                    <ul class="pagination">
                                        {{ $donations->links('pagination::bootstrap-4') }}
                                    </ul>
                                </nav>
                            </div>
                            <style>
                                .pagination {
                                    display: flex;
                                    justify-content: center;
                                    list-style: none;
                                    padding-left: 0;
                                }

                                .pagination li {
                                    margin: 0 5px;
                                }

                                .pagination a,
                                .pagination span {
                                    text-decoration: none;
                                }

                                .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; /* Increased height to accommodate more information */
            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; /* Set a max height */
            overflow-y: auto; /* Make it scrollable if content exceeds max height */
        }
    </style>

    <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;

        // Haversine formula to calculate distance between two points on Earth
        function calculateDistance(lat1, lon1, lat2, lon2) {
            const R = 6371; // Radius of the Earth in km
            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('tr').querySelector('td:nth-child(2)').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);
                    }
                }

                // Ensure the map is properly sized and centered
                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} km</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>

</main>
@endsection