@extends('layouts.app')

{{--
@section('styles')
<link rel="stylesheet" href="{{ asset('css/gallery.min.css') }}" />
<style>
    canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
</style>
@endsection

--}}
@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" charset="utf-8"></script>
<script src="{{ asset('js/stats.js') }}" defer></script>
<script type="text/javascript">
    var reportsData = {!! json_encode($graficos['reportes']) !!};
    var studyData = {!! json_encode($graficos['estudios']) !!};
    var dailyData = {!! json_encode($graficos['diario']) !!};
</script>
@endsection

@section('content')

@include('health.actions')

<div class="col-md-12 mb-3">
    <form class="card" action="{{ route('stats.index') }}" method="get">
        <div class="card-header bg-purple text-white">Filtrar estadísticas</div>
        <div class="card-body">
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="">Desde</label>
                        <input type="date" name="desde" class="form-control" autocomplete="off" value="{{ $desde ?? '' }}">
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="">Hasta</label>
                        <input type="date" name="hasta" class="form-control" autocomplete="off" value="{{ $hasta ?? '' }}">
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="">Tipo</label>
                        <select class="form-control" name="tipo">
                            <option value="">Todos</option>
                            @if(!empty($studytypes))
                                @foreach($studytypes as $key => $value)
                                <option value="{{ $key }}" {{ ($tipo == $key)?'selected':'' }} >{{ $value }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-footer text-center text-sm-right">
            <a href="{{ route('stats.index') }}" class="btn btn-secondary mb-2 mb-sm-0">
                <i class="fa fa-remove"></i>
                Limpiar búsqueda
            </a>
            <button type="submit" class="btn btn-purple">
                <i class="fa fa-search"></i>
                Filtar resultados
            </button>
        </div>
    </form>
</div>

<div class="col-md-12 mb-3">
    <div class="card">
        <div class="card-header bg-purple text-white">
            <div class="card-title">
                Gráfico diario
            </div>
        </div>
        <div class="card-body">
            @if(!empty($estudios))
            <canvas id="dailyChart" width="800" height="300"></canvas>
            @else
            <div class="alert alert-danger text-center" role="alert">
                No se han registrado estudios realizados en el período seleccionado
            </div>
            @endif
        </div>
        <div class="card-footer">
            <i>Total de estudios realizados: {{ $graficos['estudios']['total'] }}</i>
        </div>
    </div>
</div>

<div class="col-md-12 mb-3">
    <div class="card">
        <div class="card-header bg-purple text-white">
            <div class="card-title">
                Gráfico diario por barras
            </div>
        </div>
        <div class="card-body">
            @if(!empty($estudios))
            <canvas id="dailyBarChart" width="800" height="300"></canvas>
            @else
            <div class="alert alert-danger text-center" role="alert">
                No se han registrado estudios realizados en el período seleccionado
            </div>
            @endif
        </div>
        <div class="card-footer">
            <i>Total de estudios realizados: {{ $graficos['estudios']['total'] }}</i>
        </div>
    </div>
</div>

<div class="col-md-12 mb-3">
    <div class="card">
        <div class="card-header bg-purple text-white">
            <div class="card-title">
                Estudios realizados
            </div>
        </div>
        <div class="card-body">
            @if(!empty($estudios))
            <div class="row">
                <div class="col-sm-4">
                    <canvas id="studiesChart" width="400" height="400"></canvas>
                </div>
                <div class="col-sm-8">
                    <div class="table-responsive">
                        <table class="table table-stripped">
                            <thead>
                                <tr>
                                    <th>Estudio</th>
                                    <th>Cantidad</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($estudios as $estudio)
                                <tr>
                                    <td>{{ $studytypes[$estudio->mods_in_study] }}</td>
                                    <td>{{ $estudio->cantidad }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            @else
            <div class="alert alert-danger text-center" role="alert">
                No se han registrado estudios realizados en el período seleccionado
            </div>
            @endif
        </div>
        <div class="card-footer">
            <i>Total de estudios realizados: {{ $graficos['estudios']['total'] }}</i>
        </div>
    </div>
</div>

<div class="col-md-12 mb-3">
    <div class="card">
        <div class="card-header bg-purple text-white">
            <div class="card-title">
                Reportes médicos realizados
            </div>
        </div>
        <div class="card-body">
            @if(!empty($reportes))
            <div class="row">
                <div class="col-sm-4">
                    <canvas id="reportsChart" width="400" height="400"></canvas>
                </div>
                <div class="col-sm-8">
                    <div class="table-responsive">
                        <table class="table table-stripped">
                            <thead>
                                <tr>
                                    <th>Médico</th>
                                    <th>Cantidad</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($reportes as $reporte)
                                <tr>
                                    <td>{{ $reporte->user->name }}</td>
                                    <td>{{ $reporte->cantidad }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            @else
            <div class="alert alert-danger text-center" role="alert">
                No se han registrado reportes en el período seleccionado
            </div>
            @endif
        </div>
        <div class="card-footer">
            <i>Total de reportes realizados: {{ $graficos['reportes']['total'] }}</i>
        </div>
    </div>
</div>

@endsection