@extends('layouts.index', ['subHeader' => 'Leading Safety Governance+ COPAC'])

@section('header')
    <a href="{{ route('home') }}" class="text-decoration-none text-dark">Dashboard</a>
    <a href="{{ route('leading.index') }}" class="text-decoration-none text-dark"> / Leading</a>

    <style>
        .modulo-lista {
            height: -webkit-fill-available;
            width: -webkit-fill-available;
            align-content: center;
        }

        #piramideRiesgo {
            min-height: 500px;
        }

        .pyramid-container {
            width: 100%;
            max-width: 700px;
            margin: auto;
        }

        .pyramid-level {
            width: 100%;
            margin: 0 auto;
            text-align: center;
            padding: 20px 10px;
            border-radius: 100px 100px 0 0;
            color: white;
            font-weight: bold;
            position: relative;
        }

        .level-1 {
            width: 15%;
            background-color: #FF4C4cd6;
            clip-path: polygon(50% 0, 50% 0, 100% 100%, 0 100%);
        }

        .level-2 {
            width: 31%;
            background-color: #D6454cd6;
            clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%);
        }

        .level-3 {
            width: 48%;
            background-color: #F2B63cd6;
            color: #333;
            clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
        }

        .level-4 {
            width: 65%;
            background-color: #F7C8Ccd6;
            color: #333;
            clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
        }

        .level-5 {
            width: 100%;
            background-color: #C3A8Fcd6;
            color: #333;
            clip-path: polygon(17% 0, 83% 0, 100% 100%, 0 100%);
        }

        .pyramid {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        .pyramid-value {
            font-size: 1.6rem;
        }

        .card-ssr {
            border-radius: 20px;
        }

        .card-ssr div {
            font-size: 1.2rem;
            font-weight: 700;
        }

        #verMas {
            font-size: 1rem;
            border: 2px solid #fff;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
        }
        #verMas:hover {
            background-color: #47474782;
        }

    </style>
@endsection

@section('content')
    <div class="row">
        <div class="d-flex w-100 voltearv" style="flex-direction: row-reverse;">
            <div class="w-s">
                <div class="btn-group mb-2">
                    <a href="{{ route('leading.index') }}" class="btn btn-enviar btn-lg btn-block">
                        <i class="bi bi-arrow-left-circle-fill"></i> Atrás
                    </a>
                </div>
            </div>
        </div>
    </div>
    <br>
    @php
        use App\Models\LeadingSafetyPlatform;

        $months = LeadingSafetyPlatform::MONTHS;
        $types = LeadingSafetyPlatform::TYPES;
        $sites = LeadingSafetyPlatform::SITES;
        $years = LeadingSafetyPlatform::select('year')->distinct()->orderByDesc('year')->pluck('year');
    @endphp

    <div class="container-fluid shadow-sm bg-white rounded-3 p-4">
        <div class="row g-4">
            <div class="col-sm-6 col-md-3">
                <label for="startMonthYear" class="fw-bolder">Fecha Inicio</label>
                <input type="month" id="startMonthYear" class="form-control">
            </div>

            <div class="col-sm-6 col-md-3">
                <label for="endMonthYear" class="fw-bolder">Fecha Fin</label>
                <input type="month" id="endMonthYear" class="form-control">
            </div>

            <div class="col-sm-6 col-md-3">
                <label for="siteSelect" class="fw-bolder">Sitio</label>
                <select id="siteSelect" class="form-select" data-control="select2">
                    <option value="all">COPAC (All)</option>
                    @foreach ($sites as $key => $value)
                        <option value="{{ $key }}">{{ $value }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-sm-6 col-md-3">
                <label for="typeSelect" class="fw-bolder">Tipo</label>
                <select id="typeSelect" class="form-select" data-control="select2">
                    <option value="all">All</option>
                    @foreach ($types as $key => $value)
                        <option value="{{ $key }}">{{ $value }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>

    {{-- Indicadores adicionales fuera de la pirámide --}}
    <div class="row g-3 mt-4" id="indicadoresContainer">
        <div class="col-md-6">
            <div class="container-fluid shadow-sm bg-white rounded-3 p-4" style="padding-bottom: 21px !important;">
                <div class="row g-4 align-items-end">
                    <div class="col-md-8">
                        <label for="listSelector" class="form-label fw-bolder">Query a SharePoint List</label>
                        <select class="form-select form-select-lg fromcss" id="listSelector" name="listSelector"
                            data-control="select2" data-placeholder="Seleccione una opción..." required>
                            <option></option>
                            <option value="actos">Safety Risk Report</option>
                            <option value="gerencial">Managerial Safety Visit</option>
                            <option value="excelencia">Contractor Joint Safety Tour</option>
                            <option value="coaching">Road Safety Coaching</option>
                        </select>
                    </div>
                    <div class="col-md-4 d-flex align-items-center">
                        <button class="btn btn-lg btn-info" type="button" id="consultBtn">
                            <i class="fas fa-search me-2"></i>Consult
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-bg-light shadow-sm bg-white rounded-3 text-center">
                <div class="card-body">
                    <div class="row g-2">
                        <div class="col-4">
                            <div class="d-flex justify-content-center align-items-center">
                                <img src="{{ asset('img/leading/icon_headcount.png') }}" alt="Headcount"
                                    class="img-fluid" style="max-width: 60px; max-height: 60px;">
                            </div>
                        </div>
                        <div class="col-8">
                            <h6 class="card-title text-muted">Headcount</h6>
                            <h3 class="mb-0" id="headcountCard">0</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-bg-light shadow-sm bg-white rounded-3 text-center">
                <div class="card-body">
                    <div class="row g-2">
                        <div class="col-4">
                            <div class="d-flex justify-content-center align-items-center">
                                <img src="{{ asset('img/leading/icon_worked_hours.png') }}" alt="Headcount"
                                    class="img-fluid" style="max-width: 60px; max-height: 60px;">
                            </div>
                        </div>
                        <div class="col-8">
                            <h6 class="card-title text-muted">Worked Hours</h6>
                            <h3 class="mb-0" id="workedHoursCard">0</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="resultContainer" class="mt-5"></div>

    {{-- Pirámide de Riesgo --}}
    <div class="container-fluid shadow-sm bg-white rounded-3 p-4 my-5">
        <div class="pyramid my-5">
            <div class="pyramid-level level-1">
                <div id="fatalitiesVal">...</div>
                <div>Fatalities</div>
            </div>
            <div class="pyramid-level level-2">
                <div id="severeInjuriesVal">...</div>
                <div>Severe Injuries</div>
            </div>
            <div class="pyramid-level level-3">
                <div id="triVal">...</div>
                <div>Total Reportable Injuries (TRI)</div>
            </div>
            <div class="pyramid-level level-4">
                <div id="facVal">...</div>
                <div>First Aid Cases (FAC) & Nearmisses</div>
            </div>
            <div class="pyramid-level level-5">
                <div class="pyramid-label mb-3">Safety Risk Report (SSR) & Weak Signals</div>
                <div class="row g-2 text-white">
                    <div class="col-0 col-md-2"></div>
                    <div class="col-6 col-md-2">
                        <a href="{{ route('leading.actos') }}" class="btn btn-sm w-100 text-white card-ssr"
                            style="background-color: #E94B35;">
                            <div class="d-flex flex-column align-items-center small">
                                <div>SRR</div>
                                <div class="fs-4 fw-bold" id="totalActos">...</div>
                                <span id="verMas">Ver más <i class="bi bi-arrow-right"></i></span>
                            </div>
                        </a>
                    </div>
                    <div class="col-6 col-md-2">
                        <a href="{{ route('leading.gerencial') }}" class="btn btn-sm w-100 text-white card-ssr"
                            style="background-color: #00A9E0;">
                            <div class="d-flex flex-column align-items-center small">
                                <div>MSV</div>
                                <div class="fs-4 fw-bold" id="totalGerencial">...</div>
                                <span id="verMas">Ver más <i class="bi bi-arrow-right"></i></span>
                            </div>
                        </a>
                    </div>
                    <div class="col-6 col-md-2">
                        <a href="{{ route('leading.excelencia') }}" class="btn btn-sm w-100 text-white card-ssr"
                            style="background-color: #A53860;">
                            <div class="d-flex flex-column align-items-center small">
                                <div>CST</div>
                                <div class="fs-4 fw-bold" id="totalExcelencia">...</div>
                                <span id="verMas">Ver más <i class="bi bi-arrow-right"></i></span>
                            </div>
                        </a>
                    </div>
                    <div class="col-6 col-md-2">
                        <a href="{{ route('leading.coaching') }}" class="btn btn-sm w-100 text-white card-ssr"
                            style="background-color: #6A1B9A;">
                            <div class="d-flex flex-column align-items-center small">
                                <div>RSC</div>
                                <div class="fs-4 fw-bold" id="totalCoaching">...</div>
                                <span id="verMas">Ver más <i class="bi bi-arrow-right"></i></span>
                            </div>
                        </a>
                    </div>
                    <div class="col-0 col-md-2"></div>
                </div>
            </div>
        </div>
    </div>


    </div>
    <script src="{{ asset('js/leading/graficas.js') }}"></script>

    {{-- Script para cargar indicadores --}}
    <script>
        $(document).ready(function() {
            // Formatear la fecha actual a 'YYYY-MM' para los inputs type="month"
            const currentMonthYear = moment().format('YYYY-MM');
            $('#startMonthYear').val(currentMonthYear);
            $('#endMonthYear').val(currentMonthYear);

            // Listeners para los filtros. Ahora escuchan los nuevos inputs
            $('#startMonthYear, #endMonthYear, #siteSelect, #typeSelect').on('change', loadIndicadores);

            // Cargar datos al inicio
            loadIndicadores();

            function loadIndicadores() {
                // Leer valores de los inputs 'YYYY-MM'
                const startValue = $('#startMonthYear').val();
                const endValue = $('#endMonthYear').val();
                
                // Validar que ambos inputs tengan valor antes de continuar
                if (!startValue || !endValue) {
                    console.log("Fechas no seleccionadas, esperando...");
                    return;
                }

                // Convertir 'YYYY-MM' al primer día del mes de inicio
                const fecha_inicio = `${startValue}-01`;

                // Convertir 'YYYY-MM' al último día del mes de fin
                const fecha_fin = moment(endValue, 'YYYY-MM').endOf('month').format('YYYY-MM-DD');

                const data = {
                    fecha_inicio,
                    fecha_fin,
                    tipo: $('#typeSelect').val()
                };
                const pais = $('#siteSelect option:selected').text();
                data.pais = (pais === 'COPAC (All)') ? "all" : pais;
                
                // Las llamadas AJAX no cambian en absoluto
                $.get('{{ route('leading.indicadores') }}', data, function(res) {
                    $('#fatalitiesVal').text(res.fatalities ?? 0);
                    $('#severeInjuriesVal').text(res.severe_injuries ?? 0);
                    $('#triVal').text(res.tri_lti ?? 0);
                    $('#facVal').text(res.fac ?? 0);
                    $('#headcountCard').text(res.headcount ?? 0);
                    $('#workedHoursCard').text(res.worked_hours ?? 0);
                });

                $.get('../../api/sharepoint/totales-filtrados', data, function(totales) {
                    $('#totalActos').text(totales.actos ?? 0);
                    $('#totalGerencial').text(totales.gerencial ?? 0);
                    $('#totalExcelencia').text(totales.excelencia ?? 0);
                    $('#totalCoaching').text(totales.coaching ?? 0);
                }).fail(function() {
                    $('#totalActos, #totalGerencial, #totalExcelencia, #totalCoaching').text('—');
                });
            }

            // La función fetchData y su listener no cambian
            $('#consultBtn').on('click', function() {
                fetchData();
            });

            function fetchData() {
                const list = $('#listSelector').val();
                if (!list) {
                    $('#resultContainer').html('<p>Por favor, seleccione una lista para consultar.</p>');
                    return;
                }
                const endpoint = `/api/sharepoint/${list}`;
                const $container = $('#resultContainer');
                $container.html('Cargando...');

                $.ajax({
                    url: endpoint,
                    method: 'GET',
                    success: function(data) {
                        if (!data.length) {
                            $container.html('<p>No se encontraron datos.</p>');
                            return;
                        }

                        const keys = Object.keys(data[0]);
                        let html =
                            `<div class="container-fluid shadow-sm bg-white rounded-3 p-4 my-5">
                                <div class="table-responsive"><table id="tabla_dynamic" class="display nowrap" style="width:100%"><thead><tr>`;
                        keys.forEach(key => html += `<th>${key}</th>`);
                        html += '</tr></thead><tbody>';

                        data.forEach(item => {
                            html += '<tr>';
                            keys.forEach(key => {
                                html += `<td>${item[key] ?? ''}</td>`;
                            });
                            html += '</tr>';
                        });

                        html += '</tbody></table></div></div>';
                        $container.html(html);

                        $('#tabla_dynamic').DataTable({
                            responsive: true,
                            destroy: true,
                            dom: `<'row d-flex align-items-center justify-content-between'
                                        <'col-lg-8 d-flex align-items-center'f>
                                        <'col-lg-4 d-flex align-items-center justify-content-end'B>>
                                    <'table-responsive'tr>
                                    <'row'<'col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start'i><'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>>`,
                        });
                    },
                    error: function(xhr) {
                        const message = xhr.responseJSON?.message || xhr.statusText;
                        $container.html(`<p style="color:red;">Error: ${message}</p>`);
                    }
                });
            }
        });
    </script>
@endsection