@extends('adminlte::page')

@section('title', 'Dispositivo')

@section('content_header')

    <a class="btn btn-primary btn -sm float-right" href="{{ route('mis_tickets.index') }}"><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')

    @include('components.dispositivo')

@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