@extends('layouts.simple.master')

@section('main_content')
@include('operations.comercial.ofertas.navigation_explotacion')

<div class="container-fluid">

    <!-- Content Row -->
    <div class="row">
        <div class="col-12">
            <!-- Basic Card -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                </div>
                <div class="card-body">
                    <div id="competitorScatter" style="height: 500px;"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-12">
            <div class="card shadow mb-4">
                <div class="card-body">
                    <div id="spainMap" style="height: 600px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Color palette for competitors
    const colors = [
        '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de',
        '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#c23531',
        '#2f4554', '#61a0a8', '#d48265', '#749f83', '#ca8622',
        '#bda29a', '#6e7074', '#546570', '#c4ccd3', '#f05b72',
        '#ef5b9c'
    ];

    var scatterData = @json($scatterData);
    var provinceData = @json($provinceWinners);

    // Map competitor IDs to colors - defined BEFORE use
    function getCompetitorColor(competitorId) {
        const competitorIndex = scatterData.findIndex(item => 
            item.competitor_id === competitorId
        );
        return colors[competitorIndex % colors.length];
    }

    // Initialize Scatter Plot
    const scatterChart = echarts.init(document.getElementById('competitorScatter'));
    
    // Generate series data with unique colors
    var series = scatterData.map(function(item, index) {
        return {
            name: item.competitor_nombre,
            type: 'scatter',
            data: [[
                parseFloat(item.avg_discount),
                parseFloat(item.avg_importe_estimado), // Changed from avg_performance
                item.competitor_nombre,
                parseFloat(item.avg_rank)
            ]],
            symbolSize: function(data) {
                return Math.max(10, 30 / data[3]);
            },
            itemStyle: {
                color: colors[index % colors.length]
            },
            emphasis: {
                focus: 'series'
            }
        };
    });

    var option = {
        title: {
            text: 'Análisis de Competencia Real',
            left: 'center',
            top: 0,
            textStyle: {
                fontWeight: 'bold',
                fontSize: 16
            }
        },
        toolbox: {
            feature: {
                saveAsImage: { title: 'Guardar Imagen' },
                mySelectAll: {
                    show: true,
                    title: 'Seleccionar Todo',
                    icon: 'path://M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z',
                    onclick: function() {
                        chart.dispatchAction({
                            type: 'legendSelect',
                            name: 'all'
                        });
                        var names = scatterData.map(item => item.competitor_nombre);
                        names.forEach(name => {
                            chart.dispatchAction({
                                type: 'legendSelect',
                                name: name
                            });
                        });
                    }
                },
                myDeselect: {
                    show: true,
                    title: 'Deseleccionar Todo',
                    icon: 'path://M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z',
                    onclick: function() {
                        var names = scatterData.map(item => item.competitor_nombre);
                        names.forEach(name => {
                            chart.dispatchAction({
                                type: 'legendUnSelect',
                                name: name
                            });
                        });
                    }
                }
            },
            right: 20,
            top: 20
        },
        legend: {
            type: 'plain',
            orient: 'horizontal',
            top: 50,  // Increased top margin
            width: '90%',
            left: 'center',
            padding: [0, 20],
            textStyle: {
                fontSize: 12,
                padding: [0, 10] // Add padding between legend items
            },
            formatter: function(name) {
                return '  ' + name + '  '; // Add spaces around names
            },
            data: scatterData
                .map(item => item.competitor_nombre)
                .sort((a, b) => a.localeCompare(b))  // Sort alphabetically
        },
        grid: {
            top: 150, // Increased space between legend and chart
            containLabel: true
        },
        tooltip: {
            formatter: function(params) {
                return params.data[2] + '<br/>' +
                       'Importe: ' + params.data[1].toFixed(2) + ' €<br/>' +
                       'Descuento: ' + params.data[0].toFixed(2) + '%';
            }
        },
        xAxis: {
            name: 'Descuento Medio (%)',
            type: 'value'
        },
        yAxis: {
            name: 'Importe Estimado Medio (€)',
            nameLocation: 'middle',
            nameGap: 50,
            nameRotate: 90,
            type: 'value'
        },
        series: series
    };

    scatterChart.setOption(option);

    // Initialize Spain Map
    const mapChart = echarts.init(document.getElementById('spainMap'));
    mapChart.showLoading();

    $.get('/assets/maps/spain-provinces.json', function(mapJson) {
        mapChart.hideLoading();
        echarts.registerMap('Spain', mapJson);

        const mapOption = {
            title: {
                text: 'Competidor Dominante por Provincia',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: function(params) {
                    var data = provinceData.find(p => p.provincia === params.name);
                    if (data) {
                        return `${params.name}<br/>
                                Ganador: ${data.competitor_nombre}<br/>
                                Victorias: ${data.wins}`;
                    }
                    return params.name;
                }
            },
            visualMap: {
                show: false,
                min: 0,
                max: provinceData.length,
                inRange: {
                    color: ['#fff', '#ee6666']
                }
            },
            series: [{
                type: 'map',
                map: 'Spain',
                roam: true,
                emphasis: {
                    label: {
                        show: true
                    }
                },
                data: provinceData.map(function(item) {
                    return {
                        name: item.provincia,
                        value: item.competitor_id,
                        itemStyle: {
                            color: getCompetitorColor(item.competitor_id)
                        }
                    };
                })
            }]
        };

        mapChart.setOption(mapOption);
    });
});
</script>
@endpush

@endsection