@extends('layouts.simple.master')

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

<div class="container-fluid">
    <div class="card mb-4">
        <div class="card-body bg-white">
            <style>
                .required::after {
                    content: ' *';
                    color: red;
                }
            </style>
            <form id="filterForm" method="GET" class="row align-items-end g-3">
                <div class="col-md-1">
                    <label class="form-label required">Provincia</label>
                    <select class="form-select" name="provincia" required>
                        <option value="" disabled {{ !request('provincia') ? 'selected' : '' }}>Seleccionar</option>
                        @foreach($provincias as $provincia)
                            <option value="{{ $provincia }}" {{ request('provincia') == $provincia ? 'selected' : '' }}>
                                {{ $provincia }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-1">
                    <label class="form-label required">Línea</label>
                    <select class="form-select" name="linea_negocio" required>
                        <option value="" disabled {{ !request('linea_negocio') ? 'selected' : '' }}>Seleccionar</option>
                        @foreach($lineasNegocio as $linea)
                            <option value="{{ $linea }}" {{ request('linea_negocio') == $linea ? 'selected' : '' }}>
                                {{ $linea }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-1">
                    <label class="form-label required">Actividad</label>
                    <select class="form-select" name="actividad_cliente" required>
                        <option value="" disabled {{ !request('actividad_cliente') ? 'selected' : '' }}>Seleccionar</option>
                        @foreach($actividadesCliente as $actividad)
                            <option value="{{ $actividad }}" {{ request('actividad_cliente') == $actividad ? 'selected' : '' }}>
                                {{ $actividad }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-1">
                    <label class="form-label required">Importe</label>
                    <input type="number" class="form-control" name="importe_estimado" min="0" required 
                           placeholder="Importe estimado €" value="{{ request('importe_estimado') }}">
                </div>

                <div class="col-md-1">
                    <label class="form-label required">Meses</label>
                    <input type="number" class="form-control" name="duracion_meses" min="1" required 
                           placeholder="Duración" value="{{ request('duracion_meses') }}">
                </div>

                <div class="col-md-1">
                    <label class="form-label required">P.Econ</label>
                    <select class="form-select" name="peso_economica" required>
                        <option value="" disabled {{ !request('peso_economica') ? 'selected' : '' }}>0-100</option>
                        @for($i = 0; $i <= 100; $i++)
                            <option value="{{ $i }}" {{ request('peso_economica') == $i ? 'selected' : '' }}>{{ $i }}</option>
                        @endfor
                    </select>
                </div>

                <div class="col-md-1">
                    <label class="form-label required">P.Tec</label>
                    <select class="form-select" name="peso_tecnica" required>
                        <option value="" disabled {{ !request('peso_tecnica') ? 'selected' : '' }}>0-100</option>
                        @for($i = 0; $i <= 100; $i++)
                            <option value="{{ $i }}" {{ request('peso_tecnica') == $i ? 'selected' : '' }}>{{ $i }}</option>
                        @endfor
                    </select>
                </div>

                <div class="col-md-1 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary h-75">
                        <i class="bi bi-filter"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>

    @if(isset($descuentoMedioRecomendado))
    <div class="card mb-4">
        <div class="card-body">
            <h5 class="card-title">Descuento Medio Recomendado</h5>
            <p class="card-text">{{ number_format($descuentoMedioRecomendado, 2) }}%</p>
        </div>
    </div>
    @endif

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <span>Legend:</span>
            @foreach($competitors as $competitor)
                <span style="color: black;">
                    <i class="bi bi-circle-fill" style="color: {{ $competitor->color }};"></i> {{ $competitor->competitor_nombre }}
                </span>
            @endforeach
        </div>
        <div>
            <i id="download-chart" class="bi bi-download" style="cursor: pointer; margin-right: 10px;"></i>
            <i id="select-all" class="bi bi-check-all" style="cursor: pointer; margin-right: 10px;"></i>
            <i id="deselect-all" class="bi bi-x-circle" style="cursor: pointer;"></i>
        </div>
    </div>

    <div id="scatter-chart" style="width: 100%; height: 400px;"></div>

    @if(isset($competitors))
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Posibles Competidores</h5>
            <div class="table-responsive">
                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Nombre del Competidor</th>
                            <th>Probabilidad de Presentarse</th>
                            <th>Descuento Probable</th>
                            <th>Posición Media</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($competitors as $competitor)
                            <tr>
                                <td>{{ $competitor->competitor_nombre }}</td>
                                <td>{{ number_format($competitor->probabilidad_presentarse * 100, 2) }}%</td>
                                <td>{{ number_format($competitor->descuento_probable, 2) }}%</td>
                                <td>{{ number_format($competitor->posicion_media, 2) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endif
</div>

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
    var chartDom = document.getElementById('scatter-chart');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        xAxis: {
            name: 'Descuento Medio'
        },
        yAxis: {
            name: 'Rank Licitación'
        },
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                const value = params.value;
                return 'Competidor: ' + (value[2] !== undefined ? value[2] : 'N/A') + '<br>' +
                       'Posición Media: ' + (value[1] !== undefined ? value[1] : 'N/A') + '<br>' +
                       'Descuento Medio: ' + (value[0] !== undefined ? value[0] : 'N/A');
            }
        },
        legend: {
            data: [
                @foreach($competitors as $competitor)
                    {
                        name: '{{ $competitor->competitor_nombre }}',
                        icon: 'circle'
                    },
                @endforeach
            ],
            selectedMode: 'multiple'
        },
        series: [
            {
                symbolSize: 20,
                data: [
                    @foreach($competitors as $competitor)
                        {
                            value: [{{ $competitor->descuento_probable }}, {{ $competitor->posicion_media }}, '{{ $competitor->competitor_nombre }}'],
                            name: '{{ $competitor->competitor_nombre }}',
                            itemStyle: {
                                color: '{{ $competitor->color }}'
                            }
                        },
                    @endforeach
                ],
                type: 'scatter'
            }
        ]
    };

    option && myChart.setOption(option);

    // Add event listeners for the icons
    document.getElementById('download-chart').addEventListener('click', function () {
        myChart.saveAsImage();
    });

    document.getElementById('select-all').addEventListener('click', function () {
        myChart.dispatchAction({
            type: 'legendSelect',
            name: 'all'
        });
    });

    document.getElementById('deselect-all').addEventListener('click', function () {
        myChart.dispatchAction({
            type: 'legendUnSelect',
            name: 'all'
        });
    });
</script>
@endsection