@extends('layouts.master')

@include('incident.alert.style')
@include('incident.alert.script')

@section('browser-title', 'Painel de Incidentes - Alertas')

@push('filter-buttons')
    <button class="btn btn-sm btn-custom-sm btn-bmg-primary waves-effect waves-light" type="button" id="update-all"
            data-toggle="tooltip" title="Atualizar">
        <i class="ion ion-md-sync"></i>
    </button>
@endpush

@section('content')

    <div class="row">
        <div class="col-12 col-lg-6">
            <div class="card-box m-b-20" style="height: calc(100% - 20px);">
                <div id="chart-consolidado-indisponibilidade-sistemica" style="height: 250px"></div>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="card-box m-b-20" style="height: calc(100% - 20px);">
                <div id="chart-consolidado-indisponibilidade-fornecedor" style="height: 250px"></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12 col-md-6 col-lg-3">
            <div class="card-box m-b-20" style="height: calc(100% - 20px);">
                <div id="chart-alerta-impacto-negocio" style="height: 180px"></div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
            <div class="card-box m-b-20" style="height: calc(100% - 20px);">
                <div id="chart-alerta-tempo-excedido" style="height: 180px"></div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
            <div class="card-box m-b-20" style="height: calc(100% - 20px);">
                <div id="chart-alerta-liberar-ura" style="height: 180px"></div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
            <div class="card-box m-b-20" style="height: calc(100% - 20px);">
                <div id="chart-alerta-form-sem-encerramento" style="height: 180px"></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12 col-md-6 col-lg-3">
            <div class="card-box m-b-20" style="height: calc(100% - 20px);">
                <div id="items-alerta-impacto-negocio" class="overflow-y" style="height: 130px">
                    <ul class="list-group list-group-flush font-12"></ul>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
            <div class="card-box m-b-20" style="height: calc(100% - 20px);">
                <div id="items-alerta-tempo-excedido" class="overflow-y" style="height: 130px">
                    <ul class="list-group list-group-flush font-12"></ul>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
            <div class="card-box m-b-20" style="height: calc(100% - 20px);">
                <div id="items-alerta-liberar-ura" class="overflow-y" style="height: 130px">
                    <ul class="list-group list-group-flush font-12"></ul>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
            <div class="card-box m-b-20" style="height: calc(100% - 20px);">
                <div id="items-alerta-form-sem-encerramento" class="overflow-y" style="height: 130px">
                    <ul class="list-group list-group-flush font-12"></ul>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card-box m-b-20">
                <table id="table" class="table table-sm table-striped table-nowrap m-b-0 w-100" cellpadding="0" cellspacing="0" width="100%"></table>
            </div>
        </div>
    </div>

    @component('bootstrap::modal',['id'=>'modal-show-incident'])
        @slot('title')
            <i class="fa fa-eye"></i> Incidente
        @endslot

        <div class="row">
            <div class="col-12">
                <ul id="content-show-incident" class="list-group list-group-flush font-12"></ul>
            </div>
        </div>

        @slot('footer')
            <button type="button" data-dismiss="modal" class="btn btn-secondary btn-custom waves-effect w-md m-b-5">
                <i class="ion ion-md-close m-r-5"></i> Fechar
            </button>
        @endslot
    @endcomponent

@endsection