{{-- @extends('layouts.app') --}}
@extends('layouts.sidebar')

@section('content')
 <!-- content -->

 <style>
    .color-azul {
    color: var(--azul) !important;
}

    .seccion-filtro {
    color: var(--gris-2);
    font-size: 14px;
    font-weight: 300;
}

.separador {
    margin: 0 0 20px 0;
    background-color: #adb0b3;
}
.cantidad-solicitud {
    color: var(--cobre);
    font-size: 3em;
    line-height: 50px;
    font-weight: 300;
    margin-bottom: 0.75rem;
}
.estado {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.estado:hover {
    box-shadow: 0 0.5rem 1rem rgba(16, 8, 162, 0.276) !important;
    transform: scale(1.05, 1.05);
    transition: 0.3s;
}
 </style>
<div class="titulos"> 
    <h2>Dashboard</h2>
    <hr />

</div>

@if(session('mensaje'))
    <div class="alert alert-success">
        {{ session('mensaje') }}
    </div>
@endif
 <div class="container-fluid botones-extremo " >
    <div class="d-flex justify-content-between">
        {{-- <a href="{{ route('clientes.crear') }}" class=" btn  btn-success" title="" >Nuevo</a> --}}
       
    </div>
</div>

 <div class="container-fluid ">

    <style>
        .bordercontainer {
            border: 2px solid #000; /* Cambia #000 al color de borde que desees */
            padding: 10px; /* Opcional: agrega espacio alrededor del contenido */
            text-align: center;
        }
    </style>



        @if(\App\Models\User::tipoUsuario() == "superadmin" || \App\Models\User::tipoUsuario() == "admin" || \App\Models\User::tipoUsuario() == "secretaria")



            <div class="row">

                <div class="col-sm-4" style="text-align: center">
                            <div class="card estado revisar_pendientes" data-toggle="modal" data-target="#aPendientes">
                                <div class="card-body border-lg rounded-3">
                                    <div class="seccion-filtro color-azul" style="text-align: center">OT EN CURSO</div>
                                    <hr class="separador">

                                    <h5 class="cantidad-solicitud d-inline">{{$countOtEnproceso ?? ''}}

                                    </h5>

                                    {{-- <button type="button" class="btn btn-ter d-block mx-auto mt-4 revisar_pendientes" data-toggle="modal" data-target="#aPendientes">Revisar</button> --}}
                                    <a  href="{{ route('search.ordendetrabajo',['status' => "INICIADA"]) }}" class="btn btn-ter d-block mx-auto mt-4 revisar_pendientes" >Revisar</a>

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

                <div class="col-sm-4" style="text-align: center">
                    <div class="card estado revisar_pendientes" data-toggle="modal" data-target="#aPendientes">
                        <div class="card-body border-lg rounded-3">
                            <div class="seccion-filtro color-azul" style="text-align: center">OT RECEPCIONADAS</div>
                            <hr class="separador">

                            <h5 class="cantidad-solicitud d-inline">{{$countOtRecepcionada ?? ''}}

                            </h5>

                            {{-- <button type="button" class="btn btn-ter d-block mx-auto mt-4 revisar_pendientes" data-toggle="modal" data-target="#aPendientes">Revisar</button> --}}
                            <a  href="{{ route('search.ordendetrabajo',['status' => "RECEPCIONADA"]) }}" class="btn btn-ter d-block mx-auto mt-4 revisar_pendientes" >Revisar</a>
                        </div>
                    </div>
                </div>

                <div class="col-sm-4" style="text-align: center">
                    <div class="card estado revisar_pendientes" data-toggle="modal" data-target="#aPendientes">
                        <div class="card-body border-lg rounded-3">
                            <div class="seccion-filtro color-azul" style="text-align: center">SERVICIOS PENDIENTES REPUESTOS</div>
                            <hr class="separador">

                            <h5 class="cantidad-solicitud d-inline">{{count($countOtPendientesRepuestos ?? '')}}

                            </h5>

                            {{-- <button type="button" class="btn btn-ter d-block mx-auto mt-4 revisar_pendientes" data-toggle="modal" data-target="#aPendientes">Revisar</button> --}}
                            <!--<a class="btn btn-ter d-block mx-auto mt-4 revisar_pendientes" >-->
                                <a  href="{{ route('search.ordendetrabajo',['status' => "REPUESTOS"]) }}" class="btn btn-ter d-block mx-auto mt-4 revisar_pendientes" >Revisar</a>
                        </div>
                    </div>
                </div>

            
                

            
            </div>
            <br><br>



{{-- <div class="row">
<div class="col-sm-4" style="text-align: center">
                    <div class="card estado revisar_pendientes" data-toggle="modal" data-target="#aPendientes">
                        <div class="card-body border-lg rounded-3">
                            <div class="seccion-filtro color-azul" style="text-align: center">OT PAGO PENDIENTE</div>
                            <hr class="separador">

                            <h5 class="cantidad-solicitud d-inline">{{count($countOtPendientesDePago ?? '')}}

                                <a  href="{{ route('ot.pendientesdepago') }}" class="btn btn-ter d-block mx-auto mt-4 revisar_pendientes">
                                Revisar

                                </a>
                 
                        </div>
                    </div>
                    </div>
                    </div>
                    <br><br> --}}

            <div class="row">
                <div class="col-sm-4" style="text-align: center">
                    <div class="card estado revisar_pendientes" data-toggle="modal" data-target="#aPendientes">
                        <div class="card-body border-lg rounded-3">
                            <div class="seccion-filtro color-azul" style="text-align: center">OT PAGO PENDIENTE</div>
                            <hr class="separador">

                            <h5 class="cantidad-solicitud d-inline">{{count($countOtPendientesDePago ?? '')}}

                            <!-- <h5 class="cantidad-solicitud d-inline">0 -->
                                <a  href="{{ route('ot.pendientesdepago') }}" class="btn btn-ter d-block mx-auto mt-4 revisar_pendientes">
                                <!-- <img lass="cantidad-solicitud d-inline" src="{{ asset('/img/iconos/nuevaot.png') }}" alt="" width="110px"> -->
                                Revisar

                                </a>
                                
                            <!-- </h5> -->

                            {{-- <button type="button" class="btn btn-ter d-block mx-auto mt-4 revisar_pendientes" data-toggle="modal" data-target="#aPendientes">Revisar</button> --}}
                            <!-- <a class="btn btn-ter d-block mx-auto mt-4 revisar_pendientes" ><br></a> -->
                        </div>
                    </div>
                    </div>
                <div class="col-sm-4" style="text-align: center">
                    <div class="card estado revisar_pendientes" data-toggle="modal" data-target="#aPendientes">
                        <div class="card-body border-lg rounded-3">
                            <div class="seccion-filtro color-azul" style="text-align: center">CARGA DE TRABAJO</div>
                            <hr class="separador"> {{--
                            <h5 class="cantidad-solicitud d-inline">{{number_format(\App\Models\orden_trabajos::ordenesTotales() ?? '0', 0, ',', '.')}}</h5> --}}
                            <a   href="{{ route('carga.ordendetrabajo') }}"  ><img lass="cantidad-solicitud d-inline" src="{{ asset('/img/iconos/cot.png') }}" alt="" width="110px"></a>
                            {{-- <button type="button" class="btn btn-ter d-block mx-auto mt-4 revisar_pendientes" data-toggle="modal" data-target="#aPendientes">Revisar</button> --}} {{-- <a class="btn btn-ter d-block mx-auto mt-4 revisar_pendientes" href="{{route('ordenesdetrabajo')}}">Revisar</a>                    --}}
                        </div>
                    </div>
                </div>

                <div class="col-sm-4" style="text-align: center">
                    <div class="card estado revisar_pendientes" data-toggle="modal" data-target="#aPendientes">
                        <div class="card-body border-lg rounded-3">
                            <div class="seccion-filtro color-azul" style="text-align: center">ORDENES DE TRABAJO</div>
                            <hr class="separador"> {{--
                            <h5 class="cantidad-solicitud d-inline">{{number_format(\App\Models\orden_trabajos::ordenesTotales() ?? '0', 0, ',', '.')}}</h5> --}}
                            <a href="{{ route('ordendetrabajo') }}"  ><img lass="cantidad-solicitud d-inline" src="{{ asset('/img/iconos/ot2.png') }}" alt="" width="110px"></a>
                            {{-- <button type="button" class="btn btn-ter d-block mx-auto mt-4 revisar_pendientes" data-toggle="modal" data-target="#aPendientes">Revisar</button> --}} {{-- <a class="btn btn-ter d-block mx-auto mt-4 revisar_pendientes" href="{{route('ordenesdetrabajo')}}">Revisar</a>                    --}}
                        </div>
                    </div>
                </div>

                {{-- <div class="col-sm-4" style="text-align: center">
                    <div class="card estado revisar_pendientes" data-toggle="modal" data-target="#aPendientes">
                        <div class="card-body border-lg rounded-3">
                            <div class="seccion-filtro color-azul" style="text-align: center">NUEVA OT</div>
                            <hr class="separador">

                                <a  href="{{ route('ot.crearsincliente') }}">
                                <img lass="cantidad-solicitud d-inline" src="{{ asset('/img/iconos/nuevaot.png') }}" alt="" width="110px">
                            
                                </a>
                                

                        </div>
                    </div>
                </div> --}}

            
            </div>
<br><br>
                {{-- Contenedor del gráfico de barras --}}
                <div class="container">
                <div class="row">
                    <div class="col-12 text-center">
                        <hr>
                        <h3>Mes actual</h3>
                        <hr>
                    </div>
                </div>
                
                <div class="row">
                    <center>
                    <div class="col-6">
                        <center>
                        <b>Estado de ordenes de trabajo</b>
                        <!-- Gráfico de barras para órdenes de trabajo -->
                        <canvas id="barChart"></canvas>
                        </center>
                    </div>
                    <br><br>
                    <div class="col-7">
                        <center>
                        <b>Ordenes de trabajo valorizadas</b>
                        <!-- Gráfico de barras para órdenes de trabajo valorizadas -->
                        <canvas id="barChart2"></canvas>
                        </center>
                    </div>
                    </center>
                </div>

            </div>
            <br><br>
            <div class="container">
                <div class="row">
                    <div class="col-12 text-center">
                        <hr>
                        <h3>Este año</h3>
                        <hr>
                    </div>
                </div>
                <div class="row">
                    <center>
                    <div class="col-6">
                        <center>
                        Pronto...
                        </center>
                    </div>
                </div>
            </div>

        @endif


        @if( \App\Models\User::tipoUsuario() == "operario")

        @include('homeoperario')

        @endif

</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var dataOt = @json($dataOt);

        // Procesar los datos para los labels y el dataset
        var labels = dataOt.map(item => item.estado_orden_trabajo);
        var cantidadOrdenes = dataOt.map(item => item.cantidad_ordenes);
        //var totalDescuentos = dataOt.map(item => item.total_con_descuentos_total);

        var ctx = document.getElementById('barChart').getContext('2d');
        var barChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Cantidad de ordenes',
                    backgroundColor: 'rgba(54, 162, 235, 0.7)',
                    data: cantidadOrdenes,
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                tooltips: {
                    /*
                    callbacks: {
                        label: function(tooltipItem, data) {
                            return data.datasets[tooltipItem.datasetIndex].label + ': ' + tooltipItem.yLabel.toLocaleString('es-CL', { style: 'currency', currency: 'CLP' });
                        }
                    }
                    */
                },
                plugins: {
                    legend: {
                        display: true // Mostrar leyenda
                    }
                }
            }
        });
    });
</script>
<script>
function formatNumber(value) {
    //alert(value);
    console.log(value);
    // Convertimos el valor a entero para manejar la entrada de manera segura
    var numericValue = parseInt(value, 10);

    // Comprobamos si la conversión fue exitosa
    if (isNaN(numericValue)) {
        return value; // Retorna mensaje de error si la entrada no es un número
    }

    // Formateamos el número utilizando 'de-DE' que usa puntos como separadores de miles
    var formatted = numericValue.toLocaleString('de-DE', { });
    console.log(formatted);
    return formatted;
}



    document.addEventListener('DOMContentLoaded', function () {
        var dataOt = @json($dataOt);

        // Procesar los datos para los labels y el dataset
        var labels = dataOt.map(item => item.estado_orden_trabajo);
        //var cantidadOrdenes = dataOt.map(item => item.cantidad_ordenes);
        var totalDescuentos = dataOt.map(item => (item.total_con_descuentos_total));

        var ctx = document.getElementById('barChart2').getContext('2d');
        var barChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                label: 'Total $',
                backgroundColor: 'rgba(0, 161, 122, 0.7)',
                borderColor: 'rgba(0, 161, 122, 1)',
                data: totalDescuentos,
            }]
            },
            options: {
                scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return '$' + value.toLocaleString('de-DE', { });
                        }
                    }
                }
            },
                tooltips: {
                    callbacks: {
                        label: function(tooltipItem, data) {
                        let label = data.datasets[tooltipItem.datasetIndex].label;
                        let value = tooltipItem.yLabel;
                        if (label === 'Total $') {
                            return label + ':' + value.toLocaleString('de-DE', { });
                        }
                            return label + ':' + (value.toLocaleString('de-DE', { }));
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: true // Mostrar leyenda
                    }
                }
            }
        });
    });
</script>




@endsection