@extends('layouts.app')

@section('content')
<div class="ind">
    <article>
        <div class="user-detalle-header">
            <img @if($users->conexion) style="border-radius: 200px; border: 5px solid rgba(138, 201, 50, 1);padding: 3px;" title="Usuario conectado en estos momentos" @else @endif class="user-image" src="/img/user.png" alt="">
            <h2>{{$users->name}} {{$users->lastname}}</h2>
            <span class="user-last-session">@if($users->conexion) Conectado en estos momentos  @else @if($users->ultima_sesion!=null) Ultima conexion el {{substr($users->ultima_sesion, 0, -4)}} @else No se ha conectado por ahora @endif @endif</span>
        </div>
        <hr>
        <div class="user-nums-cont">
            <div class="user-nums-card">
                <div class="user-nums-number">
                    {{count($nec)}}
                </div>
                <div class="user-nums-title">
                    <i class="bi bi-archive-fill"></i> @if(count($nec)==1)Necesidad @else Necesidades @endif en total
                </div>
            </div>
            <div class="user-nums-card">
                <div class="user-nums-number">
                    {{count($nec_encurso)}}
                </div>
                <div class="user-nums-title">
                    <i style="color: #7cbd3a;" class="bi bi-play-fill"></i> Necesidades en curso
                </div>
            </div>
            <div class="user-nums-card">
                <div class="user-nums-number">
                    {{count($departamento)}}
                </div>
                <div class="user-nums-title">
                    <i class="bi bi-building-gear"></i> @if(count($departamento)==1)Departamento asignado @else Departamentos asignados @endif
                </div>
            </div>
            <div class="user-nums-card">
                <div class="user-nums-number">
                    {{count($proyecto)}}
                </div>
                <div class="user-nums-title">
                    <i class="bi bi-bezier2"></i> @if(count($proyecto)==1)Proyecto asignado @else Proyectos asignados @endif
                </div>
            </div>
        </div>
        <div class="user-nums-cont">
            <div id="myChart-cont" class="user-detalle-chart-cont">
                <div class="text-center" style="width: 100%;">
                    <div class="lds-ripple"><div></div><div></div></div>
                </div>
            </div>
            <div id="myChart2-cont" class="user-detalle-chart-cont">
                <div class="text-center" style="width: 100%;">
                    <div class="lds-ripple"><div></div><div></div></div>
                </div>
            </div>
        </div>
            <script>

                let weight=[]
                let labels=[]
                const UrlParam = new URLSearchParams(window.location.search);
                id = {{$id}}
                if(id==null){
                    id={{Auth::user()->id}}
                }
                let data={
                'id': id
                }
                window.onload=function(){fetch("{{route('datosUsuario')}}", {
                    headers:{
                    "Content-Type": "application/json",
                    "Accept": "application/json, text-plain, */*",
                    "X-Requested-With": "XMLHttpRequest",
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    method:'POST',
                    body: JSON.stringify(data)
                })
                .then(response => response.json())
                .then(function(result){
                    document.getElementById("myChart-cont").innerHTML=`<canvas id="myChart" style="width:100%;max-width:600px"></canvas>`
                    document.getElementById("myChart2-cont").innerHTML=`<canvas id="myChart2" style="width:100%;max-width:600px"></canvas>`
                num_inc = [];
                dias = [];
                num_actividad = [];
                dias_actividad = [];
                result.num_interacciones.forEach(number=>{
                    if(number.num_incidencias!=null){
                        numero=parseInt(number.num_incidencias, 10);
                    }
                    else{
                        numero=0
                    }
                    num_inc.push(numero)
                    dias.push(number.day)
                })
                result.actividad.forEach(number_actividad=>{
                    if(number_actividad.num_interaccion!=null){
                        numero_act=parseInt(number_actividad.num_interaccion, 10);
                    }
                    else{
                        numero_act=0
                    }
                    num_actividad.push(numero_act)
                    dias_actividad.push(number_actividad.day)
                })
                
                weight=num_inc
                labels=dias
                maximo=Math.max(...num_inc)

                weight_actividad=num_actividad
                labels_actividad=dias_actividad
                maximo_actividad=Math.max(...num_actividad)

                /////////////////////////////   ACTIVIDAD  ////////////////////////////////


                const colors_actividad = {
                purple: {
                    default: "rgba(138, 201, 50, 1)",
                    half: "rgba(138, 201, 50, 0.5)",
                    quarter: "rgba(138, 201, 50, 0.25)",
                    zero: "rgba(138, 201, 50, 0)"
                },
                indigo: {
                    default: "rgba(80, 102, 120, 1)",
                    quarter: "rgba(80, 102, 120, 0.25)"
                }
                };

                
                const ctx_actividad = document.getElementById("myChart").getContext("2d");
                ctx_actividad.canvas.height = "100%";
                
                gradient = ctx_actividad.createLinearGradient(0, 25, 0, 300);
                gradient.addColorStop(0, colors_actividad.purple.half);
                gradient.addColorStop(0.35, colors_actividad.purple.quarter);
                gradient.addColorStop(1, colors_actividad.purple.zero);

                const options_actividad = {
                type: "line",
                data: {
                    labels: labels_actividad,
                    datasets: [
                    {
                        fill: true,
                        backgroundColor: gradient,
                        pointBackgroundColor: colors_actividad.purple.default,
                        borderColor: colors_actividad.purple.default,
                        data: weight_actividad,
                        lineTension: 0.2,
                        borderWidth: 2,
                        pointRadius: 3
                    }
                    ]
                },
                options: {
                    layout: {
                    padding: 10
                    },
                    responsive: true,
                    legend: {
                    display: false
                    },
                    title: {
                    display: true,
                    text: "Actividad de los ultimos 7 dias",
                    fontSize: 16
                    },

                    scales: {
                    xAxes: [
                        {
                        gridLines: {
                            display: false
                        },
                        ticks: {
                            padding: 10,
                            autoSkip: false,
                            maxRotation: 15,
                            minRotation: 15
                        }
                        }
                    ],
                    yAxes: [
                        {
                        scaleLabel: {
                            display: false,
                        },
                        gridLines: {
                            display: true,
                            color: colors_actividad.indigo.quarter
                        },
                        ticks: {
                            beginAtZero: true,
                            min:0,
                            padding: 10
                        }
                        }
                    ]
                    }
                }
                };
                window.myLine_actividad = new Chart(ctx_actividad, options_actividad);
                Chart.defaults.global.defaultFontColor = colors_actividad.indigo.default;
                Chart.defaults.global.defaultFontFamily = "Nunito";

                /////////////////////////////////|FIN ACTIVIDAD|/////////////////////////////////////

                /////////////////////////////////|NUMERO DE INCIDENCIAS|//////////////////////////////

                const colors = {
                purple: {
                    default: "rgba(138, 201, 50, 1)",
                    half: "rgba(138, 201, 50, 0.5)",
                    quarter: "rgba(138, 201, 50, 0.25)",
                    zero: "rgba(138, 201, 50, 0)"
                },
                indigo: {
                    default: "rgba(80, 102, 120, 1)",
                    quarter: "rgba(80, 102, 120, 0.25)"
                }
                };

                const ctx = document.getElementById("myChart2").getContext("2d");
                ctx.canvas.height = "100%";
                
                gradient = ctx.createLinearGradient(0, 25, 0, 300);
                gradient.addColorStop(0, colors.purple.half);
                gradient.addColorStop(0.35, colors.purple.quarter);
                gradient.addColorStop(1, colors.purple.zero);

                const options = {
                type: "line",
                data: {
                    labels: labels,
                    datasets: [
                    {
                        fill: true,
                        backgroundColor: gradient,
                        pointBackgroundColor: colors.purple.default,
                        borderColor: colors.purple.default,
                        data: weight,
                        lineTension: 0.2,
                        borderWidth: 2,
                        pointRadius: 3
                    }
                    ]
                },
                options: {
                    layout: {
                    padding: 10
                    },
                    responsive: true,
                    legend: {
                    display: false
                    },
                    title: {
                    display: true,
                    text: "Numero de incidencias @if(Auth::user()->rol=='admin')resueltas @else creadas @endif por día (ultimos 7 dias)",
                    fontSize: 16
                    },

                    scales: {
                    xAxes: [
                        {
                        gridLines: {
                            display: false
                        },
                        ticks: {
                            padding: 10,
                            autoSkip: false,
                            maxRotation: 15,
                            minRotation: 15
                        }
                        }
                    ],
                    yAxes: [
                        {
                        scaleLabel: {
                            display: true,
                            labelString: "Numero de incidencias",
                            padding: 10
                        },
                        gridLines: {
                            display: true,
                            color: colors.indigo.quarter
                        },
                        ticks: {
                            beginAtZero: true,
                            min: 0,
                            padding: 10
                        }
                        }
                    ]
                    }
                }
                };
                window.myLine = new Chart(ctx, options);
                Chart.defaults.global.defaultFontColor = colors.indigo.default;
                Chart.defaults.global.defaultFontFamily = "Nunito";

                /////////////////////////////////|FIN DE NUMERO DE INCIDENCIAS|//////////////////////////////
                
            })}
                
            </script>
        
        <div class="user-detalle-card">
            <h4>Incidencias relacionadas</h4>
            <hr>
            <div class="user-detalle-card-body">
                <table class="main_table">
                    <thead>
                        <tr style="margin-top:0px">
                            <th>Necesidad</th>
                            <th>Fecha petición</th>
                            <th>Fecha limite</th>
                            <th>Descripción</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($nec as $necesidad)
                            <tr style="cursor: pointer;" onclick="window.location.href='necesidad?id={{$necesidad->id}}'">
                                <td>NEC_{{$necesidad->id}} | {{$necesidad->titulo}}</td>
                                <td>{{$necesidad->fecha_solicitud}}</td>
                                <td>{{$necesidad->fecha_limite}}</td>
                                <td>{{substr("$necesidad->descripcion", 0, 40) . "..."}}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <div class="user-detalle-card">
            <h4>Departamentos asignados</h4>
            <hr>
            <div class="user-detalle-card-body">
                <table class="main_table">
                    <thead>
                        <tr>
                            <th>Departamento</th>
                            <th>Descripcion</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($departamento as $d)
                            <tr @if (Auth::user()->rol=="admin") style="cursor: pointer;" onclick="window.location.href='{{route('departamento')}}?id={{$d->id}}'" @endif>
                                <td>{{$d->name}}</td>
                                <td>{{$d->descripcion}}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <div class="user-detalle-card">
            <h4>Proyectos asignados</h4>
            <hr>
            <div class="user-detalle-card-body">
                <table class="main_table">
                    <thead>
                        <tr>
                            <th>Proyecto</th>
                            <th>Descripcion</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($proyecto as $p)
                            <tr @if (Auth::user()->rol=="admin") style="cursor: pointer;" onclick="window.location.href='{{route('proyecto')}}?id={{$p->id}}'" @endif>
                                <td>{{$p->name}}</td>
                                <td>{{$p->descripcion}}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </article>
    <script>

        function crearUsuario(){
            let data={
                'name': document.getElementById('name').value,
                'lastname': document.getElementById('lastname').value,
                'username': document.getElementById('username').value,
                'password': document.getElementById('password').value,
                'rol': document.getElementById('rol').value,
                'email': document.getElementById('email').value
                }
                alert(data);
            fetch("{{route('crearUsuario')}}", {
                headers:{
                    "Content-Type": "application/json",
                    "Accept": "application/json, text-plain, */*",
                    "X-Requested-With": "XMLHttpRequest",
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                method:'POST',
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(function(result){
            })
        }
    </script>
</div>
@endsection