@extends('layouts.app', [
'class' => '',
'elementActive' => 'tablero',
])

@section('content')
<div class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="card card-nav-tabs">
                <div class="card-header card-header-warning">
                    <nav class="navbar navbar-expand-lg bg-primary">
                        <div class="container">
                            <div class="navbar-translate">
                                <a class="navbar-brand" href="">{{ $indicador }}</a>
                            </div>
                            <div class="collapse navbar-collapse">
                                <form class="form-inline ml-auto">
                                    <a href="{{ url('promedio') }}/{{ $tipo }}"
                                        class="btn btn-danger">Promedio</a>
                                     {{-- @if ($activar == 1) --}}
                                    <a href="{{ url('meses') }}/{{ $tipo }}"
                                        class="btn btn-default">Meses</a>
                                    {{--@endif--}}

                                </form>
                            </div>
                        </div>
                    </nav>
                </div>

                <div class="card-body">

                    <div class="table-responsive">
                        <table class="table" style="font-size: 10px">
                            <thead>
                                <tr>
                                    <th style="color: #9a0202; font-size: 12px;"> ID </th>
                                    <th style="color: #9a0202; font-size: 12px;width:20%;"> OBJETIVO </th>
                                    <th style="color: #9a0202; font-size: 12px;"> TIPO</th>
                                    <th style="color: #9a0202; font-size: 12px;"> PROCESO </th>
                                    <th style="color: #9a0202; font-size: 12px;"> RESPONSABLE</th>
                                    <th style="color: #9a0202; font-size: 12px; width:5%;"> PESO </th>
                                    <th style="color: #9a0202; font-size: 12px;"> INDICADOR </th>
                                    <th style="color: #9a0202; font-size: 12px;">FORMULA</th>
                                    <th style="color: #9a0202; font-size: 12px;">FRECUENCIA</th>
                                    <th style="color: #9a0202; font-size: 12px; width:5%;">UNIDAD</th>
                                    <th style="color: #9a0202; font-size: 12px; width:5%;" class="text-center"> METAS
                                    </th>
                                    <th style="color: #9a0202; font-size: 12px; width:5%;"> MES </th>
                                    <th style="color: #9a0202; font-size: 12px;"> AÑO </th>
                                    <th style="color: #9a0202; font-size: 12px;"> VALOR </th>
                                    <th style="color: #9a0202; font-size: 12px;" class="text-center"> ACCIONES </th>
                                </tr>
                                <tr>
                                    <td><strong>O1.</strong></td>
                                    <td><strong>{{ $objetivo }}</strong>
                                    </td>
                                    <td><strong><i class="fa fa-long-arrow-up"></strong></i></td>
                                    <td><strong>FABRIBAT</strong></td>
                                    <td><strong>Responsable</strong></td>
                                    <td><strong>100</strong></td>
                                    <td><strong>Cumplimiento Ponderado</strong></td>
                                    <td><strong>Suma ponderada de las estrategias</strong></td>
                                    <td class="text-center"><strong>Mensual</strong></td>
                                    <td class="text-center"><strong>%</strong></td>
                                    <td align="center"><strong>
                                            <table>
                                                <tr>
                                                    <td style="background-color:#03ca49; padding: 1px;">[ &nbsp;100 ]
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="background-color:#fff700; padding: 1px;">[
                                                        &nbsp;&nbsp;&nbsp;95
                                                        ]
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="background-color:#FF0000; padding: 1px;">
                                                        [ < 95 ]</td>
                                                </tr>
                                            </table>
                                        </strong></td>
                                    <td><strong> </strong></td>
                                    <td><strong>2025</strong></td>
                                    <td class="text-center"><strong>100</strong></td>
                                    <td></td>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($data as $item)
                                <tr>
                                    <td class=""><a
                                            href="{{ URL::to('historialMeses') }}/{{ $item->idIndicador }}/{{ $item->idTablero }}">{{ $item->codigo }}</a>
                                    </td>
                                    <td class="">{{ $item->objetivo }}</td>
                                    <?php if ($item->tipo  == 'h') { ?>
                                        <td><i class="fa fa-long-arrow-up"></i></td>
                                    <?php } elseif ($item->tipo == 'i') { ?>
                                        <td><i class="fa fa-long-arrow-down"></i></td>
                                    <?php } elseif ($item->tipo == 'n') { ?>
                                        <td><i class="fa fa-arrows-h"></i></td>
                                    <?php } ?>
                                    <td>{{ $item->procesoGestion }} </td>
                                    <td>
                                        @if (auth()->user()->id == $item->responsable)
                                        <a
                                            href="{{ URL::to('listarMetaFutura') }}/{{ $item->idIndicador }}/{{ $item->idTablero }}">{{ $item->responsable()->first()->name }}</a>
                                        @else
                                        {{ $item->responsable()->first()->name }}
                                        @endif
                                    </td>
                                    <td>{{ $item->peso }} </td>
                                    <td>{{ $item->indicador }} </td>
                                    <td>{{ $item->formula }} </td>
                                    <td class="text-center">{{ $item->frecuencia }} </td>
                                    <td class="text-center">{{ $item->unidad }} </td>
                                    <td class="text-center">{{ $item->meta }} </td>
                                    <td>{{ $item->meses()->first()->mes }} </td>
                                    <td>{{ $item->año }} </td>
                                    {{-- @if (auth()->user()->id == $item->responsable || auth()->user()->id == 1) --}}
                                    @if ($item->colores == 'V')
                                    <td class="text-center" style="background: #03ca49">
                                        <a href="{{ URL::to('correctivas') }}/{{ $tipo }}"
                                            class="btn btn-success">
                                            {{ $item->valor }}</a>

                                    </td>
                                    @elseif ($item->colores == 'A')
                                    <td class="text-center" style="background: #fff700">
                                        <a href="{{ URL::to('correctivas') }}/{{ $tipo }}"
                                            class="btn btn-warning">
                                            {{ $item->valor }}</a>
                                    </td>
                                    @elseif ($item->colores == 'R')
                                    <td class="text-center" style="background: #FF0000">
                                        <a href="{{ URL::to('correctivas') }}/{{ $tipo }}"
                                            class="btn btn-danger">
                                            {{ $item->valor }}</a>
                                    </td>
                                    @endif
                                    {{-- @endif --}}

                                    @if (auth()->user()->id == $item->responsable)
                                    <td class="text-center">
                                  
                                    </td>
                                    @else
                                    <td class="text-center">
                                        <button
                                            class="btn btn-sm btn-warning"
                                            title="Editar"
                                            data-toggle="modal"
                                            data-target="#modalEditar"
                                            data-id="{{ $item->idresultado }}"
                                            data-tipo="{{ $item->tipo}}"
                                            data-meta="{{ $item->meta }}"
                                            data-valor="{{ $item->valor }}">
                                            <i class="nc-icon nc-align-center"></i>
                                        </button>
                                    </td>
                                    @endif


                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="myModal2">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">DETALLE</h4>
                <!--<button type="button" class="close" data-dismiss="modal">&times;</button>-->
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <!--<input type="text" id="idCompromiso2"name="idCompromiso2"/>-->
                <table class="table" id="detalleTabla">

                </table>
            </div>
            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>

        </div>
    </div>
</div>

<!-- Modal Editar Meta y Valor -->
<div class="modal fade" id="modalEditar" tabindex="-1" role="dialog" aria-labelledby="modalEditarLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form id="formEditarMetaValor">
            @csrf
            <input type="hidden" id="idResultado" name="idResultado">
            <input type="hidden" id="tipo" name="tipo">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Editar Meta y Valor</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="meta">Meta:</label>
                        <input type="number" class="form-control" id="meta" name="meta">
                    </div>
                    <div class="form-group">
                        <label for="valor">Valor:</label>
                        <input type="number" class="form-control" id="valor" name="valor">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Guardar Cambios</button>
                </div>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        $('#modalEditar').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            $('#idResultado').val(button.data('id'));
            $('#tipo').val(button.data('tipo'));
            $('#meta').val(button.data('meta'));
            $('#valor').val(button.data('valor'));
        });

        $('#formEditarMetaValor').submit(function(e) {
            e.preventDefault();
            var formData = $(this).serialize();

            $.ajax({
                url: '{{ route("actualizarMetaValor") }}',
                method: 'POST',
                data: formData,
                success: function(response) {
                    flasher.success("¡Datos actualizados correctamente!");
                    $('#modalEditar').modal('hide');

                    // Espera 2.5 segundos antes de recargar (ajusta el tiempo a tu gusto)
                    setTimeout(function() {
                        location.reload();
                    }, 2500);

                },
                error: function(xhr) {
                    alert('Error al actualizar');
                    console.error(xhr.responseText);
                }
            });
        });
    });

    function historial(id) {
        var idComp = id;
        var respuesta = $.ajax({
            url: "{{ URL::to('historial') }}",
            data: {
                idComp: idComp
            },
            /* headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }, */
            type: "GET",

            success: function(data) {
                $('#myModal2').modal({
                    show: true
                });
                $('#detalleTabla').html(data);
            }
        });


    }
</script>
@endpush