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

@section('content')
<br>
<div class="container usernone">
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Dashboard') }}</div>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    {{ __('You are logged in!') }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
 --}}

@extends('adminlte::page')

@section('title', 'INICIO')
    
@section('content_header')

@stop

@section('content')

<!-- <script type='text/javascript'>
	document.oncontextmenu = function(){return false}
</script> -->
        <style>
            p{
                margin-bottom: 2px;
            }
            .div-bb{
                border: #808B96 1px solid;
            }
            a:hover {
                color: #17202A ;
            }

            /* verde-pastel: 91C88B   55D35E*/
            /* rojo-pastel: E48584    D35555*/
            /* azul-pastel: 8BA0C8    5579D3*/


            /* BOTON DE TOMAR TICKET */
            .cssbuttons-io-button-blue {
            background: #4766B8;
            color: white;
            font-family: inherit;
            padding: 0.35em;
            padding-left: 1.2em;
            font-size: 30px;
            font-weight: 500;
            border-radius: 0.7em;
            border: none;
            letter-spacing: 0.05em;
            display: flex;
            align-items: center;
            box-shadow: inset 0 0 1.6em -0.6em #4766B8;
            overflow: hidden;
            position: relative;
            height: 2.8em;
            padding-right: 3.3em;
            cursor: pointer;
            }

            .cssbuttons-io-button-blue .icon {
            background: white;
            margin-left: 1em;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 1.5em;
            width: 2.8em;
            border-radius: 0.5em;
            box-shadow: 0.1em 0.1em 0.6em 0.2em #4766B8;
            right: 0.3em;
            transition: all 0.3s;
            }

            .cssbuttons-io-button-blue:hover .icon {
            width: calc(100% - 0.6em);
            }

            .cssbuttons-io-button-blue .icon svg {
            width: 1.1em;
            transition: transform 0.3s;
            color: #4766B8;
            }

            .cssbuttons-io-button-blue:hover .icon svg {
            transform: translateX(0.1em);
            }

            .cssbuttons-io-button-blue:active .icon {
            transform: scale(0.95);
            }


            /* BOTON APROBAR TICKET */
            .cssbuttons-io-button-green {
            background: #53A23D;
            color: white;
            font-family: inherit;
            padding: 0.35em;
            padding-left: 1.2em;
            font-size: 30px;
            font-weight: 500;
            border-radius: 0.7em;
            border: none;
            letter-spacing: 0.05em;
            display: flex;
            align-items: center;
            box-shadow: inset 0 0 1.6em -0.6em #53A23D;
            overflow: hidden;
            position: relative;
            height: 2.8em;
            padding-right: 3.3em;
            cursor: pointer;
            }

            .cssbuttons-io-button-green .icon {
            background: white;
            margin-left: 1em;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 1.5em;
            width: 2.8em;
            border-radius: 0.5em;
            box-shadow: 0.1em 0.1em 0.6em 0.2em #53A23D;
            right: 0.3em;
            transition: all 0.3s;
            }

            .cssbuttons-io-button-green:hover .icon {
            width: calc(100% - 0.6em);
            }

            .cssbuttons-io-button-green .icon svg {
            width: 1.1em;
            transition: transform 0.3s;
            color: #53A23D;
            }

            .cssbuttons-io-button-green:hover .icon svg {
            transform: translateX(0.1em);
            }

            .cssbuttons-io-button-green:active .icon {
            transform: scale(0.95);
            }

            /* BOTON ELIMINAR TICKET */
            .cssbuttons-io-button-red {
            background: #B84747;
            color: white;
            font-family: inherit;
            padding: 0.35em;
            padding-left: 1.2em;
            font-size: 30px;
            font-weight: 500;
            border-radius: 0.7em;
            border: none;
            letter-spacing: 0.05em;
            display: flex;
            align-items: center;
            box-shadow: inset 0 0 1.6em -0.6em #B84747;
            overflow: hidden;
            position: relative;
            height: 2.8em;
            padding-right: 3.3em;
            cursor: pointer;
            }

            .cssbuttons-io-button-red .icon {
            background: white;
            margin-left: 1em;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 1.5em;
            width: 2.8em;
            border-radius: 0.5em;
            box-shadow: 0.1em 0.1em 0.6em 0.2em #B84747;
            right: 0.3em;
            transition: all 0.3s;
            }

            .cssbuttons-io-button-red:hover .icon {
            width: calc(100% - 0.6em);
            }

            .cssbuttons-io-button-red .icon svg {
            width: 1.1em;
            transition: transform 0.3s;
            color: #B84747;
            }

            .cssbuttons-io-button-red:hover .icon svg {
            transform: translateX(0.1em);
            }

            .cssbuttons-io-button-red:active .icon {
            transform: scale(0.95);
            }


            .buttons a.active,
            .buttons a.stopActive {
                pointer-events: none;
                opacity: 0.7;


           
            }
            /* .usernone{
                user-select: none;
            } */
            </style>
            <br>

            <section class="content usernone">
                <div class="container-fluid usernone">  
                    <div class="col-12 ">
                        <div class="row">
                            <div class="col-md-6 usernone">
                                <div class="card card-info">
                                    @foreach ($upTicket as $upTickets)
                                    <br />
<b>Warning</b>:  Undefined variable $upTickets in <b>C:\xampp\htdocs\systemcolas\resources\views\home.blade.php</b> on line <b>245</b><br />
<br />
<b>Warning</b>:  Attempt to read property "tramite" on null in <b>C:\xampp\htdocs\systemcolas\resources\views\home.blade.php</b> on line <b>245</b><br />
                                    <div class="card-header">
                                        <h3 class="card-title">ATENCIÓN DE TURNOS</h3>
                                    </div>
                                    <div class="card-body">
                                        <div class="row justify-content-center">
                                            <div class="col-3">
                                                <p class="usernone">Turno actual</p>
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span style="background-color: #E6EEFF; border: solid blue 2px" class="input-group-text">
                                                            <i class="fas fa-ticket-alt"></i>
                                                        </span>
                                                    </div>
                                                    <input type="text" style="background-color: white; border: solid blue 2px; font-size: 1.5rem; text-align: center;" class="form-control usernone" value="{{$upTickets->codatencion}}" disabled>
                                                </div>
                                            </div>
                                            <div class="col-9">
                                            <p class="usernone">Tramite actual</p>
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span style="background-color: #E6EEFF; border: solid blue 2px" class="input-group-text">
                                                            <i class="fas fa-clipboard"></i>
                                                        </span>
                                                    </div>
                                                    <input type="text" style="background-color: white; border: solid blue 2px;" class="form-control usernone" value="<br />
<b>Warning</b>:  Undefined variable $tramite in <b>C:\xampp\htdocs\systemcolas\resources\views\home.blade.php</b> on line <b>293</b><br />
" disabled>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row usernone">
                                            <div class="col-6">
                                                <p class="usernone">Tiempo Creación:</p>
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span style="background-color: #FFEFDE; border: solid orange 2px" class="input-group-text">
                                                            <i class="fas fa-clock"></i>
                                                        </span>
                                                    </div>
                                                    <input type="text" style="background-color: white; border: solid orange 2px" class="form-control usernone" value="{{$upTickets->created_at}}" disabled>
                                                </div>
                                            </div>
                                            <div class="col-6 usernone">
                                                <p class="usernone">Turnos en Espera:</p>
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span style="border: solid gray 2px" class="input-group-text">
                                                            <i class="fas fa-user-clock"></i>
                                                        </span>
                                                    </div>
                                                    <input type="text" style="background-color: white; border: solid gray 2px" class="form-control usernone" value="{{$contEspera}}" disabled>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-6">
                                                <p class="">Tiempo Atención:</p>
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span style="background-color: #FFEFDE; border: solid orange 2px" class="input-group-text">
                                                            <i class="fas fa-clock"></i>
                                                        </span>
                                                    </div>
                                                    <input type="text" style="background-color: white; border: solid orange 2px" class="form-control usernone" value="{{$upTickets->last_attention}}" disabled>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <p class="">Turnos Atendidos:</p>
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span style="background-color: #DEF2D4; border: solid green 2px" class="input-group-text">
                                                            <i class="fas fa-user-check"></i>
                                                        </span>
                                                    </div>
                                                <input type="text" style="background-color: white; border: solid green 2px" class="form-control" value="{{$contAtendido}}" disabled>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-6">
                                                <p class="">Tiempo Transcurrido:</p>
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span style="background-color: #FFEFDE; border: solid orange 2px;" class="input-group-text">
                                                            <i class="fas fa-stopwatch"></i>
                                                        </span>
                                                    </div>
                                                    <div style="background-color: white; border: solid orange 2px" class="time form-control usernone">
                                                        <span class="hour">00</span>
                                                        <span class="colon">:</span>
                                                        <span class="minute">00</span>
                                                        <span class="colon">:</span>
                                                        <span class="second">00</span>
                                                        <span class="colo ms-colon">:</span>
                                                        <span class="millisecond">00</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <p class="">Turnos Anulados:</p>
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span style="background-color: #F2D4D4; border: solid red 2px" class="input-group-text">
                                                            <i class="fas fa-user-times"></i>
                                                        </span>
                                                    </div>
                                                <input type="text" style="background-color: white; border: solid red 2px" class="form-control" value="{{$contBorrados}}" disabled>
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-12 col-md-12">
                                        <div class="container-fluid">
                                            <div class="news text-center">
                                                <h2>EN ESPERA</h2>
                                            </div>
                                        </div>
                                    </div>
                                    @foreach ($ticket as $tickets)

                                    <br />
<b>Warning</b>:  Undefined variable $tickets in <b>C:\xampp\htdocs\systemcolas\resources\views\home.blade.php</b> on line <b>395</b><br />
<br />
<b>Warning</b>:  Attempt to read property "tramite" on null in <b>C:\xampp\htdocs\systemcolas\resources\views\home.blade.php</b> on line <b>395</b><br />

                                    <div class="col-12 col-md-6">
                                        <div class="small-box">
                                            <div class="inline-flex mb-3 py-1 fw-semibold border border-success-subtle rounded-2" style="text-align: center; " role="alert">
                                                <h1 style="font-size: 2rem; color: #000000">{{ $tickets->codatencion }}</h1>
                                                <p style=" color: #96191d"><br />
<b>Warning</b>:  Undefined variable $tramite in <b>C:\xampp\htdocs\systemcolas\resources\views\home.blade.php</b> on line <b>424</b><br />
</p>
                                            </div>
                                            <div class="icon">
                                                <i class="ion ion-bag"></i>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <br>
            <br>

            <div class="row">
                <div class="col-md-12">
                    <div class="row justify-content-center">
                        @if(isset($upTickets->codatencion))
                        <div class="col-md-3 m-2">
                            <form action="update/{{$upTickets->id}}" method="POST">
                            @csrf
                                <input type="hidden" value="" id="cronometro" name="cronometro">
                                <button class="cssbuttons-io-button-green" style="width: 400px; height: 60px; color: white;">
                                    Aprobar Ticket
                                    <div class="icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-patch-check" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd" d="M10.354 6.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7 8.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
                                    <path d="m10.273 2.513-.921-.944.715-.698.622.637.89-.011a2.89 2.89 0 0 1 2.924 2.924l-.01.89.636.622a2.89 2.89 0 0 1 0 4.134l-.637.622.011.89a2.89 2.89 0 0 1-2.924 2.924l-.89-.01-.622.636a2.89 2.89 0 0 1-4.134 0l-.622-.637-.89.011a2.89 2.89 0 0 1-2.924-2.924l.01-.89-.636-.622a2.89 2.89 0 0 1 0-4.134l.637-.622-.011-.89a2.89 2.89 0 0 1 2.924-2.924l.89.01.622-.636a2.89 2.89 0 0 1 4.134 0l-.715.698a1.89 1.89 0 0 0-2.704 0l-.92.944-1.32-.016a1.89 1.89 0 0 0-1.911 1.912l.016 1.318-.944.921a1.89 1.89 0 0 0 0 2.704l.944.92-.016 1.32a1.89 1.89 0 0 0 1.912 1.911l1.318-.016.921.944a1.89 1.89 0 0 0 2.704 0l.92-.944 1.32.016a1.89 1.89 0 0 0 1.911-1.912l-.016-1.318.944-.921a1.89 1.89 0 0 0 0-2.704l-.944-.92.016-1.32a1.89 1.89 0 0 0-1.912-1.911l-1.318.016z"/>
                                    </svg>
                                    </div>
                                </button>
                            </form>
                            
                            <!-- <a href="update/{{$upTickets->codatencion}}/{{$upTickets->estado}}" class="btn-slide-left-green col-12 pt-3 pb-3 btn-lg div-bb">
                                <i class="fa fa-lg fa-check" style=" display: flex; justify-content: center;"></i>
                            </a> -->
                        </div>
                        <div class="col-md-3 m-2">
                            <a href="destroy/{{$upTickets->codatencion}}/{{$upTickets->estado}}" class="cssbuttons-io-button-red" style="width: 400px; height: 60px; color: white;">
                                Anular Ticket
                                <div class="icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-trash3" viewBox="0 0 16 16">
                                <path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5"/>
                                </svg>
                                </div>
                            </a>
                            <!-- <a href="destroy/{{$upTickets->codatencion}}/{{$upTickets->estado}}" class="btn-slide-left-red col-12 pt-3 pb-3 btn-lg div-bb">
                                <i class="fa fa-lg fa-trash" style=" display: flex; justify-content: center;"></i>
                            </a> -->
                        </div>
                        @else
                        <div class="col-md-3">
                            <!-- <a href="llamado" class="btn-slide-left-blue col-12 pt-3 pb-3 btn-lg div-bb start">
                                <i class="fa fa-lg fa-arrow-right" style=" display: flex; justify-content: center;"></i>
                            </a> -->

                            <a href="llamado" class="cssbuttons-io-button-blue start" style="width: 400px; height: 60px; color: white;">
                                Tomar Ticket
                                <div class="icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-ticket-detailed start" viewBox="0 0 16 16">
                                    <path d="M4 5.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5M5 7a1 1 0 0 0 0 2h6a1 1 0 1 0 0-2z"/>
                                    <path d="M0 4.5A1.5 1.5 0 0 1 1.5 3h13A1.5 1.5 0 0 1 16 4.5V6a.5.5 0 0 1-.5.5 1.5 1.5 0 0 0 0 3 .5.5 0 0 1 .5.5v1.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 11.5V10a.5.5 0 0 1 .5-.5 1.5 1.5 0 1 0 0-3A.5.5 0 0 1 0 6zM1.5 4a.5.5 0 0 0-.5.5v1.05a2.5 2.5 0 0 1 0 4.9v1.05a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-1.05a2.5 2.5 0 0 1 0-4.9V4.5a.5.5 0 0 0-.5-.5z"/>
                                </svg>
                                </div>
                            </a>
                        </div>
                        @endif
                    </div>
                </div>
            </div>



@stop

@section('css')
@stop

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

@if (session('cronometro') == 'ok')
    <script>
    
    let hr = min = sec = ms = 0;
    let startTimer;

    /* const startBtn = document.querySelector(".start");
    const stopBtn = document.querySelector(".stop");

    startBtn.addEventListener("click", start);
    stopBtn.addEventListener("click", stop); */
    console.log('fuera');
    /* function start() { */
        /* startBtn.classList.add("active");
        stopBtn.classList.remove("stopActive"); */
        console.log('cronometro');
        
        startTimer = setInterval(() => {
            ms++;
            if (ms == 100) {
                sec++;
                ms = 0;
            }
            if (sec == 60) {
                min++;
                sec = 0;
            }
            if (min == 60) {
                hr++;
                min = 0;
            }
            putValue();
        }, 10);
   /*  } */

    /* function stop() {
        startBtn.classList.remove("active");
        stopBtn.classList.add("stopActive");
        clearInterval(startTimer);
    } */
</script>
@endif

    <script>
        $(document).ready(function() {
            var pageRefresh = 500;
            setInterval(function() {
                refresh();
            }, pageRefresh);
        });
        
        function refresh() {
            $('#div-refresh').load(location.href + " #div-refresh");
            $('#div-cli').load(location.href + " #div-cli");
        }

        function putValue() {
        document.querySelector('.millisecond').innerHTML = ms < 10 ? "00" + ms : ms < 100 ? "0" + ms : ms;
        document.querySelector('.second').innerHTML = sec < 10 ? "0" + sec : sec;
        document.querySelector('.minute').innerHTML = min < 10 ? "0" + min : min;
        document.querySelector('.hour').innerHTML = hr < 10 ? "0" + hr : hr;

        document.querySelector('#cronometro').value = hr + ':' + min + ':' + sec + ':' + ms;
        }
    </script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
        
@stop