@extends('layouts.simple.master')

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

<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card p-3">
                <form method="GET" action="{{ route('operations.explotacion.competidores.individual') }}">
                    <div class="d-flex align-items-center" style="gap: 15px;">
                        <div>
                            <label for="competitor_name">Nombre del Competidor</label>
                        </div>
                        <div>
                            <input type="text" id="competitor_name" name="competitor_name" class="form-control" value="{{ old('competitor_name', $competitorName) }}" autocomplete="off" style="width: 250px;">
                        </div>
                        <div>
                            <button type="submit" class="btn btn-primary">Filtrar</button>
                        </div>
                        @if($competitor)
                        <div>
                            <h5 class="mb-0">{{ $competitor->nombre }}</h5>
                        </div>
                        @endif
                    </div>
                </form>
            </div>
        </div>
    </div>

    @if($competitor)
    <div class="row mt-4">
        <!-- First Card: Ranking Competidor -->
        <div class="col-md-2">
            <div class="card text-center p-3">
                <h5>Ranking Competidor</h5>
                <p class="display-4" style="font-size: 1.5rem;">{{ $competitorRanking->competitor_rank ?? 'N/A' }}</p>
            </div>
        </div>
        <!-- Second Card: Percentage of Won Offers -->
        <div class="col-md-2">
            <div class="card text-center p-3">
                <h5>Porcentaje de Ganados</h5>
                <p class="display-4" style="font-size: 1.5rem;">{{ $percentageWon !== null ? number_format($percentageWon, 2, ',', '.') . '%' : 'N/A' }}</p>
            </div>
        </div>
        <!-- Third Card: Percentage of Exclusions -->
        <div class="col-md-2">
            <div class="card text-center p-3">
                <h5>% Exclusion</h5>
                <p class="display-4" style="font-size: 1.5rem;">{{ $percentageExcluded !== null ? number_format($percentageExcluded, 2, ',', '.') . '%' : 'N/A' }}</p>
            </div>
        </div>
        <!-- Fourth Card: Percentage of Second Place Finishes -->
        <div class="col-md-2">
            <div class="card text-center p-3">
                <h5>Queda 2º</h5>
                <p class="display-4" style="font-size: 1.5rem;">{{ $percentageSecond !== null ? number_format($percentageSecond, 2, ',', '.') . '%' : 'N/A' }}</p>
            </div>
        </div>
        <!-- Fifth Card: Average Discount -->
        <div class="col-md-2">
            <div class="card text-center p-3">
                <h5>Descuento Medio</h5>
                <p class="display-4" style="font-size: 1.5rem;">{{ $averageDiscount !== null ? number_format($averageDiscount, 2, ',', '.') . '%' : 'N/A' }}</p>
            </div>
        </div>
        <!-- Sixth Card: Average Estimated Business -->
        <div class="col-md-2">
            <div class="card text-center p-3">
                <h5>Media Negocio Aspirado</h5>
                <p class="display-4" style="font-size: 1.5rem;">{{ $averageEstimatedBusiness !== null ? number_format($averageEstimatedBusiness, 2, ',', '.') : 'N/A' }}</p>
            </div>
        </div>
    </div>
    @endif

    <!-- New Line of Indicators -->
    @if($competitor)
    <div class="row mt-4">
        <!-- Left Column: Discount Chart -->
        <div class="col-md-6">
            <div class="card p-3">
                <h5>% Descuento del Competidor</h5>
                <div id="discountChart" style="height: 400px;"></div>
            </div>
        </div>

        <!-- Right Column: Performance Metrics -->
        <div class="col-md-6">
            <!-- First Row -->
            <div class="row mb-3">
                <div class="col-md-4">
                    <div class="card text-center p-3">
                        <h5>Performance Económica</h5>
                        <p class="display-4" style="font-size: 1.5rem;">{{ number_format($performanceEcon, 2, ',', '.') }}%</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card text-center p-3">
                        <h5>Performance Técnica</h5>
                        <p class="display-4" style="font-size: 1.5rem;">{{ number_format($performanceTca, 2, ',', '.') }}%</p>
                    </div>
                </div>

                <div class="col-md-4">
                        <div class="card text-center p-3">
                            <h5>Descuento Adjudicado</h5>
                            <p class="display-4" style="font-size: 1.5rem;">{{ number_format($descuentoAdjudicado, 2, ',', '.') }}%</p>
                        </div>
                    </div>
                </div>
                    <!-- Second Row -->
            <div class="row mb-3">
                @if($emblematicClient)
                <div class="col-md-6">
                    <div class="card text-center p-3">
                        <h5>Cliente Emblemático</h5>
                        <p class="display-4" style="font-size: 1.5rem;">
                            {{ $emblematicClient->cliente }}
                            <small>({{ number_format($emblematicClient->importe_estimado, 2, ',', '.') }} €)</small>
                        </p>
                    </div>
                </div>
                @endif
                
                @if($bestYear)
                <div class="col-md-6">
                    <div class="card text-center p-3">
                        <h5>Mejor Año</h5>
                        <p class="display-4" style="font-size: 1.5rem;">
                            {{ $bestYear->year }}
                            <small>({{ number_format($bestYear->total_amount, 2, ',', '.') }} €)</small>
                        </p>
                    </div>
                </div>
                @endif
            </div>

            <!-- Third Row -->
            <div class="row">
                @if($bestBusinessLine)
                <div class="col-md-6">
                    <div class="card text-center p-3">
                        <h5>Mejor Línea de Negocio</h5>
                        <p class="display-4" style="font-size: 1.5rem;">
                            {{ $bestBusinessLine->linea_negocio }}
                            <small>({{ number_format($bestBusinessLine->total_amount, 2, ',', '.') }} €)</small>
                        </p>
                    </div>
                </div>
                @endif

                @if($bestClientActivity)
                <div class="col-md-6">
                    <div class="card text-center p-3">
                        <h5>Mejor Actividad Cliente</h5>
                        <p class="display-4" style="font-size: 1.5rem;">
                            {{ $bestClientActivity->actividad_cliente }}
                            <small>({{ number_format($bestClientActivity->total_amount, 2, ',', '.') }} €)</small>
                        </p>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
    @endif

    <!-- Second Row: Territory Table -->
    @if($competitor)
    <div class="row mt-4">
        <div class="col-md-12">
            <div class="card p-3">
                <h5>Territorio</h5>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Provincia</th>
                            <th class="text-right">Presentadas</th>
                            <th class="text-right">% Ganado</th>
                            <th class="text-right">% Exclusión</th>
                            <th class="text-right">% Queda 2º</th>
                            <th class="text-right">% Descuento Medio</th>
                            <th class="text-right">Media Negocio Aspirado</th>
                            <th class="text-right">Performance Económica</th>
                            <th class="text-right">Performance Técnica</th>
                            <th class="text-right">Descuento Adjudicado</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($territoryData as $data)
                        <tr>
                            <td>{{ $data->provincia_oferta }}</td>
                            <td class="text-right">{{ number_format($data->total_presented, 0, '.', ',') }}</td>
                            <td class="text-right">{{ number_format($data->percentage_won, 2, '.', ',') }}%</td>
                            <td class="text-right">{{ number_format($data->percentage_excluded, 2, '.', ',') }}%</td>
                            <td class="text-right">{{ number_format($data->percentage_second, 2, '.', ',') }}%</td>
                            <td class="text-right">{{ number_format($data->average_discount, 2, '.', ',') }}%</td>
                            <td class="text-right">{{ number_format($data->average_estimated_business, 2, '.', ',') }}</td>
                            <td class="text-right">{{ number_format($data->performance_econ, 2, '.', ',') }}%</td>
                            <td class="text-right">{{ number_format($data->performance_tca, 2, '.', ',') }}%</td>
                            <td class="text-right">{{ number_format($data->descuento_adjudicado, 2, '.', ',') }}%</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                <!-- Navegación de Paginación -->
                <div class="row">
                    <div class="col-12 mt-3 d-flex justify-content-center">
                        {{ $territoryData->appends(request()->query())->links('pagination::bootstrap-5') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Third Row: Business Line Table -->
    @if($competitor)
    <div class="row mt-4">
        <div class="col-md-12">
            <div class="card p-3">
                <h5>Línea de Negocio</h5>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Línea de Negocio</th>
                            <th class="text-right">Presentadas</th>
                            <th class="text-right">% Ganado</th>
                            <th class="text-right">% Exclusión</th>
                            <th class="text-right">% Queda 2º</th>
                            <th class="text-right">% Descuento Medio</th>
                            <th class="text-right">Media Negocio Aspirado</th>
                            <th class="text-right">Performance Económica</th>
                            <th class="text-right">Performance Técnica</th>
                            <th class="text-right">Descuento Adjudicado</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($businessLineData as $data)
                        <tr>
                            <td>{{ $data->linea_negocio }}</td>
                            <td class="text-right">{{ number_format($data->total_presented, 0, '.', ',') }}</td>
                            <td class="text-right">{{ number_format($data->percentage_won, 2, '.', ',') }}%</td>
                            <td class="text-right">{{ number_format($data->percentage_excluded, 2, '.', ',') }}%</td>
                            <td class="text-right">{{ number_format($data->percentage_second, 2, '.', ',') }}%</td>
                            <td class="text-right">{{ number_format($data->average_discount, 2, '.', ',') }}%</td>
                            <td class="text-right">{{ number_format($data->average_estimated_business, 2, '.', ',') }}</td>
                            <td class="text-right">{{ number_format($data->performance_econ, 2, '.', ',') }}%</td>
                            <td class="text-right">{{ number_format($data->performance_tca, 2, '.', ',') }}%</td>
                            <td class="text-right">{{ number_format($data->descuento_adjudicado, 2, '.', ',') }}%</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                <!-- Navegación de Paginación -->
                <div class="row">
                    <div class="col-12 mt-3 d-flex justify-content-center">
                        {{ $businessLineData->appends(request()->query())->links('pagination::bootstrap-5') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Third Row: Client Activity Table -->
    @if($competitor)
    <div class="row mt-4">
        <div class="col-md-12">
            <div class="card p-3">
                <h5>Actividad Cliente</h5>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Actividad Cliente</th>
                            <th class="text-right">Presentadas</th>
                            <th class="text-right">% Ganado</th>
                            <th class="text-right">% Exclusión</th>
                            <th class="text-right">% Queda 2º</th>
                            <th class="text-right">% Descuento Medio</th>
                            <th class="text-right">Media Negocio Aspirado</th>
                            <th class="text-right">Performance Económica</th>
                            <th class="text-right">Performance Técnica</th>
                            <th class="text-right">Descuento Adjudicado</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($clientActivityData as $data)
                        <tr>
                            <td>{{ $data->actividad_cliente }}</td>
                            <td class="text-right">{{ number_format($data->total_presented, 0, '.', ',') }}</td>
                            <td class="text-right">{{ number_format($data->percentage_won, 2, '.', ',') }}%</td>
                            <td class="text-right">{{ number_format($data->percentage_excluded, 2, '.', ',') }}%</td>
                            <td class="text-right">{{ number_format($data->percentage_second, 2, '.', ',') }}%</td>
                            <td class="text-right">{{ number_format($data->average_discount, 2, '.', ',') }}%</td>
                            <td class="text-right">{{ number_format($data->average_estimated_business, 2, '.', ',') }}</td>
                            <td class="text-right">{{ number_format($data->performance_econ, 2, '.', ',') }}%</td>
                            <td class="text-right">{{ number_format($data->performance_tca, 2, '.', ',') }}%</td>
                            <td class="text-right">{{ number_format($data->descuento_adjudicado, 2, '.', ',') }}%</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                <!-- Navegación de Paginación -->
                <div class="row">
                    <div class="col-12 mt-3 d-flex justify-content-center">
                        {{ $clientActivityData->appends(request()->query())->links('pagination::bootstrap-5') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var discountChart = echarts.init(document.getElementById('discountChart'));
    var scatterData = {!! json_encode(
        array_map(function($row) {
            return [
                floatval($row['descuento']), 
                floatval($row['importe_estimado']),
                intval($row['rank_licitacion']),
                strval($row['cliente'])
            ];
        }, $discountData)
    ) !!};

    var option = {
        tooltip: {
            formatter: function(params) {
                return 'Cliente: ' + params.value[3] + '<br>Descuento: ' + params.value[0];
            }
        },        
        xAxis: {
            name: 'Descuento',
            type: 'value'
        },
        yAxis: {
            name: 'Importe Estimado',
            type: 'value'
        },
        series: [{
            type: 'scatter',
            data: scatterData,
            symbolSize: 10,
            itemStyle: {
                color: function(params) {
                    return params.value[2] === 1 ? 'green' : 'red';
                }
            }
        }]
    };

    discountChart.setOption(option);
});
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script>
document.addEventListener('DOMContentLoaded', function() {
    const initialCompetitors = @json($initialCompetitors);

    $('#competitor_name').autocomplete({
        source: function(request, response) {
            if (request.term.length === 0) {
                response(initialCompetitors);
            } else {
                $.ajax({
                    url: '{{ route('operations.explotacion.competidores.autocomplete') }}',
                    data: { term: request.term },
                    success: function(data) {
                        response(data.slice(0, 5));
                    }
                });
            }
        },
        minLength: 0,
        select: function(event, ui) {
            $('#competitor_name').val(ui.item.value);
        }
    }).focus(function() {
        $(this).autocomplete('search', '');
    });
});
</script>
@endpush