@extends('layouts.master')

@include('operations.operation.scripts.style')
@include('operations.operation.scripts.script')

@section('browser-title', 'Operações - Operação')

@section('content')
    @include('operations.operation.partials.filters')
    <div class="row m-t-20">
        <div class="col-12">
            <div class="tabs-vertical-env d-flex flex-row">
                <ul class="nav tabs-vertical nav-pills">
                    <li class="nav-item" data-toggle="tooltip" title="Headcount">
                        <a href="#headcount" data-toggle="tab" aria-expanded="false" class="nav-link active show">
                            <i class="fa fa-users"></i>
                        </a>
                    </li>
                    <li class="nav-item" data-toggle="tooltip" title="Dashboard">
                        <a href="#dashboard" data-toggle="tab" aria-expanded="false" class="nav-link">
                            <i class="fas fa-tachometer-alt"></i>
                        </a>
                    </li>
                </ul>

                <div class="tab-content col-12 pr-5">

                    <div class="tab-pane fade active show" id="headcount">
                            <div class="card">
                                <h4 class="header-title m-t-0 m-b-20"><i class="fa fa-table"></i> Total</h4>
                                <div class="table-responsive">
                                    <table id="headcount-table" cellspacing="0" cellpadding="0"
                                           class="table table-sm table-hover table-active"
                                           width="100%">
                                        <caption class="text-white-50  text-right small">Headcount referente ao
                                            intervalo:
                                            <strong id="updated_at"></strong>
                                        </caption>
                                        <tr>
                                            <td>
                                                <i>Carregando... </i><i class="fa fa-refresh fa-spin"></i>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>



                            <div class="card">
                                <h4 class="header-title m-t-0 m-b-30"><i class="fas fa-chart-line"></i> Progressão</h4>
                                <div id="chart"></div>
                                <hr>
                                <div class="table-responsive">
                                    <table id="chart-table" cellspacing="0" cellpadding="0"
                                           class="table table-sm table-hover table-active"
                                           width="100%">
                                        <tr>
                                            <td>
                                                <i>Carregando... </i><i class="fa fa-refresh fa-spin"></i>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>

                    </div>

                    <div class="tab-pane fade" id="dashboard">

                            <div class="card">
                                <div class="table-responsive">
                                    <table id="dashboard-table" cellspacing="0" cellpadding="0"
                                           class="table table-bordered table-sm table-hover table-active"
                                           width="100%">
                                        <tr>
                                            <td>
                                                <i>Carregando... </i><i class="fa fa-refresh fa-spin"></i>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>

                            <div class="card">
                                <h4 class="header-title m-t-0 m-b-30"><i class="fas fa-chart-line"></i> Progressão</h4>
                                <div id="dashboard-chart"></div>
                                <hr>
                                <div class="table-responsive">
                                    <table id="dashboard-chart-table" cellspacing="0" cellpadding="0"
                                           class="table table-sm table-hover table-active nowrap"
                                           width="100%">
                                        <tr>
                                            <td>
                                                <i>Carregando... </i><i class="fa fa-refresh fa-spin"></i>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection