@extends('layouts.frontend')

@section('content')
<div id="map" class="col-xs-12"></div>

<!-- Toggle Button (shown when panel is closed) -->
<button id="togglePanelBtn" style="position: absolute; top: 10px; left: 10px; z-index: 999; display: none; background: white; border: none; padding: 10px 15px; border-radius: 5px; box-shadow: 0 2px 6px rgba(0,0,0,0.3); cursor: pointer; font-size: 16px;">
    ☰ Show Controls
</button>

<!-- Control Panel -->
<div id="controlPanel" class="container" style="position: absolute; top: 10px; left: 10px; z-index: 1000; background: white; padding: 15px; border-radius: 5px; box-shadow: 0 2px 6px rgba(0,0,0,0.3); max-width: 350px;">
    <button id="closePanelBtn" style="position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 20px; cursor: pointer; color: #999; line-height: 1; padding: 0; width: 25px; height: 25px;" title="Close panel">
        ×
    </button>
    <div class="row">
        <div class="col-xs-12">
            <h4 style="margin-top: 0; padding-right: 30px;">Historical Mushroom Data</h4>
            <form id="dateForm" method="GET" action="{{ route('historicalMap') }}">
                <div class="form-group">
                    <label for="start_date">Start Date:</label>
                    <input type="date" class="form-control" id="start_date" name="start_date" value="{{ $start_date }}">
                </div>
                <div class="form-group">
                    <label for="end_date">End Date:</label>
                    <input type="date" class="form-control" id="end_date" name="end_date" value="{{ $end_date }}">
                </div>
                <button type="submit" class="btn btn-primary btn-sm">Update Map</button>
            </form>
            <div id="loading" style="display:none; margin-top: 10px;">
                <p>Loading data...</p>
            </div>
            <div id="stats" style="margin-top: 15px; display:none;">
                <h5>Statistics</h5>
                <p><strong>Period:</strong> <span id="period-info"></span></p>
                <p><strong>Total Stations:</strong> <span id="total-stations"></span></p>
            </div>
        </div>
    </div>
</div>

<div hidden id="map-data">
    <input type="number" id="lat_map" hidden value="{{ $map['lat'] }}">
    <input type="number" id="lon_map" hidden value="{{ $map['lon'] }}">
    <input type="number" id="zoom_map" hidden value="{{ $map['zoom'] }}">
    <input type="text" id="start_date_val" hidden value="{{ $start_date }}">
    <input type="text" id="end_date_val" hidden value="{{ $end_date }}">
</div>

<script>
    var map;
    var markers = [];
    var infowindow = null;

    function initMap() {
        var lat_map = parseFloat($("#lat_map").val());
        var lon_map = parseFloat($('#lon_map').val());
        var zoom_map = parseInt($('#zoom_map').val());

        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: lat_map, lng: lon_map},
            zoom: zoom_map,
            scrollwheel: true,
            navigationControl: true,
            mapTypeControl: true,
            scaleControl: true,
            draggable: true,
        });

        loadHistoricalData();
    }

    function loadHistoricalData() {
        var startDate = $('#start_date_val').val();
        var endDate = $('#end_date_val').val();

        $('#loading').show();
        $('#stats').hide();
      
        $.ajax({
            url: 'api/historicalStations',
            method: 'GET',
            data: {
                start_date: startDate,
                end_date: endDate
            },
            success: function(response) {
                $('#loading').hide();

                if (response.status === 'success') {
                    displayStations(response);
                    updateStats(response);
                } else {
                    alert('Error loading data: ' + response.error);
                }
            },
            error: function(xhr, status, error) {
                $('#loading').hide();
                console.error('Error:', error);
                alert('Failed to load historical data');
            }
        });
    }

    function displayStations(data) {
        // Clear existing markers
        markers.forEach(function(marker) {
            marker.setMap(null);
        });
        markers = [];

        // Add new markers
        data.stations.forEach(function(station) {
            var position = {
                lat: parseFloat(station.latitude),
                lng: parseFloat(station.longitude)
            };

            // Determine marker color based on total favorable days
            var icon = getMarkerIcon(station.total_favorable_days, data.period.days);

            var marker = new google.maps.Marker({
                position: position,
                map: map,
                icon: icon,
                title: station.name
            });

            google.maps.event.addListener(marker, 'click', function() {
                if (infowindow) {
                    infowindow.close();
                }
                showStationInfo(marker, station);
            });

            markers.push(marker);
        });
    }

    function getMarkerIcon(favorableDays, totalDays) {
        var percentage = (favorableDays / totalDays) * 100;

        // Determine color based on percentage of favorable days
        var color;
        if (percentage >= 10) {
            color = 'green'; // Excellent - 50%+ favorable
        } else if (percentage >= 5) {
            color = 'blue'; // Good - 30-50% favorable
        } else if (percentage > 0) {
            color = 'yellow'; // Fair - 15-30% favorable
        } else {
            color = 'red'; // Poor - <15% favorable
        }

        return {
            url: 'http://195.201.120.141/porcini/public/img/' + color + '-dot.png',
            scaledSize: new google.maps.Size(32, 32)
        };
    }

    function showStationInfo(marker, station) {
        var percentage = ((station.total_favorable_days / parseInt($('#end_date_val').val().split('-')[2])) * 100).toFixed(1);

        var content = '<div style="padding: 10px;">' +
            '<h4 style="margin-top: 0;"><b>' + station.name + '</b></h4>' +
            '<p><strong>Region:</strong> ' + (station.region_name || station.region) + '</p>' +
            '<p><strong>Altitude:</strong> ' + station.altitude + ' m s.l.m.</p>' +
            '<p><strong>Coordinates:</strong> ' + parseFloat(station.latitude).toFixed(4) + ', ' + parseFloat(station.longitude).toFixed(4) + '</p>' +
            '<hr style="margin: 10px 0;">' +
            '<h5><strong>Historical Data</strong></h5>' +
            '<p><strong style="color: green;">Green Days:</strong> ' + station.green_days + '</p>' +
            '<p><strong style="color: blue;">Blue Days:</strong> ' + station.blue_days + '</p>' +
            '<p><strong>Total Favorable Days:</strong> ' + station.total_favorable_days + ' / ' + station.total_days_tracked + '</p>' +
            '<p><strong>Success Rate:</strong> ' + ((station.total_favorable_days / station.total_days_tracked) * 100).toFixed(1) + '%</p>' +
            '</div>';

        infowindow = new google.maps.InfoWindow({
            content: content
        });

        infowindow.open(map, marker);
    }

    function updateStats(data) {
        $('#period-info').text(data.period.start_date + ' to ' + data.period.end_date + ' (' + data.period.days + ' days)');
        $('#total-stations').text(data.total_stations);
        $('#stats').show();
    }

    // Panel toggle functionality
    $(document).ready(function() {
        $('#closePanelBtn').click(function() {
            $('#controlPanel').hide();
            $('#togglePanelBtn').show();
        });

        $('#togglePanelBtn').click(function() {
            $('#controlPanel').show();
            $('#togglePanelBtn').hide();
        });

        // Optional: Close panel when clicking outside of it
        $(document).click(function(event) {
            if (!$(event.target).closest('#controlPanel, #togglePanelBtn').length) {
                // Uncomment the lines below if you want to auto-close on outside click
                // $('#controlPanel').hide();
                // $('#togglePanelBtn').show();
            }
        });
    });
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAR-Lt9qXh-CbofXq8iURRNwE-aRDh9QUw&callback=initMap" async defer></script>

@endsection

@section('footer')
    @include('footer')
@endsection