@extends('layouts.digitar')

@section('content')
    @livewireStyles
    <style rel="stylesheet">
        <style>.alert>p,
        .alert>ul {
            font-weight: 300;
        }

        .lista li {
            margin: 0;
            padding: 0;
            text-align: left;
            list-style-type: none;
        }

        .text-card {
            text-align: start;
            margin-left: 50px;
        }

        .display-count-danger {
            display: none;
        }

        .panel-danger:hover .display-count-danger {
            display: block;
        }

        .display-count-info {
            display: none;
        }

        .panel-info:hover .display-count-info {
            display: block;
        }

        .title-card {
            text-decoration: none !important;
            color: white;
        }

        .title-card:hover {
            text-decoration: none !important;
            color: white;
        }

        .buttonPdf {
            margin-top: 25px;
        }

        .container-inputs {
            display: block;
            margin-left: 20px;
        }
    </style>
    <link href="/assets/plugins/chosen/chosen.min.css" rel="stylesheet">
    <div class="the-box rounded">
        <div class="row container-inputs">

            @yield('ged-content')
            <h1 class="page-heading" style="margin-left: 18px;"> SUPERGED <small>Algumas informações úteis</small></h1>
            <hr>
            <div class="row">
                <div class="col-lg-6">
                    <livewire:chart-ged />
                </div>

                <div class="col-md-6">
                    <div class="col-lg-6">
                        <!-- BEGIN TODAY VISITOR TILES -->
                        <div class="panel panel-warning panel-square panel-no-border text-center">
                            <div class="panel-heading">
                                <a class="title-card" href="/lawsProjects">
                                    <h3 class="panel-title">Total de paginas digitalizadas</h3>
                                </a>
                            </div>

                            <div class="panel-body">
                                <h1 class="bolded tiles-number text-warning">{{ $totalPages }}</h1>
                                <p class="text-muted"><small><strong></strong></small></p>
                                <div class="display-count-warning">
                                    <a href="">
                                        <p class="text-muted text-card"><small><strong>
                                                </strong></small></p>
                                    </a>
                                </div>
                            </div><!-- /.panel-body -->
                        </div><!-- /.panel panel-success panel-block-color -->
                    </div>

                    <div class="col-lg-6">
                        <!-- BEGIN TODAY VISITOR TILES -->
                        <div class="panel panel-danger panel-square panel-no-border text-center">
                            <div class="panel-heading">
                                <a class="title-card" href="/lawsProjects">
                                    <h3 class="panel-title">Total de documentos</h3>
                                </a>
                            </div>

                            <div class="panel-body">
                                <h1 class="bolded tiles-number text-danger">{{ $totalDocumentos }}</h1>
                                <p class="text-muted"><small><strong></strong></small></p>
                                <div class="display-count-warning">
                                    <a href="">
                                        <p class="text-muted text-card"><small><strong>
                                                </strong></small></p>
                                    </a>
                                </div>
                            </div><!-- /.panel-body -->
                        </div><!-- /.panel panel-success panel-block-color -->
                    </div>
                </div>

                @livewireScripts

                <script src=" https://cdn.jsdelivr.net/npm/chosen-js@1.8.7/chosen.jquery.min.js "></script>
                <script>
                    $(".userChosen").chosen({
                        disable_search_threshold: 10,
                        no_results_text: "Oops, nothing found!",
                        width: "95%"
                    });
                </script>
            @endsection