@component('bootstrap::modal',['id'=>'order-boxes-modal', 'modal_size' => 'modal-md'])
    @slot('title')
        Ordenador das Caixas
    @endslot
    <div class="row">
        <div class="col-12">
            <div class="custom-control custom-checkbox float-right mb-3">
                <input type="checkbox" class="custom-control-input" id="check_all" checked>
                <label class="custom-control-label" for="check_all">Marcar/Desmarcar Todos</label>
            </div>
        </div>
        <ul id="orderbox" class="col-12 list-unstyled mini-cards"></ul>
    </div>
    @slot('footer')
        <button class="col-6 btn-icon btn btn-light waves-effect w-md waves-light" type="button" data-dismiss="modal">
            <i class="ion ion-md-close mr-2"></i> Fechar
        </button>
        <button class="col-6 btn-icon btn btn-primary w-md waves-effect waves-light" type="button" id="order-box-save">
            <i class="ion ion-md-checkmark mr-2"></i> Confirmar
        </button>
    @endslot
@endcomponent

@component('bootstrap::modal', ['id' => 'modal-timeline', 'modal_size' => 'modal-full'])
    @slot('title')
        <i class="ion ion-md-trending-up"></i> Timeline
    @endslot
    <div class="row">
        <div class="col-12 col-sm-9" style="min-height: 500px;">
            <div class="card">
                <div class="card-body">
                    <div id="modal-timeline-content" style="height: 100%;"></div>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-3">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title font-16 mt-0">Modo</h4>
                    <div class="row">
                        <div class="col-12">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="modal-mode-consolidado" name="modo_eps" value="consolidado"
                                       checked="checked" class="custom-control-input modal-option">
                                <label class="custom-control-label" for="modal-mode-consolidado">Consolidado</label>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="modal-mode-poreps" name="modo_eps" value="por_eps"
                                       class="custom-control-input modal-option">
                                <label class="custom-control-label" for="modal-mode-poreps">Por EPS</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title font-16 mt-0">KPI</h4>
                    <div class="row">
                        <div class="col-12">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="modal-view-sla" name="var_view" value="sla" data-interval="25"
                                       data-prefix="%" checked="checked" class="custom-control-input modal-option">
                                <label class="custom-control-label" for="modal-view-sla">SLA</label>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="modal-view-aband" name="var_view" value="aband" data-max="100"
                                       data-interval="25" data-prefix="%" class="custom-control-input modal-option">
                                <label class="custom-control-label" for="modal-view-aband">% Abandonadas</label>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="custom-control custom-radio">
                                <input type="radio" id="modal-view-tma" name="var_view" value="tma" data-prefix="s"
                                       data-interval="250" class="custom-control-input modal-option">
                                <label class="custom-control-label" for="modal-view-tma">TMA</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @slot('footer')
    @endslot
@endcomponent