@extends('admin.layout.master')

@section('content')
<div class="content-body">
    <div class="card mb-2">
        <div class="card-header">
            <h4 class="card-title mb-0">{{ __('admin.heat_maps_title') }}</h4>
            <small class="text-muted">{{ $report['range_label'] }} · {{ number_format($report['total_points']) }} {{ __('admin.heat_maps_points') }}</small>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('admin.heat_maps.index') }}" class="row align-items-end">
                <div class="col-md-2 col-12 mb-1">
                    <label>{{ __('admin.heat_maps_mode') }}</label>
                    <select name="mode" class="form-control">
                        @foreach ($report['mode_options'] as $mode)
                            <option value="{{ $mode }}" @selected($report['mode'] === $mode)>
                                {{ __('admin.heat_maps_mode_' . $mode) }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2 col-12 mb-1">
                    <label>{{ __('admin.reports_period') }}</label>
                    <select name="period" class="form-control">
                        @foreach ($report['period_options'] as $option)
                            <option value="{{ $option }}" @selected($report['period'] === $option)>
                                {{ __('admin.reports_period_' . $option) }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2 col-12 mb-1">
                    <label>{{ __('admin.from') }}</label>
                    <input type="date" name="from" value="{{ request('from') }}" class="form-control">
                </div>
                <div class="col-md-2 col-12 mb-1">
                    <label>{{ __('admin.to') }}</label>
                    <input type="date" name="to" value="{{ request('to') }}" class="form-control">
                </div>
                <div class="col-md-2 col-12 mb-1">
                    <label>{{ __('admin.reports_sale_type') }}</label>
                    <select name="sale_type" class="form-control">
                        @foreach ($report['filter_options']['sale_types'] as $type)
                            <option value="{{ $type }}" @selected(($report['filters']['sale_type'] ?? 'all') === $type)>
                                {{ __('admin.reports_sale_type_' . $type) }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2 col-12 mb-1">
                    <label>{{ __('admin.reports_category') }}</label>
                    <select name="category_id" class="form-control">
                        <option value="">{{ __('admin.all') }}</option>
                        @foreach ($report['filter_options']['categories'] as $category)
                            <option value="{{ $category->id }}" @selected((int) ($report['filters']['category_id'] ?? 0) === (int) $category->id)>
                                {{ $category->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2 col-12 mb-1">
                    <label>{{ __('admin.reports_city') }}</label>
                    <select name="city_id" class="form-control">
                        <option value="">{{ __('admin.all') }}</option>
                        @foreach ($report['filter_options']['cities'] as $city)
                            <option value="{{ $city->id }}" @selected((int) ($report['filters']['city_id'] ?? 0) === (int) $city->id)>
                                {{ $city->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-12 mb-1">
                    <button type="submit" class="btn btn-primary">{{ __('admin.filter') }}</button>
                    <a href="{{ route('admin.heat_maps.index') }}" class="btn btn-outline-secondary">{{ __('admin.reset') }}</a>
                </div>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8 mb-2">
            <div class="card">
                <div class="card-body p-0">
                    <div id="heat-map" style="height:520px;width:100%"></div>
                </div>
            </div>
            <p class="text-muted small mt-50 mb-0">{{ __('admin.heat_maps_legend') }}</p>
        </div>
        <div class="col-lg-4 mb-2">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">{{ __('admin.heat_maps_city_breakdown') }}</h4>
                </div>
                <div class="card-body table-responsive">
                    <table class="table table-sm mb-0">
                        <thead>
                        <tr>
                            <th>{{ __('admin.reports_city') }}</th>
                            <th>{{ __('admin.heat_maps_points') }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse ($report['city_breakdown'] as $row)
                            <tr>
                                <td>{{ $row['city'] }}</td>
                                <td>{{ number_format($row['count']) }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="2" class="text-muted">{{ __('admin.no_data') }}</td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
    @php
        $heatMapPayload = [
            'points' => $report['points'],
            'center' => $report['center'],
            'gradient' => array_values($report['gradient']),
            'nearbyLabel' => __('admin.heat_maps_nearby'),
        ];
    @endphp
    <x-vendor.google-maps-script libraries="visualization" callback="initRevalueHeatMap" />
    <script>
        window.__revalueHeatMap = @json($heatMapPayload);

        window.initRevalueHeatMap = function () {
            var cfg = window.__revalueHeatMap || { points: [], center: { lat: 24.7136, lng: 46.6753 }, gradient: [], nearbyLabel: '' };
            var map = new google.maps.Map(document.getElementById('heat-map'), {
                zoom: cfg.points.length ? 6 : 5,
                center: cfg.center,
                mapTypeId: 'roadmap',
                gestureHandling: 'greedy'
            });

            var heatData = (cfg.points || []).map(function (p) {
                return {
                    location: new google.maps.LatLng(p.lat, p.lng),
                    weight: p.weight || 1
                };
            });

            var heatmap = new google.maps.visualization.HeatmapLayer({
                data: heatData,
                map: map,
                radius: 28,
                opacity: 0.75
            });

            if (cfg.gradient && cfg.gradient.length) {
                heatmap.set('gradient', ['rgba(0, 255, 0, 0)'].concat(cfg.gradient));
            }

            var info = new google.maps.InfoWindow();
            map.addListener('click', function (event) {
                if (!event.latLng || !cfg.points.length) {
                    return;
                }
                var lat = event.latLng.lat();
                var lng = event.latLng.lng();
                var nearby = cfg.points.filter(function (p) {
                    return Math.abs(p.lat - lat) < 0.35 && Math.abs(p.lng - lng) < 0.35;
                });
                var sample = nearby.slice(0, 5).map(function (p) {
                    return '<li>' + (p.label || '') + (p.city ? ' — ' + p.city : '') + '</li>';
                }).join('');
                info.setContent(
                    '<div style="max-width:240px"><strong>' + nearby.length + '</strong> ' +
                    (cfg.nearbyLabel || '') +
                    (sample ? '<ul style="padding-left:16px;margin:6px 0 0">' + sample + '</ul>' : '') +
                    '</div>'
                );
                info.setPosition(event.latLng);
                info.open(map);
            });
        };
    </script>
@endsection