@extends('layouts.app')
@section('content')
    <div class="content-heading">
        <div>
            Portlets
            <small>Drag and collapse cards. Refresh and see how their state is automatically saved</small>
        </div>
        <div class="btn-group ml-auto"><button class="btn btn-secondary btn-sm" type="button" onclick="resetPorlets()">Reset Porlets</button></div>
    </div>
    <div class="portlets-wrapper">
        <!-- START row-->
        <div class="row">
            <div class="col-lg-4" id="portlet-1" data-toggle="portlet">
                <!-- START card-->
                <div class="card card-default" id="cardPortlet1">
                    <div class="card-header portlet-handler">Default Card</div>
                    <div class="card-wrapper">
                        <div class="card-body">
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla
                                augue.
                            </p>
                        </div>
                        <div class="card-footer">Card Footer</div>
                    </div>
                </div>
                <!-- END card-->
                <!-- START card-->
                <div class="card bg-primary" id="cardPortlet2">
                    <div class="card-header portlet-handler">Primary Card</div>
                    <div class="card-wrapper">
                        <div class="card-body">
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla
                                augue.
                            </p>
                        </div>
                        <div class="card-footer">Card Footer</div>
                    </div>
                </div>
                <!-- END card-->
                <!-- START card-->
                <div class="card bg-success" id="cardPortlet3">
                    <div class="card-header portlet-handler">Success Card</div>
                    <div class="card-body">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla
                            augue.
                        </p>
                    </div>
                    <div class="card-footer">Card Footer</div>
                </div>
                <!-- END card-->
                <!-- START card-->
                <div class="card" id="cardPortlet4">
                    <div class="portlet-handler">
                        <div class="row row-flush">
                            <div class="col-4 bg-danger text-center d-flex align-items-center justify-content-center rounded-left"><em class="fa fa-music fa-2x"></em></div>
                            <div class="col-8">
                                <div class="card-body text-center">
                                    <h4 class="mt-0">100%</h4>
                                    <p class="mb-0 text-muted">VOLUME</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END card-->
                <!-- START card-->
                <div class="card" id="cardPortlet5">
                    <div class="portlet-handler">
                        <div class="row row-flush">
                            <div class="col-4 bg-inverse text-center d-flex align-items-center justify-content-center rounded-left"><em class="fas fa-code-branch fa-2x"></em></div>
                            <div class="col-8">
                                <div class="card-body text-center">
                                    <h4 class="mt-0">150</h4>
                                    <p class="mb-0 text-muted">FORKS</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END card-->
            </div>
            <div class="col-lg-4" id="portlet-2" data-toggle="portlet">
                <!-- START card-->
                <div class="card bg-info" id="cardPortlet6">
                    <div class="card-header portlet-handler">Info Card</div>
                    <div class="card-body">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla
                            augue.
                        </p>
                    </div>
                    <div class="card-footer">Card Footer</div>
                </div>
                <!-- END card-->
                <!-- START card-->
                <div class="card bg-warning" id="cardPortlet7">
                    <div class="card-header portlet-handler">Warning Card</div>
                    <div class="card-body">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla
                            augue.
                        </p>
                    </div>
                    <div class="card-footer">Card Footer</div>
                </div>
                <!-- END card-->
                <!-- START card-->
                <div class="card bg-danger" id="cardPortlet8">
                    <div class="card-header portlet-handler">Danger Card</div>
                    <div class="card-body">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla
                            augue.
                        </p>
                    </div>
                    <div class="card-footer">Card Footer</div>
                </div>
                <!-- END card-->
                <!-- START card-->
                <div class="card" id="cardPortlet9">
                    <div class="portlet-handler">
                        <div class="row row-flush">
                            <div class="col-12">
                                <div class="card-body text-center bg-purple">
                                    <h4 class="mt-0">10k</h4>
                                    <p class="mb-0 text-white">VISITORS</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END card-->
                <!-- START card-->
                <div class="card" id="cardPortlet10">
                    <div class="portlet-handler">
                        <div class="row row-flush">
                            <div class="col-12">
                                <div class="card-body text-center bg-pink">
                                    <h4 class="mt-0">100%</h4>
                                    <p class="mb-0 text-white">VOLUME</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END card-->
            </div>
            <div class="col-lg-4" id="portlet-3" data-toggle="portlet">
                <!-- START card-->
                <div class="card bg-inverse" id="cardPortlet11">
                    <div class="card-header portlet-handler">Inverse Card</div>
                    <div class="card-body">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla
                            augue.
                        </p>
                    </div>
                    <div class="card-footer">Card Footer</div>
                </div>
                <!-- END card-->
                <!-- START card-->
                <div class="card bg-purple" id="cardPortlet12">
                    <div class="card-header portlet-handler">Purple Card</div>
                    <div class="card-body">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla
                            augue.
                        </p>
                    </div>
                    <div class="card-footer">Card Footer</div>
                </div>
                <!-- END card-->
                <!-- START card-->
                <div class="card bg-green" id="cardPortlet13">
                    <div class="card-header portlet-handler">Green Card</div>
                    <div class="card-body">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla
                            augue.
                        </p>
                    </div>
                    <div class="card-footer">Card Footer</div>
                </div>
                <!-- END card-->
                <!-- START card-->
                <div class="card" id="cardPortlet14">
                    <div class="portlet-handler">
                        <div class="row row-flush">
                            <div class="col-12">
                                <div class="card-body text-center bg-green">
                                    <h4 class="mt-0">150</h4>
                                    <p class="mb-0 text-white">FORKS</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END card-->
                <!-- START card-->
                <div class="card" id="cardPortlet15">
                    <div class="portlet-handler">
                        <div class="row row-flush">
                            <div class="col-12">
                                <div class="card-body text-center bg-primary">
                                    <h4 class="mt-0">10</h4>
                                    <p class="mb-0 text-white">NEW MESSAGES</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END card-->
            </div>
        </div>
        <!-- END row-->
    </div>
@endsection
@section('styles')@endsection
@section('scripts')
    <script src="{{ mix('/js/porlets.js') }}"></script>
@endsection
