@extends('layouts.app')

@section('styles')
<link rel="stylesheet" href="{{ asset('css/gallery.min.css') }}" />
@endsection

@section('scripts')
<script src="{{ asset('js/visor.js') }}" defer></script>
{{--
<script src="{{ asset('js/gallery.js') }}" defer></script>
<script src="{{ asset('js/raphael.min.js') }}" defer></script>
<script src="{{ asset('js/measure.js') }}" defer></script>
--}}
@endsection

@section('content')

@include('health.actions')
<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="card mb-4">
                <div class="card-header bg-{{ $color }} text-white">Datos del estudio</div>
                <div class="card-body p-0">
                    <div>
                        <table class="table table-stripped table-responsive-stack" id="tblDatosEstudio">
                            <thead>
                                <tr>
                                    <th>ID paciente</th>
                                    <th>Nombre</th>
                                    <th>Estudio</th>
                                    <th>Tipo</th>
                                    <th>Fecha</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>{{ $study->pat_id }}</td>
                                    <td>{{ $study->pat_name }}</td>
                                    <td>{{ $study->study_desc }}</td>
                                    <td>{{ $study->mods_in_study }}</td>
                                    <td>{{ $study->study_datetime }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3 order-3 order-sm-2">
            <div class="card mb-4">
                <div class="card-header bg-{{ $color }} text-white" data-toggle="collapse" data-target="#seriesContainer">
                    Series
                    <i class="fa fa-minus float-right mt-1" id="marcSeries"></i>
                </div>
                <div class="card-body collapse show" id="seriesContainer">
                    @foreach($series as $k => $serie)
                    <a class="series-link
                    @if($current_serie_iuid == $serie->series_iuid)
                    active
                    @endif
                    " href="{{ route('studies.view', [$study->study_pk, $hash, $serie->pk]) }}">
                        <img src="{{ route('studies.image', $covers[$serie->series_iuid]) }}" loading="eager">
                        <span>
                            {{ $serie->series_desc ?? '-' }}
                        </span>
                        <small>
                            Cantidad de imágenes:
                            {{ $serie->num_instances }}
                        </small>
                    </a>
                    @endforeach
                </div>
            </div>

        </div>

        <div class="col-md-9 order-2 order-sm-3">

            @include('health.downloads')

            <div class="card mb-4" id="visor-container">
                <div class="card-header bg-{{ $color }} text-white">Visor de imágenes</div>
                <div class="card-body">
                    <div class="visor">
                        <div id="visor-ppal" class="visor-ppal">
                        <div class="overlay">
                            <div id="">{{ $study->pat_name }}</div>
                            <div id="">{{ $study->pat_id }}</div>
                        </div>
                        <div class="overlay">
                            <div id="">{{ $study->study_desc }}</div>
                            <div id="">{{ $study->study_date }}</div>
                        </div>
                            <img id="visor-img-ppal" src="" title="Doble clic para iniciar/detener">
                        </div>
                        <div class="visor-thumbs">
                            @foreach($images as $image)
                            <a href="javascript:void(0)" id="image_{{ $loop->index }}" onclick="changeImage(this);" class="visor-img">
                                <img src="{{ route('studies.image', $image) }}">
                            </a>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="card-footer text-center">
                    <div style="position: relative;" class="d-inline">
                        <span style="position: absolute; top: -20px; left: 15px; font-size:10px;">
                            - Brillo +
                        </span>
                        <button class="btn btn-secondary btn-sm mr-2" onclick="brigthnes(false)" title="Brillo -">
                            <i class="fa fa-sun-o" style="color:#c3c3c3;"></i>
                        </button>
                        <button class="btn btn-secondary btn-sm mr-2" onclick="brigthnes(true)" title="Brillo +">
                            <i class="fa fa-sun-o"></i>
                        </button>
                    </div>

                    <div style="position: relative;" class="d-inline">
                        <span style="position: absolute; top: -20px; left: 5px; font-size:10px;">
                            - Contraste +
                        </span>
                        <button class="btn btn-secondary btn-sm mr-2" onclick="contrast(false)" title="Contraste -">
                            <i class="fa fa-moon-o" style="color:#c3c3c3;"></i>
                        </button>
                        <button class="btn btn-secondary btn-sm mr-2" onclick="contrast(true)" title="Contraste +">
                            <i class="fa fa-moon-o"></i>
                        </button>
                    </div>

                    <div style="position: relative;" class="d-inline">
                        <span style="position: absolute; top: -20px; left: 15px; font-size:10px;">
                            - Zoom +
                        </span>
                        <button class="btn btn-secondary btn-sm mr-2" onclick="zoomImage(false)" title="Zoom -">
                            <i class="fa fa-search-minus" style="color:#c3c3c3;"></i>
                        </button>
                        <button class="btn btn-secondary btn-sm mr-2" onclick="zoomImage(true)" title="Zoom +">
                            <i class="fa fa-search-plus"></i>
                        </button>
                    </div>

                    <button class="btn bg-purple text-white btn-sm mr-2" onclick="invertImage()" title="Invertir colores">
                        <i class="fa fa-adjust"></i>
                    </button>

                    <button class="btn btn-danger text-white btn-sm mr-2" onclick="resetImage()" title="Restablecer">
                        <i class="fa fa-undo"></i>
                    </button>

                    <br class="d-sm-none">

                    <button class="btn btn-success btn-sm mr-2" onclick="autoplay(true)" title="Autoplay">
                        <i class="fa fa-play" id="btnPlay"></i>
                    </button>

                    <input type="number" min="0.05" step=".05" max="1" id="velocidad" value=".3" class="form-control mt-2 mt-sm-0" style="display: inline-block; width: 80px;">

                    <button class="btn btn-primary btn-sm ml-2" onclick="fullscreen();" title="Pantalla completa">
                        <i class="fa fa-desktop"></i>
                    </button>

                    <a class="btn btn-dark btn-sm ml-2 btnDwnlImgAct" href="" target="_blank" title="Descargar imagen">
                        <i class="fa fa-download"></i>
                    </a>
                    <br><hr>
                    <div class="mouseControls row form-group d-none d-sm-none d-md-flex">
                        <div class="col-md-3">
                            <img src="{{ asset('img/icons/mouse-dblclick.jpg') }}" style="width: 30px; height: auto">  Reproducir
                        </div>
                        <div class="col-md-2">
                            <img src="{{ asset('img/icons/mouse-left.jpg') }}" style="width: 30px; height: auto">  Brillo
                        </div>
                        <div class="col-md-2">
                            <img src="{{ asset('img/icons/mouse-wheel-click.jpg') }}" style="width: 30px; height: auto">  Mover
                        </div>
                        <div class="col-md-2">
                            <img src="{{ asset('img/icons/mouse-right.jpg') }}" style="width: 30px; height: auto">  Zoom
                        </div>
                        <div class="col-md-3">
                            <img src="{{ asset('img/icons/mouse-wheel.jpg') }}" style="width: 30px; height: auto">  Avanzar Imágenes
                        </div>
                    </div>
                </div>
            </div>

            @include('health.report')

        </div>
    </div>
</div>

@endsection