@extends('adminlte::page')

@section('title', 'Detalles')

@section('content_header')


    <a class="btn btn-primary btn -sm float-right" href="{{ URL::previous() }}"><i
        class='bi bi-arrow-left-circle'></i> Atrás</a>



    <div>
        <h1 class="pb-3 mb-0 small lh-sm ml-2">
            <strong class="d-block text-gray-dark">{{ $dispositivo->tipodispositivo->name }} {{ $dispositivo->marca->name }}
                Ref: {{ $dispositivo->referencia }}</strong>
            <p class="text-sm"> Serial: {{ $dispositivo->serial }} | Placa: {{ $dispositivo->placa }}</p>
        </h1>
    </div>


@stop

@section('content')

<div class="row mb-3">
    <div class="col-5 themed-grid-col">
        <!-- Lateral izquierdo -->

        <div class="card card-outline card-primary">

            <div class="card-body">
                @if ($dispositivo->status == 'DESACTIVADO')
                    <div class=" btn btn-outline-danger float-right"><strong>Equipo inactivo</strong></div>
                @endif
                <div class="card-header">
                    <strong> Datos del equipo </strong>
                </div>
                <div class="py-4">

                    <p class="clearfix">
                        <span class="float-left">
                            Serial
                        </span>
                        <span class="float-right text-muted">
                            {{ $dispositivo->serial }}
                        </span>
                    </p>
                    <p class="clearfix">
                        <span class="float-left">
                            Placa
                        </span>
                        <span class="float-right text-muted">

                            {{ $dispositivo->placa }}

                        </span>
                    </p>
                    <p class="clearfix">
                        <span class="float-left">
                            Referencia
                        </span>
                        <span class="float-right text-muted">
                            {{ $dispositivo->referencia }}
                        </span>
                    </p>

                </div>


                @if ($dispositivo->ComponenteDispositivo->count() > 0)

                    <div class="card-header">
                        <strong> Componentes</strong>
                    </div>
                    @foreach ($dispositivo->ComponenteDispositivo as $componentedispositivo)
                    @if($componentedispositivo->status == 'ACTIVO')
                        <div class="py-3">
                            <span class="float-left">
                                {{ $componentedispositivo->ComponenteExtra->name }}
                            </span> <br>
                            <span class="ml-5 float-right text-muted">
                                {{ $componentedispositivo->Descripcion }}
                            </span>
                        </div>
                        @endif
                    @endforeach
                @endif

                @if ($dispositivo->red)

                <div class="card-header">
                    <strong> Configuración de red</strong>
                </div>

                    <div class="py-3">
                        <span class="float-left">
                           Dominio
                        </span> <br>
                        <span class="ml-5 float-right text-muted">
                           {{ $dispositivo->red->dominio}}
                        </span>
                    </div>

                    <div class="py-3">
                        <span class="float-left">
                           Nombre del host
                        </span> <br>
                        <span class="ml-5 float-right text-muted">
                           {{ $dispositivo->red->nombre_dominio}}
                        </span>
                    </div>

                    <div class="py-3">
                        <span class="float-left">
                           Tipo de ip
                        </span> <br>
                        <span class="ml-5 float-right text-muted">
                           {{ $dispositivo->red->tipo_ip}}
                        </span>
                    </div>

                    <div class="py-3">
                        <span class="float-left">
                           Modo de direccionamiento
                        </span> <br>
                        <span class="ml-5 float-right text-muted">
                           {{ ucwords($dispositivo->red->tipo_direccion) }}
                        </span>
                    </div>

                    <div class="py-3">
                        <span class="float-left">
                           Dirección IP
                        </span> <br>
                        <span class="ml-5 float-right text-muted">
                           {{ $dispositivo->red->direccion_ip}}
                        </span>
                    </div>

                    <div class="py-3">
                        <span class="float-left">
                          Mascara de red
                        </span> <br>
                        <span class="ml-5 float-right text-muted">
                           {{ $dispositivo->red->mascara_red}}
                        </span>
                    </div>

                    <div class="py-3">
                        <span class="float-left">
                          Gateway
                        </span> <br>
                        <span class="ml-5 float-right text-muted">
                           {{ $dispositivo->red->gateway}}
                        </span>
                    </div>

                    <div class="py-3">
                        <span class="float-left">
                          Dirección MAC
                        </span> <br>
                        <span class="ml-5 float-right text-muted">
                           {{ $dispositivo->red->mac}}
                        </span>
                    </div>

                @endif

                @if ($licencias)
                <div class="card-header">
                    <strong> Licencias de uso</strong>
                </div>
                @foreach ($licencias as $licencia )

                <div class="py-3">
                    <span class="float-left">
                     {{ $licencia->licencia->name }}
                    </span> <br>
                    <span class="ml-5 float-right text-muted">
                        {{ $licencia->licencia->serial }}
                    </span>
                </div>

                @endforeach

                @endif
            </div>
        </div>




        @if ($dispositivo->seguimientoscambios->count() > 0)
        <div class="card card-outline card-primary">
            <div class="card-body">
                <div class="card-header">
                    <strong> Historial de componentes</strong>
                </div>

                <div class="list-group w-auto">

                    @foreach($dispositivo->seguimientoscambios as $seguimiento)
                    <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
                        @if($seguimiento->status == 'ADD')
                        <p class="mr-2 mt-2">✔️​</p>
                        @else
                        <p class="mr-2 mt-2">❌</p>​
                        @endif
                      <div class="d-flex gap-2 w-100 justify-content-between">
                        <div>
                          <h6 class="mb-0"> {{ $seguimiento->componentedispositivo->ComponenteExtra->name }} |  {{ $seguimiento->componentedispositivo->Descripcion }}</h6>
                          <p class="mb-0 opacity-75">{{ $seguimiento->user->name }}</p>
                        </div>
                        <small class="opacity-50 text-nowrap">{{ \Carbon\Carbon::parse($seguimiento->created_at)->format('d M Y') }}</small>
                      </div>
                    </a>

                    @endforeach
                  </div>
            </div>

        </div>
        @endif
    </div>





    <div class="col-7 themed-grid-col">
        <!-- Lateral derecho -->

        <div class="card card-outline card-primary">
            <div class="card-body ">
                <div class="card-header">
                    <strong> Ubicación actual</strong>
                </div>
                <div class="py-4">
                    <p class="clearfix">
                        <span class="float-left">
                            Fecha de ingreso
                        </span>
                        <span class="float-right text-muted">
                            {{ \Carbon\Carbon::parse($dispositivo->created_at)->format('d M Y') }}
                        </span>
                    </p>
                    <p class="clearfix">
                        <span class="float-left">
                            Dependencia actual
                        </span>
                        <span class="float-right text-muted">
                            @if ($dispositivo->dependencia_id)
                                {{ $dispositivo->dependencia->name }}
                            @else
                                Sin asignar
                            @endif
                        </span>
                    </p>
                    <p class="clearfix">
                        <span class="float-left">
                            Usuario actual
                        </span>
                        <span class="float-right text-muted">
                            @if ($dispositivo->user_id)
                                {{ $dispositivo->user->name }}
                            @else
                                Sin asignar
                            @endif

                        </span>
                    </p>

                    <div x-data="{
                        open: false,
                        get isOpen() { return this.open },
                        toggle() { this.open = !this.open },
                    }">

                    <div class="float-right mb-6 mt-4" style="cursor: pointer">
                        <h3 class="card-title align-items-start flex-column fw-bolder text-dark fs-3 cursor-pointer" @click="toggle()">
                            Ver <span class="fs-6 text-primary">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    class="bi bi-binoculars-fill" viewBox="0 0 16 16">
                                    <path
                                        d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" />
                                </svg>
                            </span>
                        </h3>
                    </div>


                    <div x-show="isOpen">
                           <br>
                           <div class="card-header mt-4 mb-4">
                            <strong> Historial del equipo</strong>
                        </div>
                           @foreach ($dispositivo->asignacion as $asignacion)

                           <p class="clearfix">
                            <span class="float-left">
                                Fecha de asignación
                            </span>
                            <span class="float-right text-muted">
                                {{ \Carbon\Carbon::parse($asignacion->created_at)->format('d M Y') }}
                            </span>
                        </p>
                        <p class="clearfix">
                            <span class="float-left">
                                Dependencia
                            </span>
                            <span class="float-right text-muted">
                                @if ($asignacion->dependencia_id)
                                    {{ $asignacion->dependencia->name }}
                                @else
                                @endif
                            </span>
                        </p>
                        <p class="clearfix">
                            <span class="float-left">
                                Usuario
                            </span>
                            <span class="float-right text-muted">
                                @if ($asignacion->user_id)
                                    {{ $asignacion->user->name }}
                                @else
                                @endif

                            </span>
                        </p>
                        <hr>

                           @endforeach
                    </div>
                    </div>

                </div>

            </div>
        </div>


        @if ($dispositivo->mantenimiento->count() > 0)
            <div class="card card-outline card-primary">
                <div class="card-body">
                    <div class="card-header">
                        <strong> Historial de mantenimiento </strong>
                    </div>
                    @foreach ($dispositivo->mantenimiento as $mantenimiento)
                        <div class="py-4">
                            <p class="clearfix">
                                <span class="float-left">
                                    Ticket Nro.
                                </span>
                                <span class="float-right text-muted">
                                    <a href="{{ route('soporte.informe', $mantenimiento->ticket_id) }}">
                                    {{ $mantenimiento->ticket_id }}
                                    </a>
                                </span>
                            </p>
                            <p class="clearfix">
                                <span class="float-left">
                                    Falla del dispositivo
                                </span>
                                <span class="float-right text-muted">
                                    {{ $mantenimiento->ticket->descripcion }}
                                    </a>
                                </span>
                            </p>
                           <strong>Concepto técnico</strong>
                            <p class="clearfix">
                                <span class="float-left">
                                    Técnico
                                </span>
                                <span class="float-right text-muted">
                                    {{ $mantenimiento->user->name }}
                                </span>
                            </p>
                            <p class="clearfix">
                                <span class="float-left">
                                    Detalle de mantenimiento
                                </span>
                                <span class="float-right text-muted">
                                    {{ $mantenimiento->concepto }}
                                </span>
                            </p>
                        </div>
                    <hr>
                    @endforeach

                </div>
            </div>
        @endif




        @if ($dispositivo->equipoBaja)
            <div class="card card-outline card-primary">
                <div class="card-body">
                    <div class="card-header">
                        <strong> Informe técnico para dar de baja el dispositivo </strong>
                    </div>

                    <div class="py-4">

                        <p class="clearfix">
                            <span class="float-left">
                                Técnico
                            </span>
                            <span class="float-right text-muted">
                                {{ $dispositivo->equipoBaja->user->name }}
                            </span>
                        </p>
                        <p class="clearfix">
                            <span class="float-left">
                                Concepto técnico
                            </span>
                            <span class="float-right text-muted">
                                {{ $dispositivo->equipoBaja->concepto }}
                            </span>
                        </p>
                        <p class="clearfix">
                            <span class="float-left">
                                Fecha
                            </span>
                            <span class="float-right text-muted">
                                {{ \Carbon\Carbon::parse($dispositivo->equipoBaja->created_at)->format('d M Y') }}
                            </span>
                        </p>
                    </div>
                </div>
            </div>
        @endif

    </div>

</div>


@stop

@section('css')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/css/admin_custom.css">

    <style>
        #mostrarmas {

            display: block;
        }

        #historialcompleto {

            display: none;
        }

        .cr {
            width: 130px;
            padding: 10px;
            position: relative;
            text-align: center;
            color: #f0f0f0;
            border-radius: 10px;
        }



        /* Positions */

        .cr-top {
            top: -10px;
        }





        .cr-left {
            right: auto;
        }

        /* Rotations */





        /* Colors */

        .cr-white {
            background-color: #f0f0f0;
            color: #444;
        }

        .cr-black {
            background-color: #333;
        }

        .cr-grey {
            background-color: #999;
        }

        .cr-blue {
            background-color: #39d;
        }

        .cr-green {
            background-color: #2c7;
        }

        .cr-turquoise {
            background-color: #1b9;
        }

        .cr-purple {
            background-color: #95b;
        }

        .cr-red {
            background-color: #e43;
        }

        .cr-orange {
            background-color: #e82;
        }

        .cr-yellow {
            background-color: #ec0;
        }
    </style>



@stop

@section('js')
    <script>
        console.log('Hi!');
    </script>
    <script type="text/javascript">
        function mostrar() {
            document.getElementById('historialcompleto').style.display = 'block';
            document.getElementById('mostrarmas').style.display = 'none';
        }

        function ocultar() {
            document.getElementById('historialcompleto').style.display = 'none';
            document.getElementById('mostrarmas').style.display = 'block';
        }
    </script>
@stop