@extends('layouts.app')

@section('content')
<div style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;">
    <h1 style="color: #333; font-size: 28px; font-weight: 500;">Admin Dashboard</h1>
    <form action="{{ route('admin.logout') }}" method="POST" style="display: inline;">
        @csrf
        <button type="submit" class="btn btn-danger" style="background: #f44336;">
            <span class="material-icons" style="font-size: 18px; vertical-align: middle;">logout</span>
            Logout
        </button>
    </form>
</div>

@if(session('success'))
    <div style="background: #e8f5e9; color: #2e7d32; padding: 15px; border-radius: 4px; margin-bottom: 20px;">
        {{ session('success') }}
    </div>
@endif

<!-- Statistics Cards -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px;">
    <div class="card" style="background: #1976d2; color: white; box-shadow: 0 4px 6px rgba(25, 118, 210, 0.3);">
        <div class="card-body">
            <div style="display: flex; align-items: center; margin-bottom: 10px;">
                <span class="material-icons" style="font-size: 36px; margin-right: 15px; opacity: 0.9;">description</span>
                <div>
                    <div style="font-size: 14px; opacity: 0.9;">Total Invoices</div>
                    <div style="font-size: 32px; font-weight: 600;">{{ $stats['total_invoices'] }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="card" style="background: #ff9800; color: white; box-shadow: 0 4px 6px rgba(255, 152, 0, 0.3);">
        <div class="card-body">
            <div style="display: flex; align-items: center; margin-bottom: 10px;">
                <span class="material-icons" style="font-size: 36px; margin-right: 15px; opacity: 0.9;">public</span>
                <div>
                    <div style="font-size: 14px; opacity: 0.9;">Unique IPs</div>
                    <div style="font-size: 32px; font-weight: 600;">{{ $stats['unique_ips'] }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="card" style="background: #f44336; color: white; box-shadow: 0 4px 6px rgba(244, 67, 54, 0.3);">
        <div class="card-body">
            <div style="display: flex; align-items: center; margin-bottom: 10px;">
                <span class="material-icons" style="font-size: 36px; margin-right: 15px; opacity: 0.9;">location_on</span>
                <div>
                    <div style="font-size: 14px; opacity: 0.9;">Countries</div>
                    <div style="font-size: 32px; font-weight: 600;">{{ $stats['unique_countries'] }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="card" style="background: #4caf50; color: white; box-shadow: 0 4px 6px rgba(76, 175, 80, 0.3);">
        <div class="card-body">
            <div style="display: flex; align-items: center; margin-bottom: 10px;">
                <span class="material-icons" style="font-size: 36px; margin-right: 15px; opacity: 0.9;">attach_money</span>
                <div>
                    <div style="font-size: 14px; opacity: 0.9;">Total Revenue</div>
                    <div style="font-size: 32px; font-weight: 600;">${{ number_format($stats['total_revenue'], 2) }}</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Invoice Locations Map -->
<div class="card" style="margin-bottom: 30px;">
    <div class="card-body">
        <h2 style="font-size: 20px; font-weight: 500; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between;">
            <span><span class="material-icons" style="vertical-align: middle; margin-right: 8px;">map</span>Invoice Creation Heatmap</span>
            <span style="font-size: 14px; font-weight: 400; color: #666;">{{ $locations->count() }} locations tracked</span>
        </h2>
        
        @if($locations->count() > 0)
            <div id="map" style="height: 500px; border-radius: 8px; overflow: hidden;"></div>
            
            <div style="margin-top: 15px; padding: 15px; background: #f5f7fa; border-radius: 4px;">
                <div style="display: flex; gap: 30px; flex-wrap: wrap; align-items: center; justify-content: center;">
                    <div style="display: flex; align-items: center; gap: 8px;">
                        <div style="width: 20px; height: 20px; background: linear-gradient(to right, blue, cyan, lime, yellow, red); border-radius: 3px;"></div>
                        <span style="font-size: 13px; color: #666;">Heatmap Intensity: Low → High</span>
                    </div>
                    <div style="display: flex; align-items: center; gap: 8px;">
                        <span class="material-icons" style="color: #1976d2; font-size: 20px;">location_on</span>
                        <span style="font-size: 13px; color: #666;">Click markers for invoice details</span>
                    </div>
                </div>
            </div>
        @else
            <div style="text-align: center; padding: 60px 20px; color: #999;">
                <span class="material-icons" style="font-size: 64px; opacity: 0.3;">location_off</span>
                <p style="margin-top: 15px; font-size: 16px;">No location data available yet</p>
                <p style="font-size: 13px; margin-top: 5px;">Locations will appear here as invoices are created</p>
            </div>
        @endif
    </div>
</div>

<!-- Invoices Table with Metadata -->
<div class="card">
    <div class="card-body">
        <h2 style="font-size: 20px; font-weight: 500; margin-bottom: 20px;">Invoice Metadata</h2>
        
        <div style="overflow-x: auto;">
            <table class="table">
                <thead>
                    <tr>
                        <th>Invoice #</th>
                        <th>Customer</th>
                        <th>Amount</th>
                        <th>IP Address</th>
                        <th>Location</th>
                        <th>Device</th>
                        <th>Browser</th>
                        <th>Created</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($invoices as $invoice)
                        <tr>
                            <td style="font-weight: 600;">{{ $invoice->invoice_number }}</td>
                            <td>
                                <div>{{ $invoice->customer_name }}</div>
                                @if($invoice->customer_email)
                                    <div style="font-size: 12px; color: #666;">{{ $invoice->customer_email }}</div>
                                @endif
                            </td>
                            <td style="font-weight: 600;">${{ number_format($invoice->total_amount, 2) }}</td>
                            <td>
                                @if($invoice->ip_address)
                                    <span class="material-icons" style="font-size: 14px; vertical-align: middle; color: #1976d2;">language</span>
                                    {{ $invoice->ip_address }}
                                @else
                                    <span style="color: #999;">-</span>
                                @endif
                            </td>
                            <td>
                                @if($invoice->city || $invoice->country)
                                    <div style="display: flex; align-items: center;">
                                        <span class="material-icons" style="font-size: 14px; margin-right: 4px; color: #f44336;">location_on</span>
                                        <div>
                                            @if($invoice->city){{ $invoice->city }}, @endif
                                            {{ $invoice->country ?? '-' }}
                                        </div>
                                    </div>
                                    @if($invoice->browser_latitude && $invoice->browser_longitude)
                                        <div style="font-size: 11px; color: #666; margin-top: 2px;">
                                            <span style="background: #4caf50; color: white; padding: 1px 4px; border-radius: 3px; font-size: 9px; font-weight: 600; margin-right: 3px;">GPS</span>
                                            {{ number_format($invoice->browser_latitude, 4) }}, {{ number_format($invoice->browser_longitude, 4) }}
                                            @if($invoice->location_accuracy)
                                                <span style="color: #999;">(±{{ $invoice->location_accuracy }}m)</span>
                                            @endif
                                        </div>
                                    @elseif($invoice->latitude && $invoice->longitude)
                                        <div style="font-size: 11px; color: #666; margin-top: 2px;">
                                            <span style="background: #ff9800; color: white; padding: 1px 4px; border-radius: 3px; font-size: 9px; font-weight: 600; margin-right: 3px;">IP</span>
                                            {{ number_format($invoice->latitude, 4) }}, {{ number_format($invoice->longitude, 4) }}
                                        </div>
                                    @endif
                                @else
                                    <span style="color: #999;">-</span>
                                @endif
                            </td>
                            <td>
                                @if($invoice->device_type)
                                    <span class="material-icons" style="font-size: 14px; vertical-align: middle; color: #4caf50;">{{ $invoice->device_type === 'mobile' ? 'smartphone' : ($invoice->device_type === 'tablet' ? 'tablet' : 'computer') }}</span>
                                    {{ ucfirst($invoice->device_type) }}
                                @else
                                    <span style="color: #999;">-</span>
                                @endif
                            </td>
                            <td>
                                @if($invoice->browser)
                                    <div>{{ $invoice->browser }}</div>
                                    @if($invoice->platform)
                                        <div style="font-size: 11px; color: #666;">{{ $invoice->platform }}</div>
                                    @endif
                                @else
                                    <span style="color: #999;">-</span>
                                @endif
                            </td>
                            <td style="font-size: 13px;">{{ $invoice->created_at->format('M d, Y H:i') }}</td>
                            <td>
                                <a href="{{ route('invoices.show', $invoice) }}" class="btn btn-sm btn-info">View</a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" style="text-align: center; color: #999; padding: 40px;">
                                No invoices found
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($invoices->hasPages())
            <div style="margin-top: 20px;">
                {{ $invoices->links() }}
            </div>
        @endif
    </div>
</div>
@endsection

@section('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
    .leaflet-popup-content-wrapper {
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .leaflet-popup-content {
        margin: 15px;
        font-size: 13px;
        line-height: 1.6;
    }
    .popup-title {
        font-weight: bold;
        font-size: 14px;
        color: #1976d2;
        margin-bottom: 8px;
    }
    .popup-detail {
        margin: 4px 0;
        color: #333;
    }
    .popup-label {
        font-weight: 500;
        color: #666;
    }
</style>
@endsection

@section('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>
<script>
    @if($locations->count() > 0)
    // Initialize map
    const map = L.map('map').setView([20, 0], 2);
    
    // Add tile layer (OpenStreetMap - free)
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        maxZoom: 18,
    }).addTo(map);
    
    // Location data from backend
    const locations = {!! json_encode($locations) !!};
    
    // Prepare heatmap data and markers
    const heatmapData = [];
    const markers = [];
    
    locations.forEach(location => {
        // Add to heatmap data [lat, lng, intensity]
        heatmapData.push([location.lat, location.lng, 0.8]);
        
        // Create custom icon
        const customIcon = L.divIcon({
            className: 'custom-marker',
            html: '<div style="background: #1976d2; width: 12px; height: 12px; border-radius: 50%; border: 2px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.3);"></div>',
            iconSize: [12, 12],
            iconAnchor: [6, 6]
        });
        
        // Create marker with popup
        const marker = L.marker([location.lat, location.lng], { icon: customIcon })
            .bindPopup(`
                <div class="popup-title">Invoice #${location.invoice}</div>
                <div class="popup-detail"><span class="popup-label">Customer:</span> ${location.customer}</div>
                <div class="popup-detail"><span class="popup-label">Location:</span> ${location.city}, ${location.country}</div>
                <div class="popup-detail"><span class="popup-label">Amount:</span> $${location.amount}</div>
                <div class="popup-detail"><span class="popup-label">Date:</span> ${location.date}</div>
                <div class="popup-detail"><span class="popup-label">Coordinates:</span> ${location.lat.toFixed(4)}, ${location.lng.toFixed(4)}</div>
                <div class="popup-detail"><span class="popup-label">Location Method:</span> <span style="color: ${location.location_type === 'GPS' ? '#4caf50' : '#ff9800'}; font-weight: 600;">${location.location_type}</span>${location.accuracy ? ` (±${location.accuracy}m)` : ''}</div>
            `);
        
        markers.push(marker);
    });
    
    // Add heatmap layer
    const heatLayer = L.heatLayer(heatmapData, {
        radius: 25,
        blur: 35,
        maxZoom: 10,
        max: 1.0,
        gradient: {
            0.0: 'blue',
            0.2: 'cyan',
            0.4: 'lime',
            0.6: 'yellow',
            0.8: 'orange',
            1.0: 'red'
        }
    }).addTo(map);
    
    // Add all markers to map
    const markerGroup = L.featureGroup(markers).addTo(map);
    
    // Fit map to show all markers
    if (markers.length > 0) {
        map.fitBounds(markerGroup.getBounds().pad(0.1));
    }
    
    // Add layer control
    const overlays = {
        'Heatmap': heatLayer,
        'Markers': markerGroup
    };
    L.control.layers(null, overlays, { collapsed: false }).addTo(map);
    
    // Add legend
    const legend = L.control({ position: 'bottomright' });
    legend.onAdd = function(map) {
        const div = L.DomUtil.create('div', 'info legend');
        div.style.padding = '10px';
        div.style.background = 'white';
        div.style.borderRadius = '4px';
        div.style.boxShadow = '0 2px 4px rgba(0,0,0,0.2)';
        div.innerHTML = `
            <div style="font-weight: bold; margin-bottom: 5px; font-size: 12px;">Invoice Locations</div>
            <div style="font-size: 11px; color: #666;">${locations.length} total locations</div>
        `;
        return div;
    };
    legend.addTo(map);
    @endif
</script>
@endsection