@extends('layouts.app')

@section('content')
@if($departamento==null)
<div class="alert alert-danger" style="margin-inline: 20px;" role="alert">
  No existe tal departamento
</div>
@else
<div class="ind">
    <article>
        <div class="user-detalle-header">
            <i style="font-size: 100px" class="bi bi-building-gear"></i> 
            <h2>{{$departamento->name}}</h2>
            @if($departamento->usuario_id!=null)
            <a href="{{route('usuariodetalle') . '?id=' . $departamento->usuario_id}}" class="depart-responsable"><i class="bi bi-person-fill-gear"></i> {{$departamento->usuario_name . ' ' . $departamento->usuario_lastname}}</a>
            @endif
            <span class="depart-descripcion">{{$departamento->descripcion}}</span>
        </div>
        <hr>
        <div class="user-nums-cont">
            <div class="user-nums-card">
                <div class="user-nums-number">
                    {{count($usuarios_asignados)}}
                </div>
                <div class="user-nums-title">
                    <i class="bi bi-person-fill"></i> Usuarios asignados
                </div>
            </div>
            <div class="user-nums-card">
                <div class="user-nums-number">
                    {{count($nec_dep)}}
                </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($proyectos_asignados)}}
                </div>
                <div class="user-nums-title">
                    <i class="bi bi-bezier2"></i> Proyectos asignados
                </div>
            </div>
            <div class="user-nums-card">
                <div class="user-nums-number">
                    {{count($nec_totales)}}
                </div>
                <div class="user-nums-title">
                    <i class="bi bi-archive-fill"></i> @if(count($nec_totales)==1)Necesidad @else Necesidades @endif en total
                </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 nombres_mes=["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]
                    const UrlParam = new URLSearchParams(window.location.search);
                    id = UrlParam.get('id');
                    if(id==null){
                        id=1
                    }
                    let data={
                    'id': id
                    }
                    window.onload=function(){fetch("{{route('datosDepartamento')}}", {
                        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>`
                    medias = [];
                    meses = [];
                    num_incs = [];
                    result.medias_cierre.forEach(number=>{
                        if(number.media_cierre!=null){
                            numero=parseInt(number.media_cierre, 10);
                        }
                        else{
                            numero=0
                        }
                        medias.push(numero)
                        meses.push(nombres_mes[number.mes - 1])
                        año=number.año
                    })

                    result.num_inc.forEach(number=>{
                        if(number.num_incidencias!=null){
                            numero=parseInt(number.num_incidencias, 10);
                        }
                        else{
                            numero=0
                        }
                        num_incs.push(numero)
                    })

                    weight=medias
                    labels=meses

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


                    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("myChart").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: "Media de ciarre de incidencias (en horas)",
                        fontSize: 16
                        },

                        scales: {
                        xAxes: [
                            {
                            scaleLabel: {
                                display: true,
                                labelString: año,
                                padding: 10
                            },
                            gridLines: {
                                display: false
                            },
                            ticks: {
                                padding: 10,
                                autoSkip: false,
                                maxRotation: 15,
                                minRotation: 15
                            }
                            }
                        ],
                        yAxes: [
                            {
                            scaleLabel: {
                                display: true,
                                labelString: "Horas",
                                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 ACTIVIDAD|/////////////////////////////////////
                    /////////////////////////|NUMERO DE INCIDENCIAS POR MES|/////////////////////////////

                    const ctx2 = document.getElementById("myChart2").getContext("2d");
                        ctx2.canvas.height = "100%";

                        gradient = ctx2.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 options2 = {
                        type: "line",
                        data: {
                            labels: labels,
                            datasets: [
                            {
                                fill: true,
                                backgroundColor: gradient,
                                pointBackgroundColor: colors.purple.default,
                                borderColor: colors.purple.default,
                                data: num_incs,
                                lineTension: 0.2,
                                borderWidth: 2,
                                pointRadius: 3
                            }
                            ]
                        },
                        options: {
                            layout: {
                            padding: 10
                            },
                            responsive: true,
                            legend: {
                            display: false
                            },
                            title: {
                            display: true,
                            text: "Numero de incidencias por mes",
                            fontSize: 16
                            },

                            scales: {
                            xAxes: [
                                {
                                scaleLabel: {
                                    display: true,
                                    labelString: año,
                                    padding: 10
                                },
                                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(ctx2, options2);
                        Chart.defaults.global.defaultFontColor = colors.indigo.default;
                        Chart.defaults.global.defaultFontFamily = "Nunito";
                    })
                    ///////////////////|FIN NUMERO DE INCIDENCIAS|////////////////////////////
                }
                </script>
            
            <div class="user-detalle-card">
            <h4>Miembros</h4>
            <hr>
            <div class="user-detalle-card-body">
            <table class="main_table">
                <thead>
                    <tr style="margin-top:0px">
                        <th>Nombre</th>
                        <th>Usuario</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($users as $user)
                        <tr style="cursor: pointer;" onclick="window.location.href='usuariodetalle?id={{$user->id}}'">
                            <td>{{$user->name}} {{$user->lastname}}</td>
                            <td>{{$user->username}}</td>
                            <td>{{$user->email}}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            </div>
        </div>
        <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_dep 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 id="proy-edit-cont" class="proy-edit-cont">
            <div class="proy-edit-cont-header">
                <h2>Edicion del departamento {{$departamento->name}}</h2>
                <hr>
            </div>
            <div class="proy-edit-cont-body">
                <form id="editar-departamento" action="{{route('editarDepartamento')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="text" style="display:none;" name="id" value="{{$departamento->id}}">
                    <div class="proy-edit-cont-form-cont">
                        <div class="proy-edit-cont-form-ind">
                            <label for="">Nombre</label>
                            <input type="text" maxlenght="150" name="name_edit" value="{{$departamento->name}}" required>
                        </div>
                        <div class="proy-edit-cont-form-ind" style="margin-left: 20px;">
                            <label for="">Responsable</label>
                            <select name="responsable_edit" id="">
                                <option value="">Selecciona un responsable</option>
                                @foreach ($usuarios as $user)
                                    <option @if($user->id==$departamento->responsable) selected @endif value="{{$user->id}}">{{$user->name}} {{$user->lastname}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div style="margin-top: 20px;" class="proy-edit-cont-form-ind">
                        <label for="">Descripcion</label>
                        <textarea name="descripcion_edit" maxlenght="200" value="{{$departamento->descripcion}}" id="" cols="30" rows="5">{{$departamento->descripcion}}</textarea>
                    </div>
                </form>
            </div>
            <div class="proy-edit-cont-footer">
                <button class="proy-edit-guardar-bt" title="Aplicar cambios" type="submit" form="editar-departamento"><i class="bi bi-check2"></i></button>
            </div>
        </div>
        <button id="proy-edit-bt" class="proy-edit-bt" onclick="verEdit()"><i class="bi bi-pencil"></i></button>
        <script>
            function verEdit(){
                document.getElementById("proy-edit-cont").style.height="calc(100vh - 100px)"
                document.getElementById("proy-edit-cont").style.width="calc(100vw - 50px)"
                document.getElementById("proy-edit-bt").setAttribute('onclick', 'hideEdit()')
                document.getElementById("proy-edit-bt").setAttribute('class', 'proy-edit-bt-opened')
                document.getElementById("proy-edit-bt").innerHTML='<i class="bi bi-x-lg"></i>'
            }

            function hideEdit(){
                document.getElementById("proy-edit-cont").style.height="50px"
                document.getElementById("proy-edit-cont").style.width="50px"
                document.getElementById("proy-edit-bt").setAttribute('onclick', 'verEdit()')
                document.getElementById("proy-edit-bt").setAttribute('class', 'proy-edit-bt')
                document.getElementById("proy-edit-bt").innerHTML='<i class="bi bi-pencil"></i>'
            }
        </script>
    </article>
</div>
@endif
@endsection