@extends('adminlte::page')

@section('title', 'raioxOW')
@section('content_header')
    <h1 style="margin-left:3px; margin-top:12px; font-weight: bold;">Raio X Odontoweb
    </h1>   
@stop
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-3">
                            <label style="font-weight:400; padding-top: 6px;">Referência:</label>
                            <select class="form-control" id="referenciaFiltro">
                                <option value="">--Selecione--</option>
                                @foreach ($referencias as $referencia)
                                    <option value="{{ $referencia['ref_refe'] }}">
                                        <li class="page-item active">
                                            <a class="page-link"
                                                href="{{ route('operacional.raioxOWProducao.index') }}/{{ $referencia['ref_refe'] }}">
                                                <p class="page-month">{{ $referencia['ref_refe'] }}</p>
                                            </a>
                                        </li>
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-2">
                            <label style="font-weight:400; padding-top: 6px;">Intervalo de datas:</label>
                            <input type="date" id="dtInicio" value="" class="form-control">
                        </div>
                        <div class="col-2" style="padding-top: 38px;">
                            <input type="date" value="" id="dtFim" class="form-control">
                        </div>
                        <div class="col-3">
                            <label style="font-weight:400; padding-top: 6px;">Tratamento:</label>
                            <select class="form-control" id="inicioOuTermino">
                                <option value="">--Selecione--</option>
                                <option value="I">Inicio do tratamento</option>
                                <option value="T">Termino do tratamento</option>
                            </select>
                        </div>
                        <div class="col-2" style="padding-top: 38px;">
                            <button type="button" class="btn btn-primary" onclick="buscaPorFiltro()"
                                id="mostraAlterar">Fazer Busca</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="card card-primary card-outline card-outline-tabs">
                <div class="card-header p-0 border-bottom-0">
                    <ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="custom-tabs-four-home-tab" data-toggle="pill"
                                href="#custom-tabs-four-home" role="tab" aria-controls="custom-tabs-four-home"
                                aria-selected="true">Odontoweb</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="custom-tabs-four-profile-tab" data-toggle="pill"
                                href="#custom-tabs-four-profile" role="tab" aria-controls="custom-tabs-four-profile"
                                aria-selected="false">Dental</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="custom-tabs-four-messages-tab" data-toggle="pill"
                                href="#custom-tabs-four-messages" role="tab" aria-controls="custom-tabs-four-messages"
                                aria-selected="false">Previsão da Produção</a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="custom-tabs-four-tabContent">
                        <div class="tab-pane fade show active" id="custom-tabs-four-home" role="tabpanel"
                            aria-labelledby="custom-tabs-four-home-tab">
                            <!-- Aba Odontoweb -->
                            <div class="row">
                                <div class="col-sm-12">
                                    <table id="dataTableOdontoweb" class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th class='centro' style="text-align: right;">#</th>
                                                <th class='direita' style="text-align: right;">Quantidade Atendimentos</th>
                                                <th class='direita' style="text-align: right;">Quantidade US</th>
                                                <th class='direita' style="text-align: right;">Quantidade Usuários Atendidos
                                                </th>
                                                <th class='direita' style="text-align: right;">Quantidade Cooperados</th>
                                                <th class='direita' style="text-align: right;">Média / Cooperado</th>
                                                <th class='direita' style="text-align: right;">Quantidade Procedimentos
                                                    Utilizados</th>
                                                <th class='direita' style="text-align: right;">Indicador</th>
                                            </tr>
                                        </thead>
                                        <tbody class="tableOdontoWebTab"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="custom-tabs-four-profile" role="tabpanel"
                            aria-labelledby="custom-tabs-four-profile-tab">
                            <!-- Aba Dental -->
                            <div class="row">
                                <div class="col-md-12">
                                    <h5 style="text-align:center; font-weight:900">COMPRAS NA DENTAL</h5><br>
                                    <table id="dataTableDental" class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th class='direita' style="text-align: right;">Mês</th>
                                                <th class='direita' style="text-align: right;">Qtd Cooperados</th>
                                                <th class='direita' style="text-align: right;">Valor na Produção</th>
                                                <th class='direita' style="text-align: right;">Valor a Vista</th>
                                            </tr>
                                        </thead>
                                        <tbody class="tableDental">
                                            <tr>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <span id="mensagemNenhumResultado" style="display: none; margin-left: 43%">Nenhum resultado encontrado</span>

                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="custom-tabs-four-messages" role="tabpanel"
                            aria-labelledby="custom-tabs-four-messages-tab">
                            <!-- Aba Previsão da Produção -->
                            <div class="row">
                                <div class="col-md-12">
                                    <h5 style="text-align:center; font-weight:900">Previsão da Produção</h5>
                                    <br>                                    
                                    <div class="row">
                                        <div class="table-container col-6">
                                            <table class="table">                                            
                                                <tbody id="tablePrevisaoProducao">
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="table-container col-6">
                                            <table class="table">                                            
                                                <tbody id="tablePrevisaoProducao2">
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <br>                                    
                                </div>
                            </div>
                        </div>                        
                    </div>
                </div>
                <div class="overlay" id="loadingAbaOdontoWeb">
                    <i class="fas fa-2x fa-sync fa-spin"></i>
                </div>
            </div>            
        </div>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <div class="card card-primary card-outline card-outline-tabs">
                <div class="card-header">
                    <h3 class="card-title" style="font-weight:bold;">Guias Finalizadas Por Período</h3>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="custom-tabs-four-tabContent">
                        <div class="row">
                            <div class="col-md-12">
                                <table id="dataTableGuiasFinalizadasPorPeriodo"
                                    class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th class='direita' style="text-align: right;">Quantidade</th>
                                            <th class='direita' style="text-align: center;">Período</th>
                                        </tr>
                                    </thead>
                                    <tbody class="tableGuiasFinalizadasPorPeriodo"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="overlay" id="loadingGuiasFinalizadas">
                    <i class="fas fa-2x fa-sync fa-spin"></i>
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="card card-primary card-outline card-outline-tabs">
                <div class="card-header">
                    <h3 class="card-title" style="font-weight:bold;">Guias Iniciadas Em Meses Anteriores</h3>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="custom-tabs-four-tabContent">
                        <div class="row">
                            <div class="col-md-12">
                                <table id="dataTableGuiasIniciadasEmMesesAnteriores"
                                    class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th class='direita' style="text-align: right;">Quantidade</th>
                                            <th class='direita' style="text-align: center;">Referência</th>
                                        </tr>
                                    </thead>
                                    <tbody class="tableGuiasIniciadasMesesAnteriores"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="overlay" id="loadingGuiasIniciadas">
                    <i class="fas fa-2x fa-sync fa-spin"></i>
                </div>
            </div>
        </div>
    </div>    
@section('css')
    <link href="css/badge.css">
    <style>
        .tableDental:last-child tr td {
            text-align: right;
        }
        .tableOdontoWebTab:last-child tr td {
            text-align: right;
        }

        .tableGuiasFinalizadasPorPeriodo:last-child tr td:nth-child(1) {
            text-align: right;
        }

        .tableGuiasFinalizadasPorPeriodo:last-child tr td:nth-child(2) {
            text-align: center;
        }

        .tableGuiasIniciadasMesesAnteriores:last-child tr td:nth-child(1) {
            text-align: right;
        }

        .tableGuiasIniciadasMesesAnteriores:last-child tr td:nth-child(2) {
            text-align: center;
        }
        .label-right {
            display:block; 
            width:x; 
            height:y; 
            text-align:right;
        }
    </style>
@stop
@section('plugins.Datatables', true)
@section('plugins.DatatablesPlugins', true)
@section('js')
    <script src="{{ asset('js/app.js') }}"></script>
    <script src="{{ asset('js/operacional/raioxOdontoweb.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>

@stop
@stop